使用模板提高制作效率

 

 

1.  掌握模板和库的概念。

2.  掌握模板和库的创建、编辑、应用方法。

3.  熟练使用模板和库。

 

 

在进行网站制作的过程中,同一个网站中的网页通常都使用统一的风格,采用大致相同的网页布局结构、版式、导航条、图片和Logo等。为了避免不必要的重复操作,提高制作过程中的工作效率,可以使用Dreamweaver CS3提供的模板和库功能,将具有相同布局结构的页面制作成模板,将相同的元素制作为库项目,以便随时调用,实现批量化制作网页。这里将介绍如何在Dreamweaver CS3中创建和编辑模板与库。



※任务分析

如图6-1所示的网页结构(如:布局格式、LOGO、导航等)在当前网站中是统一的。只是不同网页中右下方区域所显示的内容会有所不同。在编辑网页时,如果对于每个网页文件都重复来添加这些内容,既浪费时间,又容易出错。为此,我们可以将此网页中除右下方“公司介绍”的文本和图片之外的部分另存为一个模板文件,在新网页中应用其格式,不同的网页只要编辑各自文档中不同的内容即可,可以提高网页制作效率。

◆图6-1  网站中通用的网页格式

※相关知识

一.什么是模板

模板是Dreamweaver中提供的一种特殊的页面文档,当需要制作某种带有共同格式和特征的文档时,可以首先设计一个模板文档,然后利用模板文档制作其它网页。

模板的编辑方法和普通网页的编辑方法大致一样,只是可以在其中添加可编辑区域、重复区域等区域。所有应用了模板的网页都具有与模板相同的版式和内容,并可以在可编辑区域中添加新的内容。对模板进行修改后,所有应用了模板的网页会做相同的修改。

模板必须保存在站点中,所以在创建模板前应先要创建站点,否则创建模板时系统会提示创建站点。在Dreamweaver CS3中,模板的扩展名为.dwt,并存放在本地站点的Templates文件夹中,模板文件夹在保存模板时会在站点中自动创建。

二.创建模板的方法

创建模板主要有两种方法:

l         可以将现有的HTML文档另存为模板并进行相应修改;

l         也可以从空白网页开始,逐步设计页面布局,再保存为模板。

三.创建可编辑区域

可编辑区域控制基于模板的页面中哪些区域可以编辑。设置可编辑区域,需要在制作模板时完成。创建方法如下:

1.先选中作为“可编辑区域”的对象,再使用以下三种方法之一:

l         单击“插入记录”菜单→“模板对象”→“可编辑区域”;

l         在选中的区域内右击→选择“模板”→“可编辑区域”;

l         单击“常用”工具栏中的“模板”按钮→选择“可编辑区域”,如图6-2所示。

