第5章 网页定位技术.pptVIP

第5章 Dreamweaver 8的网页定位技术 5.1 表 格 5.2 布局表格和布局单元格 5.3 框 架 5.4 层 5.5 实 训 5.6 小 结 5.5 习 题 本章要点 表格的创建、属性设置 页面布局的创建和控制 框架的编辑和制作 层的创建、属性设置 表格的基本元素 行 列 单元格 5.1.1 创建表格 1. 表格的插入 1) 选择【文件】|【新建】命令，创建一个新的网页文件。 2) 将光标定位在需要插入表格的位置，在插入栏的【常用】类中单击【表格(仅限于标准模式)】按钮。也可以选择【插入】|【表格】命令；或使用快捷键Ctrl+Alt+T快速插入表格。 3) 在弹出的【表格】对话框中设置表格的参数值，如图5.3所示。单击【确定】按钮。 2. 表格有关参数 通过在【表格】对话框中设置参数，可以使呈现在设计窗口的表格达到设计要求。 1) 表格大小 表5-1 表格基本参数(表格大小)说明 2) 页眉 【页眉】部分设置标题选项。 (1) 无：对表不启用列或行标题。 (2) 左侧：可以将表的第一列作为标题列，以便为表中的每一行输入一个标题。 (3) 顶部：可以将表的第一行作为标题行，以便为表中的每一列输入一个标题。 (4) 两者：能够在表中输入列标题和行标题。 3) 辅助功能 【辅助功能】部分指定以下选项。 (1) 标题：提供了一个显示在表格外的表格标题。 (2) 对齐标题：指定表格标题相对于表格的显示位置。 (3) 摘要：给出了表格的说明。屏幕阅读器可以读取摘要文本，但是该文本不会显示在用户的浏览器中。 【例5.1】制作一个HTML文档格式的“班级课程表 “班级课程表”的基本参数设置 5.1.2 选择表格 1.选择整个表格 1) 通过菜单选择整个表格(选择如下操作之一即可)。 (1) 将光标定位在表格中，选择【编辑】|【全选】命令两次。 (2) 将光标定位在表格中，选择【修改】|【表格】|【选择表格】命令。 (3) 将光标定位在表格中，使用鼠标右键在表格内部单击，在弹出的快捷菜单中选择【表格】|【选择表格】命令，如图所示。 2) 通过鼠标选择整个表格 (1) 将鼠标移动到表格的底部或者上部的边框，当鼠标指针变成 形状时，单击鼠标，如图所示。 (2) 将鼠标移到任何的表格边框上，当鼠标指针变成形状时，单击鼠标，如图所示。 (3) 将光标定位在表格中，在Dreamweaver界面窗口左下角的标签选择器中单击table标签之后，表格处于选中状态，table标签会加粗。 2. 选择行或列 1) 选择单行：用鼠标指向该行左侧单元格的左边框，当指针形状变成 时，单击鼠标就可以选中该行，如图所示。 3. 选择单元格 1) 选择单个单元格(执行如下操作之一即可)。 (1) 在单元格中的任何位置上单击，并且拖动鼠标至另一个单元格中，如图所示。 (2) 将光标定位在单元格中，选择【编辑】|【全选】命令；或使用快捷键Ctrl+A，选中光标所在的单元格。 2) 选择多个单元格 (执行如下操作之一即可)。 (1) 选择多个单元格时，在单元格中的任何位置上单击并且拖动鼠标至要选择的单元格。 (2) 快速选择多个单元格时，可以将光标定位在第一个单元格中，然后按住Shift键，用鼠标单击要选择的最后一个单元格。 5.1.3 编辑表格 1. 设置表格属性 表格标签Table有许多属性，而且大多数可以通过Dreamweaver中的属性面板进行修改。 1) 基本格式 选中表格，选择【窗口】|【属性】命令，打开表格属性面板，如图所示。 设置表格的整体格式 (1) 【表格Id】：输入表格名称。 (2) 【行】：设置表格的行数。 (3) 【列】：设置表格的列数。 (4) 【宽】和【高】：分别设置表格的宽度和高度，可以选择相对的百分比，或者以像素为单位精确指定表格的尺寸。 (5) 【填充】：设置表格的内部间距。 设置表格的整体格式 （二） (6) 【间距】：设置表格的单元格的距离。 (7) 【边框】：设置表格边框的宽度。 (8) 【对齐】：在下拉列表中设置表格的对齐方式。可以指定表格按照所设置的方式同浏览器窗口在水平方向上以默认的方式对齐、左对齐、居中对齐或右对齐。 (9) 【类】：在下拉列表中设置表格的样式类。 2) 高级格式 单击属性面板右下角的【展开/折叠】按钮 ，就会显示出高级格式的相关设置选项。 (1) 单击 按钮，可以清除列宽的设置。 (2) 单击 按钮，可以将表格宽度设置的单位指定为像素。 (3) 单击 按钮，可以将表格宽度设置的单位指定为百分比。 (4) 单击 按钮，可以清除行高的设置。 2) 高级