Dreamweaver 学习全攻略

Dreamweaver (简称 DW) 是 Adobe 公司推出的一款集网页设计、代码编辑和网站管理于一体的专业网页制作软件，它最大的特点是 “可视化” 和 “代码” 编辑模式的完美结合，让设计师和开发者都能高效地工作。

dreamweaver学习教程
（图片来源网络，侵删）

第一部分：入门基础 - 认识 Dreamweaver

为什么学习 Dreamweaver？

  • 可视化设计： 对于不熟悉代码的设计师，可以通过拖拽组件、直观的界面快速搭建页面布局。
  • 强大的代码编辑器： 提供代码提示、语法高亮、实时预览等功能，大大提高编码效率。
  • 工作流无缝集成： 与 Adobe 其他软件（如 Photoshop, XD, Illustrator）配合得天衣无缝，可以轻松导入和编辑设计稿。
  • 响应式设计支持： 强大的“实时视图”和“多屏幕预览”功能，让你能轻松创建适配手机、平板、电脑等不同设备的响应式网站。
  • 站点管理： 内置的站点管理功能，可以方便地管理网站文件、上传服务器、同步数据。

软件获取与安装

  • 获取方式： Dreamweaver 是付费软件，需要 Adobe Creative Cloud 订阅才能使用，你可以访问 Adobe 官网 了解订阅详情。
  • 安装： 按照官网指引下载并安装即可，安装时建议选择“经典”工作区，这是最符合传统用户习惯的布局。

界面初识

启动 Dreamweaver 后，你会看到以下核心区域：

  • 菜单栏： 所有命令的集合。
  • 工具栏： 包含“文件”、“编辑”、“查看”、“插入”、“修改”、“站点”、“窗口”、“帮助”等常用操作。
  • 文档窗口： 这是你的主工作区，可以在这里编辑代码或预览网页效果，它有三种视图模式：
    • 代码视图： 纯代码编辑界面。
    • 拆分视图： （最常用） 上半部分是代码，下半部分是实时预览，修改代码后预览会即时更新。
    • 实时视图： 纯可视化预览界面，所见即所得。
  • 属性检查器： （核心工具） 选中页面上的任何元素（如文字、图片、 div），这里就会显示其所有可修改的属性（如颜色、大小、链接、CSS 样式等），这是进行可视化编辑的主要入口。
  • 面板组： 包括 文件（站点管理）、插入（添加各种元素）、CSS 设计器（管理样式）、应用程序（数据库相关）等，你可以通过“窗口”菜单来显示或隐藏它们。

第二部分：核心技能 - 从零开始建站

这是学习 Dreamweaver 的核心步骤，我们将通过创建一个简单的个人作品集网站来学习。

第 1 步：创建和管理站点

这是最重要的一步！ 在开始任何网页制作之前，都必须先定义一个本地站点。

  1. 打开“文件”面板（F8）。
  2. 点击“站点” -> “新建站点”。
  3. 在弹出的窗口中,为你的站点命名（如 MyPortfolio）。
  4. 选择“本地站点文件夹”，点击文件夹图标，选择一个你电脑上的空文件夹（如 D:\MyPortfolio）作为你网站所有文件的存放位置。
  5. 点击“完成”。

为什么必须做这一步？

dreamweaver学习教程
（图片来源网络，侵删）
  • Dreamweaver 会自动管理站点内的所有文件和链接，当你移动或重命名文件时，它会自动更新相关链接，避免出现“找不到文件”的错误。
  • 这是后续上传网站到服务器的基础。

第 2 步：创建第一个 HTML 页面

  1. 在“文件”面板中，右键点击你的站点根目录。
  2. 选择“新建文件”，将其命名为 index.html。index.html 是网站首页的默认文件名。
  3. 双击打开 index.html 文件。

第 3 步：理解 HTML 与 CSS 的关系

  • HTML (超文本标记语言)： 网页的“骨架”，负责定义内容的结构，如 <h1> 标题、<p> 段落、<img> 图片、<div> 容器等。
  • CSS (层叠样式表)： 网页的“化妆师”，负责定义内容的样式，如颜色、字体、间距、布局等。

Dreamweaver 让你可以在不写代码的情况下，通过可视化操作来编写它们。

第 4 步：添加文本和标题

  1. 切换到 “实时视图” 或 “拆分视图”。
  2. 在光标处直接输入文字,如“欢迎来到我的作品集”。
  3. 选中文字,在 “属性检查器” 中，将“格式”设置为“标题 1”（<h1>），这是页面最重要的标题。
  4. 再输入一段介绍文字,将其格式设置为“段落”（<p>）。

第 5 步：插入图片

  1. 将你的图片（如 profile.jpg）复制到你站点的文件夹内。
  2. 将光标放在你想插入图片的位置。
  3. 在 “属性检查器” 中，点击“源文件”旁边的文件夹图标，选择刚刚复制的 profile.jpg。
  4. 你可以在属性检查器中调整图片的宽度和高度。

第 6 步：使用 CSS 设计器进行样式设计

  1. 打开 “CSS 设计器” 面板（Shift + F11）。
  2. 创建新 CSS 规则：
    • 点击“源”旁边的 号，选择“在页面中创建”。
    • 在“选择器”中，输入 h1（表示我们要为所有 <h1> 标签添加样式）。
    • 在“属性”区域，你可以设置：
      • 文本颜色： 点击颜色方块，选择你喜欢的颜色。
      • 字体： 点击“字体”下拉菜单，选择一个字体。
      • 文本对齐： 选择“居中”。
  3. 使用类选择器（更常用）：
    • 选中你的一张图片。
    • 在“属性检查器”最下方，找到“类”输入框，输入一个自定义名称，如 profile-img，然后按回车。
    • 在“CSS 设计器”中，点击“源”的 号，选择“在页面中创建”。
    • 在“选择器”中，输入 .profile-img（注意前面的点 ）。
    • 在“属性”区域，可以设置图片的边框（边框）、圆角（边框-半径）等。

