对于不同用户(如纯设计师、纯开发者、全栈设计师),其“首选”设置会有所不同,下面我将从通用/推荐设置、不同角色(设计师/开发者)的侧重设置以及关键参数详解三个方面来解答。

(图片来源网络,侵删)
通用/推荐设置 (适用于大多数用户)
这些设置是让 Dreamweaver 更好用、更符合现代工作流的通用配置,无论你是设计师还是开发者,都建议检查一下。
常规
- 界面主题:
- 推荐:
深色或自定义。 - 理由: 深色主题对眼睛更友好,尤其是在长时间编码时,如果你喜欢浅色,可以选择
浅色。
- 推荐:
- 文档选项卡:
- 推荐: 勾选
将相关文件显示为选项卡。 - 理由: 当你打开 HTML 文件时,它自动关联的 CSS、JavaScript 文件会以选项卡形式显示在旁边,方便快速切换,而不是在侧边栏里一个个找。
- 推荐: 勾选
- 撤销:
- 推荐:
尽可能多(100)。 - 理由: 撤销步数越多,操作失误后恢复的余地越大。
- 推荐:
字体
- 代码字体:
- 推荐:
Consolas,Monaco,Fira Code,Source Code Pro等等宽字体。 - 理由: 等宽字体能确保每个字符占用的宽度相同,代码对齐非常整齐,易于阅读。
- 推荐:
- 大小:
- 推荐:
12到16pt 之间,根据你的显示器和个人喜好调整。 - 理由: 字体太小伤眼,太大又显得拥挤。
- 推荐:
代码颜色
- 方案:
- 推荐:
默认或深色。 - 理由: Dreamweaver 内置的配色方案已经非常成熟,语法高亮清晰分明,你也可以从网上下载更多主题(如 Monokai, Dracula 等)导入。
- 推荐:
- 设置:
- 推荐: 仔细检查
HTML、CSS、JavaScript的标签、属性、值、注释的颜色是否清晰可辨,避免与背景色混淆。 - 理由: 清晰的颜色区分能让你快速识别代码结构,提高效率。
- 推荐: 仔细检查
状态栏
- 推荐: 保持默认勾选所有选项。
- 理由: 状态栏提供了文档大小、下载时间、编码格式、浏览器兼容性检查等关键信息,非常有用。
文件类型/编辑器
- 推荐: 这是最关键的部分之一。
- HTML:
Dreamweaver(可视化编辑) 或代码视图。 - CSS:
代码视图(强烈推荐,因为 CSS 编辑器功能强大)。 - JavaScript:
代码视图。 - 图像:
Fireworks(如果你还在用它) 或外部编辑器(如 Photoshop)。 - 服务器端技术 (如 PHP, ASP):
代码视图。 - 操作: 点击
编辑按钮,你可以为每种文件类型指定默认的编辑器,你可以设置所有.js文件都在 VS Code 中打开,而在 Dreamweaver 中预览。
- HTML:
不同角色的侧重设置
A. 如果你偏向于 视觉设计/前端
- 实时视图:
- 位置:
编辑>首选参数>实时视图 - 设置:
- 启用 CSS 3D 变换: 勾选。
- 启用动画: 勾选。
- 启用平滑滚动: 勾选。
- 理由: 让实时视图能完整地展示现代 CSS 效果,所见即所得。
- 位置:
- 辅助功能:
- 位置:
编辑>首选参数>辅助功能 - 设置: 勾选
图像、表格等选项,让 Dreamweaver 在插入这些元素时自动提示添加alt、summary等必要的可访问性属性。 - 理由: 帮助你编写更符合 Web 标准和可访问性规范的代码。
- 位置:
B. 如果你偏向于 后端开发
- 代码提示:
- 位置:
编辑>首选参数>代码提示 - 设置:
- 延迟: 设置为
0或一个很小的值,让提示立即出现。 - 触发键: 保持
Enter和Tab。 - 显示标签/属性/代码片段: 全部勾选。
- 延迟: 设置为
- 理由: 强大的代码提示是开发效率的核心,能大幅减少记忆和输入的工作量。
- 位置:
- 代码格式化:
- 位置:
编辑>首选参数>代码格式化 - 设置:
- 缩进:
制表符或空格(根据团队规范统一)。 - 缩进大小:
2或4(根据团队规范)。 - 标签和属性大小写:
小写(HTML/XML) 或与输入时相同(JavaScript)。
- 缩进:
- 理由: 自动格式化代码,保持代码整洁统一,符合团队规范。
- 位置:
关键参数详解
| 参数类别 | 参数项 | 推荐设置 | 理由说明 |
|---|---|---|---|
| 常规 | 界面主题 | 深色/自定义 | 减少眼部疲劳,现代感强。 |
| 文档选项卡 | 勾选“将相关文件显示为选项卡” | 工作流高效,关联文件一键切换。 | |
| 字体 | 代码字体 | 等宽字体 (如 Consolas) | 保证代码对齐,阅读清晰。 |
| 代码颜色 | 方案 | 默认/深色 | 语法高亮清晰,易于区分代码结构。 |
| 文件类型/编辑器 | (各类文件) | 根据需要指定 (如 CSS/JS 用代码视图) | 精细化控制,用最适合的工具编辑不同文件。 |
| 代码提示 | 延迟 | 0 或很小 | 让代码提示秒出,提升编码流畅度。 |
| 代码格式化 | 缩进 | 制表符 或 2/4个空格 | 保持代码风格一致,可读性高。 |
| 标签大小写 | 小写 (HTML) | 符合现代 Web 标准。 | |
| 实时视图 | 启用 CSS 3D/动画 | 勾选 | 确保可视化编辑器能正确渲染复杂效果。 |
| 辅助功能 | 自动提示属性 | 勾选 | 帮助编写无障碍、更规范的代码。 |
如何找到“默认”设置?
Dreamweaver 并没有一个“一键恢复出厂设置”的按钮,但你可以通过以下方式重置:
- 手动恢复: 逐项进入
编辑>首选参数,将每个设置改回你认为的“默认”或“推荐”状态。 - 重置工作区: 这是最接近“恢复默认”的方法。
- 在 Windows 上:关闭 Dreamweaver,然后到
C:\Users\[你的用户名]\AppData\Roaming\Adobe\Dreamweaver [版本号]\en_US\Configuration目录下,将Workspaces文件夹重命名或删除,重启 Dreamweaver,它会自动生成一个全新的默认工作区布局。 - 在 Mac 上:关闭 Dreamweaver,然后到
~/Library/Application Support/Adobe/Dreamweaver [版本号]/en_US/Configuration目录下,操作同上。
- 在 Windows 上:关闭 Dreamweaver,然后到
最后的小建议: Dreamweaver 的首选参数非常个人化,最好的方法是先了解每个选项的作用,然后根据自己的工作习惯和项目需求进行微调,打造一个真正属于你自己的、最高效的 Dreamweaver 工作环境。

(图片来源网络,侵删)
