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

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