《电子商务网页设计》课件项目十二 设计与制作电子商务网点结构项目.ppt

1、制作网店告示板制作网店告示板1任务分析任务分析 店铺公告包括对自己店铺的简介、想和来访者说的话以及一些忠告和注意事项,这里的内容会被来访者在第一时间注意到,一般被放置在店铺的右上角。店主可以随时发布滚动的文字信息,也可以通过网页代码发布图文配合的公告信息。这样,公告栏将更清晰、美观,还可以加入动画,使其更醒目。相关知识相关知识店铺公告是宣传推广最新发布的产品、公告店铺最新促销信息、发布重要通知的好工具。但是,店铺的公告区域空间有限,所以店铺公告的内容一定要言简意赅,最好能一针见血,吸引顾客。例如,你的店铺是新开的,你可以采用以下三个方案:方案一:新店开张,欢迎过路的朋友到此歇歇;本店秉承诚信待

2、客,一流服务;顾客至上,质量为根本;钱来货到,效率第一;新店新开张,好店好生意,顾客顾到位。方案二:大家好,欢迎大家光临本店;很高兴认识各位朋友,希望大家多多捧场。方案三:我店产品全部来自正规的渠道,以最直接有效的方式送达消费者手里,避免了中间过多的流通环节;本店一直是以薄利多销为原则,在有合理利润的基础上将尽最大可能让利给大家,所以才会比专柜便宜许多。店铺公告栏中还可以写一些吸引人的词语,抓住客户的心理,如:买就送、买一送一、满百包邮、假一罚百、促销活动等;也可以写上自己店铺的特色、优势,店铺主营的产品,或者自己的QQ、联系方式等。任务实施任务实施(1)运行Photoshop CS5,执行“

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

4、置前景色为白色,选择工具箱中的“圆角矩形”工具,在其工具选项栏中选中“填充像素”按钮,并设置圆角半径为60px,按住鼠标左键拖出一个圆角矩形。(5)选择工具箱中的“文本”工具,在工具选项栏中设置字体类型为方正舒体,字体大小为120,颜色为黑色,输入文本“公告栏”,再设置字体类型为Informal Roman,字体大小为60,输入英文“Announcement”。(6)在“图层”面板,建立新图层“绿花”,选择工具箱中的“自定形状”工具,单击“填充像素”按钮,选择“花1”形状,绘制出一朵绿色的小花。用同样的方法制作“黄花”、“橙花”、“兰花”等图层。制作图片分类区制作图片分类区2任务分析任务分析

5、成交转化率,会影响到客户能够买多少产品。店铺是面向消费者市场的,消费者市场由许多个人组成,每个人都有不同的习惯、需求、喜好等,为了满足不同消费者的需要,就需要进行宝贝分类,这是制定店铺营销策略非常重要的环节。相关知识相关知识对宝贝的分类方式有以下五种:1.按宝贝用途分类 2.按宝贝原材料分类 3.按宝贝的生产方法分类 4.按宝贝的主要成分分类 5.其他分类任务实施任务实施(1)运行Photoshop CS5,执行“文件”“新建”菜单命令,在弹出的“新建”对话框中,命名为“图片分类区”,预设为“自定”,宽度为780,高度为3 047,分辨率为72,颜色模式为RGB颜色,背景内容为白色,设置完毕后

6、,单击“确定”按钮。(2)按快捷键Ctrl+R显示标尺,单击工具箱中的“移动”工具,用移动工具从标尺中拖出若干条水平参考线和垂直参考线。(3)执行“文件”“置入”菜单命令,将“时尚凉鞋广告.jpg”图片文件置入,按快捷键Ctrl+T调整大小并移到适当的位置。(4)在“图层”面板中,单击“创建新图层”按钮,建立新图层并重命名为“图片分类条目”,设置前景色为#684842,选择工具箱中的“矩形选框”工具,按住鼠标左键拖出一个矩形选框,按快捷键Alt+Delete填充前景色,按Ctrl+D取消选区。选择工具箱中的“自定形状”工具,在该工具选项栏中单击“形状图层”按钮,并在形状列表中选择“箭头9”,颜

