Dreamweaver如何制作H5网页？-建站教程-锦华智联科技

Adobe Dreamweaver H5 完整教程

第一部分：准备工作与核心概念

在开始之前,我们需要明确几个关键概念，这会让你的学习过程事半功倍。

（图片来源网络，侵删）

什么是 H5？

H5 是 HTML5 的简称，HTML (HyperText Markup Language) 是构建网页的骨架语言，HTML5 是它的最新版本，引入了许多强大的新特性，如：
- 语义化标签：如 <header>, <footer>, <nav>, <article>, <section>，让代码结构更清晰。
- 多媒体支持：原生支持 <video> 和 <audio>，无需 Flash。
- Canvas 和 SVG：用于绘制 2D 图形和动画。
- 本地存储：让网页能在本地保存数据。
- 响应式设计：通过媒体查询等，轻松适配不同屏幕尺寸的设备（手机、平板、桌面）。

为什么用 Dreamweaver 做 H5？

可视化设计：Dreamweaver 的 “实时视图” 功能，让你像在 Photoshop 中一样拖拽元素、设置样式，所见即所得。
代码提示：强大的代码编辑器，对 HTML, CSS, JavaScript (包括 jQuery) 有完美的代码提示和自动补全功能，大大减少编码错误。
工作流集成：可以轻松集成 Adobe 其他软件（如 Photoshop, XD）的设计稿，并能直接连接到 Git 进行版本控制。
多设备预览：内置的设备预览功能，可以模拟在不同手机、平板上的显示效果。

安装与启动

确保你已经安装了 Adobe Dreamweaver (推荐 CC 2025 或更新版本)。
启动 Dreamweaver，选择 “新建” -> “HTML”，Dreamweaver 会为你创建一个包含基本 HTML5 结构的空白文件。

第二部分：Dreamweaver H5 开发环境

Dreamweaver 的界面非常强大，但初学者可能会被吓到，我们先来认识几个最重要的面板。

（图片来源网络，侵删）

工具栏
- 实时视图：这是你的设计画布，所见即所得。
- 实时代码：在实时视图中，点击元素，这里的代码会高亮显示。
- 代码视图：纯代码编辑模式。
- 拆分视图：最推荐初学者使用的模式！ 上半部分是代码，下半部分是实时视图，修改代码能立即看到效果，反之亦然。
插入面板

包含了所有可以插入的 HTML 元素，如结构、媒体、表单等，你可以像搭积木一样，把元素拖到页面上。
属性检查器
（图片来源网络，侵删）
- 最核心的面板！ 选中页面上的任何一个元素（比如一张图片、一个段落），这里就会显示该元素的所有属性（如图片的 src、width、alt；段落的 class、id、color 等），你可以直接在这里修改。
文件面板

就像 Windows 的资源管理器或 Mac 的访达，用于管理你网站的所有文件和文件夹。

第三部分：实战演练 - 创建你的第一个 H5 页面

我们将创建一个简单的个人作品集页面,包含 H5 的核心特性。

步骤 1：创建项目站点

在开始写任何代码之前,强烈建议先创建一个站点，这能确保 Dreamweaver 正确处理文件路径。

点击菜单栏 “站点” -> “新建站点”。
在弹出的窗口中,为你的站点起一个名字（MyPortfolio）。
在“本地站点文件夹”中，选择一个空文件夹作为你的项目根目录。
点击 “保存”，现在你的文件面板中就会显示这个站点文件夹。

步骤 2：搭建 H5 语义化结构

在 “拆分视图” 下，我们将使用 “插入” 面板来构建页面骨架。

页面整体结构：
- 从 “插入” 面板中，找到 “结构” 分类。
- 拖拽 <header> 标签到代码中的 <body> 标签内，这代表页面的头部。
- 接着拖拽 <nav> 标签到 <header> 内，这代表主导航菜单。
- 在 <nav> 后面，拖拽一个 <main> 标签，这代表页面的主要内容区。
- 在 <main> 标签内，拖拽一个 <section> 标签，用于放置作品展示。
- 在 <main> 后面，拖拽一个 <footer> 标签，这代表页脚。

你的代码结构看起来应该像这样：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的作品集</title>
</head>
<body>
    <header>
        <nav>导航菜单</nav>
    </header>
    <main>
        <section>作品展示区</section>
    </main>
    <footer>页脚信息</footer>
</body>
</html>

