大学计算机基础课的老师上个月还在用Dreamweaver CS6教学生做网页，教室里的电脑跑的是Windows 7，DW的界面停留在2012年的设计风格。学生们一边跟着教程点鼠标拖表格，一边用手机搜"DW做的网站怎么在手机上显示不正常"。这个场景在全国几百所高校的机房里重复上演——Dreamweaver确实能快速做出一个网页，但很多人用DW做完第一个网站之后发现，做出来的东西和手机上看到的网页完全是两个世界。
Dreamweaver不是不能用，而是很多人没搞清楚它的定位：DW是一个"所见即所得"的网页制作工具，不是网站建设系统。它能帮你快速生成HTML和CSS代码，但不会帮你处理响应式适配、SEO优化、服务器部署这些建站的核心环节。下面从实际操作的角度，把用DW从零做一个完整网站的完整流程讲一遍，包括每一步具体怎么操作、常见的坑在哪、以及做完之后怎么让这个网站能被别人访问到。
用Dreamweaver做一个完整网站的六个步骤
| 1 | 安装和新建站点：DW版本怎么选？站点文件夹结构怎么建才不乱？ |
| 2 | 创建页面和布局：HTML结构怎么写？表格布局和Div+CSS布局的区别 |
| 3 | CSS样式设计：用DW的CSS设计器调颜色、字体、边距，比手写CSS快在哪 |
| 4 | 添加内容和交互：图片、表格、导航栏、超链接、表单怎么做 |
| 5 | 多页面站点：怎么从一个页面扩展成有导航的完整网站 |
| 6 | 发布上线：FTP上传、域名绑定、备案，网站从本地到公网的最后一步 |
一、Dreamweaver版本怎么选？CC新版和CS6老版的体验差了一个时代
很多人第一次接触Dreamweaver是在学校机房，用的是十年前的CS6甚至更老的版本。这些老版本的DW不支持HTML5新标签（section、article、nav、header等），CSS3的很多属性也不识别，做出来的网页用现代浏览器打开虽然能显示但代码已经过时了。
Dreamweaver目前最新的版本是Adobe Dreamweaver CC（Creative Cloud订阅制），相比CS6，CC版本的改进主要有三点：支持HTML5和CSS3的完整语法提示、内置了Bootstrap等前端框架的可视化集成、代码编辑器体验大幅提升（支持Emmet缩写、多光标编辑、Git版本管理）。如果你还在用CS6，强烈建议升级到CC版本，哪怕是试用版也比抱着老版本强。
但也要说一个现实情况：Dreamweaver在专业前端开发领域已经基本被VS Code取代。VS Code免费、插件生态丰富、对React/Vue等现代框架支持完善，而DW的优势只在于"可视化拖拽"这个场景。如果你做网站的目标是学习前端开发、以后想做程序员，那直接从VS Code开始学更划算；如果你只是需要快速做一个能用的网站、不想深入学代码，那DW的所见即所得模式确实更友好。
DW版本选择的建议
· 如果你是学生/新手、只需要交个网页作业：DW CS6够用了，虽然老但基本功能齐全，网上教程也最多
· 如果你要做能用的商业网站：升级到DW CC，至少支持HTML5和响应式设计，做出来的网站不会在手机上崩掉
· 如果你想学前端开发作为职业方向：别用DW了，直接装VS Code，配合Live Server插件，写代码的效率比DW高得多
二、新建站点和文件结构：DW里"站点"的概念很多人第一步就搞错了
Dreamweaver里有一个核心概念叫"站点"，很多人以为"新建站点"就是创建一个新网页，这完全是两回事。DW里的"站点"本质上是一个项目文件夹管理器——你指定一个本地文件夹作为站点根目录，DW会把这个文件夹里的所有文件当作一个网站来管理，自动追踪文件之间的链接关系、提供FTP上传同步、管理图片和CSS等资源文件。
正确的操作流程：打开DW→菜单栏选择"站点"→"新建站点"→给站点起个名字（比如"MyWebsite"）→选择本地文件夹路径（建议在D盘或桌面新建一个专门的文件夹）→点击保存。建好站点后，DW右侧的"文件"面板会显示这个文件夹的结构。接下来在站点根目录下建立标准的文件夹结构：新建一个images文件夹（放图片）、一个css文件夹（放样式表）、一个js文件夹（放JavaScript文件）。HTML文件直接放在根目录下。
这个文件夹结构看起来是小事，但很多新手把几十个图片、HTML文件、CSS文件全部堆在根目录下，做到后面完全分不清哪个文件是干什么的。建站第一步不是写代码，是建好文件夹结构，这个习惯从第一个网站开始就要养成。
标准的网站文件夹结构（DW站点根目录下）
· /index.html（首页，必须放在根目录）
· /about.html（关于我们页面）
· /images/（所有图片文件放在这个文件夹）
· /css/style.css（样式表文件）
· /js/（JavaScript文件，初学者可以先空着）
三、创建第一个HTML页面：代码视图和设计视图怎么配合用
DW最核心的功能是代码视图、设计视图、拆分视图三种模式。代码视图显示纯HTML源代码，适合手动写代码和修改细节；设计视图是"所见即所得"模式，拖拽元素、调整布局都在这里操作；拆分视图上半屏显示代码、下半屏显示设计效果，点击设计视图中的元素，代码视图会自动定位到对应的HTML标签，这是DW最实用的工作模式。
创建第一个页面的操作：在DW右侧"文件"面板中右键站点根目录→"新建文件"→命名为index.html→双击打开。在代码视图中，DW会自动生成HTML的基础骨架（DOCTYPE声明、html、head、body标签）。如果你用的是老版本CS6，自动生成的可能是HTML4的声明，手动改成HTML5的声明：把DOCTYPE那行替换成 <!DOCTYPE html>，把meta charset那行改成 <meta charset="UTF-8">。
切换到拆分视图，在body标签之间输入内容，设计视图会实时显示效果。DW的设计视图不能100%还原浏览器效果（尤其是CSS3的渐变、阴影、动画等），所以每做一段内容就按F12在浏览器里预览一下真实效果，不要完全相信DW设计视图里的显示。预览之前DW会提示你选择浏览器，建议把Chrome设为默认预览浏览器。
这里有一个DW新手必踩的坑：用设计视图拖拽出来的HTML代码非常臃肿，DW会自动插入大量内联样式和冗余标签。比如你在设计视图里拖一个表格、调一下边距和颜色，DW生成的代码可能比手写多出两三倍。对于追求代码质量的人来说，拆分视图的正确用法是"设计视图看布局、代码视图写细节"——用设计视图快速搭建页面骨架，然后切到代码视图手动清理和优化代码。
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个网站</title><link rel="stylesheet" href="css/style.css"></head><body><header><h1>欢迎来到我的网站</h1><nav><a href="index.html">首页</a><a href="about.html">关于</a></nav></header><main><section><h2>最新文章</h2><p>这里是文章内容...</p></section></main><footer><p>© 2024 我的网站</p></footer></body></html>四、用DW的CSS设计器调样式，比手写CSS快但要注意一个问题
DW的CSS设计器（CC版本叫"CSS Designer"，CS6版本叫"CSS样式面板"）是一个可视化的CSS编辑工具，你不用手写CSS代码，通过下拉菜单、滑块、颜色选择器就能设置字体、颜色、背景、边距、边框等样式。对于不熟悉CSS语法的新手来说，这个工具确实能大幅降低门槛。
CSS设计器的基本操作流程：先选择要添加样式的HTML元素（在设计视图中点击或在代码视图中选中标签），然后在CSS设计器中点"+"号添加选择器，DW会自动生成对应的CSS规则。接着在属性面板里设置字体（font-family、font-size）、颜色（color）、背景（background-color、background-image）、盒模型（margin、padding、border）、布局（width、float、display）等属性，每调一个参数，设计视图立刻刷新显示效果。
但CSS设计器有一个很大的局限：它生成的CSS代码全部堆在同一个样式表文件里，不会帮你做模块化拆分和命名规范。做到后面CSS文件可能有几百上千行，类名是DW自动生成的.content1、.content2、.content3这种毫无语义的名字，维护起来非常痛苦。建议用CSS设计器快速出效果之后，花点时间手动整理一下类名和代码结构——把相关的样式分组、给类名起有意义的名字（如.main-nav、.article-card、.footer-links），这个习惯会让后续修改省很多时间。
DW做网站时最容易踩的四个CSS坑
· 用绝对定位做布局：DW的拖拽功能默认使用position:absolute来定位元素，这样做出来的页面在不同屏幕尺寸下元素位置会错乱。尽量用margin、padding、flexbox来控制位置，少用绝对定位。
· 没有设置viewport：老版本DW生成的HTML默认没有<meta name="viewport">标签，导致手机打开网页时页面缩成一小块。手动在head里加上这行代码。
· 图片路径使用绝对路径：DW插入图片时如果选了"绝对路径"，生成的是你电脑上的路径（file:///C:/Users/...），上传到服务器后图片全部显示不了。必须使用相对路径（如images/photo.jpg）。
· 字体只设了中文没有fallback：DW默认只设置中文字体名，没有英文fallback字体。正确写法：font-family: "Microsoft YaHei", Arial, sans-serif;
五、添加图片、表格、导航栏和超链接：网站的基本内容元素
页面框架搭好之后，往里面填充内容。DW对这几个基础元素的插入都有可视化操作，比手写HTML标签直观很多。
插入图片：在设计视图中把光标放在要插入图片的位置→菜单栏"插入"→"图像"→选择图片文件。DW会弹出一个对话框让你填写"替换文本"（alt属性，图片加载不出来时显示的文字）和选择路径类型。路径类型一定要选"相对于文档"而不是"相对于站点根目录"。插入后如果图片大小不合适，可以选中图片在属性面板里调整宽高，但注意不要用DW直接缩放大图——一张2000x1500的图片缩放成300x200，文件大小还是原来的几MB，网页加载会很慢。应该先用PS或其他工具把图片裁剪到合适的尺寸再插入。
插入表格："插入"→"表格"→设置行数、列数、宽度、边框粗细。DW默认生成的表格宽度是像素值（如800px），在手机上不会自适应。建议把表格宽度设为百分比（如100%），或者干脆不用表格做页面布局——现代网页布局应该用CSS的flexbox或grid，表格只用来展示真正的表格数据（如价格表、对比表）。
做导航栏：导航栏的本质是一组带链接的文字或按钮。最简单的做法：在body顶部写一个div容器，里面放几个a标签链接到不同页面。然后在CSS设计器里给这个div设置背景色、给a标签设置字体颜色和内边距，一个简单的导航栏就成型了。DW里没有"一键生成导航栏"的功能，但你可以用CSS设计器调出悬停效果（a:hover设置不同颜色），视觉上就接近专业导航栏了。
超链接的四种类型：在DW中选中文字或图片→属性面板的"链接"框里填写目标地址。四种常用链接：链接到站内页面（about.html）、链接到外部网站（https://www.baidu.com，要写完整URL）、链接到页面内锚点（#section1，先在目标位置插入命名锚记）、链接到邮箱（mailto:xxx@example.com）。链接的目标打开方式（_blank新窗口打开、_self当前窗口打开）在属性面板的"目标"下拉框里选择。
| 元素类型 | DW操作方式 | 手写HTML代码 | 新手常犯错误 |
|---|---|---|---|
| 图片 | 插入→图像→选择文件 | <img src="images/photo.jpg" alt="描述"> | 路径用了绝对路径，服务器上显示不了 |
| 表格 | 插入→表格→设行列数 | <table><tr><td></td></tr></table> | 用表格做页面布局，手机上错位 |
| 超链接 | 选中文字→属性面板填链接 | <a href="page.html">文字</a> | 外部链接忘了写https://前缀 |
| 导航栏 | 手动写div+a标签 | <nav><a href="#">首页</a></nav> | 每个页面导航栏单独写一份，应该统一管理 |
六、从单页到多页站点，以及最后的上线发布
做完首页之后，一个完整的网站通常需要至少3-5个页面：首页（index.html）、关于我们（about.html）、产品/服务页（products.html）、联系页面（contact.html）等。DW里最省事的做法是把index.html另存为其他页面，然后修改主体内容，这样导航栏、页脚、整体样式都保持一致，不用每个页面从头做。
但这里暴露了DW最大的弱点：DW不支持模板继承。如果你有10个页面，导航栏改了要手动改10个文件，每个文件都要打开、修改、保存。现代建站工具（WordPress、静态网站生成器）通过模板系统解决了这个问题——导航栏改一次，所有页面自动更新。用DW做超过5个页面的网站，维护成本会指数级上升。这也是为什么DW适合做小型展示网站（3-5个页面），不适合做内容型网站（博客、新闻站、产品库）。
最后一步：把做好的网站发布到公网。DW内置了FTP上传功能：菜单栏"站点"→"管理站点"→选择你的站点→"服务器"→添加新服务器→填写FTP地址、用户名、密码（这些信息在你的虚拟主机或服务器提供商那里获取）。配置好后，在DW右侧"文件"面板中选中要上传的文件或文件夹→右键"上传"，DW会自动把本地文件同步到服务器上。
上传之前要确认几件事：域名已经买好并且解析到了服务器IP（在域名管理后台添加A记录）、国内服务器已经完成ICP备案（没备案的域名在国内服务器上无法访问）、所有图片路径和链接都改成了相对路径。DW的FTP上传功能本身很稳定，但它不会帮你检查这些前置条件——很多人做到这一步发现网站打不开，以为是DW的问题，其实是因为域名没解析或者没备案。
用DW做完网站后的三个选择
· 只做几个静态展示页：DW足够用了，做完FTP上传到虚拟主机，配好域名就能访问。适合个人简历站、产品展示页。
· 需要经常更新内容（博客、新闻、产品库）：DW不合适。改用WordPress或静态网站生成器，内容管理和SEO都比DW手工维护强太多。
· 需要做多个网站：DW一个个做效率太低。考虑用UC建站系统统一管理多站点，独立部署、HTML直出SEO友好，内容更新和SEO监控都在统一看板上完成。
Dreamweaver说到底是一个"帮你把HTML和CSS写出来"的工具，它解决的是代码生成的问题，不解决网站架构、内容管理、SEO优化、多端适配这些问题。如果你的目标是快速做一个能用的静态展示网站，DW的六步流程完全够用。但如果你的网站需要持续更新内容、需要被搜索引擎收录、需要在手机上正常显示——那DW只是整个建站链条上的一个环节，后面的域名、服务器、备案、响应式适配、SEO、内容更新，每一环都比"用DW画一个页面"重要得多。
