《网页设计与制作案例教程（第2版） 》教案 第21课 模板与库（二）

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

实践探索（15min）

课堂小结（3min）

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

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

（5min）【教师】提出以下问题：请说说库的作用是什么？【学生】思考、举手发言使用库项目可以将网页中常用的页面元素保存起来，然后在多个网页中重复使用。通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容传授新知

（38min）【教师】通过学生的发言，引入新的知识点，介绍创建、应用、编辑库项目的方法一、创建库项目【教师】提出以下问题：什么是库项目？【学生】阅读、思考、举手发言库项目是一种特殊类型的文件，拓展名为lbi。我们可以将网页中的任意元素定义为库项目，如图像、表格、文本、声音等。（详见教材）【教师】展示Dreamweaver中的库项目，帮助学习理解库项目可以在多个网页中重复使用，当更改某个库项目时，所有应用该库项目的网页都可以同时更新。例如，假设为某公司建立一个大型站点时，公司想让其广告语出现在站点的每个网页上，但是还没有确定最终的广告语。此时就可以创建一个包含临时广告语的库项目并插入到每个网页中，当公司提供了最终的广告语后，就可以通过更改库项目使所有网页自动更新。（详见教材）【教师】提出以下问题：针对图像等元素，网页中只是保存了指向图像等文件的路径，以后通过置换图像来更新网页不也一样吗？【学生】阅读、思考、举手发言其实是不一样的。例如，假设将一幅广告图像创建为库项目，则图像及其尺寸、链接、目标等属性均包含在库项目中。以后修改广告时，只要修改一次库项目及其属性，就可以自动更新全部使用该库项目的网页。如果不将广告图像创建为库项目，尽管可以通过置换图像来更新网页，但是还必须分别在各网页中为其设置链接等属性。（详见教材）【教师】演示使用DreamweaverCC在网页中创建库项目（1）打开“blog”站点，双击“文件”面板中的网页文档“index.html”，将其打开。在“设计”视图中选中网页最下方的<footer>标签，然后单击“工具”→“库”→“增加对象到库”菜单，打开“Dreamweaver”对话框和“资源”面板。（2）单击“确定”按钮，可以看到在“资源”面板中生成了库项目，其名称处于可编辑状态。（3）在文本框中输入库项目名称，此处为“footer”，然后按“Enter”键确认，打开“更新文件”对话框，单击“更新”按钮，完成库项目的命名。（详见教材）【学生】观察、记录、理解二、应用库项目【教师】演示使用DreamweaverCC在网页中创建库项目库项目的应用方法为，首先定位插入点，然后选中库项目并单击“资源”面板底部的“插入”按钮，将库项目插入到文档中。（详见教材）【学生】观察、记录、理解【教师】展示Dreamweaver中的网页库项目属性面板，帮助学习理解“属性”面板中各设置项的意义如下。 “Src”信息：显示库项目源文件的名称和在站点中存放的位置。 “打开”按钮：单击可打开库项目源文件并进行编辑。 “从源文件中分离”按钮：单击可断开所选库项目与其源文件之间的链接，使库项目成为普通对象。 “重新创建”按钮：若应用后的库项目有所改动，单击该按钮可用新的库项目覆盖旧的库项目。三、编辑库项目【教师】演示使用DreamweaverCC在网页中编辑和更新库项目想要编辑库项目时，可在“资源”面板中双击库项目，将其在文档窗口中打开，然后进行编辑即可。在编辑库项目后，对其进行保存操作时，将打开“更新库项目”对话框，询问是否更新使用了库项目的网页，单击“更新”按钮后，打开“更新页面”对话框，在“查看”下拉列表中选择“整个站点”选项，然后单击“完成”按钮即可。（详见教材）【学生】观察、记录、理解【课堂互动】教师提出以下问题：【学生】聆听、思考、举手回答【教师】对学生的回答进行总结【学生】聆听、思考、记忆、实际操作通过讲解，让学生了解如何创建、应用、编辑库项目课堂讨论（15min）【教师】组织学生阅读“侯帅”的故事，并让学生以小组为单位讨论以下问题：这个故事带给你怎样的启发？你认为如何才能做好电商设计工作？【学生】阅读、思考、小组讨论，有小组代表上台发表讨论结果【教师】与学生一起评价各组的发言以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识点第二节课任务实施

（25min）【教师】演示在DreamweaverCC中应用库项目完善“传承经典网”介绍页的操作，对其进行分析（1）“任务二”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件，然后打开“index.html”网页（2）选中<main>→<divclass="sheet_3">标签的所有内容，打开“资源”面板，单击面板下方的“新建库项目”按钮，打开“Dreamweaver”对话框，单击“确定”按钮，创建库项目。（3）“资源”面板添加一个库项目，其名称处于可编辑状态，将其命名为“sheet_3”，按“Enter”确定，打开“更新文件”对话框，单击“更新”按钮，完成库项目的添加。（4）保存“index.html”。双击“文件”窗口的“about.html”，将其在文档窗口中打开，在<main>标签后添加一个class属性值为center的<div>标签。（5）将鼠标置于<div>标签中，在“资源”面板中选中“sheet_3”选项，然后单击面板下方的“插入”按钮，添加库项目。（6）保存“about.html”，按“F12”键查看页面效果（详见教材）【教师】巡堂指导，及时解决学生的问题利用任务实施，让学生们主动参与学习，熟悉在Dreamweaver中创建库的步骤实践探索

（15min）【教师】组织学生自主练习，创建并应用模板制作“图书交易网”小说投稿页【学生】参照任务实施的步骤上机操作【教师】巡堂指导，及时解决学生的问题通过实践探索，使学生进一步巩固所学知识，了解更多关于网页模板的知识课堂小结

（3min）【教师】简要总结本节课的要点本节课学习了创建、应用、编辑库项目的基本操作，并通过实践练习了使用DreamweaverCC应用库项目制作网页的方法。希望大家在课下多加练习，掌握库项目的相关知识和操作。【学生】总结回顾知识点总结知识点，巩固印象作业布置

（2min）【教师】布置课后作业（1）完成相关课