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