《网店美工与店铺装修》教案第14课PC端电子产品店铺装修（一）.docx

《《网店美工与店铺装修》教案第14课PC端电子产品店铺装修（一）.docx》由会员分享，可在线阅读，更多相关《《网店美工与店铺装修》教案第14课PC端电子产品店铺装修（一）.docx（6页珍藏版）》请在优知文库上搜索。

1、课题PC端电子产品店铺装修（一）课时2课时（90min）教学目标知识目标：掌握PC端店铺首页的设计与制作方法技能目标：能够设计、制作PC端店铺首页素质目标：培养周到细致、全面系统的思维方式教学重睚点教学重点：店铺装修规划教学难点：设计与制作店铺首页教学方法问答法、讨论法、i并授法、实践法教学用具电脑、投影仪、多媒体课件、教材教学过程主要教学内容及步骤课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，了解电子产品PC端店铺首页设计与制作的相关知识【学生】完成课前任务考勤【教师】使用APP进行签到【学生】按照老师要求签到问题导入【教师】提出以下问题你认为一个

2、优秀的店铺首页应是怎样的？【学生】聆听、思考、回答传授新知【教师】通过大家的发言，引入新的知识点，讲解电子产品PC端店铺首页设计与制作的相关知识9.1 电子产品PC端店铺首页的设计与制作【教师】组织学生扫码播放“电子产品PC端店铺首页的设计与制作“视频（详见教材），以电子产品PC端店铺首页的设计与制作为例，讲解PC端店铺首页的设计技巧与制作方法9.1.1 店铺装修规划1.JS三三三J【师生互动】【教师】展示“店铺布局规划示意图“（详见教材），随机邀请学生回答问题：分析一下这个店铺的布局。【学生】聆听、观察、思考、回答【教师】总结学生的回答，讲解店铺的布局规划（1）页头。从左到右依次安排用于展示

3、店铺形象、信息的店铺标志和品牌口号，用于吸引消费者目光的优惠券、新品，便于消费者快速查找所需商品的链接，这样安排页头既分区明确，让消费者一目了然，又能逐步引导消费者在店内消费。(2)页中。从上到下依次安排主推单品海报、新品上市”商品展示区、优惠券、分类导航和商品展示区,这么安排能够起到逐步引导消费者在店内消费的作用，让消费者产生”引起注意一了解店铺动态一产生购买欲望一根据需要选购商品”心理活动。(3)页尾。从上到下依次安排返回顶部按钮、底部导航、店铺声明，目的是便于消费者操作，同时提高消费者对店铺的信任度。此外，页中的组成元素大多采用长短、宽窄不同的矩形，这种设计可以消除画面过于规整所导致的沉

4、闷、呆板，使画面既稳定又活泼。2 .店触色方案确定【师生互动】【教师】展示“电子产品PC端店铺首页效果“(详见教材)，随机遨请学生回答问题：该店铺在配色上有何特点？【学生】聆听、观察、思考、回答【教师】总结学生的回答，讲解店铺的配色方案本例中的店铺主营电子产品，将背景、页头颜色、大部分文案颜色等设置为无彩色系，可以使画面极具质感，间接表现商品的品质与档次。另外，将重要信息设置为极具视觉冲击力的红色，能将其突显出来，吸引消费者目光的同时使画面效果更加丰富。3 .店铺风格定位本例采用排版简约、没有过于复杂装饰和设计的简约风。这种风格的页面可以使消费者更加直观地获取关键信息。4 .1.2制作店铺首页

5、效果图【师生互动】【教师】随机邀请学生回答问题：制作店铺首页涉及哪些模块？【学生】聆听、思考、回答【教师】总结学生的回答1 .制作店铺页头【教师】示范并讲解制作店铺页头的相关操作步骤1新建一个名为电子产品PC端店铺首页，宽度为1920像素，高度自定，分辨率为72像素/英寸，颜色模式为RGB颜色的文档。步骤2选择视图一新建参考线”菜单项,打开新建参考线对话框，选中“水平单选钮，然后在“位置编辑框中输入120像素，单击确定按钮创建参考线。采用同样方法在水平150像素、垂直485像素和垂直1435像素处创建参考线.步骤3新建一个名为“店铺招牌背景”的图层，然后在图像编辑区上方绘制一个宽度为192()

