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

1/4浅谈网页制作中TABLE与DIV方法布局网页框架的利和弊摘要本文从网络的发展以及现在网页制作规范对网页设计师的要求，根据网页的特点出发，通过从TABLE与DIV两种布局制作网页框架的方法以及浏览效果方面分析比较了网页制作中这两种方法布局网页的优点与缺点，并且总结了他们各自应用的范围。关键词网页制作表格DIV网页框架利与弊0引言随着信息时代的发展，WEB技术的一天天成熟，如何制作出一个符合规范，美观又浏览速度快的网页已经越来越成为一个网页设计师所要考虑的重点了。过去的网页设计师只需考虑网页前台美工处理，然后切片形成网页即可，而自从CSS层叠式样式表诞生后，网页排版成为了一个新的网页技术研究的领域。在制作网页中，我们布局网页的方法一般有两种，第一种是使用TABLE来布局网页，另一种是使用DIV容器来布局网页。下面我们就一个实例来讲解这两种方法来布局网页的操作步骤，以及比较两种方法的优点和不足之处。1网页布局的两种方法方法一使用TABLE表格制作网页框架。具体操作步骤如下2/4第一步，打开软件，数好目标表格的行和列点击插入菜单中的表格项，然后打开下面的属性面板第二步，将第一行的三列合并，第三行的三列合并。第三步，合并后，一定要严格定义好每行的高度，其次一定要定义好第二行每个单元格的宽度，注意三个单元格的宽度之和应该是表格的总宽度。LOCALHOST第四步，将总表格居中对齐，设置好表格的边框颜色以及每个单元格的底纹，即可。这样，一个通过表格制作的网页框架就做好了，表格的每个单元格就可以存放图片、文字、动画等等了。方法二通过DIV容器来制作网页框架。具体步骤如下第一步，新建一个DREAMWER文件，点击插入菜单中的插入布局对象中的DIV标签，点击确定；第二步，新建CSS样式新建完后将CSS样式的边框、底纹以及高度和宽度设置好。这样就设置好了顶部单元格。设置好所有的CSS属性后，点击DREAMWEAVER的编辑窗口DIV标签，点击如图5属性栏中的DIVID应用即可。第三步，使用相同的方法继续插入布局对象中的3/4DIV标签，第二行插入DIV应注意，首先插入一个大的DIV容器，然后在里面插入左中右三个DIV，定义好每个DIV的宽度后，注意左边和中间的DIV容器的CSS代码必须写入FLOATLEFT；否则DIV容器是无法形成横排的第四步，使用相同的方法插入底部的第六个DIV容器。保持与上面容器宽度一致，同时在CSS代码中将每个DIV容器的底纹和边框设置好。总结网页布局的两种方法的优点与不足之处使用TABLE表格来布局网页框架的优点制作方法直接，直接通过插入菜单中插入以及属性栏中设置所有的操作即可，无需定义CSS样式；制作的速度快。缺点由于HTML文件中的TABLE标签的浏览速度较慢，所以，使用嵌套表格的方法来布局网页框架会使网页浏览的速度变慢。使用DIV的方法布局网页框架的优点可以通过CSS样式给框架进行功能强大的属性设置以及给网页的局部进行任意的定位，制作出来的页面浏览速度较快，同时页面的风格可以通过修改单独的CSS文件进行随意的修改和更新；缺点每个DIV容器都需要定义CSS样式来控制，制作过程相比TABLE方式要复杂。现在的网页越来越倾向于使用DIV的方法来布局网页了。TABLE与DIV方法布局网页框架的应用4/4TABLE方法布局网页主要应用在功能较为简单、页面不多的网站中；而DIV主要应用于大型的网站页面设计中。总结本文通过从T