7、色为白色,然后在矩形内部左侧绘制出一个白色箭头,再单击“文本”工具,输入文本“时尚凉鞋”。(5)执行“文件”“置入”菜单命令,将“凉鞋01.jpg”图片文件置入,按快捷键Ctrl+T等比例缩小到76%,并移到合适的位置。用同样的方法置入“凉鞋02.jpg”、“凉鞋03.jpg”、“凉鞋04.jpg”、“凉鞋05.jpg”、“凉鞋06.jpg”,并调整大小和位置。(6)执行“文件”“置入”菜单命令,将“时尚休闲男鞋广告.jpg”图片文件置入,按快捷键Ctrl+T调整大小并移到适当的位置。复制“图片分类条目”和“形状1”两个图层,按住Shift键,用移动工具将两个图层副本的内容沿着垂直方向往下移到

8、适当的位置,再单击“文本”工具,输入文本“时尚休闲男鞋”。(7)按照步骤(5)的方法,置入“休闲鞋01.jpg”、“休闲鞋02.jpg”、“休闲鞋03.jpg”、“休闲鞋04.jpg”、“休闲鞋05.jpg”、“休闲鞋06.jpg”等图片文件,并调整其大小和位置。(8)按照步骤(6)和步骤(7)的方法,完成“时尚真皮男鞋”图片分类区的制作。制作图标分类列表区制作图标分类列表区3任务分析任务分析 宝贝分类是普通店铺设计的重要环节,因为不论是普通店铺还是旺铺,宝贝分类清清楚楚是非常重要的,这能让客户很容易找到想要的产品,尤其是在商品种类繁多的时候。相关知识相关知识 宝贝分类是店铺商品的目录指示牌、

9、导航员,一般在店铺左侧,可以是文字或者图片形式。因为图片比文字有更直观、更醒目的效果,所以应设计精美的图片分类,用图文结合的方式使店铺商品分类井井有条,能为店铺增色不少。任务实施任务实施(1)运行Photoshop CS5,执行“文件”“新建”菜单命令,在弹出的“新建”对话框中,命名为“图标分类列表区”,预设为“自定”,宽度为780,高度为2 014,分辨率为72,颜色模式为RGB颜色,背景内容为白色,设置完毕后,单击“确定”按钮。(2)按快捷键Ctrl+R显示标尺,单击工具箱中的“移动”工具,用移动工具从标尺中拖出37条水平参考线和2条垂直参考线。(3)在“图层”面板中,单击“创建新图层”按

10、钮,建立新图层并重命名为“宝贝分类底纹”。选择工具箱中的“矩形选框”工具,按住鼠标左键拖出一个矩形选框,设置前景色为#684842,按快捷键Alt+Delete给矩形选框填充前景色,按Ctrl+D取消选择。(4)在“图层”面板中,单击“创建新图层”按钮,建立新图层并重命名为“圆角矩形边框”。选择工具箱中的“圆角矩形”工具,在该工具选项栏中单击“路径”按钮,按住鼠标左键拖出一个圆角矩形。然后右键单击该矩形,选择“建立选区”命令,将圆角矩形路径转换为选区,如图1220所示。执行“文件”“描边”菜单命令,在“描边”对话框中设置描边宽度为2px,颜色为白色,描边后按Ctrl+D取消选区。(5)在“图层

11、”面板中,单击“创建新图层”按钮建立新图层,选择工具箱中的“自定形状”工具,在该工具选项栏中单击“形状图层”按钮,并在形状列表中选择“箭头9”,颜色为白色,如图1222所示,然后在圆角矩形内部绘制出一个白色箭头。(6)单击工具箱中的“文本”工具,在该工具选项栏中设置字体类型为宋体,字体大小为36,颜色为白色,输入文本“宝贝分类”。(7)在“图层”面板中,单击“创建新图层”按钮,建立新图层并重命名为“图标分类底纹”。选择工具箱中的“画笔”工具,单击画笔工具选项栏中的“切换画笔面板”按钮,在画笔面板中设置画笔笔尖形状。选择工具箱中的“矩形”工具,并在该工具选项栏中单击“填充像素”按钮,设置前景色为

