《网页设计与制作案例教程（第2版） 》教案 第20课 模板与库（一）_第1页
《网页设计与制作案例教程（第2版） 》教案 第20课 模板与库（一）_第2页
《网页设计与制作案例教程（第2版） 》教案 第20课 模板与库（一）_第3页
《网页设计与制作案例教程（第2版） 》教案 第20课 模板与库（一）_第4页
《网页设计与制作案例教程（第2版） 》教案 第20课 模板与库（一）_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

20第20第课模板与库（一）（一）模板与库（一）模板与库第课20PAGE6PAGE6PAGE7PAGE720第20第课模板与库（一） 课题模板与库（一）课时2课时（90min）教学目标知识技能目标：（1）熟悉模板的基础知识。（2）能够使用DreamweaverCC在网页中创建并应用模板。思政育人目标：（1）学习模板和库，增强专业技能，提高工作效率。（2）学习工匠精神，培养认真、严谨的工作态度。教学重难点教学重点：模板的基础知识教学难点：使用DreamweaverCC在网页中创建并应用模板教学方法情景模拟法、问答法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：传授新知（38min）第2节课：实践探究（25min）

项目实训（15min）

课堂小结（3min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解网站模板【学生】按照教师要求完成课前任务通过课前的预热，让学生了解所学软件，激发学生的学习欲望考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入

（5min）【教师】提出以下问题：请说说模板有哪些优点？【学生】思考、举手发言使用模板可以高效率地制作同一网站中结构相同的页面。通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容传授新知

（38min）【教师】通过学生的发言，引入新的知识点，介绍创建、编辑、应用和管理模板一、创建模板【教师】提出以下问题：在DreamweaverCC中创建模板的方法有哪些？【学生】分析、思考、举手发言在DreamweaverCC中创建模板的方法有两种。一种是新建空白模板文档，然后像制作普通网页一样设置模板内容；另一种是将已经制作好的普通网页转换为模板。（详见教材）1．新建空白模板文档模板文档的扩展名为dwt。当用户创建并保存空白模板文档后，就可以像编辑普通网页文档一样编辑模板文档了。【教师】演示使用DreamweaverCC在网页中新建空白模板文档（1）启动DreamweaverCC，打开blog站点。（2）单击“文件”→“新建”菜单，打开“新建文档”对话框。在左侧列表中选择“新建文档”选项，在“文档类型”列表中选择“HTML模板”选项，在“布局”列表中选择“<无>”选项。（3）单击“创建”按钮，创建一个模板文档，并进入编辑状态。（4）单击“文件”→“保存”菜单，打开“Dreamweaver”对话框，勾选“不再警告我”复选框，然后单击“确定”按钮。（5）打开“另存模板”对话框，在“另存为”文本框中输入模板文档名，此处为“t1”，然后单击“保存”按钮，将其保存。（6）打开“文件”面板，可以看到站点中增加了一个名为“Templates”的文件夹，展开该文件夹，可以看到新建的模板文档“t1.dwt”。（详见教材）【学生】观察、记录、理解【课堂互动】教师提出以下问题：【学生】聆听、思考、举手回答【教师】对学生的回答进行总结2．将现有网页转换成模板DreamweaverCC还可以将网站中已经存在的某个网页另存为模板，然后再利用该模板制作网站中与其结构相同的其他页面。【教师】演示使用DreamweaverCC将现有网页转换成模板（1）继续在前面的blog站点中操作，双击“文件”面板中的“bowen1.html”选项，打开网页文档。将插入点置于“代码”视图中，单击“文件”→“另存为模板”菜单。（2）打开“另存模板”对话框，在“另存为”文本框中输入模板文档名，此处为“t2”，然后单击“保存”按钮，打开“Dreamweaver”对话框，询问是否更新链接，一般情况下都应单击“是”按钮。（3）此时网页文档的扩展名变为“dwt”，在“代码”视图中可以看到网页文档的<head>标签中自动添加了一些代码。（详见教材）【学生】观察、记录、理解二、编辑模板【教师】展示Dreamweaver中的网页模板，帮助学习理解一般情况下，模板分为两部分，一部分是模板创建文档中不能编辑的区域，称为不可编辑区域；另外一部分是模板创建文档中可以编辑的区域，称为可编辑区域。用户在创建模板并设置内容后，如果直接用其创建网页文档，网页文档中的内容默认都是不可编辑的。所以，在创建模板之后还需要创建可编辑区域才能用其创建网页文档。（详见教材）1．创建可编辑的区域要使模板有效，至少要在其中创建一个可编辑区域，下面介绍创建可编辑区域的具体操作。【教师】演示使用DreamweaverCC将创建可编辑的区域（1）打开上节创建的模板文档“t2.dwt”，选中想要创建为可编辑区域的元素，此处选中id属性值为content的<article>标签。（2）单击“插入”→“模板”→“可编辑区域”菜单，打开“新建可编辑区域”对话框，在“名称”文本框中输入可编辑区域的名称（此处为默认），单击“确定”按钮创建可编辑区域，新建的可编辑区域处于选中状态。（3）按“Ctrl+S”组合键，保存模板文档。（详见教材）【学生】观察、记录、理解2．删除可编辑区域【教师】提出以下问题：如何删除可编辑区域？【学生】阅读、思考、举手回答如果已经将模板中的一个区域标记为可编辑的，而现在想要再次锁定它（使其在基于模板创建的文档中不可编辑），可在选中对应区域后，单击“工具”→“模板”→“删除模板标记”菜单。三、应用模板创建模板并设置好可编辑区域后，就可以应用该模板去创建网页文档了。应用模板创建网页文档的方法有两种，一种是使用“新建文档”对话框，另外一种是使用“资源”面板。1．使用“新建文档”对话框【教师】演示使用DreamweaverCC“新建文档”应用模板（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．使用“资源”面板“资源”面板主要用于对网站中的资源进行分类管理，这些资源包括图像、颜色、链接地址等。由于“资源”面板中显示的是当前站点中的资源，所以在使用“资源”面板前，需要注意先将当前站点设置为目标站点。【教师】演示使用DreamweaverCC“资源”面板应用模板（1）单击“窗口”→“资源”菜单，打开“资源”面板。（2）（3）选择任意一个模板文件，上方的预览窗口中将会显示该模板文件的预览效果。（4）鼠标右击所需模板，在弹出的快捷菜单中选择“从模板新建”选项，文档窗口中将显示新建的文档，将其保存即可。（详见教材）【学生】观察、记录、理解四、管理模板管理模板的操作主要包括更新模板、删除模板和分离模板1．更新模板【教师】演示使用DreamweaverCC更新模板创建模板并应用其创建网页后，如果对模板中的某个部分不满意，可对其进行修改。修改完毕并保存时，DreamweaverCC会打开“更新模板文件”对话框，提示是否更新站点中基于该模板创建的网页文档，单击“更新”按钮可更新通过该模板创建的所有网页，单击“不更新”按钮，则只保存模板而不更新基于该模板创建的其他网页。（详见教材）【学生】观察、记录、理解2．删除模板【教师】演示使用DreamweaverCC更新模板如果不再需要某个模板，可将其删除。在“资源”面板中选中不再需要的模板文件，按“Delete”键。如果确认删除，单击“是”按钮；如果不想删除，则单击“否”按钮。（详见教材）【学生】观察、记录、理解3．分离模板【教师】演示使用DreamweaverCC更新模板如果需要对使用模板创建的网页中的不可编辑区域进行编辑，可以将网页文档与模板进行分离。分离后的文档就变成了普通的网页文档，可以像编辑普通网页文档一样对其进行编辑操作，但更新原模板文档后，分离后的文档无法再同步更新。分离模板的方法为，打开使用模板创建的网页文档，单击“工具”→“模板”→“从模板中分离”菜单。（详见教材）【学生】观察、记录、理解【学生】聆听、思考、记忆、实际操作通过讲解，让学生了解如何创建、编辑、应用和管理模板第二节课任务实施

