《第8章 使用模板和库项目》由会员分享，可在线阅读，更多相关《第8章 使用模板和库项目（11页珍藏版）》请在金锄头文库上搜索。
1、 Dreamweaver 网页设计电子版教科书 第 8 章1第 8 章 使用模板和库项目很多网站中，同一栏目（大类）下的网页一般都使用相同的布局方式或页面元素。如果一页一页地做，会浪费很多不必要的时间。为避免乏味而又繁琐的重复操作，并提高网页的制作效率，可以使用 Dreamweaver 提供的“模板”功能来制作相同结构的网页；而将相同的页面元素（如导航栏、注册信息等）制作成库项目，然后在各个网页中重复使用。8.1 使用模板Dreamweaver 中的模板是一种特殊类型的文档，用于制作同一网站中结构相同的网页。用户可基于模板创建文档，从而使创建的文档继承模板的页面布局。此外，基于模板创建的文档与
2、模板保持链接关系（除非以后分离该文档） ，修改模板后，所有基于该模板创建的文档都可以自动更新。8.1.1 创建模板文档创建模板文档的方法有两种。一种是新建空白模板文档，然后像制作普通网页一样制作和编辑模板内容；还有一种是将普通网页转换为模板。1. 创建空白模板文档在 Dreamweaver 中创建的空白网页模板与空白网页文档相同，只是模板文档的扩展名为“dwt” 。当用户创建并保存好空白网页模板后，可以像编辑普通网页一样编辑模板文档。Step01 启动 Dreamweaver8 后，将“lily”文件夹复制到本地磁盘，并将“lily ”文件夹定义为本地站点，然后选择“文件”“新建”菜单，打开“
3、新建文档”对话框。Step02 在“常规”选项卡的“类别”列表中选择“模板页” ，然后在“模板页”列表中选择“HTML 模板” ，如图 8-1-1 所示。 Dreamweaver 网页设计电子版教科书 第 8 章2图 8-1-1 新建模板文档Step03 单击“创建”按钮，便创建了一个模板文档，并进入其编辑状态，如图 8-1-2 所示。图 8-1-2 模板文档的编辑状态Step04 选择“文件”“保存”菜单，弹出提示框，勾选“不再警告我”复选框，然后单击“确定”按钮，如图 8-1-3 所示。图 8-1-3 提示框Step05 弹出“另存为模板”对话框，在“另存为”文本框中输入模板文档名（此处为
4、“t1”） ，然后单击“保存”按钮保存文档，如图 8-1-4 所示。 Dreamweaver 网页设计电子版教科书 第 8 章3图 8-1-4 “另存为模板”对话框Step06 打开“文件”面板，可以看到其中多了一个名为“Templates”的文件夹，展开该文件夹，可以看到新建的模板文档“t1.dwt ”，如图 8-1-5 所示。此时我们便可以像编辑普通网页一样制作模板内容。图 8-1-5 查看模板默认情况下，Dreamweaver 将模板文档保存在站点根目录下的 Templates 文件夹中。如果在创建模板文档时站点中还没有 Templates 文件夹，Dreamweaver 将在保存新建模
5、板时自动创建该文件夹。温馨提示：不要将模板文档移动到 Templates 文件夹之外，或将任何非模板文件放在Templates 文件夹中，否则会导致将来无法使用模板等一系列问题。2. 将现有网页转换成模板用户在制作好一个网页后，可将其另存为模板，然后再利用该模板制作网站中的其它网页。具体操作如下。Step01 启动 Dreamweaver8 后，打开上一小节定义的站点“lily”中的“com.html ”网页文档。Step02 选择“文件”“另存为模板”菜单，打开“另存为模板”对话框，在“另存为”文本框中输入模板文档名（此处为“t2 ”） ，然后单击“保存”按钮，如图 8-1-6 左图所示。
6、Dreamweaver 网页设计电子版教科书 第 8 章4图 8-1-6 将现有网页另存为模板Step03 弹出提示框，询问是否更新链接，一般情况下都应单击“是”按钮，如图 8-1-6右图所示。知识库：由于文档的位置发生了变化（相对于原网页） ，所以模板中的链接需要更新。8.1.2 编辑模板用户在创建好模板后，即可对其进行编辑。编辑模板包括创建可编辑区域、更改可编辑区域名称以及删除可编辑区域标记等操作。1. 创建可编辑区域所谓可编辑区域，是指模板中未锁定的部分，也就是在基于模板创建的文档中可以编辑的区域。要是模板有效，至少要在其中包含一个可编辑区域。在模板中创建可编辑区域的操作如下。Step0
7、1 打开上节中创建的模板文档“t2.dwt ”，将插入点置于需创建为可编辑区域的位置，或选择要设置为可编辑区域的对象，如表格或单元格等（此处选择网页中部右侧的大表格） ，如图 8-1-7 所示。图 8-1-7 选择对象Step02 选择“插入”“模板对象”“可编辑区域”菜单，打开“新建可编辑区域”对话框，在“名称”编辑框中输入可编辑区域名称（此处为默认） ，如图 8-1-8 所示。 Dreamweaver 网页设计电子版教科书 第 8 章5图 8-1-8 “新建可编辑区域”对话框Step03 单击“确定”按钮创建可编辑区域，新建的可编辑区域处于选中状态，如图 8-1-9所示。图 8-1-9 创
8、建可编辑区域2. 更改可编辑区域名称用户在创建可编辑区域时，默认的区域名称为“EditRegion3” 。如果想修改该区域名称，可在“属性”面板中进行操作：Step01 单击可编辑区域左上方的名称标签将其选中，可看到“属性”面板上的“名称”文本框中显示了该可编辑区域的名称，如图 8-1-10 所示。 Dreamweaver 网页设计电子版教科书 第 8 章6图 8-1-10 可编辑区域的“属性 ”面板Step02 选中“名称”文本框中的可编辑区域名称，将其删除后重新输入新名称。3. 删除可编辑区域标记如果已经将模板中的一个区域标记为可编辑，而现在想要再次锁定它（使其在基于模板创建的文档中不可编
9、辑） ，可在选中可编辑区域后，选择“修改”“模板”“删除模板标记”菜单。8.1.3 应用模板创建文档创建模板后，就可以在该模板的基础上创建网页文档了。应用模板创建网页文档的方法有两种，一种是使用“新建文档”对话框，还有一种是使用“资源”面板，下面分别介绍。1. 使用“新建文档”对话框使用“新建文档”对话框新建基于模板网页的方法非常简单，只需在该对话框中选择模板所在的站点，然后选择站点中的模板即可。Step01 选择“文件”“新建”菜单，打开“新建文档”对话框。Step02 选择“模板”选项卡，此时该对话框的标题文字变为“从模板新建” 。在“模板用于”列表框中选择模板所在的站点（此处为“lily
10、” ） ，在右边对应的站点列表框中选择要使用的模板，如图 8-1-11 所示。 Dreamweaver 网页设计电子版教科书 第 8 章7图 8-1-11 应用模板创建文档Step03 单击“创建”按钮，使用模板创建的网页文档将出现在文档编辑窗口中，该文档中除可编辑区域外其它区域都是不可编辑的，如图 8-1-12 所示。图 8-1-12 用模板创建的网页文档2. 使用“资源”面板在“资源”面板中只能使用当前站点中的模板创建网页，具体操作如下。Step01 选择“窗口”“资源”菜单或按【F11】键，打开“资源”模板。Step02 该面板中集合了当前站点中的所有元素，默认情况下显示图像元素。单击面
11、板左侧的“模板”按钮，其右侧将显示该站点中创建的所有模板文件，如图 8-1-13 所示。 Dreamweaver 网页设计电子版教科书 第 8 章88-1-13 “资源”模板 图 8-1-14 选择模板文件Step03 选择任意一个模板文件，上方的预览窗口中将会显示该模板文件的预览效果，如图 8-1-14 所示。Step04 用鼠标右键单击所需模板，在弹出的快捷菜单中选择“从模板新建” ，则新建的文档将显示在文档编辑窗口中，如图 8-1-15 所示。图 8-1-15 基于模板新建网页8.1.4 管理模板管理模板包括更新模板、删除模板和分离模板，下面分别介绍。1. 更新模板创建模板后，如果对模板
12、中的某些部分不满意，可对其进行修改。在修改完毕并保存时，Dreamweaver 会弹出“更新模板文件 ”对话框（参见图 8-1-16） ，提示是否更新站点中基于该模板创建的网页文档，单击“更新”按钮可更新通过该模板创建的所有网页，单击“不更新”按钮，则只保存模板而不更新基于该模板创建的网页。 Dreamweaver 网页设计电子版教科书 第 8 章9图 8-1-16 “更新模板文件”对话框2. 删除模板如果用户不需要使用某个模板，可将其删除，具体操作如下。Step01 在“资源”面板中选中不再需要的模板文件。Step02 按【Delete】键删除模板文件，将会弹出图 8-1-17 所示的提示框
13、。Step03 如果确认删除，单击“是”按钮，如果不想删除，则单击“否”按钮。图 8-1-17 提示框3. 分离模板如果用户需要对网页中的不可编辑区域进行编辑，可以直接将网页文档与模板分离。分离后的文档就变成了普通的网页文档，可以像编辑普通的网页一样对其进行编辑操作，但更新原模板文件后，分离后的文档无法再自动更新。打开使用模板创建的网页，选择“修改”“模板”“从模板中分离”菜单，即可使网页脱离模板。8.2 使用库项目图像、颜色、链接地址、视频和动画等，都可以算是网页资源。Dreamweaver 利用“资源”面板对这些资源进行分类管理。本节我们就以网页制作中最常用的库项目为例来讲解各种资源的应用
14、。8.2.1 什么是库项目库项目是一种特殊类型的 Dreamweaver 文件，我们可以将当前网页中的任意页面元素定义为库项目，如图像、表格、文本、声音和 Flash 影片等。当需要使用某库项目时，直接将其从“资源”面板中拖动到网页中就可以了。创建库项目的好处是可以在多个页面中重复使用它们，每当更改某个库项目的内容时，所有应用该库项目的页面都可以同时更新。例如，假定我们正在为某公司建立一个大型站点，公司想让其广告语出现在站点的每个页面上，但是还没有最后确定广告语。此时我们就可以创建一个包含该广告语的库项目并在每个页面上插入，当公司提供该广告语的最终版本时，我们可以更改该库项目并自动更新每一个使
15、用它的页面。说到这里，大家可能会问，网页中只是保存了指向图像、动画等文件的路径，以后通过置换图像来更新网页不也一样吗？ Dreamweaver 网页设计电子版教科书 第 8 章10其实是不一样的。例如，如果我们将一幅广告图像创建为了库项目，则图像及其尺寸、路径、目标等属性均被包含在了库项目中。以后修改广告时，只需修改一次库项目及其属性，就可以自动更新全部使用该库项目的网页。但是，如果不将广告图像创建为库项目，尽管我们可以通过置换图像来更新网页，但是还必须分别在各网页为其设置链接等属性。8.2.2 创建库项目创建库项目的方法非常简单。首先选中对象，然后选择“修改”“库”“增加对象到库”菜单，即可将所选对象创建为库项目。下面我们来看具体操作。Step01 启动 Dreamweaver8 后，打开“shop”文件夹中的文档“index.html” 。Step02 单击选中“会员登录”栏目所在表格，然后选择“修改”“库”“增加对象到库”菜单。Step03 弹出提示框，单击选中 “不再警告我”复选框，然后单击 “确定”按钮，如图 8-1-14 所示。图 8-1-14 创建库项目Step04 自动打开“资源”面板，可以看到
