使用 Adobe Dreamweaver 制作网页完整指南

这份指南将带您从零开始,学习如何使用 Adobe Dreamweaver 这款强大的网页设计与开发工具，创建出专业、美观且功能完善的网站。

dreamweaver网页制作 pdf
（图片来源网络，侵删）

目录

  1. 第一部分：Dreamweaver 简介与环境设置

    • 1 什么是 Dreamweaver？
    • 2 安装与启动
    • 3 熟悉工作区界面
    • 4 创建和管理站点

  2. 第二部分：网页的核心基石

    • 1 HTML：网页的骨架
    • 2 CSS：网页的衣裳
    • 3 Dreamweaver 的实时视图与代码视图

  3. 第三部分：使用可视化工具快速布局

    • 1 插入文本、图片和链接
    • 2 使用表格进行数据布局
    • 3 使用“插入”面板创建表单
    • 4 运用 CSS 设计器美化页面

  4. 第四部分：高级主题与动态功能

    dreamweaver网页制作 pdf
    （图片来源网络，侵删）
    • 1 响应式网页设计：适配不同设备
    • 2 使用模板提高效率
    • 3 动态网页与数据库基础 (简介)

  5. 第五部分：本地测试与网站上传

    • 1 在本地预览网站
    • 2 设置远程服务器 (FTP)
    • 3 上传和同步网站文件

  6. 第六部分：实用技巧与最佳实践

    • 1 快捷键大全
    • 2 代码提示与格式化
    • 3 调试常见问题

第一部分：Dreamweaver 简介与环境设置

1 什么是 Dreamweaver？

Adobe Dreamweaver 是一款集网页设计、代码编辑和网站管理于一体的专业工具，它最大的优势在于“所见即所得”（WYSIWYG）的可视化编辑模式和强大的代码编辑模式的无缝结合，既能帮助初学者快速上手，也能满足专业开发者的深度需求。

2 安装与启动

  1. 购买与下载：从 Adobe 官网购买 Creative Cloud 订阅计划，然后下载并安装 Dreamweaver 应用程序。
  2. 启动：安装完成后，双击桌面图标启动 Dreamweaver。

3 熟悉工作区界面

启动 Dreamweaver 后，你会看到一个功能丰富的界面，主要包含以下几个部分：

dreamweaver网页制作 pdf
（图片来源网络，侵删）
  • 菜单栏：包含所有命令，如“文件”、“编辑”、“插入”、“修改”等。
  • 工具栏：提供常用操作的快捷按钮，如“在浏览器中预览”、“验证”等。
  • 文档窗口：这是你设计和编辑网页的主要区域，它可以在三种视图间切换：
    • 代码视图：显示和编辑 HTML、CSS、JavaScript 等源代码。
    • 实时视图：显示网页在浏览器中的最终效果，同时允许你进行可视化编辑。
    • 拆分视图：同时显示代码和实时视图，是学习和开发的首选。
  • 属性检查器：当选中文档中的某个元素（如图片、文本、表格）时，该检查器会显示其属性，并允许你直接修改。
  • 面板组：位于右侧，包含各种功能面板，如“文件”、“插入”、“CSS 设计器”等，你可以通过拖拽来停靠或浮动这些面板。

4 创建和管理站点

在开始制作网页之前,最重要的一步是定义一个本地站点，这相当于告诉 Dreamweaver 你的网站文件都存放在哪里，便于管理和链接。

  1. 点击菜单栏的 站点 -> 新建站点。
  2. 在弹出的对话框中,你可以选择“基本”向导或“高级”设置，这里我们使用“基本”向导。
  3. 输入站点名称：给你的网站起一个名字（"我的第一个网站"）。
  4. 选择本地站点文件夹：点击文件夹图标，选择一个你电脑上的空文件夹作为网站的根目录（D:\MyWebsite）。
  5. 点击“完成”。

你的“文件”面板就会显示你刚刚创建的站点文件夹，你可以在这里创建和管理 HTML、CSS、图片等所有网站文件。

第二部分：网页的核心基石

1 HTML：网页的骨架

HTML (HyperText Markup Language) 是网页的标记语言，定义了网页的结构和内容，如标题、段落、图片、链接等。

  • HTML 使用标签来包裹内容，如 <h1>）、<p>（段落）、<img>（图片）。
  • 属性：为标签提供额外信息，如 <img src="image.jpg" alt="一张图片">。

