着要使用cSS样式设量文本的样式,执行以下操作: 1在“窗口”菜单中,选择一个HTML文件(例如 index ht) 注盒1如果您的系统参数选择设置为不显示文件扩展名,则 index htm文件在“窗口”菜单中显示时其名称为 2选择“窗口”>“CSS样式”以显示“CSS样式”面板 3在“CSS样式”面板的顶部,单击“编辑样式”单选按钮显示可用的样式 如果以前没有为该文档定义样式,则没有样式可用。 回4在“CS样式”面板的底部,单击“时加样式表”按钮 即会出现“链接外部样式表”对话框 5在“链接外部样式表”对话框中,单击“浏览”定位一个样式表。 6在“选择样式表文件”对话框中,浏览到并选择您在 Assets文件夹中创建的新样式表,然后 单击“确定”( Windows)或“选择”( Macintosh)附加该样式表。 7在“链接外部样式表”对话框中,单击“确定”附加该样式表 该样式表的名称和内容显示在“CSS样式”面板中。样式表中定义的样式将应用到HTML 文档的文本中。例如,正文文本以Ⅴ edana显示。 8保存您的文档。 着要编样式寝中的样式,请执行以下操作 1在“CSS样式”面板的顶部,单击“编辑样式”单选按钮显示可用的样式。 回2在“CS样式”面板中选择CS文件的名称,然后单击“CsS样式”面板底部的“编辑样 式表”按钮。 即会出现一个对话框,显示该样式表中样式的名称c
36 第 2 章 若要使用 CSS 样式设置文本的样式，请执行以下操作： 1 在 “窗口”菜单中，选择一个 HTML 文件 （例如 index.htm）。 注意： 如果您的系统参数选择设置为不显示文件扩展名，则 index.htm 文件在 “窗口”菜单中显示时其名称为 “index”。 2 选择 “窗口” > “CSS 样式”以显示 “CSS 样式”面板。 3 在 “CSS 样式”面板的顶部，单击 “编辑样式”单选按钮显示可用的样式。 如果以前没有为该文档定义样式，则没有样式可用。 4 在 “CSS 样式”面板的底部，单击 “附加样式表”按钮。 即会出现 “链接外部样式表”对话框。 5 在 “链接外部样式表”对话框中，单击 “浏览”定位一个样式表。 6 在 “选择样式表文件”对话框中，浏览到并选择您在 Assets 文件夹中创建的新样式表，然后 单击 “确定” (Windows) 或 “选择” (Macintosh) 附加该样式表。 7 在 “链接外部样式表”对话框中，单击 “确定”附加该样式表。 该样式表的名称和内容显示在 “CSS 样式”面板中。样式表中定义的样式将应用到 HTML 文档的文本中。例如，正文文本以 Verdana 显示。 8 保存您的文档。 若要编辑样式表中的样式，请执行以下操作： 1 在 “CSS 样式”面板的顶部，单击 “编辑样式”单选按钮显示可用的样式。 2 在 “CSS 样式”面板中选择 CSS 文件的名称，然后单击 “CSS 样式”面板底部的 “编辑样 式表”按钮。 即会出现一个对话框，显示该样式表中样式的名称
3选择其中的一个样式,例如body,然后单击“编辑” 即会出现“CSS样式定义”对话框 body的CSs样式定义(在te 字体): edana, Arial, Helveti, sans-serif 样式① 变量 行高0 修饰:口下划线① □册除线① 闪烁 4输入文本的大小,例如13像素。按需要调整其他选项。 5单击“确定”重新定义样式 6编辑其他的样式。为了创建“ Global Car Rental”站点中使用的样式,请将body、td和th 样式的大小设置为13像素。 7编辑完样式后,单击“保存”按钮保存您的更改并关闭样式表对话框 更改后的样式将应用于您的文档。例如,正文文本以13像素的 Verdana显示 添加图像 在本课中,您可以将图像添加到正在处理的页。如果您具有自己的图像,则可以改用这些图像 但是第一次尝试添加图像时,我们建议使用 Dreamweaver的示例站点提供的图像。 如果您尚未按照第23页的“将资源添加到您的站点”中说明的过程将“ Global Car renta”站 点的资源拷贝到您的站点的本地根文件夹,现在请完成该操作 若要将团像添加到您的文档,请执行以下操作 1如果您尚未保存文档,请保存您的文档 您可以将图像插入未保存的文档中,但是如果这样做,将出现一个对话框,通知您用于图像 的URL将是到该图像的完整本地路径。如果您采取此方法, Dreamweaver将在您保存文档 时修复URL,但是在添加图像之前保存文档是最简单的方法 2若要插入图像以代替现有的图像占位符,请双击该占位符。例如,若要在“ Global car Rental”页的左上角插入公司徽标,请双击标有“ image(100x50)”的小占位符 即会出现“选择图像源”对话框。 在 Dreamweaver中创建您的第一个Web站点37
在 Dreamweaver 中创建您的第一个 Web 站点 37 3 选择其中的一个样式，例如 body，然后单击 “编辑”。 即会出现 “CSS 样式定义”对话框。 4 输入文本的大小，例如 13 像素。按需要调整其他选项。 5 单击 “确定”重新定义样式。 6 编辑其他的样式。为了创建 “Global Car Rental”站点中使用的样式，请将 body、td 和 th 样式的大小设置为 13 像素。 7 编辑完样式后，单击 “保存”按钮保存您的更改并关闭样式表对话框。 更改后的样式将应用于您的文档。例如，正文文本以 13 像素的 Verdana 显示。 添加图像 在本课中，您可以将图像添加到正在处理的页。如果您具有自己的图像，则可以改用这些图像， 但是第一次尝试添加图像时，我们建议使用 Dreamweaver 的示例站点提供的图像。 如果您尚未按照第 23 页的“将资源添加到您的站点”中说明的过程将“Global Car Rental”站 点的资源拷贝到您的站点的本地根文件夹，现在请完成该操作。 若要将图像添加到您的文档，请执行以下操作： 1 如果您尚未保存文档，请保存您的文档。 您可以将图像插入未保存的文档中，但是如果这样做，将出现一个对话框，通知您用于图像 的 URL 将是到该图像的完整本地路径。如果您采取此方法， Dreamweaver 将在您保存文档 时修复 URL，但是在添加图像之前保存文档是最简单的方法。 2 若要插入图像以代替现有的图像占位符，请双击该占位符。例如，若要在 “Global Car Rental”页的左上角插入公司徽标，请双击标有 “image (100 x 50)”的小占位符。 即会出现 “选择图像源”对话框
3在靠近此对话框的底部,确保“相对于”弹出式菜单设置为“文档” 有关文档相对URL和根目录相对URL的信息,请参见 Dreamweaver“帮助”(“帮助”> 使用 Dreamweaver”) 4浏览到 Assets文件夹中的某个图像(例如 logo jPg)。 5单击“确定”或“选择”( Windows)或者“打开”或“选择”( Macintosh)插入该图像。 在文档窗口中,该图像显示在刚才占位符所在的位置 6单击您在第30页的“添加图像占位符”中创建的大图像占位符将其选中。(不要双击该占位 符。) 您可以使用与用于另一个占位符的相同方法用图像替换此占位符,但是以下说明提供了一种 替代方法 7确保“站点”面板和属性检査器正在显示(如果它们不可见,则选择“窗口”>“站点文 件”和“窗口”>“属性”) 8在属性检查器中,从“源文件”文本框的“指向文件”图标拖到“站点”面板。(确保是从 源文件”文本框旁边的“指向文件”图标而不是“链接”文本框旁边的那个“指向文件” 图标开始拖动的。)当您指向 Assets文件夹时继续按住鼠标按钮(如果该文件夹关闭);该 文件夹将打开。当您指向 Images文件夹时仍继续按住鼠标按钮;该文件夹也将打开。继续按 住鼠标按钮,直到鼠标指针在 vintage.Jpg文件上为止。松开鼠标按钮以选择 vintage. Jpg 在文档窗口中,该图像显示在刚才占位符所在的位置。如果显示错误的图像,则查看“源文 件”文本框中的文件名;如果您选择了错误的文件,则再次拖动“指向文件”图标 9若要在没有插入占位符的位置插入图像,请在设计视图中单击将插入点放置在需要显示图像 的位置,然后选择“插入”>“图像” 如果您插入一个图像,而该图像的图像文件不在您的站点的本地根文件夹中,则 Dreamweaver提供选项自动将该图像拷贝到站点中 10保存您的文档。 设置背景颜色 在 Dreamweaver附带的预先设计的页中,表格单元格的背景颜色大多设置为灰色;对于大多数 站点,您将需要更改颜色来匹配站点的颜色方案 着要设量表格单元格的背最颜色,请执行以下操作: 1如果未打开属性检査器,则选择“窗口”>“属性”将其打开 2如果属性检査器已折叠(只显示其标题条),则单击标题条中的扩展箭头将其展开
38 第 2 章 3 在靠近此对话框的底部，确保 “相对于”弹出式菜单设置为 “文档”。 有关文档相对 URL 和根目录相对 URL 的信息，请参见 Dreamweaver “帮助”（“帮助” > “使用 Dreamweaver”）。 4 浏览到 Assets 文件夹中的某个图像 （例如 logo.jpg）。 5 单击 “确定”或 “选择” (Windows) 或者 “打开”或 “选择” (Macintosh) 插入该图像。 在文档窗口中，该图像显示在刚才占位符所在的位置。 6 单击您在第 30 页的“添加图像占位符”中创建的大图像占位符将其选中。（不要双击该占位 符。） 您可以使用与用于另一个占位符的相同方法用图像替换此占位符，但是以下说明提供了一种 替代方法。 7 确保 “站点”面板和属性检查器正在显示 （如果它们不可见，则选择 “窗口” > “站点文 件”和 “窗口” > “属性”）。 8 在属性检查器中，从 “源文件”文本框的 “指向文件”图标拖到 “站点”面板。（确保是从 “源文件”文本框旁边的 “指向文件”图标而不是 “链接”文本框旁边的那个 “指向文件” 图标开始拖动的。）当您指向 Assets 文件夹时继续按住鼠标按钮 （如果该文件夹关闭）；该 文件夹将打开。当您指向 images 文件夹时仍继续按住鼠标按钮；该文件夹也将打开。继续按 住鼠标按钮，直到鼠标指针在 vintage.jpg 文件上为止。松开鼠标按钮以选择 vintage.jpg。 在文档窗口中，该图像显示在刚才占位符所在的位置。如果显示错误的图像，则查看 “源文 件”文本框中的文件名；如果您选择了错误的文件，则再次拖动 “指向文件”图标。 9 若要在没有插入占位符的位置插入图像，请在设计视图中单击将插入点放置在需要显示图像 的位置，然后选择 “插入” > “图像”。 如 果 您 插 入 一 个 图 像，而 该 图 像 的 图 像 文 件 不 在 您 的 站 点 的 本 地 根 文 件 夹 中，则 Dreamweaver 提供选项自动将该图像拷贝到站点中。 10 保存您的文档。 设置背景颜色 在 Dreamweaver 附带的预先设计的页中，表格单元格的背景颜色大多设置为灰色；对于大多数 站点，您将需要更改颜色来匹配站点的颜色方案。 若要设置表格单元格的背景颜色，请执行以下操作： 1 如果未打开属性检查器，则选择 “窗口” > “属性”将其打开。 2 如果属性检查器已折叠 （只显示其标题条），则单击标题条中的扩展箭头将其展开
3如果属性检査器未显示所有属性,则单击属性检査器右下角的扩展箭头査看所有属性。 格式)无A默认字体 ˇ大小()无M[B量三昌 母目标) 4按住C叫l键( Windows或 Command键( Macintosh)单击某个单元格以选择该单元格。例 如,在“ Global Car Renta”示例页中,现在有一个表格单元格包含汽车租赁公司的徽标图 像;按住C叫rl键或 Command键单击这个包含徽标图像的单元格 属性检査器的下半部分显示单元格属性。如果属性检査器的下半部分不可见,则单击属性检 查器右下角的扩展箭头查看所有属性 5在属性检査器中,单击显示在两个“背景”标签中下面那个标签旁边的“背景颜色”按钮 青景颜色G 即会出现颜色选择器,鼠标指针变为滴管的形状 6选择一种颜色。您可以在颜色选择器的调色板中选择颜色,或单击显示上的任意位置来选择 所单击像素的颜色。例如,单击 Global徽标图像的背景使表格单元格的背景颜色与图像的背 景颜色一致 表格单元格的背景颜色变为您所选择的颜色 7为每个要更改其背景颜色的表格单元格重复该过程。在“ Global Car rental”示例页中,更 改所有导航条表格单元格和第二列文本中标题单元格(该单元格现在包含文本“ Globe Trotter promotions”)的背景颜色,使它们都与 Global徽标的背景颜色一致。 8保存您的文档 在 Dreamweaver中创建您的第一个Web站点39
在 Dreamweaver 中创建您的第一个 Web 站点 39 3 如果属性检查器未显示所有属性，则单击属性检查器右下角的扩展箭头查看所有属性。 4 按住 Ctrl 键 (Windows) 或 Command 键 (Macintosh) 单击某个单元格以选择该单元格。例 如，在 “Global Car Rental”示例页中，现在有一个表格单元格包含汽车租赁公司的徽标图 像；按住 Ctrl 键或 Command 键单击这个包含徽标图像的单元格。 属性检查器的下半部分显示单元格属性。如果属性检查器的下半部分不可见，则单击属性检 查器右下角的扩展箭头查看所有属性。 5 在属性检查器中，单击显示在两个 “背景”标签中下面那个标签旁边的 “背景颜色”按钮。 即会出现颜色选择器，鼠标指针变为滴管的形状。 6 选择一种颜色。您可以在颜色选择器的调色板中选择颜色，或单击显示上的任意位置来选择 所单击像素的颜色。例如，单击 Global 徽标图像的背景使表格单元格的背景颜色与图像的背 景颜色一致。 表格单元格的背景颜色变为您所选择的颜色。 7 为每个要更改其背景颜色的表格单元格重复该过程。在 “Global Car Rental”示例页中，更 改所有导航条表格单元格和第二列文本中标题单元格 （该单元格现在包含文本 “GlobeTrotter Promotions”）的背景颜色，使它们都与 Global 徽标的背景颜色一致。 8 保存您的文档
查看代码 让我们暂时休息一下看看当您将内容添加到页时 Dreamweaver在执行哪些操作。当您添加文 本、图像和其他内容时, Dreamweaver生成HTML代码 Dreamweaver允许您以下面两种方式中的任意一种查看文档:设计视图(在设计视图中文档看 起来与它在浏览器中的外观非常相似)和代码视图(您可以在代码视图中看到基础HTML代 码)。您还可以使用同时显示代码视图和设计视图的拆分视图 着娶查看文档的HTML代码,囊执行以下操作: 1如果文档工具栏尚不可见,则选择“查看”>“工具栏”>“文档”。 圖 2在文档工具栏中,单击“显示代码视图和设计视图”按钮 窗口拆分,显示基础HTML代码 Gla bal ntage 您可以在代码视图中编辑代码。对代码进行的更改在您刷新视图之前不会出现在设计视图 着娶让代码更改显示在设计视图中,清执行以下操作之一: 单击设计视图中的任意位置。 ·单击文档工具栏中的“刷新”按钮 Dreamweaver提供了许多高级功能帮助您在代码视图中进行编码,有关更多信息,请参见第3 章第49页的“在 Dreamweaver中编辑代码 当您处理自己的页时,您可以使用任何一个最适合的视图。我们假设在本章剩下的部分中您将使 用设计视图 着萋只显示设计视图,请执行以下操作: 1如果文档工具栏尚不可见,则选择“査看”>“工具栏”>“文档”。 圆2在文档工具栏中,单击“设计视图”按钮 40第2章
40 第 2 章 查看代码 让我们暂时休息一下看看当您将内容添加到页时 Dreamweaver 在执行哪些操作。当您添加文 本、图像和其他内容时， Dreamweaver 生成 HTML 代码。 Dreamweaver 允许您以下面两种方式中的任意一种查看文档：设计视图 （在设计视图中文档看 起来与它在浏览器中的外观非常相似）和代码视图 （您可以在代码视图中看到基础 HTML 代 码）。您还可以使用同时显示代码视图和设计视图的拆分视图。 若要查看文档的 HTML 代码，请执行以下操作： 1 如果文档工具栏尚不可见，则选择 “查看” > “工具栏” > “文档”。 2 在文档工具栏中，单击 “显示代码视图和设计视图”按钮。 窗口拆分，显示基础 HTML 代码。 您可以在代码视图中编辑代码。对代码进行的更改在您刷新视图之前不会出现在设计视图 中。 若要让代码更改显示在设计视图中，请执行以下操作之一： • 单击设计视图中的任意位置。 • 单击文档工具栏中的 “刷新”按钮。 Dreamweaver 提供了许多高级功能帮助您在代码视图中进行编码，有关更多信息，请参见第 3 章第 49 页的 “在 Dreamweaver 中编辑代码”。 当您处理自己的页时，您可以使用任何一个最适合的视图。我们假设在本章剩下的部分中您将使 用设计视图。 若要只显示设计视图，请执行以下操作： 1 如果文档工具栏尚不可见，则选择 “查看” > “工具栏” > “文档”。 2 在文档工具栏中，单击 “设计视图”按钮