《网店美工》教案-巧用详情页模板.pdfVIP

《网店美工》电子教案

学科PS网店美工班级日期

课时4课型实操课教师

课题任务4.1巧用详情页模板

让学生了解详情页模板的功能，利用淘宝神笔提供的模板装修和修改商品的详情

教学目的

页。

课

教学重点详情页模板的使用方法

前

教学难点详情页直达导航的设置方法

系

教学方法演示法、练习法

统

教具准备多媒体

一、导入新课

公司让店铺装修人员完成新品上架的装修，目前小赵想通过详情页的模板完

成此项工作，这样可以提高效率，但之前小赵对详情页并不是很了解，这使他很

困惑。

二、讲授新课

淘宝神笔是淘宝专为卖家提供宝贝详情页描述模板的工具，使用它可以快速、

便捷地做出具有设计美感的详情页。

1.使用“神笔”模块生成详情页

步骤1在“宝贝发布”页面中，滑动到“电脑端描述栏目”，单击宝贝描述模块

中的“使用旺铺详情编辑器”按钮。

课

步骤2在下方单击“立即使用”按钮。

堂步骤3进入“淘宝神笔”宝贝详情编辑器，在下方选择左边第一个模板。

步骤4在跳转的页面中单击“立即购买”或“立即试用”按钮。

系

步骤5打开编辑页面，在右侧的“模块管理”中可以选择删除模块，或调整模块

统的位置。

步骤6选择右边需要修改的背景图栏目，在图片上单击，再单击左侧的“改换图

片”按钮可更换图片。

步骤7单击文字部分，在左侧可以修改文字内容及字体、大小和颜色等。

步骤8编辑完成后，单击右上角的“预览”按钮可预览效果。

2.自定义模板制作详情页

步骤1在浏览器地址栏中输入淘宝神笔网址，进入“淘宝神笔”页面，在“操作

中心”菜单中选择“模块管理”菜单。

步骤2在打开的页面中选择“自定义模板”选项，在下方单击“自定义模板”按

钮。

步骤3选择一个宝贝，单击“编辑电脑详情”按钮。

步骤4在打开的页面中单击“添加模块”按钮。

步骤5添加模块后，可在最左侧编辑模块属性，包括高度和背景，高度为“400px”,

背景色为浅蓝色“#c0e6f0”。

步骤6单击顶部的“添加图片”按钮。

步骤7在打开的对话框中选择已提前准备好的素材图片。

步骤8添加图片后完成设计。

步骤9选择图片，在左侧可以编辑图片宽度、高度、旋转角度等属性。

步骤10单击顶端的“添加链接”按钮。

步骤11调整需要链接的热点区域。

步骤12选择区域，在左侧编辑链接地址。

步骤13在最右侧双击模块名称，即可重命名模块。

步骤14单击中间底部的“添加模块”按钮可继续添加模块。

步骤15单击顶部的“添加文字”按钮可以添加文字。

步骤16选择组件，单击置底的按钮，可以置顶或置底的组件。

步骤17在最右侧可以对模块进行上下移动、复制和删除等操作。

步骤18单击“预览”按钮，预览装修效果。单击“同步详情”按钮。

步骤19选中复选框，单击“确定同步”按钮。

步骤20在打开的页面中显示已经同步成功。

三、课堂练习

1.利用详情页模板，编辑并发布宝贝。

四、归纳小结

本项目主要学习了详情页模板，让学生通过详情页模板来完成详情页的设计

和布局，不断提升详情页的设计能力。

五、作业安排

通过详情页布局，发布一款新