2 CSS：网页的衣裳

CSS (Cascading Style Sheets) 是层叠样式表，负责网页的视觉表现，如颜色、字体、间距、布局等。

  • 选择器：选择要应用样式的 HTML 元素，如 p（所有段落）、.header（所有 class 为 header 的元素）。
  • 属性与值：定义具体的样式，如 color: blue;（文字颜色为蓝色）、width: 960px;（宽度为 960 像素）。

3 Dreamweaver 的实时视图与代码视图

Dreamweaver 的强大之处在于它在这两种视图间的完美切换。

  • 实时视图：你可以在上面像在 Word 里一样输入文字、拖放图片，Dreamweaver 会自动生成对应的 HTML 和 CSS 代码。
  • 代码视图：你可以直接手写或修改代码，修改后切换到实时视图，立即看到效果，这种双向同步极大地提高了开发效率。

第三部分：使用可视化工具快速布局

1 插入文本、图片和链接

  1. 插入文本：在实时视图中直接输入即可，使用属性检查器可以设置文本的格式（标题、加粗、斜体）、字体、大小和颜色。
  2. 插入图片：
    • 将光标定位到要插入图片的位置。
    • 点击菜单栏 插入 -> 图像，或使用“插入”面板。
    • 选择本地图片文件,Dreamweaver 会自动将图片复制到你站点的 images 文件夹（如果不存在则创建）。
    • 在属性检查器中设置图片的替代文本（alt 属性，对 SEO 和无障碍访问很重要）。
  3. 创建链接：
    • 选中要添加链接的文本或图片。
    • 在属性检查器的“链接”框中，输入目标网址（如 https://www.google.com）或点击文件夹图标选择站点内的其他页面。
    • 在“目标”下拉菜单中，可以选择链接在哪个窗口打开（如 _blank 在新窗口打开）。

2 使用表格进行数据布局

虽然现在不推荐用表格做整体页面布局,但它在展示结构化数据（如课程表、成绩单）时仍然非常有效。

  1. 点击菜单栏 插入 -> 表格。
  2. 设置表格的行数、列数、宽度（像素或百分比）、边框粗细等。
  3. 点击“确定”后，表格会插入到页面中，你可以直接在单元格内输入内容或插入图片。

3 使用“插入”面板创建表单

表单是网站与用户交互的重要方式,常用于登录、注册、搜索、留言等。

  1. 将光标定位到要插入表单的位置。
  2. 在“插入”面板中，切换到“表单”类别。
  3. 点击“表单”按钮，一个红色的虚线框会出现，这就是表单的容器。
  4. 在容器内,你可以插入各种表单元素：
    • 文本域：用于输入单行文本（如用户名）。
    • 文本区域：用于输入多行文本（如留言内容）。
    • 按钮：用于提交或重置表单。
    • 复选框：用于多选（如兴趣爱好）。
    • 单选按钮：用于单选（如性别）。

4 运用 CSS 设计器美化页面

这是 Dreamweaver 的核心功能之一，让你无需手写代码即可精确控制样式。

  1. 在实时视图中,选中一个元素（例如一个 <h1> 标题）。
  2. 打开右侧的 CSS 设计器 面板。
  3. 创建新 CSS 规则：
    • 点击“源”下的 号，选择“创建新的 CSS 文件”。
    • 给文件命名（如 style.css），并选择附加到哪个页面或整个站点。
  4. 定义样式：
    • 在“选择器”部分，Dreamweaver 会自动为你创建一个选择器（如 h1）。
    • 在“属性”部分，你可以像在 Photoshop 里一样，通过勾选和填写数值来设置样式，如：
      • 文本：字体、大小、颜色、行高。
      • 背景：背景颜色、背景图片。
      • 方框：宽度、高度、内外边距、边框。
    • 所有的更改都会实时反映在页面上,并自动写入 CSS 文件中。

第四部分：高级主题与动态功能

1 响应式网页设计：适配不同设备

响应式设计能让你的网站在手机、平板、电脑等不同尺寸的屏幕上都有良好的显示效果。

  • 使用 Bootstrap：Dreamweaver 内置了对流行 CSS 框架（如 Bootstrap）的支持，你可以通过 文件 -> 新建 -> Bootstrap 来创建一个响应式页面。
  • 媒体查询：这是 CSS3 的核心技术，在 CSS 设计器中，你可以添加“媒体查询”规则，为不同屏幕尺寸（如平板、手机）设置不同的样式，当屏幕宽度小于 768 像素时，将导航栏从横向变为纵向。

