网页布局技术初探
作者： 徐曼摘 要：随着网络的飞速发展，网页设计技术也变得很热门。那么一个好的网页作品首先应在布局上有特色、有美感。本文从网页布局角度分析介绍了DW中经常使用的几种布局方法，指出了布局技术的发展方向。
关键词：网页布局； 表格； 框架； 层； DIV+CSS
中图分类号：TP39 文献标识码：A 文章编号：1006-3315(2011)4-176-001
一、引言
设计网页的第一步就是设计版面布局。网页设计者能够把各种内容进行合理的安排，给浏览者以赏心悦目的感觉，这样才能达到内容与形式的完美结合，增强网站的吸引力。
因此说，设计网页不但是一项技术性的工作，它还是一项艺术性的工作，要求设计者有较高的艺术修养和审美情趣，这样才能设计出高水平的网页来。网页的排版布局就是决定你的网站美观与否的一个重要方面。
二、网页排版布局的步骤
1．方案设计
首先根据自己网站的内容，结合其它优秀的网站确定自己网站的整体风格，其中包括网页的结构，色彩以及需要的各种素材。也就是说我们需要在一张白纸上，尽可能的发挥想象力，将自己的创意用一只铅笔勾勒出来。
2．准备初步填充的内容
在第一步的基础上，把需要的功能模块安排到页面上，这里主要是指网站的标志、主菜单、新闻、搜索、友情链接、广告条、版权信息等。这时我们一定要注意我们网站的主要内容是什么，避免添加太多的杂碎内容，一定要主次分明。
3．技术设计
在初步设计的基础上，应用各种网页设计技术，首先进行布局，然后进一步解决各部分的技术问题。这其中需要对网站的logo、背景图、题头等部分进行设计，然后把他们放到确定的位置上，这样一个网页的布局基本上就完成了。
4．定案设计（逐步细化）
最后的调整阶段，将页面布局精细化、具体化。经过不断的尝试和修改，使网页逐步完善。
三、网页布局的技术
1．表格规划网页
表格是用于在HTML页上显示表格式数据，以及对文本或图形进行布局的强有力工具。在DREAMWEAVER中，为了版式的安排，都是通过加入大量的表格来进行定位的，有些人甚至在大表格中嵌套多重的小表格。这实质上也是加大浏览器的负担，使页面呈现时间大大加长。因此。在使用表格时，应尽量把表格打散，并要尽可能地避免表格的层层相套。
2．用图层进行布局设计
图层（layer）是HTML内容的容器，通常由
例如：单击对象面板中的层按钮，在起点处插人一个新层，然后在层中插入需要移动显示的内容，插入一幅图片。选中图层，执行“Window/Timeline”命令打开Timeline时间轴编辑窗口，右键单击第一帧，在快捷菜单中执行“Add Object”命令，产生一个15帧的动画。选择第15帧，拖拽图层到路径终点位置释放，这样一个简单的移动路径就制作完成了。此时移动路径是一条两点间的直线，如果要让路径变成平滑的曲线，可以在Timeline中添加关键帧，在添加关键帧位置右击，然后选择“Add Keyframe”命令，拖动图层对象，此时路径就变成弯曲的了。
3．利用框架进行布局
框架是在同一浏览器页面中显示多个相互隔离的HTML页面的结构，它是一种全新的组织网页的方法。使用框架集时既可以使用DW提供的框架集，也可以自己创建所需要的页面结构。
网页设计时，往往我们希望自己的网页中的一部分内容保持不动（例如导航部分）,而其他部分内容发生变化。例如一个网页中有左右两个框架，一个是导航菜单，一个是主视图。我们希望单击导航菜单，而主视图中的内容根据导航菜单的选择而改变。这时，我们只要改变链接的“目标”属性，将目标更改为主视图框架的名称即可。
四、CSS+DIV布局
作为一种新的网页设计技术快速的流行起来，说明该技术与传统的网页布局显示设计技术比较起来优势是十分明显的。如今大部分网站仍然采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比较熟悉、容易上手，但是，它却阻碍了一种更好的、更有亲和力的、更灵活的，功能更强大的网页设计方法——CSS+DIV。
根据新的Web标准，采用DIV+CSS的网页布局方案，可以把“内容”放在DIV（Division，区块）中，结构由DIV产生，最后使用CSS（Cascading Style Sheet，层叠样式表）来进行“表现”重构网站布局，
DIV+CSS的布局方法是基于盒模型的概念，可以把每个DIV块看成是一个盒子，盒子里面的东西和盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图所示。
用DIV+CSS设计思路是这样的：
（1）用DIV来定义语义结构；（2）为这个CSS定义的盒子内加上内容，如文字、图片等；（3）最后用CSS来美化网页，如加入背景、线条边框、对齐属性等；
CSS样式表可以用于HTML中3个不同的层次：local(定义一个页面的局部)，global(定义整个页面)和linked(定义多个页面)。为了使浏览器意识到CSS样式表的存在，必须用特定的方法将CSS样式表加入到HTML文档中去，概括起来可以分为外部引用、内部引用和局部引用三种。其中，链接外部CSS样式文件是使样式表功能发挥得最淋漓尽致的方法。
撇开网页布局的艺术性和创造性，光从技术应用的角度来谈网页布局当然会具有片面性,但是CSS和DIV的应用将带来的网页布局技术元素是不可小觑的，并且作为设计者结合多种软件对网页布局进行设计是有必要的。我想，随着网络的发展，在不久的将来，布局的技术将变得更简单，更实用。
参考文献：
[1]姜韡，吴涛．网站全程设计技术.清华大学出版社.北京交通大学出版社
[2]陈月波．网页设计，电子工业出版，2007