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

1、电子商务网页设计教育部中等职业教育专业技能课立项教材中等职业教育实战型电子商务规划教材主编 欧志敏 刘生娥content电子商务网页赏析商品图片的使用与编辑15目录HTML网页制作基础2电子商务网页编辑软件Dreamweaver 20203网页元素的编辑4表格与DIV的使用HTML5与响应式网页设计610使用CSS控制页面元素7使用Animate制作网页中的动画8 使用JavaScript制作动态效果9设计与制作电子商务网店结构项目11设计与制作电子商务网店结构项目11任务一 制作网店告示板任务二 制作图片分类区任务三 制作商品宣传图 网店设计能提升店铺形象,吸引人的眼球,客户会通过网店设计第

2、一时间了解你店铺的讯息。本项目将介绍网店结构的制作方法,让大家了解到网店设计的好处。 项目介绍Contents目录任务分析1相关知识2任务实施3任务一 制作网店告示板 任务分析1 店铺公告包括对自己店铺的简介、想和来访者说的话以及一些忠告和注意事项,这里的内容会被来访者在第一时间注意到,一般被放置在店铺的右上角。店主可以随时发布滚动的文字信息,也可以通过网页代码发布图文配合的公告信息。这样,公告栏将更清晰、美观,还可以加入动画,使其更醒目。 店铺公告是宣传推广最新发布的产品、公告店铺最新促销信息、发布重要通知的好工具。但是,店铺的公告区域空间有限,所以店铺公告的内容一定要言简意赅,最好能一针见

3、血,吸引顾客。例如,你的店铺是新开的,你可以采用以下三个方案:：2方案二:大家好,欢迎大家光临本店;很高兴认识各位朋友,希望大家多多捧场。1方案一:新店开张,欢迎过路的朋友到此歇歇;本店秉承诚信待客,一流服务;顾客至上,质量为根本;钱来货到,效率第一;新店新开张,好店好生意,顾客顾到位。3方案三:我店产品全部来自正规的渠道,以最直接有效的方式送达消费者手里,避免了中间过多的流通环节;本店一直是以薄利多销为原则,在有合理利润的基础上将尽最大可能让利给大家,所以才会比专柜便宜许多。相关知识23任务实施运行Photoshop,执行“文件”“新建”菜单命令,在弹出的“新建”对话框中,命名为“网店告示板

4、”,预设为“自定”,宽度为800,高度为600,分辨率为72,颜色模式为RGB颜色,背景内容为白色,设置完毕后,单击“确定”按钮,如图111所示。1图111“新建”对话框3任务实施在“图层”面板中,单击“创建新图层”按钮 ,建立新图层并重命名为“条纹”。设置前景色为#ff02a9,选择工具箱中的“矩形”工具, 按住鼠标左键绘制出一个矩形,执行“编辑”“变换”“斜切”菜单命令,通过变形将矩形变为平行四边形,如图112所示。2图112绘制“条纹”3任务实施按住Ctrl+Alt,同时选中“条纹”并按住鼠标左键不动可以拖拽出“条纹”的副本。重复这一操作,复制出若干个条纹副本,效果如图113所示。3图1

5、13制作背景”3任务实施在“图层”面板中,新建“圆角矩形”图层,设置前景色为白色,选择工具箱中的“圆角矩形”工具, 在其工具选项栏中选中“填充像素”按钮,并设置圆角半径为60px,按住鼠标左键拖出一个圆角矩形,如图114所示。4图114绘制圆角矩形3任务实施选择工具箱中的“文本”工具,在工具选项栏中设置字体类型为方正舒体,字体大小为120,颜色为黑色,输入文本“公告栏”,再设置字体类型为Informal Roman,字体大小为60,输入英文“Announcement”,如图115所示。5图115输入文本3任务实施在“图层”面板,建立新图层“绿花”,选择工具箱中的“自定形状”工具,单击“填充像素

6、”按钮,选择“形状44”形状,如图116所示,绘制出一朵绿色的小花。用同样的方法制作其它花形状等图层,如图117所示。6图116“自定形状”工具选项栏图117效果图Contents目录任务分析1相关知识2任务实施3任务二 制作图片分类区 任务分析1 店铺的宝贝分类是非常重要的。宝贝的分类如何进行标明设置会影响到店铺的PV及成交转化率,会影响到客户能够买多少产品。店铺是面向消费者市场的,消费者市场由许多个人组成,每个人都有不同的习惯、需求、喜好等,为了满足不同消费者的需要,就需要进行宝贝分类,这是制定店铺营销策略非常重要的环节。2相关知识按宝贝的生产方法分类按宝贝的主要成分分类345其他分类 对

