李玲玲

（淮北职业技术学院计算机科学技术系，安徽淮北 235000）

关于“网页布局”方式的研究

李玲玲

（淮北职业技术学院计算机科学技术系，安徽淮北 235000）

网页是网站构成的基本要素，而网页元素在网页中的组合决定了网页的最终效果。文章首先指出了三种经典的网页布局方式，对其进行分析比较，并论述了他们各自的优缺点，然后说明了实际应用中常用的方法手段。

网页布局；表格；框架；AP元素

网页中可以直接输入文本、图像、多媒体等诸多元素，并可以按照我们的目标设置它们之间的排版格式，但是不能随心所欲的在网页中的任意位置放置这些元素。制作网页的过程中有时元素之间的相对位置会根据元素的尺寸等很多要素而变得毫无章法，也可能随着IE窗口的大小调整及屏幕的分辨率的不同而改变，即网页处于不稳定的状态，而解决这些问题的方法就是在插入这些网页元素之前对网页进行页面布局［1］15－22。

经典的页面布局方式有三种：用表格布局网页、用框架布局网页和用AP元素布局网页［2］8。

1 用表格布局网页

众所周知，表格的基本功能是罗列和显示数据的，这在Word和Excel中是最好的证明。然而，在Dreamweaver中，表格除了罗列和显示数据外，还有一项非常重要的功能，就是定位与排版，即布局网页的功能［3］85－92。

利用表格布局的常用方法是根据页面的需求，插入表格，设置好表格的相关属性，然后把网页所用元素（常用的有文本、图像等）插入到表格当中，使这些元素固定在相对的单元格中。因为外层有表格限制，所以这些插入进来的元素受单元格限制，而不会再随意移动。

当然，在Dreamweaver中，可以用来布局网页的，除了基本表格外，还包括嵌套表格和自绘表格。无论是使用哪种表格来对网页进行布局，通常表格的属性中边框粗细、单元格边距、单元格间距的值通常都设置为0。

在Dreamweaver中，使用表格布局网页，其优点是便于规划，易于接受，对设计人员的专业技术要求不高，操作简单，直观。

缺点是Table布局灵活性不大，你只能遵循〈table〉〈／table〉、〈tr〉〈／tr〉、〈td〉〈／td〉的格式；不适合过于复杂的网页；垃圾代码会很多，一些修饰的样式及布局的代码混合一起，降低代码的可读性。

2 用框架布局网页

在Dreamweaver中框架（Frame）是除了表格以外另一种常用的网页布局排版工具。框架结构就是把浏览器窗口划分为多个区域，每个区域都可以分别显示不同的网页。框架实际上由两部分组成，即框架与框架集。框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容相关或无关的网页文件。每一个框架都是一个独立的网页文件；框架集是框架的集合，是一个定义了一组框架结构的网页。框架集文档本身不在浏览器中显示，它只是向浏览器提供如何显示框架以及在框架中显示哪些文档的信息，是一个用于存储框架的容器。

框架网页是指一种Web页，可以将Web浏览器窗口分为不同的可滚动的区域，这些区域可独立的显示几个Web页［4］185－192。一个窗口可保持不变，而其它窗口根据用户选择的超链接变化。

用框架布局网页首先要建立框架或框架集，其操作可以借助于菜单或工具，也可以直接使用鼠标拖拽。然后把相对应元素（文本、图像、网页等）导入到框架中。值得一提的是框架和框架集在使用时都需要保存。使用Iframe可以将一个文档嵌入到另一个文档中显示。随处引用，而不必拘泥于形式。但必须用代码手工添加。

在Dreamweaver中，使用框架布局网页，其优点是框架网页本身不包含可见内容，它只是一个容器，用于指定在框架中显示的其它网页及显示方式；访问者不需要为每个页面重新加载与导航相关的图形；每个框架都有自己独立的滚动条，方便访问者独立浏览这些框架。

