5.2 Dreamweaver制作表格

一、什么是表格布局

表格布局就是为了精确定位、合理安排网页中的文字、图片等元素，它就像网页的脸面，是在一个限定的面积范围内合理安排、布置图像、文字等元素的位置，从而设计出版式漂亮的页面。如图1所示，就是一个使用表格布局的页面。

图1 表格布局文字和图片

二、表格的使用

如果我们要实现如图1所示的表格布局页面，该怎么办？不急！下面就一步一步地实现如图1所示的表格布局页面。请执行以下步骤：

(1) 新建空白文档，然后选择“插入”一“表格”命令，以显示“表格”对话框，如图2所示。

图2 “表格”对话框

(2) 输入所需的行数为7和列数为4，选择“百分比”或“像素”为单位的表格宽度。

(3) 在“边框粗细”后的文本框中输入边框宽度，如果不需要显示边框，请将值设为"0"。

(4) 设置“单元格边距”和“单元格间距”。

(5) 设置的相关值如图2所示，然后单击“确定”按钮。

(6) 选中第1行所有单元格，然后右击鼠标选择“表格”一“合并单元格”命令，高度设为34。同理，合并第3行所有单元格，合并第7行所有单元格，合并第1列第4行、第1列第5行、第1列第6行这3个单元格，合并第2列第4行、第2列第5行、第2列第6行这3个单元格，合并第4列第4行、第4列第5行、第4列第6行这3个单元格，合并后的效果如图3所示。

(7) 按图1添加相关文字内容。

(8) 光标定位到第4行第1个单元格里，然后依次选择“插入”一“表单”一“复选框”命令。

(9) 在第1行单元格里插入图片“commodity_tablehead.gif‘’。同理，在相应位置插入图片commodity_huaping.jpg、online_pic.gif和list_ tool_favl.gif。

(10) 在第4行最后一个单元格输入“一口价283.30”，然后在“属性”面板里设置此单元格背景颜色为“#FF99FF”和居中对齐。

图3 插入表格并合并相关单元格

(11) 光标定位到第3行，然后切换到“代码”视图，如图4所示，在光标位置插入如下代码：

<HR noshade=”noshade“ style= “border:lpx  #CCCCCC dashed” />

同理，在最后一行插入第2条虚线。

(12) 按F12键就可以看到如图1所示的效果。

图4 切换到“代码”视图

本节作业：

制作如图1网页。

注意事项：

1.注意设计视图和代码视图的切换。

2.熟练各种面板工具的使用。

网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！

点击下载第五章案例及作业资源 返回《HTML入门经典》教程列表