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