2 使用模板提高效率

如果你的网站的多个页面有相同的布局（如共同的页头、页脚和导航栏），使用模板可以大大提高效率。

  1. 创建模板：打开一个作为模板基础的页面，点击 文件 -> 另存为模板，定义可编辑区域（用户可以修改的部分）和不可编辑区域（所有页面共享的部分）。
  2. 基于模板创建页面：文件 -> 新建 -> 从模板新建，选择你创建的模板，新页面会自动继承布局，且只能修改可编辑区域。
  3. 更新模板：当需要修改所有页面共有的部分时，只需打开模板文件修改，然后点击“更新站点”即可一键更新所有基于该模板的页面。

3 动态网页与数据库基础 (简介)

动态网页可以根据用户请求、时间、数据库内容等动态生成页面，例如新闻网站、电商网站等。

  • 服务器技术：动态网页需要服务器端技术支持，如 PHP、ASP.NET、JSP 等。
  • 数据库：用于存储动态内容，如 MySQL、Microsoft SQL Server。
  • Dreamweaver 的行为：Dreamweaver 提供了服务器行为面板，可以让你通过可视化操作连接数据库、显示记录、创建搜索和分页等功能，而无需编写复杂的后端代码。

第五部分：本地测试与网站上传

1 在本地预览网站

在发布到互联网之前,务必在本地浏览器中测试网站。

  • 点击工具栏上的 “在浏览器中预览” 按钮（地球图标），选择一个浏览器即可打开当前页面。
  • 你还可以使用 Dreamweaver 内置的 “实时” 视图来快速预览，但最终效果还是要以真实浏览器为准。

2 设置远程服务器 (FTP)

当你准备好将网站上传到网络服务器时,需要设置远程服务器信息。

  1. 打开“文件”面板，点击右上角的 站点 -> 管理站点。
  2. 选择你的站点,点击“编辑”。
  3. 切换到“服务器”选项卡，点击 号添加新服务器。
  4. 设置选项：
    • 服务器类型：通常选择 FTP。
    • FTP 地址：你的主机提供商提供的 FTP 服务器地址。
    • 目录：你在服务器上存放网站的根目录。
    • 登录信息：你的 FTP 用户名和密码。
  5. 测试连接,成功后点击“保存”。

3 上传和同步网站文件

连接成功后,你就可以上传文件了。

  • 上传文件：在“文件”面板中，选中本地站点中的文件或文件夹，点击“上传”按钮（向上的箭头）。
  • 获取文件：从服务器下载文件到本地。
  • 同步：这是一个非常强大的功能，可以比较本地和服务器上的文件，只上传或下载有差异的文件，确保两边内容完全一致。

第六部分：实用技巧与最佳实践

1 快捷键大全

  • Ctrl + S：保存
  • Ctrl + N：新建文件
  • F12：在浏览器中预览
  • Ctrl + /：切换代码视图和实时视图
  • Ctrl + D：复制当前行
  • Ctrl + Shift + D：删除当前行

2 代码提示与格式化

  • 代码提示：在代码视图中输入代码时，Dreamweaver 会提供智能的代码提示，大大提高编码速度和准确性。
  • 代码格式化：选中代码后，右键选择“代码格式化”或使用快捷键 Shift + F1 (Windows) / Cmd + F1 (Mac)，可以让杂乱的代码变得整洁易读。

3 调试常见问题

  • 页面显示错乱：检查 CSS 样式是否正确，特别是盒模型（margin、padding、border）的设置，使用浏览器的“开发者工具”（按 F12）可以实时检查和调试元素。
  • 图片不显示：检查图片路径是否正确，图片文件是否已上传到服务器，以及文件名是否有拼写错误。
  • 链接失效：检查链接的 URL 是否正确，特别是相对路径和绝对路径的使用。

Adobe Dreamweaver 是一个功能强大且灵活的工具，对于初学者，它的可视化编辑功能可以让你快速入门，看到即所得的成果；对于专业人士，其强大的代码编辑、版本控制和 CMS 集成能力，能应对各种复杂的开发需求。

掌握 Dreamweaver 的关键在于多练习、多尝试，从创建一个简单的静态页面开始，逐步学习 CSS 样式、响应式布局，最后再探索动态网页的奥秘，祝您网页制作愉快！