第二项目单元­表格设计.pptVIP

天津滨海职业学院信息工程系孙荣侠 【例3】设置一个如图1所示的课程表。则属性面板设置如图2所示。 图1 （5×6）的表格 图2 属性面板的设置 天津滨海职业学院信息工程系孙荣侠 9 设置行、列和单元格的格式 对表格行、列和单元格的格式，也通过首先选中相应的表格元素，然后在属性面板上设置数据来完成。 图 设置表格行、列和单元格格式时的属性面板 选中表格中所需要设置的行、列或单元格后，属性面板如下图所示。属性面板的上半部分，会根据表格单元格中包含对象的不同而不同，而下半部分却是对表格行、列和单元格的设置区 天津滨海职业学院信息工程系孙荣侠 设置行、列或单元格中内容的对齐方式： 水平：设置单元格内容在水平方向上相对单元格的对齐方式。可以从下拉列表中选择默认（通常是普通单元格左对齐，标题单元格居中对齐）、左对齐、居中对齐、右对齐。 垂直：设置单元格内容在垂直方向上相对单元格的对齐方式。可以从下拉列表中选择默认（通常为中间对齐）、顶端、中间、底部、基线。 设置行、列或单元格的宽度和高度： 宽：在该文本框中，输入单元格的宽度值，可以是具体数字，表示为像素值；也可以输入百分数，如50%，表示单元格宽度为表格宽度的50%。 高：在该文本框中，输入单元格的高度值，可以是具体数字，表示为像素值；也可以输入百分数，如30%，表示单元格高度为整个表格高度的30%。 天津滨海职业学院信息工程系孙荣侠 另外还可以通过鼠标拖动边框来改变表格的行高和列宽。要改变行高，将鼠标移动到该行下方的边框上，当鼠标变为双箭头形状时拖动鼠标，将边框拖到需要的位置，释放鼠标，表格行高即被改变。要改变列宽，将鼠标移动到该列右方的边框上，当鼠标变为双箭头形状时拖动鼠标，将边框拖到需要的位置，释放鼠标，表格列宽即被改变。 设置行、列或单元格的边框格式： 边框：设置被选中的行、列或单元格的边框颜色。 设置行、列或单元格的背景： 背景：在该本框中输入单元格的背景图像文件的URL地址。或者打开后面的文件夹，选择背景图像。 背景颜色：在颜色井中选择单元格的背景颜色。 天津滨海职业学院信息工程系孙荣侠 控制单元格中内容的换行方式： 不换行：如果选中该复选框，在单元格中输入文本时，如果文本长度超过了单元格的宽度，则文本会自动换行，并且单元格的宽度保持不变。 清除该复选框，在单元格中输入文本时，如果文本长度超过了单元格的宽度，则文本不自动换行，单元格的宽度将随之变宽。下图显示了单元格中输入文字过长时，不自动换行和自动换行的两种效果。 不自动换行 自动换行 图 文字的不自动换行和自动换行 天津滨海职业学院信息工程系孙荣侠 10 设置标题单元格 标题：选中该复选框，则将所有选中的单元格设置为标题单元格；取消该复选框，则将所有选中的单元格设置为数据单元格。通常将表格的第一行和第一列中的单元格设置为标题单元格。如图所示，一般对于标题单元格，其内容都被加粗居中显示。 选中第一行和第一列 设置标题单元格 图 设置标题单元格 天津滨海职业学院信息工程系孙荣侠 11 套用现有单元格的格式 除了上述介绍的手动设置表格和表格中各元素的格式外，Dreamweaver也提供了十几种表格设计风格，使用这些预置设计风格格式化表格，可以大大提高表格的设计效率。具体步骤如下： 图 格式化表格对话框 （ 1）选中需要格式化的表格，然后选择菜单“命令”→“格式化表格”。 （2）在弹出的格式化表格对话框中， 左上角的列表中显示各种设计方案，选择一种，右边就显示设计示例。如右图所示。 天津滨海职业学院信息工程系孙荣侠 行颜色： 第一种：设定第一种颜色。 第二种：设定第二种颜色。 交错：设置表格行与行的颜色是否变化。 不要交错：每行的背景颜色不改变 每一行：每隔一行颜色发生变化 每两行：每隔两行颜色发生变化 每三行：每隔三行颜色发生变化 每四行：每隔四行颜色发生变化 第一行：设置第一行的参数。 对齐方式：无、左对齐、居中、右对齐。 文字样式：常规、粗体、斜体、加粗斜体。 背景色：输入十六进制颜色代码。 文本颜色：输入十六进制颜色代码。 最左列：对齐方式和文字样式与第一行的设置一样。 天津滨海职业学院信息工程系孙荣侠 表格： 边框：修改边框宽度，在边框域中输入一个值，如果不需要显示表格边框，则输入0即可。 将所有属性套用至TD标注而不是TR标签选项：要将设计应用于表格单元（TD）标记而不是表格行（TR）标记，虽然应用于表格单元的格式优先于应用于表格行的格式，但是应用于表格行的格式将产生