第4章 使用表格布局网页.pdfVIP

第4 章 使用表格布局网页 制作网页时，通常需要将网页元素放在网页中的合适位置，这就是网页定位。网页定位 是网页布局的重要手段之一，Dreamweaver CS6 提供了表格、框架和层等网页定位技术。 本章着重介绍使用表格进行网页布局的基本方法和技巧，内容主要包括创建表格、编辑 表格和格式化表格等操作。使用表格布局网页，可使网页在不同平台、不同分辨率的浏览器 中都能保持其原有的布局，具有良好的兼容性。 4.1 创建表格 4.1.1 表格概述 表格是网页文档不可缺少的组成元素，它以简洁明了和高效快捷的方式将图片、文本、 数据、动画和表单等网页元素有序的显示在页面上，可以设计出布局非常美观的网页文档。 使用表格排版的页面在不同平台、不同分辨率的浏览器中都能保持其原有的布局，有很好的 兼容性，所以，表格是网页中最常用的布局手段之一。 表格由一行或多行组成，每行又由一个或多个单元格组成，如图4-1 所示。 表格的行 表格的列 单元格 合并后的单元格 表格控制点 图4-1 网页文档中的表格结构 4.1.2 插入表格 1. “表格”对话框 在 Dreamweaver CS6 中，通常使用“常用”插入面板中的“表格”按钮 。单击“常 用”插入面板中的“表格”按钮 ，弹出“表格”对话框，如图4-2 所示。“表格”对话框 中各选项的说明如下。 1) 行数 设置新建表格的行数。 2) 列数 设置新建表格的列数。 3) 表格宽度 设置表格的宽度，其中右边的下拉列表中包含“百分比”和“像素”两个选项。若设置 为“像素”值，其取值通常在0～1024 范围内；若设置为“百分比”值，其取值在0～100 范围内。两者的区别在于设置“像素”值时，表格在浏览器中显示的宽度是固定不变的，当 浏览器窗口特别小(即其宽度不足以显示一个完整的表格)时，浏览器窗口就会出现水平滚动 条；而设置“百分比”值时，表格的宽度随浏览器窗口的大小(如果新建表格嵌入在单元格 中，则随单元格的大小)按设置的比例自动调整。 图4-2 “表格”对话框 4) 边框粗细 用于设置表格边框的宽度，如果设置为0，则在浏览时看不到表格的边框。 5) 单元格边距 单元格内容和单元格边框之间的像素数。 6) 单元格间距 相邻单元格之间的像素数。 7) 标题 设置表头样式，可以在4 种样式(无、左、顶部和两者)中任选一种。 8) 标题(辅助功能) 设置表格的标题(在表格上方)。 9) 摘要 用于对表格进行注释，注释信息在浏览器中不显示。 2. 插入表格 在网页文档中插入表格可以按照如下方法进行操作。 1) 打开将要插入表格的网页文档。 2) 将光标放置在插入表格的位置(该位置可以是表格中的单元格)，然后选择“插入” →“表格”菜单命令，或者单击“常用”插入面板中的“表格”按钮 。 3) 弹出“表格”对话框，在对话框中将“行数”设置为6，“列数”设置为4 ，“表格宽 度”设置为580 像素，边框粗细为1 像素。 4) 单击“确定”按钮插入表格。 4.2 编辑表格 4.2.1 选中表格 对表格进行编辑操作之前，首先要选中表格。可以一次选择整个表格、单元格、整行或 整列，也可以在表格中选择一个连续或不连续的单元格区域。 1. 选择整个表格 当一个表格被选中后，表格的周围会出现一个边框，在边框的右侧和底部还会出现黑色 矩形控制点，如图4-3 所示。选中整个表格的常用方法有如下几种。 图4-3 表格选中时的状态 1) 将光标移动到表格的左上角、上边框或下边框之外的附近区域，当光标下方出现 形状时单击鼠标。 2) 将光标移动到表格的边框上，当光标变成 或 形状时单击鼠标。 3) 单击表格中的任意位置，然后在文档窗口状态栏的左边，单击该表格对应的 table 标签。 4) 单击表格中的任意位置，连续按两次Ctrl+A 组合键。 5) 单击表格中的任意位置，选择“修改”→“表格”→“选择表格”菜单命令(或者单 击鼠标右键，在弹出的快