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

课题不言而信店铺页头与页尾(一)课时2课时(90min)教学目标知识目标：掌握店铺页尾的设计技巧与制作方法技能目标：能够完成店铺页头与页尾的设计与制作工作素质目标：坚守职业道德，践行行业规范教学重难点教学重点：店铺页尾的设计与制作教学难点：店铺页头与页尾的设计与制作教学方法问答法、讨论法、i并授法、实践法教学用具电脑、投影仪、多媒体课件、教材教学过程主要教学内容及步骤课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，了解设计店铺页尾的相关知识【学生】完成课前任务考勤【教师】使用APP进行签到【学生】按照老师要求签到问题导入【教师】提出以下问题店铺页尾的作用是什么？【学生】聆听、思考、回答传授新知【教师】通过大家的发言，引入新的知识点，讲解店铺页尾的基础知识6.4店铺页尾的设计与制作设计与制作店铺页尾的目的在于增强消费者的品牌记忆和购物安全感，方便消费者再次光临店铺。6.4.1 店铺页尾的内容安【师生互动】【教师】随机邀请学生回答问题：店铺页尾通常包括哪些内容？【学生】聆听、思考、回答【教师】总结学生的回答店铺公告。在店铺页尾中添加发货须知、温馨提示、售后服务等信息，可以帮助消费者提前了解购物过程中可能遇到的问题和店铺保障，以减轻消费者的顾虑，提高消费者对店铺的信任度。(2)客服联系方式。在店铺页尾中添加客服联系方式，能够方便消费者在浏览到页面底部时及时联系客服。(3)底台陶航。在店铺页尾中添加底部导航信息，可以方便消费者选购商品，提升消费者的购物体验。(4)返回顶部按钮。在店铺页尾中添加返回顶部按钮，可以优化购物流程，方便消费者在浏览到页面底部时快速返回页面顶部。(5)收藏和分享店铺链接。在店铺页尾中添加收藏和分享店铺链接,可以方便消费者收藏和分享店铺,从而留住消费者，提升店铺人气。6.4.2设计与制作美妆店铺页尾【教师】组织学生扫码播放”设计与制作美妆店铺页尾”视频(详见教材)，讲解店铺页尾的设计技巧与制作方法1 .设计美妆店铺页尾【师生互动】【教师】展示“美妆店铺页尾效果”图片(详见教材),随机邀请学生回答问题：请从内容、配色等方面对这个店铺页尾进行分析。【学生】聆听、观察、思考、回答【教师】总结学生的回答内容安排。在店铺页尾中依次添加返回顶部按钮、底部导航、店铺公告和客服联系方式等内容，以提升消费者的浏览和购物体睑配色分析。酒红色给人一种有内涵、有质感且非常优雅的感觉。因此，使用酒红色作为背景色，符合美妆店铺商品的属性及行业特征。2 .制作美妆店铺页尾【教师】示范并讲解店铺页尾的相关操作步骤1新建一个名为“美妆店铺页尾"，宽度为950像素，高度为400像素，分辨率为72像素/英寸，颜色模式为RGB颜色的文档。【提示】店铺页尾的宽度通常为95()像素,高度自定(建议不要超过500像素)，格式为JPGxPNG等。步骤2新建一个图层并将其填充为酒红色(#8601Ie),然后再新建一个图层，接着在图像编辑区上方合适位置绘制一个宽度为950像素,高度为42像素的矩形选区，并将其填充为红色件abl82a),最后按"Clrl+D”组合键取消选区。步骤3新建一个图层，绘制一个直径为140像素的正圆选区，然后将其填充为红色,接着同时选中正圆和步骤2创建的矩形，单击工具属性栏中的“水平居中对齐"按钮，将两者水平居中对齐，最后框选正圆下半部分，按"Delete"键将其删除.步骤4在步骤3创建的正圆上输入"返回顶部"文本，然后设置文本属性。采用同样方法在红色矩形上输入”首页I新品上市I特价区I折扣促销I全部商品"文本并设置文本属性。步骤5用同样方法在红色矩形下方添加文本并设置文本属性.选中本步骤添加的所有文本，然后依次单击工具属性栏中的"垂直居中对齐"按钮和"水平分布"按钮，使文本垂直居中对齐后水平均匀分布，接着按"Ctrl÷G"组合键将所有文本图层进行编组。彳呆持图层组处于选中状态，加选"背景"图层,然后单击工具属性栏中的"水平居中对齐"按钮，将文本在画面中水平居中对齐。步骤6显示标尺，在“购物流程"文本左侧添加参考线，然后在其下方输入分段文本，并设置文本属性。采用同样方法添加其他参考线和文本。步骤7使用"钢笔工具"在"购物流程"与"温馨提示"文本中间绘制白色装饰线。复制装饰线并将其移至其他文本中间.步骤8采用步骤2的方法在图像编辑区下方合适位置绘制一个宽度为950像素,高度为70像素的红色矩形。步骤9选择”多边形工具"El,在新绘制的红色矩形上单击,然后在打开的“创建多边形”对话框中设置相关参数后，单击"确定"按钮，绘制一个多边形。接着设置多边形填充色为白色，并将多边形移至合适位置。步骤10采用上述方法在多边形上绘制一个红色五角星。步骤U步骤13详见教材【学生】聆听、观看、思考、理解、记忆【教师】组织学生分组，以小组为单位完成以下任务本实训以男装店铺页头的设计与制作为例，练习店铺页头的设计技巧与制作方法。案例最终效果可参考本书配套素材"素材与实例"T"Ch6""店铺页头”文件夹中的"男装店铺页头psd”文件。1 .制作男装店铺页头【教师】让学生分组讨论男装店铺页头的设计思路【学生】讨论、由小组代表发表讨论结果【教师】点评、总结各组的发言，展示“男装店铺页头效果”的图片(详见教材)，讲解设计店铺页头(1)内容安排。店铺页头左侧放置店铺名称、品牌口号、关注店铺链接等，让进店的消费者了解并关注店铺；中间放置优惠券，以吸引消费者在店内消费；右侧放置促销商品信息，让消费者了解店铺动态，同时激发消费者的购买欲望:底部安排导航，方便消费者查找店铺各类商品和信息。(2)配色分析。店铺页头采用"白、黑、红"配色，能得既简洁、大气，又突出重点的画面效果。2 .设计男装店铺页头【教师】讲解制作步骤及具体操作(1)新建一个名为"男装店铺页头"，宽度为950像素，高度为15()像素，分辨率为72像素/英寸，颜课堂实训色模式为RGB颜色的文档。(2)新建一个图层,选择"矩形选框工具"，在图像编辑区底部绘制一个宽度为950像素,高度为30像素的黑色矩形，作为导航底图。在导航底图上添加文本并设置文本属性，然后选中添加的所有文本，选择"图层"一"对齐"T"顶边"菜单项对齐文本。(4)新建一个图层，在“所有分类”文本右侧绘制一个适当大小的正方形选区，然后利用变换功能将选区旋转45。，接着将选区上半部分删除使其变成三角形，最后将三角形填充为白色。(5)在图像编辑区左侧添加文本并设置文本属性,然后为文本添加黑色装饰线。(6)在文本下方绘制红色圆角矩形，然后置入素材文件夹中的"爱心png"文件，适当缩放后移至合适位置，接着在爱心右侧添加文本并设置文本属性。(7)新建一个图层,在店铺名称右侧绘制黑色装饰线，然后在装饰线右侧添加品牌口号文本并设置文本属性。(8)新建一个图层，在品牌口号文本右侧绘制一个淡灰色矩形，然后为其添加“投影"图层样式.置入素材文件夹中的“钱图标png"文件，并将其放置在浅灰色矩形中合适位置。(IO)在浅灰色矩形中添加文本并设置文本属性，然后在"领"文本下方绘制一个红色正圆作为装饰，此时一个优惠券制作完成。采用同样方法制作其他优惠券。(11)在图像编辑区右侧绘制一个红色矩形框,然后使用"多边形套索工具"在矩形框左上角绘制一个红色旗帜图形。(12)在红色旗帜图形上和矩形框中添加文本并设置文本属性，然后在“立即抢购"文本下方绘制一个红色矩形作为装饰。(13)置入素材文件夹中的“男裤jpg"文件，然后将其适当缩放后移至合适位置.【学生】聆听、分组制作、完成任务【教师】巡堂辅导【学生】制作完成后，由小组代表展示本组设计的店铺页头【教师】与学生一起评选出最佳图片课堂小结【教师】简要总结本节课的要点店铺页尾的设计与制作【学生】总结回顾知识点作业布置【教师】布置课后作业根据本节课所学知识，设铺的页尾。【学生】完成课后任务教学反思