网页制作案例教程 清华大学出版社第7章 利用模板和库创建网页

案例要点
模板可编辑区域、可选区域和重复区域的创建。
案例实施 （1）选择“开始”｜“所有程序”｜“Adobe Dreamweaver CS5”，启动 Adobe Dreamweaver CS5，新建一站点，将素材文件夹复制到本站点文件 夹中。 （2）选择“文件”｜“打开”菜单项，打开如图7-6-1所示的模板网页。 （3）选中如图7-6-1所示的第4个区域，单击菜单栏中“插入”|“模板对 象”|“可编辑区域”命令。


7.4.2利用模板更新网页

（1）更新模板 当模板被重新编辑或修改，保存模板后，会 自动打开“更新模板文件”对话框单击“更 新”按钮，更新文档。
7.5库项目

7.5.1库项目简介

库是一种特殊的 Dreamweaver 文件，其中 包含可放置到网页中的一组单个资源或资源 副本。库中的这些资源称为库项目。可在库 中存储的项目包括图像、表格、声音和使用 Adobe Flash 创建的文件。每当编辑某个库 项目时，可以自动更新所有使用该项目的页 面。

7.5.2创建库项目

（1）创建空白库项目 创建空白库项目的操作为：

1）单击菜单栏中的“窗口”|“资源”命令，打 开“资源”面板，单击左下角的库按钮 ，切换 到“库”类 “库”类别

2）单击面板底部的“新建”按钮 ，面 板中出现一个未命名的库，如图7-5-2所 示。
图7-3-6 “新建重复区域”对话框图



（4）在“名称”文本框输入重复区域名称。 （5）单击“确定”，退出“重复区域对话框”，建立的“重复 区域”为绿色框线区域，如图7-3-7所示。 （6）另存为模板即可使用。
7.4应用模板

7.4.1利用模板创建网页



模板设计好以后，可以由模板创建网页，也 可以将网页套用到模板。 （1）由模板创建网页 由模板创建网页的操作为：

1）单击菜单栏中“文件”|“新建”命令。 2）打开新建文档对话框，单击模板中的页选项 卡，如图7-3-8所示。
图7-3-8 模板中的页选项卡图

3）选择要使用的模板，单击“创建”则由模板创建了一个新 网页。 4）由模板创建的网页，只可对模板中“可编辑区域”进行编 辑。 （2）将己有网页应用模板 除了可以由模板创建网页，也可以将网页应用己有的模板， 应用模板的操作为： 1）打开要应用模板的网页文件。 2）执行以下操作之一： 单击菜单栏中“修改”|“模板”|“套用模板到页”命令。 在“资源”面板中，选择要应用的模板，单左下角的“应 用”按钮。 3）网页应用了所选模板。
网站发布、测试和维护 提高篇 Web服务器创建 网页中常见Flash制作 JavaScript网页应用 JavaScript篇 Javascript概述 使用CSS布局规划网页 CSS篇
CSS样式表
利用模板和库创建网页 交互式网页表单的设计与使用 网页布局规划设计
HTML篇
网页基本元素设计 HTML基础 网页设计与开发流程（ AscentSys医药商务系统）
图7-3-2 “新建可编辑区域”对话框图

（4）在“名称”文本框输入可编辑区域名称。 （5）单击“确定”，退出“可编辑区域对话框”，建立的“可 编辑区域”为绿色框线区域，如图7-3-3所示。

7.3.2创建可选区域 可选区域是模板中的区域，用户可将其设置为在基 于模板的文档中显示或隐藏。当想要为在文档中显 示内容设置条件时，请使用可选区域。 以将图7-2-4所示的网页中“顶部图片”部分设置为 可编辑区域，设置可选区域的操作为： （1）选中“顶部图片”部分。 （2）单击菜单栏中“插入”|“模板对象”|“ 可选区域”命令。 （3）打开新建可选区域对话框，如图7-3-4所示 。
案例实施 （10）在“名称”文本框输入可选区域名称单击“确定”， （11）选中如图7-6-1所示的第2个区域，单击菜单栏中“插入”|“模板对 象”|“重复区域”命令。 （12）打开新建重复区域对话框，如图7-6-3所示。 （13）在“名称”文本框输入重复区域名称。单击“确定”。 （14）选中如图7-6-1所示的第5个区域，单击菜单栏中“插入”|“模板对 象”|“重复区域”命令。 （15）打开新建重复区域对话框，如图7-6-3所示。 （16）在“名称”文本框输入重复区域名称。单击“确定”。



