Dreamweaver MX的页面排版

　　设计精美的网站，都是采用了优秀的版式设计。做一个网页，先要规划好版式。本篇主要介绍制作网页时的版式设计。

主要内容：

几种常用的版式（分栏结构），LOGO（标志）尺寸，Banner（横幅）尺寸，导航栏类型，导航菜单位置，网页内容，版权声明。

　　以上是一个主页的简单结构，由三个表格组成。第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。

　　中间一个表格，一行二列，里面再分别插入两个表格，左边表格放导航或者图片，右边表格放网页内容。典型的二分栏结构。

　　下面一个表格，一行一列，放版权声明。

　　几种国际尺寸的Banner：468×60(全尺寸Banner)，392×72（全尺寸带导航条Banner），234×60（半尺寸按钮）。LOGO: 88×31

　　实际中Banner和LOGO尺寸是根据设计需要选择大小，并不受标准的限制。常见的LOGO在页面的左上方，Banner在页面的右上方。也有相反的例子。例如三星电子http://www.isamsung.com.cn/ ，说明在设计时，并不受什么标准的限制。

　　常见的分栏结构，还有三分栏，四分栏。下面是一个三分栏的结构：

　　最下面的表格，一行一列，放版权声明，联系方式。

　　导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。

　　如果是以内容为主的网页，直接放入文字作为栏目，以键盘上的“|”分隔，一行一列的表格，如果栏目多，可以变成二行一列的表格。常见于门户网站，如http://www.163.com
　　
　　如果内容很多，兼顾美观，推荐使用弹出式菜单，在Dreamweaver MX中文版中可以直接做出弹出式菜单，不象以前的版本那么复杂，将在以后的文章中介绍。

　　如果是个人网站，内容较少，可以使用尺寸较大的图片作菜单，应用CSS滤镜后，可以有很好的效果。

　　现在最流行的就是Flash导航菜单了，晃到一个按钮上时，有动画有声音，效果非常好。但是在没有装Flash播放器的电脑上，不能显示。

　　现在国内使用较多的是使用按钮做导航。

　　在Dreamweaver MX中文版提供了直接制作Flash按钮的功能，输入文字就可以做出中文的Flash按钮。

　　导航栏有横排的、竖排的，也有两种都有的，横排的例如:V6艺术精英http://www.v6dp.com/这个站点页面采用的是百分比，在任何电脑上显示都是全屏幕的。

一、点“布局” 切换到布局视图

在布局视图中，您可以在页上绘制布局单元格和布局表格。当您不在布局表格中绘制布局单元格时，Dreamweaver 会自动创建一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。

单击插入栏“布局”分类中的“绘制布局单元格”按钮

将鼠标指针放置在页上要开始绘制单元格的位置上，然后拖动指针以创建布局单元格。若要创建多个单元格而不用每次都单击“绘制布局单元格”按钮，请按住 Ctrl 键并拖动指针来创建每个布局单元格。

绘制一个布局表格: 单击插入栏“布局”分类中的“绘制布局表格”按钮, 将鼠标指针放置在页上，然后拖动指针以创建布局表格。若要绘制多个布局表格而不必重复单击“绘制布局表格”按钮，请在单击“绘制布局表格”按钮时按住 Ctrl 键。

绘制嵌套布局表格：将一个布局表格绘制在另一个布局表格中，创建嵌套表格。单击插入栏“布局”分类中的“绘制布局表格”按钮。鼠标指针变为加号 (+)，指向现有布局表格中的空白（灰色）区域，然后拖动指针以创建嵌套布局表格。

转换到标准视图下的表格

将内容添加到布局单元格中：在布局单元格中输入文字。单击插入栏“常用”类别中的“插入图像”按钮插入图像。

调整布局单元格的大小: 选择一个单元格，按住 Ctrl 键的同时单击该单元格中的任何位置，该单元格周围出现选择控制点。拖动选择控制点来调整单元格的大小。

移动布局单元格: 按住 Ctrl 键的同时单击该单元格中的任何位置, 将该单元格拖到其布局表格中的另一个位置。按箭头键移动该单元格，每次移动 1 个像素。在按住 Shift 键的同时按箭头键移动该单元格，每次 10 个像素。

调整布局表格的大小: 通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。拖动选择控制点来调整表格的大小。

移动布局表格: 通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。 将表格拖到页上的另一个位置。(只有当布局表格嵌套在另一个布局表格中时，才可以移动该布局表格)。

如果在单元格中插入了一个大于单元格宽度的图像，在布局标题上就有两种大小，

选择使单元格宽度一致。

设置列宽度为自动伸展：

设置列宽度为自动伸展的意义：把一行中的一列设置为自动伸展，可以使这行始终在访问者浏览器窗口整个宽度显示。自动伸展列的宽度随着浏览器窗口的宽度自动变化。

自动伸展列的列标题区域显示波浪线而不是数字。

在一行中，最好只选择最右边的一列为自动伸展。选中一列的标题区域，选择“列设置为自动伸展”

如果是第一次设置自动伸展，就会出现“选择间隔图像”对话框，选择“创建间隔图像文件”。

按确定按钮，自动会有一个spacer.gif文件，选择保存。

自动伸展列的标题区域显示波浪线，一个自动伸展列就做好了。