您的位置: 首页 >> 新闻中心 >> 计算机 >> 设计制作
Dreamweaver网页制作技巧:使用模板
■ 最新课程推荐更多课程>>
学校培训课程开课时间上课地点精英价报名
北 师 大 平面设计创意全科班电话预约北京师范大学¥1300
理工文化 平面设计取证班电话预约理工大学教学¥1078
金 同 方 CAD绘图全天班电话预约人大总部¥568
金 同 方 苹果平面设计全天班电话预约人大总部¥960
理工文化 平面设计提高班电话预约理工大学教学¥2891

  随着Internet的普及,很多人已经不满足于仅仅上网冲浪,而希望深入地参与其中。现在,拥有自己的Web网站已经成为一种潮流。虽然制作一个简单的网页并不困难,但是制作出超凡脱俗的网站就不那么容易了,因此我们特意为大家准备了最新网站设计软件Dreamweaver MX 2004的系列教程,希望对大家有所帮助。
 
  通常在一个网站中会有几十甚至几百个风格基本相似的页面,如果每次都重新设定网
 
  页结构以及相同栏目下的导航条、各类图标就显得非常麻烦,不过我们可以借助Dreamweaver MX 2004的模板功能来简化操作。其实模板的功能就是把网页布局和内容分离,在布局设计好之后将其存储为模板,这样相同布局的页面可以通过模板创建,因此能够极大提高工作效率。
 
  一、制作模板
 
  制作模板和制作一个普通的页面完全相同,只是不需要把页面的所有部分都制作完成,仅仅需要制作出导航条、标题栏等各个页面的公有部分,而把中间区域用页面的具体内容来填充。
 
  第一步:先在Dreamweaver MX 2004中运行“File→New”命令,接着从图1所示的窗口中依次选定“Template page→HTML template”选项,点击“Create”按钮之后即可创建一个模板文件。
 
  第二步:在页面设计视图下插入网页框架、导航条、Flash标题等所有页面公有的元素(图2),然后运行“File→Save”命令将这个模板保存下来。
 
  小提示:可以先下载一个中意的网页,然后在Dreamweaver MX 2004中打开它,仅仅保留框架等元素之后通过“File→Save as Template”命令将其保存为模板,这样能够省去很多制作模板的时间。
 
  为了避免编辑时候误操作而导致模板中的元素变化,模板中的内容默认为不可编辑,只有把某个区域或者某段文本设置为可编辑状态之后,在由该模板创建的文档中才可以改变这个区域。先用鼠标选取某个区域(也就是每个页面不同内容的区域),接着运行“Modify→Templates→New Editable Region”命令,并且在弹出的对话框中为这个区域设定一个名称,这样就完成了编辑区域的设置。
 
  小提示:设定好编辑区域之后需要运行“File→Save”命令保存所做的修改。
 
  二、使用模板
 
  有了模板之后,接下来就要在编辑网页时候使用它们了。只要在Dreamweaver MX 2004主窗口中运行“File→New”命令即可看见图1所示的新建窗口,接着进入“Templates”标签即可查看到已经保存的模板,从中选取一种还可以在右部的预览区进行预览(图3),最后挑选一款中意的模板并点击下部“Create”按钮打开这个模板。
 
  在打开的模板中,无法编辑的区域将呈高亮状态显示,但是有些位置是锁定区域,却不是高亮显示,这主要是因为图片正好盖住了背景的颜色。对于这种情况,可以运行“Edit→Preferences”命令,在弹出窗口的“Category”列表中选取“Highlighting”一项,接着在右部区域中选取“Locked regions”旁边的“Show”选项(图4),并且设定高亮显示色为蓝色,这样就可以很清楚地分辨出模板中的锁定区域了。
 
  小提示:如果仍然看不见高亮显示效果,还可以依次选中“View→Visual Aids→Invisible Elements”命令。
 
  最后,我们只要在可编辑区域添加网页的内容就可以了,比如添加一些文字说明或者是插入相应的图片,最后通过“File→Save”命令保存页面即可。
 
  三、修改和更换模板
 
  在通过模板创建了若干个页面之后,如果需要更改页面或者增加栏目,再对所有的页面手工修改则非常麻烦,因此我们可以通过Dreamweaver MX 2004的模板修改功能来解决这个问题。比如我们对模板进行了修改之后,运行“File→Save”命令来保存模板,这时候会弹出提示框询问是否更新所有使用了该模板的页面,确认之后就会显示出更新的页面总数以及更新的时间等信息。

本新闻共2页,当前在第1页  1  2

  影视动画培训   北大BEC培训官方报名网站   2008美国夏令营启航官方指定报名网站   2008留学第一站!  
  北师大 火星时代
共举影视动画培训之鼎
  北大BEC培训官方报名网站
现在报名独享93折!
  2008美国夏令营启航!
美之旅官方报名网站
  2008留学第一站
留学资讯尽在精英留学站!
 
上一篇:DreamweaverASP实现分页技术
下一篇:Flash技巧代码:播放进度控制
 相关新闻
·Flash实例剖析:碧海浪涌海鸥飞·用Flash制作螺旋发散特效动画
·巧用AUTOCAD中可替代捕捉点画切线·AutoCAD建模实例:绘制雨伞
·Vue 5 Esprit彩色图控制材质色彩变化·用COOL 3D制作超炫结婚盛典三维片头
·Vue 5 Esprit渲染参数详解·巧妙用文字给你设计的网页“注入情感”
·卡通漫画动作设计的主要风格类型·Creative Suite3中文版7月开发布会
·Adobe ColdFusion 8 Beta 公开发布·Adobe正式停止开发FreeHand 19年寿命终结
·Photoshop概念命令总体说明·Photoshop辅助线与标尺应用技巧
·Photoshop常用快捷键大放送·Flash技巧代码:播放进度控制
 
◇ 重点栏目导航
◇ 精英服务承诺
教育顾问:010-51660910
QQ交流:138660910
相关资料
·用Photoshop制作逼真自然背景
·PhotoShop帮助Maya巧建模
·道字桌面的仿书法制造
·用Coreldraw绘制美丽国画荷花
·如何配色?无论新手老手,读下这篇文章相
·天使翅膀的制作
·Photoshop制作无缝贴图:Action动作集总
·photoshop学习方法总结
·学好平面设计的好方法
·[艺术设计专题]企业VI系统的简介和工作步
相关试题
·CEAC平面设计师考证之Photoshop考试试题
·你会吗 Adobe Photoshop 认证试题一
·武汉理工大学2003年艺术设计学院平面设计
·你会吗 Adobe Photoshop 认证试题三
·你会吗 Adobe Photoshop 认证试题二
相关热贴
·想学设计课啊,哪位帮我推荐一下~~
·制作个人简历九大标准
·给年轻设计师的十大忠告
·平面设计人员必读 (速读版)
·oracle下导出某用户所有表的方法
·计算机个人简历(英语)
·浅谈计算机课件制作
·一张图透彻讲解Photoshop蒙版
·Delphi中数据的自动录入
·Java与C和C++的比较