Dreamweaver CS3 教程：从入门到精通

Dreamweaver CS3 是 Adobe 公司推出的一个“所见即所得”的可视化网页编辑器，它极大地简化了网页代码的编写过程，让设计师和开发者能够更高效地创建和管理网站，虽然现在有更新版本的 Dreamweaver，但 CS3 版本因其稳定性和经典功能,至今仍有很多人在使用或学习。

dreamweavercs3教程
（图片来源网络，侵删）

第一部分：入门基础

什么是 Dreamweaver？它有什么用？

  • 核心功能：可视化网页编辑，你可以在设计视图中像使用 Word 一样拖拽元素来布局，同时在代码视图中直接编辑 HTML、CSS、JavaScript 等代码。
  • 主要用途：
    • 网页设计与制作：快速创建静态网页。
    • 网站管理：使用“文件”面板管理整个网站的所有文件和文件夹。
    • 代码编辑：提供强大的代码提示、高亮和折叠功能,方便编写和调试代码。
    • CSS 样式管理：通过“CSS 样式”面板轻松创建和管理 CSS 样式表。

安装与启动

  1. 安装：找到 Dreamweaver CS3 的安装程序,按照向导提示完成安装。
  2. 启动：安装成功后，双击桌面图标或从开始菜单启动 Dreamweaver CS3。

认识工作界面

启动后，你会看到一个复杂但有序的界面,熟悉这些面板是高效工作的第一步。

  • 菜单栏：包含所有命令，如“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”和“帮助”。
  • 插入栏：这是最常用的工具栏之一，提供了插入各种元素（如图片、表格、链接、媒体等）的快捷按钮，你可以通过下拉菜单切换不同类别（“常用”、“布局”、“表单”等）。
  • 文档工具栏：位于文档窗口上方，包含视图切换按钮（代码、设计、拆分）、浏览器预览按钮、标题设置等。
  • 文档窗口：你的主要工作区,在这里你将看到网页的实际效果或代码。
  • 属性检查器：位于界面下方，当你选中页面上的某个元素（如一段文字、一张图片）时，它会显示该元素的属性（如字体大小、颜色、图片源、链接等）,并允许你直接修改。
  • 面板组：位于右侧，包括“文件”、“CSS 样式”、“应用程序”等面板，它们可以折叠、展开和拖动,方便你自定义工作区。

创建你的第一个站点

这是最关键的一步！ 在开始制作网页前，必须先定义一个本地站点，这有助于 Dreamweaver 管理你的所有文件和链接。

  1. 点击菜单栏的 站点 -> 新建站点...。
  2. 在弹出的对话框中，切换到 “高级” 选项卡（CS3 中推荐使用高级设置）。
  3. 本地信息：
    • 站点名称：给你的站点起个名字，如“我的第一个网站”。
    • 本地根文件夹：点击文件夹图标，选择你电脑上一个空文件夹作为网站的根目录。所有网页和图片都将保存在这个文件夹及其子文件夹中。
    • 默认图像文件夹：可以指定一个存放图片的子文件夹，如 images。
    • HTTP 地址：如果你的网站未来会上传到服务器,可以在这里输入网址。
  4. 点击 “确定”，在右侧的“文件”面板中,你就能看到你的站点了。

第二部分：核心功能与操作

创建和保存网页

  1. 点击 文件 -> 新建。
  2. 选择 “基本页” 下的 “HTML”，然后点击“创建”。
  3. 一个空白的新页面会打开。
  4. 点击 文件 -> 保存，在弹出的对话框中，选择你的站点根目录，将文件命名为 index.html（首页通常命名为 index.html 或 index.htm），然后点击“保存”。

三种视图模式

  • 设计视图：可视化编辑界面，所见即所得,适合初学者和设计师。
  • 代码视图：显示完整的 HTML/CSS/JavaScript 代码,适合开发者进行精细编辑。
  • 拆分视图：强烈推荐初学者使用！ 上半部分显示代码，下半部分显示设计效果，你在设计视图中做的任何修改，代码视图会实时更新；反之亦然,这是学习和理解代码的最佳方式。

