文章正文:
Dreamweaver 入门:创建基于表格的页面布(二))
设置表格属性
现在将使用"扩展表格"模式设置具体的表格属性,"扩展表格"模式是用于临时添加表格的单元格边距和间距并增加表格边框以简化编辑的一种功能。特别需要指出的是,它使您能够精确地放置插入点,而不会意外选择错误的表格或其它表格内容。
注意在"扩展表格"模式下完成对表格属性的设置后,应总是返回到"标准"模式。"扩展表格"模式不属于所见即所得环境,因此某些操作(如调整大小)不会得到预期的结果
选择"查看">"表格模式">"扩展表格模式"。

注意如果出现"开始使用扩展表格模式"对话框,请单击"确定"。
在第一个表格的第一行内单击一次。

在"属性"检查器("窗口">"属性")的"单元格高度"文本框中输入 90,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。

注意如果未出现"单元格高度"文本框,请单击"属性"检查器右下角的展开箭头。
在第一个表格的第二行内单击一次。

在"属性"检查器的"单元格高度"文本框中输入 166,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。
在第一个表格的第三行内单击一次。
在"属性"检查器的"单元格高度"文本框中输入 24,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。
现在第一个表格中的三行应具有不同的高度。

接下来,您将设置第二个表格(该表格包含三列)的属性。
在第二个表格的第一列内单击一次。

在"属性"检查器的"单元格宽度"文本框中输入 140,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。
在第二个表格的第二列内单击一次。
在"属性"检查器的"单元格宽度"文本框中输入 230,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。

将第三列的宽度设置为 330 个像素。
如果已打开表格选择器("查看">"可视化助理">"表格宽度"),将能看到刚才在各个表格列上输入的三个像素值。
您无需为这个表格的单元格输入任何高度值,因为这些单元格的高度将取决于您以后添加的内容。
最后,在最后一个表格(该表格包含一行和一列)内单击一次。
在"属性"检查器的"单元格高度"文本框中输入 24,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。
您的布局现在应如下所示:

单击"文档"窗口顶部的"退出扩展表格模式"链接,返回到"标准"模式。
保存页面。
插入图像占位符
图像占位符是在准备好将最终图形添加到 Web 页面之前使用的图形。在对 Web 页面进行布局时图像占位符很有用,因为通过使用图像占位符,您可以在真正创建图像之前确定图像在页面上的位置。
在文档窗口中,在第一个表格的第一行内单击一次。
选择"插入">"图像对象">"图像占位符"。
在"图像占位符"对话框中,执行下面的操作:
在"名称"文本框中,键入 banner_graphic。
在"宽度"文本框中,输入 700。
在"高度"文本框中,输入 90。
单击颜色框并从颜色选择器中选择一种颜色。在本教程中,我们选择了红棕色 (#993300)。
保留"替换文本"文本框为空。 关于…关于替换文本的说明 替换文本是 Web 页面上的图像的文字描述。它属于 HTML 代码,不会显示在页面上。对于大多数图像,提供替换文本是很重要的,这样使用屏幕阅读器或只显示文本的浏览器用户就可以访问这些图像所提供的文本信息。而对于仅显示 Web 站点徽标的横幅图形,无需提供替换文本。将"图像占位符"对话框中的"替换文本"文本框保留为空时,Dreamweaver 会在 img 标签中添加一个 alt="" 属性。以后,如果您要向某个图像添加替换文本,就可以选择该图像并在"属性"检查器中输入替换文本。例如,如果以后您想更改徽标以包括电话号码或地址,则能够以替换文本方式提供此信息。
单击"确定"。
图像占位符出现在第一个表格内。图像占位符显示最终放置于此处的图像的标签和大小属性。

注意当在浏览器中查看时,不显示图像占位符的标签文字和大小文本。
保存页面。 关于…关于图像占位符 图像占位符是在将最终图形添加到 Web 页面之前使用的临时图形;它不是显示在浏览器中的图形图像。在您发布站点之前,应该用适用于 Web 的图形文件(例如 GIF 或 JPEG)替换所有添加的图像占位符。
如果您有 Macromedia Fireworks,则可以根据 Dreamweaver 图像占位符创建新的图形。当您选择图像占位符并在"属性"检查器中单击"创建"按钮时,Fireworks 将打开并呈现一个新的画布。新图像的尺寸设置为与占位符图像相同的大小。接着,您可以随意创建并编辑图像,并替换 Dreamweaver 中的占位符图像。
向页面添加颜色
现在,您将通过设置某些表格单元格以及页面背景的颜色,向页面添加更多颜色。
在上述包含三列的表格的第一个单元格内单击一次。
单击标签选择器中的 标签(单元格标签)以选择该单元格。

在"属性"检查器("窗口">"属性")中,在"背景颜色"文本框内单击一次。
"背景颜色"文本框位于"背景颜色"(Bg) 颜色框旁。
注意如果未出现"背景颜色"文本框,请单击"属性"检查器右下角的展开箭头。
在"背景颜色"文本框中,输入十六进制值 #993300,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。

表格单元格的颜色即变为红棕色。
在上述包含三列的表格的第二个单元格内单击一次。
单击标签选择器中的 标签(单元格标签)以选择该单元格。
在"属性"检查器中,在"背景颜色"文本框内单击一次,输入十六进制值 #F7EEDF,然后按 Enter 键 (Windows) 或 Return 键 (Macintosh)。
表格单元格的颜色即变为浅棕色。
重复第 5-7 步,将第三个表格单元格的颜色也更改为浅棕色。
设置完这三个单元格的颜色后,单击一次表格的外部,取消选择该表格。
接下来,您将通过修改页面属性来更改整个页面的背景颜色。通过"页面属性"对话框可以设置一些页面属性,包括页面字体的大小和颜色、已访问链接的颜色以及页面边距等。
选择"修改">"页面属性"。
在"页面属性"对话框的"外观"类别中,单击"背景颜色"颜色框,然后从颜色选择器中选择黑色 (#000000)。

关于…选择颜色 在 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 中,可以通过在相应的文本框中输入十六进制值或从颜色选择器中选择颜色来选择颜色。颜色选择器使用 216 色 Web 安全的调色板;从此调色板选择颜色即显示颜色的十六进制值。若要使用颜色选择器,只需单击颜色框并使用滴管选择颜色。
您还可以使用颜色选择器匹配颜色。例如,如果页面上的某一图像包含某种蓝色阴影,并且您希望表格单元格的背景颜色与之匹配,那么可以选择该表格单元格,单击颜色框打开颜色选择器,将滴管移动到图像的蓝色阴影上,并单击鼠标按钮。颜色选择器将使用与通过滴管单击的颜色最接近的匹配颜色来填充您选择的区域。如果您通过这种方法选择颜色,颜色选择器为您选择的颜色可能不是网页安全色。
单击"确定"。
页面的背景即变为黑色。

保存您的工作。
您的页面布局现已完成。该布局包含一些表格,用于放置各种资源,如图像、文本和 Flash 视频 (FLV) 文件。在下一教程中,即教程:向页面添加内容中,您将学习如何使用 Dreamweaver 提供的各种插入功能向页面添加资源。
