Dreamweaver 全方位教程：从入门到精通
Dreamweaver (简称 DW) 是由 Adobe 公司开发的一款集网页设计、代码编辑和网站管理于一体的专业级 Web 开发工具，它最大的特点是提供了 “实时视图” (Live View) 和 “代码视图” (Code View)，让设计师和开发者可以无缝地在可视化界面和代码之间切换,极大地提高了开发效率。
（图片来源网络，侵删）
本教程将分为以下几个部分：
- 第一部分：新手入门 - 认识 Dreamweaver 和搭建第一个网站
- 第二部分：核心功能详解 - 深入理解 Dreamweaver 的各项功能
- 第三部分：实战项目 - 从零开始制作一个完整的响应式网站
- 第四部分：进阶技巧与资源 - 提升效率的技巧和推荐资源
第一部分：新手入门
什么是 Dreamweaver？为什么选择它？
- 可视化设计：像使用 Word 一样，通过拖拽组件来布局网页，无需手动编写所有 HTML/CSS 代码。
- 强大的代码编辑器：提供智能代码提示、语法高亮、代码折叠、实时预览等功能,让编码更高效。
- FTP 集成：内置 FTP 客户端，可以轻松地上传、下载和管理网站文件。
- 响应式设计支持：通过“实时视图”和“媒体查询”，可以方便地预览和编辑网站在不同设备（手机、平板、桌面）上的显示效果。
- CMS 支持：对 WordPress、Joomla 等内容管理系统有很好的支持。
安装与界面初探
- 安装：从 Adobe 官网下载并安装 Adobe Creative Cloud，然后在应用列表中安装 Dreamweaver。
- 启动界面：
- 开始：快速新建文件或打开最近的项目。
- 新建：选择文件类型（如 HTML、CSS、PHP 等）或从模板创建。
- 主要功能：访问学习资源、社区和帮助文档。
- 工作区界面：启动新项目后，你会看到以下主要区域：
- 菜单栏：包含所有命令和设置。
- 工具栏：常用操作，如实时视图、代码提示、浏览器预览等。
- 文档窗口：你的网页编辑区，可以在 代码视图、实时视图 和 拆分视图 之间切换。
- 文件面板：网站的“资源管理器”,显示所有文件和文件夹。
- 插入面板：可以插入各种元素，如图片、表格、链接、媒体等。
- 属性检查器：选中某个元素（如图片、文本）后，在这里修改其属性（如宽高、链接、源文件等）。
- CSS 设计器：创建和管理 CSS 样式,非常直观。
创建你的第一个网站
这是最重要的一步,可以让你养成良好的项目管理习惯。
-
定义站点：
- 点击菜单栏
站点->新建站点。 - 在弹出的窗口中，输入你的 站点名称（我的第一个网站）。
- 选择 本地站点文件夹，这个文件夹将用来存放你网站的所有文件（如
C:\MyWebsite）。 - 点击 保存，Dreamweaver 会自动创建一个
index.html文件。
- 点击菜单栏
-
创建第一个网页：
（图片来源网络，侵删）- 在 文件面板 中，右键点击站点根目录，选择
新建文件。 - 将文件命名为
index.html,这是网站的首页。
- 在 文件面板 中，右键点击站点根目录，选择
-
设置页面标题：
- 在 文档窗口 的顶部，有一个“标题”输入框，输入“欢迎来到我的网站”。
-
保存并预览：
- 按
Ctrl + S保存文件。 - 点击工具栏上的 实时视图 按钮，你可以在 Dreamweaver 内部预览网页。
- 点击 在浏览器中预览 按钮，选择你的浏览器（如 Chrome、Firefox）查看最终效果。
- 按
第二部分：核心功能详解
HTML 与 CSS 的基础
在 Dreamweaver 中,你可以同时使用可视化和代码两种方式来构建网页。
- HTML (超文本标记语言)：是网页的骨架，定义了内容的结构，如标题 (
<h1>)、段落 (<p>)、图片 (<img>)、链接 (<a>) 等。 - CSS (层叠样式表)：是网页的“化妆师”，负责网页的视觉表现，如颜色、字体、布局、间距等。
使用 CSS 设计器
这是 Dreamweaver 的核心功能之一，让你可以轻松地编写和管理 CSS。
（图片来源网络，侵删）
-
创建 CSS 规则：
- 在 CSS 设计器 面板中，点击 号选择
创建新的 CSS 规则。 - 选择 选择器类型：
- 类：给任意元素添加样式（最常用，如
.my-button）。 - ID：给页面中唯一的元素添加样式（如
#header）。 - 给 HTML 标签添加样式（如
h1,p）。
- 类：给任意元素添加样式（最常用，如
- 选择 定义位置：选择
新建 CSS 文件,这样所有样式都会被集中管理。 - 点击 确定，输入文件名（如
style.css），然后会自动在<head>部分创建一个链接。
- 在 CSS 设计器 面板中，点击 号选择
-
编辑 CSS 属性：
- 创建规则后，在 CSS 设计器 的 属性 区域,你可以通过点击和输入来修改样式。
- 布局：可以设置
Box模型（宽度、高度、内外边距）、Position（定位）、Flexbox（弹性布局）等。 - 视觉：可以设置
Text（文本）、Background（背景）、Color（颜色）等。 - 所有修改都会实时应用到你的网页上,非常直观。
布局方式
- 传统表格布局：不推荐用于现代网页,仅适用于展示纯表格数据。
- AP Div (绝对定位)：通过拖拽创建层，简单直接，但难以控制响应式布局,不推荐。
- CSS 布局 (推荐)：
- Flexbox (弹性盒子)：非常适合一维布局（如导航栏、列表）,让元素能够灵活地伸缩对齐。
- Grid (网格)：非常适合二维布局（如整个页面结构）,可以精确地定义行和列。
- 在 Dreamweaver 中，你可以通过 插入 -> 布局对象 来插入这些布局容器。
响应式设计
让你的网站能够适应不同尺寸的屏幕。
-
使用媒体查询：
- 在 CSS 设计器 中，创建一个新的 CSS 规则。
- 在 媒体查询 部分，点击 号，选择 断点，断点是一个屏幕宽度值，当浏览器宽度小于或大于这个值时,应用不同的样式。
- 你可以设置一个断点
768px（平板尺寸），然后为小于这个宽度的屏幕定义不同的字体大小、布局等。
-
实时视图多屏预览：
- 在 实时视图 模式下，工具栏上会出现一个手机、平板、桌面的图标。
- 点击这些图标，可以快速预览你的网站在不同设备上的效果,并直接进行编辑。
- 文本：直接在实时视图中输入，或使用 插入 -> HTML ->
文本。 - 图片：点击 插入 ->
图像，选择本地图片，Dreamweaver 会自动为你优化图片，在 属性检查器 中可以调整图片大小、添加链接和替代文本（alt属性，对 SEO 和无障碍访问很重要）。 - 链接：选中文字或图片，在 属性检查器 的 链接 框中输入网址或选择一个本地文件。
- 其他媒体：可以插入 Flash (已过时)、视频、音频等。
第三部分：实战项目：制作一个个人作品集网站
让我们来实践一下,创建一个简单的单页作品集网站。
-
定义站点：按照第一部分的方法，创建一个名为
Portfolio的站点。 -
创建文件结构：
- 在
index.html中,我们将所有内容都放在这个文件里。 - 创建一个
images文件夹,用于存放图片。 - 创建一个
css文件夹，并新建一个style.css文件。
- 在
-
构建 HTML 结构 (
index.html)：-
在 拆分视图 下,编写如下基本结构：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的作品集</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header id="header"> <h1>张三的设计作品集</h1> <nav> <ul> <li><a href="#about">关于我</a></li> <li><a href="#portfolio">作品</a></li> <li><a href="#contact">联系我</a></li> </ul> </nav> </header> <section id="about"> <h2>关于我</h2> <p>你好！我是一名热爱设计的网页设计师...</p> </section> <section id="portfolio"> <h2>我的作品</h2> <div class="portfolio-item"> <img src="images/project1.jpg" alt="项目一截图"> <h3>项目一：企业官网</h3> </div> <!-- 可以添加更多作品 --> </section> <footer id="contact"> <h2>联系我</h2> <p>邮箱：your.email@example.com</p> </footer>
-