7、宝贝的分类方式有以下五种:12按宝贝用途分类按宝贝原材料分类2相关知识1按宝贝用途分类不同的用途造成了各种宝贝不同的价值,因此可以通过宝贝的用途来进行分类,这种分类方法不仅适合对宝贝进行大类划分,也可用于进一步的细分。比如“家用电器”是一大类,按用途进一步细分为:音响设备、视频设备、制冷空调器具、厨房器具等。按用途分类便于比较同类宝贝的性能,因此有利于客户进行对比购买。多用途的宝贝不适合用此分类方式。2相关知识2按宝贝原材料分类原材料的种类与质量往往对宝贝的性能和质量起到决定性的作用,所以原材料是很重要的分类标志,此分类方式适用于原材料来源较多,并且对其性能起决定作用的宝贝。例如,服装类的宝贝

8、按原材料进行分类,可分为棉布服装、皮革服装、丝绸服装等,这些宝贝的使用价值和特点都有明显的差别。由多种原材料制成的宝贝不适用于此分类方式。2相关知识按宝贝的主要成分分类4许多宝贝的性能、质量等都是由宝贝的主要成分决定的,因此宝贝的主要成分或特殊成分是进行宝贝分类的重要标志。例如,塑料产品的主要成分有明显的不同,分为聚乙烯塑料、聚苯乙烯塑料等。对于主要成分相同而含有特殊成分的产品,如营养护肤霜类的宝贝,可按其特殊成分进行分类,如人参营养霜、维生素E营养霜、珍珠粉营养霜等。化学成分复杂或区别不明显的宝贝不适用于此分类方式。2相关知识5其他分类如果宝贝的特性、结构、重量、颜色、产地、收获季节等可区分

9、清楚,容易进行分类,那么也可以采用此类方式进行分类。3任务实施运行Photoshop,执行“文件”“新建”菜单命令,在弹出的“新建”对话框中,命名为“图片分类区”,预设为“自定”,宽度为780,高度为3 047,分辨率为72,颜色模式为RGB颜色,背景内容为白色,设置完毕后,单击“确定”按钮,如图118所示。 1图118“新建”对话框3任务实施按快捷键Ctrl+R显示标尺,单击工具箱中的“移动”工具,用移动工具从标尺中拖出若干条水平参考线和垂直参考线,如图119所示。2图119拖出参考线3任务实施执行“文件”“置入嵌入对象”菜单命令,将“时尚凉鞋广告.jpg”图片文件置入,按快捷键Ctrl+T

10、调整大小并移到适当的位置,如图1110所示。3图1110置入图片文件3任务实施在“图层”面板中,单击“创建新图层”按钮 ,建立新图层并重命名为“图片分类条目”,设置前景色为#684842,选择工具箱中的“矩形选框”工具, 按住鼠标左键拖出一个矩形选框,按快捷键Alt+Delete填充前景色,按Ctrl+D取消选区。选择工具箱中的“自定形状”工具,在该工具选项栏中单击“形状图层”按钮 ,并在形状列表中选择“箭头9”,颜色为白色,然后在矩形内部左侧绘制出一个白色箭头,再单击“文本”工具,输入文本“时尚凉鞋”,如图1111所示。4图1111绘制图片分类标志3任务实施执行“文件”“置入嵌入对象”菜单命

11、令,将“凉鞋01.jpg”图片文件置入,按快捷键Ctrl+T等比例缩小到76%,并移到合适的位置。用同样的方法置入“凉鞋02.jpg”、“凉鞋03.jpg”、“凉鞋04.jpg”、“凉鞋05.jpg”、“凉鞋06.jpg”,并调整大小和位置,如图1112所示。5图1112置入并排版“时尚凉鞋”分类区的所有商品图片3任务实施执行“文件”“置入嵌入对象”菜单命令,将“时尚休闲男鞋广告.jpg”图片文件置入,按快捷键Ctrl+T调整大小并移到适当的位置。复制“图片分类条目”和“形状1”两个图层,按住Shift键,用移动工具将两个图层副本的内容沿着垂直方向往下移到适当的位置,再单击“文本”工具,输入文

