课题
模板与库（一）
课时
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网页模板
Dreamweaver CC还可以将网站中已经存在的某个网页另存为模板，然后再利用该模板制作网站中与其结构相同的其他页面。
【教师】演示使用Dreamweaver CC将现有网页转换成模板
（1）继续在前面的blog站点中操作，双击“文件”面板中的“bowen1.html”选项，打开网页文档。将插入点置于“代码”视图中，单击“文件”→“另存为模板”菜单。
（2）打开“另存模板”对话框，在“另存为”文本框中输入模板文档名，此处为“t2”，然后单击“保存”按钮，打开“Dreamweaver”对话框，询问是否更新链接，一般情况下都应单击“是”按钮。
（3）此时网页文档的扩展名变为“dwt”，在“代码”视图中可以看到网页文档的<head>标签中自动添加了一些代码。
（详见教材）
【学生】观察、记录、理解
二、编辑模板
【教师】展示Dreamweaver中的网页模板，帮助学习理解
一般情况下，模板分为两部分，一部分是模板创建文档中不能编辑的区域，称为不可编辑区域；另外一部分是模板创建文档中可以编辑的区域，称为可编辑区域。
用户在创建模板并设置内容后，如果直接用其创建网页文档，网页文档中的内容默认都是不可编辑的。所以，在创建模板之后还需要创建可编辑区域才能用其创建网页文档。
（详见教材）
1．创建可编辑的区域
要使模板有效，至少要在其中创建一个可编辑区域，下面介绍创建可编辑区域的具体操作。
【教师】演示使用Dreamweaver CC将创建可编辑的区域
（1）打开上节创建的模板文档“t2.dwt”，选中想要创建为可编辑区域的元素，此处选中id属性值为content的<article>标签。
（2）单击“插入”→“模板”→“可编辑区域”菜单，打开“新建可编辑区域”对话框，在“名称”文本框中输入可编辑区域的名称（此处为默认），单击“确定”按钮创建可编辑区域，新建的可编辑区域处于选中状态。
（3）按“Ctrl+S”组合键，保存模板文档。
（详见教材）
【学生】观察、记录、理解
2．删除可编辑区域
【教师】提出以下问题：
如何删除可编辑区域？
【学生】阅读、思考、举手回答
如果已经将模板中的一个区域标记为可编辑的，而现在想要再次锁定它（使其在基于模板创建的文档中不可编辑），可在选中对应区域后，单击“工具”→“模板”→“删除模板标记”菜单。
三、应用模板
创建模板并设置好可编辑区域后，就可以应用该模板去创建网页文档了。应用模板创建网页文档的方法有两种，一种是使用“新建文档”对话框，另外一种是使用“资源”面板。
1．使用“新建文档”对话框
【教师】演示使用Dreamweaver CC“新建文档”应用模板
（1）单击“文件”→“新建”菜单，打开“新建文档”对话框。
（2）在左侧列表中选择“网站模板”，在“站点”列表中选择模板所在的站点，此处为blog，在“站点‘blog’的模板”列表中选择要应用的模板，此处为t2。
（3）单击“创建”按钮，使用模板创建的网页文档便出现在文档窗口中，该文档中只有可编辑区域的内容可以修改。
（4）按“Ctrl+S”组合键，打开“另存为”对话框，保存位置选择站点根目录，在“文件名”文本框中输入“bowen2.html”，然后单击“保存”按钮。
（5）在“设计”视图中选中文档可编辑区域的文本，按“Delete”键删除它们；再双击站点根目录下的文本文档“日志2文字.txt”，在其中按“Ctrl+A”组合键选中所有内容；接着按“Ctrl+C”组合键拷贝内容；最后将鼠标指针置于“设计”视图中的可编辑区域，按“Ctrl+V”组合键粘贴内容。
（6）参照bowen1.html页面的效果，在s1.css文件中为这些文本元素设置样式，然后按“Ctrl+S”组合键，保存该页面。
（详见教材）
【学生】观察、记录、理解
2．使用“资源”面板
“资源”面板主要用于对网站中的资源进行分类管理，这些资源包括图像、颜、链接地址等。由于“资源”面板中显示的是当前站点中的资源，所以在使用“资源”面板前，需要注意先将当前站点设置为目标站点。
【教师】演示使用Dreamweaver CC“资源”面板应用模板
（1）单击“窗口”→“资源”菜单，打开“资源”面板。
（2）该面板中集合了当前站点中的所有元素，默认情况下显示图像元素。单击面板左侧的“模板”按钮，其右侧将显示该站点中包含的所有模板文件。
（3）选择任意一个模板文件，上方的预览窗口中将会显示该模板文件的预览效果。
（4）鼠标右击所需模板，在弹出的快捷菜单中选择“从模板新建”选项，文档窗口中将显示新建的文档，将其保存即可。
（详见教材）
【学生】观察、记录、理解
四、管理模板
管理模板的操作主要包括更新模板、删除模板和分离模板
1．更新模板
【教师】演示使用Dreamweaver CC更新模板
创建模板并应用其创建网页后，如果对模板中的某个部分不满意，可对其进行修改。修改完毕并保存时，Dreamweaver CC会打开“更新模板文件”对话框，提示是否更新站点中基于该模板创建的网页文档，单击“更新”按钮可更新通过该模板创建的所有网页，单击“不更新”按钮，则只保存模板而不更新基于该模板创建的其他网页。
（详见教材）
【学生】观察、记录、理解
2．删除模板
【教师】演示使用Dreamweaver CC更新模板
如果不再需要某个模板，可将其删除。在“资源”面板中选中不再需要的模板文件，按“Delete”键。如果确认删除，单击“是”按钮；如果不想删除，则单击“否”按钮。
（详见教材）
【学生】观察、记录、理解
3．分离模板
【教师】演示使用Dreamweaver CC更新模板
如果需要对使用模板创建的网页中的不可编辑区域进行编辑，可以将网页文档与模板进行分离。分离后的文档就变成了普通的网页文档，可以像编辑普通网页文档一样对其进行编辑操作，但更新原模板文档后，分离后的文档无法再同步更新。
分离模板的方法为，打开使用模板创建的网页文档，单击“工具”→“模板”→“从模板中分离”菜单。
（详见教材）
【学生】观察、记录、理解
⏹【学生】聆听、思考、记忆、实际操作
通过讲解，让学生了解如何创建、编辑、 应用和管理模板
第二节课
任务实施
（25 min）
⏹【教师】演示在Dreamweaver CC中应用模板制作“传承经典网”介绍页的操作，对其进行分析
（1）继续在项目八任务二任务实施中创建的文档中操作，或用本书配套素材“项目九”→“任务一”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件，并打开“index.html”网页文档。
（2）切换至“代码”视图，将<nav>标签中无序列表的第一个列表项的超链接目标地址改为“index.html”；将第二个列表项的超链接目标地址改为“about.html”；然后将网页文档保存。
（3）将鼠标指针置于“代码”视图中，单击“文件”→“另存为模板”菜单，打开“另存模板”对话框，在“另存为”文本框中输入“t1”，然后单击“保存”按钮，打开“Dreamweaver”对话框，单击“是”按钮，创建首页的模板。
（4）选中<main>标签，单击“插入”→“模板”→“可编辑区域”菜单，打开“新建可编辑区域”对话框，在“名称”文本框中输入“con”，然后单击“确定”按钮，添加可编辑区域。
（5）保存该模板。
（6）在“代码”视图中将<main>标签中的内容删除，并将其id属性值改为about_main；接着在其中添加一个<h1>标签和12个<p>标签，标签的具体内容可参考本书配套素材“项目九”→“任务一”→“about.html”文件。
（7）在index.css文件中添加样式。
（8）添加#about_main h1选择器，设置样式。
（9）保存文档，按“F12”键查看页面效果。
（详见教材）
⏹【教师】巡堂指导，及时解决学生的问题
通过任务实施，让学生们主动参与学习，熟悉使用Dreamweaver CC应用模板制作网页
实践探索
（15 min）
⏹【教师】组织学生搜集资料，保存网页，通过练习熟悉使用Dreamweaver CC制作模板的操作
⏹【学生】自主学习、理解、上机操作
⏹【教师】巡堂指导，及时解决学生的问题
通过实践探索，使学生进一步巩固所学知识，了解更多关于网页模板的知识
课堂小结
（3 min）
⏹【教师】简要总结本节课的要点
本节课学习了使用Dreamweaver创建、编辑、应用和管理网页模板的具体操作，并通过实践练习了使用Dreamweaver CC应用模板制作网页的方法。希望大家在课下多加练习，掌握好网页模板的相关知识和操作。
⏹【学生】总结回顾知识点
总结知识点，巩固印象
作业布置
（2 min）
⏹【教师】布置课后作业
（1）完成相关课后习题。
（2）查阅资料，保存更多的网页模板。
⏹【学生】完成课后任务
延展知识面，巩固所学知识
教学反思
本节课主要内容都为上机操作，基本通过演示-讲解-操作-练习的步骤熟悉知识点，但是在内容方面欠缺发散性，对于学生的创造性思维的锻炼有所欠缺，在下一节课应该加强学生发散性思维，创新思维的针对性练习。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。