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

PAGE2

PAGE2

PAGE3

PAGE3

课题

PC端电子产品店铺装修（一）

课时

2课时（90min）

教学目标

知识目标：

掌握PC端店铺首页的设计与制作方法

技能目标：

能够设计、制作PC端店铺首页

素质目标：

培养周到细致、全面系统的思维方式

教学重难点

教学重点：店铺装修规划

教学难点：设计与制作店铺首页

教学方法

问答法、讨论法、讲授法、实践法

教学用具

电脑、投影仪、多媒体课件、教材

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，了解电子产品PC端店铺首页设计与制作的相关知识

【学生】完成课前任务

考勤

【教师】使用APP进行签到

【学生】按照老师要求签到

问题导入

【教师】提出以下问题

你认为一个优秀的店铺首页应是怎样的？

【学生】聆听、思考、回答

传授新知

【教师】通过大家的发言，引入新的知识点，讲解电子产品PC端店铺首页设计与制作的相关知识

9.1电子产品PC端店铺首页的设计与制作

【教师】组织学生扫码播放“电子产品PC端店铺首页的设计与制作”视频（详见教材），以电子产品PC端店铺首页的设计与制作为例，讲解PC端店铺首页的设计技巧与制作方法

9.1.1店铺装修规划

1．店铺布局规划

【师生互动】

【教师】展示“店铺布局规划示意图”（详见教材），随机邀请学生回答问题：

分析一下这个店铺的布局。

【学生】聆听、观察、思考、回答

【教师】总结学生的回答，讲解店铺的布局规划

(1)页头。从左到右依次安排用于展示店铺形象、信息的店铺标志和品牌口号，用于吸引消费者目光的优惠券、新品，便于消费者快速查找所需商品的链接，这样安排页头既分区明确，让消费者一目了然，又能逐步引导消费者在店内消费。

(2)页中。从上到下依次安排主推单品海报、“新品上市”商品展示区、优惠券、分类导航和商品展示区，这么安排能够起到逐步引导消费者在店内消费的作用，让消费者产生“引起注意→了解店铺动态→产生购买欲望→根据需要选购商品”心理活动。

(3)页尾。从上到下依次安排返回顶部按钮、底部导航、店铺声明，目的是便于消费者操作，同时提高消费者对店铺的信任度。

此外，页中的组成元素大多采用长短、宽窄不同的矩形，这种设计可以消除画面过于规整所导致的沉闷、呆板，使画面既稳定又活泼。

2．店铺配色方案确定

【师生互动】

【教师】展示“电子产品PC端店铺首页效果”（详见教材），随机邀请学生回答问题：

该店铺在配色上有何特点？

【学生】聆听、观察、思考、回答

【教师】总结学生的回答，讲解店铺的配色方案

本例中的店铺主营电子产品，将背景、页头颜色、大部分文案颜色等设置为无彩色系，可以使画面极具质感，间接表现商品的品质与档次。另外，将重要信息设置为极具视觉冲击力的红色，能将其突显出来，吸引消费者目光的同时使画面效果更加丰富。

3．店铺风格定位

本例采用排版简约、没有过于复杂装饰和设计的简约风。这种风格的页面可以使消费者更加直观地获取关键信息。

9.1.2制作店铺首页效果图

【师生互动】

【教师】随机邀请学生回答问题：

制作店铺首页涉及哪些模块？

【学生】聆听、思考、回答

【教师】总结学生的回答

1．制作店铺页头

【教师】示范并讲解制作店铺页头的相关操作

步骤1新建一个名为“电子产品PC端店铺首页”，宽度为1920像素，高度自定，分辨率为72像素/英寸，颜色模式为RGB颜色的文档。

步骤2选择“视图”→“新建参考线”菜单项，打开“新建参考线”对话框，选中“水平”单选钮，然后在“位置”编辑框中输入“120像素”，单击“确定”按钮创建参考线。采用同样方法在水平150像素、垂直485像素和垂直1435像素处创建参考线。

步骤3新建一个名为“店铺招牌背景”的图层，然后在图像编辑区上方绘制一个宽度为1920像素，高度为150像素的矩形选区，接着将其填充为深灰色(#34373a)，最后按“Ctrl+D”组合键取消选区。

步骤4置入素材文件夹中的“店铺标志.png”文件并将其移至合适位置，然后在其右侧添加文本并设置文本属性。

……步骤5~步骤8详见教材

2．制作店铺海报

【教师】示范并讲解制作店铺海报的相关操作

步骤1新建一个图层，然后在页头下方绘制一个宽度为1920像素，高度为500像素的矩形选区，接着将其填充为浅灰色(#f7f8f8)，作为店铺海报背景。

步骤2置入素材文件夹中的“平板1.png”和“平板2.png”文件，然后将它们移至合适位置。

步骤3在平板左侧添加文本并设置文本属性，然后在“新品”“￥3799”和“立即抢购”文本下方绘制圆角矩形作为装饰。至此，店铺海报制作完成。

步