重要前提：Dreamweaver 的角色与现代网页开发

在开始之前,必须明确一点：Dreamweaver 已经不是过去那个“所见即所得”的网站制作工具了，现代网页开发（尤其是移动网站）的核心是 HTML、CSS 和 JavaScript。

dreamweaver制作wap网站教程
（图片来源网络，侵删）

Dreamweaver 的现代角色更像是一个强大的代码编辑器和开发环境，它提供了代码提示、实时预览、FTP 同步等强大功能，来辅助你编写和管理代码，而不是让你完全通过点击来“画”出网站。

本教程将教你如何利用 Dreamweaver 的现代功能，通过编写和编辑代码来制作一个适配移动设备的响应式网站。

第一步：理解核心概念——响应式网页设计 (RWD)

我们不再需要为手机、平板、电脑分别制作不同的网站，现代的标准是响应式网页设计，一个网站可以根据用户设备的屏幕大小，自动调整布局、字体大小和图片大小，以提供最佳的浏览体验。

实现响应式设计主要依赖以下三种技术：

dreamweaver制作wap网站教程
（图片来源网络，侵删）
  1. 流式网格布局：使用百分比（%）而非固定像素来定义宽度，让页面元素能“流式”适应不同屏幕。
  2. 弹性图片和媒体：使用 max-width: 100% 确保图片和视频永远不会溢出其容器。
  3. CSS 媒体查询：这是最关键的技术，它允许你针对不同的屏幕尺寸（如手机、平板、桌面）应用不同的 CSS 样式。

第二步：准备工作

  1. 软件安装：确保你已安装最新版的 Adobe Dreamweaver（推荐 CC 2025 或更高版本）。
  2. 项目规划：想好你的网站要包含哪些页面（首页、关于我们、联系方式等），以及每个页面的基本布局。
  3. 素材准备：准备好你的 Logo、图片、文字内容等。

第三步：创建 Dreamweaver 站点

这是 Dreamweaver 开发的第一步，也是最重要的一步，它能让你更好地管理网站文件。

  1. 打开 Dreamweaver，点击菜单栏的 站点 > 新建站点。
  2. 在弹出的窗口中,你可以选择 “基本” 或 “高级” 选项卡，对于初学者，“基本” 更友好。
  3. 输入站点名称：给你的网站起一个名字，"MyMobileWebsite"。
  4. 选择本地站点文件夹：点击文件夹图标，选择一个你电脑上的空文件夹作为网站项目的根目录，Dreamweaver 会在这里创建和管理所有网站文件。
  5. 连接到远程服务器（可选）：如果你有服务器空间，可以在这里设置 FTP 信息，以便将来一键上传网站。
  6. 点击 “完成”，在 Dreamweaver 的 “文件” 面板中，你应该能看到你的站点文件夹了。

第四步：创建网站结构和基础 HTML

我们将从创建一个简单的三栏布局页面开始。

  1. 在 “文件” 面板中，右键点击站点根目录，选择 “新建文件”，将其命名为 index.html，这将是你的首页。
  2. 双击打开 index.html，Dreamweaver 默认会进入 “实时视图”，这是一个所见即所得的编辑器，但为了精确控制，我们建议切换到 “代码视图” 或 “拆分视图”（上半部分代码，下半部分预览）。
  3. 在代码视图中,输入或修改以下基础的 HTML5 结构代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的移动网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">lt;/a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="hero">
            <h2>欢迎来到我们的网站</h2>
            <p>这是一个响应式设计的示例。</p>
        </section>
        <section class="content">
            <article>
                <h3>文章标题 1</h3>
                <p>这里是文章内容...</p>
            </article>
            <article>
                <h3>文章标题 2</h3>
                <p>这里是另一篇文章内容...</p>
            </article>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 我的移动网站. 版权所有.</p>
    </footer>
</body>
</html>

代码解释：

  • <meta name="viewport" ...>：这是移动端适配的“灵魂”，它告诉浏览器如何控制页面的尺寸和缩放。width=device-width 表示使用设备的物理宽度，initial-scale=1.0 表示初始缩放比例为 100%。
  • <link rel="stylesheet" href="style.css">：引入一个外部 CSS 文件，这是我们用来写样式的地方。

第五步：编写 CSS 样式并实现响应式布局

  1. 在 “文件” 面板中，右键点击站点根目录，选择 “新建文件”，将其命名为 style.css。
  2. 双击打开 style.css，开始编写样式。

基础样式和移动端优先

我们先为移动端（小屏幕）设计布局，然后通过媒体查询逐步增强为桌面端布局，这种方法被称为“移动优先”，是现代响应式设计的最佳实践。

dreamweaver制作wap网站教程
（图片来源网络，侵删）
/* style.css */
/* 重置一些默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}
/* 头部样式 */
header {
    background: #333;
    color: #fff;
    padding: 1rem;
    text-align: center;
}
/* 导航菜单 - 默认为垂直堆叠 */
nav ul {
    list-style: none;
}
nav ul li {
    margin-bottom: 0.5rem;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 0.5rem;
}
区域 */
main {
    padding: 1rem;
}
.hero {
    background: #e0e0e0;
    padding: 2rem;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 1rem;
}
.content {
    display: flex;
    flex-direction: column; /* 默认垂直排列 */
    gap: 1rem;
}
article {
    background: #fff;
    padding: 1.5rem;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* 页脚样式 */
footer {
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    background: #333;
    color: #fff;
}

使用媒体查询适配桌面端

我们为屏幕宽度大于 768px 的设备（如平板和桌面）添加样式，将导航菜单和内容区域改为水平排列。

在 style.css 文件的末尾添加以下代码：

/* style.css (在文件末尾添加) */
/* 媒体查询：当屏幕宽度大于等于 768px 时 */
@media (min-width: 768px) {
    /* 导航菜单变为水平 */
    nav ul {
        display: flex;
        justify-content: center;
        gap: 1rem; /* 导航项之间的间距 */
    }
    nav ul li {
        margin-bottom: 0; /* 移除垂直间距 */
    }
    nav ul li a {
        padding: 0.5rem 1rem;
    }
    /* 主要内容区域变为两列布局 */
    .content {
        flex-direction: row; /* 水平排列 */
        flex-wrap: wrap; /* 允许换行 */
    }
    article {
        flex: 1 1 calc(50% - 1rem); /* 每个文章占据一半宽度，减去间距 */
        max-width: calc(50% - 1rem);
    }
    /* 如果内容超过两列，第三列会自动换行 */