《网店美工与店铺装修》教案第7课精准转化——商品详情页（二）.docx

课题精准转化商品详情页(二)课时2课时（90min）教学目标知识目标：(1)掌握商品详情页的设计技巧与制作方法(2)掌握商品详情页的切片与导出方法技能目标：能够完成商品详情页的设计与制作工作素质目标：加强实践练习，提升专业技能教学重难点教学重点：商品详情页的切片与导出方法教学难点：商品详情页的设计技巧与制作方法教学方法问答法、讨论法、讲授法、实践法教学用具电脑、投影仪、多媒体课件、教材教学过程主要教学内容及步骤课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，了解商品详情页切片与导出的相关知识【学生】完成课前任务考勤【教师】使用APP进行签到【学生】按照老师要求签到问题导入【教师】提出以下问题如何将一幅大图切割成若干幅不同的小图？【学生】聆听、思考、回答传授新知【教师】通过大家的发言，引入新的知识点，讲解商品详情页切片与导出的基础知识4.5商品详情页的切片与导出【教师】组织学生扫码播放“商品详情页的切片与导出“视频(详见教材)，以针织杉详情页的切片为例，讲解图片切片的方法与技巧4.5.1 切片【师生互动】【教师】随机邀请学生回答问题：利用PhotOShoP中的"切片工具”可以实现什么功能？【学生】聆听、思考、回答【教师】总结学生的回答利用Photoshop中的"切片工具”可以将一幅大图切割成若干幅不同的小图。【教师】示范并讲解为图片切片的相关操作步骤1打开本书配套素材"素材与实例"一"Ch4"T"针织杉"文件夹中的“针织衫详情页psd"文件，选择"切片工具"，将光标移至针织衫详情页左上角，按住鼠标左键并向对角方向拖拽绘制要切片的区域，释放鼠标后，即可创建一个带有黄色线框的切片。【使用技巧】若切片的区域不理想,可将光标移至切片的黄色线框上,拖拽线框即可调整切片的区域.步骤2在步骤1创建的切片上右击,从弹出的快捷菜单中选择”编辑切片选项"项，可打开“切片选项"对话框，在其中设置切片名称为“版块标题"，单击"确定"按钮，设置切片名称。步骤3采用上述方法对针织衫详情页的其他区域进行切片并自定义切片名称。【使用技巧】在切片上右击，从弹出的快捷菜单中选择"删除切片”项，可删除切片;选择“划分切片"项，打开"划分切片”对话框，在其中设置参数可均匀划分切片，如勾选其中的"水平划分为"复选框，然后在下方编辑框中输入"4",单击"确定"按钮，可将图片水平均匀划分成4个切片.此外，在图片上创建参考线，选择"切片工具"，然后单击工具属性栏中的“基于参考线的切片"按钮，此时图片可基于参考线进行切片。4.5.2切片的优化与导出【师生互动】【教师】随机邀请学生回答问题：切片完成后，还需要对切片进行什么操作？【学生】聆听、思考、回答【教师】总结学生的回答切片完成后，还需对切片进行优化，以缩减图像文件的大小.【教师】示范并讲解切片的优化与导出的相关操作步骤1选择"文件""导出""存储为Web所用格式（旧版）”菜单项，打开"存储为Web所用格式”对话框，在"优化的文件格式"下拉列表中选择"JPEG"项，"品质"参数为默认的"80",以压缩切片，这种参数设置能兼顾图像的清晰度和加载速度.步骤2参数设置完成后，单击“存储"按钮，打开"将优化结果存储为"对话框，然后在“保存在”下拉列表中选择文件的存储位置；在“文件名"文本框中输入文件的存储名称:在“格式”下拉列表中选择文件存储格式，一般选择“仅限图像"项；在"切片”下拉列表中选择要保存的切片类型，一般选择"所有用户切片”项。步骤3设置好所有参数后，单击“保存"按钮将切片图像保存，然后从弹出的对话框中勾选"不再显示"复选框，单击“确定"按钮，可将切片图像存储在一个名为"images”的文件夹中。【知识库】当对某个切片的内容做了修改，需要单独导出时，可以在预览窗口中选中该切片，然后在“切片"下拉列表中选择"选中的切片”项后导出。此外，选择"视图"一"清除切片”菜单项，可清除所有的切片。另外，店铺中的所有页面制作完成后，都可以采用上述方法进行切片与导出。【学生】聆听、观看、思考、理解、记忆【教师】组织学生分组，以小组为单位完成以下任务本实训以项链详情页的设计与制作为例，练习商品详情页的设计技巧与制作方法。案例最终效果可参考本书配套素材"素材与实例"-"Ch4""项链"文件夹中的“项链详情页psd"文件。1.设计项链详情页【教师】让学生分组讨论项链详情页的设计思路【学生】讨论、由小组代表发表讨论结果【教师】点评、总结各组的发言，展示“项链详情页效果”的图片(详见教材)，讲解设计项链详情页(1)版块安排。页头安排项链宣传版块，吸引消费者驻足:接下来安排项链卖点版块，让消费者了解项链的特点:最后安排项链信息描述版块，展示项链详细信息，让消费者全面、深入地了解项链。(2)配色分析。项链详情页用白色作为背景色，用黑色和不同深浅的灰色作为文案颜色，使整个页面呈现出干净、大气，又极具层次感的效果。此外，页面中一些地方用蓝色线条和色块作装饰，能丰富页面色彩，避免画面单调。(3)布局方式确定。项链详情页采用层叠和错位布局方式，可以增强画面的层次感和动感。2.制作项链详情页【教师】讲解制作步骤及具体操作(1)新建一个名为“项链详情页"，宽度为750像素,高度自定,分辨率为72像素/英寸,颜色模式为RGB颜色的文档。(2)置入素材文件夹中的"IMG_9622.jpg"文件，删除图片底部背景，并调整顶部背景的高度。(3)在图片上添加文本并自定义文本属性。其中，"Youretheonlyone"文本需添加下划线(单击”字符"面板底部的“下划线"按钮添加)。(4)在图片下方添加文本并自定义文本属性,然后在文本下方绘制适合的浅灰色线条作为装饰。绘制f适当大小的浅蓝色(自定义颜色)矩形,然后将其复制并移至合适位置接着为其添加浅蓝色的"描边”图层样式。置入素材文件夹中的"IMG_9581.jpg"文件，然后将其剪切到复制的矩形中。(7)在图片右侧添加文本和线条、矩形装饰。采用同样方法制作卖点版块的剩余部分。(8)采用上述方法制作项链信息描述版块的内容。(9)利用"切片工具"为项链详情页切片。(10)将切片优化并导出。【学生】聆听、分组制作、完成任务【教师】巡堂辅导【学生】制作完成后，由小组代表展示本组设计的商品详情页【教师】与学生一起评选出最佳图片课堂小结【教师】简要总结本节课的要点商品详情页的切片与导出方法【学生】总结回顾知识点作业布置【教师】布置课后作业参照下图，设计、制作女士挎包的详情页。