插入文本与格式化

  • 输入文本：直接在设计视图中点击并输入。
  • 格式化文本：
    • 选中文字，在 属性检查器 中可以设置：
      • 格式：如“段落”、“标题 1”、“标题 2”等，标题标签对 SEO（搜索引擎优化）很重要。
      • 字体：选择字体。
      • 大小：设置字号。
      • 颜色：设置文字颜色。
    • 提示：尽量使用 CSS 来控制样式，而不是在属性检查器中逐个设置，这样更统一,也更容易修改。

插入并设置图片

  1. 准备图片：将你的图片（如 logo.jpg）放入站点根目录下的 images 文件夹中。
  2. 插入图片：
    • 将光标放在你想要插入图片的位置。
    • 在 插入栏 的“常用”类别中，点击 “图像” 图标。
    • 在弹出的对话框中，导航到你的 images 文件夹，选择图片，点击“确定”。
  3. 设置图片属性：
    • 选中插入的图片，属性检查器 会变为图片属性。
    • 源文件：确认图片路径是否正确（应该指向 images 文件夹）。
    • 宽度和高度：可以调整图片显示大小。注意：直接拉伸图片会导致变形，最好先用图像处理软件（如 Photoshop）调整好尺寸。
    • 替换：为图片添加一个描述性文本，这非常重要，当图片无法显示时，会显示这段文字,也有利于搜索引擎识别图片内容。
    • 边框：可以给图片添加边框，输入边框宽度（像素）。

创建超链接

超链接是网页的灵魂。

  1. 链接到其他网页：
    • 选中一段文字或一张图片。
    • 在 属性检查器 的 “链接” 文本框中，输入目标网页的文件名，如 about.html。
    • 目标：指定链接在哪个窗口打开。
      • _blank：在新窗口中打开（最常用）。
      • _self：在当前窗口打开（默认）。
  2. 链接到外部网站：
    • 在“链接”框中输入完整的网址，如 http://www.google.com。
  3. 创建锚点链接（页面内链接）：
    • 创建锚点：将光标定位到你想跳转到的位置，点击菜单栏 插入 -> 命名锚记，给锚点起个名字，如 top。
    • 链接到锚点：选中要作为链接的文字或图片，在“链接”框中输入 #锚点名，如 #top。

使用表格进行布局

虽然现在 CSS 布局更流行，但表格仍然是组织数据、进行简单布局的有效工具。

dreamweavercs3教程
（图片来源网络，侵删）
  1. 插入表格：
    • 将光标放在要插入表格的位置。
    • 在 插入栏 的“常用”类别中，点击 “表格” 图标。
    • 设置表格的 行数、列数、表格宽度（建议使用像素单位，如 800px）、边框粗细（为 0 时表格线不可见，常用于布局）。
  2. 编辑表格：
    • 合并单元格：选中多个连续的单元格，右键点击，选择 表格 -> 合并单元格。
    • 拆分单元格：将光标放在一个单元格内，右键点击，选择 表格 -> 拆分单元格。
    • 在单元格内可以像在页面中一样插入文本、图片等。

CSS 样式表入门

