Dreamweaver-实验4-使用 CSS 美化页面.docx

使用 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，在样式表中键入以下代码： 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 规则。在外部样式表中为 p 规则定义的所有属性和值将显示在下面的“属性”窗格中。 在“文档”窗口中，在设置格式的两个段落中的