2.在弹出的“新建可编辑区域”对话框中,输入该区域的名称(如:Edit1,单击“确定”按钮。如图6-3所示。同时在模板文件中的当前区域左上角会一个“Edit1标识提示。

 

◆图6-2  “常用”工具栏中的模板按钮            ◆图6-3  “新建可编辑区域”对话框

注:1.命名区域时,不要使用特殊字符,并且每个区域的名称是唯一的,不可重复。

2.用表格布局的模板,定义可编辑区域时可将整个表格或表格的某个单元格定义为可编辑区域,但是不能同时将多个单元格定义为一个单独的可编辑区域。

3.取消可编辑区域标签:“修改”→“模板”→“删除模板标记”,取消标签则对应区域内容变成不可编辑区域。

四.创建重复区域

重复区域是指模板用户可以使用它在模板中复制任意次数的指定区域,重复区域不是可编辑区域。创建方法如下:

1.先选中作为“重复区域”的对象,再使用以下三种方法之一:

l         单击“插入记录”菜单→“模板对象”→“重复区域”;

l         在选中的区域内右击→选择“模板”→“新建重复区域”;

l         单击“常用”工具栏中的“模板”按钮→选择“重复区域”,如图6-2所示。

2.弹出“新建重复区域”对话框,如图6-4所示,输入名称,单击“确定”。

注:重复区域在基于模板的文档中是不可编辑的,除非其中包含可编辑区域。

五.应用模板

模板的创建和编辑完成后,就可以利用模板来创建网页或对已有的网页应用模板。如果对模板进行了修改,则只需对应用了该模板的网页进行更新即可,使应用了该模板的网页一同被修改,从而大大方便了整个网站中同类网页的制作,提高了工作效率。

应用模板的方式主要有以下两种:

Ø         在“资源”面板中使用模板创建新网页

方法如下:

1.新建一个空白网页文件,单击“资源”面板中的“模板”按钮,如图6-5所示。

2.在模板列表中选择模板文件后右击,如图6-6所示。选择“应用”,则可将模板应用到这个新的网页文件。

1.单击“资源”面板中的“模板”按钮

2.在模板列表中选择模板文件后右击,如右图6-6所示。选择“从模板新建”,则自动建立基于此模板的新网页文件。

    

◆图6-5  “资源”面板                 ◆图6-6  应用模板的快捷菜单

Ø         新建网页时使用模板

方法如下:

1.选择“文件”菜单→“新建”,弹出如图6-7所示的“新建文档”对话框,选择“模板中的页”,在“站点的模板”中选择相应的模板(如“web_m”)。

2.选中“当模板改变时更新页面”复选框时,当模板被修改后,用此模板创建的网页也会被自动修改。

3.单击“创建”按钮,新建一个基于此模板的新网页文件。设计者可在网页的可编辑区域添加相关内容。

◆图6-7  “新建文档”对话框

六.将模板从网页中分离

用模板设计网页时,模板有很多的不可编辑区域。为了能够修改基于模板页面中的不可编辑区域内容,必须将页面从模板中分离出来。当页面被分离后,它将成为一个普通的网页文件,不再具有不可编辑区域,也不再与任何模板相关联。当模板被更新时,当前被分离的网页文件也就不会被更新了。

方法如下:

单击“修改”菜单→“模板”→“从模板中分离”命令,即可将当前网页文件同模板分离。此后就可以编辑网页中的所有区域了。

七.删除网站的的模板

方法如下:

1.在“资源”面板中单击“模板”

2.在“模板”列表中,选中要删除的模板项。

3.单击“文件”面板右上角的三角形按钮,打开面板菜单,然后选择删除命令如图6-8所示;或直接单击模板面板右下角的删除按钮;或右击,选择删除

图6-8  “另存为模板”对话框

※任务实施

一.创建模板

利用现有的网页文件制作模板。方法如下:

1.运行Dreamweaver CS3,打开站点example

2.双击打开本地站点中的网页“company.html”。删除其右下方的公司介绍内容。

3.单击“文件”菜单→“另存为模板”,弹出如图6-9所示的“另存为模板”对话框,选择保存到的目标站点文件夹“mwmw”,在“另存为”文本框中输入名称“web_m”。

注:Dreamweaver CS3自动在站点中创建的Templates文件夹,并将模板文件保存在此文件夹中。

◆图6-9  “另存为模板”对话框

4.模板文件的结构如图6-10所示。

◆图6-10  网页模板的结构

二.创建可编辑区域

1.在“文件”面板的“资源”选项卡中,单击“模板”按钮,选中模板文件web_m.dwt,双击打开。

2.在文档编辑区左下方的“标签选择器”中,选中想要插入可编辑区域的对象。如图6-11所示的圆圈部分(即<table>标记)。

◆图6-11  在“标签选择器”中选中<table>标记

3.选择“插入记录”菜单→“模板对象”→“可编辑区域”。

4.在弹出的“新建可编辑区域”对话框中,输入该区域的名称Edit1,单击“确定”按钮。

三.制作“联系方式”网页

1.在“资源”面板的模板列表中选择模板文件web_m.dwt,右击,在快捷菜单中选择“从模板新建”,此时Dreamweaver窗口中自动建立基于此模板的新网页文件Untitled-1

2.在网页的可编辑区域添加相关内容,如图6-12所示。

网页添加了一张图片(images/datang.jpg)和若干行文本。图片所应用的CSS样式(p01)如表6-1所示,文本所应用的CSS样式(block1)如表6-2所示。

◆图6-12  网页中添加的内容

3.输入网页标题(联系方式—“每味美味”)。

4.以contact.html为文件名保存此文件到当前站点。

四.制作“行业动态”网页

利用上述方法建立一个基于web_m.dwt模板的“行业动态”网页文件news.html。其中的文章列表如图6-13所示。上方是一个220行的表格用以显示文章列表;下方是一个21行的表格用以显示上下翻页导航。两个表格的宽度均为700像素,水平居中对齐,边框为0

Ø         文章列表的制作

文章列表下方的虚线是一个只有1像素高的表格行。设计方法是:

1.先合并当前行的两个单元格。

2.再设置其“背景”为“images/line_t.gif”,效果如图6-14所示。

3.再设置其行高为1。如果此时单元格的高度仍然较高,则应切换到“拆分”视图,将当前单元格标记符<td ……></td>之间的空格符“&nbsp;”等所有字符删除即可。

◆图6-13  news.html网页中的文章列表

◆图6-14  填充背景图案的单元格

Ø         翻页导航的制作

主要由5个字串和一个下拉列表控件构成。下拉列表控件的插入方法是:

1.定位插入点在“下一页”和“尾页”两个字串的中间。

2.选择“表单”工具栏中的“列表/菜单”按钮,打开“输入标签辅助功能属性”对话框。在ID中输入“page”,如图6-15所示。单击“确定”按钮。

3.显示“是否添加表单标签”对话框。单击“否”,即可。如图6-16所示。

4.选中此下拉列表,在“属性”面板中单击按钮,打开“列表值”对话框,设置其列表值,如图6-17所示。

5.在“属性”面板的“初始化时选定”框中单击“第1页”,如图6-18所示。这就是列表框的默认值。在网页运行时最先显示的就是此值。

    

     ◆图6-15  “输入标签辅助功能属性”对话框       ◆图6-16  “输入标签辅助功能属性”对话框

   

◆图6-17  “列表值”对话框                 ◆图6-18  设置列表框的初始值

Ø         设置CSS样式

现在要为新添加的内容建立必要的CSS样式表。各元素的CSS样式分别是:文章列表使用的样式“list_n”如表6-3所示;下拉列表使用的样式“opt”如表6-4所示;翻页导航使用的样式“pbutton”如表6-5所示。

6-5  pbutton样式

样式名

样式名

类型-行高

1.5

方框-填充

上、下为1px;左右为5px

类型-颜色

#303030

边框-样式

均为“实线”

背景-背景颜色

#CCCCCC

边框-宽度

均为1px

区块-空格

不换行

边框-颜色

均为#CCCCCC

接下来,我们要设置文章超链接的显示属性。

1.逐行设置文章名称行为“项目列表”列表方式。

2.逐行应用样式list_n

3.逐行选中文章名称,为这些文章建设超链接为“article/read1.html”。

此时这些超链接的样式与网页中导航的超链接样式是一致的,浏览网页时显示效果不好。采用以下步骤可建立不同的超链接方式:

1.选中一行文章名称,在“CSS样式”面板中单击“新建CSS样式”按钮

2.弹出“新建CSS规则”对话框。输入样式名称“.list_n a”,如图6-19所示。

◆图6-19  “新建CSS规则”对话框

3.单击“确定”按钮后,设置样式的值。如表6-6所示。

4.同样的方法再建立一个CSS样式,样式名称为“.list_n a hover”。样式值如表6-7所示。

 

5.浏览网页,认真观察,并调试到与“项目素材”文件夹中相应网页一致的效果。

五.将模板应用到“公司介绍”网页

1.打开“公司介绍”网页(即company.html文件)。

2.在“资源”面板的模板列表中选择模板文件web_m.dwt,右击,在快捷菜单中选择“应用”,即可。

注:如果是对现有的网页文件应用模板,则此文件和模板在各个区域上要有一致的对应关系,否则,模板在文件中将不能正常应用。

六.更新网页模板

由于模板文件中用于导航的超链接没有设置完整,导致应用模板后的company.htmlcontact.html两个网页文件的超链接也不完整。使用下述方法,完善这些超链接。

1.打开模板文件web_m.dwt

2.检查并设置导航菜单和“栏目导航”中的各相关内容设置超链接如表6-8所示。

6-8  各导航栏目的超链接

栏目

超链接

网站首页

home.html

公司介绍

company.html

行业动态

news.html

美食展示

product.html

餐厅环境

environment.html

在线预订

mark.html

加盟连锁

case.html

招聘信息

job.html

联系我们

contact.html

关于我们

company.html

联系方式

contact.html

3.保存模板。

此时,Dreamweaver会询问是否更新所有附着到该模板的网页,选择“是”,将以上所设置的超链接内容更新到已经应用此模板的网页文件中。

 

※任务拓展

运用本任务所介绍的方法建立product.htmlenvironment.htmlcase.htmljob.html等网页文件。这些网页中各自添加的内容如图6-20至图6-23所示。最终结果中可参考“项目素材”文件中的相关网页。

 

   ◆图6-20  product.html网页的内容           ◆图6-21  environment.html网页的内容

 

◆图6-22  case.html网页的内容                   ◆图6-23  job.html网页的内容



※任务分析

当前站点的网页中,菜单导航栏的下方都有一张展示酒店风貌的大图片。如图6-24所示。目前这张图片是静态的,始终只显示这一个画面,现在我们要用一个动态画面(Flash动画)来替换它。

今后随着时间的推移,这个画面还会不断更新。将这部分设置成库项目,以便对站点中所有使用到这部分内容的网页快速地进行成批更新,以提高工作效率。

◆图6-24  网页中需设置成库项目的部分

※相关知识

1.库的概念

库是一种特殊的Dreamweaver文件,其中包含已创建的单独资源或资源拷贝的集合以便在网页中使用。库可以存储各种各样的页面元素,如图像、表格、声音和 FLASH动画等。

网页中经常有内容是相同的局部区域,如果重复操作,工作效率势必不高,库技术就可以对网页中局部内容进行快速设计和管理。

2.创建库项目

⑴基于文档内容创建项目

可以将单独的文档对象创建为库项目,也可以将多个文档对象的组合创建为库项目。方法如下:

1.在文档窗口中,选择要保存为库项目的内容,再使用以下四种方法之一:

l         将选中的内容拖动到“库”面板的库项目列表区中;

l         单击“库”面板中的“新建库项目”按钮

l         单击“库”面板右上角的三角形按钮,打开菜单,选择新建库项命令;

l         单击修改”菜单→“库”→“增加对象到库

2.在名称框修改默认项目文件名称(如,命名库为pic_1),按Enter键完成项目的创建。库文件的扩展名为.lbi。如图6-25所示。

◆图6-25  创建的库项目

⑵创建空白库项目

基于文档内容创建项目时需要在文档中选定内容,而创建空白库项目时则不能选定任何内容。空白库项目创建后,即可打开库项目文档的编辑窗口,对该库项目进行编辑。方法如下:

1.确保没在文档编辑区窗口中选择任何内容。如果选择了内容,则该内容将被放入到新的库项目中。

2.在“库”面板中单击“新建库项目”按钮,可在库项目列表中添加一个新的库项目。

3.在名称框中输入一个名称,然后按Enter键,即可。

这是一个空白的库项目,之后可以对其添加内容。

3.在文档中插入库项目

方法如下:

1.打开要使用库项目的网页,将插入点定位到要插入库项目的位置。

2.从“库”面板中的库项目列表中选择要插入的库项目。

3.单击此面板左下方的的插入按钮,或将库项目直接拖放到文档窗口中。

4.编辑更新库项目

方法如下:

1.在“文件”面板的“资源”选项卡的“库”中选择要编辑的库项目。

2.单击面板底部的编辑按钮或双击库项目打开库项目(如pic_1.lbi)。

3.此时,在文档窗口的标题栏上,会显示“<<库项目>>……字样。

4.按照正常的文档编辑方法,对库项目内容进行编辑。

5.按Ctrl+S组合键保存库项目。此时将出现图6-26所示的更新库项目对话框。选择更新,即可更新本地站点中所有包含编辑过库项目的文档;选择不更新将不更改任何文档。

◆图6-26  “更新库项目”对话框

5.更新页面

⑴更新整个站点或所有使用特定库项目的文档

方法如下:

1.单击修改”菜单→“库”→“更新页面菜单,打开更新页面对话框,如图6-27所示。

◆图6-27  “更新页面”对话框

2.在查看下拉菜单中执行下列操作之一:

l         选择整个站点,然后选择站点名称。则更新所选站点中的所有页面。

l         选择文件使用,然后选择库项目名称。则更新当前站点中所有使用所选库项目的页面。

注:要确保对话框内“更新”选项中的“库项目”为选中状态,再单击“开始”按钮。

⑵更新当前文档

单击修改”菜单→“库”→更新当前页,即可更改当前页中使用的所有库项目。

6.分离文档中的库项目

在文档窗口中插入的库项目内容是作为一个整体存在的,无法直接在文档中对其进行编辑。制作过程中并不希望所有时候它都作为一个库项目存在,而希望它作为普通的文档内容可以被单独编辑。因此可以按照如下方法,将之同库项目分离开来。

方法如下:

1)在网页中选中相应的库项目内容。

