网页设计ppt电子课件教案第7章使用模板库和扩展插件提高网页制作效率

第第7 7章章 使用模板、库和扩展插使用模板、库和扩展插 件提高网页制作效率件提高网页制作效率 教学内容：教学内容：模板用于制作风格相同、内容并列 的网页，具有统一的外观格式。库则用来将网 站中许多重复的内容组织在一起。使用模板和 库可以创建具有统一风格的网页，可以很容易 地维护网站，可以快速更新网站并修改大量网 页。另外使用插件也可以提高网页的制作效率 。 教学重点教学重点 掌握模板的创建方法 掌握可编辑区的设置 掌握模板的应用 教学难点教学难点 掌握库文件的创建和应用 掌握插件的安装 掌握插件的使用 教学目标和基本要求教学目标和基本要求 _ _ _ 教学时间教学时间：本章共分_课时 教学方法教学方法 案例教学多媒体教学理论面授 教学素材教学素材 课程范例文件：sample第7章 练习文件：exercise第7章 本章各节课时分配本章各节课时分配及链接及链接 7.1 7.1 任务任务2424创建模板网页创建模板网页（ ）课时）课时 7.2 7.2 任务任务2525创建库项目创建库项目（ ）课时）课时 7.3 7.3 任务任务2626利用扩展插件设计背景音乐网页利用扩展插件设计背景音乐网页（ ）课时）课时 7.4 7.4 综合实训综合实训- -使用模板和库创建网站页面使用模板和库创建网站页面（ ）课时）课时 本本 章章 小小 结结 思考与练习思考与练习 7.1 7.1 任务任务2424创建模板网页创建模板网页 通常在一个网站中会有大量风格和内容基本相 似的页面，如果逐页建立、修改，这样很费时、费 力，而且效率不高，整个站点中的网页很难做到有 统一的外观及结构，可以借助Dreamweaver 的模 板功能来简化操作。 7.1.1 简单讲评 模板是由可编辑区域和不可编辑区域两部分组 成。不可编辑区域包含了在所有页面中共有的元素 ，即构成页面的基本框架；而可编辑区域是为添加 相应的内容而设置的。在后期维护中通过改变模板 的不可编辑区域，即构成页面的框架部分，可以快 速地更新整个站点中所有使用了模板的页面布局。 7.1.27.1.2 核心知识核心知识 可编辑区域是基于模板的文档中的未锁定区域 ，是模板用户可以编辑的部分。可以将模板的任何 区域定义为可编辑的。选择“插入模板对象可编 辑区域”命令，弹出“新建可编辑区域”对话框，如图 7-2所示，在对话框中的“名称”文本框中输入可编辑 区域的名称，单击“确定”按钮即可。 7.1.3 实际操作 创建模板网页的具体操作步骤如下。 步骤2 选择“文件另存为模板”命令，弹出“另存为 模板”对话框，在对话框中设置模板的名称。 步骤3 单击“保 存”按钮，弹出 “Dreamweaver”提 示框，提示“要更 新链接吗？” 。 步骤4 单击“ 是”按钮，即可 保存文档。将光 标置于要插入可 编辑区的位置， 选择“插入模板 对象可编辑区 域”命令，弹出“ 新建可编辑区域 ”对话框，在对 话框中设置“名 称”为“正文内容” 。 步骤5 单击“ 确定”按钮，即 可插入可编辑区 。 7.2 7.2 任务任务2525创建库项目创建库项目 在在DreamweaverDreamweaver中，另一种维护文档风格中，另一种维护文档风格 的方法是使用库项目。如果说模板从整体上控制的方法是使用库项目。如果说模板从整体上控制 了文档风格的话，库项目则从局部上维护了文档了文档风格的话，库项目则从局部上维护了文档 的风格。的风格。 7.2.1 简单讲评 在Dreamweaver CS4中除了模板外，还有一种 网页快速编辑工具，那就是库。库是一种用来存储 想要在整个网站上经常重复使用或更新的页面元素 （如图像、文本和其他对象）的方法，这些元素称 为库项目。在Dreamweaver中，可以将单独的文档 内容定义成库项目，也可以将多个文档内容的组合 定义成库项目。利用库项目，同样可以实现对文件 风格的维护。很多网页带有相同的内容，将这些文 档中的共有内容定义为库元素，然后放置到文档中 。 7.2.2 7.2.2 核心知识核心知识 创建好库项目后，可以将 库项目添加到页面中，在添 加到页面时，实际内容以及 对项目的引用就会被插入到 文档。此时，无需提供原项 目就可以正常显示。将插入 点放置在要插入库的位置， 选择“窗口资源”命令，在打 开的“资源”面板中单击“库”按 钮，显示创建的库项目。 7.2.3 7.2.3 实际操作实际操作 创建库项目的具体操作步骤如下。 步骤1 选择“文件新建”命令，弹出“新建文 档”对话框，选择“空白页库项目”选项。 步骤3 将光 标放置在页面中 ，选择“插入表 格”命令，弹出“ 表格”对话框， 在对话框中将“ 行数”设置为2，“ 列数”设置为1，“ 表格宽度”设置 为715像素。 步骤5 将光 标置于表格的第 1行单元格中， 选择“插入图像” 命令，弹出“选 择图像源文件” 对话框，在对话 框中选择top图 像文件。 步骤6 单击“ 确定”按钮，插 入图像。 7.3 7.3 任务任务2626利用扩展插件设计利用扩展插件设计 背景音乐网页背景音乐网页 带背景音乐的网页可以增加吸 引力，利用插件可以实现。 7.3.1 简单讲评 Dreamweaver的真正特殊之处 在于它强大的无限扩展性，插件可 用于拓展Dreamweaver的功能。利 用这些插件可以制作各种复杂的网 页特效，大大提高网页的制作效率 。 7.3.2 核心知识 第三方插件可以根据功能和保存的位置进 行分类，Dreamweaver CS4中的插件主要有3种 ：命令、对象和行为。 7.3.3 7.3.3 实际操作实际操作 下面以刚才安装 的背景音乐插件的使 用为例讲述插件的使 用。 步骤1打开原始 文档，在“常用”插 入面板中可以看到按 钮。 步骤步骤2 2 在插入面板中单击按钮，弹出在插入面板中单击按钮，弹出 “sound”sound”对话框对话框。 步骤3 在对话框中单击“Browse”按钮，弹出 “选择文件”对话框。 步骤4 在对话框中选择音乐文件，单击“确 定”按钮。 步骤6 单击“代码 ”按钮，进入“代码” 视图，可以看到插 入的背景音乐代码 。 7.4 7.4 综合实训综合实训-使用模板和库创使用模板和库创 建网站页面建网站页面 步骤1 选择“文件新建”命令，弹出“新 建文档”对话框，在对话框中选择“空白页 HTML”选项。 步骤3 将光标置于页面中，选择“插入表格” 命令，弹出“表格”对话框，在对话框中将“行数”设 置为2，“列数”设置为1，“表格宽度”设置为757像 数。 步骤5 将光标置 于表格的第1行单元 格中，选择“插入图 像”命令，弹出“选择 图像源文件”对话框 ，在对话框中选择相 应的图像文件。 步骤7 将光标置 于表格的第2行单元格 中，选择“插入图像” 命令，插入相应的图 像文件。 步骤8 选择“文件 保存”命令，在弹出 的“另存为”对话框中的 “保存类型”下拉列表中 选择“库文件（*lbi）” ，“文件名”文本框中输 入top.lbi。 本本 章章 小小 结结 Dreamweaver CS4提供了强大的模板和库，可以 快速地创建大量风格一致的网页。对于制作大型网 站页面，特别是需要整个站点风格统一的用户来讲 ，模板和库是最佳也是必需的选择。另外使用插件 也可以快速提高网页的制作效率。本章的重点和难 点是模板的创建，可编辑区域的设置、利用模板创 建网页。 思考与思考与练习练习 1 1填空题填空题 （1）模板是由_和_两部分组 成。_包含了在所有页面中共有的元素， 即构成页面的基本框架；而_是为添加相应 的内容而设置的。 （2）在Dreamweaver CS4中除了模板外，还有 一种网页快速编辑工具，那就是_。 （3）创建可编辑区域时可以将_ 标记为可编辑区域，但不能将_标记为单 个可编辑区域。 2 2选择题选择题 （1）在后期维护中通过改变模板的_，可 以快速地更新整个站点中所有使用了模板的页面布 局。 （A） 不可编辑区域 （B） 可编辑区域 （C） 重复区域 （D） 可选区域 （2）每个库项目都在站点本地根文件夹的“库” 文件夹中保存为一个单独的文件，文件扩展名为 _。 （A）.dwt （B）.html （C）.lbi （D）.wml （3）在创建模板时，模板对象不包括_。 （A） 重复区域 （B） 可编辑区域 （C） 可选区域 （D） 动态表格 3 3判断题判断题 （1）利用Dreamweaver的模板可以创建具有相同 页面布局的一系列文件，同时模板最