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

案例实施 （10）在“名称”文本框输入可选区域名称单击“确定”， （11）选中如图7-6-1所示的第2个区域，单击菜单栏中“插入”|“模板对 象”|“重复区域”命令。 （12）打开新建重复区域对话框，如图7-6-3所示。 （13）在“名称”文本框输入重复区域名称。单击“确定”。 （14）选中如图7-6-1所示的第5个区域，单击菜单栏中“插入”|“模板对 象”|“重复区域”命令。 （15）打开新建重复区域对话框，如图7-6-3所示。 （16）在“名称”文本框输入重复区域名称。单击“确定”。

7.5.2创建库项目


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

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

2）单击面板底部的“新建”按钮 ，面 板中出现一个未命名的库，如图7-5-2所 示。
图7-2-2 “新建模板”面板图

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

7.2.2基于现有网页创建模板



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


7.4.2利用模板更新网页
ቤተ መጻሕፍቲ ባይዱ

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

7.5.1库项目简介

库是一种特殊的 Dreamweaver 文件，其中 包含可放置到网页中的一组单个资源或资源 副本。库中的这些资源称为库项目。可在库 中存储的项目包括图像、表格、声音和使用 Adobe Flash 创建的文件。每当编辑某个库 项目时，可以自动更新所有使用该项目的页 面。
案例实施 （4）打开新建可编辑区域对话框，如图7-6-2所示。
案例实施 （4）在“名称”文本框输入可编辑区域名称。单击“确定”。 （5）选中如图7-6-1所示的第3个区域，单击菜单栏中“插入”|“模板对 象”|“重复区域”命令。 （6）打开新建重复区域对话框，如图7-6-3所示。
案例实施 （7）在“名称”文本框输入重复区域名称。单击“确定”。 （8）选中如图7-6-1所示的第1个区域，单击菜单栏中“插入”|“模板对 象”|“可选区域”命令。 （9）打开新建可选区域对话框，如图7-6-4所示。
案例要点
模板可编辑区域、可选区域和重复区域的创建。
案例实施
（1）选择“开始”｜“所有程序”｜“Adobe Dreamweaver CS5”，启动 Adobe Dreamweaver CS5，新建一站点，将素材文件夹复制到本站点文件 夹中。 （2）选择“文件”｜“打开”菜单项，打开如图7-6-1所示的模板网页。 （3）选中如图7-6-1所示的第4个区域，单击菜单栏中“插入”|“模板对 象”|“可编辑区域”命令。
图7-5-2 创建“库”

（2）为库添加内容

为库添加内容的操作为：


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

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

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



1）选中作为库项目的内容。 2）执行以下操作之一： 单击菜单栏中“修改”|“库”|“增加对象到库” 命令。 拖动选中的内容到“资源”面板指向“库”类别按 钮。 3）“资源”面板“库”类别中，出现一个未命名的库 ，如图7-5-4所示。 4）为库项目重新命名，如命名为“banquan”。
网站发布、测试和维护 提高篇 Web服务器创建 网页中常见Flash制作 JavaScript网页应用 JavaScript篇 Javascript概述 使用CSS布局规划网页 CSS篇 CSS样式表 利用模板和库创建网页 交互式网页表单的设计与使用 网页布局规划设计 HTML篇 网页基本元素设计 HTML基础
图7-3-2 “新建可编辑区域”对话框图


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

7.3.2创建可选区域 可选区域是模板中的区域，用户可将其设置为在基 于模板的文档中显示或隐藏。当想要为在文档中显 示内容设置条件时，请使用可选区域。 以将图7-2-4所示的网页中“顶部图片”部分设置为 可编辑区域，设置可选区域的操作为： （1）选中“顶部图片”部分。 （2）单击菜单栏中“插入”|“模板对象”|“ 可选区域”命令。 （3）打开新建可选区域对话框，如图7-3-4所示 。
图7-3-4“ 新建可选区域”对话框图


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

7.3.3创建重复区域 重复区域可以使模板用户必要时在基于模板的文档中添加或 删除重复区域的副本。例如，可以设置重复一个表格行。重 复部分是可编辑的，这样，模板用户可以编辑重复元素中的 内容，而设计本身则由模板创作者控制。可以在模板中插入 的重复区域有两种：重复区域和重复表格。 以将图7-2-4所示的网页中“左侧图片”部分设置为可编辑区 域，设置可选区域的操作为： （1）选中“左侧图片”部分。 （2）单击菜单栏中“插入”|“模板对象”|“重复区域” 命令。 （3）打开新建重复区域对话框，如图7-3-6所示。
网页设计与开发流程（ AscentSys医药商务系统）
基础篇
网页制作基础
7.1模板入门



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

2）从库项目分离




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

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

3）选择要使用的模板，单击“创建”则由模板创建了一个新 网页。 4）由模板创建的网页，只可对模板中“可编辑区域”进行编 辑。 （2）将己有网页应用模板 除了可以由模板创建网页，也可以将网页应用己有的模板， 应用模板的操作为： 1）打开要应用模板的网页文件。 2）执行以下操作之一： 单击菜单栏中“修改”|“模板”|“套用模板到页”命令。 在“资源”面板中，选择要应用的模板，单左下角的“应 用”按钮。 3）网页应用了所选模板。
网页制作案例教程
毋建军 郑宝昆 郭锐 编著
清华大学出版社
第7章 利用模板和库创建网页
本章学习目标（知识要点）

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


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

7.2.1空白模板创建


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

（3）单击面板底部的“新建” 按钮， 面板中出现一个未命名的模板，如图7-22所示。
图7-5-7 “库项目”属性图
图7-5-8 “从源文件中分离” 对话框图

（3）更新库项目

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

7.5.3编辑和管理项目

（1）删除库项目


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