使用库布局网页

项目6　使用库布局网页

项目描述

库与模板有着异曲同工之妙，它们在本质上差异不大。模板针对的是页面大框架及整体上的控制，其文件在Templates目录中；而库则更多地针对小元件的标准化，例如站点中版权栏在每个页面都有，用户可以把这些重复的内容做成库部件，便于在以后的页面制作中重复使用，其文件在Library目录中；本项目以利用库制作“网页设计师”网站的“行业动态”页为例，学习使用库布局网页的方法。“行业动态”网页效果如图4-90所示。

图4-90　“行业动态”网页效果

项目分析

本项目首先将页面变化的内容创建成库，然后创建基于模板的网页，在可编辑区域插入库的内容，轻松制作所需网页。因此，本项目可分解为以下任务：

任务1　创建库

任务2　利用库完成页面的制作

项目目标

●掌握库的创建方法

●掌握利用库布局网页的方法

任务1　创建库

操作步骤

新建HTML空白页，命名为“mobanku.html”，设置保存类型为库文件（＊.lbi），如图4-91所示。

单击【保存】按钮，此时，库文件将出现在【资源】面板中，如图4-92所示。

图4-91　保存库文件

图4-92　【资源】面板

在“mobanku.html”页面中，执行【插入记录】→【表格】命令，插入一个12行1列的表格，依次输入文本内容，如图4-93所示。

执行【修改】→【库】→【增加对象到库】命令，把“mobanku.html”页面上的元素添加到库里；单击【资源】面板的“库”按钮，在空白区域可以查看到“mobanku”出现在库面板里，如图4-94所示。

图4-93　在库页面创建网页元素

图4-94　查看库项目

任务2　利用库完成页面的制作

操作步骤

执行【文件】→【新建】命令，打开【新建文档】对话框；在“模板中的页”类别中选择“网页设计师”站点的“moban”模板文件，创建新的基于“moban.dwt”的HTML页面；保存该页面名字为“hangyenews.html”。效果如图4-95所示。

图4-95　创建基于moban.dwt的页面

将光标定位在可编辑区，在【资源】面板中，右击“mobanku”，在弹出的快捷菜单中选择“插入”命令，如图4-96所示，则在可编辑区内插入库元素“mobanku”，效果如图4-97所示。

图4-96　执行“插入”命令

图4-97　插入库元素到可编辑区效果

至此，“行业动态”页面制作完成。

贴心提示

（1）不要将模板从Templates文件夹中移走，或者将一些非模板文件放进Templates文件夹中。当然更不要将Templates文件夹移动到本地根目录之外，这些做法都会导致模板的路径错误。

（2）如果还没有定义任何可编辑区，将被警告目前模板还不包含任何可编辑区域，可以强行保存该模板。模板中虽不包含任何可编辑区域，但可以修改该模板。不能修改应用该模板的文档，直到在模板中创建可编辑区域为止。

知识百科

1.库的简介

所谓库，也称为库元素，可以看成是网页上能够被重复使用的零件。在Dreamweaver中，将单独的文档内容定义成库项目，也可以将多个文档内容的组合定义成库项目。

2.创建库项目

执行【窗口】→【资源】命令，打开【资源】面板，单击左侧的“库”按钮进入【库】面板，选取需要设置为库的对象，如文字、图像等，单击面板底部的“新建库项目”按钮或将对象直接拖入【库】面板即可。

3.库项目在网页中的使用

库项目一旦建立，用户就可以在站点的多个页面中进行使用。将光标定位在需要使用库项目的位置，单击【库】面板底部的【插入】按钮即可。

4.修改库项目及更新网页

双击“资源”面板中的库项目对象，就可以直接打开后缀名为“.lbi”的库文件。在修改完库项目对象后，执行【文件】→【保存】命令即可保存修改。如果库项目已应用到具体的页面，系统会自动弹出【更新库项目】对话框，当单击【更新】按钮后，系统将自动更新引用该库项目的页面。如果单击“不更新”按钮，用户可在以后手动更新。

项目小结

通过本项目学习，了解到库的作用以及如何创建库并利用库来布局网页。

知识拓展

随着各种各样的网页制作技术的风起云涌，利用CSS＋DIV的设计方式也逐步成为制作网页的主力军之一。CSS及DIV作为制作网页的重要组成部分，已经成为网页设计中必不可少的要素。

用CSS＋DIV制作网页的过程，可分为两个重要环节：一是使用CSS＋DIV布局页面，二是使用CSS来美化页面。

1.使用CSS＋DIV布局网页

1）CSS＋DIV简介

CSS＋DIV是网站标准（或称“Web标准”）中常用的术语之一，在XHTML网站设计标准中，不再使用表格定位技术，而是采用CSS＋DIV的方式实现各种定位。

CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。

DIV元素是用来为HTML文档内大块（Block-Level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

2）用CSS＋DIV布局网页的方法

确定好网页所采用的布局结构后，按以下步骤进行：

网页页面的每个区域，如页头区、主体区、法律和版权声明区等，都插入相应的DIV元素，然后，用CSS控制DIV使网页居中显示。

对于页面中所有的DIV元素，利用CSS控制DIV的位置，可以将页面中的DIV视为一个个块状元素。在此应用了“盒模型”的工作原理，“盒模型”是CSS的基础。“盒模型”理论认为：页面上的每个元素都被看做一个矩形，这个矩形由内容、填充（Padding）、边框（Bor-der）和边距（Margin）构成。元素的实际宽度＝内容宽度＋2×边距（Margin）＋2×填充（Padding）＋2×边框（Border），对于每部分的间距，以及文字、图片空隙的调整，用CSS＋DIV布局是很合适的，那就是用“盒模型”的工作原理来调整。

在网页默认的情况下，元素由上到下依次叠放，当这样的叠放顺序不能满足布局的需要时，就要使用“Float（浮动）”属性来改变元素的叠放顺序。元素应用了“Float（浮动）”属性，它周围的元素就会靠近、包围元素，这样的影响在有的布局中是多余的。这时，可以用“Clear（清除）”属性来阻止这种浮动对后面元素的影响。再复杂的布局也是重复利用这样的技术，大到网页每一部分的叠放，小到文字、图片的排版。

在DIV中添加各种网页元素，把文字、图片、动画安排到合适的位置，再把每部分合理地叠放到网页中，这样就完成了网页的布局。

3）使用CSS美化网页

通常，在同一个网站中，为了保证站点风格统一，制作出赏心悦目的网页，要对所有页面定义统一的CSS样式，如超链接的样式、网站Logo、页面导航、背景等。这样做还有一个好处，就是可以轻松地进行网站后期维护，只修改一个CSS样式表文件，网站内容的样式就会整体改变。

CSS的主要作用就是将一系列样式规则应用于文档中，使得文档中应用了这个规则的内容实现某种样式，这一系列的样式规则就叫做选择器。用CSS对网页页面的美化可以通过以下3种方法完成：

方法1　通过HTML标签选择器。HTML标签本身就是选择器，可以对HTML标签直接附加CSS代码。同一个HTML标签可以有多个声明，这样就可以实现对HTML样式的全面设置。用CSS设置HTML标签，后期的维护也很方便，当要改变某个标签的样式时，只需更改相应的属性值就可以了。

方法2　通过类选择器。类选择器以“.”开头，格式为：.类选择器名｛属性1：值1；属性2：值2；……｝，在网页中需要使用的位置，用“class＝″类选择器名″”调用即可。类选择器可以在页面中重复使用，可以实现代码的重用。当CSS设置HTML标签的样式不能满足特殊的需要时，就可以使用类选择器。

方法3　通过ID选择器。ID选择器与类选择器基本相同，但在同一个页面中不可重复使用，常用于定义页面中大板块的区域，用法为：＃id｛属性1：值1；属性2：值2；……｝。

2.CSS＋DIV网站设计的利弊

（1）采用CSS＋DIV进行网页制作相对于传统的Table网页布局而具有以下4个显著优势：

●表现和内容相分离。将设计部分剥离出来放在一个独立的样式文件中，HTML文件中只存放文本信息。

●提高搜索引擎对网页的索引效率。众所周知，搜索引擎喜欢清洁的代码（其真正意义在于，增加了有效关键词占网页总代码的比重），用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。

●提高页面浏览速度。CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽。对于同一个页面视觉效果，采用CSS＋DIV重构的页面容量要比Table编码的页面文件容量小得多，前者一般只有后者的1/2大小。

●易于维护和改版。CSS＋DIV制作的网站使得网站改版相对简单，很多问题只需要改变CSS而不需要改动程序，从而降低了网站改版的成本。

2）CSS＋DIV网站设计的问题

比较表格布局和CSS＋DIV发现，CSS语法实在很容易便利。尽管CSS＋DIV具有一定的优势，不过现阶段CSS＋DIV网站建设存在的问题也比较明显，主要表现在：

（1）对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML 4.0中的表格布局（Table），CSS＋DIV尽管不是高不可及，但至少要比表格定位复杂得多。即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。

（2）CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在外部文件中，这些文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。

（3）对于CSS网站设计的浏览器兼容性问题，还有待于各个浏览器厂商的进一步支持。

在网页设计的精彩世界里，实现同一种效果可能有无数种方法，并且不断有新的方法出现，但CSS＋DIV作为网页制作的一种新生力量，被越来越多的网站设计者所广泛使用，也成了网页设计者必须掌握的一种技术。