2)单击“属性”面板中的从源文件中分离按钮,弹出如图6-28所示对话框后,单击确定按钮即可。

◆图6-28  分离库项目的提示对话框

7.重建库项目

Dreamweaver通过重新创建的方式,可以在文档中恢复意外丢失或删除了的库项目。

1.在相应文档中选择该项目的一个实例。

2.在“属性”面板中单击重新创建按钮。

如果库项目不存在,则会重建库项目。如果库项目存在,则会出现一个对话框,提示您是否要覆盖它。确定操作,即可将之覆盖。

※任务实施

一.创建库项目

1.打开当前站点(example)中的模板文件web_m.dwt

2.选中如图6-29所示的图片区域,单击修改”菜单→“库”→“增加对象到库,创建成库项目。

◆图6-29  选择作为库项目的区域

此时屏幕可能会弹出如图6-30所示对话框,单击“确定”。

注:选中区域时通常使用文档编辑区左下方的“标签选择器”,这样才能准确选取。

3.将库项目命名为pic_1

◆图6-30  创建库项目前提示样式表信息的对话框

二.修改库项目

1.在“文件”面板的“资源”选项卡中单击“库”按钮,选中库对象pic_1,双击打开。

2.删除原有的图片。

3.单击“常用”工具栏中的“媒体:Flash”按钮,打开选择文件对话框。

