第20课模板与库（一）（教案）-《网页设计与制作案例教程（第2版）》同步教学（航空工业出版社）

课题 模板与库（一） 课时 2课时（90 min） 教学目标 知识技能目标： （1）熟悉模板的基础知识。 （2）能够使用Dreamweaver CC在网页中创建并应用模板。 思政育人目标： （1） 学习模板和库，增强专业技能，提高工作效率。 （2） 学习工匠精神，培养认真、严谨的工作态度。 教学重难点 教学重点：模板的基础知识 教学难点：使用Dreamweaver CC在网页中创建并应用模板 教学方法 情景模拟法、问答法、讨论法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（5 min）→传授新知（38 min） 第2节课：实践探究（25 min）→ 项目实训（15 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 · 【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解网站模板 · 【学生】按照教师要求完成课前任务 通过课前的预热，让学生了解所学软件，激发学生的学习欲望 考勤 （2 min） · 【教师】使用文旌课堂APP进行签到 · 【学生】按照老师要求签到 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （5 min） · 【教师】提出以下问题： 请说说模板有哪些优点？ · 【学生】思考、举手发言 使用模板可以高效率地制作同一网站中结构相同的页面。 通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容 传授新知 （38 min） · 【教师】通过学生的发言，引入新的知识点，介绍创建、编辑、 应用和管理模板 一、创建模板 【教师】提出以下问题： 在Dreamweaver CC中创建模板的方法有哪些？ 【学生】分析、思考、举手发言 在Dreamweaver CC中创建模板的方法有两种。一种是新建空白模板文档，然后像制作普通网页一样设置模板内容；另一种是将已经制作好的普通网页转换为模板。 （详见教材） 1．新建空白模板文档 模板文档的扩展名为dwt。当用户创建并保存空白模板文档后，就可以像编辑普通网页文档一样编辑模板文档了。 【教师】演示使用Dreamweaver CC在网页中新建空白模板文档 （1）启动Dreamweaver CC，打开blog站点。 （2）单击“文件”→“新建”菜单，打开“新建文档”对话框。在左侧列表中选择“新建文档”选项，在“文档类型”列表中选择“HTML模板”选项，在“布局”列表中选择“<无>”选项。 （3）单击“创建”按钮，创建一个模板文档，并进入编辑状态。 （4）单击“文件”→“保存”菜单，打开“Dreamweaver”对话框，勾选“不再警告我”复选框，然后单击“确定”按钮。 （5）打开“另存模板”对话框，在“另存为”文本框中输入模板文档名，此处为“t1”，然后单击“保存”按钮，将其保存。 （6）打开“文件”面板，可以看到站点中增加了一个名为“Templates”的文件夹，展开该文件夹，可以看到新建的模板文档“t1.dwt”。 （详见教材） 【学生】观察、记录、理解 【课堂互动】教师提出以下问题： 模板文档如何保存？ 【学生】聆听、思考、举手回答 【教师】对学生的回答进行总结 默认情况下，Dreamweaver CC将模板文档保存在站点根目录下的Templates文件夹中。如果在创建模板文档时站点中还没有Templates文件夹，Dreamweaver CC将在保存新建模板时自动创建该文件夹。需要注意的是，不能将模板文档移动到Templates文件夹之外，或将任何非模板文档放在Templates文件夹中，否则会导致将来无法使用模板等问题。 2．将现有网页转换成模板 Dreamweaver CC还可以将网站中已经存在的某个网页另存为模板，然后再利用该模板制作网站中与其结构相同的其他页面。 【教师】演示使用Dreamweaver CC将现有网页转换成模板 （1）继续在前面的blog站点中操作，双击“文件”面板中的“bowen1.html”选项，打开网页文档。将插入点置于“代码”视图中，单击“文件”→“另存为模板”菜单。 （2）打开“另存模板”对话框，在“另存为”文本框中输入模板文档名，此处为“t2”，然后单击“保存”按钮，打开“Dreamweaver”对话框，询问是否更新链接，一般情况下都应单击“是”按钮。 （3）此时网页文档的扩展名变为“dwt”，在“代码”视图中可以看到网页文档的<head>标签中自动添加了一些代码。 （详见教材） 【学生】观察、记录、理解 二、编辑模板 【教师】展示Dreamweaver中的网页模板，帮助学习理解