CSS（层叠样式表）用于控制网页的视觉表现，如颜色、间距、布局等。

  • 创建 CSS 规则：
    1. 打开 CSS 样式 面板（通常在右侧）。
    2. 点击面板下方的 “新建 CSS 规则” 按钮。
    3. 选择器类型：
      • 类：可以应用于任何元素，名称前有一个点 ，如 .text-red。
      • 重新定义 HTML 标签的默认样式，如 p（段落）、h11）。
      • 高级：如 a:link（定义超链接的初始状态）。
    4. 选择器名称：为你的样式起一个名字，如 .main-title。
    5. 定义在：选择 “新建样式表文件”，这样可以把所有样式代码保存在一个独立的 .css 文件中,方便管理和复用。
    6. 点击“确定”，会弹出一个对话框让你保存样式表文件（如 style.css），然后会弹出 “CSS 规则定义” 对话框。
    7. 你可以设置各种样式属性，如 类型（字体、大小、颜色）、背景、区块（文本对齐、间距）、方框（宽高、内外边距）等。
    8. 设置完成后点击“确定”。
  • 应用 CSS 样式：
    • 选中页面上的元素。
    • 在 属性检查器 的 “类” 下拉菜单中，选择你刚刚创建的 CSS 栄。

第三部分：网站管理与上传

管理文件

使用右侧的 “文件” 面板可以像在 Windows 资源管理器中一样管理你的网站文件：

  • 创建新文件/文件夹：右键点击面板，选择“新建文件”或“新建文件夹”。
  • 重命名/删除：右键点击文件或文件夹进行操作。
  • 获取/上传：当你连接到远程服务器后，可以下载（获取）服务器上的文件或上传本地文件到服务器。

设置远程站点（上传网站）

要将你的网站发布到互联网上,需要设置远程服务器信息。

  1. 点击菜单栏 站点 -> 管理站点...。
  2. 选择你的站点，点击 “编辑”。
  3. 切换到 “高级” 选项卡，然后选择 “远程信息”。
  4. 访问：选择你的服务器类型，最常见的是 FTP。
  5. FTP 主机：输入你的 FTP 服务器地址（由你的网站空间提供商提供）。
  6. 主机目录：输入你的网站在服务器上的根目录路径（通常是 /public_html 或 /www，具体请咨询服务商）。
  7. 登录：输入你的 FTP 用户名。
  8. 密码：输入你的 FTP 密码。
  9. 点击 “确定” 保存设置。

上传文件

设置好远程站点后,就可以上传了。

dreamweavercs3教程
（图片来源网络，侵删）
  1. 在 “文件” 面板中,确保你的本地站点文件已经保存。
  2. 点击面板右上方的 “连接到远程服务器” 图标,连接成功后图标会变为绿色。
  3. 选择你想要上传的本地文件（可以按住 Ctrl 或 Shift 多选）。
  4. 点击面板下方的 “上传文件” 图标。
  5. 等待上传完成,你的网站就可以通过域名访问了！

第四部分：实用技巧与提示

  1. 使用模板：如果网站的多个页面有相同的头部和底部（如导航栏、版权信息），可以使用模板创建，修改模板后，所有基于该模板的页面都会自动更新,大大提高效率。
  2. 善用代码提示：在代码视图中输入 < 或类名、函数名时，Dreamweaver 会提供代码提示,这能大大减少你的拼写错误。
  3. 清理 HTML 代码：如果你从 Word 或其他地方复制了带格式的文本，直接粘贴到 Dreamweaver 中会产生大量冗余代码，可以选中这些文本，点击 命令 -> 清理 Word HTML 来进行清理。
  4. 检查浏览器兼容性：点击菜单栏 命令 -> 检查浏览器兼容性,可以检测你的网页在不同浏览器中可能存在的兼容性问题。
  5. 保存工作：养成经常按 Ctrl + S 保存的习惯,防止意外导致工作丢失。

学习资源推荐

  • 官方帮助：Dreamweaver CS3 自带了非常详尽的帮助文档，按 F1 键即可打开,遇到任何问题都可以先查阅它。
  • 在线视频教程：在 YouTube、Bilibili 等视频网站上搜索“Dreamweaver CS3 教程”,有大量中文和英文的视频课程可供学习。
  • 书籍：虽然年代稍远，但图书馆或旧书网站上仍能找到一些经典的 Dreamweaver CS3 入门书籍,系统学习效果很好。

希望这份教程能帮助你顺利入门 Dreamweaver CS3,祝您学习愉快！