4.在当前站中的swf文件夹中选择top.swf文件,单击“确定”。如图6-31所示。

5.弹出如图6-32所示“对象标签辅助功能属性”对话框。这个对话框与插入图形时的标签辅助功能对话框相同。输入标题后,单击“确定”,即将Flash动画插入到当前位置。

6.单击“属性”面板中的“播放”按钮,即可在编辑状态下播放Flash动画。

7.保存库项目top_1,弹出“更新库项目”对话框,如图6-33所示。单击“更新”,则保存当前库项目,并更新与之相联的模板文件和网页文件。

8.浏览当前网站,认真观察修改后的效果。

◆图6-31  “选择文件”对话框

 

◆图6-32  “对象标签辅助功能属性”对话框        ◆图6-33  “对象标签辅助功能属性”对话框

三.插入库项目

由于首页文件home.html没有使用模板,所以在库项目修改后,此网页中的图片没有自动改成Flash动画。用以下方法插入库项目。

1.打开home.html文件。

2.通过“标签选择器”选中企业展示图片所在的表格(<table>标记),按[Delete]键删除此表格。

3.保存此网页文件。由于插入的库项目中含有Flash动画,此网页事先并没有添加播放Flash动画的支持文件,所以会弹出如图6-34所示的提示对话框。单击“确定”按钮即可。

