浅谈Dreamweaver CS6中网页布局的三种方式

李爱红

摘要：网页设计的关键之一在于网页的布局，好的布局不仅能体现设计者的奇思妙想，更能让浏览者眼前一亮，从而提高网页的访问量。Dreamweaver CS6中提供了多种网页布局的方法，其中以表格、框架及AP Div为最常用的三种方式。该文分析说明了目前常用的三种布局方式：表格、框架和AP Div方式，并对三种方式进行了详细的比较。

关键词：Dreamweaver CS6；表格；框架；AP Div

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2018）22-0288-02

1 网页布局的基础知识

在工作、学习和娱乐中，我们上网时会发现网页具有感染力，有的网页给人干净整洁的感觉，有的网页优雅高贵，有的网页给人以爽朗、清凉的感觉，还有的网页使用植物的色彩，使人想到健康、和谐。这些是由网站的风格决定的。

1.1 网站的风格

在对网页插入各种对象、修饰效果前，一定要确定网站的风格和网页的布局。也就是说，要先确定网站的总体风格，并对网页的布局进行规划，这样才能保证网站中各网页的统一。

1.2 网页的布局

在确定网站的风格后，要对网站的总体布局进行规划调整，也就是网页上的网站标志、导航栏、菜单栏等元素的位置确定，不同风格网页的網页元素所处的位置也不同。

1.3 配色方案

网页的布局没有优劣之分，要与网站的风格相适应，就必须注意整个站点的平衡性、对称性、对比性、疏密度、反复性、韵律感和颜色搭配等。根据色彩要素，结合色彩的感觉，应用色彩的搭配原则，展现不同网站类型的配色。

2 常用的网页布局方式

在网页布局中有三种方法，一种是利用表格进行网页布局排版，一种是利用框架进行网页布局排版，还有一种是使用AP Div排版布局页面。下面就对常用的三种方法进行分析和说明。

2.1 表格排版网页布局

表格是网页设计中常用的方法，在表格中可以定位文字、图像、动画等网页元素，还可以对数据进行排列，在内容和形式上使网页整体条理清晰。在Dreamweaver CS6中，常用的表格标记由表格标记、行标记和单元格标记三部分组成。表格标记：

…，行标记：… ，单元格标记：…

使用表格排版的网页，网页的浏览效果不会受计算机分辨率的影响，但使用表格布局的网页在浏览器中显示时等所有的内容下载完成后才可呈现完全，也就是表格里的内容较多时，浏览者要等很长时间才能看到网页的内容，这显然影响网页的浏览率。为了解决这个弊端，可以采用多表格的方法来处理，这样每个表格的内容都不多，哪个表格的内容先下载，哪个表格就显示。

2.2 利用框架制作网页

网站由许多网页组成，这些网页中的一些内容经常是相同的，对于网页中重复的内容，如果不想重复制作，可以采用框架来解决这个问题。

在学习表格时，用表格规划的网页，在显示时速度的快慢与表格的大小有很大关系。采用框架的好处是可以在一定程度上解决这个问题，它将页面分成两个或两个以上的部分，各部分既相互独立，又可以相互链接，当我们打开网站内的超链接时，只需要更新不一样的部分，而不必将整个内容重新下载一遍；框架还有另一个好处是每一个框架都有滚动条，浏览者可以独立滚动每一个框架进行浏览。

但框架具有的缺点也同样明显，比如：并不是所有浏览器都提供良好的框架支持，难以实现不同框架中各元素的精确图形对齐。

2.3 使用AP Div布局网页

Div也称Div标签，是一种区隔标记，它的作用是可以将页面分割为不同的区域，与表格不同，Div作为一种结构化元素是不显示在浏览器中的，但在网页设计时，Div可以让设计者非常方便地完成网页的布局设计。

AP Div是一种绝对定位元素，也就是说这个Div标签的位置是绝对的。一旦设置了，不随网页布局的改变而改变位置。可以把AP Div视为墙上的一个画框，这个画框位置可以随便放置，而且画框里可以放置任意元素，但AP Div与普通画框不一样的地方在于它能嵌套其他的AP Div，能重叠，从而实现网页对象的立体化等特效。

网页设计中元素的位置合理，才能搭建出好的页面结构，通常使用CSS+Div对页面进行布局。使用Div对页面整体进行规划，可以将整个页面进行

标记的分块，然后通过元素的定位，利用float进行元素左右浮动定位，利用position进行相对定位，和利用Z-index调整定位时重叠块的上下位置，最后在各个块中添加相应的内容，这样页面元素在控制和更新起来十分容易，同样修改CSS的属性也很方便。

3常用三种布局方式的创建方法

3.1表格的创建

在Dreamweaver CS6中，创建表格的具体步骤：

（1）在文档窗口中，将光标定位到要插入表格的位置

（2）执行以下操作之一，打开“表格”对话框（Ctrl+Alt+T组合键）

（3）在“表格”对话框中进行相应设置，单击“确定”按钮，即可创建一个表格。

方法一：“插入—表格”命令 方法二：“表格”按钮 方法三：快捷键

3.2框架的创建

在Dreamweaver CS6中，打开需要应用到预定义框架集的文档，选择“插入—HTML—框架”子菜单中的相应命令，指定预定义的框架集，打开“框架标签辅助功能属性”对话框，保持默认设置，单击“确定”按钮，Dreamweaver将自动设置所选择的框架集。

3.3AP Div的创建

参考文献：

[1] 奎晓燕，贾楠.边做边学 Dreamweaver CS6 网页设计案例教程[M].人民邮电出版社，2015.

[2] 唐琳，孟祥丽，李少勇.Dreamweaver CS6标准教材[M].北京希望电子出版社，2013.

[3] 黄洪杰，杨军.网页制作基础教程》（Dreamweaver CS6版）[M].电子工业出版社，2013.

[4] 杨杰.Dreamweaver CS6 网页设计与制作[M].电子工业出版社，2016.

【通联编辑：代影】