搜索
网页制作案例教程毋建军郑宝昆郭锐编著清华大学出版社第7章利用模板和库创建网页本章学习目标（知识要点）掌握模板和库项目的创建操作能够应用模板和库设计网页掌握利用模板和库更新页面的方法本章学习导航在进行网站设计时尤其是大型网站，为了统一网站的设计风格，同一类网页通常会采用相同的版式设计，它们具有相同布局、版式、导航条等。如果都一一设计，会产生大量重复的工作。Dreamweaver提供了模板和库工具，就可以轻松完成这些工作，同时又能避免重复工作。本章内容在全书知识结构中所处位置如图所示基础篇HTML篇CSS篇JavaScript篇提高篇网页设计与开发流程（AscentSys医药商务系统）网页制作基础HTML基础网页基本元素设计网页布局规划设计交互式网页表单的设计与使用利用模板和库创建网页CSS样式表使用CSS布局规划网页JavaScript网页应用Javascript概述网页中常见Flash制作Web服务器创建网站发布、测试和维护7.1模板入门DreamweaverCS5中的模板是一种特殊类型的文档，用于设计锁定的页面布局。模板主要用于版式结构相似的页面中，可以提高网站制作与更新的效率。制作模板后，在每个文档上都要区分插入更换内容的部分。每个文档中，将插入其他内容的部分指定为可编辑区域。这样指定以后，以模板为基础制作新文档的时候，除了可编辑区域以外其他部分都会自动生成。当然，除了可编辑区域的部分，不可以再进行修改。在DreamweaverCS5中制作模板时，会将模板保存在templates文件夹，在该文件夹里以.dwt的扩展名保存模板相关文件。如果保存模板时尚未建立templates文件夹，作为默认值软件会在本地站点文件夹内自动创建templates文件夹。7.2创建模板7.2.1空白模板创建（1）单击菜单栏中“窗口”|“资源”命令，打开“资源”面板。（2）单击“资源”面板左边的“模板”按钮，显示“模板”类别，如图7-2-1所示。图7-2-1“模板”面板图（3）单击面板底部的“新建”按钮，面板中出现一个未命名的模板，如图7-2-2所示。图7-2-2“新建模板”面板图（4）输入新的模板名字，则新建一个空白模板。7.2.2基于现有网页创建模板（1）打开己编辑好的要保存为模板的网页文件。（2）单击菜单栏中的“文件”|“另存模板”命令。（3）打开“另存模板”对话框，如图7-2-3所示。图7-2-3“另存模板”对话框图（4）各项设置如下：“站点”：下拉列表中选择模板存放的站点。“另存为”：文本框中输入模板的名称。“现存模板”：显示当前系统中己有的模板文件。（5）单击“保存”按钮，新增的模板出现在“资源”面板的模板列表中。7.3编辑模板7.3.1创建可编辑区域由模板建立的网页，只能在可编辑区域输入内容和更改的操作。以将图7-2-4所示的网页中“公司简介”部分设置为可编辑区域，设置可编辑区域的操作为：（1）选中“公司简介”部分。（2）单击菜单栏中“插入”|“模板对象”|“可编辑区域”命令。（3）打开新建可编辑区域对话框，如图7-3-2所示。图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所示。图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）网页应用了所选模板。7.4.2利用模板更新网页（1）更新模板当模板被重新编辑或修改，保存模板后，会自动打开“更新模板文件”对话框单击“更新”按钮，更新文档。7.5库项目7.5.1库项目简介库是一种特殊的Dreamweaver文件，其中包含可放置到网页中的一组单个资源或资源副本。库中的这些资源称为库项目。可在库中存储的项目包括图像、表格、声音和使用AdobeFlash创建的文件。每当编辑某个库项目时，可以自动更新所有使用该项目的页面。Dreamweaver将库项目存储在每个站点的本地根文件夹下的Library文件夹中。每个站点都有自己的库。可以从文档的body部分中的任意元素创建库项目，这些元素包括文本、表格、表单、Javaapplet、插件、ActiveX元素、导航条和图像等。对于链接项（如图像），库只存储对该项的引用。原始文件必须保留在指定的位置，这样才能使库项目正确工作。不过，在库项目中存储图像也很有用。例如，可以在库项目中存储一个完整的img标签，这将允许您方便地在整个站点中更改图像的alt文本，甚至更改它的src属性。（但是，除非还使用图像编辑器更改图像的实际尺寸，否则请勿使用此方法更改图像的width和height属性。）7.5.2创建库项目（1）创建空白库项目创建空白库项目的操作为：1）单击菜单栏中的“窗口”|“资源”命令，打开“资源”面板，单击左下角的库按钮，切换到“库”类别，如图7-5-1所示。图7-5-1“库”类别2）单击面板底部的“新建”按钮，面板中出现一个未命名的库，如图7-5-2所示。图7-5-2创建“库”（2）为库添加内容为库添加内容的操作为：1）在“资源”面板“库”类别中，双击要编辑的库，将库打开。2）除了不能设置页面属性外，编辑库与编辑普通网页一样的操作是一样的。（3）基于选定内容创建库项目在Dreamweaver中，除了可以新空白库，还可以把己编辑好的内容添加为库。基于选定内容创建库项目的操作为：1）选中作为库项目的内容。2）执行以下操作之一：单击菜单栏中“修改”|“库”|“增加对象到库”命令。拖动选中的内容到“资源”面板指向“库”类别按钮。3）“资源”面板“库”类别中，出现一个未命名的库，如图7-5-4所示。4）为库项目重新命名，如命名为“banquan”。图7-5-4“增加对象到库”效果图7.5.3编辑和管理项目（1）删除库项目对于没用的库项目可以删除，删除库项目的操作为：1）打开“资源”面板，选择“库”类别。2）选择要删除的库项目。3）单击“删除”按钮，即可删除所选库项目。（2）插入库项目1）应用库项目应用库项目操作为：①打开要应用库项目的网页，定位光标在要插入库项目位置，如图7-5-5所示。②打开“资源”面板切换到“库”类别。③在列表中选择要插入的库项目，如选择“banquan”库项目，单击面板左下角的“插入”按钮。④库项目插入到网页中，库项目内容的背景会显示为黄色，不能编辑，如图7-5-6所示图7-5-5示例网页图7-5-6示例网页插入库项目2）从库项目分离插入网页的中库项目受库的控制，在网页中是不能编辑的，只有与库分离，才能不受库的控制，分离操作为：①选择网页中的库项目，打开“库项目”属性如图7-5-7所示。②单击“从源文件中分离”按钮，打开提示对话框如图7-5-8所示。③单击“确定”按钮，网页中的库项目与库脱离，可以进行修改和编辑。图7-5-7“库项目”属性图图7-5-8“从源文件中分离”对话框图（3）更新库项目当库项目被修改保存后，系统会自动打开“更新库项目”对话框，单击“更新”按钮，更新网页中的库项目。7.6项目案例学习目标案例描述学习和使用模板相关操作。利用建好的网页创建模板，并利用模板创建新网页。案例要点模板可编辑区域、可选区域和重复区域的创建。案例实施（1）选择“开始”｜“所有程序”｜“AdobeDreamweaverCS5”，启动AdobeDreamweaverCS5，新建一站点，将素材文件夹复制到本站点文件夹中。（2）选择“文件”｜“打开”菜单项，打开如图7-6-1所示的模板网页。（3）选中如图7-6-1所示的第4个区域，单击菜单栏中“插入”|“模板对象”|“可编辑区域”命令。案例实施（4）打开新建可编辑区域对话框，如图7-6-2所示。案例实施（4）在“名称”文本框输入可编辑区域名称。单击“确定”。（5）选中如图7-6-1所示的第3个区域，单击菜单栏中“插入”|“模板对象”|“重复区域”命令。（6）打开新建重复区域对话框，如图7-6-3所示。案例实施（7）在“名称”文本框输入重复区域名称。单击“确定”。（8）选中如图7-6-1所示的第1个区域，单击菜单栏中“插入”|“模板对象”|“可选区域”命令。（9）打开新建可选区域对话框，如图7-6-4所示。案例实施（10）在“名称”文本框输入可选区域名称单击“确定”，（11）选中如图7-6-1所示的第2个区域，单击菜单栏中“插入”|“模板对象”|“重复区域”命令。（12）打开新建重复区域对话框，如图7-6-3所示。（13）在“名称”文本框输入重复区域名称。单击“确定”。（14）选中如图7-6-1所示的第5个区域，单击菜单栏中“插入”|“模板对象”|“重复区域”命令。（15）打开新建重复区域对话框，如图7-6-3所示。（16）在“名称”文本框输入重复区域名称。单击“确定”。案例实施（17）选择“文件”|“另存为”菜单项，另存为模板，如图7-6-5所示。案例实施（18）选择“文件”｜“新建”菜单项，打开“新建文档”对话框，选择“空白页”｜“HTML”｜“无”，单击“创建”按钮，新建一个网页。（19）选择“修改”|“模板”菜单项，打开“应用模板到页”对话框，如图7-6-6所示。案例实施（20）选定刚创建的模板，选定后效果图如图7-6-1所示，由于第4部分为可编辑区，所以可以删除替换成别的文字，如图7-6-7所示。谢谢！