《商品信息采编》教案第18课设计数码电器类和珠宝首饰类商品详情页.docx

《《商品信息采编》教案第18课设计数码电器类和珠宝首饰类商品详情页.docx》由会员分享，可在线阅读，更多相关《《商品信息采编》教案第18课设计数码电器类和珠宝首饰类商品详情页.docx（7页珍藏版）》请在优知文库上搜索。

1、课题设计数码电器类和珠宝首饰类商品详情页课时2课时(90min)教学目标知识技能目标：(1)了解数码电器类和珠宝首饰类商品详情页的模块安排(2)能够完成数码电器类和珠宝首饰类商品详情页的设计工作素质目标：感受中国传统手工艺的魅力，为留住手艺、传承匠心贡献一分力量教学重睚点教学重点：数码电器类和珠宝首饰类商品详情页的设计教学难点：数码电器类和珠宝首饰类商品详情页的设计教学方法问答法、讨论法、腿法、实践法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：课前任务一考勤(2min)一问题导入(5min)T任务实施(28min)T课堂讨论(】()min)第2节课：问题导入(3min)一任务实施(

2、27min)一课堂讨论(10min)一课堂小结(3min)一作业布置(2min)教学过程主要教学内容及步骤设计意图第一节课课前任努【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，预习本节课要学习的知识【学生】完成课前任务通过课前任务,使学生预习本节课要学习的知识,增加学生的学习兴趣考勤(2min)【教师】使用APP进行签到【学生】班干部报请假人员及原因培养学生的组织纪律性,掌握学生的出勤情况问题导入(5min)【教师】提出以下问题：数码电器类商品详情页中应安排些什么内容？【学生】聆听、思考、举手回答【教师】总结学生的回答数码电器类商品详情页中除了要安排宣传或促

3、销、卖点等模块外，一些大件商品还会安排售后服务模块，让i肖费者买得放心、安心。【知识链接】一些网店还会在商品详情页安排一个用于展示营业许可的模块来提升消费者对品牌的信任度。通过问题导入，弓I导学生主动思考,激发学生的学习兴趣任务实施(28min)【教师】讲解设计移动硬盘详情页的具体步骤，并要求学生以小组为单位完成相关任务【教师】组织学生扫码观看“设计移动硬盘详情页”视频(详见教材)，让学生对设计过程有一个大致地了解通过设计移动硬盘详情页任务,帮助学生熟悉设计数码电器类商品详情页的流程和方法1 .设计思路（1）模块安排：页头安排宣传内容，以吸引消费者注意；接下来的三个模块均安耳醪动硬盘的卖点，让

4、消费者深入了解移动硬盘及其特点；最后两个模块分别安扫暗动硬盘详细信息和套餐内容，让消费者全面了解移动硬盘。（2）配色分析：移动硬盘图片多为灰色调，采用白色背景和黑色、灰色文案，能打造具有高级感的画面效果，而一些图标、线条使用品牌标志颜色（红色），既可以引导消费者识别品牌，又可以丰富画面效果，为画面增添活力。【教师】提出以下问题，随机邀请学生进行回答移动硬盘详情页的布局方式应该使用哪一种布局？为什么？【学生】聆听、思考、回答【教师】总结学生的回答，井通过多媒体展示“移动硬盘详情页效果”图片（详见教材）（3）布局方式：采用层叠布局方式，可以增加画面的层次感。【教师】让学生分组讨论设计思路【学生】组

5、内讨论、确定思路、由小组代表发表讨论结果【教师】点评、总结各组的发言2 .设计步骤1）制作宣传模块【教师】演示并讲解设计步骤及具体操作步骤1新建一个名为移动硬盘详情页，宽度为750像素，高度自定，分辨率为72像素/英寸,颜色模式为RGB模式的文档。步骤2置入本书配套素材lMG_9759.jpg文件，并调整其大小和位置，然后打开项目5中制作的移动硬盘主图.p$d文件，选中标志所在图层，将其复制到移动硬盘详情页”文档中，最后在标志下方添加文本和矩形装饰。需要注意的是，移动硬盘图片有些发灰，需用CameraRaw滤镜调整其对比度（在“基本”设置项下的“对比度”编辑框中输入40）.步骤3用“椭圆工具电

