第三章 使用表格规划网页布局

第三章使用表格规划网页布局
一、相关概念
1、表格功能：显示数据，定位网页元素（布局）
2、表格的组成：
表格由行和列组成，行和列的交叉形成的矩形形状称之为单元格。

单元格中的内容和边框之间的距离叫边距cellpadding。

单元格和单元格之间的距离叫间距cellspacing。

表格的边线叫做边框border。

tr：代表一行。

td：代表一个单元格。

3、占位符：
当我们插入表格后，每个单元格的默认的高度是12像素的，但这些单元格中什么也没有，它是用什么撑起高度的？这都是“占位符”的功劳。

因为一个单元格在没有设置高度值的时候，代表着此单元格的高度值为0，但如果这样就没法对单元格进行操作了，所以，Dreamweaver会在每个单元格中插入代码“ ”，用以撑起单元格的高度。

当我们在单元格插入内容，或是设定了单元格的高度数值，这个代码就会消失。

如果想要设置低于12像素的单元格的高度时，也必须先将这个占位代码给删除掉才行。

二、插入表格
两种方法：①“插入”→“表格”命令
②单击“插入”面板的“常用”类别中的“表格”按钮上，打开“表格”对话框。

1、宽度（百分比，像素）：相对显示，绝对显示
2、边距/填充：文本内容与边框之间距离
3、间距：单元格与单元格之间距离
4、标题：设置表格标题位置
【例4-1】：新建一个网页文档，在文档中插入表格（9行2列）并插入表格内容
【练习1】：制作下面表格
【练习2】：如何让文本与表格边框有一定空白区间，如下：
5、插入嵌套表格：嵌套表格就是在已经存在的表格中插入的表格。

插入嵌套表格的方法与插入表格的方法相同。

【练习3】：利用表格制作下图样式：
说明：由于大表格控制的是网页整体的布局，为使之在不同分辨率的显示器下能保持统一的
外观，大表格的宽度一般使用像素值，而为了使嵌套表格的宽高不和总表格发生冲突，嵌套表格一般使用百分比来设置宽和高。

【思考】：利用嵌套表格留空白
操作方法：插入一个1行1列的表格，再在此表格中插入一表格，此时新插入的表格设置时宽度要小一些，另外最好不要设置边框。

要么将里面表格的宽度以“百分比”的形式设置，此值要小于100%，具体多少适情况而定。

三、编辑表格
（一）选择表格
1、选择整个表格：
左上角或底部边缘；任意单元格+<table>标签
2、选择表格中的行或列：
上边缘，左边缘；拖动鼠标
3、选择单个单元格：
单元格+<td>标签；单元格+Ctrl+A
4、选择单行或矩形单元格块：
鼠标拖动；首单元格+shift+尾单元格
5、选择不相邻的单元格
Ctrl+欲选单元格（再次单击则从选集中删除）
（二）编辑表格和单元格
1、调整表格大小：
三个控制点（水平、垂直、水平+垂直方向）
2、更改列宽和行高：
左右指针或上下指针位置拖动鼠标
3、添加和删除行、列：
当前单元格上面插入一行（修改-表格-插入行）
当前单元格左边插入一列
插入-布局：
插入多行多列（修改-表格-插入行或列）
删除行或列（选择，修改-表格-删除行/列；Del键）
4、拆分和合并单元格：
选择表格，修改-表格-合并/拆分单元格；属性面板中的按钮
【例4-2】：打开例3-1网页文档，编辑表格（边框1，背景灰，边框颜色深灰，合并第一行）5、复制、粘贴单元格
【练习4】：如何制作下图的细线边框表格？
【练习5】：制作简单导航栏
【练习6】：如何制作下图圆角表格？
四、使用表格规划网页布局
（一）在“布局模式”下规划网页布局
表格的三种布局模式：标准、扩展、布局
Dreamweaver CS3在“插入”栏的“布局”类别中提供了“标准”、“扩展”两种表格视图模式，注意在“查看-表格模式-布局模式”中切换：
●“标准”模式：标准模式是表格默认的视图模式，对于表格及其内容的绝大部分操作适
合在该模式下进行。

●“扩展”模式：在标准模式中，当图像填满整个单元格时，很难直接将光标定位在单元
格中，为了解决这个问题，可以切换到“扩展表格”模式。

在“扩展”模式下，Dreamweaver临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。

利用这种模式，可以方便地选择表格中的内容或者精确地定位插入点。

●“布局”模式：专门为方便网页布局而设计的模式，这种模式下的单元格边框是没有宽
度的。

