布局大师——表格.

Presentation on theme: "布局大师——表格."— Presentation transcript:

1 布局大师——表格

2 基本的表格布局方法 表格是最常用的网页布局实现方式。在表格中，很容易实现表格行和列的大小操作，从而方便地实现网页布局。对单元格进行合并或拆分的操作，可以实现网页布局的划分。

3 插入表格 在Dreamweaver的设计视图中需要插入表格的位置单击，然后单击“常用”工具栏中的 “表格”工具，即可在网页中插入一个表格。也可以选择“插入”｜“表格”命令插入一个表格。在“行数”文本框中输入“3”，在“列数”文本框中输入“3”。单击“确定”按钮，即可在网页中插入一个3行3列的表格。

4 设置表格属性 在表格的“属性”面板中，可以对表格的背景颜色、背景图片、宽度、高度、边框等属性进行设置。在设计视图中单击表格的边框选择一个表格，在属性栏中就会出现表格的“属性”面板。可以在表格的“属性”面板中对表格的各项属性进行设置。

5 合并单元格 当表格中需要在连续的几个单元格中插入内容时，可以把表格中的单元格合并起来。在同一个表格中连续的几个单元格，或是在连续的行和列的区域上，都可以合并为一个单元格。

6 选取表格对象 在进行表格操作时，需要选取表格对象。表格对象可以选取整个表格、选取某一个单元格、选取多个单元格、选取整行或整列。

7 表格的复杂嵌套实现网页的排版 在网页中使用表格合并与拆分的方法，可以实现网页布局的灵活排版。但是，用单元格合并或拆分的方法完成网页的设计以后，就很难再进行行列操作。且不同的单元格互相影响，在更改一个单元格的大小时，同时会对其他的单元格造成影响，很难进行灵活控制。

8 表格使用技巧 表格和文本的边框设置，可以实现各种美观的边框效果。这些设置需要灵活地使用表格边框宽度、表格间距、表格边框填充等属性。

9 表格边框的设置 表格边框有border、cellpadding和cellspacing 3个属性，分别表示表格的边框、边线填充和边线间距。这3个属性与表格的背景和单元格的边框颜色一起可以实现各种效果。 border:表示表格的外边框粗细，单位是像素。 cellpadding:表示边框的填充范围，指的是表格内部内容与表格边线的距离。 cellspacing:表示不同单元格的间距。

10 单元格边框的间距 在一个表格中，可以实现不同的单元格有边线隔开的效果。为突出单元格的效果，可以设置表格的边距。设置表格的外边框与表格的背景相同时，可以隐藏外边框。

11 单元格的实线边框 在表格中，单元格之间的边框默认是有边距的。可以设置表格的边框间距为0，以实现实线边框效果。

12 文本各方向相同的边框 在样式表中设置一个样式的边框，可以对一个文本实现与表格类似的边框效果。在样式表中新建一个样式，单击边框，即可设置这个样式的边框。

13 这个样式的设置生成了样式表边框代码。生成的代码如下：
<style type="text/css"> <!-- .STYLE1 { color: #993333; border: 8px dotted #333333; font-size: 18px; } --> </style>

14 使用表格样式设置边框 表格也可以使用这种样式表设置的样式。

15 使用样式表设置文本边框： 样式表中控制不同方向的边框
使用样式表设置文本边框： 样式表中控制不同方向的边框 在样式表中可以设置边框的不同方向使用不同的线型、边线粗细、颜色等属性。

16 布局大师 国字型、厂字型、标题正文型、框架型 导航栏、正文、状态栏 典型国字型布局 示例详见3.11.html

17 1. 国字型 工商银行 2.标题正文型 通知公告等 3.左右框架型 目录，电子书、帮助等 4.综合布局 搜狐、新浪等大型网站 5.网页尺寸（用适合主流的）： 1024*768 用980宽 1366*768 用1320宽 800*600 用760宽国字型示例 左右边距设置可以避免下滚动条的出现 页眉：logo 图像占位符 导航栏：分隔符 网页栏目（两格） 页脚：联系方式等 正文：1行3列 嵌套100%