6、制一个宽度为60像素、高度为60像素的正圆，然后设置其填充为无，描边色为红色，描边宽度为I像素，最后在其内部和下方添加文本.步骤4复制步骤2中制作的图标并修改内容，然后用直线工具在图标之间添加竖线.【小提示】需要注意的是，PhOtoShOP提供智能参考线，在移动对象时会自动显示，因此，移动复制的图标时要充分利用智能参考线，让图标之间间距相等。【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作宣传模块任务【教师】巡堂辅导、答疑解惑2）制作卖点模块【教师】演示并讲解设计步骤及具体操作步骤1创建第一个卖点模块标题（后续大部分文本所用的字体样式、大小与

7、此相同，以下不再赘述），然后在标题下方添加正文并放置本书配套素材IMG_9766.jpg”文件.步骤2创建第二个卖点模块标题并添加矩形装饰，然后在标题下方添加正文，右侧放置本书配套素材IMG_9538.jpgIMG_9553.jpg文件，并为移动硬盘标注尺寸，接着绘制一个宽度为682像素、高度为452像素的矩形，并设置其填充为无，描边色为浅灰色（#c9caca）,描边宽度为2像素，最后在矩形偏左上方放置本书配套素材IMG_9772.jpg文件。步骤3采用步骤I的方法制作卖点模块3.【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作卖点模块任务【

8、教师】巡堂辅导、答疑解惑3）制作商品信息和套餐模块【教师】演示并讲解设计步骤及具体操作步骤I绘制矩形装饰，并在其中添加本书配套素材IMG_9545.jpg文件和文本。步骤2用直线工具在文本容量和尺寸之间绘制直线，然后在工具属性栏设置描边色为浅灰色（#c9caca）,描边宽度为2像素，在设置形状描边类型”下拉面板中选择虚线类型。步骤3复制步骤2中绘制的虚线装饰并移至其他文本之间。【小提示】如果虚线效果不理想，可单击”设置形状描边类型下拉面板中的”更多选项”按钮,在打开的描边”对话框中设置虚线的间隙。步骤4首先创建套餐模块标题，然后置入本书配套素材IMG_9776.jpg文件，接着用“直线工具和椭

9、圆选框工具绘制指示器，最后添加标注文本。至此，移动硬盘详情页制作完成。【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作商品信息和套餐模块任务【教师】巡堂辅导、答疑解惑【学生】制作完成后，由小组代表展示本组设计的商品详情页图片【教师】与学生一起评选出最佳的商品详情页课堂讨论(10min)【教师】组织学生分组讨论音响详情页的设计思路参照以下提示梳理音响详情页的设计思路。(1)确定模块安排：确定音响详情页中安排哪些模块，并根据模块安排确定具体内容，包括图片和文案。需要注意的是，在卖点模块中可放置使用场景图及相关文案，以表现其可随处安放的特点。(2)

10、确定配色方案：此款音响详情页的配色方案可参考移动硬盘详情页的配色方案.(3)确定布局方式：根据模块及模块中的元素安排选择合适的布局方式。【学生】组内讨论、确定思路、由小组代表发表讨论结果【教师】点评各组的发言通过小组讨论,帮助学生进一步巩固所学知识第二节课问题导入(3min)【教师】提出以下问题：珠宝首饰类商品详情页中应设计哪些模块？【学生】聆听、思考、举手回答【教师】总结学生的回答珠宝首饰类商品详情页中除了要安排宣传或促销、搭配、卖点等模块外，通常还会安排工艺和包装等模块，以展示商品的附加值.通过问题导入，弓I导学生主动思考，激发学生的学习兴趣任务实施(27min)【教师】讲解设计项链详情页

