教程概述
- 目标读者：Dreamweaver 初学者，希望快速上手制作网页。
- 最终成果：创建一个包含导航栏、横幅、内容区和页脚的简单响应式网页。
- 核心工具：Dreamweaver 的 实时视图、设计视图 和 CSS 设计器。
第一步：准备工作与软件界面
安装与启动
确保你已经安装了 Adobe Dreamweaver（CC 2025 或更新版本体验更佳），启动软件。
（图片来源网络，侵删）
认识工作区
启动后,Dreamweaver 会让你选择工作区，对于初学者，选择 "设计器" 布局即可，这个布局包含了我们最常用的面板。
你会看到以下几个关键区域：
- 顶部菜单栏：包含所有命令（文件、编辑、插入、修改等）。
- 工具栏：包含“实时视图”、“设计视图”、“代码视图”等切换按钮。
- 文档窗口：这是你设计和预览网页的主区域。
- 左侧面板组：常用的是 “插入” 面板，可以快速添加各种元素（图片、表格、链接等）。
- 右侧面板组：这是我们的核心工具。
- 文件：管理你的网站文件。
- CSS 设计器：创建和管理网页样式（颜色、字体、布局等）。
- 属性检查器：在选中某个元素（如图片、文字）时，在这里修改其属性。
第二步：创建和管理站点
在 Dreamweaver 中，强烈建议你先定义一个站点，这能让你更好地管理所有网页文件、图片和资源，避免链接错误。
- 点击顶部菜单栏的 站点 -> 新建站点。
- 在弹出的窗口中,为你的站点起一个名字，我的第一个网站”。
- 在 “本地站点文件夹” 中，点击文件夹图标，选择一个空文件夹作为你网站的根目录（在桌面创建一个名为
my-first-website的文件夹）。 - 点击 “保存”。
你的站点就创建好了,在右侧的 “文件” 面板中，你应该能看到你刚刚创建的本地站点文件夹。
（图片来源网络，侵删）
第三步：创建并保存第一个网页
- 点击顶部菜单栏的 文件 -> 新建。
- 在弹出的窗口中,选择 “空白页”，然后在“页面类型”中选择 “HTML”，在“布局”中选择 “<无>”。
- 点击 “创建”，一个新的空白 HTML 文档就打开了。
- 立即保存这个文件！点击 文件 -> 另存为，将其保存在你刚刚定义的站点根目录（
my-first-website）下，并命名为index.html。index.html是网站首页的标准文件名。
第四步：开始构建网页结构
我们将使用一个常见的网页布局结构：容器 > 头部 > 导航 > 主要内容 > 页脚。
设置页面标题
在文档窗口的顶部,有一个“标题”输入框，输入“我的个人主页”，这会显示在浏览器标签页上。
插入容器
容器是一个 div 元素，用于包裹整个网页内容，方便我们进行居中布局。
- 在 “插入” 面板中，确保你处于“常用”类别。
- 点击 “Div” 按钮。
- 在弹出的窗口中,将 ID 设置为
container，然后点击“确定”。 - 你的设计视图中应该出现一个带有黄色边框的方框。
插入头部
- 将光标放在
container内部，然后再次点击 “Div” 按钮。 - 将 ID 设置为
header，点击“确定”。header区域通常放置网站的 Logo 或大标题。
插入导航栏
- 将光标放在
header区域内，点击 “列表” 按钮（在“插入”面板中）。 - 选择 “无序列表”，Dreamweaver 会生成
<ul>和<li>- 在列表项中输入文字：“首页”、“关于我”、“联系方式”。
- 选中整个列表,在 “属性检查器” 中，将 “ID” 设置为
nav。
插入主要内容区
- 将光标移回
container内部，在header下面，再插入一个 Div。 - 将其 ID 设置为
main-content，这里将放置我们的主要内容。
插入页脚
- 在
main-content下面，再插入一个 Div。 - 将其 ID 设置为
footer，这里放置版权信息等。
你的 HTML 结构大概是这样（你可以切换到 “代码视图” 查看）：
（图片来源网络，侵删）
<body>
<div id="container">
<div id="header">
<ul id="nav">
<li><a href="#">首页</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</div>
<div id="main-content">
<!-- 主要内容放这里 -->
</div>
<div id="footer">
<!-- 页脚内容放这里 -->
</div>
</div>
</body>
第五步：使用 CSS 设计器美化网页
这是最关键的一步,我们将使用 CSS 设计器 面板来为我们的 ID 添加样式。
- 确保右侧的 “CSS 设计器” 面板是打开的。
- 在设计视图中,点击一下
container元素。“CSS 设计器”顶部的 “选择器” 部分会自动显示#container。
样式化容器
- 在 “选择器” 部分，点击
#container。 - 在下方的 “属性” 区域，进行如下设置：
- 布局：
宽度：设置为1200px。位置：选择居中。
- 背景：
背景颜色：点击颜色块，选择一个浅灰色（如#f4f4f4）。
- 边框：
宽度：设置为1px。颜色：选择一个深灰色（如cccccc）。样式：选择solid。
- 布局：
样式化头部
- 在设计视图中,点击
header元素。“选择器”会变为#header。 - 在 “属性” 区域：
- 布局：
内边距：输入20px，这会让内容和边框之间有一些空间。
- 背景：
背景颜色：选择一个深蓝色（如#2c3e50）。
- 布局：
样式化导航栏
-
点击
nav元素。 -
在 “属性” 区域：
- 布局：
内边距：10px 0(上下10px，左右0px)。
- 文本：
文本对齐：选择居中。
- 定位：
显示：选择flex。布局：主轴对齐选择居中。
- 布局：
-
现在我们需要修改列表项的样式,点击导航栏中的第一个
<li>。 -
在 “属性” 区域：
- 布局：
外边距：0 15px(左右15px，给列表项之间增加间距)。
- 列表：
列表类型：选择无。
- 布局：
样式化主要内容区
- 点击
main-content元素。 - 在 “属性” 区域：
- 布局：
内边距：20px。
- 背景：
背景颜色：选择白色。
- 布局：
样式化页脚
- 点击
footer元素。 - 在 “属性” 区域：
- 布局：
内边距：20px。
- 文本：
文本对齐：选择居中。
- 背景：
背景颜色：选择和header一样的深蓝色（#2c3e50）。
- 文本：
颜色：选择白色。
- 布局：
第六步：添加内容
现在我们的框架和样式都有了,可以添加一些实际内容。
- 点击
main-content区域。 - 输入一些标题和段落文字,你可以使用 “插入” 面板中的 1”、“标题 2” 等来格式化文字。
- 点击 “图像” 按钮，从你的电脑选择一张图片插入，插入后，在 “属性检查器” 中可以调整图片大小。
第七步：预览和测试
- 保存所有文件（
Ctrl + S）。 - 点击 Dreamweaver 工具栏上的 “实时视图” 按钮，你会看到一个渲染后的网页效果。
- 你也可以点击 “在浏览器中预览” 按钮（地球图标），选择你的浏览器（如 Chrome 或 Firefox）来打开网页，这是最真实的预览效果。
检查一下链接、图片和布局是否都符合你的预期。
第八步：发布你的网站
当你的网站完成后,你需要将它上传到网络服务器上，别人才能访问。
-
获取主机信息：你需要从你的网站托管服务商（如阿里云、腾讯云、GoDaddy等）获取 FTP 信息，包括：
- 主机名
- 用户名
- 密码
- 端口（通常是 21）
-
设置远程服务器：
- 在右侧的 “文件” 面板中，点击右上角的齿轮图标，选择 “站点设置...”。
- 在弹出的窗口中,选择 “远程服务器”。
- 点击 号，选择 “FTP”。
- 填写你从主机服务商那里获取的所有信息。
- 点击 “测试” 连接，如果成功，点击 “保存”。
-
上传文件：
- 连接成功后,在“文件”面板中，你会看到“本地文件”和“远程服务器”两个视图。
- 选中左侧“本地文件”中的所有文件和文件夹。
- 点击 “上传文件” 按钮（一个向上的箭头）。
- 等待上传完成,你的网站就成功上线了！
总结与进阶
恭喜你！你已经使用 Dreamweaver 完成了一个基础的网页制作流程。
进阶建议：
- 学习响应式设计：在 CSS 设计器中，尝试使用 “媒体查询” 功能，让你的网页在不同尺寸的屏幕（手机、平板、桌面）上都能良好显示。
- 尝试代码视图：Dreamweaver 的强大之处在于它同时支持可视化编辑和代码编辑，当你熟悉了基本操作后，可以尝试切换到 “代码视图” 或 “拆分视图”，直接修改 HTML 和 CSS，这会让你对网页的理解更深。
- 使用模板：你可以将制作好的
index.html另存为模板，然后基于它快速创建其他页面（如about.html,contact.html），这样可以保持整个网站风格的一致性。
Dreamweaver 是一个功能强大的工具，这个教程只是带你入门了最核心的功能，多加练习，你很快就能用它创建出更复杂、更精美的网站！
