手机页面制作教程，从哪开始学？-建站教程-锦华智联科技

这意味着我们先为手机屏幕设计一个基础版本，然后通过 CSS 逐步适配平板和电脑等更大的屏幕。

（图片来源网络，侵删）

下面我将为你提供一个非常详细的、从零开始的 DW 手机页面制作教程,包含图文步骤说明和代码解释。

教程总览

准备工作：安装软件,了解基本概念。
创建项目：在 DW 中新建一个响应式 HTML5 页面。
设置视口：让浏览器知道如何正确渲染移动页面。
搭建基础 HTML 结构：使用语义化标签（如 <header>, <nav>, <main>, <footer>）。
编写基础 CSS：为手机屏幕设置默认样式（移动优先）。
添加媒体查询：为不同屏幕尺寸（平板、桌面）编写不同的 CSS 规则。
测试与预览：在 DW 的实时视图中预览效果,并使用浏览器开发者工具进行调试。
进阶技巧：添加触摸效果、使用 Flexbox 布局等。

第一步：准备工作

安装软件：确保你已经安装了 Adobe Dreamweaver CC 版本（较新版本功能更完善）。
基本概念：
- HTML (超文本标记语言)：负责页面的结构和内容，比如标题、段落、图片、链接等，它是页面的“骨架”。
- CSS (层叠样式表)：负责页面的表现和样式，比如颜色、字体、间距、布局等，它是页面的“皮肤”。
- 响应式设计：网页能够根据不同设备的屏幕尺寸自动调整布局和内容,提供最佳浏览体验。

第二步：创建项目

打开 Dreamweaver，创建一个新的 HTML 文件。

打开 DW，点击菜单栏的 文件 > 新建。
在弹出的窗口中，选择 “基本页”，然后在右侧选择 HTML5。
勾选下方的 “使用 CSS 文件” 和 “使用响应式布局起始页”，这两个选项非常重要，DW 会自动帮你搭建好响应式的基础框架。
点击 “创建”。

DW 会生成一个基础的 HTML 文件，其中已经包含了响应式设计所需的一些 CSS 链接和媒体查询的框架。

第三步：设置视口

这是制作移动页面的 最关键一步！<meta name="viewport"> 标签告诉浏览器如何控制页面的尺寸和缩放。

（图片来源网络，侵删）

在 DW 的代码视图中，找到 <head> 标签内部，DW 已经为你自动生成了这段代码，如果没有,请手动添加：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的手机页面</title>
    <!-- ... 其他链接 ... -->
</head>

代码解释：

width=device-width：告诉浏览器,页面的宽度应该等于设备的屏幕宽度。
initial-scale=1.0：设置页面的初始缩放比例为 100%,即不缩放。

没有这个标签，你的页面在手机上可能会显示得很小，需要用户手动放大才能看清。

第四步：搭建基础 HTML 结构

我们使用语义化的 HTML5 标签来构建页面结构，这样更有利于 SEO（搜索引擎优化）和可访问性。

（图片来源网络，侵删）

在 <body> 标签内,替换或编写如下代码：

<body>
    <header>
        <h1>我的网站</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">联系</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="hero">
            <h2>欢迎来到我的网站</h2>
            <p>这是一个响应式设计的示例页面。</p>
            <a href="#" class="btn">了解更多</a>
        </section>
        <section id="features">
            <h2>我们的特色</h2>
            <article>
                <h3>特色一</h3>
                <p>这里是特色一的详细描述。</p>
            </article>
            <article>
                <h3>特色二</h3>
                <p>这里是特色二的详细描述。</p>
            </article>
        </section>
    </main>
    <footer>
        <p>&copy; 2025 我的网站. 保留所有权利.</p>
    </footer>
</body>

标签解释：

<header>：页眉,通常包含网站标题和主导航。
<nav>：导航链接区域。
<main>：页面的主要内容。
<section>：文档中的一个独立区域,通常带有标题。
<article>：一个独立的内容块,比如一篇博客文章或一个新闻条目。
<footer>：页脚,通常包含版权信息等。

第五步：编写基础 CSS (移动优先)

现在我们来为手机屏幕设计样式，在 DW 的 “CSS 设计器” 面板中，或者直接在 <style> 标签里编写 CSS。

重置默认样式：为了消除不同浏览器之间的默认样式差异,我们可以使用一个简单的重置样式。

/* 在 <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;
}

布局容器：创建一个最大宽度限制,并在大屏幕上居中。

.container {
    width: 90%; /* 在手机上占满屏幕的90% */
    max-width: 1200px; /* 在大屏幕上最大不超过1200px */
    margin: 0 auto; /* 左右外边距自动，实现水平居中 */
    padding: 0 15px; /* 左右内边距，增加内容与边缘的距离 */
}

