在DW也就是Dreamweaver中编写HTML代码后，运行代码查看网页效果是非常基础的操作，不需要复杂的配置就能完成。
运行前的准备工作
在运行HTML代码之前，需要先确认几个基础事项，避免出现运行失败或者效果异常的问题。
- 确认代码已经保存，DW中未保存的代码可能无法正常触发运行逻辑，建议先按下
Ctrl+S组合键保存文件，文件后缀需要是.html或者.htm。 - 检查HTML代码的基础结构是否完整，至少需要包含
<html>、<head>、<body>这三个核心标签，避免出现语法错误导致运行异常。 - 如果需要引用本地资源比如图片、CSS文件、JS文件，要确认资源的路径是正确的，相对路径和绝对路径不要写错。
DW中HTML代码的运行步骤
方法一：使用内置预览功能运行
这是最常用的运行方式，操作非常简单，适合大部分基础场景。
- 打开已经编写好HTML代码的DW文件，确保当前编辑窗口是代码视图或者设计视图都可以。
- 点击软件顶部菜单栏中的文件选项，在下拉菜单中找到在浏览器中预览选项，也可以选择对应的浏览器名称，比如Chrome、Edge等。
- 如果没有提前设置默认浏览器，也可以直接按下快捷键
F12，DW会自动调用默认的浏览器打开当前编写的HTML页面，展示代码运行后的效果。
如果需要临时修改默认预览浏览器，可以点击编辑菜单下的首选参数，在左侧分类中选择在浏览器中预览，点击右侧的加号按钮添加本地安装的浏览器路径，之后就可以在预览菜单中选择对应的浏览器运行代码。
方法二：直接本地打开运行
如果不需要在DW中触发运行，也可以直接通过系统文件管理器运行代码。
- 在DW中保存好HTML文件后，打开文件所在的本地文件夹。
- 找到对应的HTML文件，右键点击文件，选择打开方式，选择任意一款本地安装的浏览器，就可以直接运行代码查看效果。
这种方式和DW内置预览的效果是一致的，适合不想操作DW菜单的场景，但是无法实时同步DW中的代码修改，每次修改代码后需要重新保存再刷新浏览器才能看到新效果。
运行后常见问题排查
如果运行后没有出现预期的效果，可以按照以下问题逐一排查。
| 问题现象 | 可能原因 | 解决方法 |
|---|---|---|
| 浏览器打开后显示空白页 | HTML代码语法错误，或者文件没有保存 | 检查代码标签是否闭合，重新保存文件后再运行 |
| 引用的图片、样式没有加载 | 资源路径错误，或者资源文件被删除 | 核对资源路径，确认资源文件存在于对应位置 |
| 点击预览没有反应 | 没有设置默认预览浏览器，或者浏览器路径配置错误 | 在首选参数中重新配置预览浏览器路径 |
实时预览功能的使用
DW还提供了实时预览功能，适合需要边写代码边看效果的场景。
点击菜单栏中的窗口选项，选择实时预览，DW会在右侧打开一个预览面板，当你修改代码并保存后，预览面板会自动刷新展示最新的页面效果，不需要每次手动点击浏览器刷新，提升开发效率。
如果需要在多设备查看运行效果，可以点击实时预览面板中的在多个设备中预览选项，DW会生成一个本地链接，只要在同一个局域网下的手机、平板等设备输入这个链接，就可以查看HTML代码的运行效果，方便测试响应式布局。
简单代码示例演示
以下是一个简单的HTML代码示例，编写完成后按照上面的步骤运行，就可以看到对应的页面效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DW运行HTML示例</title>
<style>
.content {
width: 800px;
margin: 0 auto;
text-align: center;
padding-top: 50px;
}
h1 {
color: #333;
}
p {
color: #666;
font-size: 16px;
}
</style>
</head>
<body>
<div class="content">
<h1>欢迎使用DW编写HTML代码</h1>
<p>这是运行后的页面效果，按照步骤操作就可以看到这个内容</p>
</div>
</body>
</html>