页面布局是网页设计的一个重要部分。Dreamweaver提供了多种方式来创建和控制网页布局。
表格是在 HTML 页面中排列数据与图像的非常强有力的工具。表格为网页设计者提供了在页面中增加垂直和水平结构的简洁方法。使用表格可以对列表数据进行布局，在页面上设计栏目，或者对网页上的文本和图像进行布局。
７.1 创建表格
一.插入表格
执行下列操作之一：
- 把插入点放置要插入表格的地方，然后点击对象面板的普通类别上的表格按钮。
- 选择插入> 表格命令。
- 从对象面板拖拽表格按钮到页面中需要插入表格的位置。
二.设置表格
执行插入表格操作后出现插入表格对话框，可以接受对话框中现有的值，也可以键入新的值。（注：Insert Table 对话框保留最近一次你键入的设置值）
- 在行域中，指定表格行的数目。
- 在列域中，指定表格列的数目。
- 在单元格边距域中，指定单元格的内容与单元格边框的像素数目。缺省空距为1象素，键入 0 为没有空距。
- 在单元格间距域中，指定单元格之间的像素数。缺省间距为2象素，键入0为没有间距。
- 在宽度域中，指定表格宽度，可以以像素数表示，也可以以占浏览器窗口的百分比表示。
- 在边框域中，指定表格边框的像素宽度。如果不想要边框就键入 0。
练习7-1
新建一个网页插入一个5行5列的表格,（制作旅游站点的主页,见lyweb.htm）。
2 表格及其元素的基本操作
一.选取表格元素
1.选取整个表格，执行下列操作之一：
- 点击表格左上角，或点击右边或底边任意位置。
- 单击表格并选择修改>表格>选择表格。
- 单击表格并选择编辑>全选。
- 将插入点放到表格内任意位置，选取文档窗左下角标签选择器中的 <table> 标签。
选取之后选项控柄就会出现在表格四周。
２.选取行或列，执行下列操作之一：
- 将插入点置于行的左边空白处或者列的顶部。当选取箭头出现时点击。
- 点击一个单元格，横向或纵向拖拽可以选取多个行或列。
- 将插入点放到表格内，选取文档窗左下角标签选择器中的 <tr> 标签。
3.选取一个或多个单元格，执行下列操作之一：
- 点击单元格，横向或纵向拖拽到另一个单元格为止。
- 点击一个单元格，然后按住 Shift 键点击其他的单元格。所有在矩形区域内的单元格都将被选中。
- 将插入点放到单元格内，选取文档窗左下角标签选择器中的 <td> 标签。
4.要选取不相邻单元格，执行下列操作之一：
- 按住 Control键点击表格内部来增加单元格、行或列到选集中。
- 选取表格内多个单元格，然后按住 Contrl键并点击单元格，行或列取消对某些单元格的选取。
练习7-2
1)选取整个表格后，将表格调整到屏幕大小
2)使表格与顶部/ 左边界距离为0，（可选择“修改/页面属性”，将“顶部边界/左边界”值设为0。）
3 设置表格属性
当选取了整个表格后属性检视面板会显示表格的属性。
- 在表格名域中输入表格名字
- 在行和列域中指定表格行数和列数。
- 在宽和高域中, 指定表格宽度和高度，可以以像素数表示，也可以用占浏览器窗口的百分比表示。通常情况下不必设定表格高度。
- 使用对齐指定表格与同一段落中其它的元素的排列方式，如文本或图像。Left：将表格排列在其它元素的左边，Right：将表格排列在其它元素的右边，Center 将表格居中排列。
- 使用清除行高和清除列宽按钮将的表格行高和列宽设定值删除
- 使用将表格宽度转化成象素按钮可以将表格宽度从以占浏览器窗口百分比的表示转成用像素表示。
使用将表格宽度转化成百分比按钮可以将表格宽度从用象素表示转换成用占浏览器窗口百分比来表示
- 在边距域中，指定单元格的内容与单元格边框间的像素数。
在间距域中，指定单元格之间的像素数。
- 在边框域中指定以像素数表示的表格边框。大多数浏览器显示表格边框都使用三维线条。如果使用表格进行页面布局，指定边框值为 0。当边框设为 0 时要查看单元格和表格的边框，选择 查看> 可视化助理>表格边框。
- 使用边框颜色域为整个表格选择一个边框颜色。
- 使用背景颜色选项为表格选择背景色。
- 使用表格图象域来为表格选择背景图像。
4 设置列、行和单元格属性
1)在表格中选取单元格。
2)打开属性检视面板，点击面板右下角的箭头扩展按钮来查看全部的属性。
3） 从下列选项中选择：
- 使用水平弹出菜单来对单元格、列或行的内容设置水平对齐方式。
- 使用垂直弹出菜单来对单元格、列或行的内容设置垂直对齐方式。
- 在宽和高域中以像素为单位指定选取单元格的宽度和高度。如果要使用百分比表示，设定值后边要跟上百分比符号（%）。
- 要设置单元格、列、行的背景图像，使用背景域或背景颜色域。
- 使用边框域设置单元格的边框颜色。
4）从下列布局选项中选择：
- 点击合并单元格按钮，合并选中的单元格、行或列。
- 点击拆分单元格按钮，可以将一个单元分割成多个单元格。
- 选取 No Wrap 可以防止文字换行。这样也会造成单元格加宽，以适应输入或者粘贴进去的所有数据。（通常情况下，单元格会先水平扩展以适应最长的词句，然后才是垂直扩展。）
- 选取标题可以将选中的单元格或行格式成表格标题。标题单元格的内容默认下是粗体和居中对齐的
７.5 用预设方案格式化表格
使用格式化表格命令可以迅速给表格应用预设方案。随后再选择选项进一步对其进行定义。
1）选取表格并选择命令>格式化表格。
2）从弹出的对话框左边的列表中选择一个设计方案。表格会更新显示设计样式。
3）对预设进一步定义，修改 Row Colors，Top Row，和 Left Col 选项。
4）要修改边框宽度，在 Border 域中输入修改值即可。如果你不想要表格边框，输入 0 就行了。
5）如果要对表格单元格应用预设（td 标签），而不是表格行，（tr 标签），选取 Apply All Attributes to TD Tags Instead of TR Tags。
你为表格单元格指定的格式将覆盖你为行指定的格式。实际上，如果你要用同一种格式格式化行中的所有单元格，最好给表格行应用格式而不是给每个单元格应用，这样产生的 HTML 源代码将会更干净、简洁。参阅 格式化表格和单元格。
6 点击应用或确定使用选中的预设方案格式化表格。
6 表格排序
1) 选取表格并选择命令>排序表格。
2) 在随后出现的对话框中进行下列选项的选择：
在排序选项中选择要排序的列。
在顺序选项中选择是根据字母还是根据数字进行排序。
3）要在不同的列进行次一级的排序，在 Then By 弹出菜单中指定排序选项。
4）选取 Sort Includes First Row 选项可以将第一行在排序时包括进去。如果第一行是不能移动的标题行，则不要选这个选项。
5）点击应用或确定执行表格排序。
注:不能对那些包含有合并单元格的表格进行排序。
|