最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
巧用Dreamweaver模板统一站点风格
时间:2022-07-02 13:19:19 编辑:袖梨 来源:一聚教程网
话说阿蒙的主页建设的也差不多了,不过问题也出现了,为了使整个网站的风格保持一致,很多网页的版式都是相同的,但是每次都做一个版面风格相同的网页势必很麻烦,况且阿蒙本来就是一个懒人。鸣涧看不过去了,告诉阿蒙还是使用模板吧,这样可以方便许多。
阿蒙不解,模板是什么意思啊?打个比方吧,在一批版面风格类似的网页中,比如网页上面的标题、导航都是相同的,而下方的正文部分不同,那么就可以使用模板了,建模板可以将网页中无需变化的对象固定下来,然后再用来应用到其他风格类似的网页中。这样就可以实现,只修改部分页面就可以快速实现网页制作了。下面就来介绍一下如何制作模板。
制作一个网页
首先需要制作好一个网页(如图1),制作这个网页过程中,需要注意的是,凡是页面上无需变化的部分都预先制作好,并确定在固定的位置上。将需要填写正文文本内容的部分预留出空间,比如文章的标题区和文本正文区。
图1 哪些是固定的,哪些是变化的?
保存模板
执行菜单“File→Save As Template”命令,选择“另存为模板”,在打开的系统对话框中输入模板名称后单击“Save”按钮。保存后,此时窗口中的标题栏已经发生变化,在标题栏中出现了“<>”的字样,表示当前编辑的页面已经是模板了。
设置模板可编辑区
最重要的工作就是设置模板可编辑区域,否则的话,使用此模板生成的页面将是无法编辑的。首先我们选中页面标题区的单元格,然后执行菜单“Modify/Templates/New Editable Region”命令建立一个新的可编辑区。此时会打开一个对话框(如图2),输入可编辑区域名称为“edit1”,然后按下“OK”按钮,这样页面中就生成了一个{}包围的可编辑区域的标记,表示当前区域为可编辑区。同样道理设置好正文可编辑区域。并将模板保存退出。
图2 填入可编辑区名称
应用模板
在Dreamweaver中建立一个新页面,然后执行菜单“Window/Templates”命令打开模板控制面板,在模板列表区域选择一个已经建立好的模板,然后单击面板上的“Apply”按钮即可将此模板应用到页面上了(如图3)。需要注意的是,应用以后,页面中黄色部分是不可编辑区,此时可以在可编辑区中将包含的文字删除,填写相应的内容,这样就可以快速制作出一个网页文件了。
图3 模板的应用就是这么简单
更新模板
有的时候需要修改某个模板,改变网页的风格。此时可以打开模板文件,然后进行修改即可。模板修改并保存后,系统还会弹出一个对话框(如图4),提示是否同时更新模板所关联的相应网页,此时只要单击“Update”按钮即可立即将所有采用此模板制作的网页同时更新,从而实现了修改一个页面即可使整个网站面貌焕然一新,大大地提高了工作效率。
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21
热门栏目
-
php教程
php入门 php安全 php安装 php常用代码 php高级应用 -
asp.net教程
基础入门 .Net开发 C语言 VB.Net语言 WebService -
手机开发
安卓教程 ios7教程 Windows Phone Windows Mobile 手机常见问题 -
css教程
CSS入门 常用代码 经典案例 样式布局 高级应用 -
网页制作
设计基础 Dreamweaver Frontpage js教程 XNL/XSLT -
办公数码
word excel powerpoint 金山WPS 电脑新手 -
jsp教程
Application与Applet J2EE/EJB/服务器 J2ME开发 Java基础 Java技巧及代码