第四章 表格布局页面
4.1 表格的基本操作
4.2 使用表格的其他视图
4.3 应用实例 1
4.4 应用实例 2
4.5 应用实例 3
第一节 表格基本操作
主要内容,
（ 1） 理解单元格，表格，间距，填充，边
框。
（ 2）调整行和列的宽度、高度。
（ 3）拆分和合并单元格。
（ 4）嵌套表格
（ 5） 制作细线表格。
（ 1） 理解单元格，表格，间距，填充，边框。
居中｜插入一行一列表格，各项值如图,
插入表格,
插入表格,
插入表格,
为了便于观看填充的效果，在属性面板中，填充输入为 30。
◇填充：单元格边框和内容之间的距离就是填充。
（ 2）调整行和列的宽度
鼠标放在一列的上面，出现向下的箭头时，单击，就可以选中
一列。在属性面板中可以设置所选列的宽和高。
为列设置宽度和高度
（ 2）调整行和列的宽度
鼠标放在一行的左边，出现横向的箭头时，单击，就可以选中
一行。在属性面板中可以设置所选行的宽和高。
为行设置宽度和高度
（ 3） 拆分和合并单元格
合并单元格：按 Ctrl,点单元格，选中表格，在属性
面板中点, 合并所选单元格，使用跨度, 。
拆分单元格：在单元格中单击，选中单元格。点击属性面板中
的, 拆分单元格为行或列,,设置拆分方式。
拆分后的效果
（ 4）嵌套表格
嵌套表是在表格中的一个表格。在一个单元
格中，插入一个表格，就是嵌套表。
实例制作：基本表格的制作
（ 5） 制作流行表格
1,制作细线框表格：实质上是设置间距的大小和颜色。实例为
便于观看效果，把间距设置为 10。单元格填充和边框设置为 0。
单元格填充和边框不输入数值效果类似。
选中表格，设置表格的背景颜色为黑色。一个 10象素宽的表格
就做好了。实际上是把间距的颜色设置成了黑色。
单元格背景为白色
将表格间距改为 1后即做成细线表格
2,制作细线,
3,制作间隔表格
所谓间隔表格，就是单元格之间存在一定的距离，
看上去，每个单元格自成一体。此时要用到前面所
讲的嵌套表格。
操作方法如下,
1) 插入 2× 2表格，边框粗细为 0，单元格边距为 1，
单元格间距为 4。
2) 选择所有单元格，设置其背景色为
,#0000ff”(此为间隔表格的边框色）
3) 在每个单元格内插入 1× 1表格，宽高皆为 100%，
边框粗细为 0，间距为 0。
4) 设置内嵌套表格背景色为白色, #FFFFFF”
实战演练 流行表格制作技巧
第二节 版式设计
主要内容,
1,几种常用的版式（分栏结构）,
2,LOGO（ 标志）尺寸,
3,Banner（ 横幅）尺寸,
4,导航栏类型,
5,导航菜单位置,
6,网页内容,
7,版权声明。
网页结构分析
这是一个主页的简单结构，由
三个表格组成。
?第一个表格，二行一列，
第一行放 LOGO和 Banner,
第二行放导航菜单。
?中间一个表格，一行二列，
里面再分别插入两个表格，
左边表格放导航或者图片，
右边表格放网页内容。典型
的二分栏结构。
?下面一个表格，一行一列，
放版权声明。
表格 3
表格 1
表格 2
常见的分栏结构，还有三分栏，四分栏。下面是
一个三分栏的结构,
一、页眉区设计
几种国际尺寸的 Banner,468× 60(全尺寸
Banner),392× 72（ 全尺寸带导航条
Banner）,234× 60（ 半尺寸按钮）。
LOGO,167× 71
导航栏形式
导航栏在网页的设计中，直接关系到使用网页
的方便，和整个网页的美观也有很大关系。
导航栏有
? 横排的
? 竖排的
? 也有两种都有的。
例如,
V6艺术精英
http://www.v6
dp.com/
这个站点页面采
用的是百分比，
在任何电脑上显
示都是全屏幕的。
横排的
如,
三星电子
http://ww
w.isamsun
g.com.cn/
另外这个站
点 LOGO在
右上角。
竖排的有,
横排坚排均
有的：联想
http://ww
w.legend.c
om/联想的
菜单栏还使
用了弹出式
菜单。
表格初始设置
1,做一个在 800× 600分辨率下满屏幕显示的
页面，可以大致选择一个近似的值：, 宽
768高 430”,, 宽 776高 430” 等。
2,用像素为单位的表格，大多是把表格设置为
居中对齐。选中表格，在属性面板选择对齐
方式为居中对齐。
完全下载一个表格的内容，才能在 IE中显示出来。
如果页面文件小，可以只有一个表格放内容。
如果页面文件很大,则 从上到下放几个宽度相同的表
格，分别放不同的内容,如图所示
第三节 布局视图的使用
在 Dreamweaver MX中，可以在表格中添
加内容，但是内容只是在表格的中间出现。
这时需要从标准视图切换到布局视图，精确
定位网页内容。
点, 布
局, 切
换到布
局视图
一、创建布局表格和布局单元格
在页上绘制布局单元格和布局表格。当您不在布局
表格中绘制布局单元格时,Dreamweaver 会自动
创建一个布局表格以容纳该单元格。布局单元格不
能存在于布局表格之外。
1,单击插入栏, 布局, 分类中的, 绘制布局单元格,
按钮，拖动指针以创建布局单元格。 Ctrl＋, 绘
制布局单元格, 连续创建布局单元格。
2,单击插入栏, 布局, 分类中的, 绘制布局表格,
按钮,拖动指针以创建布局单元格。 Ctrl ＋, 绘
制布局表格, 绘制多个布局表格 。
3,绘制嵌套布局表格：将一个布局表格绘制在另一
个布局表格中，创建嵌套表格。
二、在布局单元格中添加内容
绘制好布局之后，可以在布局单元格中插入
文本、图像等内容。在布局表格的空白区域
中不能插入内容。
当插入的内容较大时，布局单元格会自动延
展以容纳这些内容，但是，周围单元格的大
小会受到影响。
三,移动布局单元格和表格及调整它们的大小
调整布局单元格的大小：, 选择一个单元格，
按住 Ctrl 键的同时单击该单元格中的任何位
置，该单元格周围出现选择控制点。拖动选
择控制点来调整单元格的大小。
三,移动布局单元格和表格及调整它们的大小
移动布局单元格, 按住 Ctrl 键的同时单击该单元格
中的任何位置,将该单元格拖到其布局表格中的另一
个位置。按箭头键每次移动 1 个像素。 Shift ＋箭头
键每次移动 10 个像素。
三,移动布局单元格和表格及调整它们的大小
调整布局表格的大小, 通过单击表格顶部的标签选择
一个表格。该表格周围出现选择控制点。拖动选择控
制点来调整表格的大小。
三,移动布局单元格和表格及调整它们的大小
移动布局表格, 通过单击表格顶部的标签选择一个表
格。该表格周围出现选择控制点。 将表格拖到页上
的另一个位置。 (只有当布局表格嵌套在另一个布局
表格中时，才可以移动该布局表格 )。
四、设置列宽
如果在单元格中插入了一个大于单元格宽度
的图像，在布局标题上就有两种大小
四、设置列宽
选择使单元格宽度一致
四、设置列宽
设置列宽度为自动伸展：在一行中，最好只
选择最右边的一列为自动伸展。选中一列的
标题区域，选择, 列设置为自动伸展,
如果是第一次设置自动伸展，就会出现, 选择
间隔图像, 对话框，选择, 创建间隔图像文
件, 。
第四节 表格制作实例
信息区为
三个嵌套
的表格
其他区均
为宽度一
致的独立
表格
页眉区
导航栏区
左信息
区 中信息区
右信息
区
版权区
网页结构分析
一、设计页眉区
T1,3× 3表 宽 778 页面属性：左、上边距
均为 0
可插入固定大小占位符，以方便排版。
网站 Logo图标 网页广告图像
设为首页
联系我们
加入收藏
167× 71 499× 71 默认
二、设计导航栏区
T 2,2× 17表 宽 778
栏目间的分隔符用｜，也可用其他特殊符号。
第二行用于间隔。
| 主站首页 | 站长简介 | 音乐古堡 | BEYOND | 星爷专辑 | 友情链接 | 给我留言 | 疯狂下载 |
三、设计信息区
T3,1× 3表 宽 778
1.设置左右内容区
? T31,2× 1表，宽 100%，表格边框为 1，白色。
第 1格高 15，第 2格高 163，单元格边框为 1，绿色。
第 1格：背景图像，输入栏目名
第 2格：输入栏目的具体内容
? 复制 T31表至左、右内容区。
181 411 156
三、设计信息区
2.设计主内容区
? T32,2× 3表，宽 100%，边框为 0，边距为 0，间
距为 0
? 第一行：设置各单元格背景图像，输入栏目名称
? 第二行：合并第二行
? T321,在第二行插入 1× 1表，宽 100%，边框为 1，白色，
单元格边框为 1，绿色。
? 拆分 T321为 2列，第一列输入具体内容，第二列设置
132× 145的图像占位符。
? 复制和 T32表，更名，并添加内容
181 411 156
四、设计版权区
T4,2× 1表，宽 778，边框为 0，边距为 0，
间距为 0
? 第一行：插入水平线
? 第二行：输入相关版本信息
版权所有,Copyright? 2003-2005 All rights reserved
网页制作：青岛大学软件学院 E-mail:qdgzy@163.com
邮编,266061 建议使用 800× 600分辨率