12、#f6e3d9,按住鼠标左键拖出一个矩形。按住Ctrl键,单击“图标分类底纹”图层缩略图将矩形载入选区,打开“路径”面板,单击“从选区生成工作路径”按钮,将矩形选区生成工作路径。然后设置前景色为#684842,右键单击矩形工作路径选择“描边路径”命令,用前面设置好的画笔形状描边,再删除工作路径。(8)在“图层”面板中,单击“创建新图层”按钮,建立新图层并重命名为“减号展开”。按照步骤(4)的方法绘制一个圆角矩形边框,并进行描边,描边宽度为2px,颜色为白色。然后单击“直线”工具,并在其工具选项栏中单击“形状图层”按钮,在圆角矩形内部绘制一条横线。(9)单击工具箱中的“文本”工具,在该工具选项栏

13、中设置字体类型为宋体,字体大小为24,颜色为黑色,输入文本“查看所有宝贝”,再将字体大小改为20,输入文本“按综合按销量按新品按价格”。(10)在“图层”面板中,单击“创建新组”按钮,建立新组并重命名为“潮流男鞋系列”,将“查看所有宝贝”图标的3个图层复制到“潮流男鞋系列”组文件夹中。然后单击工具箱中的“文本”工具,在该工具选项栏中设置字体类型为宋体,字体大小为24,颜色为黑色,输入文本“潮流男鞋系列”,再将字体大小改为20,输入文本“时尚休闲鞋”、“户外休闲鞋”、“日常休闲鞋”等。(11)按照步骤(10)的方法,完成“时尚凉鞋系列”、“户外男鞋系列”、“休闲男靴系列”等图标分类列表的制作。制

14、作商品描述模板制作商品描述模板4任务分析任务分析 商品描述模板是网店结构中非常关键的项目,因为客户基本都是先看到商品说明页面才进入店铺,而商品销售的关键也是看这个页面是否美观、可信、讲解是否清楚等。相关知识相关知识商品描述模板主要包含以下几个方面:(1)店铺活动:用于营造促销氛围,渲染店铺特色,包括促销活动的通告、新款上线预告、主推款式海报,大促时可以考虑加入关联营销。(2)产品展示:展示商品全貌,包括商品正面、背面、侧面和底面的清晰图,还可以附上推荐理由。(3)产品细节:近距离展示商品亮点。例如,服装网店可以呈现服装面料、内衬、颜色、扣子/拉链等,特别是领子、袖子、腰身和下摆等部位,如有色差

15、需要说明。如有促销活动可加入文案设计,但需要注意网店宝贝文案的注意事项。(4)相关推荐和店铺其他说明:包括搭配单品、系列款式的推荐、物流、退换货和导购信息等(可运用流程图和图标描述退换货)。其他店铺信息可用言简意赅的文字信息表述(如体现专业性的厂房、精美的包装)。商品描述的核心结构如图所示。任务实施任务实施(1)运行Photoshop CS5,执行“文件”“新建”菜单命令,在弹出的“新建”对话框中,命名为“休闲鞋商品描述模板”,预设为“自定”,宽度为26.46,高度为120,分辨率为72,颜色模式为RGB颜色,背景内容为白色,设置完毕后,单击“确定”按钮。(2)在“图层”面板中,单击“创建新组

16、”按钮,将文件夹重命名为“促销广告”,再单击“创建新图层”按钮,建立“图层1”。(3)选择“图层1”,按快捷键Ctrl+R显示标尺,单击工具箱中的“矩形选框”工具,按住鼠标左键不动拖出一个宽为26.46厘米、高为10厘米的矩形选框。然后单击工具箱中的“渐变”工具,再双击选项栏的“编辑渐变”按钮打开“渐变编辑器”对话框,设置0%和100%位置的色标颜色值为#cc3300,30%和70%位置的色标颜色值为#FF0000。按Shift键,用渐变工具由左向右给矩形框填充线性渐变色,按Ctrl+D取消选框。(4)选择工具箱中的“文本”工具,单击选项栏中的“切换字符和段落”按钮,打开“字符”面板,设置各项

