第6章模板和库6.1模板6.2库第2章第一个页面2.1设计布局2.2横幅和页脚2.3导航栏与链接2.4欢迎词与主题图2.5页面参数设定2.6浏览页面2.1设计布局2.1.1新建网页2.1.2打开网页2.1.3利用表格划分区域2.1.4设定表格属性2.1设计布局主体横幅导航栏页脚2.1.1新建网页选择【文件】/【新建】命令新建文档。2.1.2打开网页制作首页之前必须先打开站点和首页文件。使用“文件面板”/【站点】打开开网页。2.1.3利用表格划分区域网页打开之后就可以进行布局设计。实际开发一般使用表格来对各个区域进行划分。2.1.4设定表格属性建好表格之后要适当调整表格各行的高度。2.2横幅和页脚2.2.1添加横幅图像2.2.2水平线2.2.3页脚2.2横幅和页脚布局设计好之后就可以在各个区域添加内容。横幅和页脚是网站中常规的内容。横幅一般是一幅图像,也可以是Flash动画或者其他素材;页脚表示页面的结束,可以只有一条水平线和一些版权信息。2.2.1添加横幅图像2.2.2水平线2.2.3页脚插入页脚文字2.2.3页脚插入页脚图像2.3导航栏与链接2.3.1添加导航菜单图像2.3.2设置图像链接2.3.1添加导航菜单图像2.3.2设置图像链接2.4欢迎词与主题图2.4.1添加区域2.4.2添加文字以及文字链接2.4.3添加主题图2.4.4调整布局2.4.1添加区域欢迎词位于页面的主体区左侧。这里使用层作为文字的容器,因此首先应该在希望的位置添加层。2.4.2添加文字以及文字链接添加了层之后就可以在当中添加内容了。这里将要添加的文字以及文字链接2.4.3添加主题图主题图也是使用层来定位。2.4.4调整布局2.5页面参数设定2.5.1设置网页外观参数2.5.2设置链接样式2.5.3设置网页编码与标题2.5.1设置网页外观参数网页的外观属性定义了页面全局属性,例如页面文字的大小、文本颜色、背景图像以及页面边距等属性。2.5.2设置链接样式链接样式主要针对文本链接。通过设置其中的属性,可以改变链接的默认显示样式。2.5.3设置网页编码与标题文档编码指定网页文档中字符所用的编码。网页标题指的是显示在浏览器标题栏的文本内容。网页标题指的是显示在浏览器标题栏的文本内容。2.6浏览页面使用【文件】/【在浏览器中浏览】/【Iexplorer】命令可以浏览页面小结本章以首页的制作为例子,概要地介绍了页面应具有的内容、布局以及网页元素。总的来讲,表格、层、文字、图像和超链接是网页最基本也是使用最频繁的网页元素。这些元素有的是容器类元素,元素内可以嵌入其他元素,如表格和层内可以插入文字或图像。而有的是原子元素,这些元素内部不能再嵌入其他元素,如文字和图像。通过本章的学习,应该能够对基本的网页框架以及这些元素有总体的认识,并能够简单地应用这些网页元素来制作一个网页。在接下来的章节,将要对各个网页元素的使用进行详细的讨论,并将引入其他较常用的对象。6.1模板6.1.1创建模板6.1.2设置模板的可编辑域6.1.3用模板新建网页6.1.4套用模板6.1.5利用模板更新网页及网站6.1.6脱离网页与模板关联6.1模板使用模板可以快速地建立风格统一的网站,更重要的是使用模板能够显著降低网页更新维护的工作量。可以将设计好的布局制作成模板,页面通过模板创建。如果用户修改了模板,Dreamweaver8会自动地更新所有由此模板创建的页面。6.1.1创建模板使用【文件】/【新建】命令创建模板。6.1.1创建模板使用【窗口】/【资源】命令创建模板。6.1.1创建模板打开已经设计好的网页,然后直接使用插入面板的按钮创建模板。6.1.2设置模板的可编辑域可编辑区域是指套用该模板的网页可插入新内容的区域。Dreamweaver8对由模板创建的网页做了限制,非可编辑区域的内容是不可单独修改的。6.1.2设置模板的可编辑域设置模板的可编辑域的方法:(1)打开模板资源面板,单击选定要编辑的模板,然后单击编辑按钮打开模板文件(2)在编辑区域中定位可编辑区域的插入点。(3)使用【插入】/【模板对象】/【可编辑区域】命令建立可编辑区域】。6.1.3用模板新建网页打开模板资源面板,右击目标模板弹出快捷菜单,从模板上新建。6.1.4套用模板使用【修改】/【模板】/【套用模板到页】命令可套用现有的模板。6.1.4套用模板还可以直接使用模板资源面板来完成套用现有的模板。6.1.5利用模板更新网页及网站模板修改后,选择【文件】→【保存】命令。此时Dreamweaver8检查站点内是否有网页应用了该模板。若有,弹出对话框,其中文本框中列出了所有应用了该模板的网页文件。6.1.6脱离网页与模板关联如果希望中止网页与其套用的模板之间的关联关系,可以采取如下方法:(1)打开一个套用了模板的网页文件。(2)选择【修改】/【模板】/【从模板中分离】命令。6.2库6.2.1创建库项目6.2.2将网页元素存储为库项目6.2.3将库项目应用到网页6.2.4编辑库项目6.2.5脱离与库元素的连接6.2库使用库能够有效地减少一些重复性的操作,例如链接的设置等。另一方面,使用库的更新功能还能减少网站的维护量。6.2.1创建库项目一些网站中重复的内容,例如图像、文字、或者多个网页元素的组合都可以将它定义成库元素。库资源面板6.2.2将网页元素存储为库项目使用【修改】/【库】/【增加对象到库】命令,或者直接将对象拖到库资源面板。6.2.3将库项目应用到网页在资源面板中选定库项目名称,单击【插入】按钮,可将库项目应用到网页。6.2.4编辑库项目在资源面板中,单击要进行编辑的库项目的名称,然后单击编辑按钮,即可修改库项目。修改库项目后,要单击【更新】按钮,执行更新操作。6.2.5脱离与库元素的连接添加到页面中的库项目是不可以直接进行编辑修改的,但有的时候需要独立对某个页面中的库项目进行编辑。这时候可以将该库项目与源文件分离。脱离与库元素的连接的方法是:单击选中要脱离源文件的库项目,然后单击【从源文件中分离】按钮。小结本章介绍了模板和库的使用。利用模板和库能够加快网页打开的速度,另一方面模板和库的自动更新功能可以大大地减少网站更新和维护的工作量。