11、的具体步骤，并要求学生以小组为单位完成相关任务【教师】组织学生扫码观看”设计项链详情页”视频(详见教材)，让学生对设计过程有一介大致地了解1.设计思路(1)模块安排：页头安排宣传内容，吸引消费者注意；接下来安排卖点模块，让消斐者了解项链的特点；最后两个模块分别展示项链佩戴效果和项链详细信息,让消费者全面、深入地了解项链.(2)配色分析：用白色作为背景颜色，用黑色和不同深浅的灰色作为文案颜色，能使整个页面呈现出干净、大气，又极具层次感的效果。此外，一些地方用蓝色线条和色块作装饰，能丰富页面色彩，避免画面显得单调。【教师】提出以下问题，随机邀请学生进行回答哪一种布局方式更适合项链详情页？*【学生】

12、聆听、思考、回答【教师】总结学生的回答，并通过多媒体展示“项链详情页效果”图片(详通过设计项链详情页任务，帮助学生熟悉设计珠宝首饰类商品详情页的流程和方法见教材）（3）布局方式：采用层叠和错位布局方式，可以增强画面的层次感和动感.【教师】让学生分组讨论设计思路【学生】组内讨论、确定思路、由小组代表发表讨论结果【教师】点评、总结各组的发言2.设计步骤1）制作宣传模块【教师】演示并讲解设计步骤及具体操作步骤I新建一个名为“项链详情页，宽度为750像素，高度自定，分辨率为72像素/英寸，颜色模式为RGB模式的文档。步骤2置入本书配套素材IMG_9622.jpg文件，然后将其转换为普通图层，接着用矩形

13、选框工具框选图片底部多余背景，并按Delete键删除。框选图片顶部背景，并用变换工具调整所选区域的高度，最后按Ctrl+D组合键取消选区。步骤3在图片上添加文本。其中，mYOURETHEONLYONE文本需添加下划线（单击字符面板底部的“下划线按钮添加）。【学生】聆听、观看、理解、记忆【教师】让学生分组进行制作【学生】组内分工，根据本组的设计思路完成制作宣传模块任务【教师】巡堂辅导、答疑解惑2）制作卖点模块【教师】演示并讲解设计步骤及具体操作步骤1先创建卖点模块标题，然后新建一个图层，用“矩形选框工具绘制一个宽度为664像素、高度为3像素的矩形选区，并为其填充浅灰色（#f5f5f5）,最后按Q

14、rl+D”组合键取消选区。步骤2首先新建一个图层，然后绘制一个宽度为345像素、高度为300像素的矩形选区，并为其填充浅蓝色（#eef4fe）,接着按Cirl+D”组合键取消选区，最后拷贝矩形并移至合适的位置，为其填充白色、添加描边图层样式。步骤3置入本书配套素材IMG_9581.jpg文件（保证其在复制矩形图层的上方），按住“All键的同时将光标移至该图层与复制矩形图层之间，当光标呈状时单击创建剪贴蒙版。步骤4在图片右侧添加文利口线条装饰，然后在文本左侧添加一个宽度为5像素、高度为85像素的浅蓝色（#eef4fe）矩形装饰。【教师】提出以下问题，随机邀请学生进行回答在PS软件中，复制图层有哪

15、些方法？【学生】聆听、思考、回答+【教师】总结学生的回答步骤5复制两份步骤2至步骤4创建的图层，并调整位置、修改内容。【学生】聆听、观看、理解、记忆【教师】让学生分组曲询作【学生】组内分工，根据本组的设计思路完成制作卖点模块任务【教师】巡堂辅导、答疑解惑3)制作商品展示和商品信息模块【教师】演示并讲解设计步骤及具体操作步骤I复制卖点模块标题并修改内容。步骤2置入本书配套素材IMG_7121.jpgIMG_7122.jpgIMG_7124.jpg文件并放在合适的位置，然后用CameraRaw滤镜调整图片的影调和细节，使其与整体页面效果协调统一。步骤3在图片下方添加文本并设置其字体样式为方正北魏楷书简体，字体大小为T8点，行距为36点”.步骤4复制商品展示模块标题并修改内容.步骤5新建一个图层，然后绘制一个宽度为66像素、高度为2()像素的矩形选区，