为 <header> 和 <nav> 添加样式：

header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}
nav ul {
    list-style: none; /* 去掉列表前的点 */
    display: flex; /* 使用 Flexbox 布局，让菜单项水平排列 */
    justify-content: center; /* 水平居中 */
    flex-wrap: wrap; /* 允许在小屏幕上换行 */
}
nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    display: block; /* 让链接可以占据整个区域，方便点击 */
}
nav ul li a:hover {
    background: #555;
}

<main> 添加样式：

main {
    padding: 2rem 0;
}
#hero {
    text-align: center;
    padding: 2rem 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn {
    display: inline-block;
    background: #007bff;
    color: #fff;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 1rem;
}
.btn:hover {
    background: #0056b3;
}

为 <footer> 添加样式：

footer {
    text-align: center;
    padding: 1rem;
    background: #333;
    color: #fff;
    margin-top: 2rem;
}

你的页面在 DW 的实时视图中（或浏览器中）应该已经是一个看起来不错的手机页面了。

第六步：添加媒体查询

我们让页面在更大的屏幕上表现更好，媒体查询是响应式设计的核心，我们将为平板和桌面屏幕编写额外的 CSS 规则。

在 CSS 文件的末尾,添加以下代码：

/* 平板设备 - 屏幕宽度大于等于 768px */
@media (min-width: 768px) {
    /* 在平板上，我们让特色内容区域变成两列布局 */
    #features {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 创建两列，每列占一份空间 */
        gap: 2rem; /* 列与列之间的间距 */
    }
}
/* 桌面设备 - 屏幕宽度大于等于 992px */
@media (min-width: 992px) {
    /* 在桌面上，我们让导航菜单变得更精致 */
    nav ul {
        /* 可以在这里添加更复杂的导航，如下拉菜单 */
        /* 这里我们简单加个背景色变化 */
        background: #444;
        border-radius: 5px;
        padding: 0.5rem;
    }
    /* 让特色内容区域变成三列布局 */
    #features {
        grid-template-columns: repeat(3, 1fr); /* 创建三列 */
    }
}

代码解释：

@media (min-width: 768px)：这条规则只有在浏览器窗口宽度 大于或等于 768px 时才会生效，768px 是一个常见的平板屏幕尺寸。
display: grid 和 grid-template-columns：这是现代 CSS 强大的布局工具,可以轻松实现多列布局。
gap：设置网格之间的间距。

拖动 DW 实时视图的宽度滑块，或者在不同设备上刷新页面,你会看到页面布局会根据屏幕大小自动变化。

第七步：测试与预览

DW 实时视图：在 DW 的“实时”视图中，你可以直接拖动窗口的边缘来模拟不同设备尺寸,非常方便。
浏览器开发者工具：在 Chrome、Firefox 等浏览器中打开你的页面，按 F12 打开开发者工具。
- 点击左上角的 手机/平板图标,可以模拟各种设备。
- 使用 “响应式设计模式” 的滑块,可以自由调整屏幕宽度。
- 在 “元素” 面板中，你可以实时修改 HTML 和 CSS，并立即看到效果，这是调试 CSS 的利器。

第八步：进阶技巧

触摸效果：为了让移动端用户感觉更好,可以给链接和按钮添加一个轻按效果。

a, .btn {
    /* ... 其他样式 ... */
    transition: background-color 0.3s ease; /* 添加一个平滑的过渡效果 */
}
/* 当触摸或点击时 */
a:active, .btn:active {
    background-color: #004494; /* 比原来的hover颜色更深一点 */
    transform: scale(0.98); /* 轻微缩小，提供物理反馈 */
}

图片响应式：确保图片也能适应屏幕。

img {
    max-width: 100%; /* 图片宽度最大不超过其父容器 */
    height: auto; /* 高度自动调整，保持图片比例 */
}

使用 Flexbox 布局：Flexbox 是一维布局模型，非常适合对齐和分配容器内项目的空间，即使它们的大小是未知或者动态变化的，我们之前导航栏的 display: flex 就是一个很好的例子，Flexbox 在处理移动端复杂的对齐问题时非常强大。

通过以上步骤，你已经学会了使用 Dreamweaver 从零开始制作一个响应式的手机页面,核心要点是：

移动优先：先为小屏幕设计,再逐步增强。
视口设置：<meta viewport> 是移动页面的灵魂。
媒体查询：@media 是实现响应式的关键。
善用工具：充分利用 DW 的实时视图和浏览器开发者工具进行测试和调试。

多练习，尝试修改颜色、布局和内容,你很快就能熟练掌握！