（25min）【教师】演示在DreamweaverCC中应用模板制作“传承经典网”介绍页的操作，对其进行分析（1）继续在项目八任务二任务实施中创建的文档中操作，或用本书配套素材“项目九”→“任务一”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件，并打开“index.html”网页文档。（2）切换至“代码”视图，将<nav>标签中无序列表的第一个列表项的超链接目标地址改为“index.html”；将第二个列表项的超链接目标地址改为“about.html”；然后将网页文档保存。（3）将鼠标指针置于“代码”视图中，单击“文件”→“另存为模板”菜单，打开“另存模板”对话框，在“另存为”文本框中输入“t1”，然后单击“保存”按钮，打开“Dreamweaver”对话框，单击“是”按钮，创建首页的模板。（4）选中<main>标签，单击“插入”→“模板”→“可编辑区域”菜单，打开“新建可编辑区域”对话框，在“名称”文本框中输入“con”，然后单击“确定”按钮，添加可编辑区域。（5）保存该模板。（6）；接着在其中添加一个<h1>标签和12个<p>标签，标签的具体内容可参考本书配套素材“项目九”→“任务一”→“about.html”文件。（7）在index.css文件中添加样式。（8）添加#about_mainh1选择器，设置样式。（9）保存文档，按“F12”键查看页面效果。（详见教材）【教师】巡堂指导，及时解决学生的问题通过任务实施，让学生们主动参与学习，熟悉使用DreamweaverCC应用模板制作网页实践探索

（15min）【教师】组织学生搜集资料，保存网页，通过练习熟悉使用DreamweaverCC制作模板的操作【学生】自主学习、理解、上机操作【教师】巡堂指导，及时解决学生的问题通过实践探索，使学生进一步巩固所学知识，了解更多关于网页模板的知识课堂小结

（3min）【教师】简要总结本节课的要点本节课学习了使用Dreamweaver创建、编辑、应用和管理网页模板的具体操作，并通过实践练习了使用Dre

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论