网页的定位——表格的应用

网页制作的技术精髓

网页的定位，就是指把诸如文本、图片等等网页元素按需要放在合适的位置，Dreamweaver提供了诸如表格、框架、图层等网页定位技术，掌握它们，才能真正学到网页制作技术的精髓！这期我们就利用一个实例来学习表格的应用。

1 进入页面编辑器，先调出“Insert Table”窗口。图说：(1) 鼠标点击菜单栏上的[Insert]命令。(2) 选择“Table”命令。(3) 于弹出的“Insert Table”窗口中进行设置。将“Rows（行数）”设置为“13”、“Columns （列数）”设置为“5”，代表插入的表格是13行5列。其他参数取默认值即可。(4) 按一下[OK]。

小技巧：创建表格时，如果开始不能确定它的属性，可以先使用默认值，然后再通过属性面板进行修改。
“Width（宽度）”可以是相对比例（百分数），也可以是绝对尺寸；“Border（边线）”设置中，“0”代表无边线，“1” 代表有边线；“Cell Padding”表示单元格中内容与单元格边线之间的距离；“Cell Spacing”表示单元格与单元格之间的距离。

2 这时编辑窗口会出现一个空白表格，不过表格的位置有点偏。图说：(1) 按一下键盘上的“F4”键，打开属性面板。(2) 移动鼠标到表格的边框，待鼠标变成这个符号的时候，按一下鼠标选中整个表格。(3) 将“Align”设置为“Center”。

3 下面我们对表格进行一些修改。图说：(1) 移动鼠标到第1行表格边框，待鼠标变成向右箭头时，按一下鼠标选中第1行的全部单元格。 (2) 点击属性面板上的合并图标合并单元格。(3) 同理合并表格的最后一行。

小技巧：表格的制作方法有很多种，上面我们给出的仅仅是一种做法，你也可以先定制一个3行3列，甚至1行1列的表格，然后通过合并与拆分来完成后面的工作。

4 有点太过素面朝天了，我们为表格加点色彩吧！图说：(1) 将鼠标移动到第1行的单元格内。(2) 点击属性面板上的Bg右侧的小色块，调出颜色选项板，选中所需要的颜色即可。

5 接着我们给第2行也化化妆。图说：(1) 移动鼠标到第2行表格边框，待鼠标变成向右箭头时，按一下鼠标选中第2行的全部单元格。
(2) 点击属性面板上的Bg右侧的小色块，调出颜色选项板，选中所需要的颜色。

6 接着往表格里填上相应的文字。图说：(1) 在对应的单元格里填上相应的文字。(2) 将鼠标移动到第1行，按一下属性面板上的文字居中按钮。

小技巧：输入文字之前，可以在这里对文字的颜色、大小、粗细等进行设置。

7 最后一行留着做什么呢？别急，往下看不就知道了。图说：(1) 同时按住键盘上的“Ctrl”键+“Alt”键+“I”键，打开插入图片的对话框。 (2) 选择合适的图片，这里我们选择“multi”。(3) 按一下[Select]。

8 还记得上期我们教过的链接吗？在这里也可以充分利用它啊！图说：(1) 用鼠标选择“花花公子寻车记”，使其反白。(2) 点击“Target”旁边的文件夹图标，选择要链接的网页即可。

9 是不是很漂亮啊！图说：按一下键盘上的“F12”键预览，看看效果怎么样。

注意：表格的网页定位，主要是通过将网页内容分成若干个区，然后将相应的内容分别填入不同的表格，从而做成非常规范与专业的网页。

10 现在我们明白了表格的制作方法，接着介绍2种简单的表格特制效果。第1种立体效果是表格的凹陷特效。图说：(1) 插入2行2列的表格。
(2) 选中整个表格后，在属性面板上进行相应设置。“Border”值设为“1”。(3) “BgColor”值设为“#9999cc”。(4) “Cellspace”值设为“2”。(5) “CellPad”值设为“0”。

11 第2种立体效果表格凸起的特效。图说：(1) 同第10步的前3个步骤。(2) “Brdr Color”值设为“#ffffff”。 (3) 执行[View]→“Code”命令。

12 调出代码编辑页面，我们做个小小的改动。图说：(1) 在这里加入如下语句：bordercolorlight="#000000"。(2) 然后按一下[Show Design View]返回Design页面。(3) 你就可以看到效果了。

13 第3种立体效果其实和第2种挺相似的。图说：(1) 将Cellspace”值的设为“0”。(2) 看出区别来了么？对了，就是凸出的效果没那么明显了。

小技巧：其实只要把“Bordercolor”的值设浅色一点，表格就会凸起来了。

结语：表格是一种最基本的网页定位技术，其重要不言而喻。但是大家也该注意，尽量不要嵌套过多的表格，以免影响页面的下载速度。