①打开要应用库项目的网页，定位光标在要插入 库项目位置，如图7-5-5所示。 ②打开“资源”面板切换到“库”类别。 ③在列表中选择要插入的库项目，如选择 “banquan”库项目，单击面板左下角的“插入 ”按钮。 ④库项目插入到网页中，库项目内容的背景会显 示为黄色，不能编辑，如图7-5-6所示
网页制作案例教程
毋建军 郑宝昆 郭锐 编著
清华大学出版社
第7章 利用模板和库创建网页
本章学习目标（知识要点）

掌握模板和库项目的创建操作 能够应用模板和库设计网页 掌握利用模板和库更新页面的方法
本章学习导航


在进行网站设计时尤其是大型网站，为了统一 网站的设计风格，同一类网页通常会采用相同 的版式设计，它们具有相同布局、版式、导航 条等。如果都一一设计，会产生大量重复的工 作。Dreamweaver提供了模板和库工具，就可 以轻松完成这些工作，同时又能避免重复工作 。 本章内容在全书知识结构中所处位置如图所示
图7-5-7 “库项目”属性图
图7-5-8 “从源文件中分离” 对话框图

（3）更新库项目

当库项目被修改保存后，系统会自动打开“ 更新库项目”对话框，单击“更新”按钮， 更新网页中的库项目。
7.6项目案例
学习目标 学习和使用模板相关操作。
案例描述
利用建好的网页创建模板，并利用模板创建新网页。
图7-5-5 示例网页
图7-5-6 示例网页插入库项目

2）从库项目分离




插入网页的中库项目受库的控制，在网页中 是不能编辑的，只有与库分离，才能不受库 的控制，分离操作为： ①选择网页中的库项目，打开“库项目”属 性如图7-5-7所示。 ②单击“从源文件中分离”按钮，打开提示 对话框如图7-5-8所示。 ③单击“确定”按钮，网页中的库项目与库 脱离，可以进行修改和编辑。
基础篇 网页制作基础
7.1模板入门



Dreamweaver CS5中的模板是一种特殊类型的文档，用于设计锁 定的页面布局。模板主要用于版式结构相似的页面中，可以提高 网站制作与更新的效率。 制作模板后，在每个文档上都要区分插入更换内容的部分。每个 文档中，将插入其他内容的部分指定为可编辑区域。这样指定以 后，以模板为基础制作新文档的时候，除了可编辑区域以外其他 部分都会自动生成。当然，除了可编辑区域的部分，不可以再进 行修改。 在Dreamweaver CS5中制作模板时，会将模板保存在templates文 件夹，在该文件夹里以.dwt的扩展名保存模板相关文件。如果保 存模板时尚未建立templates文件夹，作为默认值软件会在本地站 点文件夹内自动创建templates文件夹。

（4）各项设置如下：



“站点”：下拉列表中选择模板存放的站点 。 “另存为”：文本框中输入模板的名称。 “现存模板”：显示当前系统中己有的模板 文件。

（5）单击“保存”按钮，新增的模板出 现在“资源”面板的模板列表中。
7.3编辑模板

7.3.1创建可编辑区域




由模板建立的网页，只能在可编辑区域输入 内容和更改的操作。以将图7-2-4所示的网 页中“公司简介”部分设置为可编辑区域， 设置可编辑区域的操作为： （1）选中“公司简介”部分。 （2）单击菜单栏中“插入”|“模板对象”|“ 可编辑区域”命令。 （3）打开新建可编辑区域对话框，如图73-2所示。
图7-5-4 “增加对象到库”效果图

7.5.3编辑和管理项目

（1）删除库项目


对于没用的库项目可以删除，删除库项目的操作 为： 1）打开“资源”面板，选择“库”类别。 2）选择要删除的库项目。 3）单击“删除”按钮 ，即可删除所选库项目。