12、本“时尚休闲男鞋”,如图1113所示。6图1113制作第二个图片分类区3任务实施按照步骤(5)的方法,置入嵌入对象“休闲鞋01.jpg”、“休闲鞋02.jpg”、“休闲鞋03.jpg”、“休闲鞋04.jpg”、“休闲鞋05.jpg”、“休闲鞋06.jpg”等图片文件,并调整其大小和位置,如图1114所示。7图1114置入并排版“时尚休闲男鞋”分类区的所有商品图片3任务实施按照步骤(6)和步骤(7)的方法,完成“时尚真皮男鞋”图片分类区的制作,如图1115所示。8图1115完成“时尚真皮男鞋”分类区3任务实施完成上面的操作后,效果图如图1116所示。9图1116效果图Contents目录任务分析

13、1任务实施3任务三 制作商品宣传图相关知识2任务分析1 商品图片是用户了解商品的第一印象，宣传图片不仅要清晰显现出商品的外观特征，更要用巧妙的构图给用户留下深刻的印象，当然，文字LOGO和宣传话语也必不可少。2.事件onload（装入一个文档）：当浏览器完成装入一个窗口或一个帧集合中所有的帧时，产生该事件。 onunload（退出一个文档）：当Web页面退出时引发该事件。 onsubmit（提交一个表单对象）：在完成信息输入，准备将信息提交给服务器处理时发生该事件。 onReset（重置一个表单对象）：当一个表单对象被提交以及被重置时，触发该事件。 onmousedown（按下鼠标）：当按下鼠

14、标上一个键时，发生该事件。 onmousemove（鼠标移动）：鼠标移动的时候发生该事件。 onmouseover（鼠标悬停）：鼠标悬停在一个界面对象时发生该事件。 相关知识03040201 1.行为行为是用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。行为是由事件和动作构成。例如，当用户把鼠标移动至对象上（称：事件），这个对象会发生预定义的变化（称：动作）。事件是为大多数浏览器理解的通用代码，浏览器通过释译来执行动作。 一个事件也可以触发许多动作，你可以定义它们执行的顺序。在dreamweaver中有多种事件与动作，如图9-1所示，其中英文字母的是事件，中文的是动作。相关知

15、识03040201 1.行为相关知识03040201图9-1 行为面板相关知识2渐变工具的合理使用，图像标尺的准确定位布局，图形选区的叠加使用，文字工具的使用与相关设计。3任务实施运行Photoshop,执行“文件”“新建”菜单命令,在弹出的“新建”对话框中,预设为“自定”,设置宽度为640,高度为480,颜色模式为RGB颜色,背景内容为白色,设置完毕后,单击“确定”按钮,如图118所示。1图11-8 新建文件对话框 3任务实施制作背景渐变效果。设置背景色为#c3d7dd和前景色为# 94c2e5，利用渐变工具对底图进行着色，如图11-9所示。2图11-9 渐变着色3任务实施制作手机叠放效果。

16、点击菜单“视图”，选择子菜单“标尺”，拖拽出一横一竖两条辅助线，确定叠放手机的中心点位置，如图11-10所示。3图11-10 标尺工具3任务实施新建4个图层，使用快速选择工具，分别将4张素材中的手机选中，拖放到4个图层中，如图11-11所示。4图11-11 新建四个手机层3任务实施分别选择4个手机，点击菜单“编辑”，选择子菜单“自由变换”，将每个手机调整到统一大小，围绕中心点一圈，如图11-12所示。5图11-12 自由变换手机3任务实施选择1手机图层，利用快速选择工具确定选区，换至4手机图层中，删除掉4手机图层被遮住部分，如图11-13所示。6图11-13 删除被遮档部分3任务实施制作标题文字1及背景，使用圆角矩形（10）选区建立背景，使用渐变色进行填充。使用文字工具键入文字，如图11-14所示7图11-14 键入文字3任务实施制作标题文字2及背景，使用圆角矩形（30）选区建立背景，调整图层透明度为25%。使用文字工具键入文字，如图11-15所示。8图11-15 最后效果图 本项目介绍了淘宝店铺的基本结构,淘宝店铺主要是由以下几个页面组成的:店铺首页、店铺列表页、宝贝详情页。 经验交流:同