第 7 步：创建超链接

  1. 选中一段文字或一张图片。
  2. 在 “属性检查器” 的“链接”输入框中，输入你要跳转的网址（如 https://www.google.com）或站点内的其他页面文件（如 about.html）。
  3. 如果想在新的浏览器标签页中打开,可以勾选“目标”下拉菜单中的 _blank。

第三部分：进阶技巧 - 提升效率

使用“模板”创建一致性网站

如果你的网站有多个页面（如首页、关于我们、联系方式），它们通常有相同的页头和页脚，使用模板可以极大提高效率。

  1. 创建模板： 打开 index.html，另存为 template.dwt（后缀 .dwt 表示这是一个模板文件）。
  2. 定义可编辑区域： 在模板中，将需要修改的部分（如正文内容）选中，然后在 “插入” 菜单中选择 “模板对象” -> “可编辑区域”，并为其命名。
  3. 基于模板创建页面： 在“文件”面板中，右键点击模板文件，选择“从模板创建新文件”，这样生成的新页面会继承模板的结构，但只能在可编辑区域内进行修改，保证了页面的一致性。

利用“资源”面板管理素材

“资源”面板（F11）可以集中管理你网站中所有的图片、颜色、URL、脚本等，方便重复使用。

响应式布局入门

  1. 启用“实时视图”下的“响应式设计”模式： 在文档窗口的右上角，有一个手机、平板、电脑的图标，点击它。
  2. 添加“媒体查询”： 在“CSS 设计器”中，点击“媒体查询”的 号，添加一个新的断点，768px（平板尺寸）。
  3. 为不同尺寸设计样式： 当你拖动文档窗口的边缘，模拟不同屏幕尺寸时，CSS 设计器会自动切换到对应的媒体查询，此时你设置的样式将只在该尺寸范围内生效，在小屏幕上，你可以让导航栏从水平排列变为垂直排列。

第四部分：实战项目 - 从设计到上线

项目：一个简单的个人博客首页

  1. 规划： 在纸上或用工具画出网站的结构图，通常包括：导航栏（Logo、首页、文章、关于我）、轮播图、文章列表、侧边栏（热门文章、标签）、页脚。
  2. 准备素材： 准备好 Logo、文章配图、背景图等，并放入站点文件夹。
  3. 搭建框架：
    • 使用 <div> 标签，通过“插入”面板或直接在代码中，创建页面的主要结构，如 header、main、aside、footer。
    • 使用 “CSS 设计器” 为这些大 div 设置基本样式，如宽度、背景色、边距等，搭建出整体的布局。
    • 在 header 中插入 Logo 和导航链接。
    • 在 main 中，使用 <article> 标签创建文章列表。
    • 在 aside 中插入热门文章列表。
  5. 美化细节：
    • 使用 CSS 为导航添加悬停效果。
    • 为文章列表添加卡片式阴影和间距。
    • 调整字体、颜色，让整体风格统一。
  6. 测试： 切换到“实时视图”，拖动窗口边缘，检查在不同设备下是否显示正常，检查所有链接是否有效。
  7. 上传（可选）：
    • 在“站点”设置中，找到“服务器”选项。
    • 点击 号，选择“FTP”，并填入你的服务器信息（主机名、用户名、密码等）。
    • 设置完成后,在“文件”面板中，右键点击站点根目录，选择“上传”，即可将你的网站文件发布到服务器上。

第五部分：学习资源推荐

官方资源

视频教程

  • Bilibili (B站): 搜索“Dreamweaver 教程”，有大量免费且优质的中文视频，推荐选择播放量高、评价好的系列教程。
  • YouTube: 搜索 "Dreamweaver Tutorial for Beginners"，有大量国际优秀教程，通常配有中文字幕。

图文教程与博客

  • W3Schools / 菜鸟教程： 虽然不是专门讲 Dreamweaver，但它们是学习 HTML 和 CSS 语法最好的参考手册，当你遇到代码问题时可以随时查阅。
  • 知乎、CSDN、掘金： 搜索相关关键词，可以找到很多开发者分享的经验和技巧。

练习网站

  • CodePen / JSFiddle: 在这些网站上，你可以在线编写和测试 HTML, CSS, 代码，非常适合做小实验和练习。

学习路线图建议

  1. 第1-2周： 熟悉 DW 界面，掌握站点创建、文件管理，学会使用属性检查器和 CSS 设计器，完成一个简单的静态页面（如个人介绍页）。
  2. 第3-4周： 学习 HTML 和 CSS 的核心标签和属性，练习使用模板，尝试创建一个包含多个页面的企业官网，并实现基本的响应式效果。
  3. 第5-6周及以后： 深入学习响应式布局（Flexbox, Grid），如果对后端感兴趣，可以开始学习 DW 的应用程序功能，连接数据库制作动态网站（如博客、留言板），多看优秀网站的源码，模仿学习。

最后的小贴士：

  • 不要怕代码： Dreamweaver 的优势就是可视化与代码结合，即使你是设计师，也建议多看看“拆分视图”下的代码，这能帮助你更好地理解网页的结构和原理。
  • 理论与实践结合： 看完教程一定要自己动手做一遍，遇到问题再回头查资料，这样学习效果最好。
  • 保持耐心： 网页制作是一个需要不断练习和积累的过程。

祝你学习愉快,早日成为 Dreamweaver 高手！