Dreamweaver CC 教程：从入门到精通
Dreamweaver CC 是 Adobe 公司推出的一款集网页设计、代码编辑和网站管理于一体的专业网页开发工具，它最大的特点是 “可视化设计” 和 “代码编辑” 的完美结合，让设计师和开发者都能高效地工作。
第一部分：新手入门
这部分适合对网页制作完全不了解的新手。
什么是 Dreamweaver？它有什么用？
- 核心功能：
- 可视化设计：像使用 Word 一样，通过拖拽元素来布局网页，无需编写大量代码。
- 强大的代码编辑器：支持 HTML, CSS, JavaScript 等多种语言的代码高亮、自动补全、语法提示，适合开发者进行精细编码。
- 响应式设计：轻松创建适配不同屏幕尺寸（桌面、平板、手机）的网页。
- FTP/SFTP 集成：内置文件传输功能，可以直接连接到服务器，上传、下载、同步网站文件。
- 模板和库：创建可重用的页面模板，提高大型网站的开发和维护效率。
界面初探：认识工作区
打开 Dreamweaver 后，你会看到以下核心区域：
- 菜单栏：所有命令的集合。
- 工具栏：提供常用操作，如代码/设计视图切换、实时视图、文件管理。
- 文档窗口：你正在编辑的网页。
- 插入面板：用于插入各种元素，如布局、图像、表格、表单等。
- 属性检查器：选中某个元素（如一张图片、一段文字）后，在这里可以修改其属性（如大小、链接、对齐方式等）。
- 文件面板：网站的“资源管理器”，显示网站的所有文件和文件夹结构，是管理网站的核心。
小技巧：工作区切换 功能可以让你在不同布局（如 设计、编码、简约）之间快速切换，找到最适合自己的界面。
创建你的第一个网站
这是最关键的一步,先定义站点，再创建页面！
-
新建站点：
- 点击
站点->新建站点。 - 站点名称：给你的网站起个名字（如
我的第一个网站）。 - 本地站点文件夹：选择一个电脑上的空文件夹作为你网站的根目录（如
D:\MyWebsite）。所有网站文件都必须放在这个文件夹里！ - 完成后,
文件面板就会出现你定义的站点结构。
- 点击
-
创建第一个 HTML 页面：
- 在
文件面板中，右键点击站点根目录 ->新建文件。 - 将文件命名为
index.html。index.html是网站的默认首页。
- 在
-
保存并预览：
- 按
Ctrl + S保存文件。 - 按
F12键，Dreamweaver 会在默认浏览器中打开你的index.html页面，目前它应该是一个空白页面。
- 按
第二部分：核心功能详解
这部分介绍如何使用 Dreamweaver 的核心功能来制作网页。
三种视图模式
- 代码视图：纯代码编辑模式，适合开发者，Dreamweaver 提供了代码提示、折叠、颜色高亮等功能，非常强大。
- 设计视图：纯可视化编辑模式，所见即所得，适合设计师快速布局。注意：现代网页布局（尤其是响应式）在设计视图中可能表现不完美，建议结合代码视图使用。
- 实时视图：一个更接近真实浏览器效果的预览模式，但可以同时编辑，它比设计视图更准确，是推荐的“可视化”工作模式。
- 实时代码视图：在实时视图模式下，可以实时看到你操作的 HTML 代码，是学习和理解代码的最佳方式。
使用 CSS 进行样式设计
Dreamweaver 推荐使用 CSS 来美化网页，而不是使用过时的 创建 CSS 规则： 使用辅助功能： 现代网页布局主要使用 Flexbox 和 CSS Grid，但 Dreamweaver 也提供了传统工具。 能帮助你从“会用”提升到“用好”。 这是现代网站的必备技能。 如果你要制作一个有 20 个页面的网站，每个页面的页头和页脚都一样，模板就能帮你节省大量时间。 官方资源： 视频教程平台： 书籍： 可以在当当、京东等平台搜索“Dreamweaver CC 入门”或“网页设计与制作”，选择评价好的书籍进行系统学习。 练习项目： 祝你学习愉快,早日成为网页设计高手！<font>
CSS 设计器 面板中，点击 号创建新的 CSS 文件。附加现有的 CSS 文件）。CSS 设计器 中，你可以通过可视化方式选择元素、设置选择器，然后修改属性（如颜色、字体、边距等），Dreamweaver 会自动生成 CSS 代码。
布局：表格 vs. 框架
插入 -> 表格，设置行数、列数等。
插入 -> Bootstrap 布局 中选择一个响应式网格布局，然后拖拽内容到相应位置。插入常见网页元素
插入 -> 图像，建议先将图片放入站点文件夹的 images 子文件夹中，这样能保证上传后图片路径正确。链接 框中输入 URL 地址，或点击文件夹图标选择本地文件。Flash（已过时）、HTML5 音频/视频 等元素。插入 -> 表单，表单是用户与网站交互的核心，包括文本框、密码框、单选按钮、复选框、提交按钮等，Dreamweaver 可以可视化地创建和编辑表单元素。
第三部分：进阶与最佳实践
响应式网页设计
CSS 设计器 中，创建一个新的媒体查询规则，例如针对 最小宽度 768px (平板)。多屏幕预览 功能可以让你同时看到桌面、平板、手机三种视图下的效果，非常方便。使用模板
文件 -> 另存为模板。插入 -> 模板对象 -> 可编辑区域。文件 -> 新建 -> 从模板新建，选择你的模板，生成的页面只能在“可编辑区域”内修改。发布你的网站
站点 -> 管理站点 -> 选择你的站点 -> 编辑 -> 服务器。
文件 面板会显示“本地文件”和“远程服务器”两个列表。同步 功能，可以确保本地和服务器上的文件完全一致。
第四部分：学习资源推荐
总结与建议
F12 (预览)、Ctrl+S (保存) 等快捷键能极大提升效率。
