4单击“确定” 随即会出现一个具有指定尺寸的灰色框。这就是图像的占位符,用于帮助您对页进行布局,而 无需使用最终的图像。 无标颗文档( Global Car/ index,htm) mage Dolor.. Sic Amet. Consectetur SplashImage (523 r 220) adipiscing Lorem ipsum nonumy eirmod tempor invi dunt ut. labor li quam erat, sed diam voluptua. Lorem ipsum dolor amet, consetetur sadipscing elitr od)able>(t)化dp>④b>《ESp1ahma 5您可能需要加宽文档窗口以查看右侧的文本列 列设量为自动伸展 ndex htm页中右边的侧栏文本列是固定宽度的。要使它随着访问者调整浏览器窗口的大小改变 宽度,请让该列设置为自动伸展。然后调整包含图像占位符的宽列的宽度 着娶使左边的列设量为自动伸展,执行以下操作 1如果未显示插入栏,则选择“窗口”>“插入”显示插入栏 2在插入栏上,单击“布局”选项卡 3单击“布局视图”按钮切换到布局视图 4阅读信息对话框,然后单击“确定”。 对于页中的每个表格,都会在表格的左上角显示一个绿色的选项卡。该选项卡上标有“布局 表格” 5在文档窗口中,单击您插入的图像占位符上方左侧的“布局表格”选项卡,选择包含两个文 本列的表格 两个文本列中每列的上方都有一个列标题,显示每列的宽度。 在 Dreamweaver中创建您的第一个Web站点
在 Dreamweaver 中创建您的第一个 Web 站点 31 4 单击 “确定”。 随即会出现一个具有指定尺寸的灰色框。这就是图像的占位符，用于帮助您对页进行布局，而 无需使用最终的图像。 5 您可能需要加宽文档窗口以查看右侧的文本列。 列设置为自动伸展 index.htm 页中右边的侧栏文本列是固定宽度的。要使它随着访问者调整浏览器窗口的大小改变 宽度，请让该列设置为自动伸展。然后调整包含图像占位符的宽列的宽度。 若要使左边的列设置为自动伸展，请执行以下操作： 1 如果未显示插入栏，则选择 “窗口” > “插入”显示插入栏。 2 在插入栏上，单击 “布局”选项卡。 3 单击 “布局视图”按钮切换到布局视图。 4 阅读信息对话框，然后单击 “确定”。 对于页中的每个表格，都会在表格的左上角显示一个绿色的选项卡。该选项卡上标有 “布局 表格”。 5 在文档窗口中，单击您插入的图像占位符上方左侧的 “布局表格”选项卡，选择包含两个文 本列的表格。 两个文本列中每列的上方都有一个列标题，显示每列的宽度
6如果文档窗口太窄以致于无法显示右侧列的全部内容,则加宽您的文档窗口 即使在您加宽了文档窗口之后,其他“布局表格”选项卡也可能遮住右侧列标题中显示宽度 的数字。不要单击其他的“布局表格”选项卡 7小心地单击右侧列上的列标题。(一定要单击右侧列中绿色“布局表格”选项卡顶部的上 方。) 随即会出现一个弹出式菜单。 Dolor Sic Amet Consectetur gna aliquyamLore清除单元格高度( dol使单元格宽度一致 etetur 移除所有分隔符图像④ adilauua 8在弹出式菜单中选择“列设置为自动伸展” 出现一个标题为“选择间隔图像”的对话框,提示您选择一个间隔图像。 注盒:如果您已经选择了间隔图像,则不出现此对话框;在本例中,右边的列现在已设置为自动伸展的列。如果不显示 该对话框,则跳过此过程其余的步骤。 9在“选择间隔图像”对话框中,选择“使用现存的间隔图像文件”选项并单击“确定 出现另一个对话框,标题为“选择间隔图像文件”。 ⑩0在“选择间隔图像文件”对话框中,浏览到您的本地根文件夹并打开 Assets文件夹。然后打 开 Images文件夹并选择 spacergif,,随后单击“确定”( Windows)或“打开”( Macintosh) 右侧的列现在已设置为自动伸展列;在浏览器中,在以固定的宽度绘制左侧的列之后,右侧 列的宽度将尽可能地伸展 着要调主文本列的宽度,请执行以下操作 1单击左侧列上方的列标题,并从出现的弹出式菜单中选择“使单元格宽度一致” 左侧的列现在已设置为固定的宽度(等于图像的宽度加上单元格填充和单元格间距)。 2单击插入栏中的“标准视图”按钮切换回标准视图。 3保存您的文档 32第2章
32 第 2 章 6 如果文档窗口太窄以致于无法显示右侧列的全部内容，则加宽您的文档窗口。 即使在您加宽了文档窗口之后，其他 “布局表格”选项卡也可能遮住右侧列标题中显示宽度 的数字。不要单击其他的 “布局表格”选项卡。 7 小心地单击右侧列上的列标题。（一定要单击右侧列中绿色 “布局表格”选项卡顶部的上 方。） 随即会出现一个弹出式菜单。 8 在弹出式菜单中选择 “列设置为自动伸展”。 出现一个标题为 “选择间隔图像”的对话框，提示您选择一个间隔图像。 注意：如果您已经选择了间隔图像，则不出现此对话框；在本例中，右边的列现在已设置为自动伸展的列。如果不显示 该对话框，则跳过此过程其余的步骤。 9 在 “选择间隔图像”对话框中，选择 “使用现存的间隔图像文件”选项并单击 “确定”。 出现另一个对话框，标题为 “选择间隔图像文件”。 10 在 “选择间隔图像文件”对话框中，浏览到您的本地根文件夹并打开 Assets 文件夹。然后打 开 Images 文件夹并选择 spacer.gif，随后单击“确定”(Windows) 或“打开”(Macintosh)。 右侧的列现在已设置为自动伸展列；在浏览器中，在以固定的宽度绘制左侧的列之后，右侧 列的宽度将尽可能地伸展。 若要调整主文本列的宽度，请执行以下操作： 1 单击左侧列上方的列标题，并从出现的弹出式菜单中选择 “使单元格宽度一致”。 左侧的列现在已设置为固定的宽度 （等于图像的宽度加上单元格填充和单元格间距）。 2 单击插入栏中的 “标准视图”按钮切换回标准视图。 3 保存您的文档
设置页面标题 您可以设置页面的多种属性,包括其标题、背景颜色、文本颜色等。(若要设置页面属性,请选 择“修改”>“页面属性”。)但是如果您只想设置页面标题(显示在浏览器标题条中的标题) 则可以在文档工具栏中完成该操作 着为您的文档设量页面标愿,请执行以下操作: 1如果文档工具栏不可见,则选择“查看”>“工具栏”>“文档”。 即会出现 Dreamweaver的文档工具栏。在集成工作区中,默认情况下它显示在文档区域的顶 部;在浮动工作区中,它显示为文档窗口的一部分。 显示代码视图 文件管理 显示设计视图 在浏览器中预览/调试 文档标题 團西标题标题文档 视图选项 代码导航 显示代码视图和设计视图 2在“标题”文本框中(其中显示“无标题文档”),键入该页的标题,例如“ Global Car Rental主页”。然后按 Enter键( Windows)或 Return键( Macintosh)查看文档窗口标题条 中页面标题的更新。 3保存您的文档 添加具有样式的文本 您可以在文档窗囗中键入文本,或从另一个源(例如 Microsoft word文件)拷贝并粘贴文本。 然后,您可以使用“CSS样式”面板对文本进行格式设置。 在输入文本之前,通过选择“查看”>“设计”确保您正在设计视图中 添加文本 当您在设计视图中输入文本并对其进行格式设置时, Dreamweaver创建基础HTML代码。若要 直接输入代码,请使用代码视图。有关代码视图的信息,请参见第3章第49页的“在 Dreamweaver中编辑代码”。 Dreamweaver附带的预先设计的页包含占位符“ Lorem ipsum”文本,如果您的页基于预先设 计的页,则当准备好开始添加内容时,您将需要用自己的文本替换占位符文本。但是,在您完成 设计和布局之前在适当的位置保留占位符文本将非常有用,这样您或您的客户可以查看布局,而 不会被文本分散注意力。 在 Dreamweaver中创建您的第一个Web站点33
在 Dreamweaver 中创建您的第一个 Web 站点 33 设置页面标题 您可以设置页面的多种属性，包括其标题、背景颜色、文本颜色等。（若要设置页面属性，请选 择“修改”>“页面属性”。） 但是如果您只想设置页面标题（显示在浏览器标题条中的标题）， 则可以在文档工具栏中完成该操作。 若要为您的文档设置页面标题，请执行以下操作： 1 如果文档工具栏不可见，则选择 “查看” > “工具栏” > “文档”。 即会出现 Dreamweaver 的文档工具栏。在集成工作区中，默认情况下它显示在文档区域的顶 部；在浮动工作区中，它显示为文档窗口的一部分。 2 在 “标题”文本框中 （其中显示 “无标题文档”），键入该页的标题，例如 “Global Car Rental 主页”。然后按 Enter 键 (Windows) 或 Return 键 (Macintosh) 查看文档窗口标题条 中页面标题的更新。 3 保存您的文档。 添加具有样式的文本 您可以在文档窗口中键入文本，或从另一个源 （例如 Microsoft Word 文件）拷贝并粘贴文本。 然后，您可以使用 “CSS 样式”面板对文本进行格式设置。 在输入文本之前，通过选择 “查看” > “设计”确保您正在设计视图中。 添加文本 当您在设计视图中输入文本并对其进行格式设置时，Dreamweaver 创建基础 HTML 代码。若要 直接输入代码，请使用代码视图。有关代码视图的信息，请参见第 3 章第 49 页的 “在 Dreamweaver 中编辑代码”。 Dreamweaver 附带的预先设计的页包含占位符 “Lorem ipsum”文本，如果您的页基于预先设 计的页，则当准备好开始添加内容时，您将需要用自己的文本替换占位符文本。但是，在您完成 设计和布局之前在适当的位置保留占位符文本将非常有用，这样您或您的客户可以查看布局，而 不会被文本分散注意力。 显示代码视图 显示设计视图 文档标题 刷新设计视图 参考 代码导航 视图选项 在浏览器中预览 / 调试 文件管理 实时数据视图 显示代码视图和设计视图
考要将文本添加到您的页,请执行以下操作: 1单击三下左边列顶部(图像占位符下面)的粗体占位符文本以选择整个粗体段落。 2键入“ Safety Tips”(或者,如果愿意,可以键入您自己的标题文本 3选择水平线下面的三个占位符文本段落。 4键入以下文本(或者,如果愿意,可以键入您自己的文本) The safety of our loyal customers is important to us. Read these safety tips to ensure that our next trip goes off without a hitch 5在右边的列中,单击三下单词“News”并键入“ Globe- Trotter promotions”将其替换。 6在“站点”面板中,在您的 Assets文件夹中找到 promotions. txt文件。双击该文件的图标将 其打开。 此文件包含 Global Car Rentals特别促销的拷贝。 !在此示例站点中,包含该拷贝的文件是一个文本文件。对于其他站点,提供给您的可能是 Microsoft Word生 成的HTML文档;您可以 ∏TML并使用 Dreamweaver的“导入 Word HTmL”命令对其进行清理。有关 更多信息,请参见 Dreamy 帮助”(“帮助”>“使用 Dreamweaver”)。 请注意,该文本文件显示在新的文档窗口中,沿左侧显示一个深色的竖条。此窗口在代码视 图中,因为该文件不是HTML文件,所以不能切换到设计视图 why not get away this weekend? For a limA ent five vehicles fron Global in the ne :如果愿意,可以在页上使用您自己的文本, 所提供的文本 7在 promotions. txt文档窗口中,按 Control+A组合键( Windows)或 Command+A组合键 ( Macintosh)选择所有文本,然后选择“编辑”>“拷贝”来拷贝该文本。 8在 index. htm文档窗口中,选择右侧列下面单元格中的所有占位符文本,然后选择“编辑” 文本被粘贴到表格中 9在单词“Rent”(您刚粘贴的文本的第二段)之前单击,然后选择“插入”>“水平线”以 便在两个促销之间放置一条水平线。 10保存您的文档。 11切换到 promotions. txt文件。选择“文件”>“关闭”关闭该文件 34第2章
34 第 2 章 若要将文本添加到您的页，请执行以下操作： 1 单击三下左边列顶部 （图像占位符下面）的粗体占位符文本以选择整个粗体段落。 2 键入 “Safety Tips”（或者，如果愿意，可以键入您自己的标题文本）。 3 选择水平线下面的三个占位符文本段落。 4 键入以下文本 （或者，如果愿意，可以键入您自己的文本）： The safety of our loyal customers is important to us. Read these safety tips to ensure that your next trip goes off without a hitch! 5 在右边的列中，单击三下单词 “News”并键入 “Globe-Trotter Promotions”将其替换。 6 在 “站点”面板中，在您的 Assets 文件夹中找到 promotions.txt 文件。双击该文件的图标将 其打开。 此文件包含 Global Car Rentals 特别促销的拷贝。 注意：在此示例站点中，包含该拷贝的文件是一个文本文件。对于其他站点，提供给您的可能是 Microsoft Word 生 成的 HTML 文档；您可以导入该 HTML 并使用 Dreamweaver 的 “导入 Word HTML”命令对其进行清理。有关 更多信息，请参见 Dreamweaver “帮助”（“帮助” > “使用 Dreamweaver”）。 请注意，该文本文件显示在新的文档窗口中，沿左侧显示一个深色的竖条。此窗口在代码视 图中，因为该文件不是 HTML 文件，所以不能切换到设计视图。 注意：如果愿意，可以在页上使用您自己的文本，而不使用所提供的文本。 7 在 promotions.txt 文档窗口中，按 Control+A 组合键 (Windows) 或 Command+A 组合键 (Macintosh) 选择所有文本，然后选择 “编辑” > “拷贝”来拷贝该文本。 8 在 index.htm 文档窗口中，选择右侧列下面单元格中的所有占位符文本，然后选择 “编辑” > “粘贴”。 文本被粘贴到表格中。 9 在单词 “Rent”（您刚粘贴的文本的第二段）之前单击，然后选择 “插入” > “水平线”以 便在两个促销之间放置一条水平线。 10 保存您的文档。 11 切换到 promotions.txt 文件。选择 “文件” > “关闭”关闭该文件
将样式添加到文本 在HTML中设计文本的样式有多种方法。一种方法是使用层叠样式表(CSS)来定义特定的 HTML标签以按照特定方式设置格式 本课说明如何从预先设计的样式表创建简单的CSS样式表,然后将新样式表应用于文本并修改 样式 着娶创建cSs样式褒,执行以下操作: 1选择“文件”>“新建 2在“新建文档”对话框中,从左边的类别列表中选择“CSS样式表”类别。 对话框内中间列的列表重新标为“CSS样式表”。随即会出现一组预先设计的样式表。 3在“CSS样式表”列表中,选择一个样式表。对于“ Global Car Rental”站点,选择“基 本: Verdana”,该样式表通过指定body、td和th标签的字体对它们进行重新定义。然后 单击“创建” 新建文档 「常板 Css样式表 基本页 模板页 样式表 页面设计(有辅助功能的)百链接效果 帮助Q数选择) 获取更多内容 的①)[取消 Dreamweaver将创建一个新的文本文件,该文件包含一小组预先定义的CSS样式 4选择“文件”>“保存”来保存新的CSS文件。将其保存在站点的Ases文件夹中并命名为 text.cs”(或任何其他所需的名称) 5选择“文件”> 以关闭该CSS文件。 在 Dreamweaver中创建您的第一个Web站点35
在 Dreamweaver 中创建您的第一个 Web 站点 35 将样式添加到文本 在 HTML 中设计文本的样式有多种方法。一种方法是使用层叠样式表 (CSS) 来定义特定的 HTML 标签以按照特定方式设置格式。 本课说明如何从预先设计的样式表创建简单的 CSS 样式表，然后将新样式表应用于文本并修改 样式。 若要创建 CSS 样式表，请执行以下操作： 1 选择 “文件” > “新建”。 2 在 “新建文档”对话框中，从左边的类别列表中选择 “CSS 样式表”类别。 对话框内中间列的列表重新标为 “CSS 样式表”。随即会出现一组预先设计的样式表。 3 在 “CSS 样式表”列表中，选择一个样式表。对于 “Global Car Rental”站点，选择 “基 本：Verdana”，该样式表通过指定 body、 td 和 th 标签的字体对它们进行重新定义。然后 单击 “创建”。 Dreamweaver 将创建一个新的文本文件，该文件包含一小组预先定义的 CSS 样式。 4 选择“文件”>“保存”来保存新的 CSS 文件。 将其保存在站点的 Assets 文件夹中并命名为 “text.css”（或任何其他所需的名称）。 5 选择 “文件” > “关闭”以关闭该 CSS 文件