07 基于表格的布局.ppt

第7章 表格布局技术 表格是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。可以使用表格快速轻松地创建布局。 内容 通过一个示例，介绍如何使用表格实现网页布局 检查设计草样 设置站点和项目文件 创建并保存新页面 插入表格 设置表格属性 插入图像占位符 向页面添加颜色 检查设计草样 图形设计人员已经提供了 Web 页面设计草样，其中包括一些内容区域和图形方案。下面，将使用 Dreamweaver 展示此设计。 设置站点和项目文件 准备项目文件夹和文件 在硬盘上创建名为 local_sites 的新文件夹 在硬盘上的 Dreamweaver 应用程序文件夹中找到 cafe_townsend 文件夹 将 cafe_townsend 文件夹复制到 local_sites 文件夹中 设置站点和项目文件 设置站点 1. 启动 Dreamweaver，选择“站点 ”“管理站点” 2. 单击“新建”按钮，然后选择“站点”。 出现“站点定义”对话框。 3. 如果显示向导（“基本”选项卡），请单击“高级”选项卡，然后从“分类”列表中选择“本地信息”（它应当是默认选项）。 设置站点和项目文件 设置站点 4. 在“站点名称”文本框中，输入 Cafe Townsend 作为站点名称。 5. 在“本地根文件夹”文本框中，指定复制到 local_sites 文件夹中的 cafe_townsend 文件夹。 6. 在“默认图像文件夹”文本框中，指定 cafe_townsend 文件夹中已有的 images 文件夹。 设置站点和项目文件 单击“确定”。 随即出现“管理站点”对话框，显示您的新站点。 单击“完成”关闭“管理站点”对话框。 设置站点和项目文件 此时“文件”面板显示当前站点的新本地根文件夹。 “文件”面板中的文件列表将充当文件管理器，允许复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。 创建并保存新页面 在Cafe Townsend站点的根文件夹下新建一个index.html 文件。 打开index.html，在文档顶部的“文档标题”文本框中，键入页面的标题 Cafe Townsend。 选择“文件”“保存” 或按Ctrl+S保存网页 插入表格—第一个表格 选择“插入”“表格”，插入第一个表格。 在“插入表格”对话框中，设置： “行数” ：3 “列数”： 1 “表格宽度” ： 700 “像素” “边框粗细”： 0 “单元格边距”： 0 “单元格间距”： 0 插入表格—第一个表格 单击“确定”。 一个三行一列的表格即出现在文档中。该表格的宽度为 700 像素，边框、单元格边距和单元格间距均为 0。 插入表格—第二个表格 单击一次该表格右侧取消对它的选择。 选择“插入”“表格”，插入第二个表格。 在“插入表格”对话框中，设置： “行数” ：1 “列数”： 3 “表格宽度” ： 700 “像素” “边框粗细”： 0 “单元格边距”： 0 “单元格间距”： 0 插入表格—第二个表格 单击“确定”。 第二个表格（该表格具有一行三列）即出现在第一个表格下方。 插入表格—第三个表格 单击一次该表格右侧取消对它的选择。 选择“插入”“表格”，插入第三个表格。 在“插入表格”对话框中，设置： “行数” ：1 “列数”： 1 “表格宽度” ： 700 “像素” “边框粗细”： 0 “单元格边距”： 0 “单元格间距”： 0 插入表格—第三个表格 单击“确定”。 第三个表格（该表格具有一行一列）即出现在第一个表格下方。 插入表格—第三个表格 单击该表格右侧取消对它的选择。 页面现在应如下所示： 设置表格属性 使用“扩展表格”模式更容易编辑表格 “扩展表格”模式临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，可以选择表格中的项目或者精确地放置插入点。 设置表格属性—第一个表格 切换到“扩展表格”模式 选择“查看”“表格模式”“扩展表格模式”。 在“插入”栏的“布局”类别中单击“扩展表格模式”按钮。 在第一个表格的第一行内单击一次。 在“属性”检查器（“窗口”“属性”）的“单元格高度”文本框中输入 90，然后按 Enter 键 。 注意：如果未出现“单元格高度”文本框，请单击“属性”检查器右下角的展开箭头。 设置表格属性—第一个表格 在第一个表格的第二行内单击一次。 在“属性”检查器的“单元格高度”文本框中输入 166，然后按 Enter 键 。 在第一个表格的第三行内单击一次。 在“属性”检查器的“单元格高度”文本框中输入 24，然后按 Enter 键。 设置表格属性—第二个表格 类似前述操作 将第二个表格的第一列“单元