Dreamweaver cs4 网站制作入门.docx

《Dreamweaver cs4 网站制作入门.docx》由会员分享，可在线阅读，更多相关《Dreamweaver cs4 网站制作入门.docx（28页珍藏版）》请在三一办公上搜索。

1、Dreamweaver cs4 网站制作入门Dreamweaver cs4 网站制作入门 网站制作实例一： Cafe Townsend Cafe Townsend 一、创建工作目录 工作目录就是你建立站点时所要使用的本地文件夹，Dreamweaver 将此文件夹称为本地站点。本地文件夹通常是你的计算机硬盘上的一个文件夹，例如：D:mywebsites 。 1、在 D：盘上创建名为 mywebsites 的新文件夹。 2、下载所需素材。cafe_townsend.rar 3、将下载得到的素材解压缩到 mywebsites 文件夹中。 你将使用 D:mywebsitescafe_townsend

2、文件夹作为站点“cafe townsend” 的根文件夹。 二、定义本地文件夹 您必须为创建的每一个新 Web 站点定义 Dreamweaver 本地文件夹。本地文件夹是您在硬盘上用来存储站点文件的工作副本的文件夹。如果不定义本地文件夹，Dreamweaver 中的某些功能可能无法正确运行。 如果定义了本地文件夹，您还可以管理文件，并使用一些文件传输方法在本地与 Web 服务器之间传输文件。 1、启动 Dreamweaver，选择“站点 ”“管理站点”。 2、在弹出的“管理站点”对话框中单击“新建”按钮，然后选择“站点”。 3、在弹出的“站点定义”对话框中，如果显示向导，则单击“高级”选项卡，

3、然后从“分类”列表中选择“本地信息”。 4、在“站点名称”文本框中，输入 Cafe Townsend 作为站点名称。 5、在“本地根文件夹”文本框中，指定在上一节中复制到 D:mywebsite 文件夹中的 cafe_townsend 文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“本地根文件夹”文本框中输入路径。 6、在“默认图像文件夹”文本框中，指定 cafe_townsend 文件夹中已有的 images 文件夹。你可以单击文件夹图标来浏览并选择该文件夹，或者在“默认图像文件夹”文本框中输入路径。 7、单击“确定”。随即出现“管理站点”对话框，显示您的新站点。 8、单击“完成”

4、关闭“管理站点”对话框。此时“文件”面板显示当前站点的新本地根文件夹。“文件”面板中的文件列表将充当文件管理器，允许您复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。 现在，已经为您的站点定义了一个本地根文件夹。本地根文件夹是本地计算机上用来存储 Web 页面的工作副本的文件夹。如果您以后想要发布页面并使其可供公众访问，则需要在运行 Web 服务器的远程计算机上定义一个远程文件夹，用来存储本地文件的已发布副本。 三、了解你的任务 下图是一张为 Cafe Townsend设计的、完整的和符合要求的设计草样。作为 Web 设计人员，您需要对草样进行转换，使之最终形成可以使用的 Web 页

5、面。 创建基于表格的页面布局 表格是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。你可以使用表格快速轻松地创建布局。在本实例中，你将在一个新的 Dreamweaver 文档中创建若干表格。这些表格的行和单元格实际上将用作你将在以后添加的内容的“容器框”。 一、创建并保存新页面 建立站点并检查设计草样后，你就可以开始创建 Web 页面了。首先你将创建一个新页面，并将它保存到你的 Web 站点的本地根文件夹 cafe_townsend 中。该页面最终将成为虚构餐馆 Cafe Townsend 的主页。 1、在 Dreamweaver 中，选择“文件”“新建”。 2、在

6、“新建文档”对话框的“常规”选项卡上，从“类别”列表中选择“基本页”，从“基本页”列表中选择“HTML”，然后单击“创建”。 3、选择“文件”“另存为”。 4、在“另存为”对话框中，浏览至定义为站点的本地根文件夹的 cafe_townsend 文件夹并打开该文件夹。 5、在“文件名”文本框中输入 index.html，然后单击“保存”。 文件名即出现在应用程序窗口顶部的标题栏中。 6、在新文档顶部的“文档标题”文本框中，键入 Cafe Townsend。这就是页面的标题。站点访问者在 Web 浏览器中查看页面时将在浏览器窗口的标题栏中看到此标题。 7、选择“文件”“保存”来保存该页面。 二、插

