（中职）电子商务网页设计项目十二 设计与制作电子商务网点结构项目课件.ppt

YCF正版可修改PPT（中职）电子商务网页设计项目十二 设计与制作电子商务网点结构项目ppt课件项目十二 设计与制作电子商务网点结构项目制作网店告示板制作网店告示板1任务分析任务分析店铺公告包括对自己店铺的简介、想和来访者说的话以及一些忠告和注意事项,这里的内容会被来访者在第一时间注意到,一般被放置在店铺的右上角。店主可以随时发布滚动的文字信息,也可以通过网页代码发布图文配合的公告信息。这样,公告栏将更清晰、美观,还可以加入动画,使其更醒目。相关知识相关知识店铺公告是宣传推广最新发布的产品、公告店铺最新促销信息、发布重要通知的好工具。但是,店铺的公告区域空间有限,所以店铺公告的内容一定要言简意赅,最好能一针见血,吸引顾客。例如,你的店铺是新开的,你可以采用以下三个方案:方案一:新店开张,欢迎过路的朋友到此歇歇;本店秉承诚信待客,一流服务;顾客至上,质量为根本;钱来货到,效率第一;新店新开张,好店好生意,顾客顾到位。方案二:大家好,欢迎大家光临本店;很高兴认识各位朋友,希望大家多多捧场。方案三:我店产品全部来自正规的渠道,以最直接有效的方式送达消费者手里,避免了中间过多的流通环节;本店一直是以薄利多销为原则,在有合理利润的基础上将尽最大可能让利给大家,所以才会比专柜便宜许多。店铺公告栏中还可以写一些吸引人的词语,抓住客户的心理,如:买就送、买一送一、满百包邮、假一罚百、促销活动等;也可以写上自己店铺的特色、优势,店铺主营的产品,或者自己的QQ、联系方式等。任务实施任务实施(1)运行Photoshop CS5,执行“文件”“新建”菜单命令,在弹出的“新建”对话框中,命名为“网店告示板”,预设为“自定”,宽度为800,高度为600,分辨率为72,颜色模式为RGB颜色,背景内容为白色,设置完毕后,单击“确定”按钮。(2)在“图层”面板中,单击“创建新图层”按钮,建立新图层并重命名为“条纹”。设置前景色为#ff02a9,选择工具箱中的“矩形”工具,按住鼠标左键绘制出一个矩形,执行“编辑”“变换”“斜切”菜单命令,通过变形将矩形变为平行四边形。(3)按住Ctrl+Alt,同时选中“条纹”并按住鼠标左键不动可以拖拽出“条纹”的副本。重复这一操作,复制出若干个条纹副本。(4)在“图层”面板中,新建“圆角矩形”图层,设置前景色为白色,选择工具箱中的“圆角矩形”工具,在其工具选项栏中选中“填充像素”按钮,并设置圆角半径为60px,按住鼠标左键拖出一个圆角矩形。(5)选择工具箱中的“文本”工具,在工具选项栏中设置字体类型为方正舒体,字体大小为120,颜色为黑色,输入文本“公告栏”,再设置字体类型为Informal Roman,字体大小为60,输入英文“Announcement”。(6)在“图层”面板,建立新图层“绿花”,选择工具箱中的“自定形状”工具,单击“填充像素”按钮,选择“花1”形状,绘制出一朵绿色的小花。用同样的方法制作“黄花”、“橙花”、“兰花”等图层。项目十二 设计与制作电子商务网点结构项目制作图片分类区制作图片分类区2任务分析任务分析成交转化率,会影响到客户能够买多少产品。店铺是面向消费者市场的,消费者市场由许多个人组成,每个人都有不同的习惯、需求、喜好等,为了满足不同消费者的需要,就需要进行宝贝分类,这是制定店铺营销策略非常重要的环节。相关知识相关知识对宝贝的分类方式有以下五种:1.按宝贝用途分类2.按宝贝原材料分类3.按宝贝的生产方法分类4.按宝贝的主要成分分类5.其他分类任务实施任务实施(1)运行Photoshop CS5,执行“文件”“新建”菜单命令,在弹出的“新建”对话框中,命名为“图片分类区”,预设为“自定”,宽度为780,高度为3 047,分辨率为72,颜色模式为RGB颜色,背景内容为白色,设置完毕后,单击“确定”按钮。(2)按快捷键Ctrl+R显示标尺,单击工具箱中的“移动”工具,用移动工具从标尺中拖出若干条水平参考线和垂直参考线。(3)执行“文件”“置入”菜单命令,将“时尚凉鞋广告.jpg”图片文件置入,按快捷键Ctrl+T调整大小并移到适当的位置。(4)在“图层”面板中,单击“创建新图层”按钮,建立新图层并重命名为“图片分类条目”,设置前景色为#684842,选择工具箱中的“矩形选框”工具,按住鼠标左键拖出一个矩形选框,按快捷键Alt+Delete填充前景色,按Ctrl+D取消选区。选择工具箱中的“自定形状”工具,在该工具选项栏中单击“形状图层”按钮,并在形状列表中选择“箭头9”,颜色为白色,然后在矩形内部左侧绘制出一个白色箭头,再单击“文本”工具,输入文本“时尚凉鞋”。(5)执行“文件”“置入”菜单命令,将“凉鞋01.jpg”图片文件置入,按快捷键Ctrl+T等比例缩小到76%,并移到合适的位置。用同样的方法置入“凉鞋02.jpg”、“凉鞋03.jpg”、“凉鞋04.jpg”、“凉鞋05.jpg”、“凉鞋06.jpg”,并调整大小和位置。(6)执行“文件”“置入”菜单命令,将“时尚休闲男鞋广告.jpg”图片文件置入,按快捷键Ctrl+T调整大小并移到适当的位置。复制“图片分类条目”和“形状1”两个图层,按住Shift键,用移动工具将两个图层副本的内容沿着垂直方向往下移到适当的位置,再单击“文本”工具,输入文本“时尚休闲男鞋”。(7)按照步骤(5)的方法,置入“休闲鞋01.jpg”、“休闲鞋02.jpg”、“休闲鞋03.jpg”、“休闲鞋04.jpg”、“休闲鞋05.jpg”、“休闲鞋06.jpg”等图片文件,并调整其大小和位置。(8)按照步骤(6)和步骤(7)的方法,完成“时尚真皮男鞋”图片分类区的制作。项目十二 设计与制作电子商务网点结构项目制作图标分类列表区制作图标分类列表区3任务分析任务分析宝贝分类是普通店铺设计的重要环节,因为不论是普通店铺还是旺铺,宝贝分类清清楚楚是非常重要的,这能让客户很容易找到想要的产品,尤其是在商品种类繁多的时候。相关知识相关知识宝贝分类是店铺商品的目录指示牌、导航员,一般在店铺左侧,可以是文字或者图片形式。因为图片比文字有更直观、更醒目的效果,所以应设计精美的图片分类,用图文结合的方式使店铺商品分类井井有条,能为店铺增色不少。任务实施任务实施(1)运行Photoshop CS5,执行“文件”“新建”菜单命令,在弹出的“新建”对话框中,命名为“图标分类列表区”,预设为“自定”,宽度为780,高度为2 014,分辨率为72,颜色模式为RGB颜色,背景内容为白色,设置完毕后,单击“确定”按钮。(2)按快捷键Ctrl+R显示标尺,单击工具箱中的“移动”工具,用移动工具从标尺中拖出37条水平参考线和2条垂直参考线。(3)在“图层”面板中,单击“创建新图层”按钮,建立新图层并重命名为“宝贝分类底纹”。选择工具箱中的“矩形选框”工具,按住鼠标左键拖出一个矩形选框,设置前景色为#684842,按快捷键Alt+Delete给矩形选框填充前景色,按Ctrl+D取消选择。(4)在“图层”面板中,单击“创建新图层”按钮,建立新图层并重命名为“圆角矩形边框”。选择工具箱中的“圆角矩形”工具,在该工具选项栏中单击“路径”按钮,按住鼠标左键拖出一个圆角矩形。然后右键单击该矩形,选择“建立选区”命令,将圆角矩形路径转换为选区,如图1220所示。执行“文件”“描边”菜单命令,在“描边”对话框中设置描边宽度为2px,颜色为白色,描边后按Ctrl+D取消选区。(5)在“图层”面板中,单击“创建新图层”按钮建立新图层,选择工具箱中的“自定形状”工具,在该工具选项栏中单击“形状图层”按钮,并在形状列表中选择“箭头9”,颜色为白色,如图1222所示,然后在圆角矩形内部绘制出一个白色箭头。(6)单击工具箱中的“文本”工具,在该工具选项栏中设置字体类型为宋体,字体大小为36,颜色为白色,输入文本“宝贝分类”。(7)在“图层”面板中,单击“创建新图层”按钮,建立新图层并重命名为“图标分类底纹”。选择工具箱中的“画笔”工具,单击画笔工具选项栏中的“切换画笔面板”按钮,在画笔面板中设置画笔笔尖形状。选择工具箱中的“矩形”工具,并在该工具选项栏中单击“填充像素”按钮,设置前景色为#f6e3d9,按住鼠标左键拖出一个矩形。按住Ctrl键,单击“图标分类底纹”图层缩略图将矩形载入选区,打开“路径”面板,单击“从选区生成工作路径”按钮,将矩形选区生成工作路径。然后设置前景色为#684842,右键单击矩形工作路径选择“描边路径”命令,用前面设置好的画笔形状描边,再删除工作路径。(8)在“图层”面板中,单击“创建新图层”按钮,建立新图层并重命名为“减号展开”。按照步骤(4)的方法绘制一个圆角矩形边框,并进行描边,描边宽度为2px,颜色为白色。然后单击“直线”工具,并在其工具选项栏中单击“形状图层”按钮,在圆角矩形内部绘制一条横线。(9)单击工具箱中的“文本”工具,在该工具选项栏中设置字体类型为宋体,字体大小为24,颜色为黑色,输入文本“查看所有宝贝”,再将字体大小改为20,输入文本“按综合按销量按新品按价格”。(10)在“图层”面板中,单击“创建新组”按钮,建立新组并重命名为“潮流男鞋系列”,将“查看所有宝贝”图标的3个图层复制到“潮流男鞋系列”组文件夹中。然后单击工具箱中的“文本”工具,在该工具选项栏中设置字体类型为宋体,字体大小为24,颜色为黑色,输入文本“潮流男鞋系列”,再将字体大小改为20,输入文本“时尚休闲鞋”、“户外休闲鞋”、“日常休闲鞋”等。(11)按照步骤(10)的方法,完成“时尚凉鞋系列”、“户外男鞋系列”、“休闲男靴系列”等图标分类列表的制作。项目十二 设计与制作电子商务网点结构项目制作商品描述模板制作商品描述模板4任务分析任务分析商品描述模板是网店结构中非常关键的项目,因为客户基本都是先看到商品说明页面才进入店铺,而商品销售的关键也是看这个页面是否美观、可信、讲解是否清楚等。相关知识相关知识商品描述模板主要包含以下几个方面:(1)店铺活动:用于营造促销氛围,渲染店铺特色,包括促销活动的通告、新款上线预告、主推款式海报,大促时可以考虑加入关联营销。(2)产品展示:展示商品全貌,包括商品正面、背面、侧面和底面的清晰图,还可以附上推荐理由。(3)产品细节:近距离展示商品亮点。例如,服装网店可以呈现服装面料、内衬、颜色、扣子/拉链等,特别是领子、袖子、腰身和下摆等部位,如有色差需要说明。如有促销活动可加入文案设计,但需要注意网店宝贝文案的注意事项。(4)相关推荐和店铺其他说明:包括搭配单品、系列款式的推荐、物流、退换货和导购信息等(可运用流程图和图标描述退换货)。其他店铺信息可用言简意赅的文字信息表述(如体现专业性的厂房、精美的包装)。商品描述的核心结构如图所示。任务实施任务实施(1)运行Photoshop CS5,执行“文件”“新建”菜单命令,在弹出的“新建”对话框中,命名为“休闲鞋商品描述模板”,预设为“自定”,宽度为26.46,高度为120,分辨率为72,颜色模式为RGB颜色,背景内容为白色,设置完毕后,单击“确定”按钮。(2)在“图层”面板中,单击“创建新组”按钮,将文件夹重命名为“促销广告”,再单击“创建新图层”按钮,建立“图层1”。(3)选择“图层1”,按快捷键Ctrl+R显示标尺,单击工具箱中的“矩形选框”工具,按住鼠标左键不动拖出一个宽为26.46厘米、高为10厘米的矩形选框。然后单击工具箱中的“渐变”工具,再双击选项栏的“编辑渐变”按钮打开“渐变编辑器”对话框,设置0%和100%位置的色标颜色值为#cc3300,30%和70%位置的色标颜色值为#FF0000。按Shift键,用渐变工具由左向右给矩形框填充线性渐变色,按Ctrl+D取消选框。(4)选择工具箱中的“文本”工具,单击选项栏中的“切换字符和段落”按钮,打开“字符”面板,设置各项参数,字体类型为华文行楷、大小为72点、颜色为#FFFFFF,字距为5。输入文本“全民福利马上放鞋”。(5)在“图层”面板中,选择文本图层,单击“添加图层样式”按钮,打开“图层样式”对话框,给文本添加“投影”效果和“颜色叠加”效果。(6)执行“文件”“置入”菜单命令,在“置入”对话框中,选择图片文件“马.png”和“靴子.png”置入到文档中,调整好图片大小并移到适当的位置。(7)选择工具箱中的“直线”工具,在直线选项栏中,单击“形状图层”按钮和“直线”按钮,并在“几何选项”中勾住“终点”复选框,箭头的宽度和长度都为500%,设置线条粗细为2px,线条颜色为#990000。在“图层”面板,复制“形状1”图层,然后选择“形状1副本”图层,按快捷键Ctrl+T,执行“编辑”“变换”“水平翻转”菜单命令,将翻转后的箭头图形右移,并设置字体类型为楷体、大小为18点,字符间距为200,输入文本“2014 马上有鞋”。(8)单击工具箱中的“椭圆”工具,设置前景色为#cc0000,按Shift键绘制出一个正圆,再单击“图层”面板中的“添加图层样式”按钮,给正圆添加“内阴影”效果。执行“文件”“置入”菜单命令,将图片“促销鞋子1.png”置入,并放到正圆内。然后单击工具箱中的“矩形选框”工具,绘制矩形选框,填充白色,输入文本“促销价”,字体颜色为#cc0000。在“促销价”上方输入文本“原价:378”,字体颜色为#990000,用“直线”工具绘制删除线。用同样的方法制作“促销鞋子2”。(9)建立新图层,单击工具箱的“椭圆”工具,设置前景色为#45f807,绘制出一个椭圆,执行“编辑”“变换”“扭曲”菜单命令,拖动控制点,对椭圆进行变形操作,然后连续复制该图层2次,并适当缩小。(10)在“图层”面板中,新建组并重命名为“横条1”,选择该文件夹,新建图层并重命名为“横条模板”,单击工具箱中的“矩形”工具,设置前景色为#ff0000,绘制出一个宽度4厘米、高度1.6厘米的矩形。再单击工具箱的“钢笔”工具,在矩形的右上角勾勒出一个直角三角形的路径,然后切换到“路径”面板,单击“将路径作为选区载入”按钮,按Delete键删除三角形选区的内容。单击“图层”面板中的“添加图层样式”按钮,给梯形添加“斜面和浮雕”效果,再输入文本“1”。(11)在“横条1”组下,单击工具箱中的“文本”工具,在选项栏中设置字体类型为楷体、大小为26点、颜色为#990000,输入文本“产品信息”。然后设置字体类型为Times New Roman、大小为14点、颜色同上,输入文本“PRODUCTION INFORMATION”。(12)在“横条1”组下,新建图层并重命名为“长方形”,单击工具箱中的“矩形选框”工具,按住鼠标左键不动拖出一个矩形选框,然后单击“渐变”工具,打开“渐变编辑器”对话框,设置第一、三个色块颜色为#ffffff,第二个色块颜色为#45f807。按Shift键给矩形选框填充线性渐变色。单击“矩形选框”工具,按Shift键绘制一个正方形选框,执行“编辑”“描边”菜单命令,再单击“自定形状”工具,在选项栏中单击扩展按钮追加全部形状,选择“问号”形状。新建图层并重命名为“问号”,在正方框中按住鼠标左键不动拖出一个问号。(13)在“图层”面板中,右键单击“横条1”组,选择“复制组”,将“横条1”组所有的图层拷贝到“横条2”组中。单击“横条2”组前面的三角形按钮展开文件夹,如图1250所示。单击工具箱中的“文本”工具,选择文本图层“1”,将“1”改为“2”;选择文本图层“产品信息”,将“产品信息”改为“产品展示”;选择文本图层“PRODUCT INFORMATION”,将“PRODUCT INFORMATION”改为“PRODUCT DISPLAY”;选择“放大镜”图层,单击“自定形状”工具,在选项栏中选择“放大镜”形状,将“问号”改为“放大镜”。(14)按照上述步骤,完成“横条3”、“横条4”、“横条5”、“横条6”、“横条7”的创建。(15)在“图层”面板上,新建组并重命名为“产品信息”,执行“文件”“置入”菜单命令,置入“休闲鞋.jpg”图片文件,适当调整图片大小。单击工具箱的“文本工具”,设置字体类型为宋体、大小为18、颜色为黑色,输入产品的基本信息。(16)在“图层”面板上,新建组并重命名为“展示板”,建立新图层并命名为“左上边角”。单击工具箱中的“矩形选框”工具,按Shift键拖出一个正方形选框,按快捷键Alt+Delete填充前景色#ff0000,按Ctrl+D取消选区。在该正方形上面再拖出一个正方形选框,按Delete删除选区内的内容。然后复制“左上边角”图层,将左上边角水平向右移动,执行“编辑”“变换”“水平翻转”菜单命令,得到“右上边角”图层。用同样的方法完成“左下边角”和“右下边角”图层的制作(17)选中“展示板”组,执行“文件”“置入”菜单命令,置入“展示1.jpg”图片文件,调整图片大小。用同样的方法相继置入“展示2.jpg”、“展示3.jpg”、“展示4.jpg”等图片文件,调整图片大小,并移到适当的位置。(18)在“图层”面板上,新建组并重命名为“细节1”,建立新图层并命名为“大方框”,单击工具箱中的“矩形选框”工具,按住鼠标左键不动拖出一个正方形选框并填充前景色#cccccc。建立新图层并命名为“小方框”,用“矩形选框”工具,按住鼠标左键不动拖出一个正方形选框并填充前景色#45f807,再建立和制作“虚线”图层和“三角形”图层。单击工具箱中的“文本”工具,设置字体类型为黑体、大小为30、颜色为白色,输入文本“更结实”;设置字体大小为24,输入文本“特点1”;设置字体大小为20,颜色为#ff0000,输入文本“传承意式穿手工鞋”。(19)继续建立新图层,选择工具箱中的“矩形”工具,单击选项栏中“形状图层”按钮,在大正方形内拖出一个矩形。执行“文件”“置入”菜单命令,置入“特点1.jpg”图片文件,适当调整图片大小,右键单击该图片图层,在弹出的快捷菜单中选择“创建剪贴蒙版”。(20)在“图层”面板中,右键单击“细节1”组,在弹出的快捷菜单中,选择“复制组”菜单命令,将“细节1副本”重命名为“细节2”。然后选中“细节2”组,用移动工具将“细节2”组中所有图层水平向右移到适当的位置,并把商品“特点1”的相关文字描述改为“特点2”对应的描述文字,同时删除“特点1”图片图层,重新置入“特点2.jpg”图片文件,并创建剪贴蒙版。用同样的方法制作“细节3”组和“细节4”组。(21)在“图层”面板上,新建组并重命名为“注意事项”,建立新图层并命名为“项目符号”,单击工具箱中的“自定形状”工具,在其选项栏中单击“形状图层”按钮,并选择“星爆”形状,设置颜色为#45f807。绘制出4个项目符号。(22)在“图层”面板上,新建组并重命名为“购物流程”,建立新图层并命名为“底框”,单击工具箱中“矩形选框”工具,绘制矩形选框并对选框进行描边和填充,描边颜色为#990000,填充颜色为#cccccc,在底框中输入相应的文字。然后使用“自定形状”工具中的“箭头”形状,制作购物流程图。(23)利用上面制作项目符号与编号的方法,完成“售后服务”部分的设计。(24)按快捷键Ctrl+R显示标尺,选择工具箱中的“移动”工具,根据网页功能的需要使用“移动”工具从水平标尺中拖出若干条参考线。选择工具箱中的“切片”工具,单击“切片”工具选项栏中的“基于参考线的切片”按钮。单击工具箱中的“切片选择”工具,用“切片选择”工具单击第8块切片,然后单击该工具选项栏中的“划分”按钮,设置“划分切片”对话框。(25)执行“文件”“存储为Web和设备所用格式”菜单命令,在弹出的对话框中,单击“预览”按钮,可以在浏览器中预览优化的图像。最后设置切片图片存储类型为jpeg格式,单击“存储”按钮,在弹出的对话框中选择存放切片图片的路径。