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

PAGE4

PAGE4

PAGE3

PAGE3

课题

精准转化——商品详情页（二）

课时

2课时（90min）

教学目标

知识目标：

（1）掌握商品详情页的设计技巧与制作方法

（2）掌握商品详情页的切片与导出方法

技能目标：

能够完成商品详情页的设计与制作工作

素质目标：

加强实践练习，提升专业技能

教学重难点

教学重点：商品详情页的切片与导出方法

教学难点：商品详情页的设计技巧与制作方法

教学方法

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

教学用具

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

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，了解商品详情页切片与导出的相关知识

【学生】完成课前任务

考勤

【教师】使用APP进行签到

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

问题导入

【教师】提出以下问题

如何将一幅大图切割成若干幅不同的小图？

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

传授新知

【教师】通过大家的发言，引入新的知识点，讲解商品详情页切片与导出的基础知识

4.5商品详情页的切片与导出

【教师】组织学生扫码播放“商品详情页的切片与导出”视频（详见教材），以针织衫详情页的切片为例，讲解图片切片的方法与技巧

4.5.1切片

【师生互动】

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

利用Photoshop中的“切片工具”可以实现什么功能？

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

【教师】总结学生的回答

利用Photoshop中的“切片工具”可以将一幅大图切割成若干幅不同的小图。

【教师】示范并讲解为图片切片的相关操作

步骤1打开本书配套素材“素材与实例”→“Ch4”→“针织衫”文件夹中的“针织衫详情页.psd”文件，选择“切片工具”，将光标移至针织衫详情页左上角，按住鼠标左键并向对角方向拖拽绘制要切片的区域，释放鼠标后，即可创建一个带有黄色线框的切片。

【使用技巧】

若切片的区域不理想，可将光标移至切片的黄色线框上，拖拽线框即可调整切片的区域。

步骤2在步骤1创建的切片上右击，从弹出的快捷菜单中选择“编辑切片选项”项，可打开“切片选项”对话框，在其中设置切片名称为“版块标题”，单击“确定”按钮，设置切片名称。

步骤3采用上述方法对针织衫详情页的其他区域进行切片并自定义切片名称。

【使用技巧】

在切片上右击，从弹出的快捷菜单中选择“删除切片”项，可删除切片;选择“划分切片”项，打开“划分切片”对话框，在其中设置参数可均匀划分切片，如勾选其中的“水平划分为”复选框，然后在下方编辑框中输入“4”，单击“确定”按钮，可将图片水平均匀划分成4个切片。

此外，在图片上创建参考线，选择“切片工具”，然后单击工具属性栏中的“基于参考线的切片”按钮，此时图片可基于参考线进行切片。

4.5.2切片的优化与导出

【师生互动】

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

切片完成后，还需要对切片进行什么操作？

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

【教师】总结学生的回答

切片完成后，还需对切片进行优化，以缩减图像文件的大小。

【教师】示范并讲解切片的优化与导出的相关操作

步骤1选择“文件”→“导出”→“存储为Web所用格式(旧版)”菜单项，打开“存储为Web所用格式”对话框，在“优化的文件格式”下拉列表中选择“JPEG”项，“品质”参数为默认的“80”，以压缩切片，这种参数设置能兼顾图像的清晰度和加载速度。

步骤2参数设置完成后，单击“存储”按钮，打开“将优化结果存储为”对话框，然后在“保存在”下拉列表中选择文件的存储位置；在“文件名”文本框中输入文件的存储名称;在“格式”下拉列表中选择文件存储格式，一般选择“仅限图像”项；在“切片”下拉列表中选择要保存的切片类型，一般选择“所有用户切片”项。

步骤3设置好所有参数后，单击“保存”按钮将切片图像保存，然后从弹出的对话框中勾选“不再显示”复选框，单击“确定”按钮，可将切片图像存储在一个名为“images”的文件夹中。

【知识库】

当对某个切片的内容做了修改，需要单独导出时，可以在预览窗口中选中该切片，然后在“切片”下拉列表中选择“选中的切片”项后导出。此外，选择“视图”→“清除切片”菜单项，可清除所有的切片。

另外，店铺中的所有页面制作完成后，都可以采用上述方法进行切片与导出。

【学生】聆听、观看、思考、理解、记忆

课堂实训

【教师】组织学生分组，以小组为单位完成以下任务

本实训以项链详情页的设计与制作为例，练习商品详情页的设计技巧与制作方法。案例最终效果可参考本书配套素材“素材与实例”→“Ch4”→“项链”文件夹中的“项链详情页.psd”文件。

设计项链详情页

【教师】让学生分组讨论项链详情页的设计思路

【学生】讨论、由小组代表发表讨论结果

【教师】点