表格及布局网页
将光标位于表格外,按住Shift键,然后单击表格中任 意位置。 将光标置于表格内任意位置,连续两次按下Ctr1+A 组合键。 所选中表格的下边缘和右边缘出现选择柄。如图
标题菜单
若要选择单个或多个行,操作步骤如下: 步骤1:定位鼠标指针使其指向行的左边缘。 步骤2:当鼠标指针变为选择箭头时,单击已选择单个行。 进行拖动以选择多个行。按住Ctrl键,则可以选择多个不 相邻的表格行。
表格属性设置面板中各个选项功能如下(3) “默认” 指示浏览器应该使用其默认对齐方式。 “间距(S)” 此文本框用来指定选中表格的边框距离。 “边框(B)” 此文本框用来设置选中表格的边框大小。 “类(C)” 设置选中表格的CSS样式。 “背景颜色(G)”设置选中表格的背景颜色,可以从颜色选 择器后面的文本框内直接输入。 “边框颜色(R)”设置选中表格的边框颜色,可以从颜色选 择器后面的文本框内直接输入。 “背景图像(B)” 可在文本框内输入图像位置和名称,将该 图像作为选中表格的背 景图像。
“页眉” 选项组中各选项的功能如下: “无” 不设置页眉。 “顶部” 页眉设置在表格顶部。 “左” 页眉设置在表格左边。 “两者” 页眉设置在表格左边与顶部。 “辅助功能”选项可以不进行设置。 “标题” 提供了一个显示在表格外的表格标题。 “对齐标题” 指定表格标题相对于表格的显示位置。 “摘要” 给出了表格的说明。屏幕阅读器可以读取摘 要文本,但是该文本不会显示在浏览器中。
第11章 表格及布局网页
本章学习要点:
创建表格,表格的组成 表格的属性设置 表格编辑 使用表格布局网页
11.1表格简介 11.2 向表格内添加内容 11.3 编辑表格 11.4 使用表格布局网页
11.1表格简介
11.1.1表格概述 11.1.2 创建表格 11.1.3表格的属性设置面板
11.1.2 创建表格
图11.1 表格对话框
步骤3:在表格对话框中设置相应的选项。 “表格大小”选项组中各选项的功能如下: “行数” 此文本框用来确定表格具有的行的数目,如输 入3行。 “列数” 此文本框用来确定表格具有的列的数目,如输 入8列。 “表格宽度” 此文本框用来以像素为单位或按占浏览器 窗口宽度的百分比,确定 表格宽度,如输入200像素。 “边框粗细” 此文本框用来以像素为单位确定表格边框 粗细,如输入1像素。 “单元格边距”可以采取默认值。 “单元格间距” 可以采取默认值。
表格属性设置面板中各个选项功能如下(2) “高(H)” 此文本框用来为选中表格设定高度。在文 本框后的下拉列表中选择所设高度的单位,有百分比和 像素两种选择。 “填充(P)” 此文本框用来指定选中表格的单元格高度, 使用默认值。 “对齐(A)” 此下拉列表框用来指定表格相对于同一段 落中其他元素的显示位置,使用默认值。 “左对齐” 沿其他元素的左侧对齐表格。 “右对齐” 沿其他元素的右侧对齐表格。 “居中对齐” 将表格居中。
步骤4:各选项设置完成后,用鼠标单击“确定” 按钮。即会在设计窗口中出现表格。如图、所示。Leabharlann 图11.2设计窗口中的表格
在Dreamweaver MX 2004中,可以通过表格的 属性设置面板设置表格的各种属性。如图所示。
11.1.3表格的属性设置面板
图11.3 表格的属性设置面板
表格属性设置面板中各个选项功能如下(1) “表格Id” 中的下拉列表框用来为选中表格名称。 “行(R)” 此文本框用来为选中表格设定行数。用鼠标 单击文档内任一位置,表格自动改变。 “列(C)” 此文本框用来为选中表格设定列数。用鼠标 单击文档内任一位置,表格自动改变。 “宽(W)” 此文本框用来为选中表格设定宽度。在文 本 框后的下拉列表中选择所设宽度的单位,有百分比和像 素两种选择。
11.1.1表格概述
表格是网页设计制作不可缺少的重要元素,它以 简洁明了和高效快捷的方式将数据、文本、图片、表单 等网页元素合理有序地布局在页面上,使页面结构整齐, 版面清晰。不太复杂的网页一般都利用表格进行网页布 局。
操作步骤如下: 步骤1:在设计窗口中,将插入点放在需要插入表格的 位置。 步骤2:选择菜单“插入(I)”|“表格(T)”命令。或单 击对象面板组上的“插入表格”按钮, 打开表格对话框,如图11.1所示。
若要选择单个或多个列, 操作步骤如下: 步骤1:将鼠标指针指向列的上边缘。
步骤2:当鼠标指针变为选择箭头时,单击已选择单个列。 进行拖动以选择多个列。按住Ctrl键,则可以选择多个不相 邻的表格列。
3.选择单元格
选择单个单元格有如下一些操作方法: 将光标放在要选择的单元格内,然后在设计窗口左下角 的标签选择器中选择<td>标签。 按住Ctrl键单击该单元格。 将光标放在要选择的单元格内,然后选择“编辑 (E)”|“全选(L)”命令。如果选择了一个单元格后再次选 择“编辑(E)”|“全选(L)”命令可以选择整个表格。
在表格的单元格中可以输入任何数据。同时也可以对数 据进行常规的编辑操作。
操作步骤如下: 步骤1:将光标移到要插入数据的单元格内。 步骤2:直接输入对象,或者将复制的对象粘贴到单元格 中。 步骤3:一个单元格内的内容输入完毕后,可以用Tab键 将光标移动到下一个单元格,以便继续输入,也可以使用 鼠标移动光标。
11.2 向表格内添加内容
11.3 编辑表格
11.3.1选择表格对象 11.3.2 调整表格大小 11.3.3调整行和列的大小 11.3.4 添加及删除行和列 11.3.5 拆分和合并单元格 11.3.6复制、粘贴及删除单元格 11.3.7嵌套表格
11.3.1选择表格对象
1。选择整个表格 选择整个表格有如下一些操作方法: 单击表格左上角、表格的顶边缘和底边缘的任何位 置,或者行或者列的边框,当可以选择表格时,鼠标 指针会变成表格网格图标。 单击某个表格单元格,然后在设计窗口左下角的标签 选择器中选择<table> 标签。 单击某个表格单元格,然后选择菜单“修改 (M)”|“表格(T)”|“选择表格(S)”命令。 单击某个表格单元格,然后选择表下边的倒三角,出 现标题菜单,在标题菜单中选择“选择表格(S)”。