Dreamweaver-实验4-使用CSS美化页面教材.docxVIP

使用 CSS 美化页面 本节介绍如何在 Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式。我们可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本，从而能更加灵活自如地控制页面的外观。 在本节中，你将使用层叠样式表 (CSS) 设置虚构餐馆 Cafe Townsend 主页上文本的格式。你将创建不同类型的 CSS 规则来设置正文文本的格式，还将设置该页左侧的链接文本的格式来创建导航条。 完成后的页面将如下图所示。 一、创建新的css样式表： 首先，我们将创建包含 CSS 规则（定义段落文本样式）的外部样式表。在外部样式表中创建样式时，可以在一个中央位置同时控制多个 Web 页面的外观，而不需要为每个 Web 页面分别设置样式。 外部 CSS 样式表是存储在一个单独的外部 .css 文件（并非 HTML 文件）中的一系列 CSS 规则。利用文档 head 部分中的链接，该 .css 文件被链接到 Web 站点中的一个或多个页面。 1,选择“文件”“新建”。 在“新建文档”对话框中的“类别”列中选择“基本页”，在“基本页”列中选择“CSS”，然后单击“创建”。 2，将该页保存（“文件”“保存”）为 cafe_townsend-1.css。保存样式表时，请确保将其保存到 cafe_townsend 文件夹（我们的 Web 站点的根文件夹）中。 3，在样式表中键入以下代码：  HYPERLINK javascript: 复制代码 p{ font-family: Verdana, sans-serif; font-size: 11px; color: #000000; line-height: 18px; padding: 3px; }  当我们键入代码时，Dreamweaver 将使用代码提示为我们建议一些选项，以帮我们完成输入。当看到希望 Dreamweaver 为我们完成键入的代码时，请按 Enter 键 。 不要忘记在每行结尾处的属性值后面加上一个分号。 4，保存样式表。 二、附加样式表: ps:接下来，将该样式表附加到 index.html 页面中。 我们将样式表附加到 Web 页面中时，在样式表中定义的规则将应用到页面上的相应元素。例如，当我们将 cafe_townsend.css 样式表附加到 index.html 页时，将根据我们定义的 CSS 规则设置所有段落文本（用 HTML 代码中的 p 标签设置格式的文本）(上面文本)的格式。 1，在“文档”窗口中，打开 index.html 文件。（如果该文件已打开，则请单击它的选项卡。） , 2．选择页面右边的第一段文本。 3，在“属性”面板查看，并确保使用“段落标签”设置了该段落的格式。 如果“属性”检查器中的“格式”弹出式菜单显示“段落”，则已使用段落标签设置了段落的格式。如果“属性”检查器中的“格式”弹出式菜单显示“无”或其它内容，则选择“段落”来设置段落的格式。 4，对第二段重复第 3 步。 将第二段也设置为段落格式。 5，在“CSS 样式”面板（“窗口”“CSS 样式”）中，单击位于面板右下角的“附加样式表”按钮。 6，在“附加外部样式表”对话框中，单击“浏览”并浏览到上一节创建的 cafe_townsend-1.css 文件。 7，单击“确定”。 四、研究“CSS 样式”面板 : CSS 样式”面板可让我们跟踪影响当前所选页面元素的 CSS 规则和属性，或影响整个文档的规则和属性，还可以在不打开外部样式表的情况下修改 CSS 属性。 确保 index.html 页在“文档”窗口中打开。 在“CSS 样式”面板（“窗口”“CSS 样式”）中，单击面板顶部的“全部”，然后检查我们的 CSS 规则。 在“全部”模式下，CSS 面板向我们显示应用到当前文档的全部 CSS 规则，不管这些规则是在外部样式表中，还是在自身文档中。我们应在“全部规则”窗格中看到两个主要类别：一个 style 标签类别和一个 cafe_townsend.css 类别。 若未展开 style 标签类别，则请单击加号 (+) 展开该类别。 单击正文规则。 则再CSS面板上会会出现以下图示。 这是因为我们以前在通过使用“修改页面属性”对话框设置页面的背景色时，Dreamweaver 自动编写了一个内置于文档的 CSS 样式。Ps:(在实验2中曾对背景颜色设置为黑色#000000) 我们可能需要折叠其它面板，如“文件”面板，以便看到完整的“CSS 样式”面板，还可以通过拖动窗格之间的边界来更改“CSS 样式”面板的长度。 单击加号 (+) 展开 cafe_townsend.css 类别。 单击 p