下载网页网站制作教程第10章

1、 第10章 用框架、模板和库制作网页 Dreamweaver 8(网页制作）主 讲：张景山24.1相似的图形 凌格风空机 wk11 本章知识点及学习目标 本章主要讲述了框架、模板和库在网页中的运用。首先从框架开始介绍了框架的概念，框架的创建、框架的保存、框架的选择和框架的编辑等内容。然后讲述了模板和库的创建、修改以及应用等几个方面的知识。相信通过本章的学习，读者对框架、模板和库在网页设计和制作中的应用已经比较熟悉了。 了解什么是框架 创建模板可编辑区域如何创建框架和框架集 创建基于模板的页面选择和编辑框架的方法 在基于模板的页面中编辑内容保存框架文档 将目标应用到现有文档将页面载入框架 编辑和

2、更新模板认识模板 创建库项目创建和保存模板 插入库项目查看模板 修改库和更新站点本书内容概览10.1什么是框架10.2使用框架 10.2.1创建框架和框架集 10.2.2选择和编辑框架 10.2.3保存框架文档 10.2.4将页面载入框架10.3认识模板 10.3.1关于模板 103.2进一步认识认识模板10.4模板的使用 10.4.1创建和保存模板 10.4.2查看模板 10.4.3创建编辑区域 10.4.4创建基于模板的页面 10.4.5在基于模板的页面中编辑内容 10.4.6将模板应用到现有文档 10.4.7编辑和更新模板10.5库的创建与使用 10.5.1创建库项目 10.5.2插入库

3、项目 10.5.3修改库和更新站点10.6实战演练 10.6.1 范例1 设置框架链接 10.6.2 范例2 使用模板、库创建网页10.7思考与练习10.1什么是框架 框架技术由框架集和框架两部分组成。框架集顾明思义就是多个框架的集合，它定义了所包含地多个框架地结构、数量、大小尺寸以及框架中的页面文件名和路径等有关框架的属性。框架集并不在浏览器中显示，只是存储所含框架的相关信息，框架集中地全部框架文件组合在一起就构成了一个网页页面。框架仅是框架集的组成元素，框架中的页面是整个网页页面的一部分，是一个矩形区域，具有网页的所有属性和功能。如图所示便是一个框架网页，在该网页中共包含了3个子框架网页，

4、从图中地【框架】面板中更容易看出网页的框架结构。 10.2使用框架 学习框架就是为了更好地使用框架。在本节就一些来学习如何创建框架、保存框架以及框架相关的属性设置等内容。 10.2.1创建框架和框架集 在 Dreamweaver 8 中已经提供了许多预置的框架集，既可以从预定义的框架集中选择，也可以自己设计框架集。 1使用预置的框架集创建框架网页2创建自定义框架网页 10.2.2选择和编辑框架 1在框架面板中选择框架和框架集 要修改框架或框架集，首先要选择要修改的框架或框架集。可以在设计视图（文档窗口）中，使用框架面板选择框架或框架集。2在文档窗口中选择框架或框架集 在文档窗口中按下【Alt】

5、并在预选择的框架内单击，该框架可以被选中。用鼠标单击框架的边框整个框架集可以被选中，被选中框架集内的所有框架的边框都带有虚线轮廓。 10.2.3保存框架文档 要在浏览器中预览页面，必须先保存框架集和框架文件。可以分别保存框架集或框架文件，也可以同时保存所有框架和框架集文件。 10.2.4将页面载入框架 当完成框架页面的创建后，可以直接在框架集的框架页面中插入表格、图像以及多媒体等网页元素，完成整个网页的制作，也可以将已经完成的页面载入框架 。10.3认识模板 使用过Word的人一提到模板都会赞不绝口，因为它是在是太方便了，运用模板可以将许多文字编辑中的重复性的工作都可以被放置到模板中，这样只需

6、辛苦一次，以后再遇到相同的工作时，直接套用模板就可以了。编辑文字是这样，制作网页同样也可以这样，Dreamweaver8就提供了模板功能，对于网页制作者来说，这可是个天大的福音，它意味着从此可以摆脱不停地、重复地做同一件事件的痛苦劳作了。 10.3.1关于模板 使用模板创建文档可以使网站和网页具有统一的结构和外观，如果有好几个网页想要用同一风格来制作，用【模板】绝对是最有效，并且也是最快的方法。模板实质上就是作为创建其他文档的基础文档。在创建模板时，可以说明哪些网页元素应该长期保留，不可编辑，哪些元素可以编辑修改。 模板的优点风格一致，看起来比较系统，也省去了制作同一页面的麻烦。如果要修改共同

7、的页面不必一个一个修改，只要更改应用于它们之上的“模板”就可以了。免除了以前没有此功能时还要常常【另存为】，一不小心覆盖重要档案的困扰。10.3.2进一步认识认识模板 Macromedia Dreamweaver 8 模板是一种特殊类型的文档，用于设计具有固定的页面结构布局；我们可以基于模板创建文档，从而使创建的文档继承模板的页面布局。设计模板时，可以指定在基于模板的文档中用户可以编辑文档的哪些区域。 将文档另存为模板时，Dreamweaver 自动锁定文档的大部分区域。模板创作者指定基于模板的文档中的哪些区域可编辑，可在模板中插入可编辑区域或可编辑参数。 创建模板时，可编辑区域和锁定区域都可

8、以更改。但是，在基于模板的文档中，模板用户只能在可编辑区域中进行更改；无法修改锁定区域。共有四种类型的模板区域。【可编辑区域】：是基于模板的文档中的未锁定区域；它是模板用户可以编辑的部分。【重复区域】：是文档中设置为重复的布局部分。例如，可以设置重复一个表格行。【可选区域】：是在模板中指定为可选的部分，用于保存有可能在基于模板的文档中出现的内容（如可选文本或图像）。【可编辑标签属性】：可以在模板中编辑标签属性，以便该属性可以在基于模板的页面中编辑。例如，可以【锁定】在文档中出现的图像，但让模板用户将对齐设为左对齐、右对齐或居中对齐等属性。10.4模板的使用 学习模板就是为了更好的使用模板，为网

9、页设计和制作服务。在接下来的操作中将一起学习如何创建模板、保存模板、设置模板以及使用模板等操作。 10.4.1创建和保存模板 创建模板有2条途径，既可以从新建的空白HTML文档中创建模板，也可以把现有的HTML文档存为模板，并通过对可编辑区域进行适当的修改，使之符合新的网页设计要求。Dreamweaver 8自动把模板存储在站点的本地根文件夹下的Templates子文件夹中。如果此文件夹不存在，当在站点中存储第一个模板时，Dreamweaver 8将自动在本地根文件夹中生成此子文件夹（Templates）。 10.4.2查看模板使用【资源】面板的【模板】类别可以管理现有模板，包括重命名模板文件

10、和删除模板文件。 1. 重命名模板2. 删除模板10.4.3创建编辑区域 在模板创建之后，需要根据自己的具体要求对模板中的具体内容进行编辑，指定哪些内容可以编辑，哪些内容不能编辑（锁定）。 在模板文档中，可编辑区是页面中变化的部分，如每日导读的内容等。锁定区（不可编辑区）是各页面中相对保持不变的部分，如导航栏和栏目标志等。 当我们新创建一个模板或把已有的文档存为模板时，Dreamweaver 8默认把所有区域被标记为锁定。因此，我们必须根据自己的要求对模板进行编辑，把某些部分标记为可编辑的。 在编辑模板时，可以修改可编辑区，也可以修改锁定区。但当该模板被应用于文档时，只能修改文档的可编辑区，文

11、档的锁定区是不允许修改的。1. 定义新的可编辑区2. 定义可编辑的重复区域3. 取消可编辑区标记 10.4.4创建基于模板的页面 创建模板只是为了以后使用模板打下良好的基础，用户可以在此基础上分别添加内容，从而创建一系列具有相同外观的页面。 10.4.5在基于模板的页面中编辑内容 在基于模板所创建的新页面中，模板中所定义的不可编辑区域中鼠标不可用，呈现 状态。而在可编辑区域鼠标可用，可以直接在可编辑区域中输入特定的内容。这不但保证了系列页面风格一致性，也保证了锁定区域内容不被破坏，从而大大提高了设计效率。 10.4.6将模板应用到现有文档在很多时候，已经有了大量未使用模板的网页，现在想要将其转

12、换为统一的外观，此时就可以利用将模板应用到现有文档的方法来统一这些页面的风格。 10.4.7编辑和更新模板模板创建好以后并非一成不变，可以根据实际需要，随时编辑模板以满足新的设计要求。当修改一个模板时，Dreamweaver 8会提示我们是否更新应用该模板的网页。当然也可以使用更新命令，手工更新当前网页或整个站点。 10.5库的创建与使用库是一种特殊的 Dreamweaver 文件，其中包含用户已创建的单独资源或资源副本的集合。库中可以存放各种各样的页面元素，如图像、表格、声音和Flash影片。库里的这些资源称为库项目。在需要时，可以把库项目拖放到文档中。这时，Dreamweaver 8会在文

13、档中插入该库项目的文件。这样，通过修改库项目，即可实现整个网站各页面上与库项目相关内容的一次性更新，既快捷又方便。Dreamweaver 8将库项目存放在每个站点的本地根目录下的Library文件夹中，扩展名为.lbi，而将所有的模板文件都存放在站点根目录下的Templates子目录中，扩展名为.dwt。 10.5.1创建库项目库可以是各种网页元素。Dreamweaver 8保存的只是对被链接项目（如图像）的引用。原始文件必须保留在指定的位置，这样才能保证库项目的正确引用。库项目也可以包含行为，但是在库项目中编辑行为有一些特殊的要求，例如库项目不能包含时间轴或样式表等。创建库项目时，先选取文档主体的某一部分，然后由Dreamweaver 8转换为库项目。 10.5.2插入库项目把库项目添加到页面时，实际内容以及对项目的引用就会被插入到文档中。 10.5.3修改库和更新站点 当编辑库项目时，可以更新使用该项目的所有文档，也可以选择不更新。 库项目其他种类的更改包括。重命名项目以断开其与文档或模板的链接；从站点的库中删除项目；重新创建丢失的库项目。10.6 实战演练 通过前面的学习，我们