在使用Adobe Dreamweaver（简称DW）进行网页设计时，合理地管理CSS文件是提升网站可维护性和美观度的重要环节之一。其中，将样式表与HTML页面分离并采用外部链接的方式是一种常见的做法。本文将详细介绍如何通过Dreamweaver中的代码视图来实现这一功能。
一、准备工作
首先，确保您已经创建了一个HTML文档以及一个独立的CSS文件。如果尚未完成，请按照以下步骤操作：
1. 创建HTML文件
打开Dreamweaver后，点击菜单栏上的“文件” > “新建”，选择HTML模板，然后命名您的文件为`index.html`（或其他适合的名字）。
2. 创建CSS文件
同样地，在Dreamweaver中新建一个CSS文件，并命名为`styles.css`。您可以直接在Dreamweaver的资源管理器中右键单击项目文件夹，选择“新建” > “样式表”来快速生成。
二、添加外部样式表链接
接下来，我们将学习如何在HTML文件中插入对CSS文件的引用。
1. 切换到代码视图
在Dreamweaver的工作区顶部，找到并点击“代码”选项卡，这会切换到代码编辑模式。此时，您应该能够看到HTML文件的基本结构。
2. 定位头部标签
在HTML文档中，所有的外部资源通常都放置在`
`标签内。因此，我们需要找到或手动添加该标签。如果您的HTML文件已经有``部分，则可以直接跳过此步；否则，请在文档的开头位置输入以下代码：```html
```
3. 插入元素
在`
`标签内部，添加一行``元素以引用CSS文件。具体格式如下：```html
```
其中，`rel`属性定义了关系类型，“stylesheet”表示这是一个样式表；`href`属性指定了CSS文件的位置，这里假设`styles.css`位于同一目录下。
4. 保存更改
完成上述步骤后，记得保存HTML文件。如果您希望即时预览效果，可以按下快捷键F12或者点击工具栏上的“实时视图”按钮。
三、验证效果
为了确认外部样式表是否成功加载，您可以回到CSS文件中添加一些简单的样式规则，比如改变页面背景颜色或文字颜色，然后刷新浏览器查看实际显示效果。
例如，在`styles.css`文件中添加以下代码：
```css
body {
background-color: f0f0f0;
color: 333;
}
```
保存CSS文件后，返回浏览器重新加载页面，您应当能看到背景颜色和文字颜色发生了变化。
四、注意事项
- 如果CSS文件位于不同目录下，请根据实际情况调整`href`路径。例如，若CSS文件存放在子目录`css/`中，则应改为`href="css/styles.css"`。
- 确保HTML文件与CSS文件之间的相对路径正确无误，否则可能导致样式无法正常应用。
- 对于大型项目，建议统一管理所有样式文件，并保持良好的命名规范，以便后续开发和维护。
通过以上方法，您就可以轻松地利用Dreamweaver实现HTML页面与外部CSS文件的有效连接。这种方式不仅提高了代码的整洁性，还增强了项目的灵活性和扩展性。希望这篇指南能帮助您更好地掌握Dreamweaver的操作技巧！