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

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