17、参数,字体类型为华文行楷、大小为72点、颜色为#FFFFFF,字距为5。输入文本“全民福利马上放鞋”。(5)在“图层”面板中,选择文本图层,单击“添加图层样式”按钮,打开“图层样式”对话框,给文本添加“投影”效果和“颜色叠加”效果。(6)执行“文件”“置入”菜单命令,在“置入”对话框中,选择图片文件“马.png”和“靴子.png”置入到文档中,调整好图片大小并移到适当的位置。(7)选择工具箱中的“直线”工具,在直线选项栏中,单击“形状图层”按钮和“直线”按钮,并在“几何选项”中勾住“终点”复选框,箭头的宽度和长度都为500%,设置线条粗细为2px,线条颜色为#990000。在“图层”面板,复制

18、“形状1”图层,然后选择“形状1副本”图层,按快捷键Ctrl+T,执行“编辑”“变换”“水平翻转”菜单命令,将翻转后的箭头图形右移,并设置字体类型为楷体、大小为18点,字符间距为200,输入文本“2014 马上有鞋”。(8)单击工具箱中的“椭圆”工具,设置前景色为#cc0000,按Shift键绘制出一个正圆,再单击“图层”面板中的“添加图层样式”按钮,给正圆添加“内阴影”效果。执行“文件”“置入”菜单命令,将图片“促销鞋子1.png”置入,并放到正圆内。然后单击工具箱中的“矩形选框”工具,绘制矩形选框,填充白色,输入文本“促销价”,字体颜色为#cc0000。在“促销价”上方输入文本“原价:37

19、8”,字体颜色为#990000,用“直线”工具绘制删除线。用同样的方法制作“促销鞋子2”。(9)建立新图层,单击工具箱的“椭圆”工具,设置前景色为#45f807,绘制出一个椭圆,执行“编辑”“变换”“扭曲”菜单命令,拖动控制点,对椭圆进行变形操作,然后连续复制该图层2次,并适当缩小。(10)在“图层”面板中,新建组并重命名为“横条1”,选择该文件夹,新建图层并重命名为“横条模板”,单击工具箱中的“矩形”工具,设置前景色为#ff0000,绘制出一个宽度4厘米、高度1.6厘米的矩形。再单击工具箱的“钢笔”工具,在矩形的右上角勾勒出一个直角三角形的路径,然后切换到“路径”面板,单击“将路径作为选区载

20、入”按钮,按Delete键删除三角形选区的内容。单击“图层”面板中的“添加图层样式”按钮,给梯形添加“斜面和浮雕”效果,再输入文本“1”。(11)在“横条1”组下,单击工具箱中的“文本”工具,在选项栏中设置字体类型为楷体、大小为26点、颜色为#990000,输入文本“产品信息”。然后设置字体类型为Times New Roman、大小为14点、颜色同上,输入文本“PRODUCTION INFORMATION”。(12)在“横条1”组下,新建图层并重命名为“长方形”,单击工具箱中的“矩形选框”工具,按住鼠标左键不动拖出一个矩形选框,然后单击“渐变”工具,打开“渐变编辑器”对话框,设置第一、三个色块

21、颜色为#ffffff,第二个色块颜色为#45f807。按Shift键给矩形选框填充线性渐变色。单击“矩形选框”工具,按Shift键绘制一个正方形选框,执行“编辑”“描边”菜单命令,再单击“自定形状”工具,在选项栏中单击扩展按钮追加全部形状,选择“问号”形状。新建图层并重命名为“问号”,在正方框中按住鼠标左键不动拖出一个问号。(13)在“图层”面板中,右键单击“横条1”组,选择“复制组”,将“横条1”组所有的图层拷贝到“横条2”组中。单击“横条2”组前面的三角形按钮展开文件夹,如图1250所示。单击工具箱中的“文本”工具,选择文本图层“1”,将“1”改为“2”;选择文本图层“产品信息”,将“产品

22、信息”改为“产品展示”;选择文本图层“PRODUCT INFORMATION”,将“PRODUCT INFORMATION”改为“PRODUCT DISPLAY”;选择“放大镜”图层,单击“自定形状”工具,在选项栏中选择“放大镜”形状,将“问号”改为“放大镜”。(14)按照上述步骤,完成“横条3”、“横条4”、“横条5”、“横条6”、“横条7”的创建。(15)在“图层”面板上,新建组并重命名为“产品信息”,执行“文件”“置入”菜单命令,置入“休闲鞋.jpg”图片文件,适当调整图片大小。单击工具箱的“文本工具”,设置字体类型为宋体、大小为18、颜色为黑色,输入产品的基本信息。(16)在“图层”面