7、入表格： 接下来，您将添加一个表格，用于放置文本、图形和 Macromedia Flash 资源。 1、在页面上单击一次，在页面左上角放置插入点。 2、选择“插入”“表格”。 3、在“插入表格”对话框中，执行下面的操作： a. 在“行数”文本框中，输入 3。 在“列数”文本框中，输入 1。 在“表格宽度”文本框中，输入 700。 在“表格宽度”弹出式菜单中，选择“像素”。 在“边框粗细”文本框中，输入 0。 在“单元格边距”文本框中，输入 0。 在“单元格间距”文本框中，输入 0。 6、单击“确定”。 一个三行一列的表格即出现在文档中。该表格的宽度为 700 像素，边框、单元格边距和单元格间距

8、均为 0。 7、单击一次该表格右侧取消对它的选择。 8、选择“插入”“表格”以插入另一个表格。 9、在“插入表格”对话框中，对第二个表格执行下面的操作： a. 在“行数”文本框中，输入 1。 在“列数”文本框中，输入 3。 在“表格宽度”文本框中，输入 700。 在“表格宽度”弹出式菜单中，选择“像素”。 在“边框粗细”文本框中，输入 0。 在“单元格边距”文本框中，输入 0。 在“单元格间距”文本框中，输入 0。 10、单击“确定”。 第二个表格即出现在第一个表格下方。 11、单击该表格右侧取消对它的选择。 12、通过选择“插入”“表格”，然后在“插入表格”对话框中输入以下值来插入第三个表格

9、： a. 在“行数”文本框中，输入 1。 在“列数”文本框中，输入 1。 在“表格宽度”文本框中，输入 700。 在“表格宽度”弹出式菜单中，选择“像素”。 在“边框粗细”文本框中，输入 0。 在“单元格边距”文本框中，输入 0。 在“单元格间距”文本框中，输入 0。 13、单击“确定”。 第三个表格即出现在第二个表格下方。 14、单击该表格右侧取消对它的选择。 注意：插入表格后可能会看到表格选择器。通过在表格外单击，通常可以隐藏表格选择器。也可以通过选择“查看”“可视化助理”“表格宽度”禁用表格选择器。 三、设置表格属性 为了更方便地对表格进行操作，现在将使用“扩展表格”模式来设置具体的表格

10、属性。 “扩展表格”模式是一种临时添加表格的单元格边距和间距并增加表格边框以简化编辑的一种功能。它可使你能够精确地放置插入点，而不会出现选择错误的表格或错误的表格内容的状况。 1、选择“查看”“表格模式”“扩展表格模式”。 2、在第一个表格的第一行内单击一次。 3、在“属性”检查器的“单元格高度”文本框中输入 90，然后按 Enter 键 。 4、在第一个表格的第二行内单击一次。 5、在“属性”检查器的“单元格高度”文本框中输入 166，然后按 Enter 键 。 6、在第一个表格的第三行内单击一次。 7、在“属性”检查器的“单元格高度”文本框中输入 24，然后按 Enter 键 。 现在第一

11、个表格中的三行应具有不同的高度。 接下来，您将设置第二个表格的属性。 8、在第二个表格的第一列内单击一次。 9、在“属性”检查器的“单元格宽度”文本框中输入 140，然后按 Enter 键 。 10、在第二个表格的第二列内单击一次。 11、在“属性”检查器的“单元格宽度”文本框中输入 230，然后按 Enter 键。 12、将第三列的宽度设置为 330 个像素。 如果已打开表格选择器，将能看到刚才在各个表格列上输入的三个像素值。 13、您无需为这个表格的单元格输入任何高度值，因为这些单元格的高度将取决于您以后添加的内容。 14、最后，在最后一个表格内单击一次。 15、在“属性”检查器的“单元格

