Dreamweaver全版本通用建站流程与实战操作详解
1. 动手前的核心认知为什么Dreamweaver值得学如果你现在才开始接触网页制作大概率听过一句话Dreamweaver早就过时了现在谁还用手写代码。我不否认这种说法有一定道理但作为一个带过不少实习生、也接手过多个“上古遗留项目”的从业人员我必须负责任地说一句Dreamweaver的全版本操作逻辑依然是理解网页开发流程最好用的“教学工具”。我最早用Dreamweaver是CS3时代后来经历CS4、CS5、CS6再到Creative Cloud系列可以说这个软件被骂得最惨的那些年臃肿、代码提示不如专业编辑器恰恰是它功能最完整的年代。即便到了现在Dreamweaver依然是少有的、能让你同时看到设计视图和代码视图还能一键管理本地站点与远程服务器之间文件同步的图形化工具。很多人误解了Dreamweaver的定位——它不是一个给你“拖拽出一整个网站”的傻瓜软件而是一个帮你省去重复劳动、降低入门门槛的网页开发工作台。换句话说用好了它是一个高效的编辑器加站点管理器用不好它就是一堆过时代码的制造机。这一篇我不打算讲某个特定版本的新功能因为Dreamweaver从CS6到CC系列的版本更新很多界面按钮的位置变了、名称变了但网页开发的底层流程从来没变过。只要理解了这套流程任何版本的Dreamweaver你都能快速上手。我给你拆解成一套全版本通用的标准动作你按顺序照着做基本不会跑偏。2. 全新版本通用建站流程从本地站点到上线2.1 第一步定义站点这是最关键的一步很多初学者打开Dreamweaver之后第一件事就是新建一个HTML文件然后就开始写内容写到一半才发现图片路径不对、预览样式丢失、上传服务器后页面全乱。这些问题的根源几乎都是因为一开始没定义站点。定义站点在Dreamweaver里叫“管理站点”Manage Sites。在CS6里这个入口在菜单栏的“站点”菜单中在CC版本里启动界面右侧有一个“站点管理”入口或者在菜单栏的“站点” - “新建站点”。不管哪个版本你最终都会看到一个对话框要求填四类信息站点名称、本地站点文件夹、站点URL可选、以及远程服务器信息。实际操作中我建议本地站点文件夹按这个结构建好再指向mysite/ ├── css/ 存放样式表 ├── images/ 存放图片素材 ├── js/ 存放脚本文件 ├── index.html 首页 └── about.html 内页有人会问我不建子文件夹所有文件平铺不行吗小项目确实能运行但一旦文件超过20个且包含多套皮肤、多个页面模块平铺结构会让你想骂人。CSS和图片分开是行业基础规范Dreamweaver的文件管理面板Files面板默认也会按文件夹树形展示你不用白不用。填完站点名称和本地文件夹后有一个容易忽略的地方——服务器模型。这里通常有两种本地/网络Local/Network和FTP等远程方式。如果是纯本地练习选“无”就好如果要做真实上线则要选择FTP并填写主机地址、用户名、密码。 这一处选错后面上传文件时会一直报连接失败。我的建议是初期练习阶段服务器信息一律不填把精力放在页面本身。2.2 第二步新建页面与基础参数设置站点定义好之后新建页面就顺手了。在Dreamweaver中按CtrlNMac上是CmdN可以新建文件不同版本会弹出一个“新建文档”对话框。这里有几个经常被忽略的选项文档类型DocType默认可能是XHTML 1.0 Transitional或HTML5看你用的版本。 技术选型上只要不是做那种需要兼容IE6的老古董项目一律选HTML5。这决定了Dreamweaver自动生成的代码骨架是html简洁版还是带一堆xmlns头信息。布局这个对话框里会展示很多自带模板如三栏布局、左右框架新手最容易踩坑的就是选了这些布局。我强烈建议这一步选“无”或“空白”因为Dreamweaver自带的布局模板是用大量陈旧嵌套表格做的改起来比重新写一个还费劲。标题Title新建时可以在“标题”输入框里写入你的网页标签名。如果这一步漏了页面做好后再改也可以但很多人会忘了导致浏览器标签页上显示文件名。新建完成后你会进入主编辑区。默认情况下你会看到“代码”、“拆分”、“设计”三个视图按钮。这个设计视图就是很多新手误解Dreawmweaver的地方——它不是给你拖组件到页面的工具更准确地说它是一个实时的“可视化调试器”。我在后面专门讲它的正确用法。2.3 第三步用设计视图还是直接写代码这是新手问过最多的问题Dreamweaver到底应该用哪种视图工作我的建议非常明确写结构用代码视图调整布局用设计视图做参考排错时用拆分视图同时看代码和渲染结果。具体解释一下。设计视图有时候叫“实时视图”在较新版本里已经改进了很多渲染结果和真实浏览器差距很小。但它有一个致命问题如果代码存在未闭合的标签、嵌套层级错误设计视图的容错显示会让你误以为页面没问题。而浏览器会严格按标准解析最后导出后页面就乱成一片。代码视图就是你写HTML和CSS的地方。Dreamweaver的代码提示在CS6之后不断完善按Ctrl空格可以呼出提示列表标签和属性都会自动补全。很多习惯用记事本的初学者第一次用Dreawmweaver就是为了这个代码提示功能大大降低了拼写错误率。拆分视图的用途最好用。左边代码、右边设计你在左边改一行代码右边会立刻刷新渲染结果。这个功能在排查布局问题时作用巨大。例如你发现首页的导航栏和设计稿差了10个像素不用频繁切到浏览器按F12直接在拆分视图调数值肉眼对比两个面板的差异效率能提高不少。2.4 第四步本地预览与常见预览方式差异代码写好后点击设计视图上方的小地球图标或者按F12Dreamweaver会调用你系统里默认的浏览器打开预览。CS6及更早版本这里有个典型坑默认浏览器是IE如果你没改过系统默认设置打开后页面效果和你用Chrome测试完全不同。所以拿到新电脑先改系统默认浏览器为Chrome或Edge再在Dreamweaver里按F12这才是真正的“所见即所得”。另外要提醒的是F12预览是“临时预览”。这个功能会把当前编辑的文件复制到一个临时文件夹里打开而不是直接在站点目录里打开。也就是说如果你的页面引用了相对路径的CSS和图片F12预览通常没问题但如果你使用了绝对路径以file://开头或站外链接临时预览有时会失效。这时候不要慌直接在浏览器里打开站点目录下的原始文件或者配置本地服务器如phpStudy、VS Code的Live Server效果更接近线上。3. 核心功能实操页面搭建的五个关键动作3.1 构建HTML骨架的三种常用方式页面基础框架无非是头部header、导航nav、主体main、底部footer这几块。我见过有人用Dreamweaver的插入面板一个个点击生成这不失为一种方式但效率太低而且插入面板在不同的版本CS6和CC中布局差异很大教学上很难统一。我习惯直接在代码视图里写基础结构比如!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个页面/title link relstylesheet hrefcss/style.css /head body header h1网站标题/h1 /header nav a hrefindex.html首页/a a hrefabout.html关于/a /nav main p这里是主体内容/p /main footer p版权信息/p /footer /body /html这段代码写完按CtrlS保存为index.html。然后你在设计视图中刷新就能看到页面里出现了标题、导航、段落和页脚这几个大块。这一步能把结构问题可视化也是Dreamweaver的强项——让你在写代码的同时心里清楚这一段的渲染结果是长什么样的。如果你希望Dreamweaver帮你生成嵌套结构也可以使用“插入”面板里的“结构”选项选择区块、标题、列表等。但最终生成的代码一定会在div上包一层冗余属性学习阶段可以偶尔用用正式项目我基本不推荐。3.2 表格布局与CSS布局的取舍在Dreamweaver的“插入”菜单里有一个“表格”选项这个功能在CS6时代还很显眼到CC版本后依然保留。它是历史遗留产物曾用于搭建整个页面的布局框架等高列、垂直对齐后来Web标准和移动端普及用表格布局的页面在响应式适配中表现极差因此行业的共识是——表格只用于展示数据不再用于页面布局。但作为全版本通用的操作能力你最好还是知道表格怎么做。插入表格时可以设置行数、列数、表格宽度、边框粗细这几个核心参数。如果插入后表格宽度是100%而你想改成固定宽度可以在代码中修改width属性。需要注意的是Dreamweaver生成的表格默认会在每个单元格内生成一个空格字符nbsp;原因是最早的浏览器对空单元格的渲染有兼容问题不填内容就会塌陷。这个细节在代码审查时经常出现虽然不是错误但在页面源码中看着很不整洁。CSS布局的核心逻辑则是“盒子模型”——每一个块级元素都是一个盒子由外边距、边框、内边距、内容区组成。Dreamweaver的CSS面板通常在右侧栏可以查看和修改选中元素的盒模型参数这个功能叫“计算样式”。你选中页面里的某一个div面板里会显示它的margin、padding、border数值鼠标直接点数字还能上下调节非常直观。这套可视化调参的体验是很多纯代码编辑器做不到的也是我现在仍在部分项目中保留使用Dreamweaver的原因之一。3.3 图片插入与路径问题图片插入非常简单菜单“插入” - “图像”或直接将文件面板里的图片拖进设计视图。Dreamweaver会弹出“图像标签辅助功能属性”对话框让你填写替换文本alt text和长描述。很多人这里习惯性地直接点击“确定”或“取消”导致后面验收时alt属性缺失。从SEO和无障碍访问的角度看alt文本是图片信息传达的重要一环屏幕阅读器、搜索引擎爬虫都依赖这个字段务必填上。比插入操作更核心的是路径问题。图片路径分为三种相对路径、根相对路径、绝对路径。在Dreamweaver内部只要你把图片放在站点的images文件夹里软件会自动在代码中生成相对路径images/logo.png这是最合适的方式。如果你不小心用了绝对路径D:/网站开发/项目/images/logo.png本机预览没问题一旦上传服务器路径就失效了。这是初学者最容易犯的、且最难自查的错误之一因为“我明明在本地看到图了怎么一传上去就没了”。如何快速发现这个问题在文件面板中如果图片文件旁边出现一个“失效链接”的图标就说明路径不对。或者直接在代码视图里检查src属性是否以http://或盘符开头。只要不是这两种相对路径一般是安全的。3.4 超链接的四种状态玩法链接是网页的灵魂。在Dreamweaver中选中一段文字然后在属性面板的“链接”输入框里填地址就可以生成超链接。这里延伸出一个样式问题很多人写好链接后发现点击过的链接变成了紫色而且下划线傻大黑粗样式极为难看。超链接一共四种状态在CSS里对应四个伪类a:link未访问、a:visited已访问、a:hover鼠标悬停、a:active点击瞬间。真实项目中至少要对a:visited和a:hover做样式定义否则默认紫色和蓝色会拉低整个页面的质感。我通常会写一组最基础的a { color: #0077cc; text-decoration: none; } a:visited { color: #884499; } a:hover { color: #ff5500; text-decoration: underline; }在Dreamweaver里创建CSS规则很简单先把光标放到需要定义的元素上或者直接选中文字然后在CSS面板点击“新建规则”选择器类型选“类、ID、标签”等。这里有个人经验新手最容易在“选择器类型”这里卡住不知道选“标签”还是“类”。简单判断标准——如果你要统一全文所有超链接样式选“标签”并选择a如果你只想要某几个链接变成按钮样式就用“类”自己定义一个名字比如.btn。这两者的区别就是“全部应用”和“单独指定”。3.5 表单的制作与提交逻辑表单是页面里唯一涉及到前后端交互的部分。在Dreamweaver中插入表单的入口在“插入” - “表单” - “表单”或者使用“插入”面板的“表单”类别。插入后会生成一个form标签里面可以继续插入文本框、密码框、单选按钮、复选框、文本区域、提交按钮等。但这里有个很现实的提醒Dreamweaver只能帮你画出表单的前端外壳真正处理用户提交数据的后端脚本PHP、ASP、Python等它帮不了你。你必须在form标签的action属性里指定后端处理页面的地址method属性选择post或get。两者的区别get把数据放在URL上适合搜索、翻页post把数据放在请求体中适合登录、注册、提交留言等含敏感信息或内容量大的数据。如果你做完表单后没有任何后端脚本那么提交时页面只会刷新一下啥也不会发生这是正常的。在表单页面中还有一个经常被忽略的细节是“标签的for属性”。在Dreamweaver中点选表单控件后属性面板可能不会直接显示这个属性你需要手动在代码视图里补上label forusername用户名/label input typetext idusername nameusernamelabel的for值要与input的id值一致这样用户点击“用户名”这三个字时输入框会自动获得焦点。这个体验细节很多网页都有但在初学者阶段的作业和作品里很少见把它加上你的页面完成度会明显高于其他人。4. 站点管理与上线发布全版本都不变的发布流程4.1 FTP配置与几种连接模式的坑网站做完最后一步就是上传。在Dreamweaver中这个动作的核心是“管理站点”里的“服务器”配置。以CC版本为例你需要在“站点”菜单里选择“管理站点”然后点击“编辑”切到“服务器”标签页点加号新增服务器。需要填的内容主要是服务器名称随便填一个便于识别的名字比如“线上服务器”。连接方法最常见的是FTP和SFTP。能用SFTP就不要用FTP因为SFTP走的是SSH加密通道账号密码不会明文传输而FTP是明文传输在公网环境中容易被截获。FTP地址服务器IP或域名不要带ftp://前缀。用户名、密码服务器分配的账号信息。根目录通常是/www/wwwroot/你的域名或者/public_html取决于服务商。如果你不确定先填/连接后可下载服务器目录列表再调整。首次配置好后点击“测试”按钮Dreamweaver会检查能否连通。这里我踩过一个大坑有的服务器禁止密码登录只允许密钥登录这种环境Dreamweaver是无法直接连的。当时我花了一个晚上排查最后发现是我服务商开了“仅密钥登录”策略不得已换用其他FTP软件如FileZilla或者先在服务器上配置好SFTP密码登录才把事情解决。如果你的连接一直失败除了检查账号密码外可以优先确认服务器是否对IP有白名单限制、是否开启了被动模式PASV。被动模式在Dreamweaver的连接设置里通常默认开启但有些服务器只支持主动模式导致行为诡异上传到一半掉线。遇到这种情况去“高级”设置里切换一下连接模式往往立竿见影。4.2 文件同步与远程操作连接成功后你可以像操作本地文件一样操作服务器文件。文件面板左边是本地目录右边是远程服务器目录如果你的面板没有分栏可以点击文件面板上的“展开/折叠”按钮展开双栏模式。上传文件有几种方式选中本地文件点击向上的蓝色箭头或者直接把文件拖到远程目录中。下载则相反。在Dreamweaver中你还可以执行“站点” - “同步”操作选择“同步远程和本地”的方向让软件自动对比两边文件的新旧程度然后仅上传或下载有差异的文件。这个功能在实际维护老项目中非常实用。假设一个已经上线的网站你在本地改了三个页面的CSS和一段脚本如果全量覆盖上传不仅浪费时间还有可能把服务器上被别人改过的文件覆盖掉。使用同步功能让软件自动对比修改时间会减小误操作的风险。需要注意如果你的服务器上有缓存目录比如生成静态页面的缓存文件夹、用户上传的附件文件夹最好不要让Dreamweaver做全量同步因为本地往往没有这些文件同步会误删服务器端的增量数据。我的习惯是只上传自己明确改动过的文件不做全量同步。4.3 站点报告与清理工作生产环境安全检查Dreamweaver有一个“站点” - “报告”功能很多人不知道。它可以检查站点内的常见问题比如无标题文档、未命名widows/macos文件、可访问性问题等。这个功能在实际交付时非常好用尤其是在做企业站或课程设计时它能帮你扫描出那些“忘记写title标签”、“图片没有alt属性”的遗漏点。另外一个重要的习惯是清理Dreamweaver的代理文件。在Dreamweaver中有时你会在站点文件夹里看到名为_notes的文件夹里面存放了一些.js和.mno结尾的注释文件。这是Dreamweaver的站点缓存文件用于记录文件备注、设计备注。如果你在交付源码或上传到服务器的时候记得删除这些文件夹因为它们对网站运行毫无用处却会在代码目录里制造一堆垃圾文件。我第一次交付客户源码时没注意对方解压后看到包里多了一个_notes文件夹截图问我这是什么场面一度非常尴尬。删除方法在文件面板中右键点击_notes文件夹选择“删除”确认即可。5. 多版本兼容要点不同版本间的差异与操作迁移5.1 工作区布局对比与切换CS6及更早版本的界面是经典的“浮动面板”式左侧插入面板、右侧属性面板在窗口底部、右下角文件面板。CC版本开始大规模采用深色主题、可折叠的侧边栏属性面板被整合进右侧的Inspector面板插入面板也从悬浮工具栏变成了可搜索的面板。不少老用户升级后第一反应是“找不到按钮”其实核心功能都还在只是入口变了。如果你实在不习惯新版本可以尝试在“窗口” - “工作区布局”里选择“经典”Classic或“设计器”Designer它会尽量还原旧版的面板分布。我自己在升级后几乎是第一时间重置成了经典布局用了一周才慢慢适应新版。这里给你一个判断标准如果你手里有CS6且只做学习练习不涉及高分辨率屏适配其实不必强行升级。但如果你要在4K屏或MacBook的Retina屏上使用老版本CS6的工具栏和图标没有完美适配高分屏字体会发虚这时候CC系列体验会舒服很多。5.2 对不同HTML版本和CSS3的支持Dreamweaver CS6的代码提示对HTML5和CSS3的支持已经比较完整但它默认的“新建文档”对话框里CSS前缀的自动补全不如CC版本丰富。例如编写CSS3的圆角、渐变、弹性布局flexbox相关属性时CC系列会给出更详细的代码提示和浏览器兼容性说明。如果你是学习较新的前端知识点用CC版本会顺手很多。这一点需要注意Dreamweaver是一个编辑器不是一个编译器。它的代码提示再丰富也依赖你系统浏览器对CSS和JavaScript的支持程度。无论在哪个版本里你写完CSS3的display: flex想验证效果最终还是要用现代浏览器打开页面。老版本Dreamweaver不会阻止你写新语法只是不会主动推荐新语法所以不要因为“提示里没有”就认为它不支持。5.3 模板和库项目的迁移Dreamweaver的“模板”功能扩展名为.dwt可以让多个页面共享相同的头部、导航、页脚修改模板后全站套用该模板的页面会同步更新。这个功能在早期的网站栏目页建设中几乎是标配操作。全版本通用的使用流程是先新建一个模板.dwt文件把公共部分写好然后在可编辑区域插入“可编辑区域”标记Editable Region之后新建页面时选择“从模板新建”即可快速生成一个套用了模板的新页面。但我要泼一盆冷水这个模板功能在新版本中已经逐步被弱化了而且它与现代前端项目组件化思路比如React、Vue的组件相比维护起来并不方便。如果你只是做几个静态页面用模板无可厚非但如果你已经有能力写一点JavaScript或者使用前端框架我不建议学Dreamweaver模板直接把头部和导航复制到不同页面维护成本在页面数量较少时反而更低。库项目Library Item同理。它的使用场景是“头部和底部实在太长了不想每次复制”但它的更新机制依赖Dreamweaver的“更新当前文件/整个站点”命令。有一次我更新了一个库项目里的电话联系方式全站几十个页面确实都更新了但生成的一堆.lbi注记文件后来混入了交付目录清洁起来极麻烦。所以我对这类带站点依赖的功能一贯的心态是“知道怎么用但能不用就不用”。6. 高频踩坑清单那些文档里不会写的经验6.1 为什么设计视图和浏览器打开效果不一样这是一个从CS3时代问到CC时代的问题Dreamweaver设计视图里排版正常浏览器打开却错位。原因有几个层面。一是设计视图的渲染引擎和真实浏览器不是同一个Dreamweaver低版本用的是内置的WebKit控件高版本虽然改进了但依旧不能100%等同于你本机的Chrome。二是你的一部分CSS比如标准流、浮动细节写在外部样式表中设计视图的渲染优先级会受你当前代码视图是否保存、是否链接了完整CSS的影响。解决办法很简单写代码时养成随时按CtrlS的习惯然后预览前先保存当前文件不要只按F12不保存。如果你按了F12之后发现浏览器内容和设计视图不一致以浏览器为准不用纠结设计视图。Dreawmweaver的设计视图定位是辅助参照不是最终标准。6.2 中文乱码问题的根源与处理方式如果你的页面中出现乱码绝大多数情况是字符集声明不一致。在Dreamweaver中新建页面时默认会在head里生成一行meta charsetutf-8新版本或meta http-equivContent-Type contenttext/html; charsetutf-8老版本。只要你保存文件时也选择UTF-8编码在“修改” - “页面属性” - “标题/编码”里可以看到一般不会乱码。常见的乱码场景是用记事本或其它编辑器打开过一个保存为ANSI/GBK编码的文件再拿到Dreamweaver里编辑或者反过来Dreamweaver保存为UTF-8后被老旧的FTP工具以非二进制模式上传导致字节被破坏。处理方式统一用Dreamweaver重新指定编码并“重新载入”文件上传时建议检查FTP工具的传输模式为“二进制”Binary而非“自动”避免文本传输模式把编码改掉。这是我早期做企业站过程中被折腾得最恼火的编码问题至今记忆犹新。6.3 CSS样式冲突内联样式与外部样式的优先级在Dreamweaver的属性面板里当你选中文案后可以直接设置字体、颜色、大小它会立刻生成一个stylecolor: red; font-size: 16px;这样的内联样式。这个操作在快速调试时非常方便但如果你接着又在外部样式表里写了一条p { color: blue; }你会发现文字还是红色。因为内联样式的优先级高于外部样式表。这会导致一个很典型的僵局——页面做得越久内联样式积累得越多后期调整统一风格时修改外部样式表毫无作用只能一个个去代码里手动删内联样式。我的建议是属性面板中的样式设置只用于临时预览确认效果后一定要把内联样式转成CSS类然后删除内联样式。实操中我通常直接在代码视图里加class然后在CSS面板中定义这个类的样式。如果之前已经用内联样式定义了效果我会把那段style整体删掉再写.class-name { ... }。这样既能保证最终效果一致又不会留下无法维护的样式垃圾。Dreawmweaver的CSS面板在这一点上做得不错选中一个类名后可以直接编辑它对应的规则省去了在样式表和页面代码之间来回切换的麻烦。6.4 页面文件大小与图片压缩很多初学者在网页中插入图片时直接用从相机或手机里导出的原图一张图就可能5MB。这样做最大的问题是页面加载时间会指数级上升。Dreamweaver的插入图片功能不会自动压缩位图它只是帮你写一行img标签。你需要自行把图片压缩到适合Web展示的尺寸。一个最基本的经验公式网页中需要显示的图片宽度例如内容区宽度为800px那么图片文件宽度做到1倍到2倍即可。不要直接放一个4000px宽的原图。常见的压缩工具如Photoshop的“导出为Web所用格式”或者TinyPNG这类在线压缩网站都可以用。压缩到多少合适我的一个参考值是普通内容图控制在100-200KB大的Banner图也不要超过400KB。这样页面打开速度会大大加快使用体验会明显提升这是很多纯前端教程里不会专门提醒你、但在真实项目中极其重要的一环。6.5 Dreamweaver卡顿与性能设置如果你的站点文件夹包含大量文件比如图片素材几千张Dreamweaver的文件面板可能会卡顿明显。这时可以试着在“编辑” - “首选项”中调整一些性能选项。例如取消“自动刷新远程文件列表”、关闭“文件下载时自动打开”等。更有效的一招是不要让Dreamweaver监控所有文件类型改为在文件面板中右键 - “刷新”手动刷新。这样在批量导入大量素材时软件不会一根筋地去读每个文件的缩略信息卡顿会缓解很多。另一个常见卡顿来源是“代码视图的实时预览”和“设计视图的实时渲染”同时开启。如果你的电脑内存不太充裕尽量一次只使用一个视图不要拆分成代码加设计的双栏模式长时间处理超大页面。我有个老项目是单页面3万多行代码同时开拆分视图和代码提示后风扇狂转整机明显响应变慢。后来我改成了纯代码视图操作偶尔切到设计视图做定点检查流畅度立马上来了。7. 实操经验小结从“会用”到“用得顺手”在工作流里给Dreamweaver一个合理的定位比学一堆快捷键更重要。我看到很多人陷入两个极端要么鄙视这个软件觉得用Dreamweaver就是菜鸟要么依赖这个软件觉得不用设计视图就不会写网页。实际上作为一个静动态页面快速产出工具Dreamweaver在中小型网站制作、教学演示、以及很多非前端岗位的日常办公场景里依然是非常高效的。我的建议是学习阶段可以把它当作你学习HTML和CSS的“解释器”用代码视图写、用设计视图理解。等你能熟练读懂HTML标签之后再切换到你更顺手的专业编辑器。这样你既享受了Dreawmweaver对初学者友好的图形化界面也没有被它的旧模板和冗余代码拖累。毕竟工具是死的人是活的。懂得在合适的场景选择合适的工具才是干活效率提升的关键。最后分享一个我个人的日常习惯我从来没真正卸载过Dreamweaver。即使在用VS Code写前端项目为主的时代我依然会在某些场景打开它——比如快速改公司老网站的某几个页面或者给客户演示页面改动的即时效果。在那些只需要一次小调整、而我不想搭一套新开发环境的场合Dreawmweaver的轻量操作和直观预览依然是我电脑里一个靠谱的备选项。