步骤 3：添加内容并设置样式

现在我们开始往里面填充血肉。

添加文本和图片：
- 切换到 “实时视图”。
- 在 <nav> 中输入“首页 | 关于我 | 联系方式”。
- 在 <section> 中输入一些介绍文字，然后点击 “插入” -> “图像”，选择一张你的作品图片。
- 选中图片,在 “属性” 检查器中，你可以设置图片的宽度、替换文本（alt 属性，对 SEO 和无障碍访问很重要）等。
使用 CSS 设计器（核心！）：
- 在右侧面板组中,找到并打开 “CSS 设计器” 面板。
- 选中你想要修改的元素,<header>。
- 在“CSS 设计器”中，你会看到一个 “源” 区域，点击 “添加源” -> “创建新的 CSS 文件”，给文件起个名字，style.css，Dreamweaver 会自动将其链接到你的 HTML 文件中。
- 现在开始设计！
  - 在 “选择器” 区域，点击 .container（我们还没创建它，稍后会说），或者直接输入 header。
  - 在 “属性” 区域，你可以设置：
    - 背景：点击颜色块，选择一个背景色。
    - 布局：设置 padding（内边距，让内容不贴边）、width（宽度，可以设置为 100%）。
    - 文本：设置 text-align（文本对齐方式，如 center）。

步骤 4：实现响应式设计

H5 的一个重要特性就是响应式，我们让页面在手机上也能完美显示。

使用媒体查询：

在 “CSS 设计器” 中，选中你的样式表（style.css）。
在底部找到 “媒体查询” 图标（像一个信号塔），点击它。
选择一个预设的断点,“平板” (768px) 或 “手机” (480px)，Dreamweaver 会自动为你生成一个 @media 代码块。

在这个新的代码块里,你可以为小屏幕设备写特定的样式。

/* 默认样式 (桌面) */
header {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
}
/* 平板和手机样式 */
@media screen and (max-width: 768px) {
    header {
        background-color: #555; /* 桌面和手机背景色不同 */
        padding: 10px; /* 内边距变小 */
    }
    nav a {
        display: block; /* 导航链接变成块级元素，垂直排列 */
        margin: 5px 0;
    }
}

使用设备预览：
- 点击 Dreamweaver 右上角的 “设备预览” 按钮（一个手机图标）。
- 选择不同的设备（如 iPhone 12, iPad），你的“实时视图”会立即切换到该设备的模拟界面，方便你调试。

第四部分：进阶技巧与最佳实践

使用 Bootstrap 框架：
- Bootstrap 是最流行的 CSS 框架之一，能让你快速构建响应式布局。
- 在 “插入” 面板中，切换到 “框架” 分类，选择 “Bootstrap”。
- 你可以直接拖拽 “Bootstrap 网格” 到页面上，然后像搭积木一样，把内容放进 .col-* 的列中。
代码提示与快捷键：
- 代码视图 下的代码提示非常智能，多使用它来学习标准的 HTML/CSS 写法。
- 记住一些常用快捷键,如 Ctrl+S (保存), Ctrl+Z (撤销), Ctrl+B (加粗)。
检查与调试：
- 按 F12 键，可以在默认浏览器中打开你的页面，进行最终测试。
- 使用浏览器自带的 “开发者工具” (按 F12 或 Ctrl+Shift+I 打开)，可以实时修改页面样式和查看网络请求，是调试的利器。
清理代码：
- 如果从 Word 或其他地方复制了带格式的文本，粘贴到 Dreamweaver 时，右键选择 “编辑” -> “清理 Word/Excel/RTF 格式”，可以移除多余的代码。

第五部分：总结与资源

Dreamweaver 是一个功能强大的 H5 开发工具，尤其适合设计师和希望兼顾设计与代码的开发者，通过 “拆分视图” 和 “CSS 设计器”，你可以高效地学习 H5 结构和 CSS 样式，并通过 “媒体查询” 和 “设备预览” 轻松实现响应式设计。

推荐资源：

官方教程：Adobe 官网有大量高质量的 Dreamweaver 视频教程。
MDN Web Docs：https://developer.mozilla.org/zh-CN/ 学习 HTML 和 CSS 最权威、最全面的免费文档。
W3Schools：https://www.w3schools.com/ 另一个非常好的入门学习网站，提供大量在线实例。

希望这份教程能帮助你顺利入门 Dreamweaver H5 开发！祝你学习愉快！