第2课 布局页面结构本章要点 具体要求 本章导读 上机练习

Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程

本章要点使用表格进行布局 使用层进行布局 使用框架进行布局

Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程

具体要求了解各种布局工具 掌握表格的操作 掌握层的操作 掌握框架的操作

Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程

本章导读页面的布局对于网页制作来说很重要，在进行 布局时可使用表格、层和框架等网页布局工具， 使页面布局更合理、更美观。表格、层和框架 各有优点、缺点，在布局页面时应结合使用多 种布局工具，设计出理想的页面。 “亘”字型网页布局结构：适合内容较少、整个 站点页面内容相似的网站。 “目”字型布局结构：该结构页面信息量大，一 般应用于大型网站。 “匚”右框型布局结构：这种布局方式在网页制 作中较为广泛，初学者容易上手。Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程

2.1 使用表格进行布局页面布局是网页制作的宏观设置，使用表 格进行页面布局是其中最常用的手段。

Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程

2.1 使用表格进行布局2.1.1 知识讲解 2.1.2 典型案例——利用表格对页面进行 布局

Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程

2.1.1 知识讲解表格是页面布局时非常有用的设计工具。 利用表格布局页面，可以定位页面上的文 本和图像等。

Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程

2.1.1 知识讲解1.插入表格 2.设置表格属性 3.设置单元格属性

Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程

1.插入表格表格的作用是使页面中的元素更有条理， 插入表格的具体操作步骤如下：1)将光标插入点定位到所需位置。 2)选择【插入】→【表格】命令或在“常用” 插入栏中单击“表格”按钮 ，打开“表格” 对话框。 3)在该对话框中可进行表格行数、列数、表 格宽度、边框粗细、单元格边距等属性设置。 4)单击 按钮即可按设置创建表格。Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合

一培训教程

2.设置表格属性选中表格后其“属性”面板，在其中可进 行表格的属性设置，各项参数的含义如下。

Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程

2.设置表格属性“表格Id”下拉列表框：为表格进行命名。 “行”和“列”文本框：设置表格的行数和 列数。 “宽”和“高”文本框：设置表格的宽度和 高度，在其后的下拉列表框中可选择单位， 如像素和百分比。 “填充”文本框：设置单元格边界和单元格 内容之间的距离。 “间距”文本框：设置相邻单元格之间的距 离。Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程

2.设置表格属性“对齐”下拉列表框：设置表格与文本或图 像等网页元素之间的对齐方式，只限与表格 同段落的元素。 “边框”文本框：设置表格边框的粗细。 “边框颜色”文本框：设置表格边框的颜色。 “背景颜色”文本框：设置表格的背景颜色。 “背景图像”文本框：设置表格背景图像， 单击文本框右侧的“浏览文件”按钮 ，可 在打开的“选择图像源文件”对话框中选择 背景图像。Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程

2.设置表格属性 按钮：单击该按钮可删除表格的列宽值。 按钮：单击该按钮可删除表格的行高值。 按钮：单击该按钮可将表格宽度单位从浏览 器窗口的百分比转换为像素。 按钮：单击该按钮可将表格宽度单位从像素 转换为百分比。 按钮：单击该按钮可将表格高度单位从浏览 器窗口的百分比转换为像素。 按钮：单击该按钮可将表格高度单位从像素 转换为百分比。Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程

3.设置单元格属性除了可以设置整个表格的属性外，还可以 对表格的单元格、行或列的属性进行设置。 选中要设置属性的单元格、行或列。 其中的设置与表格属性的设置大致相同， 需要说明的是在“水平”下拉列表框中可 选择单元格文本在水平方向上的对齐方式， 在“垂直”下拉列表框中可选择单元格中 的文本在垂直方向上的对齐方式。Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程

2.1.2 典型案例——利用表格对页面进行布局

本案例主要练习利用表格对页面进行布局。 顶部单元格来添加Banner(网页宣传内容) 和LOGO(网站标志),左侧单元格用于 添加导航条，中央单元

格和右侧单元格用 于添加网页内容，底部单元格用于添加底 部信息。 素材位置：【\第2课\素材\】 效果图位置：【\第2课\源文件\biaoge.htm】 制作思路：Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程

案例目标1)创建一个3行3列的表格。 2)然后对其进行单元格高度的调整，并进行 单元格的合并操作。 3)然后为单元格添加背景。

Dreamweaver,Flash,Fireworks网页制作三合一培训教程 Dreamweaver,Flash,Fireworks网页制作三合一培训教程