《网店美工与店铺装修》教案 第10课 不言而信——店铺页头与页尾（二).docVIP

PAGE4

PAGE4

PAGE3

PAGE3

课题

不言而信——店铺页头与页尾（二）

课时

2课时（90min）

教学目标

知识目标：

掌握店铺页尾的设计技巧与制作方法

技能目标：

能够完成店铺页头与页尾的设计与制作工作

素质目标：

坚守职业道德，践行行业规范

教学重难点

教学重点：店铺页尾的设计与制作

教学难点：店铺页头与页尾的设计与制作

教学方法

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

教学用具

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

教学过程

主要教学内容及步骤

课前任务

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

【学生】完成课前任务

考勤

【教师】使用APP进行签到

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

问题导入

【教师】提出以下问题

店铺页尾的作用是什么？

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

传授新知

【教师】通过大家的发言，引入新的知识点，讲解店铺页尾的基础知识

6.4店铺页尾的设计与制作

设计与制作店铺页尾的目的在于增强消费者的品牌记忆和购物安全感，方便消费者再次光临店铺。

6.4.1店铺页尾的内容安排

【师生互动】

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

店铺页尾通常包括哪些内容？

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

【教师】总结学生的回答

(1)店铺公告。在店铺页尾中添加发货须知、温馨提示、售后服务等信息，可以帮助消费者提前了解购物过程中可能遇到的问题和店铺保障，以减轻消费者的顾虑，提高消费者对店铺的信任度。

(2)客服联系方式。在店铺页尾中添加客服联系方式，能够方便消费者在浏览到页面底部时及时联系客服。

(3)底部导航。在店铺页尾中添加底部导航信息，可以方便消费者选购商品，提升消费者的购物体验。

(4)返回顶部按钮。在店铺页尾中添加返回顶部按钮，可以优化购物流程，方便消费者在浏览到页面底部时快速返回页面顶部。

(5)收藏和分享店铺链接。在店铺页尾中添加收藏和分享店铺链接，可以方便消费者收藏和分享店铺，从而留住消费者，提升店铺人气。

6.4.2设计与制作美妆店铺页尾

【教师】组织学生扫码播放“设计与制作美妆店铺页尾”视频（详见教材），讲解店铺页尾的设计技巧与制作方法

1.设计美妆店铺页尾

【师生互动】

【教师】展示“美妆店铺页尾效果”图片（详见教材），随机邀请学生回答问题：

请从内容、配色等方面对这个店铺页尾进行分析。

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

【教师】总结学生的回答

(1)内容安排。在店铺页尾中依次添加返回顶部按钮、底部导航、店铺公告和客服联系方式等内容，以提升消费者的浏览和购物体验。

(2)配色分析。酒红色给人一种有内涵、有质感且非常优雅的感觉。因此，使用酒红色作为背景色，符合美妆店铺商品的属性及行业特征。

2.制作美妆店铺页尾

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

步骤1新建一个名为“美妆店铺页尾”，宽度为950像素，高度为400像素，分辨率为72像素/英寸，颜色模式为RGB颜色的文档。

【提示】

店铺页尾的宽度通常为950像素，高度自定(建议不要超过500像素)，格式为JPG、PNG等。

步骤2新建一个图层并将其填充为酒红色(#86011e)，然后再新建一个图层，接着在图像编辑区上方合适位置绘制一个宽度为950像素，高度为42像素的矩形选区，并将其填充为红色(#ab182a)，最后按“Ctrl+D”组合键取消选区。

步骤3新建一个图层，绘制一个直径为140像素的正圆选区，然后将其填充为红色，接着同时选中正圆和步骤2创建的矩形，单击工具属性栏中的“水平居中对齐”按钮，将两者水平居中对齐，最后框选正圆下半部分，按“Delete”键将其删除。

步骤4在步骤3创建的正圆上输入“返回顶部”文本，然后设置文本属性。采用同样方法在红色矩形上输入“首页|新品上市|特价区|折扣促销|全部商品”文本并设置文本属性。

步骤5用同样方法在红色矩形下方添加文本并设置文本属性。选中本步骤添加的所有文本，然后依次单击工具属性栏中的“垂直居中对齐”按钮和“水平分布”按钮，使文本垂直居中对齐后水平均匀分布，接着按“Ctrl+G”组合键将所有文本图层进行编组。

保持图层组处于选中状态，加选“背景”图层，然后单击工具属性栏中的“水平居中对齐”按钮，将文本在画面中水平居中对齐。

步骤6显示标尺，在“购物流程”文本左侧添加参考线，然后在其下方输入分段文本，并设置文本属性。采用同样方法添加其他参考线和文本。

步骤7使用“钢笔工具”在“购物流程”与“温馨提示”文本中间绘制白色装饰线。复制装饰线并将其移至其他文本中间。

步骤8采用步骤2的方法在图像编辑区下方合适位置绘制一个宽度为950像素，高度为70像素的