23、板上,新建组并重命名为“展示板”,建立新图层并命名为“左上边角”。单击工具箱中的“矩形选框”工具,按Shift键拖出一个正方形选框,按快捷键Alt+Delete填充前景色#ff0000,按Ctrl+D取消选区。在该正方形上面再拖出一个正方形选框,按Delete删除选区内的内容。然后复制“左上边角”图层,将左上边角水平向右移动,执行“编辑”“变换”“水平翻转”菜单命令,得到“右上边角”图层。用同样的方法完成“左下边角”和“右下边角”图层的制作(17)选中“展示板”组,执行“文件”“置入”菜单命令,置入“展示1.jpg”图片文件,调整图片大小。用同样的方法相继置入“展示2.jpg”、“展示3.jp

24、g”、“展示4.jpg”等图片文件,调整图片大小,并移到适当的位置。(18)在“图层”面板上,新建组并重命名为“细节1”,建立新图层并命名为“大方框”,单击工具箱中的“矩形选框”工具,按住鼠标左键不动拖出一个正方形选框并填充前景色#cccccc。建立新图层并命名为“小方框”,用“矩形选框”工具,按住鼠标左键不动拖出一个正方形选框并填充前景色#45f807,再建立和制作“虚线”图层和“三角形”图层。单击工具箱中的“文本”工具,设置字体类型为黑体、大小为30、颜色为白色,输入文本“更结实”;设置字体大小为24,输入文本“特点1”;设置字体大小为20,颜色为#ff0000,输入文本“传承意式穿手工鞋

25、”。(19)继续建立新图层,选择工具箱中的“矩形”工具,单击选项栏中“形状图层”按钮,在大正方形内拖出一个矩形。执行“文件”“置入”菜单命令,置入“特点1.jpg”图片文件,适当调整图片大小,右键单击该图片图层,在弹出的快捷菜单中选择“创建剪贴蒙版”。(20)在“图层”面板中,右键单击“细节1”组,在弹出的快捷菜单中,选择“复制组”菜单命令,将“细节1副本”重命名为“细节2”。然后选中“细节2”组,用移动工具将“细节2”组中所有图层水平向右移到适当的位置,并把商品“特点1”的相关文字描述改为“特点2”对应的描述文字,同时删除“特点1”图片图层,重新置入“特点2.jpg”图片文件,并创建剪贴蒙版

26、。用同样的方法制作“细节3”组和“细节4”组。(21)在“图层”面板上,新建组并重命名为“注意事项”,建立新图层并命名为“项目符号”,单击工具箱中的“自定形状”工具,在其选项栏中单击“形状图层”按钮,并选择“星爆”形状,设置颜色为#45f807。绘制出4个项目符号。(22)在“图层”面板上,新建组并重命名为“购物流程”,建立新图层并命名为“底框”,单击工具箱中“矩形选框”工具,绘制矩形选框并对选框进行描边和填充,描边颜色为#990000,填充颜色为#cccccc,在底框中输入相应的文字。然后使用“自定形状”工具中的“箭头”形状,制作购物流程图。(23)利用上面制作项目符号与编号的方法,完成“售后服务”部分的设计。(24)按快捷键Ctrl+R显示标尺,选择工具箱中的“移动”工具,根据网页功能的需要使用“移动”工具从水平标尺中拖出若干条参考线。选择工具箱中的“切片”工具,单击“切片”工具选项栏中的“基于参考线的切片”按钮。单击工具箱中的“切片选择”工具,用“切片选择”工具单击第8块切片,然后单击该工具选项栏中的“划分”按钮,设置“划分切片”对话框。(25)执行“文件”“存储为Web和设备所用格式”菜单命令,在弹出的对话框中,单击“预览”按钮,可以在浏览器中预览优化的图像。最后设置切片图片存储类型为jpeg格式,单击“存储”按钮,在弹出的对话框中选择存放切片图片的路径。