1．从CSS模板新建CSS文件

（1）选择【文件】|【新建】命令，在弹出的【新建文档】对话框中，选择【常规】标签页，在【类别】列表中选择【CSS样式表】，然后在【CSS样式表】中选择【完整设计：Arial,蓝色/绿色/灰色】（这是Dreamweaver自带的一个CSS模板），然后单击【创建】按钮，如图7-1所示。

http://www.flasher123.com/dw/lesson7/lesson_image002.jpg

图7-1 新建CSS样式表

       （2）这时代码视图中出现了一些CSS代码。按下键盘上的快捷键Ctrl + S ，弹出【另存为】对话框，在【文件名】中输入myCSS，展开【保存类型】后面的下拉列表选择【样式表(*.css)】，然后单击【保存】按钮，如图7-2所示。

http://www.flasher123.com/dw/lesson7/lesson_image004.jpg

图7-2 保存CSS文件

2．修改CSS样式

       （1）myCSS.css仍然处于打开状态，注意看【文档】工具栏可以发现，拆分视图和设计视图都是不可用的，对于CSS文件，只能在代码视图中直接编辑其源代码，这和普通HTML文件是不同的，如图7-3所示。

http://www.flasher123.com/dw/lesson7/lesson_image006.jpg

图7-3 代码视图中显示的CSS文件

       （2）在代码视图中可以对这里的CSS样式进行修改，这时应该充分利用Dreamweaver 8提供的代码提示工具，这里仅举一个例子来说明。在代码视图中，找到“.title”内的font-family，将“:”后面的字体列表删除，定位光标到“:”后面，按下键盘上的空格键，这时将弹出字体列表代码提示窗口，从中选择“Verdana,宋体”并双击鼠标左键，如图7-4所示。

http://www.flasher123.com/dw/lesson7/lesson_image008.jpg

图7-4 利用代码提示工具设置CSS属性值

       （3）完成对myCSS.css的修改之后，按下键盘上的快捷键Ctrl+ S 保存文件，然后将其关闭。

    专家点拨：以上步骤是通过Dreamweaver提供的CSS模板创建了一个CSS文档，这种方式比较高效，但也有一定的局限性。也可以直接新建一个空白CSS文档，然后通过在“CSS样式”面板添加CSS规则来完成CSS文档的创建。

7.4.2 通过链接使用外部样式表

1．链接外部CSS文件

（1）打开示例文件C:\Samples\part6\6.4.html，这个文件中包含简单的页面，如图7-5所示。

http://www.flasher123.com/dw/lesson7/lesson_image010.jpg

图7-5 使用CSS样式之前的页面效果

       （2）在【CSS样式】面板中单击右下角的【附加样式表】按钮http://www.flasher123.com/dw/lesson7/lesson_image012.jpg，从弹出的【链接外部样式】对话框中，单击【文件/URL】后面的【浏览】按钮，从弹出的【选择样式表文件】对话框中选择myCSS.css文件，选择完成后回到【链接外部样式表】对话框中，在【添加为】右侧的单选按钮组中选择【链接】，然后单击【确定】按钮，如图7-6所示。

http://www.flasher123.com/dw/lesson7/lesson_image014.jpg

图7-6 链接外部样式表

       （3）外部样式表链接完成后，在【CSS样式】面板中可以看到样式文件myCSS.css中所包含的样式，如图7-7所示。

http://www.flasher123.com/dw/lesson7/lesson_image016.jpg

图7-7 【CSS样式】面板

2．在网页中应用CSS样式

（1）将外部CSS文件链接到网页文档后，网页的显示效果马上会发生变化，CSS样式文件中定义的CSS规则已经对网页产生了影响。

（2）进入设计视图，选择“网页标题”文字，进入【属性】面板，展开【样式】后面的下拉列表，选择header，如图7-8所示。

http://www.flasher123.com/dw/lesson7/lesson_image018.jpg

图7-8 设置标题的样式

       （3）按照相同的方式，分别为页面上的其他内容在【属性】面板中的【样式】后面的下拉列表中找到对应的样式，可以得到大致如图7-9所示的效果。

http://www.flasher123.com/dw/lesson7/lesson_image020.jpg

图7-9 通过外部CSS样式文件设置的页面

专家点拨：网页文档链接了外部CSS样式文件后，在代码视图中，可以观察到head标签中增加了一行代码：

 

这就是链接外部CSS样式文件的代码。