07 基于表格的布局.ppt

1、第7章 表格布局技术,表格是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。可以使用表格快速轻松地创建布局。,内容,通过一个示例，介绍如何使用表格实现网页布局 检查设计草样 设置站点和项目文件 创建并保存新页面 插入表格 设置表格属性 插入图像占位符 向页面添加颜色,检查设计草样,图形设计人员已经提供了 Web 页面设计草样，其中包括一些内容区域和图形方案。下面，将使用 Dreamweaver 展示此设计。,设置站点和项目文件,准备项目文件夹和文件 在硬盘上创建名为 local_sites 的新文件夹 在硬盘上的 Dreamweaver 应用程序文件夹中找到 caf

2、e_townsend 文件夹 将 cafe_townsend 文件夹复制到 local_sites 文件夹中,设置站点和项目文件,设置站点 1. 启动 Dreamweaver，选择“站点 ”“管理站点” 2. 单击“新建”按钮，然后选择“站点”。 出现“站点定义”对话框。 3. 如果显示向导（“基本”选项卡），请单击“高级”选项卡，然后从“分类”列表中选择“本地信息”（它应当是默认选项）。,设置站点和项目文件,设置站点 4. 在“站点名称”文本框中，输入 Cafe Townsend 作为站点名称。 5. 在“本地根文件夹”文本框中，指定复制到 local_sites 文件夹中的 cafe_to

3、wnsend 文件夹。 6. 在“默认图像文件夹”文本框中，指定 cafe_townsend 文件夹中已有的 images 文件夹。,设置站点和项目文件,单击“确定”。 随即出现“管理站点”对话框，显示您的新站点。 单击“完成”关闭“管理站点”对话框。,设置站点和项目文件,此时“文件”面板显示当前站点的新本地根文件夹。 “文件”面板中的文件列表将充当文件管理器，允许复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。,创建并保存新页面,在Cafe Townsend站点的根文件夹下新建一个index.html 文件。 打开index.html，在文档顶部的“文档标题”文本框中，键入页面的标

4、题 Cafe Townsend。 选择“文件”“保存” 或按Ctrl+S保存网页,站点访问者在 Web 浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。,插入表格第一个表格,选择“插入”“表格”，插入第一个表格。 在“插入表格”对话框中，设置： “行数” ：3 “列数”： 1 “表格宽度” ： 700 “像素” “边框粗细”： 0 “单元格边距”： 0 “单元格间距”： 0,插入表格第一个表格,单击“确定”。 一个三行一列的表格即出现在文档中。该表格的宽度为 700 像素，边框、单元格边距和单元格间距均为 0。,插入表格第二个表格,单击一次该表格右侧取消对它的选择。 选择“插入”“表格”

5、，插入第二个表格。 在“插入表格”对话框中，设置： “行数” ：1 “列数”： 3 “表格宽度” ： 700 “像素” “边框粗细”： 0 “单元格边距”： 0 “单元格间距”： 0,插入表格第二个表格,单击“确定”。 第二个表格（该表格具有一行三列）即出现在第一个表格下方。,插入表格第三个表格,单击一次该表格右侧取消对它的选择。 选择“插入”“表格”，插入第三个表格。 在“插入表格”对话框中，设置： “行数” ：1 “列数”： 1 “表格宽度” ： 700 “像素” “边框粗细”： 0 “单元格边距”： 0 “单元格间距”： 0,插入表格第三个表格,单击“确定”。 第三个表格（该表格具有一行

6、一列）即出现在第一个表格下方。,插入表格第三个表格,单击该表格右侧取消对它的选择。 页面现在应如下所示：,设置表格属性,使用“扩展表格”模式更容易编辑表格 “扩展表格”模式临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，可以选择表格中的项目或者精确地放置插入点。,一旦做出选择或放置插入点，应该回到“设计”视图的“标准”模式来进行编辑。,设置表格属性第一个表格,切换到“扩展表格”模式 选择“查看”“表格模式”“扩展表格模式”。 在“插入”栏的“布局”类别中单击“扩展表格模式”按钮。 在第一个表格的第一行内单击一次。 在“属性”检查器（“窗口”“属

7、性”）的“单元格高度”文本框中输入 90，然后按 Enter 键 。 注意：如果未出现“单元格高度”文本框，请单击“属性”检查器右下角的展开箭头。,设置表格属性第一个表格,在第一个表格的第二行内单击一次。 在“属性”检查器的“单元格高度”文本框中输入 166，然后按 Enter 键 。 在第一个表格的第三行内单击一次。 在“属性”检查器的“单元格高度”文本框中输入 24，然后按 Enter 键。,现在第一个表格中的三行应具有不同的高度,设置表格属性第二个表格,类似前述操作 将第二个表格的第一列“单元格宽度”设为140 将第二个表格的第二列“单元格宽度”设为230 将第二个表格的第三列“单元格宽

8、度”设为330,设置表格属性第三个表格,最后，在最后一个表格（该表格包含一行和一列）内单击一次。 在“属性”检查器的“单元格高度”文本框中输入 24。 现在的布局如图,设置表格属性,单击“文档”窗口顶部的“退出扩展表格模式”链接，返回到“标准”模式。,插入图像占位符,图像占位符是在准备好将最终图形添加到 Web 页面之前使用的图形。 在对 Web 页面进行布局时图像占位符很有用，因为通过使用图像占位符，可以在真正创建图像之前确定图像在页面上的位置。,插入图像占位符,在文档窗口中，在第一个表格的第一行内单击一次。 选择“插入”“图像对象”“图像占位符”。 在“图像占位符”对话框中，执行下面的操作

9、： 在“名称”文本框中，键入 banner_graphic。 在“宽度”文本框中，输入 700。 在“高度”文本框中，输入 90。 单击颜色框并从颜色选择器中选择一种颜色。在本教程中，我们选择了红棕色 (#993300)。,插入图像占位符,图像占位符出现在第一个表格内。 图像占位符显示最终放置于此处的图像的标签和大小属性。 注意当在浏览器中查看时，不显示图像占位符的标签文字和大小文本。,若安装了Fireworks，可单击“属性”检查器中的“创建”按钮，在Fireworks中创建、编辑并替换该占位符图像,向页面添加颜色,通过设置某些表格单元格以及页面背景的颜色，向页面添加更多颜色。 在第二个表格的第一个单元格内单击一次。 单击标签选择器中的 标签（单元格标签）以选择该单元格。,向页面添加颜色,在“属性”检查器的“背景颜色”文本框中，输入十六进制值 #993300，表格单元格的颜色即变为红棕色 同时选中，第二个表格的第二、三单元格 在“属性”检查器中，将 “背景颜色”设为