电子商务网页设计(第二版)课件5

Click to edit Master title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,11/7/2009,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,电子商务网页设计,教育部中等职业教育专业技能课立项教材,中等职业教育实战型电子商务规划教材,主编 欧志敏 刘生娥,电子商务网页设计教育部中等职业教育专业技能课立项教材主编,content,电子商务网页赏析,商品图片的使用与编辑,1,5,目录,HTML,网页制作基础,2,电子商务网页编辑软件,Dreamweaver 2020,3,网页元素的编辑,4,表格与,DIV,的使用,HTML5,与响应式网页设计,6,10,使用,CSS,控制页面元素,7,使用,Animate,制作网页中的动画,8,使用,JavaScript,制作动态效果,9,设计与制作电子商务网店结构项目,11,content电子商务网页赏析商品图片的使用与编辑15目录H,设计与制作电子商务网店结构项目,11,任务一 制作网店告示板,任务二 制作图片分类区,任务三 制作商品宣传图,设计与制作电子商务网店结构项目11任务一 制作网店告示板,网店设计能提升店铺形象,吸引人的眼球,客户会通过网店设计第一时间了解你店铺的讯息。本项目将介绍网店结构的制作方法,让大家了解到网店设计的好处。,项目介绍,网店设计能提升店铺形象,吸引人的眼球,客户会通过网店设计第,C,ontents,目录,任务分析,1,相关知识,2,任务实施,3,任务一 制作网店告示板,Contents目录任务分析1相关知识2任务实施3任务一,任务分析,1,店铺公告包括对自己店铺的简介、想和来访者说的话以及一些忠告和注意事项,这里的内容会被来访者在第一时间注意到,一般被放置在店铺的右上角。店主可以随时发布滚动的文字信息,也可以通过网页代码发布图文配合的公告信息。这样,公告栏将更清晰、美观,还可以加入动画,使其更醒目。,任务分析1 店铺公告包括对自己店铺的简介、想和来访者说的话以,店铺公告是宣传推广最新发布的产品、公告店铺最新促销信息、发布重要通知的好工具。但是,店铺的公告区域空间有限,所以店铺公告的内容一定要言简意赅,最好能一针见血,吸引顾客。例如,你的店铺是新开的,你可以采用以下三个方案:,：,2,方案二:大家好,欢迎大家光临本店;很高兴认识各位朋友,希望大家多多捧场。,1,方案一:新店开张,欢迎过路的朋友到此歇歇;本店秉承诚信待客,一流服务;顾客至上,质量为根本;钱来货到,效率第一;新店新开张,好店好生意,顾客顾到位。,3,方案三:我店产品全部来自正规的渠道,以最直接有效的方式送达消费者手里,避免了中间过多的流通环节;本店一直是以薄利多销为原则,在有合理利润的基础上将尽最大可能让利给大家,所以才会比专柜便宜许多。,相关知识,2,店铺公告是宣传推广最新发布的产品、公告店铺最新促,3,任务实施,运行Photoshop,执行“文件”“新建”菜单命令,在弹出的“新建”对话框中,命名为“网店告示板”,预设为“自定”,宽度为800,高度为600,分辨率为72,颜色模式为RGB颜色,背景内容为白色,设置完毕后,单击“确定”按钮,如图111所示。,1,图111“新建”对话框,3任务实施运行Photoshop,执行“文件”“新建”菜单,3,任务实施,在“图层”面板中,单击“创建新图层”按钮 ,建立新图层并重命名为“条纹”。设置前景色为#ff02a9,选择工具箱中的“矩形”工具,按住鼠标左键绘制出一个矩形,执行“编辑”“变换”“斜切”菜单命令,通过变形将矩形变为平行四边形,如图112所示。,2,图112绘制“条纹”,3任务实施在“图层”面板中,单击“创建新图层”按钮,3,任务实施,按住Ctrl+Alt,同时选中“条纹”并按住鼠标左键不动可以拖拽出“条纹”的副本。重复这一操作,复制出若干个条纹副本,效果如图113所示。,3,图113制作背景”,3任务实施按住Ctrl+Alt,同时选中“条纹”并按住鼠标左,3,任务实施,在“图层”面板中,新建“圆角矩形”图层,设置前景色为白色,选择工具箱中的“圆角矩形”工具,在其工具选项栏中选中“填充像素”按钮,并设置圆角半径为60px,按住鼠标左键拖出一个圆角矩形,如图114所示。,4,图114绘制圆角矩形,3任务实施在“图层”面板中,新建“圆角矩形”图层,设置前景色,3,任务实施,选择工具箱中的“文本”工具,在工具选项栏中设置字体类型为方正舒体,字体大小为120,颜色为黑色,输入文本“公告栏”,再设置字体类型为Informal Roman,字体大小为60,输入英文“Announcement”,如图115所示。,5,图115输入文本,3任务实施选择工具箱中的“文本”工具,在工具选项栏中设置字体,3,任务实施,在“图层”面板,建立新图层“绿花”,选择工具箱中的“自定形状”工具,单击“填充像素”按钮,选择“形状44”形状,如图116所示,绘制出一朵绿色的小花。用同样的方法制作其它花形状等图层,如图117所示。,6,图116“自定形状”工具选项栏,图,11,7效果图,3任务实施在“图层”面板,建立新图层“绿花”,选择工具箱中的,C,ontents,目录,任务分析,1,相关知识,2,任务实施,3,任务二 制作图片分类区,Contents目录任务分析1相关知识2任务实施3任务二,任务分析,1,店铺的宝贝分类是非常重要的。宝贝的分类如何进行标明设置会影响到店铺的PV及成交转化率,会影响到客户能够买多少产品。店铺是面向消费者市场的,消费者市场由许多个人组成,每个人都有不同的习惯、需求、喜好等,为了满足不同消费者的需要,就需要进行宝贝分类,这是制定店铺营销策略非常重要的环节。,任务分析1 店铺的宝贝分类是非常重要的。宝贝的分类如何进行标,2,相关知识,按宝贝的生产方法分类,按宝贝的主要成分分类,3,4,5,其他分类,对宝贝的分类方式有以下五种:,1,2,按宝贝用途分类,按宝贝原材料分类,2相关知识按宝贝的生产方法分类按宝贝的主要成分分类345其他,2,相关知识,1,按宝贝用途分类,不同的用途造成了各种宝贝不同的价值,因此可以通过宝贝的用途来进行分类,这种分类方法不仅适合对宝贝进行大类划分,也可用于进一步的细分。比如“家用电器”是一大类,按用途进一步细分为,:,音响设备、视频设备、制冷空调器具、厨房器具等。按用途分类便于比较同类宝贝的性能,因此有利于客户进行对比购买。多用途的宝贝不适合用此分类方式。,2相关知识1按宝贝用途分类不同的用途造成了各种宝贝不同的价值,2,相关知识,2,按宝贝原材料分类,原材料的种类与质量往往对宝贝的性能和质量起到决定性的作用,所以原材料是很重要的分类标志,此分类方式适用于原材料来源较多,并且对其性能起决定作用的宝贝。例如,服装类的宝贝按原材料进行分类,可分为棉布服装、皮革服装、丝绸服装等,这些宝贝的使用价值和特点都有明显的差别。由多种原材料制成的宝贝不适用于此分类方式。,2相关知识2按宝贝原材料分类原材料的种类与质量往往对宝贝的性,2,相关知识,按宝贝的主要成分分类,4,许多宝贝的性能、质量等都是由宝贝的主要成分决定的,因此宝贝的主要成分或特殊成分是进行宝贝分类的重要标志。例如,塑料产品的主要成分有明显的不同,分为聚乙烯塑料、聚苯乙烯塑料等。对于主要成分相同而含有特殊成分的产品,如营养护肤霜类的宝贝,可按其特殊成分进行分类,如人参营养霜、维生素,E,营养霜、珍珠粉营养霜等。化学成分复杂或区别不明显的宝贝不适用于此分类方式。,2相关知识按宝贝的主要成分分类4许多宝贝的性能、质量等都是由,2,相关知识,5,其他分类,如果宝贝的特性、结构、重量、颜色、产地、收获季节等可区分清楚,容易进行分类,那么也可以采用此类方式进行分类。,2相关知识5其他分类如果宝贝的特性、结构、重量、颜色、产地、,3,任务实施,运行Photoshop,执行“文件”“新建”菜单命令,在弹出的“新建”对话框中,命名为“图片分类区”,预设为“自定”,宽度为780,高度为3 047,分辨率为72,颜色模式为RGB颜色,背景内容为白色,设置完毕后,单击“确定”按钮,如图118所示。,1,图,11,8“新建”对话框,3任务实施运行Photoshop,执行“文件”“新建”菜单,3,任务实施,按快捷键Ctrl+R显示标尺,单击工具箱中的“移动”工具,用移动工具从标尺中拖出若干条水平参考线和垂直参考线,如图119所示。,2,图,11,9拖出参考线,3任务实施按快捷键Ctrl+R显示标尺,单击工具箱中的“移动,3,任务实施,执行“文件”“置入嵌入对象”菜单命令,将“时尚凉鞋广告.jpg”图片文件置入,按快捷键Ctrl+T调整大小并移到适当的位置,如图1110所示。,3,图1110置入图片文件,3任务实施执行“文件”“置入嵌入对象”菜单命令,将“时尚凉,3,任务实施,在“图层”面板中,单击“创建新图层”按钮 ,建立新图层并重命名为“图片分类条目”,设置前景色为#684842,选择工具箱中的“矩形选框”工具,按住鼠标左键拖出一个矩形选框,按快捷键Alt+Delete填充前景色,按Ctrl+D取消选区。选择工具箱中的“自定形状”工具,在该工具选项栏中单击“形状图层”按钮 ,并在形状列表中选择“箭头9”,颜色为白色,然后在矩形内部左侧绘制出一个白色箭头,再单击“文本”工具,输入文本“时尚凉鞋”,如图1111所示。,4,图1111绘制图片分类标志,3任务实施在“图层”面板中,单击“创建新图层”按钮 ,3,任务实施,执行“文件”“置入嵌入对象”菜单命令,将“凉鞋01.jpg”图片文件置入,按快捷键Ctrl+T等比例缩小到76%,并移到合适的位置。用同样的方法置入“凉鞋02.jpg”、“凉鞋03.jpg”、“凉鞋04.jpg”、“凉鞋05.jpg”、“凉鞋06.jpg”,并调整大小和位置,如图1112所示。,5,图,11,12置入并排版“时尚凉鞋”分类区的所有商品图片,3任务实施执行“文件”“置入嵌入对象”菜单命令,将“凉鞋0,3,任务实施,执行“文件”“置入嵌入对象”菜单命令,将“时尚休闲男鞋广告.jpg”图片文件置入,按快捷键Ctrl+T调整大小并移到适当的位置。复制“图片分类条目”和“形状1”两个图层,按住Shift键,用移动工具将两个图层副本的内容沿着垂直方向往下移到适当的位置,再单击“文本”工具,输入文本“时尚休闲男鞋”,如图1113所示。,6,图,11,13制作第二个图片分类区,3任务实施执行“文件”“置入嵌入对象”菜单命令,将“时尚休,3,任务实施,按照步骤(5)的方法,置入嵌入对象“休闲鞋01.jpg”、“休闲鞋02.jpg”、“休闲鞋03.jpg”、“休闲鞋04.jpg”、“休闲鞋05.jpg”、“休闲鞋06.jpg”等图片文件,并调整其大小和位置,如图1114所示。,7,图,11,14置入并排版“时尚休闲男鞋”分类区的所有商品图片,3任务实施按照步骤(5)的方法,置入嵌入对象“休闲鞋01.j,3,任务实施,按照步骤(6)和步骤(7)的方法,完成“时尚真皮男鞋”图片分类区的制作,如图1115所示。,8,图1115完成“时尚真皮男鞋”分类区,3任务实施按照步骤(6)和步骤(7)的方法,完成“时尚真皮男,3,任务实施,完成上面的操作后,效果图如图1116所示。,9,图,11,16效果图,3任务实施完成上面的操作后,效果图如图1116所示。9图1,C,ontents,目录,任务分析,1,任务实施,3,任务三 制作商品宣传图,相关知识,2,Contents目录任务分析1任务实施3任务三 制作商品,任务分析,1,商品图片是用户了解商品的第一印象，宣传图片不仅要清晰显现出商品的外观特征，更要用巧妙的构图给用户留下深刻的印象，当然，文字LOGO和宣传话语也必不可少。,任务分析1 商品图片是用户了解商品的