缺点是缺省时，框架是有边框的，占用屏幕上可用作别的目的的一些空间；难以实现不同的框架中各元素的精确对齐；主流的搜索引擎下不会收录框架的页面；网点速度相对较慢等。

3 用AP元素布局网页

Dreamweaver的绝对定位简称AP，是分配有绝对位置的一种页面元素。通常文字、图像等元素都是在二维空间进行编辑操作的。而使用AP Div则让页面元素向三维空间扩展。AP元素可以包含文字、图像、影像等。AP Div就是以绝对的定位方式处理HTML页面的元素［5］62－69。

用AP元素布局网页，首先要绘制AP Div层，其对应的标志符为〈div〉〈／div〉，然后把光标置于相应的AP Div层内，把所需页面元素插入进来即可。AP Div层是可以相互重叠的。因为元素是被限定在AP Div内，所以元素相对AP Div层是不移动的，但AP Div层本身是可以在网页中任意移动。即AP Div层将携带内置元素一起移动。

用AP元素布局网页，优点是绘制简单，直观，元素会跟随AP Div层移动。

缺点是AP Div层本身是相对定位的，其位置针对整个页面不是绝对的。

4 其它布局网页方式

DIV＋CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV＋CSS的方式实现各种定位。CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。

DIV＋CSS顾名思义，是把DIV与CSS样式结合在一起使用［6］141－147。使用DIV＋CSS布局网页的好处是页面的代码精简了，提高spider爬行效率，能在最短的时间内爬完整个页面。不会象Table表格那样有嵌套的问题。其次是速度提升，DIV＋CSS减少了页面代码，提高了页面加载的速度。基于XHTML标准的DIV＋CSS布局，一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合W3C标准的网站或页面，但事实证明使用XHTML架构的网站排名状况一般都不错。其次，使用DIV＋CSS布局网页，会支持各种浏览器；搜索引擎更加友好；样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。现在YAHOO，MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2．0网站，均采用DIV＋CSS的框架模式，更加印证了DIV＋CSS是大势所趋；最后就是表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。这无疑更适合于大型网站的建立。

当然，使用DIV＋CSS也有其自己的缺点。DIV＋CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了；CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹；虽然说DIV＋CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV＋CSS还没有实现所有浏览器的统一兼容；DIV＋CSS对搜索引擎优化与否，取决于网页设计的专业水平，而不是DIV＋CSS本身。DIV＋CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

5 结束语

网页布局的方式有很多，本文中提出了三种经典布局方式和一种流行布局方式，并讨论了它们各自的优缺点。指出现今框架使用的已经很少了，一般是表格和AP Div层配合使用。最后结合现实生活，道出了目前最流行的网页布局方式是DIV＋CSS，并实际罗列了DIV＋CSS之所以被广泛使用的原因，但也同时说明DIV＋CSS也有其自己的缺点。总之，在实际制作网页的过程当中，我们可以依据实际情况，选择多种网页布局的方式，尽可能地做到“兴其利，废其弊”。

［1］ 李京文．网页设计与制作［M］．北京：高等教育出版社，2007．

［2］ 温谦．边用边学Dreamweaver 8网页设计与制作［M］．北京：人民邮电出版社，2007．

［3］ 章舜钟．网页设计与制作［M］．北京：电子工业出版社，2010．

［4］ 杨纪梅，肖志强．网页设计与制作指南［M］．北京：清华大学出版社，2010．

［5］ 李峰．Dreamweaver CS4网页制作［M］．北京：电子工业出版社，2009．

［6］ 温国峰．网页设计三剑客［M］．北京：清华大学出版社，2009．

责任编辑：孟云玲

TP393．092

A

1671－8275（2011）01－0011－02

2010－11－01

李玲玲（1979－），女，安徽淮北人，淮北职业技术学院计算机科学技术系助理工程师、讲师。研究方向：计算机应用技术。