浅谈网页制作中table与div方法布局网页框架的利和弊

浅谈网页制作中table与p方法布局网页框架的利和弊

黄颖杰

黄颖杰（湖南水利水电职业技术学院）

摘要：本文从网络的发展以及现在网页制作规范对网页设计师的要求，根据网页的特点出发，通过dreamweaver8.0从table与p两种布局制作网页框架的方法以及浏览效果方面分析比较了网页制作中这两种方法布局网页的优点与缺点，并且总结了他们各自应用的范围。

关键词：网页制作表格pdreamweaver8.0网页框架利与弊

0引言

随着信息时代的发展，web技术的一天天成熟，如何制作出一个符合规范，美观又浏览速度快的网页已经越来越成为一个网页设计师所要考虑的重点了。过去的网页设计师只需考虑网页前台美工处理，然后切片形成网页即可，而自从CSS层叠式样式表诞生后，网页排版成为了一个新的网页技术研究的领域。在制作网页中，我们布局网页的方法一般有两种，第一种是使用table（表格）来布局网页，另一种是使用p容器来布局网页。下面我们就一个实例来讲解这两种方法来布局网页的操作步骤，以及比较两种方法的优点和不足之处。

1网页布局的两种方法

方法一：使用table表格制作网页框架。具体操作步骤如下：

第一步，打开dreamweaver8.0软件，数好目标表格的行和列（从最小的格子数起）点击插入菜单中的表格项，然后打开下面的属性面板

第二步，将第一行的三列合并，第三行的三列合并。

第三步，合并后，一定要严格定义好每行的高度，其次一定要定义好第二行每个单元格的宽度，注意三个单元格的宽度之和应该是表格的总宽度。

第四步，将总表格居中对齐，设置好表格的边框颜色以及每个单元格的底纹，即可。

这样，一个通过表格制作的网页框架就做好了，表格的每个单元格就可以存放图片、文字、动画等等了。

方法二：通过p容器来制作网页框架。具体步骤如下：

第一步，新建一个dreamwer文件，点击插入菜单中的插入布局对象中的p标签，点击确定；

第二步，新建CSS样式

新建完后将CSS样式的边框、底纹以及高度和宽度设置好。这样就设置好了顶部单元格。

设置好所有的css属性后，点击dreamweaver的编辑窗口p标签，点击如图5属性栏中的pID应用即可。

第三步，使用相同的方法继续插入布局对象中的p标签，第二行插入p应注意，首先插入一个大的p容器，然后在里面插入左中右三个p，定义好每个p的宽度后，注意左边和中间的p容器的css代码必须写入：float:left；否则p容器是无法形成横排的

第四步，使用相同的方法插入底部的第六个p容器。保持与上面容器宽度一致，同时在css代码中将每个p容器的底纹和边框设置好。

2总结网页布局的两种方法的优点与不足之处

使用table表格来布局网页框架的优点：制作方法直接，直接通过插入菜单中插入以及属性栏中设置所有的操作即可，无需定义CSS样式；制作的速度快。缺点：由于html文件中的table标签的浏览速度较慢，所以，使用嵌套表格的方法来布局网页框架会使网页浏览的速度变慢。

使用p的方法布局网页框架的优点：可以通过css样式给框架进行功能强大的属性设置以及给网页的局部进行任意的定位，制作出来的页面浏览速度较快，同时页面的风格可以通过修改单独的css文件进行随意的修改和更新；缺点：每个p容器都需要定义css样式来控制，制作过程相比table方式要复杂。现在的网页越来越倾向于使用p的方法来布局网页了。

3table与p方法布局网页框架的应用

table方法布局网页主要应用在功能较为简单、页面不多的网站中；而p主要应用于大型的网站页面设计中。

4总结

本文通过dreamweaver8.0从table与p两种方法来布局制作网页框架的操作步骤以及浏览效果方面分析比较了网页制作中这两种方法布局网页的优点与缺点，并且总结了他们各自应用的范围。