在
网页设计工具
Dreamweaver(以下简称DW,目前最高版本为4.02,本文例子中用的是4.0版)里有一项十分强大的功能,就是
模板!
那
模板有什么魅力呢?它又有什么样的特点呢?
利用
模板,我们可以固化站点每页都出现的元素。
通过利用
模板创建WEB页,可使整个站点具有统一的
风格。
只要修改
模板,就可以修改应用了该
模板的所有WEB页,而不需要手动修改每一页。比如需要更改你的版权时,你是不是要一页一页的进行版权修改?如果有上千页呢?我相信你会一个头两三个大。但如果你用上了
模板的话,这些都不成为问题。
下面是个较全面的例子,能迅速的让你掌握
模板的使用。
1. 编辑页面 打开DW,新建一个站点,我们就取名为“蜘蛛网”。
新建一个空白页面作为内页(通常一个
网站只有一个首页,所以对首页我们可以不做成
模板),取名为body.htm。
编辑这个页面,完成如图1。
图1,编辑完成后的body.htm页面,注意A处,此处将作为可编辑区域,下文会针对提及。
2. 生成模板
编辑完成后,我们将此页保存为
模板(注意不是保存为普通的htm网页)。通过DW中的FileàSave As Template可以存为
模板,执行此命令后会弹出Save As Template窗口,如图2。
图2,Save As Template窗口。
图2中的B处为选择站点,我们选择“ 蜘蛛网”,C处为我们要存为的
模板文件名,我们填入body。按右上角的Save保存。
这时我们按F8调出site(站点管理器),在Templates文件夹中可以看到body.dwt(当有
模板文件时,DW会自动生成Templates文件夹,dwt为
模板类型文件)
3. 编辑模板 在Site中打开body.dwt模板文件,将会发现跟body.htm页面好像没什么分别,但其实是不一样的,在body.htm中是无法添加可编辑区域的。可编辑区域只能在
模板文件中添加。
为了让大家更好的理解“可编辑区域”,我们先用此
模板生成一个htm文件:点FileàNew From Template,弹出Select Template窗口,在emplates中选择body,再点击右上角的Select即可生成一个新的htm文件。我们将此新建页面改名为body2.htm。现在我们用DW将body.htm与body2.htm两文件都打开,比较一下有什么不同。你会发现在body2.htm页面的右上角写着“Template:body”几个字。(说明此页是由body.dwt模板文件生成)同时你会惊讶的发现body2.htm文件竟然不可以编辑(body.htm可以编辑)。对了,这就是由于在body.dwt模板文件中没有定义“可编辑区域”的结果,使得生成的页面都不可编辑了。所以我们必须在
模板文件中添加可编辑区域。下面是添加可编辑区域的步骤:
1) 打开body.dwt模板文件,我们希望中间的表格可以编辑(也就是图1中的A处)。但是要在body.dwt文件中,而不是body.htm),所以要在此处添加可编辑区域。
2) 将鼠标光标放入A处表格里,点击鼠标右键,选择New Editable Region…, 弹出New Editable Region窗口,要求填入此可编辑区域的名称(我们通常称为可编辑区域标记)。我们填入Region01,点击ok关闭此窗口完成当前可编辑区域标记的编辑。此时可以看到在表格中有如图3的显示。
图3,New Editable Region窗口。
说明此处有一个标记为Region01的可编辑区域。
到此为止我们定义了一个可编辑区域,如果有多个编辑区域,同样可以如法炮制。
※还可以通过ModifyàTemplatesàNew Editable Region…生成新的可编辑区域,如果想删除可编辑区域,可通过ModifyàTemplatesàRemove Editable Region…,然后按提示操作即可。
4. 用模板生成页面
其实我们前面也提及过用
模板生成页面的步骤,就是通过FileàNew From Template。请参考第三步的有关步骤。现在我们用
模板生成一个名为body3.htm的页面。这时你会发现,在body3.htm页面中除了可编辑区域Region01可以编辑外,别的地方鼠标都成了限制状态。我们在此可编辑区域中添加我们需要的内容,比如我们随便写入一篇文章。这样就可以根据我们的需要,利用
模板生成页面。
5. 修改模板内容与更新站点文件 打开body.dwt模板文件,将我们需要修改的地方进行修改,比如我们把logo图片换掉或修改任何非可编辑区域,甚至添加或删除可编辑区域等。
下面就用换logo来说明
模板是如何更新文件的。
我们把logo图片换成另外我们喜欢的图片,完成后保存body.dwt文件,这时DW会弹出窗口询问是否需要更新文件,选择Update,DW就会自动的将所有用此
模板生成的页面都更新,更新时DW会弹出Update Pages窗口,完成后,在Update Pages窗口中会给出更新日志。
※如果选择了don’t Update,DW直接保持
模板文件,暂时不更新页面,但我们可以手动更新页面,只要选择ModifyàTemplatesàUpdate Pages…即可。
这时我们打开任意一个用body.dwt生成的页面,如body3.htm。会发现logo图片已经改变。
不难发现,利用这个功能,我们可以轻松的解决站点更新问题,
模板的功能十分强大,此文只起到抛砖引玉的作用,很多功能由于篇幅问题未能提及,自己要多尝试,这样才能充分领略DW的
模板风采。
在DW中,还有一项称为库的功能,跟
模板可以有机的配合,这样会使
模板的功能更加强大,如果读者反应有兴趣的话,我愿意为大家献上这一份礼物。