本教程将从零开始,分为 基础入门、核心功能 和 实战项目 三个部分，帮助您快速上手 Dreamweaver CS5。
第一部分：基础入门 - 认识 Dreamweaver CS5
什么是 Dreamweaver？
Dreamweaver 是一款由 Adobe 公司开发的“所见即所得”（WYSIWYG）网页编辑器，它最大的特点是：
- 可视化编辑：你可以像在 Word 里一样，直接拖拽元素来构建页面布局，无需编写所有代码。
- 强大的代码支持：它内置了 HTML、CSS、JavaScript 等代码的智能提示、高亮和格式化功能，适合从新手到专业开发者。
- 站点管理：可以轻松管理整个网站的文件、链接和资源，是大型项目的得力助手。
安装与启动
- 从 Adobe 官方网站或可靠的软件渠道获取 Dreamweaver CS5 的安装程序。
- 按照安装向导完成安装。
- 启动 Dreamweaver CS5。
界面初探
启动后,你会看到一个熟悉的 Adobe 软件界面，让我们来认识一下最重要的几个面板：
- 菜单栏：包含所有命令，如“文件”、“编辑”、“查看”、“插入”、“修改”等。
- 工具栏：提供常用操作，如代码/设计/实时视图切换、浏览器预览等。
- 文档窗口：这是你制作和编辑网页的主区域。
- 插入栏：将常用元素（如图片、表格、链接、媒体）插入到页面中。
- 属性检查器：这是最核心的面板！当选中文档窗口中的某个元素（如一段文字、一张图片）时，这里会显示该元素的所有可编辑属性（如文字大小、图片源文件、链接地址等）。
- 面板组：位于右侧，包括：
- 文件：管理你的网站文件和文件夹，极其重要！
- CSS 样式：创建和管理 CSS 样式表，控制页面的外观。
- 应用程序：用于动态网站开发（如 PHP），初学者可以先忽略。
- 标签选择器：显示当前光标所在位置的 HTML 标签层级。
第二部分：核心功能 - 制作你的第一个网页
步骤 1：创建一个本地站点
在开始制作网页前,必须先定义站点，这就像给你的网站建立一个“工作室”，Dreamweaver 会因此知道所有文件的关联关系。
- 点击菜单栏的 “站点” -> “新建站点”。
- 在弹出的对话框中,选择 “高级” 选项卡（对于 CS5，高级模式更常用）。
- 站点名称：给你的站点起一个名字，如“我的第一个网站”。
- 本地根文件夹：点击文件夹图标，选择一个电脑上的空文件夹作为你的网站存放地（
D:\MyWebsite）。这个文件夹里将存放你所有的网页、图片等文件。 - 默认图像文件夹：可以指定一个专门存放图片的子文件夹（如
images），也可以先不设置。 - 点击 “确定”。
在右侧的 “文件” 面板中，你应该能看到你刚刚创建的站点文件夹了。
步骤 2：创建并保存 HTML 页面
- 点击菜单栏的 “文件” -> “新建”。
- 在弹出的窗口中,选择 “空白页”，然后在右侧的 “页面类型” 中选择 “HTML”，布局选择 “<无>”。
- 点击 “创建”。
- 一个空白页面会出现在文档窗口,立即点击 “文件” -> “保存”。
- 在弹出的对话框中,将文件保存到你刚刚定义的站点根文件夹（
D:\MyWebsite）中，并命名为index.html。- 重要提示：网站的首页文件名通常命名为
index.html或index.htm。
- 重要提示：网站的首页文件名通常命名为
步骤 3：在“设计视图”中编辑
Dreamweaver CS5 默认显示“设计视图”，你可以直接在这里看到页面的最终效果。
- ：在顶部的“标题”输入框中，输入“我的第一个网页”。
- 输入文本：在文档窗口中直接输入文字，欢迎来到我的网站！”。
- 格式化文本：选中文字，在 “属性检查器” 中设置其为“标题 1”（H1），然后修改字体、大小、颜色等。
- 插入图片：
- 先在站点根文件夹下创建一个名为
images的文件夹，并将一张图片（如logo.png）放进去。 - 将光标放在你想插入图片的位置。
- 在 “插入” 菜单中选择 “图像”，或使用“插入”栏的“常用”选项卡。
- 在弹出的对话框中,选择你刚才的
images文件夹下的logo.png。 - 插入后,在 “属性检查器” 中，你可以修改图片的宽高、替换文本（鼠标悬停时显示的提示文字）等。
- 先在站点根文件夹下创建一个名为
- 创建超链接：
- 选中一段文字或一张图片。
- 在 “属性检查器” 的“链接”输入框中，输入一个网址，如
https://www.google.com。 - 你也可以点击文件夹图标,选择站点内的其他页面文件。
步骤 4：在“代码视图”和“拆分视图”中查看
- 代码视图：点击文档窗口左上角的 “代码” 按钮，你会看到纯 HTML 代码，你在设计视图中做的所有操作，Dreamweaver 都会在这里自动生成对应的代码，这是学习 HTML 的好方法。
- 拆分视图：点击 “拆分” 按钮，左侧是代码，右侧是设计效果，当你选中设计视图中的某个元素时，左侧对应的代码会高亮显示；反之亦然。这是最常用的视图！
步骤 5：使用 CSS 美化页面
CSS（层叠样式表）是控制网页外观的语言。
- 创建外部 CSS 文件：
- 在右侧的 “文件” 面板中，右键点击你的站点，选择 “新建” -> “CSS 文件”。
- 命名为
style.css，并保存。
- 链接 CSS 文件：
- 切换到
index.html页面。 - 在菜单栏点击 “修改” -> “页面属性”。
- 在弹出的对话框中,选择 “外观 (CSS)” 分类。
- 在“CSS 样式表”区域，点击 “附加样式表...”。
- 选择你刚刚创建的
style.css文件，确定。
- 切换到
- 编辑 CSS 样式：
- 打开右侧的 “CSS 样式” 面板。
- 你会看到
style.css文件已经被链接进来。 - 点击面板下方的 “新建 CSS 规则” 按钮。
- 选择器类型：选择“类”。
- 选择器名称：输入
.red-text（注意前面的点）。 - 定义在：选择
style.css。 - 点击“确定”。
- 在弹出的样式定义窗口中,你可以设置颜色、字体等，在“分类”中选择“类型”，然后设置颜色为红色。
- 回到
index.html的设计视图，选中一段文字，在 “属性检查器” 的“类”下拉菜单中选择red-text，这段文字就会变成红色。
第三部分：实战项目 - 制作一个简单的个人介绍页面
结合以上知识,我们来动手完成一个简单的项目。
项目目标：创建一个包含头部、个人简介、作品展示和页脚的个人介绍页面。
文件结构：
MyWebsite/
├── index.html
├── style.css
└── images/
├── profile.jpg
└── work1.jpg操作步骤：
-
准备素材：将你的个人照片命名为
profile.jpg，一张作品照片命名为work1.jpg，放入images文件夹。 -
编写 HTML 结构 (
index.html)：-
在“拆分视图”下，手动或通过“插入”栏编写以下代码，这有助于你理解 HTML 的结构。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的个人介绍</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>张三的个人空间</h1> </header> <section id="about"> <h2>关于我</h2> <img src="images/profile.jpg" alt="我的照片"> <p>你好！我是一名热爱前端开发的程序员，我喜欢用代码创造美好的用户体验。</p> </section> <section id="portfolio"> <h2>我的作品</h2> <img src="images/work1.jpg" alt="作品1"> </section> <footer> <p>© 2025 张三. All rights reserved.</p> </footer> </body> </html>
-
-
编写 CSS 样式 (
style.css)：- 打开
style.css文件，输入以下代码来美化你的页面。/* 全局样式 */ body { font-family: "Microsoft YaHei", Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; }
/ 头部样式 / header { background-color: #333; color: #fff; text-align: center; padding: 20px; }
/ 内容区域通用样式 / section { background-color: #fff; padding: 20px; margin: 20px auto; max-width: 800px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
/ 图片样式 / img { max-width: 100%; / 图片自适应宽度 / height: auto; display: block; / 去除图片下方的空白间隙 / margin: 10px auto; }
/ 页脚样式 / footer { text-align: center; padding: 20px; background-color: #333; color: #fff; margin-top: 20px; }
- 打开
-
预览与测试：
- 按
F12键，可以直接在默认浏览器中预览你的网页。 - 保存所有文件,然后刷新浏览器，查看最终效果。
- 按
学习资源与进阶
- 官方帮助文档：Dreamweaver 自带非常详尽的帮助系统（按
F1键），是权威的学习资料。 - 在线视频教程：在 YouTube、Bilibili 等平台搜索“Dreamweaver CS5 教程”，有大量视频资源可供学习。
- 书籍：寻找一些经典的网页设计书籍，它们通常会结合 Dreamweaver 进行讲解。
- 进阶方向：
- 响应式设计：学习使用 CSS Media Queries，让你的网页在不同设备上都能良好显示。
- 动态网站：学习使用 Dreamweaver 的“应用程序”功能，结合 PHP 和 MySQL 制作可以交互的网站（如留言板、博客）。
- 深入代码：逐渐减少对设计视图的依赖，更多地通过编写代码来实现复杂效果。
希望这份教程能帮助你顺利入门 Dreamweaver CS5！祝你学习愉快！