6、像素，高度为150像素的矩形选区，接着将其填充为深灰色(#34373a),最后按CtrHD组合键取消选区。步骤4置入素材文件夹中的店铺标志png文件并将其移至合适位置，然后在其右侧添加文本并设置文本属性。步骤5步骤8详见教材2 .制作店铺海报【教师】示范并讲解制作店铺海报的相关操作步骤1新建一个图层，然后在页头下方绘制一个宽度为1920像素，高度为500像素的矩形选区，接着将其填充为浅灰色（#门锯用），作为店铺海报背景。步骤2置入素材文件夹中的平板LPng和平板2.png文件，然后将它们移至合适位置。步骤3在平板左侧添加文本并设置文本属性,然后在新品3799和立即抢购文本下方绘制圆角矩形作为装

7、饰。至此，店铺海报制作完成。步骤4将制作海报用到的所有图层进行编组，然后隐藏图层组，接着采用上述方法在当前位置再制作一幅店铺海报。3 .制作“新品上市”商品展示区【教师】示范并讲解制作店铺商品展示区的相关操作步骤1在店铺海报下方绘制一个宽度为950像素，高度为40像素的深灰色矩形，然后在矩形上添加文本并设置文本属性，作为“新品上市”商品展示区标题。步骤2新建一个图层，然后在标题左下方绘制一个宽度和高度均为450像素的浅灰色矩形，接着置入素材文件夹中的平板Lpng和平板Zpng”文件并将它们移至合适位置，最后添加文本并设置文本属性，此时一个商品展示图制作完成。步骤3采用上述方法制作其他商品展示图

8、。步骤4在商品展示图下方绘制一个宽度为300像素，高度为40像素，圆角半径为16像素，描边宽度为1像素，描边色为深灰色的圆角矩形，然后在圆角矩形内添加文本并设置文本属性，以制作直看更多商品按钮。至此，新品上市”商品展示区制作完成。4 .制作优惠券【教师】示范并讲解制作优惠券的相关操作步骤1使用钢笔工具在商品展示区左下方位置绘制一个适当大小的红色图形，然后在红色图形上绘制一个宽度为像素,高度为160像素，圆角半径为2像素，填充色为淡黄色佛fdfaef）的圆角矩形。步骤2在淡黄色圆角矩形两侧偏下位置各绘制一个直径为12像素的红色正圆，然后在两个正圆之间绘制一条虚线。步骤3使用钢笔工具在圆角矩形底部

9、绘制一个图形，然后为其添加“渐变叠加图层样式，以完成优惠券底图的制作。步骤4在优惠券底图合适位置添加文本并设置文本属性，然后在“点击领取”文本下方绘制白色圆角矩形作为装饰。至此，30元优惠券制作完成。步骤5复制3个30元优惠券并移至合适位置，然后修改文本内容，制作其他优惠券。5 .制作分类导航及商品展示区【教师】示范并讲解制作分类导航及商品展示区的相关操作步骤1在优惠券左下方绘制一个宽度为190像素，高度为440像素的浅灰色矩形，然后在其顶部绘制一个宽度为190像素,高度为40像素的深灰色矩形，接着在其底般制一个宽度为190像素，高度为12像素的深灰色矩形。步骤2在已绘制的矩形上添加文本并设置

10、文本属性。步骤3在分类导航右侧绘制一个宽度为236像素，高度为308像素的白色矩形，然后为其添加“投影图层样式。步骤4置入素材文件夹中的电脑展示IJpg文件，然后将其等比例缩放后移至合适位置，接着在其下方添加文本并设置文本属性，以制作商品展示图。步骤5采用步骤3步骤4的方法绘制矩形并添加“投影图层样式，然后置入素材文件，接着添加文本并设置文本属性，以制作其他商品展示图。6 .制作函【教师】示范并讲解制作页尾的相关操作步骤1在分类导航及商品展示区的下方绘制一个宽度为1920像素，高度为37()像素的浅灰色矩形，然后在矩形中上部绘制一个直径为149像素的浅灰色正圆，接着在矩形底部绘制一个宽度为19

11、20像素，高度为44像素的深灰色矩形。步骤2在页尾背景合适位置添加文本并设置文本属性。步骤3在文本下方绘制一个宽度为144像素,高度为212像素,圆角半径为10像素的白色圆角矩形，然后为其添加“投影图层样式。步骤4步骤6详见教材7 .切片【教师】示范并讲解制作切片的相关操作步骤1使用切刀工具在店铺招牌上绘制要切片的区域，然后在“切片选项”对话框中设置切片名称为“店铺招牌。步骤2采用上述方法在首页其他位置绘制要切片的区域。步骤3选择“文件”导出T存储为Web所用格式(旧版)”菜单项，打开存储为Web所用格式”对话框，在优化的文件格式下拉列表中选择JPEG项，品质”参数为默认的80,然后单击“存储

12、按钮，打开将优化结果存储为对话框。在该对话框“保存在下拉列表中选择文件的存储位置，在“文件名”文本框中输入电子产品PC端店铺首页切片Jpg；在格式下拉列表中选择“仅限图像项，在切片”下拉列表中选择“所有用户切片”项，然后单击保存按钮将切片存储在了一个名为images的文彳牛夹中。【学生】聆听、观看、思考、理解、记忆课堂实训【教师】让学生分组进行练习，制作PC端店铺首页【学生】组内分工、完成练习【教师】巡堂辅导课堂小结【教师】简要总结本节课的要点店铺装修规划：店铺布局规划、店铺配色方案确定、店铺风格定位制作店铺首页效果图：制作店铺页头、制作店铺海报、制作新品上市”商品展示区、制作优惠券、制作分类导航及商品展示区、制作页尾、切片【学生】总结回顾知识点作业布置【教师】布置课后作业按照本节课所学知1只,设计与制作家用电器PC端店铺首页。【学生】完成课后任务教学反思