12、高度”文本框中输入 24，然后按 Enter 键 。 16、单击“文档”窗口顶部的“退出扩展表格模式”链接，返回到“标准”模式。 17、保存页面。 注意：在“扩展表格”模式下完成对表格属性的设置后，应总是返回到“标准”模式。“扩展表格”模式不属于所见即所得环境，因此某些操作不会得到预期的结果。 四、插入图像占位符： 图像占位符是在准备好将最终图形添加到 Web 页面之前使用的图形。在对 Web 页面进行布局时图像占位符很有用，因为通过使用图像占位符，您可以在真正创建图像之前确定图像在页面上的位置。 1、在文档窗口中，在第一个表格的第一行内单击一次。 2、选择“插入”“图像对象”“图像占位符”。

13、 3、在“图像占位符”对话框中，执行下面的操作： 4、在“名称”文本框中，键入 banner_graphic。 5、在“宽度”文本框中，输入 700。 6、在“高度”文本框中，输入 90。 7、单击颜色框并从颜色选择器中选择一种颜色。在本教程中，我们选择了红棕色 (#993300)。 保留“替换文本”文本框为空。 8、单击“确定”。 图像占位符出现在第一个表格内。图像占位符显示最终放置于此处的图像的标签和大小属性。 10保存页面。 关于图像占位符：图像占位符是在将最终图形添加到 Web 页面之前使用的临时图形；它不是显示在浏览器中的图形图像。在您发布站点之前，应该用适用于 Web 的图形文件替

14、换所有添加的图像占位符。 五、向页面添加颜色 现在，您将通过设置某些表格单元格以及页面背景的颜色，向页面添加更多颜色。 1、在上述包含三列的表格的第一个单元格内单击一次。 2、击标签选择器中的 标签以选择该单元格。 3、在“属性”检查器中，在“背景颜色”文本框内单击一次。 “背景颜色”文本框位于“背景颜色”(Bg) 颜色框旁。 4、在“背景颜色”文本框中，输入十六进制值 #993300，然后按 Enter 键。表格单元格的颜色即变为红棕色。 5、在上述包含三列的表格的第二个单元格内单击一次。 6、单击标签选择器中的 标签以选择该单元格。 7、在“属性”检查器中，在“背景颜色”文本框内单击一次，

15、输入十六进制值 #F7EEDF，然后按 Enter 键 。 表格单元格的颜色即变为浅棕色。 8、重复第 5 7 步，将第三个表格单元格的颜色也更改为浅棕色。 9、设置完这三个单元格的颜色后，单击一次表格的外部，取消选择该表格。 接下来，您将通过修改页面属性来更改整个页面的背景颜色。通过“页面属性”对话框可以设置一些页面属性，包括页面字体的大小和颜色、已访问链接的颜色以及页面边距等。 10、选择“修改”“页面属性”。 11、在“页面属性”对话框的“外观”类别中，单击“背景颜色”颜色框，然后从颜色选择器中选择黑色 (#000000)。 12、“确定”。 页面的背景即变为黑色。 13、保存你的工作。

16、 你的页面布局现已完成。该布局包含一些表格，用于放置各种资源，如图像、文本和 Flash 视频 (FLV) 文件。 向页面添加内容 利用 Dreamweaver cs4 ，你可以很方便地向 Web 页面添加多种内容，包括图像、 Flash 动画、 Flash 视频、文本等。向页面添加内容后，你还可以可在各种浏览器中进行预览，这样你就可以立即查看你的页面在 Web 上将要显示的结果。 创建页面布局之后，你就可以将资源添加到页面了。你将从添加图像开始。可以在 Dreamweaver 中使用多种方法向 Web 页面添加图像。本节中，你将使用不同的方法将四个不同的图像添加到 Cafe Townsend

17、 的首页。 一、插入图像 替换图像占位符： 1、在 Dreamweaver 的“文件”窗口中，双击打开 index.html 文件。 2、双击页面顶部的图像占位符 banner_graphic。 3、在“选择图像源文件”对话框中，浏览至您定义为站点根文件夹的 cafe_townsend 文件夹中的 images 文件夹。 4、选择 banner_graphic.jpg 文件并单击“确定”。 5、在表格外单击一次以取消选中该图像。 6、保存该页。 使用“插入”菜单插入图像： 1、在第一个表格的第三行内单击一次。 2、选择“插入”“图像”。 3、在“选择图像源文件”对话框中，浏览至 cafe_to

18、wnsend 文件夹中的 images 文件夹，选择 body_main_header.gif 文件，然后单击“确定”。 4、如果出现“图像标签辅助功能属性”对话框，则单击“确定”。 一个长的彩色图形出现在该表格行中。它看上去更像表格单元格的背景色，而不是图形，但如果仔细看，您将看到该图形具有圆角。添加完所有资源之后，这种圆角效果将使页面的下半部分呈现一种有趣的外观。 通过拖动插入图像： 1、在页面上最后一个表格的最后一行中单击一次。 2、在“文件”面板中，找到 body_main_footer.gif 文件，将该文件拖到最后一个表格的插入点。 3、如果出现“图像标签辅助功能属性”对话框，则单

19、击“确定”。 4、在表格外单击一次，并保存该页面。 从“资源”面板插入图像: 1、在由三列组成的表格的中间一列内单击一次。 2、在“属性”检查器中，从“水平”弹出式菜单中选择“居中对齐”，然后从“垂直”弹出式菜单中选择“顶端”。该操作将表格单元格的内容对齐到单元格的中间，并使单元格的内容从单元格顶端开始。 3、如果您无法看到“垂直”或“水平”弹出式菜单，请单击“属性”检查器右下角的展开箭头。 4、按一次 Enter 键 ，以便创建更多空间备用。 5、单击“文件”面板中的“资源”选项卡，或选择“窗口”“资源”。 6、如果未选择“图像”视图，则单击“图像”以查看您的图像资源。 7、在“资源”面板中

20、，选择 street_sign.jpg 文件。 执行下列操作之一： 将 street_sign.jpg 文件拖到中心位置的表格单元格中的插入点。 单击“资源”面板底部的“插入”。 8、如果出现“图像标签辅助功能属性”对话框，则单击“确定”。street_sign.jpg 图形即显示在页面上。 9、在表格外单击一次以取消选中该图像。 10、保存该页。 二、插入并播放 Flash 文件： 接下来，您将插入一个 Flash 文件，它将播放 Cafe Townsend 的特色食品的照片幻灯片。 1、在 Dreamweaver 的“文档”窗口中打开 index.html 页面的情况下，在第一个表格的第二

21、行内单击一次。 2、在“属性”检查器中，从“水平”弹出式菜单中选择“居中”，然后从“垂直”弹出式菜单中选择“居中”。该操作将表格单元格的内容放置到单元格的中间。 如果您无法看到“垂直”或“水平”弹出式菜单，请单击“属性”检查器右下角的展开箭头。 3、选择“插入”“媒体”“Flash”。 4、在“选择文件”对话框中，浏览至站点的 cafe_townsend 根文件夹中的 flash_fma.swf 文件，选择该文件，然后单击“确定”。 5、如果出现“对象标签辅助功能属性”对话框，则单击“确定”。 6、Flash 内容占位符将显示在文档窗口中。这是因为 HTML 代码“指向”SWF 文件 flas

22、h_fma.swf。当用户载入 index.html 页面时，浏览器会播放该 SWF 文件。 7、在插入 SWF 文件之后，只要你不单击页面上的其它位置，Flash 内容占位符就会保持为选中状态。 如果它不处于选中状态，通过单击 Flash 内容占位符即可将其选中。 8、在“属性”检查器中单击“播放”。 9、如果看不到 Flash“播放”按钮，可单击“属性”检查器右下角的展开箭头。 10、Dreamweaver 在“文档”窗口中播放 Flash 文件，显示站点访问者在浏览器中查看页面时将看到的内容。 11、在“属性”检查器中，单击“停止”可以结束 Flash 文件播放。 12、保存页面。 三、

23、插入 Flash 视频： 接下来，使用提供的资源插入 Flash 视频文件。 1、在 Dreamweaver 的“文档”窗口中打开 index.html 页面的情况下，在由三列组成的表格的中间一列中放置的图形之上单击一次。 2、选择“插入”“媒体”“Flash 视频”。 3、在“插入 Flash 视频”对话框中，从“视频类型”弹出式菜单中选择“渐进式下载视频”。 累进式下载允许在下载完成之前就开始播放视频文件。 4、在 URL 文本框中，指定 cafe_townsend_home.flv 文件的相对路径，方法是单击“浏览”，浏览至 cafe_townsend_home.flv 文件，并选择该

24、FLV 文件。 5、从“外观”弹出式菜单中选择 Halo Skin 2。所选外观的预览会出现在“外观”弹出式菜单下方。“外观”选项指定将包含 Flash 视频内容的 Flash 视频组件的外观。 6、在“宽度”和“高度”文本框中，执行以下操作： 在“宽度”文本框中，键入 180。 在“高度”文本框中，键入 135 ，然后按 Enter 键。 7、“宽度”和“高度”文本框中的值以像素为单位指定 FLV 文件的宽度和高度。可以任意调整这些值以更改 Web 页面上的 Flash 视频的大小。增加视频的尺寸时，视频的图片品质通常会下降。 8、保存页面。 四、插入文本： 现在您将向页面添加一些文本。您可

25、以在 Dreamweaver 文档窗口中直接键入文本，也可以从其它源复制并粘帖文本。然后，您将使用层叠样式表 (CSS) 设置文本格式。 插入正文文本: 1、在“文件”面板中，找到 sample_text.txt 文件并双击该文件的图标，在 Dreamweaver 中打开它。您可以看到，此窗口处于“代码”视图中，并且不能切换到“设计”视图，因为该文件不是 HTML 文件。 2、在 sample_text.txt“文档”窗口中，按 Ctrl+A 组合键选择所有文本，然后选择“编辑”“复制”以复制该文本。 3、单击文档右上角中的 X 关闭 sample_text.txt 文件。 4、在 index

26、.html“文档”窗口中，在由三列组成的表格的第三个表格单元格内单击一次。 5、选择“编辑”“粘贴”，文本文件中的文本出现在所选表格单元格中。根据显示器的分辨率，该表格将伸展以适合该文本。现在请不要担心它的外观。在下一教程中，你将学习如何使用 CSS 设置文本样式，以使所有内容恰当地适合表格。 6、确保插入点仍在刚才粘贴文本的表格单元格中。如果插入点不在，则在表格单元格内单击。 7、在“属性”检查器中，从“垂直”弹出式菜单中选择“顶端”。这会将您刚刚粘贴的文本沿表格单元格的顶端对齐。如果您无法看到“垂直”弹出式菜单，请单击“属性”检查器右下角的展开箭头。 8、保存该页。 插入导航条文本: 接下

27、来您将插入导航条文本。但是，您需要在下一教程中设置这些文本格式之后，它们看上去才会像导航条。 1、在由三列组成的表格的第一列中单击一次。 2、键入单词 Cuisine。 3、按空格键并键入 Chef Ipsum。 4、重复前面的步骤，直到输入以下单词，并且在每个单词之间留一个空格：Articles、Special Events、Location、Menu、Contact Us。 5、键入时不要按 Enter 键 。只使用空格键分隔单词，并使这些单词自然换行。表格单元格的固定宽度确定了一行中可容纳的单词个数。 6、在插入点仍旧处于由三列组成的表格的第一个单元格中时，在标签选择器中单击 标签。 7

28、、在“属性”检查器中，从“垂直”弹出式菜单中选择“顶端”。这会将您刚刚键入的文本沿表格单元格的顶端对齐。 8、如果您无法看到“垂直”弹出式菜单，请单击“属性”检查器右下角的展开箭头。 9、保存页面。 五 、创建链接： 链接是在 Web 页面中插入的指向其它文档的引用。可以将任何类型的资源转换为链接，但最常用的链接类型是文本链接。 您可以在站点创建过程的任何阶段创建链接。在本节中，您将为导航条创建链接，即使您尚未将该文本格式设置为导航条的形式。 cafe_townsend 站点根文件夹包含可以链接的已完成的 HTML 页面。您将把此页面用于导航中的所有链接，即使您在建立实际站点时，这些链接中的每

29、一个链接将对应于不同的页面。 1、当 index.html 页面在文档窗口中处于打开的情况下，选择您在由三列组成的表格的第一个单元格中键入的单词 Cuisine。请小心只选择单词 Cuisine，不要选中它后面的空格。 2、在属性检查器中，单击“链接”文本框旁的文件夹图标。 3、在“选择文件”对话框中，浏览至 menu.html 文件，并单击“确定”。 4、在页面上单击一次以取消选择单词 Cuisine。Cuisine 文本出现下划线并变成蓝色，表示它现在是一个链接。 5、重复上述步骤，为作为导航而键入的每个单词或一组单词建立链接。您还需要创建 6 个链接：为 Chef Ipsum、Artic

30、les、Special Events、Location、Menu 和 Contact Us 分别创建一个链接。 6、保存页面。 六、在浏览器中预览页面： “设计”视图为您提供了页面在 Web 上显示时的大致外观，但是要查看确切的最终结果，则必须在浏览器中预览页面。虽然浏览器通常会生成相同的结果，但是每个浏览器版本显示 HTML 页面的方式可能会不同。Dreamweaver 试图生成在各种浏览器中看起来尽可能相似的 HTML；但有时候差别难以避免。因此，在浏览器中预览您的工作是使您了解在发布页面后站点访问者将看到的外观的唯一方式。 请确保 index.html 文件在文档窗口中打开。 1、按 F

31、12 键 。 您的主浏览器将自动启动并显示该页。 2、切换回 Dreamweaver 以执行任何必要的更改。 3、然后保存您的工作并再次按 F12 键以确保您的更改生效。 您现在已经有了一个内容丰富的 Web 页面。下一步是设置某些内容的格式以使其更加吸引人。在下一教程中，您将学习如何使用 CSS 为添加的文本设置格式。 使用 CSS 美化页面 本节介绍如何在 Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式。您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位文本，从而能更加灵活自如地控制页面的外观。 在本节中，你将使用层叠样式表 (CSS) 设置虚

32、构餐馆 Cafe Townsend 主页上文本的格式。你将创建不同类型的 CSS 规则来设置正文文本的格式，还将设置该页左侧的链接文本的格式来创建导航条。完成后的页面将如下图所示。 一、了解 CSS： 层叠样式表 (CSS) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件或 HTML 文档的另一部分中。使用 CSS 可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。 CSS 使您可以控制许多仅使用 HTML 无法控制的

33、属性。例如，您可以为所选文本指定不同的字体大小和单位。通过使用 CSS 从而以像素为单位设置字体大小，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。 CSS 格式设置规则由两部分组成：选择器和声明。选择器是标识已设置格式元素的术语，而声明则用于定义样式元素。在下面的示例中，H1 是选择器，介于大括号 () 之间的所有内容都是声明： 复制代码 1. H1 2. font-size:16 pixels; 3. font-family:Helvetica; 4. font-weight:bold; 5. 声明由两部分组成：属性和值。上述示例为 H1 标签创建了样式：链接到此样式的所有 H

34、1 标签的文本都将是 16 像素大小并使用 Helvetica 字体和粗体。 术语“层叠”是指对同一个元素或 Web 页面应用多个样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到您的 Web 页面上的元素，并最终创建您想要的设计。 CSS 的主要优点是容易更新；只要对一处 CSS 规则进行更新，则使用该定义样式的所有文档的格式都会自动更新为新样式。 在 Dreamweaver 中可以定义以下规则类型： 自定义 CSS 规则使您可以将样式属性应用到任何文本范围或文本块。所有类样式均以句点 (.) 开头。

35、例如，您可以创建称为 .red 的类样式，设置规则的 color 属性为红色，然后将该样式应用到一部分已定义样式的段落文本中。 HTML 标签规则重定义特定标签的格式。创建或更改 h1 标签的 CSS 规则时，所有用 h1 标签设置了格式的文本都会立即更新。 CSS 选择器规则重定义特定元素组合的格式，或其它 CSS 允许的选择器形式的格式。高级样式还可以重定义包含特定 id 属性的标签的格式。 二、创建新的样式表： 首先，您将创建包含 CSS 规则的外部样式表。在外部样式表中创建样式时，可以在一个中央位置同时控制多个 Web 页面的外观，而不需要为每个 Web 页面分别设置样式。 外部 CS

36、S 样式表是存储在一个单独的外部 .css 文件中的一系列 CSS 规则。利用文档 head 部分中的链接，该 .css 文件被链接到 Web 站点中的一个或多个页面。 选择“文件”“新建”。 在“新建文档”对话框中的“类别”列中选择“基本页”，在“基本页”列中选择“CSS”，然后单击“创建”。 将该页保存为 cafe_townsend.css。保存样式表时，请确保将其保存到 cafe_townsend folder 文件夹中。 在样式表中键入以下代码： 复制代码 1. p 2. font-family: Verdana, sans-serif; 3. font-size: 11px; col

37、or: #000000; 4. line-height: 18px; 5. padding: 3px; 6. 当您键入代码时，Dreamweaver 将使用代码提示为您建议一些选项，以帮您完成输入。当看到希望 Dreamweaver 为您完成键入的代码时，请按 Enter 键 (Windows) 或 Return 键 (Macintosh)。 不要忘记在每行结尾处的属性值后面加上一个分号。 保存样式表。 接下来，将该样式表附加到 index.html 页面中。 三、附加样式表: 您将样式表附加到 Web 页面中时，在样式表中定义的规则将应用到页面上的相应元素。例如，当您将 cafe_towns

38、end.css 样式表附加到 index.html 页时，将根据您定义的 CSS 规则设置所有段落文本的格式。 在“文档”窗口中，打开 Cafe Townsend 的 index.html 文件。 选择页面右边的第一段文本。 在“属性”检查器中查看，并确保使用段落标签设置了该段落的格式。 如果“属性”检查器中的“格式”弹出式菜单显示“段落”，则已使用段落标签设置了段落的格式。如果“属性”检查器中的“格式”弹出式菜单显示“无”或其它内容，则选择“段落”来设置段落的格式。 对第二段重复第 3 步。 在“CSS 样式”面板中，单击位于面板右下角的“附加样式表”按钮。 在“附加外部样式表”对话框中，单

39、击“浏览”并浏览到上一节创建的 cafe_townsend.css 文件。 单击“确定”。 四、研究“CSS 样式”面板 : CSS 样式”面板可让您跟踪影响当前所选页面元素的 CSS 规则和属性，或影响整个文档的规则和属性，还可以在不打开外部样式表的情况下修改 CSS 属性。 确保 index.html 页在“文档”窗口中打开。 在“CSS 样式”面板中，单击面板顶部的“所有”，然后检查您的 CSS 规则。 在“所有”模式下，CSS 面板向您显示应用到当前文档的所有 CSS 规则，不管这些规则是在外部样式表中，还是在自身文档中。您应在“所有规则”窗格中看到两个主要类别：一个 标签类别和一个

40、cafe_townsend.css 类别。 若未展开 标签类别，则请单击加号 (+) 展开该类别。 单击正文规则。 值为 #000000 的 background-color 属性出现在下面的“属性”窗格中。 这是因为您以前在通过使用“修改页面属性”对话框设置页面的背景色时，Dreamweaver 自动编写了一个内置于文档的 CSS 样式。 您可能需要折叠其它面板，如“文件”面板，以便看到完整的“CSS 样式”面板，还可以通过拖动窗格之间的边界来更改“CSS 样式”面板的长度。 单击加号 (+) 展开 cafe_townsend.css 类别。 单击 p 规则。在外部样式表中为 p 规则定义的

41、所有属性和值将显示在下面的“属性”窗格中。 在“文档”窗口中，在刚设置格式的两个段落中的任何位置单击一次。 在“CSS 样式”面板中，单击面板顶部的“当前”，然后检查您的 CSS 样式。在“当前”模式中，CSS 面板向您显示当前所选内容的属性的摘要。显示的属性与外部样式表中 p 规则的属性相对应。 在下一节中，您将使用“CSS 样式”面板创建新规则。使用“CSS 样式”面板创建新规则比手动键入规则容易得多。 五、创建新的 CSS 规则: 在本节中，您将使用“CSS 样式”面板创建自定义的 CSS 规则或类样式。类样式使您可以设置任何范围或文本块的样式属性，并可以应用到任何 HTML 标签。 在

42、“CSS 样式”面板中，单击面板右下角的“新建 CSS 规则”。 在“新建 CSS 规则”对话框中，从“选择器类型”选项中选择“类”。该选项应该是默认选中的。 在“名称”文本框中输入 .bold。确保在单词“bold”前键入句点 (.)。所有类样式必须以句点开头。 在“定义在”弹出式菜单中，选择 cafe_townsend.css。该文件应该是默认选中的。 单击“确定”。出现“CSS 规则定义”对话框，表示您正在 cafe_townsend.css 文件中创建一个称为 .bold 的类样式。 在“CSS 规则定义”对话框中，执行下面的操作： 在“字体”文本框中，输入 Verdana, sans

43、-serif。 在“大小”文本框中，输入 11，并在紧靠其右的弹出式菜单中选择像素。 在“行高”文本框中，输入 18，并在紧靠其右的弹出式菜单中选择像素。 从“粗细”弹出式菜单中选择“粗体”。 在“颜色”文本框中，输入 #990000。 单击“确定”。 单击“CSS 样式”面板顶部的“所有”按钮。 若未展开 cafe_townsend.css 类别，则单击该类别旁边的加号 (+) 按钮 您可以看到，Dreamweaver 已将 .bold 类样式添加到在外部样式表中定义的规则列表中。如果您在“所有规则”窗格中单击 .bold 规则，则该规则的属性将出现在“属性”窗格中。新规则还出现在“属性”检

44、查器的“样式”弹出式菜单中。 六、将类样式应用到文本： 现在，您已经创建了一个类规则，下面将该规则应用到某些段落文本。 在“文档”窗口中，选择第一段中文本的前四个单词：Cafe Townsends visionary chef。 在“属性”检查器中，从“样式”弹出式菜单中选择“bold”。 “bold”类样式将应用到您的文本。 重复第 2 步，将“粗体”类样式应用到第二段的前四个单词。 保存页面。 七、设置导航条文本的格式： 接下来，您将使用 CSS 将样式应用到导航条的链接文本。许多 Web 页面使用内含文本的彩色矩形图像来创建导航条。但是，如果使用 CSS，您所需要设置的只是链接文本和一些

45、格式。通过使用 display: block 属性并设置块的宽度，您可以有效地创建矩形，而不需要另外使用图像。 若未打开 cafe_townsend.css 文件，则打开该文件，或单击其选项卡来显示该文件。 定义一个新规则，方法是在该文件的 .bold 类样式后面键入以下代码： 复制代码 1. .navigation 2. 这是一个空规则。 保存 cafe_townsend.css 文件。 接下来，您将使用“CSS 样式”面板向规则添加属性。 若未打开 index.html 文件，则打开该文件。 在“CSS 样式”面板中，确保选中了“全部”模式，选择新的 .navigation 规则，然后单击面板右下角的“编辑样式”。 在“CSS 规则定义”对话框中，执行下面的操作： 在“字体”文本框中，输入 Verdana, sans-serif。 从“大小”弹出式菜单中选择 16，然后从紧靠其右的弹出式菜单中选择像素。 从“样式”弹出式菜单中选择“正常”。 从“修饰”列表中选择“无”。 从“粗细”弹出式菜单中选择“粗体”。 在“颜色”文本框中，输入 #FFFFFF。 单击“确定”。现在，您将使用“CSS 样式”面板向 .navigation 规则添加更多属性。 在“CSS 样式”面板中，确保选中了 .navigation 规则，然后单击“显示列表视图”。