4.保存并浏览网页,认真观察修改后的效果。

◆图6-34  “对象标签辅助功能属性”对话框

 

 

 


 


一.模板的建立与使用。

参照任务1制作如图6-35所示模板文档。使用练习文件夹exercise中的company.html网页制作模板。以ex_dwt.dwt为文件名保存到练习文件夹exercise中的Templates子文件中。

要求:1.将该网页存为模板,并对该模板建立可编辑区。

2.新建基于该模板的新文档(如mark.html网页),如图6-36所示。

3.修改模板后,基于模板的文档应有相应的改变。

 

    ◆图6-35  新建的模板                            ◆图6-36  将模板应用网页

二.库项目的建立与使用。

参照任务2添加如图6-37所示的库项目。将练习文件夹exercise中的company.html网页的logo区及banner区作为库项目,存放在库文件ex1_lbi.lbiex2_lbi.lbi中。要求:

1.正确建立库项目,存放在库中。

2.在其他文档(如mark.html)中插入库项目。

3.修改库项目后,含有库项目的文档应有相应的改变。

◆图6-37  建立库项目



一.填空题

1.在Dreamweaver中创建的模板文件被存放在站点目录的____________文件夹中,用户不能随意移动,否则将会引发错误。

2.库文件的扩展名是__________,存放库项目的文件夹名称是___________

