学习路径总览

我们将学习过程分为四个循序渐进的阶段,从入门到能够独立完成一个静态网页。

1. 第一阶段：入门与准备 (了解软件与网页基础)
2. 第二阶段：核心功能掌握 (页面构建与美化)
3. 第三阶段：项目实战 (从头到尾做一个网站)
4. 第四阶段：进阶与扩展 (响应式设计与维护)

第一阶段：入门与准备

这个阶段的目标是了解 Dreamweaver 是什么，以及网页制作最基本的概念。 **

• 什么是 Dreamweaver？ 了解它的定位（可视化网页编辑器）和主要功能。
• 网页三剑客简介： Dreamweaver, Fireworks (已淘汰), Flash (已淘汰)，重点理解 Dreamweaver 的核心作用。
• 网页的基本构成：
  • HTML (超文本标记语言): 网页的“骨架”,负责内容结构。
  • CSS (层叠样式表): 网页的“衣服”,负责样式和布局。
  • JavaScript (JS): 网页的“行为”，负责交互和动态效果 (初期了解即可)。
• Dreamweaver 的安装与界面初识：
  • 如何下载和安装 Dreamweaver (通常订阅 Adobe Creative Cloud)。
  • 熟悉工作区：菜单栏、工具栏、文件面板、属性检查器等。

推荐视频教程：

• Bilibili (B站) 搜索关键词：
  • Dreamweaver 入门教程
  • Dreamweaver CC 2025/2025/2025 新手教程
  • UP主推荐： “影视后期家”、“我要自学网” 等平台的视频通常比较系统,适合新手。
• YouTube 搜索关键词 (可开启中文字幕)：
  • Adobe Dreamweaver for Beginners
  • Dreamweaver Tutorial for Absolute Beginners
• 官方资源：
  • Adobe 官方教程： Adobe Dreamweaver Learn & Support 官方提供最权威、最新的入门指南。

第二阶段：核心功能掌握

这是学习的核心阶段，你需要掌握 Dreamweaver 的主要工具和功能，并理解 HTML 和 CSS 的基本语法。 **

1. 创建和管理站点：
   • 最重要的一步！ 学习如何创建一个“站点”，这能让你管理所有网页、图片、样式文件,避免路径错误。
2. 使用“实时视图”和“代码视图”：
   • 实时视图： 所见即所得的编辑界面,适合拖拽和对齐。
   • 代码视图： 查看和直接编辑 HTML/CSS 代码。
   • 拆分视图： 同时看到代码和效果,是学习和调试的最佳模式。
3. 文本与段落：
   • 输入文本，设置标题、段落、列表等。
   • 学习使用属性检查器修改字体、大小、颜色。
4. 插入与处理图像：
   • 如何插入图片 (<img> 标签)。
   • 设置图片大小、对齐方式、替换文本。
   • 理解“相对路径”和“绝对路径”。
5. 创建超链接：
   • 链接到其他页面 (<a> 标签)。
   • 链接到网站外部。
   • 创建页面内锚点链接。
   • 链接到邮箱和电话。
6. 使用 CSS 进行样式美化：
   • CSS 选择器： 类选择器、ID 选择器、标签选择器。
   • 使用“CSS 设计器”面板： 可视化地创建和应用 CSS 样式，这是 Dreamweaver 的强大之处。
   • 常用 CSS 属性：
     • 文本属性：color, font-size, text-align。
     • 背景属性：background-color, background-image。
     • 盒模型：margin (外边距), padding (内边距), border (边框)。
7. 表格与布局：
   • 使用表格 (<table>) 来展示数据（虽然现在不用于布局，但仍是重要标签）。
   • 使用“Div”标签和“Flexbox”布局： 现代网页布局的核心，学习如何用 Div 容器和 Flexbox 创建灵活的页面结构。
8. 插入多媒体：
   • 插入视频 (<video>) 和音频 (<audio>)。

推荐视频教程：

