1、插入表格接下来，您将添加一个表格，用于放置文本、图形和 Macromedia Flash 资源。 在页面上单击一次，在页面左上角放置插入点。 选择“插入”“表格”。 在“插入表格” 对话框中，执行下面的操作： o 在“行数”文本框中，输入 3。o 在“列数”文本框中，输入 1。o 在“表格宽度” 文本框中，输入 700。o 在“表格宽度” 弹出式菜单中，选择“ 像素”。o 在“边框粗细” 文本框中，输入 0。o 在“单元格边距” 文本框中，输入 0。o 在“单元格间距” 文本框中，输入 0。 4 单击“确定”。 一个三行一列的表格即出现在文档中。该表格的宽度为 700 像素，边框、单元格边距和
2、单元格间距均为 0。关于表格的更多信息 表格是用来在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力工具。表格由一行或多行组成；每行又由一个或多个单元格组成。当您创建包含多个单元格的多行表格时，这些单元格形成列。从技术上来说，一个单元格是水平行中的一个区域，而一列是由这些单元格区域垂直堆积而成的。当选定了表格或表格中有插入点时，Dreamweaver 会显示表格宽度和表格选择器（由绿色线条指示）中的每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。使用菜单可以快速访问一些与表格相关的常用命令。还可以通过选择“查看”“ 可视化助理”“表格宽度 ”来启用或禁用宽度和菜单的显
3、示。表格可以具有边框，表格的单元格可以具有边距、间距或同时具有边距和间距。单元格边距是指单元格内容和单元格边界之间的像素数。单元格间距是指相邻的表格单元格之间的像素数。如果您没有明确指定单元格边距和单元格间距的值，则大多数浏览器按单元格边距设置为 1、单元格间距设置为 2 来显示表格。若要确保浏览器显示的表格没有边距和间距，请将单元格边距和单元格间距设置为 0。5 单击一次该表格右侧取消对它的选择。6 选择“插入”“表格”以插入另一个表格。7 在“插入表格” 对话框中，对第二个表格执行下面的操作： o 在“行数”文本框中，输入 1。o 在“列数”文本框中，输入 3。o 在“表格宽度” 文本框中
4、，输入 700。o 在“表格宽度” 弹出式菜单中，选择“ 像素”。o 在“边框粗细” 文本框中，输入 0。o 在“单元格边距” 文本框中，输入 0。o 在“单元格间距” 文本框中，输入 0。8 单击“确定”。 第二个表格（该表格具有一行三列）即出现在第一个表格下方。9 单击该表格右侧取消对它的选择。10 通过选择“插入”“表格”，然后在“插入表格”对话框中输入以下值来插入第三个表格： o 在“行数”文本框中，输入 1。o 在“列数”文本框中，输入 1。o 在“表格宽度” 文本框中，输入 700。o 在“表格宽度” 弹出式菜单中，选择“ 像素”。o 在“边框粗细” 文本框中，输入 0。o 在“单
5、元格边距” 文本框中，输入 0。o 在“单元格间距” 文本框中，输入 0。11 单击“确定” 。 第三个表格（该表格具有一行一列）即出现在第二个表格下方。单击该表格右侧取消对它的选择。您的页面现在应如下所示：注意 插入表格后可能会看到表格选择器（由绿色线条指示） 。通过在表格外单击，通常可以隐藏表格选择器。也可以通过选择“查看”“ 可视化助理 ”“表格宽度” 禁用表格选择器。设置表格属性现在将使用“扩展表格” 模式设置具体的表格属性， “扩展表格 ”模式是用于临时添加表格的单元格边距和间距并增加表格边框以简化编辑的一种功能。特别需要指出的是，它使您能够精确地放置插入点，而不会意外选择错误的表格
6、或其它表格内容。注意 在“扩展表格”模式下完成对表格属性的设置后，应总是返回到“标准”模式。 “扩展表格”模式不属于所见即所得环境，因此某些操作（如调整大小）不会得到预期的结果 选择“查看”“表格模式”“扩展表格模式”。 注意 如果出现“开始使用扩展表格模式”对话框，请单击“ 确定” 。 在第一个表格的第一行内单击一次。 在“属性”检查器（“ 窗口”“属性”）的“单元格高度” 文本框中输入 90，然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。 注意 如果未出现“单元格高度” 文本框，请单击“ 属性”检查器右下角的展开箭头。 在第一个表格的第二行内单击
7、一次。 在“属性”检查器的“ 单元格高度 ”文本框中输入 166，然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。 在第一个表格的第三行内单击一次。 在“属性”检查器的“ 单元格高度 ”文本框中输入 24，然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。 现在第一个表格中的三行应具有不同的高度。接下来，您将设置第二个表格（该表格包含三列）的属性。 在第二个表格的第一列内单击一次。 在“属性”检查器的“ 单元格宽度 ”文本框中输入 140，然后按 Enter 键 (Windows) 或 Return 键 (Mac
8、intosh)。 在第二个表格的第二列内单击一次。 在“属性”检查器的“ 单元格宽度 ”文本框中输入 230，然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。 将第三列的宽度设置为 330 个像素。 如果已打开表格选择器（“查看”“ 可视化助理”“表格宽度 ”） ，将能看到刚才在各个表格列上输入的三个像素值。您无需为这个表格的单元格输入任何高度值，因为这些单元格的高度将取决于您以后添加的内容。 最后，在最后一个表格（该表格包含一行和一列）内单击一次。 在“属性”检查器的“ 单元格高度 ”文本框中输入 24，然后按 Enter 键 (Windows) 或
9、 Return 键 (Macintosh)。 您的布局现在应如下所示： 单击“文档” 窗口顶部的“ 退出扩展表格模式 ”链接，返回到“ 标准”模式。 保存页面。插入图像占位符图像占位符是在准备好将最终图形添加到 Web 页面之前使用的图形。在对 Web 页面进行布局时图像占位符很有用，因为通过使用图像占位符，您可以在真正创建图像之前确定图像在页面上的位置。 在文档窗口中，在第一个表格的第一行内单击一次。 选择“插入”“图像对象”“图像占位符”。 在“图像占位符” 对话框中，执行下面的操作： o 在“名称”文本框中，键入 banner_graphic。o 在“宽度”文本框中，输入 700。o 在
10、“高度”文本框中，输入 90。o 单击颜色框并从颜色选择器中选择一种颜色。在本教程中，我们选择了红棕色 (#993300)。o 保留“替换文本” 文本框为空。 关 关于替换文本的说明 替换文本是 Web 页面上的图像的文字描述。它属于 HTML 于代码，不会显示在页面上。对于大多数图像，提供替换文本是很重要的，这样使用屏幕阅读器或只显示文本的浏览器用户就可以访问这些图像所提供的文本信息。而对于仅显示 Web 站点徽标的横幅图形，无需提供替换文本。将 “图像占位符”对话框中的“替换文本” 文本框保留为空时，Dreamweaver 会在 img 标签中添加一个 alt=“ 属性。以后，如果您要向某
11、个图像添加替换文本，就可以选择该图像并在“属性”检查器中输入替换文本。例如，如果以后您想更改徽标以包括电话号码或地址，则能够以替换文本方式提供此信息。 单击“确定” 。 图像占位符出现在第一个表格内。图像占位符显示最终放置于此处的图像的标签和大小属性。注意 当在浏览器中查看时，不显示图像占位符的标签文字和大小文本。 保存页面。 关于 关于图像占位符 图像占位符是在将最终图形添加到 Web 页面之前使用的临时图形；它不是显示在浏览器中的图形图像。在您发布站点之前，应该用适用于 Web 的图形文件（例如 GIF 或 JPEG）替换所有添加的图像占位符。如果您有 Macromedia Firewor
12、ks，则可以根据 Dreamweaver 图像占位符创建新的图形。当您选择图像占位符并在“属性”检查器中单击“ 创建 ”按钮时，Fireworks 将打开并呈现一个新的画布。新图像的尺寸设置为与占位符图像相同的大小。接着，您可以随意创建并编辑图像，并替换 Dreamweaver 中的占位符图像。有关根据图像占位符在 Fireworks 中创建图像的信息，请参见使用 Dreamweaver中的 使用 Fireworks 修改 Dreamweaver 图像占位符 。向页面添加颜色现在，您将通过设置某些表格单元格以及页面背景的颜色，向页面添加更多颜色。 在上述包含三列的表格的第一个单元格内单击一次。
13、 单击标签选择器中的 标签（单元格标签）以选择该单元格。 在“属性”检查器（“ 窗口”“属性”）中，在“背景颜色”文本框内单击一次。 “背景颜色”文本框位于“ 背景颜色 ”(Bg) 颜色框旁。注意 如果未出现“背景颜色” 文本框，请单击“ 属性”检查器右下角的展开箭头。 在“背景颜色” 文本框中，输入十六进制值 #993300，然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。 表格单元格的颜色即变为红棕色。 在上述包含三列的表格的第二个单元格内单击一次。 单击标签选择器中的 标签（单元格标签）以选择该单元格。 在“属性”检查器中，在“ 背景颜色 ”文本
14、框内单击一次，输入十六进制值 #F7EEDF，然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。 表格单元格的颜色即变为浅棕色。 重复第 5 7 步，将第三个表格单元格的颜色也更改为浅棕色。 设置完这三个单元格的颜色后，单击一次表格的外部，取消选择该表格。接下来，您将通过修改页面属性来更改整个页面的背景颜色。通过“页面属性”对话框可以设置一些页面属性，包括页面字体的大小和颜色、已访问链接的颜色以及页面边距等。1 选择“修改”“页面属性”。2 在“页面属性”对话框的“外观” 类别中，单击“背景颜色” 颜色框，然后从颜色选择器中选择黑色 (#000000)。
15、 关于选择颜色 在 HTML 中，颜色或者表示成十六进制值（如 #FF0000）或者表示为颜色名称（如红色） 。网页安全色是指使用 256 色模式时，无论在 Windows 还是在 Macintosh 系统中，在 Netscape Navigator 和 Microsoft Internet Explorer 中都显示相同的颜色。有 216 种常见颜色，而且任何结合了 00、33、66、99、CC 或 FF 对（RGB 值分别为 0、51、102、153、204 和 255）的十六进制值都代表网页安全色。在 Dreamweaver 中，可以通过在相应的文本框中输入十六进制值或从颜色选择器中选择
16、颜色来选择颜色。颜色选择器使用 216 色 Web 安全的调色板；从此调色板选择颜色即显示颜色的十六进制值。若要使用颜色选择器，只需单击颜色框并使用滴管选择颜色。您还可以使用颜色选择器匹配颜色。例如，如果页面上的某一图像包含某种蓝色阴影，并且您希望表格单元格的背景颜色与之匹配，那么可以选择该表格单元格，单击颜色框打开颜色选择器，将滴管移动到图像的蓝色阴影上，并单击鼠标按钮。颜色选择器将使用与通过滴管单击的颜色最接近的匹配颜色来填充您选择的区域。如果您通过这种方法选择颜色，颜色选择器为您选择的颜色可能不是网页安全色。3 单击“确定”。 页面的背景即变为黑色。4 保存您的工作。您的页面布局现已完成
17、。该布局包含一些表格，用于放置各种资源，如图像、文本和 Flash 视频 (FLV) 文件。在下一教程中，即教程：向页面添加内容中，您将学习如何使用 Dreamweaver 提供的各种插入功能向页面添加资源教程：向页面添加内容本教程介绍如何在 Macromedia Dreamweaver 8 中向 Web 页面添加内容。您可以向 Web 页面添加多种内容，包括图形、Macromedia Flash 文件、Macromedia Flash 视频文件、文本等。向页面添加内容后，即可在浏览器中进行预览，这样可以查看页面在 Web 上会如何显示。在本教程中，您将完成以下任务：查找文件复查您的任务插入图
18、像插入并播放 Flash 文件插入 Flash 视频插入文本创建链接在浏览器中预览页面查找文件在本教程中，您将从在教程：创建基于表格的页面布局中创建的基于表格的页面布局 (index.html) 开始。如果您没有完成该教程，则在继续本教程之前，可以先完成该教程，也可以打开该教程的完成版本，并从那里开始。该教程的完成版本 table_layout.html 位于 cafe_townsend 文件夹的 completed_files/dreamweaver 文件夹中，在教程：设置站点和项目文件中您已将 cafe_townsend 文件夹复制到了硬盘上。注意 如果从已完成的 table_layout
19、.html 文件开始本教程，而不使用在教程：创建基于表格的页面布局中创建的 index.html 文件，则本教程中的某些步骤和插图将与屏幕上的内容不一致。复查您的任务在本教程中，您将向虚构餐馆 Cafe Townsend 的主页添加资源。您将学习如何添加图像、Macromedia Flash 文件、Macromedia Flash 视频文件和文本。完成后的页面将如下所示：您可以看到，尚未对页面上的文本进行格式设置。这是因为您将在下一教程中才学习如何使用层叠样式表 (CSS) 设置文本格式。本教程所需的资源位于在教程：设置站点和项目文件中复制到硬盘上的 cafe_townsend 根文件夹中。如果您还没有完成该教程，则在继续之前，必须先完成该教程。在学习该教程过程中，您将确切了解如何找到资源。插入图像创建页面布局之后，您就可以将资源添加到页面。您将从添加图像开始。可以在 Dreamweaver 中使用多种方法向 Web 页面添加图像。本节中，您将使用不同的方法将四个不同的图像添加到 Cafe Townsend 的索引页。
