1、教育部中等职业教育专业技能课立项教材中等职业教育实战型电子商务规划教材主编 欧志敏 刘生娥content电子商务网页赏析商品图片的使用与编辑15目录HTML网页制作基础2电子商务网页编辑软件Dreamweaver 20203网页元素的编辑4表格与DIV的使用HTML5与响应式网页设计610使用CSS控制页面元素7使用Animate制作网页中的动画8 使用JavaScript制作动态效果9设计与制作电子商务网店结构项目1111任务一 制作网店告示板任务二 制作图片分类区任务三 制作商品宣传图 网店设计能提升店铺形象,吸引人的眼球,客户会通过网店设计第一时间了解你店铺的讯息。本项目将介绍网店结构的
2、制作方法,让大家了解到网店设计的好处。项目介绍Contents目录任务分析1相关知识2任务实施3 任务一任务一 制作网店告示板制作网店告示板 任务分析1 店铺公告包括对自己店铺的简介、想和来访者说的话以及一些忠告和注意事项,这里的内容会被来访者在第一时间注意到,一般被放置在店铺的右上角。店主可以随时发布滚动的文字信息,也可以通过网页代码发布图文配合的公告信息。这样,公告栏将更清晰、美观,还可以加入动画,使其更醒目。店铺公告是宣传推广最新发布的产品、公告店铺最新促销信息、发布重要通知的好工具。但是,店铺的公告区域空间有限,所以店铺公告的内容一定要言简意赅,最好能一针见血,吸引顾客。例如,你的店铺
3、是新开的,你可以采用以下三个方案:：2方案二方案二:大家好大家好,欢迎欢迎大家光临本店大家光临本店;很高兴很高兴认识各位朋友认识各位朋友,希望大希望大家多多捧场。家多多捧场。1方案一方案一:新店开张新店开张,欢欢迎过路的朋友到此迎过路的朋友到此歇歇歇歇;本店秉承诚信本店秉承诚信待客待客,一流服务一流服务;顾客顾客至上至上,质量为根本质量为根本;钱钱来货到来货到,效率第一效率第一;新新店新开张店新开张,好店好生好店好生意意,顾客顾到位。顾客顾到位。3方案三方案三:我店产品全部我店产品全部来自正规的渠道来自正规的渠道,以最以最直接有效的方式送达消直接有效的方式送达消费者手里费者手里,避免了中间避免
4、了中间过多的流通环节过多的流通环节;本店本店一直是以薄利多销为原一直是以薄利多销为原则则,在有合理利润的基在有合理利润的基础上将尽最大可能让利础上将尽最大可能让利给大家给大家,所以才会比专所以才会比专柜便宜许多。柜便宜许多。相关知识23任务实施运行运行Photoshop,Photoshop,执行执行“文件文件”“”“新建新建”菜菜单命令单命令,在弹出的在弹出的“新新建建”对话框中对话框中,命名为命名为“网店告示板网店告示板”,”,预设预设为为“自定自定”,”,宽度为宽度为800,800,高度为高度为600,600,分辨率为分辨率为72,72,颜色模式为颜色模式为RGBRGB颜色颜色,背背景内容
5、为白色景内容为白色,设置完设置完毕后毕后,单击单击“确定确定”按按钮钮,如图如图111111所示。所示。1图111“新建”对话框3任务实施在在“图层图层”面板中面板中,单单击击“创建新图层创建新图层”按按钮钮 ,建立新图层并建立新图层并重命名为重命名为“条纹条纹”。设。设置前景色为置前景色为#ff02a9,#ff02a9,选选择工具箱中的择工具箱中的“矩形矩形”工具工具,按住鼠标左键绘按住鼠标左键绘制出一个矩形制出一个矩形,执行执行“编辑编辑”“”“变变换换”“”“斜切斜切”菜单命菜单命令令,通过变形将矩形变通过变形将矩形变为平行四边形为平行四边形,如图如图112112所示。所示。2图112绘
6、制“条纹”3任务实施按住按住Ctrl+Alt,Ctrl+Alt,同时选中同时选中“条纹条纹”并按住鼠标左并按住鼠标左键不动可以拖拽出键不动可以拖拽出“条条纹纹”的副本。重复这一的副本。重复这一操作操作,复制出若干个条纹复制出若干个条纹副本副本,效果如图效果如图113113所所示。示。3图113制作背景”3任务实施在在“图层图层”面板中面板中,新建新建“圆角矩形圆角矩形”图层图层,设置设置前景色为白色前景色为白色,选择工具选择工具箱中的箱中的“圆角矩形圆角矩形”工工具具,在其工具选项栏中在其工具选项栏中选中选中“填充像素填充像素”按钮按钮,并设置圆角半径为并设置圆角半径为60px,60px,按住
7、鼠标左键拖出一个按住鼠标左键拖出一个圆角矩形圆角矩形,如图如图114114所所示。示。4图114绘制圆角矩形3任务实施选择工具箱中的选择工具箱中的“文本文本”工具工具,在工具选项栏中设在工具选项栏中设置字体类型为方正舒体置字体类型为方正舒体,字体大小为字体大小为120,120,颜色为颜色为黑色黑色,输入文本输入文本“公告公告栏栏”,”,再设置字体类型为再设置字体类型为Informal Roman,Informal Roman,字体大字体大小为小为60,60,输入英文输入英文“Announcement”,“Announcement”,如图如图115115所示。所示。5图115输入文本3任务实施在
8、在“图层图层”面板面板,建立新图层建立新图层“绿花绿花”,”,选择工具箱选择工具箱中的中的“自定形状自定形状”工具工具,单击单击“填充像素填充像素”按钮按钮,选选择择“形状形状44”44”形状形状,如图如图116116所示所示,绘制出一朵绿绘制出一朵绿色的小花。用同样的方法制作其它花形状等图层色的小花。用同样的方法制作其它花形状等图层,如图如图117117所示。所示。6图116“自定形状”工具选项栏图117效果图Contents目录任务分析1相关知识2任务实施3 任务二任务二 制作图片分类区制作图片分类区 任务分析1 店铺的宝贝分类是非常重要的。宝贝的分类如何进行标明设置会影响到店铺的PV及成
9、交转化率,会影响到客户能够买多少产品。店铺是面向消费者市场的,消费者市场由许多个人组成,每个人都有不同的习惯、需求、喜好等,为了满足不同消费者的需要,就需要进行宝贝分类,这是制定店铺营销策略非常重要的环节。2相关知识按宝贝的生产方法分类按宝贝的生产方法分类按宝贝的主要成分分类按宝贝的主要成分分类345其他分类 对宝贝的分类方式有以下五种:12按宝贝用途分类按宝贝用途分类按宝贝原材料分类按宝贝原材料分类2相关知识1按宝贝用途分类按宝贝用途分类不同的用途造成了各种宝贝不同的价值,因此可以通过宝贝的用途来进行分类,这种分类方法不仅适合对宝贝进行大类划分,也可用于进一步的细分。比如“家用电器”是一大类
10、,按用途进一步细分为:音响设备、视频设备、制冷空调器具、厨房器具等。按用途分类便于比较同类宝贝的性能,因此有利于客户进行对比购买。多用途的宝贝不适合用此分类方式。2相关知识2按宝贝原材料分类按宝贝原材料分类原材料的种类与质量往往对宝贝的性能和质量起到决定性的作用,所以原材料是很重要的分类标志,此分类方式适用于原材料来源较多,并且对其性能起决定作用的宝贝。例如,服装类的宝贝按原材料进行分类,可分为棉布服装、皮革服装、丝绸服装等,这些宝贝的使用价值和特点都有明显的差别。由多种原材料制成的宝贝不适用于此分类方式。2相关知识按宝贝的主要成分分类按宝贝的主要成分分类4许多宝贝的性能、质量等都是由宝贝的主
11、要成分决定的,因此宝贝的主要成分或特殊成分是进行宝贝分类的重要标志。例如,塑料产品的主要成分有明显的不同,分为聚乙烯塑料、聚苯乙烯塑料等。对于主要成分相同而含有特殊成分的产品,如营养护肤霜类的宝贝,可按其特殊成分进行分类,如人参营养霜、维生素E营养霜、珍珠粉营养霜等。化学成分复杂或区别不明显的宝贝不适用于此分类方式。2相关知识5其他分类如果宝贝的特性、结构、重量、颜色、产地、收获季节等可区分清楚,容易进行分类,那么也可以采用此类方式进行分类。3任务实施运行运行Photoshop,Photoshop,执行执行“文件文件”“”“新建新建”菜单命令菜单命令,在弹出的在弹出的“新建新建”对话框中对话框
12、中,命名为命名为“图片分类区图片分类区”,”,预设为预设为“自定自定”,”,宽度为宽度为780,780,高度高度为为3 047,3 047,分辨率为分辨率为72,72,颜色模式为颜色模式为RGBRGB颜色颜色,背景内容为白色背景内容为白色,设置完毕设置完毕后后,单击单击“确定确定”按钮按钮,如图如图118118所示。所示。1图118“新建”对话框3任务实施按快捷键按快捷键Ctrl+RCtrl+R显示显示标尺标尺,单击工具箱中单击工具箱中的的“移动移动”工具工具,用用移动工具从标尺中拖移动工具从标尺中拖出若干条水平参考线出若干条水平参考线和垂直参考线和垂直参考线,如图如图119119所示。所示。
13、2图119拖出参考线3任务实施执行执行“文件文件”“”“置置入嵌入对象入嵌入对象”菜单命菜单命令令,将将“时尚凉鞋广时尚凉鞋广告告.jpg”.jpg”图片文件置图片文件置入入,按快捷键按快捷键Ctrl+TCtrl+T调整大小并移到适当调整大小并移到适当的位置的位置,如图如图11101110所示。所示。3图1110置入图片文件3任务实施在在“图层图层”面板中面板中,单击单击“创建新图层创建新图层”按钮按钮 ,建立新图层并重命建立新图层并重命名为名为“图片分类条目图片分类条目”,”,设置前景色为设置前景色为#684842,#684842,选择工具箱中的选择工具箱中的“矩矩形选框形选框”工具工具,按
14、住鼠标左键拖出一个矩形选框按住鼠标左键拖出一个矩形选框,按快捷键按快捷键Alt+DeleteAlt+Delete填充前景色填充前景色,按按Ctrl+DCtrl+D取消选区。选择工具箱中的取消选区。选择工具箱中的“自定自定形状形状”工具工具,在该工具选项栏中单击在该工具选项栏中单击“形状图层形状图层”按钮按钮 ,并在形并在形状列表中选择状列表中选择“箭头箭头9”,9”,颜色为白色颜色为白色,然后在矩形内部左侧绘制出一然后在矩形内部左侧绘制出一个白色箭头个白色箭头,再单击再单击“文本文本”工具工具,输入文本输入文本“时尚凉鞋时尚凉鞋”,”,如图如图11111111所示。所示。4图1111绘制图片分
15、类标志3任务实施执行执行“文件文件”“”“置入嵌入对象置入嵌入对象”菜单命令菜单命令,将将“凉鞋凉鞋01.jpg”01.jpg”图片图片文件置入文件置入,按快捷键按快捷键Ctrl+TCtrl+T等比例缩小到等比例缩小到76%,76%,并移到合适的位置。用并移到合适的位置。用同样的方法置入同样的方法置入“凉鞋凉鞋02.jpg”02.jpg”、“凉鞋凉鞋03.jpg”03.jpg”、“凉鞋凉鞋04.jpg”04.jpg”、“凉鞋凉鞋05.jpg”05.jpg”、“凉鞋凉鞋06.jpg”,06.jpg”,并调整大小和位置并调整大小和位置,如图如图11121112所所示。示。5图1112置入并排版“时
16、尚凉鞋”分类区的所有商品图片3任务实施执行执行“文件文件”“”“置入嵌入对象置入嵌入对象”菜单命令菜单命令,将将“时尚休闲男鞋广时尚休闲男鞋广告告.jpg”.jpg”图片文件置入图片文件置入,按快捷键按快捷键Ctrl+TCtrl+T调整大小并移到适当的位置。调整大小并移到适当的位置。复制复制“图片分类条目图片分类条目”和和“形状形状1”1”两个图层两个图层,按住按住ShiftShift键键,用移动工用移动工具将两个图层副本的内容沿着垂直方向往下移到适当的位置具将两个图层副本的内容沿着垂直方向往下移到适当的位置,再单击再单击“文本文本”工具工具,输入文本输入文本“时尚休闲男鞋时尚休闲男鞋”,”,
17、如图如图11131113所示。所示。6图1113制作第二个图片分类区3任务实施按照步骤按照步骤(5)(5)的方法的方法,置入嵌入对象置入嵌入对象“休闲鞋休闲鞋01.jpg”01.jpg”、“休闲鞋休闲鞋02.jpg”02.jpg”、“休闲鞋休闲鞋03.jpg”03.jpg”、“休闲鞋休闲鞋04.jpg”04.jpg”、“休闲鞋休闲鞋05.jpg”05.jpg”、“休闲鞋休闲鞋06.jpg”06.jpg”等图片文件等图片文件,并调整其大小和位置并调整其大小和位置,如图如图11141114所示。所示。7图1114置入并排版“时尚休闲男鞋”分类区的所有商品图片3任务实施按照步骤按照步骤(6)(6)和
18、步骤和步骤(7)(7)的方法的方法,完成完成“时时尚真皮男鞋尚真皮男鞋”图片分图片分类区的制作类区的制作,如图如图11151115所示。所示。8图1115完成“时尚真皮男鞋”分类区3任务实施完成上面的操作后完成上面的操作后,效果图如图效果图如图11161116所所示。示。9图1116效果图Contents目录任务分析1任务实施3任务三任务三 制作商品宣传图制作商品宣传图相关知识2任务分析1 商品图片是用户了解商品的第一印象，宣传图片不仅要清晰显现出商品的外观特征，更要用巧妙的构图给用户留下深刻的印象，当然，文字LOGO和宣传话语也必不可少。2.事件onload（装入一个文档）：当浏览器完成装入
19、一个窗口或一个帧集合中所有的帧时，产生该事件。onunload（退出一个文档）：当Web页面退出时引发该事件。onsubmit（提交一个表单对象）：在完成信息输入，准备将信息提交给服务器处理时发生该事件。onReset（重置一个表单对象）：当一个表单对象被提交以及被重置时，触发该事件。onmousedown（按下鼠标）：当按下鼠标上一个键时，发生该事件。onmousemove（鼠标移动）：鼠标移动的时候发生该事件。onmouseover（鼠标悬停）：鼠标悬停在一个界面对象时发生该事件。相关知识03040201 1.行为行为是用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。行为
20、是由事件和动作构成。例如，当用户把鼠标移动至对象上（称：事件），这个对象会发生预定义的变化（称：动作）。事件是为大多数浏览器理解的通用代码，浏览器通过释译来执行动作。一个事件也可以触发许多动作，你可以定义它们执行的顺序。在dreamweaver中有多种事件与动作，如图9-1所示，其中英文字母的是事件，中文的是动作。相关知识03040201 1.行为相关知识03040201图9-1 行为面板相关知识2渐变工具的合理使用，图像标尺的准确定位布局，图形选区的叠加使用，文字工具的使用与相关设计。3任务实施运行运行Photoshop,Photoshop,执行执行“文件文件”“”“新建新建”菜单命令菜单命
21、令,在弹出的在弹出的“新建新建”对话框中对话框中,预设为预设为“自定自定”,”,设置宽度为设置宽度为640,640,高度为高度为480,480,颜色模式为颜色模式为RGBRGB颜色颜色,背景内容为白色背景内容为白色,设置完毕后设置完毕后,单击单击“确定确定”按钮按钮,如图如图118118所示。所示。1图11-8 新建文件对话框 3任务实施制作背景渐变效果。设置背景色为制作背景渐变效果。设置背景色为#c3d7dd#c3d7dd和前景色为和前景色为#94c2e5#94c2e5，利用渐变工具对底图进行着色，如图利用渐变工具对底图进行着色，如图11-911-9所示。所示。2图11-9 渐变着色3任务实
22、施制作手机叠放效果。点击菜单制作手机叠放效果。点击菜单“视图视图”，选择子菜单，选择子菜单“标尺标尺”，拖拽出一横一竖两条辅助线，确定叠放手机的中心点位置，如拖拽出一横一竖两条辅助线，确定叠放手机的中心点位置，如图图11-1011-10所示。所示。3图11-10 标尺工具3任务实施新建新建4 4个图层，使用快速选择工具，分别将个图层，使用快速选择工具，分别将4 4张素材中的手机选张素材中的手机选中，拖放到中，拖放到4 4个图层中，如图个图层中，如图11-1111-11所示。所示。4图11-11 新建四个手机层3任务实施分别选择分别选择4 4个手机，点击菜单个手机，点击菜单“编辑编辑”，选择子菜
23、单，选择子菜单“自由变自由变换换”，将每个手机调整到统一大小，围绕中心点一圈，如图，将每个手机调整到统一大小，围绕中心点一圈，如图11-11-1212所示。所示。5图11-12 自由变换手机3任务实施选择选择1 1手机图层，利用快速选择工具确定选区，换至手机图层，利用快速选择工具确定选区，换至4 4手机图层手机图层中，删除掉中，删除掉4 4手机图层被遮住部分，如图手机图层被遮住部分，如图11-1311-13所示。所示。6图11-13 删除被遮档部分3任务实施制作标题文字制作标题文字1 1及背景，使用圆角矩形（及背景，使用圆角矩形（1010）选区建立背景，）选区建立背景，使用渐变色进行填充。使用
24、文字工具键入文字，如图使用渐变色进行填充。使用文字工具键入文字，如图11-1411-14所示所示7图11-14 键入文字3任务实施制作标题文字制作标题文字2 2及背景，使用圆角矩形（及背景，使用圆角矩形（3030）选区建立背景，）选区建立背景，调整图层透明度为调整图层透明度为25%25%。使用文字工具键入文字，如图。使用文字工具键入文字，如图11-1511-15所所示。示。8图11-15 最后效果图 本项目介绍了淘宝店铺的基本结构,淘宝店铺主要是由以下几个页面组成的:店铺首页、店铺列表页、宝贝详情页。经验交流:同学们将学习过程中的疑难问题记录下来,和大家交流一下吧。项目总结(1)店铺首页:打开域名的第一页,是整个店铺索引和展示宝贝的地方,如图1116和图1117所示。项目总结图1116店铺首页(2)店铺列表页:点击某一类宝贝而打开的展示整个店铺此类目下所有宝贝的页面,如图1118和图1119所示。项目总结图1118店铺列表页图1119店铺列表页结构图(3)宝贝详情页:点击某一宝贝而打开的展示此宝贝所有相关信息的页面,如图1120和图1121所示。项目总结图1120宝贝详情页图1121宝贝详情页结构图