• 继续在 B 站或 YouTube 上搜索更详细的教程，关键词可以更具体，
  • Dreamweaver CSS 样式
  • Dreamweaver 超链接制作
  • Dreamweaver 布局教程
  • Dreamweaver Flexbox 布局
• 教程要点： 寻找那些会同时展示“可视化操作”和“代码生成”的视频，这样你既能快速上手,又能理解背后的原理。

第三阶段：项目实战

理论学习后,必须通过一个完整的项目来巩固所学知识。

实战项目建议：

• 个人作品集/简历网站
• 公司宣传单页网站
• 一个简单的博客主页

实战步骤：

1. 规划网站： 在纸上或用软件画出网站的草图（线框图），确定有哪些页面（首页、关于我、联系方式等）和每个页面的布局。
2. 创建站点： 在 Dreamweaver 中新建站点。
3. 制作模板 (可选但推荐)： 如果多个页面有共同的头部和底部，可以创建一个模板文件,这样修改一处就能更新所有页面。
4. 逐个页面制作：
   • 从首页开始，使用 Div 和 Flexbox 搭建整体布局。
   • （文本、图片、链接）。
   • 使用 CSS 设计器面板美化页面，调整颜色、字体、间距等。
5. 测试与调试：
   • 在不同浏览器（Chrome, Firefox, Edge）中预览网站,检查显示是否正常。
   • 使用 Dreamweaver 的“实时视图”检查链接是否有效。

推荐视频教程：

• 搜索关键词：
  • Dreamweaver 网站制作实例
  • Dreamweaver 从零开始做网站
  • Dreamweaver 项目实战教程
• 这种类型的教程通常会带你完整地走一遍流程,是最好的实践方式。

第四阶段：进阶与扩展

当你能熟练制作静态网页后，可以学习以下内容，让你的网站更专业。 **

1. 响应式网页设计：
   • 核心概念： 让网站在不同设备（桌面、平板、手机）上都有良好的显示效果。
   • 技术： 学习使用 CSS Media Queries (媒体查询)，Dreamweaver 的“CSS 设计器”对媒体查询有很好的支持。
2. 表单：
   • 创建用户输入表单，如登录框、注册表单、联系表单。
   • 包含文本框、密码框、单选框、复选框、提交按钮等元素。
3. FTP 上传与管理：
   • 学习如何将你本地制作好的网站通过 FTP (文件传输协议) 上传到网络服务器,让其他人能访问。
   • Dreamweaver 的“文件”面板集成了 FTP 功能,可以直接连接和管理远程服务器上的文件。
4. 使用 Git 进行版本控制 (可选)：

   对于更专业的开发者，了解 Git 和 GitHub 是非常有用的，Dreamweaver 也集成了 Git 功能。

推荐视频教程：

• 搜索关键词：
  • Dreamweaver 响应式设计教程
  • Dreamweaver 媒体查询
  • Dreamweaver 表单制作
  • Dreamweaver FTP 上传网站

学习建议与注意事项

1. 理论与实践结合： 看完视频后，一定要自己动手操作一遍,复制粘贴代码是学不会的。
2. 不要害怕代码： Dreamweaver 的可视化工具很棒，但不要只依赖它，多看看“拆分视图”，理解代码是如何生成的，这是从“使用者”到“开发者”的关键一步。
3. 从 CC 2025 或更新版本开始： Dreamweaver 的功能在不断优化，新版本的界面和功能（如对 CSS Grid、Flexbox 的支持）更现代、更友好。
4. 学习资源不止视频： 除了视频，还可以配合阅读 W3Schools、MDN Web Docs 等网站，它们是学习 HTML 和 CSS 语法的权威参考。
5. 耐心与坚持： 网页开发是一个需要不断练习和积累的过程，遇到问题很正常，学会使用搜索引擎（百度、Google）搜索错误信息,这是程序员必备的技能。

祝您学习愉快，早日用 Dreamweaver 制作出属于自己的精彩网站！