如何用Dreamweaver创建index.html？

时间：2026-07-20 10:52:04 编辑：袖梨来源：一聚教程网

Dreamweaver并未于2023年底停止更新，Adobe在2025年6月仍发布安全更新APSB25-35，最新版为2025年12月发布的21.7；所谓“停止更新”说法错误。

Dreamweaver 已于 2023 年底正式停止更新与技术支持，Adobe 官方不再提供下载、安全补丁或兼容性适配。你现在打开的任何「新版 Dreamweaver」要么是旧版本（如 CC 2021），要么是第三方修改包，存在兼容性风险和功能缺失。

如果你手头只有 Dreamweaver，且必须产出一个可用的 index.html，下面这些操作能帮你绕过常见陷阱，而不是教你“从零建站”。

新建文件时别选“动态页”模板

默认新建页面时，Dreamweaver 会弹出向导，推荐“PHP”“ASP”或“WordPress 模板”。这些会自动插入服务端代码、冗余 JS 库或外部 CSS 引用——但你只是要一个静态 index.html。
正确做法：
- 点击菜单栏 文件 → 新建
- 在左侧选择 空白页，中间选 HTML，右侧“文档类型”选 HTML5
- 取消勾选“在新文档中包含 HTML5 Shim”（它会加一段已过时的兼容脚本）
- 点击创建后，立刻删掉自动生成的 <title>无标题文档</title>，替换成你自己的内容

保存路径和编码必须手动确认

Dreamweaver 默认保存为 UTF-8 编码（带 BOM），而现代浏览器和服务器（尤其是 Linux/Nginx）对 BOM 敏感，可能导致 index.html 开头出现空白行、CSS/JS 加载失败或 PHP 包含报错。
务必做这三步：
- 保存前点击菜单 文件 → 另存为，不要用快捷键 Ctrl+S（它不会唤出编码选项）
- 在保存对话框底部，点击 编码 下拉菜单，选 UTF-8（无 BOM）
- 文件名输入框里直接敲 index.html，不要加空格或中文，也别让它自动补成 index_html.html

实时视图和代码视图经常不同步

当你在 设计视图 或 实时视图 中拖拽元素，Dreamweaver 常生成冗余 <div>、内联样式或废弃属性（如 align="center"）。这些在 Chrome/Firefox 中可能显示正常，但一上传到服务器就错位或失效。
建议工作流：
- 写结构只用 代码视图，手写语义化标签：<header>、<main>、<footer>
- 预览用右上角 在浏览器中预览（F12），而不是依赖实时视图
- 如果非要可视化编辑，先切到 代码视图，删掉所有自动生成的 style="..." 和 class="section" 这类无意义类名
- 检查最终 HTML 是否有嵌套错误：比如 <p> 里又套了 <div>（HTML5 允许，但老校验器会报警）

上传前必须手动验证基础结构

Dreamweaver 自带的站点管理器（站点 → 新建站点）仍可配置 FTP，但它不校验 HTML 合法性，也不提示缺失 <meta charset="utf-8"> 或 viewport 设置。
上传前快速检查项：
- 打开 index.html，确认顶部有且仅有这一行声明：<!DOCTYPE html>
- <head> 内必须包含：<meta charset="utf-8"> 和 <meta name="viewport" content="width=device-width, initial-scale=1">
- 所有外部资源（CSS/JS）路径用相对路径，例如：<link rel="stylesheet" href="css/style.css">，而非 file:///C:/.../style.css
- 用在线工具（如 https://validator.w3.org）粘贴代码校验一次——Dreamweaver 不报错，不代表 HTML 是有效的

Dreamweaver 的最大隐患不是功能少，而是它悄悄往你代码里塞过时习惯和隐藏依赖。哪怕只做一个单页，也要把它当成“所见非所得”的编辑器，而不是“点几下就完事”的傻瓜工具。

推荐专题

最新下载

热门教程

如何用Dreamweaver创建index.html？

新建文件时别选“动态页”模板

保存路径和编码必须手动确认

实时视图和代码视图经常不同步

上传前必须手动验证基础结构

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程