3.若有多个页面都使用相同的布局,则创建网页时就可以使用__________

4.若有多个页面都使用相同的网页元素,则可将这些网页元素创建到_________

5.可以在________面板中选择已创建的模板,打开并对其进行编辑。

二.选择题

1.在Dreamweaver中,可以基于模板创建网页。模板文档采用(    )作为其文件扩展名。

Ahtm           Bdwt              Cdwt              Dhtml

2.在创建一个Dreamweaver模板时,必须在该模板中加入一个(    ),以便在把该模板套用到某个网页后,网页有一部分能被正常编辑。

A锁定区域      B)可控制区域       C可编辑区域       D可复制区域

3.在Dreamweaver中,下面关于创建模板的说法,错误的是(    )

A在模板子面板中单击右下角的新建模板按钮,就可以建立新模板。

B)在模板子面板中双击已命名的名字,就可以对其重新命名。

C在模板子面板中单击已有的模板就可以对其进行编辑。

D以上说法都错。

4.在创建模板时,下面关于可编辑区的说法,正确的是(    )

A只有定义了可编辑区才能把它应用到网页上。

B)在编辑模板时,可编辑区是可以编辑的,锁定区是不可以编辑的。

C一般把共同特征的标题和标签设置为可编辑区。

D以上说法都不对。

5.基于网页创建模板时,可以通过执行(    )菜单操作来把网页保存为模板。

A“文件”→“导出为模板”      B)“文件”→“保存为模板”

C“文件”→“转换为模板”      D“文件”→“另存为模板”

6Dreamweaver中,关于模板的说法不正确的是(    )

A)模板是一个文件。

B)模板默认状态下被保存在站点根目录下的Templates子目录下。

C)模板是固定不变的。

D)模板和库尽管有相似之处,但总的来说仍是不同的两个概念。

7.下列库的描述哪一项是错误的(    

A)库包含已经创建的单独资源或资源拷贝的集合以便放在网页中。

B)库中可以存储各种各样的页面元素,如图象、表格、声音、FLASH动画等。

C)库项目是可以在多个页面中重复使用的页面元素。

D)在使用库项目时,Dreamveaver自动将库中的内容插入到页面中。

三.简答题

1.创建基于模板的网页有哪些方法?

2.简要回答重复区域和可编辑区域的作用。

3.简要回答库的定义方法,比较模板与库的作用和区别。