（2）插入库项目

1）应用库项目 应用库项目操作为：

Dreamweaver 将库项目存储在每个站点的本地根文 件夹下的 Library 文件夹中。每个站点都有自己的 库。可以从文档的 body 部分中的任意元素创建库 项目，这些元素包括文本、表格、表单、Java applet、插件、ActiveX 元素、导航条和图像等。对 于链接项（如图像），库只存储对该项的引用。原 始文件必须保留在指定的位置，这样才能使库项目 正确工作。不过，在库项目中存储图像也很有用。 例如，可以在库项目中存储一个完整的 img 标签， 这将允许您方便地在整个站点中更改图像的 alt 文 本，甚至更改它的 src 属性。（但是，除非还使用 图像编辑器更改图像的实际尺寸，否则请勿使用此 方法更改图像的 width 和 height 属性。）
图7-2-2 “新建模板”面板图

（4）输入新的模板名字，则新建一个空 白模板。

7.2.2基于现有网页创建模板



（1）打开己编辑好的要保存为模板的网页 文件。 （2）单击菜单栏中的“文件”|“另存模板 ”命令。 （3）打开“另存模板”对话框，如图7-2-3 所示。
图7-2-3 “另存模板”对话框图



1）选中作为库项目的内容。 2）执行以下操作之一： 单击菜单栏中“修改”|“库”|“增加对象到库” 命令。 拖动选中的内容到“资源”面板指向“库”类别按 钮。 3）“资源”面板“库”类别中，出现一个未命名的库 ，如图7-5-4所示。 4）为库项目重新命名，如命名为“banquan”。
7.2创建模板

7.2.1空白模板创建


（1）单击菜单栏中“窗口”|“资源”命令 ，打开“资源”面板。 （2）单击“资源”面板左边的“模板”按 钮 ，显示“模板”类别，如图7-2-1所示。
图7-2-1 “模板”面板图

（3）单击面板底部的“新建” 按钮， 面板中出现一个未命名的模板，如图7-22所示。
案例实施 （17）选择“文件”|“另存为”菜单项，另存为模板，如图7-6-5所示。
图7-3-4“ 新建可选区域”对话框图

（4）在“名称”文本框输入可选区域名称。 （5）单击“确定”，退出“可选区域对话框”，建立的“可选 区域”为绿色框线区域，如图7-3-5所示。

7.3.3创建重复区域 重复区域可以使模板用户必要时在基于模板的文档中添加或 删除重复区域的副本。例如，可以设置重复一个表格行。重 复部分是可编辑的，这样，模板用户可以编辑重复元素中的 内容，而设计本身则由模板创作者控制。可以在模板中插入 的重复区域有两种：重复区域和重复表格。 以将图7-2-4所示的网页中“左侧图片”部分设置为可编辑区 域，设置可选区域的操作为： （1）选中“左侧图片”部分。 （2）单击菜单栏中“插入”|“模板对象”|“重复区域” 命令。 （3）打开新建重复区域对话框，如图7-3-6所示。
案例实施 （4）打开新建可编辑区域对话框，如图7-6-2所示。
案例实施 （4）在“名称”文本框输入可编辑区域名称。单击“确定”。 （5）选中如图7-6-1所示的第3个区域，单击菜单栏中“插入”|“模板对 象”|“重复区域”命令。 （6）打开新建重复区域对话框，如图7-6-3所示。
案例实施 （7）在“名称”文本框输入重复区域名称。单击“确定”。 （8）选中如图7-6-1所示的第1个区域，单击菜单栏中“插入”|“模板对 象”|“可选区域”命令。 （9）打开新建可选区域对话框，如图7-6-4所示。
图7-5-2 创建“库”

（2）为库添加内容

为库添加内容的操作为：


1）在“资源”面板“库”类别中，双击要编辑 的库，将库打开。 2）除了不能设置页面属性外，编辑库与编辑普 通网页一样的操作是一样的。

（3）基于选定内容创建库项目

在Dreamweaver中，除了可以新空白库，还 可以把己编辑好的内容添加为库。基于选定 内容创建库项目的操作为：