DW 也就是 Adobe Dreamweaver，创建网页核心流程是先建立站点，再新建 html 网页文件，接着在设计视图或者代码视图编写页面内容，添加文字图片超链接样式，保存之后预览测试，最后上传发布，DW 支持可视化拖拽编辑和手写代码两种模式，新手推荐先从可视化操作入门，熟悉之后再切换代码视图学习 HTML 和 CSS，创建网页第一步一定要先建立本地站点，这是 DW 非常关键的操作，好处是统一管理网页、图片、css 等资源，避免后续出现图片路径丢失、链接报错的问题，下面按照完整操作顺序拆解详细步骤，适合 DW CS6 以及新版 CC 版本通用操作思路。

前期准备

详细操作步骤

第一步 新建本地站点

打开 DW，点击菜单栏站点，选择新建站点，填写站点名称，本地根文件夹选中提前建好的网站文件夹，设置默认图像文件夹，确认保存站点，完成站点创建，后续所有网页和素材都放进这个根目录里面。

第二步 新建 HTML 网页文件

点击文件菜单，选择新建，页面类型选择 HTML，文档类型一般选择 HTML5，点击创建，就得到一个空白网页，也可以在文件面板右键站点文件夹，新建文件，命名为 index.html，这个文件就是网站首页。

第三步 选择编辑视图

DW 上方可以切换三种视图，代码视图是直接编写 HTML 代码，拆分视图是上下同时显示代码和可视化设计区，设计视图是可视化编辑，像排版文档一样插入内容，新手建议使用拆分视图，一边可视化操作一边查看生成的代码。

第四步 编辑网页内容

插入标题段落文字，在设计视图直接输入文本，也可以在代码区编写 h1 p 标签。

插入图片，点击插入菜单选择图像，选中站点里面准备好的图片素材，确认插入，这里必须保证图片已经存放在站点图像文件夹，防止相对路径出错。

添加超链接，选中文字或者图片，在属性面板链接栏填写目标页面地址，设置打开方式，比如本窗口打开或者新窗口打开。

添加 CSS 样式，内部样式可以写在 head 标签 style 里面，也可以新建外部 css 文件，在网页里面引入 css，用来控制字体颜色 背景 边距 布局。

第五步 保存网页

按下 ctrl+s 保存页面，首页文件名推荐 index.html，后续内页可以命名 about.html news.html，保存的时候文件名尽量使用英文小写，不要中文命名。

第六步 预览测试

点击 DW 上方实时预览按钮，选择浏览器，在浏览器里面打开网页，检查文字排版、图片是否正常显示，超链接能不能跳转，有没有路径报错，发现问题返回 DW 继续修改。

第七步 多页面制作与站点完善

继续新建其他子页面，搭建页面之间互相跳转链接，添加导航栏，完善 css 布局，完成整个网站所有页面。

第八步 上传发布（可选）

如果需要上线，在 DW 站点设置里面填写 FTP 信息，连接远程服务器，把本地站点全部文件上传到服务器空间，之后就可以通过域名访问网页。

常见注意要点

路径问题是 DW 做网页最容易出错的地方，图片或者链接使用相对路径，不要使用绝对路径，否则换电脑之后图片就丢失。

文件名和文件夹不要中文，很多服务器不识别中文路径，会造成页面打不开。

HTML 标签要闭合，代码视图编写的时候标签不闭合，浏览器渲染会出现排版错乱。

综合来看，DW 创建网页标准顺序就是建立站点，新建 html 页面，编辑内容和样式，保存预览，最后多页完善和上传，优先学会建立站点这个基础操作，就能避免大部分资源路径错误问题。

【常见问题】

问题 1 dw 创建网页为什么一定要先建站点

回答 1 dw 创建网页先建站点，是为了统一管理网页图片 css 资源，使用相对路径，如果不建站点，后续很容易出现图片路径失效，链接报错的问题。

问题 2 dw 新建网页首页为什么推荐命名 index.html

回答 1 dw 创建网页的时候首页命名 index.html，是服务器默认识别的首页文件，访问域名的时候会自动加载这个页面，是网站通用规范。

问题 3 dw 创建网页图片不显示是什么原因

回答 1 dw 创建网页图片不显示，大多是图片没有放在站点目录，或者使用了绝对路径，把图片移入站点图像文件夹，改成相对路径就可以解决。

问题 4 dw 设计视图和代码视图有什么区别

回答 1 dw 设计视图是可视化拖拽编辑，适合新手，代码视图是直接手写 HTML CSS 代码，拆分视图可以同时看到两种编辑界面，是 dw 创建网页最推荐的编辑模式。

【免责申明】

本文为 Dreamweaver 软件操作教程，不同版本 DW 菜单界面会有细微差别，网页代码规范请遵循 HTML 官方标准，正式建站请做好文件备份。