Dreamweaver网页设计中表格与层布局的比较

摘 要 表格和层布局是Dreamweaverm网页设计中网页布局的两种基本方法，二者各有自己的特点。使用表格布局可以方便规范整个页面，组织各种页面元素有条理统一，使用层布局可以利用层的重叠、移动、隐藏，丰富页面效果。

关键词 Dreamweaver 表格 层 布局

中图分类号：TP39 文献标识码：A

2016年1月22日，中国互联网络信息中心（CNNIC）发布第37次《中国互联网络发展状况统计报告》（以下简称为《报告》）。《报告》显示，截至2015年12月，中国网民规模达6.88亿，互联网普及率达到50.3%，半数中国人已接入互联网。同时，移动互联网塑造了全新的社会生活形态，“互联网+”行动计划不断助力企业发展，互联网对于整体社会的影响已进入到新的阶段。

浏览网页已经成为现代社会人们生活中不可或缺的重要部分。网页作为信息在网络传播中的主要载体，人们除了关心里面的内容以外，对它的版面设计也非常关注。如何将所有的文字、图片、动画等页面元素按照设计要求精美地排列在页面中，即网页如何布局，是网页设计的重点和关键所在。

利用Dreamweaver进行网页设计时，基本的布局方法是使用表格和层。这两种方法在页面布局时各有自己的特点。

表格是网页设计制作时不可缺少的重要元素，既可以单纯地转二维数据，又可以用来组织页面内容，将不同的页面元素放置在不同的表格或单元格里，以简洁明了的方式将各种页面元素井然有序地显示在页面中，并且可以设计出布局合理、结构协调、美观匀称的网页。

使用表格布局页面时，定位各种页面元素过程简单，用户在页面上方便地绘制布局单元格，并能够灵活的将其移动到所需位置。使用多个布局表格可以将页面布局分隔成多个区域，每个区域相对独立，当对某一个区域进行编辑时，不会影响其他区域。利用布局表格，用户可以快捷制作出结构复杂的版面。

使用表格布局，用户还可以创建固定宽度的布局和自动伸展为整个浏览器窗口宽度的布局，因此兼容不同平台、不同分辨率的浏览器。

表格布局比较规范、整体性强，表现得中规中矩，不太有其他丰富功能。

有些人在网页设计时喜欢整个页面使用一个大表格，然后在大表格中再嵌套小表格，使得浏览器在打开这个大而长的表格时只能等待整个表格的内容都接收完后才显示，从而增加了浏览器的负担。

网页中的层就是网页内容的一个容器，使用层可以灵活放置网站内容，层中放置各种页面元素，甚至还可以嵌套层。层也是一种网页元素定位技术，使用它可以以像素为单位精确定位页面元素。层最主要的特性就是可以在网页中自由浮动，可以放置在页面的任何位置上。层的位置可以重叠、显示与隐藏、与时间轴结合，可用来控制元素的显示顺序，还可用来制作网站的部分重叠效果，使页面有丰富变化。

层布局的灵活性同样也体现了一定的不稳定性。通常情况下，层加入到页面中是游离的，虽然移动方便，但在页面中的位置是固定的，因此当浏览器窗口变化时，层还在原位，没有跟着相对位移，因此会出现位置上的偏差。

CSS样式大多用于控制层的排版布局，一般使用外部CSS文件重用。统一使用一个外部CSS样式表文件，可以实现“一改全改”的效果，维护成本低。但一个网站所有页面在加载时都要访问同一个文件，后台支撑成本无形中提高、服务器消耗增加。

目前，浏览器的种类很多，版本也很多。对于CSS（样式表）并不是所有浏览器的所有版本都支持的很好，这就使得在页面制作的过程中需要针对不同浏览器版本进行测试，以保证兼容性，无形中增加很多工作量。

很多情况下，可以同时使用表格与层混合搭配进行布局。先使用多个上下关系的表格进行页面的整个布局，再使层成为单元格的一个元素，既利用表格的整体规范性使整个布局规范，又利用到层的灵活性和丰富功能，从而使页面设计更加精彩。

网页设计中，好的网页内容还要结合精美的网页布局。页面布局合理、有新意，才能完美展现网页内容，才能在浏览者处加分，引起浏览者的兴趣和共鸣。

作者简介：刘珍，（1972-），硕士，研究方向为计算机应用。

参考文献

[1] 文杰书院.DreamweaverCS5[M].清华大学出版社，2011（01）.

[2] 李爱军.网页的排版布局[J].办公自动化：综合版，2009（7）：29-30.

[3] 王瑄.探讨Dreamweaver中层的应用[J].科技信息，2011（2）：261-261.