“布局”模式的主要功能是绘制或编辑复杂的表格。

文档窗口的顶部显示“布局模式”，指示当前正处于“布局”模式中，原来页面上的每个表格都显示为布局表格。

1、认识布局单元格和布局表格
●创建布局表格，在布局表格中添加布局单元格
●直接创建布局单元格时，自动创建布局表格
2、绘制布局单元格和布局表格
“布局单元格”不能存在于布局表格之外，可以在“布局表格”中任意位置绘制“布局单元格”；按住Ctrl键拖拽鼠标，实现连续绘制多个“布局表格”或“布局单元格”。

3、选择布局单元格和表格
单元格：点击单元格边框，8个控制点
表格：单击灰色区域
4、移动和调整布局单元格和布局表格：在布局表格内，布局单元格可以任意移动。

鼠标拖动；方向键微调（Shift每次调10像素）
注意：
布局单元格不能在布局表格之外，同一个布局表格中可以放置多个布局单元格，在布局表格中还可以嵌套多个布局表格。

（二）布局的过程
1.设定页面尺寸
●分辨率800x600像素，页面显示尺寸为780x428像素；
●分辨率1024x768像素，页面显示尺寸为1007x600像素。

2.放置功能模块
3.布局细化与调整（选择、调整、移动、修改）
例4-3：在布局模式下规划“游戏网站”主页布局并设置单元格样式
1、新建文档，切换到【布局模式】
2、打开布局插入栏，绘制布局表格（800*600像素）
3、绘制布局单元格（若干）
4、选中布局单元格，属性面板中设置背景色
表格的应用技巧：
强调：如果要将某网页元素（例如一幅图像）放到特定位置，首先应想到使用表格！
1.使用表格还是单元格
2.使用百分比还是像素
3.使用一个大表格还是多个横向表格
练习1方法：在弹出的“表格”属性中设置2行3列，边框为1，单元格间距及边距为0，页眉中选择“Top”，将页眉标题设置为“联系方式”。

表格制作完成后，在第一栏中输入“姓名”、“电话”和“邮件地址”。

练习2方法：在弹出的“表格”属性中设置1行1列，边框为1，单元格间距及边距为0，无页眉。

此时文本和表格边框紧密地贴在一起，在“属性”面板将表格单元格填充值改为5或者更大，这时内容就会和表格分离开来。

练习3制作方法：首先插入一表格，然后将光标置于要插入嵌套表格的单元格中，再插入一表格即可
练习4方法1：利用单元格间距
插入1行1列表格，宽度为300像素，高度为100像素，选中表格：设置表格背景色为所要的边框线颜色，将表格单元格间距设为1，边框及单元格填充设为0；选中单元格：设置单元格背景颜色为网页的背景颜色；
方法2：利用单元格边距
插入1行1列表格，宽度为300像素，高度为100像素，选中表格：设置表格背景颜色为所要的边框线颜色，边框为0，单元格填充设为1，间距为0；在这个表格的单元格内再插入一个新表格，将新表格的背景颜色设为白色，宽度设为100%，单元格填充和单元格间距均高为0
二者区别是什么？
利用第1种方法制作的细线表格拆分成上下两行，此时可以发现表格中间又多了一条细线，而将第2种方法内部嵌套表格拆分成上下现行，表格中间不会出现细线。

练习5方法：插入1行6列的表格，表格宽度为700像素，边框和单元格边距为0，单元格间距为1，背景色设置为橙色（#FF9900），而每个单元格的背景色设置为淡黄色（#FFFFCC）。

在每个单元格中输入文字，观察下效果。

如果觉得字体过大，与表格边框太近，可修改字体大小。

练习6方法：插入一个一行三列的表格，CellPad、CellSpace和Border属性值都为0，在第一列插入图片1.gif，第三列插入图片2.gif，并设置单元格的高度和宽度与图片一致。

设置第二列的背景颜色为与圆角图片一致的颜色，设置宽度为整个表格的宽度减去两个图片的宽度，并打开源代码察看器，删除这列中的字符” &nbsp ”（Dreamweaver会自动在每个单元格中插入此字符，若不删除会撑大表格）。

依葫芦画瓢，做好下半部分的圆角。

在已插入的两个表格中间再插入一个一行三列同宽的表格，CellPad、CellSpace和Border 属性值都为0，宽度为100%。

设置第一列和第三列背景颜色为与圆角图片一致的颜色，宽度为1像素，并打开源代码察看器，删除这两列中的字符” &nbsp”。

到这，一个圆角表格就做好了。