|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
您现在的位置: ChinaBeta.cn 中文IT资讯 >> 网盟学院 >> 网站设计 >> 网管技术正文
推荐网管技术[多图]即将发布的Microsoft Of…推荐网管技术让我穿过那道"墙"! 畅游网络应…
推荐网管技术文件夹变身磁盘 查看共享有新招…推荐网管技术防患于未然!终截者抗病毒软件…
推荐网管技术主动防御!瑞星杀毒2008抢先评…推荐网管技术玩转虚拟光驱:DAEMON TOOLS P…
推荐网管技术速度超快 Discuz! 6.0.0试用手…推荐网管技术当设计遇上PC:LG XPION A10图…
推荐网管技术奇虎举证:各杀毒软件均报CNNIC…推荐网管技术Google Earth 4.2加入繁体中文…
推荐网管技术Photoshop CS3:蔚蓝梦幻风格婚…推荐网管技术专业防护!瑞星防火墙2008测试…
推荐网管技术挂载RAR文件 从认识到爱上WinM…推荐网管技术让你冲浪随心所欲 如何访问被封…
推荐网管技术轻装上阵!江民杀毒软件2008速…推荐网管技术VMware Fusion苹果版全程图解(…
推荐网管技术VMware Fusion苹果版全程图解(…推荐网管技术从菜鸟出发!征服高清详细评测全…
推荐网管技术VS2008和ASP.NET 3.5使用之初体…推荐网管技术迅雷 快车 电驴 eMule下载飚速…
推荐网管技术[多图]Ubuntu 7.04 初体验推荐网管技术东风吹战鼓擂 下载软件你选谁?
推荐网管技术若隐若现 Windows XP DirectX …推荐网管技术GPRS上网全攻略
推荐网管技术主流杀毒软件Vista兼容性横评推荐网管技术基于IRF的网络管理和业务管理解…
推荐网管技术83个美丽的Wordpress主题推荐网管技术软交换网络中的关键路由技术详…
Dreamweaver中怎样使用模板
Www.ChinaBeta.Cn 更新时间:2008-3-25

【ChinaBeta.Cn 网盟学院】
在网页设计工具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中,还有一项称为库的功能,跟模板可以有机的配合,这样会使模板的功能更加强大,如果读者反应有兴趣的话,我愿意为大家献上这一份礼物。
Google

(责任编辑:hahack)

发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
热门文章 相关报道
普通网管技术 [网站设计]Dreamweaver中怎样使用模板 (03-25)最新网管技术
普通网管技术 [网站设计]DreamweaverMX Ultradev探索【3】 (03-25)最新网管技术
普通网管技术 [网站设计]Dreamweaver MX Ultradev探索【2… (03-25)最新网管技术
普通网管技术 [网站设计]Dreamweaver MX Ultradev探索【1… (03-25)最新网管技术
普通网管技术 [网站设计]Dreamweaver MX Ultradev探索 【… (03-25)最新网管技术
普通网管技术 [Photoshop|Illustrato]Photoshop特效:超级螺旋变幻线 (03-25)最新网管技术
普通网管技术 [Photoshop|Illustrato]Photoshop拼贴图的简单做法 (03-25)最新网管技术
推荐网管技术 [Photoshop|Illustrato]photoshop CS 制作冰封特效 (03-25)最新网管技术
普通网管技术 [Photoshop|Illustrato]Photoshop制作精美钻石字 (03-25)最新网管技术
普通网管技术 [Flash|CAD]如何让Flash动画自动适应任何分辨… (03-25)最新网管技术
  • DreamweaverMX Ultradev探索…

  • Dreamweaver MX Ultradev探…

  • Dreamweaver MX Ultradev探…

  • Dreamweaver MX Ultradev探…

  • Dreamweaver教程:CSS制作细…

  • Dreamweaver教程:CSS制作细…

  • 详解用Dreamweaver制作网页…

  • Dreamweaver精细化网页中表…

  • 用Dreamweaver制作网页七招…

  • 八大要领 做网站就这么简单

  •   网友评论内容:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    I D *
    邮 箱
    主 页
    评 分 1分 2分 3分 4分 5分
    评 论

    关于我们  中国·国家信息产业部{粤ICP备06006652号}{陇ICP备06002562号}
    版权所有:『AK网盟基地』站长:Hahack | QQ:80505955 | E-mail:Hahack@Gmail.com
    Copyright (C) 2005-2007  akhack.org|chinabeta.cn All Rights Reserved