Microsoft Word - 02.doc

第 2 章 网 站 开 发 工 具 要 想 成 为 一 名 优 秀 的 网 页 设 计 师 需 要 具 备 哪 些 条 件? 独 特 的 设 计 风 格 紧 跟 潮 流 的 设 计 语 言 娴 熟 的 技 术 当 然 任 何 创 作 艺 术 设 计 创 作 都 要 靠 一 定 的 工 具 来 实 现, 网 页 开 发 设 计 也 不 例 外 没 有 高 效 创 新 的 设 计 开 发 工 具 想 在 激 烈 的 竞 争 中 生 存, 并 成 为 一 名 优 秀 的 网 页 设 计 师 是 很 难 的 好 的 设 计 开 发 工 具 就 好 比 嘴 巴, 可 以 把 心 里 想 的 表 达 出 来 告 诉 对 方 网 页 设 计 意 图 的 准 确 表 达 就 需 要 依 赖 优 秀 的 设 计 开 发 工 具 2.1 Dreamweaver CS3 概 述 Dreamweaver CS3 是 一 款 优 秀 的 网 站 开 发 工 具, 是 网 页 设 计 师 在 选 择 开 发 工 具 时 一 个 不 错 的 选 择 网 页 设 计 师 使 用 Dreamweaver CS3 能 更 为 高 效 地 设 计 开 发 和 维 护 基 于 网 站 标 准 化 的 网 站 它 集 成 了 众 多 网 站 开 发 中 所 涉 及 到 的 最 新 技 术, 扩 展 了 页 面 设 计 与 制 作 多 媒 体 开 发 和 动 画 设 计 这 类 丰 富 实 用 的 功 能 在 Dreamweaver CS3 这 个 新 版 本 中, 其 极 大 程 度 上 强 化 了 对 于 动 态 网 页 技 术 的 支 持, 使 得 网 页 设 计 师 可 以 制 作 出 更 多 眩 目 的 互 动 页 面 特 效 并 保 留 了 一 贯 插 件 式 的 软 件 设 计, 使 得 网 页 设 计 师 可 以 随 意 选 择 各 类 扩 展 性 插 件 进 行 安 装 极 具 亲 和 力 的 操 作 界 面, 使 得 网 页 设 计 师 可 以 根 据 自 身 需 要, 自 定 义 各 类 浮 动 面 板 能 够 更 为 方 便 地 使 用 软 件 本 身 的 各 种 内 置 对 象 进 行 开 发 操 作 2.2 Dreamweaver CS3 的 特 点 和 新 增 功 能 Dreamweaver CS3 在 实 用 功 能 上 和 操 作 流 程 上 的 都 有 了 显 著 的 改 进 修 正 了 以 往 版 本 中 软 件 本 身 设 计 上 的 一 些 缺 漏, 新 增 功 能 更 是 发 挥 了 其 高 效 开 发 的 特 点 它 允 许 网 页 设 计 师 依 据 个 人 开 发 习 惯, 选 择 在 设 计 环 境 或 是 编 码 环 境 下 进 行 快 速 编 辑 下 面 就 分 别 从 实 用 功 能 操 作 模 式 与 最 新 技 术 这 3 个 方 面 介 绍 Dreamweaver CS3 的 一 些 特 点 和 新 增 功 能 1. 增 强 CSS 功 能 Dreamweaver CS3 提 供 一 组 预 先 设 计 的 CSS 布 局 模 板 使 用 这 些 模 板, 设 计 人 员 可 以 快 速 设 计 好 页 面 并 开 始 运 行 这 些 模 板 包 括 Web 上 的 大 多 数 站 点 设 计 的 布 局, 而 且 每 种 布 局 都 包 含 许 多 附 加 元 素 同 时,Dreamweaver CS3 提 供 强 大 的 CSS 管 理 功 能 用 户 可 以 轻 松 地 在 文 档 之 间 文 档 标 题 与 外 部 表 之 间 外 部 CSS 文 件 之 间 以 及 更 多 位 置 之 间 移 动 CSS 规 则 此 外, 用 户 还 可 以 将 内 联 CSS 转 换 为 CSS 规 则 为 了 设 计 人 员 使 用,Adobe 还 提 供 Adobe CSS Advisor 网 站 通 过 这 个 网 站, 用 户 可 以 解 决 各 种 CSS 的 应 用 问 题 2. 更 方 便 的 浏 览 器 兼 容 性 检 查 在 Dreamweaver CS3 中, 浏 览 器 兼 容 性 检 查 功 能 可 生 成 报 告, 指 出 各 种 浏 览 器 中 和 CSS 相 关 的 兼 容 问 题 在 代 码 视 图 中, 这 些 问 题 以 绿 色 下 划 线 来 标 记, 帮 助 用 户 确 认 问 题 代 码 的 位 置 如 果 用 户 无 法

12 解 决 问 题, 还 可 以 在 Adobe CSS Advisor 网 站 获 取 帮 助 3. 增 加 Ajax 的 Spry 框 架 通 过 Dreamweaver CS3, 用 户 可 以 使 用 Ajax 的 Spry 框 架 进 行 动 态 用 户 界 面 的 可 视 化 设 计 开 发 和 部 署 Spry 与 其 它 Ajax 框 架 不 同, 它 是 一 个 面 向 Web 设 计 人 员 的 JavaScript 库 设 计 人 员 可 以 向 用 户 提 供 更 丰 富 体 验 的 网 页 Spry 框 架 包 括 Spry 构 件 和 Spry 效 果 两 部 分 Spry 构 件 : 它 是 预 置 的 常 用 用 户 界 面 组 件 用 户 可 以 使 用 CSS 自 定 义 这 些 组 件, 然 后 将 其 添 加 到 网 页 中 在 Dreamweaver CS3, 用 户 可 以 将 多 个 Spry 构 件 添 加 到 自 己 的 页 面 中 在 这 些 构 件 中, 可 以 包 括 XML 驱 动 的 列 表 和 表 格 折 叠 构 件 选 项 卡 式 界 面 和 具 有 验 证 功 能 的 表 单 元 素 Spry 效 果 : 它 是 一 种 提 高 网 站 外 观 吸 引 力 的 简 洁 方 式 这 种 效 果 可 应 用 于 HTML 页 面 上 的 大 部 分 元 素 用 户 可 以 通 过 添 加 Spry 效 果, 对 网 页 元 素 进 行 放 大 收 缩 渐 隐 和 高 亮 显 示 4. 与 其 他 工 具 的 高 度 集 成 Dreamweaver CS3 实 现 和 Photoshop CS3 Adobe Device Central 和 Adobe Bridge CS3 高 度 集 成 Dreamweaver 和 Photoshop CS3 集 成 : 设 计 人 员 可 以 在 Photoshop 中 选 择 任 一 部 分, 直 接 将 其 粘 贴 到 Dreamweaver 页 面 中 Dreamweaver 会 显 示 一 个 对 话 框, 可 在 其 中 为 图 像 指 定 优 化 选 项 如 果 需 要 编 辑 图 像, 只 需 双 击 图 像, 就 可 在 Photoshop 中 打 开 原 始 的 带 图 层 PSD 文 件 进 行 编 辑 Dreamweaver 和 Adobe Device Central 集 成 : 使 用 Adobe Device Central, 用 户 可 以 快 速 访 问 每 个 设 备 的 基 本 技 术 规 范, 帮 助 用 户 实 现 内 容 的 移 动 Dreamweaver 和 Adobe Bridge CS3 集 成 : 通 过 Adobe Bridge, 用 户 可 以 能 够 集 中 访 问 项 目 文 件 应 用 程 序 设 置 以 及 XMP 元 数 据 标 记 和 搜 索 功 能 2.3 Dreamweaver CS3 的 安 装 删 除 和 启 动 若 要 安 装 Dreamweaver CS3, 具 体 的 操 作 步 骤 如 下 (1) 打 开 Dreamweaver CS3 安 装 文 件 后, 程 序 会 自 动 开 始 解 压 将 所 需 要 的 文 件 提 取 出 来, 以 供 安 装 随 后 将 出 现 安 装 欢 迎 对 话 框, 如 图 2.1 所 示 (2) 接 受 软 件 用 户 使 用 版 权 协 议 后, 单 击 下 一 步 按 钮, 可 以 对 文 件 所 使 用 默 认 编 辑 器 进 行 分 类 指 派 也 就 是 确 认 把 Dreamweaver 作 为 哪 一 部 分 特 定 类 型 文 件 的 默 认 编 辑 器, 如 图 2.2 所 示 图 2..1 安 装 欢 迎 对 话 框 图 2..2 默 认 编 辑 器 设 置 (3) 连 续 几 步 操 作 后,Dreamweaver 完 成 所 有 安 装 用 户 可 以 根 据 需 要 选 中 显 示 自 述 文 件 选

第 2 章 网 站 开 发 工 具 13 项 框, 在 安 装 完 毕 后 来 查 看 软 件 的 说 明 文 件 也 可 以 选 中 启 动 Macromedia Dreamweaver CS3 选 项 框, 在 退 出 安 装 向 导 后 自 动 打 开 软 件, 如 图 2.3 所 示 (4) 单 击 完 成 按 钮, 系 统 会 自 动 运 行 Dreamweaver CS3, 弹 出 如 图 2.4 所 示 的 启 动 画 面 根 据 用 户 系 统 实 际 情 况, 可 能 会 出 现 要 求 重 新 启 动 计 算 机 的 相 应 提 示 图 2..3 安 装 完 成 画 面 图 2..4 启 动 画 面 (5) 查 看 Dreamweaver CS3 的 工 作 环 境, 它 的 操 作 界 面 由 主 菜 单 状 态 栏 工 作 区 和 浮 动 面 板 组 成, 如 图 2.5 所 示 图 2..5 工 作 环 境 删 除 Dreamweaver CS3 的 方 法 与 卸 载 别 的 应 用 程 序 一 样, 具 体 的 操 作 步 骤 如 下 (1) 在 控 制 面 板 右 侧 列 表 框 中 选 中 添 加 或 删 除 程 序 列 表 项, 打 开 添 加 或 删 除 程 序 窗 口, 如 图 2.6 所 示

14 图 2..6 添 加 或 删 除 程 序 窗 口 (2) 在 添 加 或 删 除 程 序 窗 口 右 侧 的 当 前 安 装 的 程 序 列 表 框 中, 选 中 Macromedia Dreamweaver CS3 列 表 项 单 击 删 除 按 钮, 会 出 现 确 认 删 除 的 对 话 框, 如 图 2.7 所 示 (3) 确 定 删 除 操 作 后, 系 统 会 开 始 对 Dreamweaver CS3 进 行 删 除 信 息 收 集 操 作, 如 图 2.8 所 示 之 后 会 弹 出 相 应 的 进 度 显 示 图 2..7 删 除 Dreamweaver CS3 图 2..8 信 息 收 集 对 话 框 2.4 熟 悉 Dreamweaver CS3 的 工 作 窗 口 Dreamweaver CS3 所 提 供 的 工 作 区 环 境, 将 全 部 功 能 面 板 集 成 到 了 一 个 应 用 程 序 窗 口 中 网 页 设 计 师 可 以 选 择 面 向 设 计 人 员 的 布 局 模 式 进 行 开 发, 也 可 以 选 择 面 向 手 工 编 码 人 员 的 布 局 模 式 进 行 开 发 Dreamweaver CS3 的 工 作 窗 口 包 含 如 下 的 几 个 组 成 部 分 : 插 入 工 具 栏 文 档 窗 口 文 档 工 具 栏 面 板 组 标 签 选 择 器 属 性 检 查 器 文 件 面 板 等, 如 图 2.9 所 示

第 2 章 网 站 开 发 工 具 15 图 2..9 工 作 窗 口 插 入 工 具 栏 : 包 含 了 一 系 列 的 插 入 按 钮, 使 用 这 些 按 钮 可 以 将 各 类 对 象 ( 如 链 接 表 格 和 图 像 ) 插 入 到 编 辑 文 档 中, 如 图 2.10 所 示 在 代 码 编 辑 模 式 下, 每 一 个 对 象 都 会 对 应 一 段 HTML 代 码 图 2..10 插 入 工 具 栏 文 档 窗 口 : 是 用 来 显 示 当 前 创 建 和 编 辑 的 文 档 内 容, 是 网 站 设 计 和 开 发 的 主 要 工 作 区 文 档 工 具 栏 : 包 含 一 系 列 的 操 作 按 钮, 使 用 这 些 按 钮 可 以 在 编 辑 文 档 的 不 同 视 图 间 快 速 切 换, 例 如 代 码 视 图 设 计 视 图 同 时 显 示 代 码 和 设 计 的 拆 分 视 图 工 具 栏 中 还 包 括 查 看 文 档 传 输 文 档 相 关 的 常 用 命 令, 如 图 2.11 所 示 图 2..11 文 档 工 具 栏 面 板 组 : 针 对 具 体 功 能 模 块,Dreamweaver CS3 把 一 些 相 关 面 板 进 行 分 组 并 集 成 在 了 一 起 单 击 面 板 组 名 称, 例 如 文 件 面 板 左 侧 的 倒 三 角 箭 头, 就 能 展 开 相 对 应 的 面 板 组, 如 图 2.12 所 示 标 签 选 择 器 : 可 以 理 解 成 一 个 标 签 导 航 功 能, 这 个 功 能 可 以 很 方 便 地 定 位 到 插 入 至 页 面 中 的 任 意 标 签 选 中 要 编 辑 的 插 入 对 象, 对 其 进 行 相 关 的 属 性 设 置 属 性 检 查 器 : 一 个 用 于 查 看 和 编 辑 所 选 对 象 或 文 本 的 各 类 属 性 ( 如 格 式 样 式 字 体 等 ) 的 功 能 面 板, 如 图 2.13 所 示

16 图 2..12 面 板 组 图 2..13 属 性 检 查 器 文 件 面 板 : 一 个 用 户 管 理 文 件 和 文 件 夹 的 功 能 面 板 通 过 这 个 面 板 还 使 网 页 设 计 师 可 以 访 问 本 地 磁 盘 上 的 全 部 文 件, 或 是 服 务 器 整 个 站 点 中 的 所 有 文 件 操 作 模 式 类 似 于 Windows 的 资 源 管 理 器, 如 图 2.14 所 示 图 2..14 文 件 面 板 2.5 Dreamweaver CS3 的 参 数 设 置 在 实 际 使 用 中, 网 页 设 计 师 通 常 会 通 过 设 置 Dreamweaver CS3 的 参 数 来 自 定 义 工 作 区 环 境, 去 适 应 个 人 的 开 发 习 惯 例 如, 对 于 不 熟 悉 编 写 代 码 的 设 计 师, 可 以 选 择 设 计 器 模 式 的 工 作 区 布 局 如 若 要 更 改 工 作 区 布 局, 可 以 在 窗 口 主 菜 单 下 选 中 工 作 区 布 局 子 菜 单 Dreamweaver CS3 内 置 了 三 种 布 局 模 式 编 码 器 设 计 器 和 双 重 屏 幕, 设 计 师 可 以 根 据 需 要 选 择 适 合 自 己 的 工 作 区 布 局 在 编 辑 主 菜 单 下 选 中 首 选 参 数 子 菜 单, 打 开 首 选 参 数 对 话 框 在 这 个 对 话 框 中 可 以 进 行 一 系 列 的 自 定 义 操 作, 包 括 常 规 CSS 样 式 标 记 色 彩 等 下 面 就 以 介 绍 如 何 在 代 码 视 图 模 式 下, 在 快 速 标 签 编 辑 器 中 显 示 代 码 提 示 为 例, 来 介 绍 Dreamweaver CS3 首 选 参 数 设 置 的 方 法 在 首 选 参 数 对 话 框 的 左 侧 分 类 列 表 框 内 选 中 代 码 提

第 2 章 网 站 开 发 工 具 17 示 列 表 项, 在 此 对 话 框 右 侧 就 会 显 示 所 有 代 码 提 示 功 能 的 设 置 参 数, 如 图 2.15 所 示 图 2..15 首 选 参 数 设 置 结 束 标 签 选 项 组 可 指 定 希 望 Dreamweaver 插 入 结 束 标 签 的 方 式 默 认 情 况 下, 网 页 设 计 师 在 代 码 编 辑 窗 口 中 键 入 字 符 </\ 后,Dreamweaver 会 自 动 闭 合 标 签 与 之 匹 配 可 以 更 改 此 选 项, 设 置 为 在 键 入 开 始 标 签 的 最 后 尖 括 号 > 后 插 入 结 束 标 签, 或 者 从 不 插 入 结 束 标 签 在 启 用 选 项 参 数 设 置 下 的 启 用 代 码 提 示 功 能 后, 可 以 拖 动 延 迟 滑 块 来 设 置 Dreamweaver 在 显 示 适 当 的 提 示 之 前 进 行 延 时 操 作 的 时 间 长 短, 以 秒 为 单 位 菜 单 列 表 框 内 允 许 设 置 在 键 入 代 码 时 具 体 需 要 提 示 的 代 码 类 型, 可 以 使 用 选 择 使 用 全 部 或 部 分 菜 单 类 型 注 意 : 在 Dreamweaver CS3 中 即 便 是 禁 用 了 代 码 提 示 功 能, 网 页 设 计 师 也 可 以 通 过 Ctrl+ 空 格 的 热 键 组 合, 在 代 码 视 图 中 调 出 代 码 提 示 功 能 2.6 Dreamweaver CS3 的 文 件 操 作 Dreamweaver CS3 还 提 供 了 全 面 的 文 件 管 理 面 板, 用 于 实 现 文 件 管 理 以 及 与 远 端 服 务 器 进 行 文 件 传 输 的 功 能 例 如, 通 过 适 当 的 设 置 可 以 维 持 本 地 站 点 和 远 端 站 点 之 间 的 文 件 平 行 结 构, 也 就 是 站 点 内 容 的 统 一 在 实 现 文 件 传 输 时, 如 果 远 程 服 务 器 上 不 存 在 必 要 的 文 件 夹,Dreamweaver 就 会 自 动 创 建 这 些 文 件 夹 通 过 这 种 方 式 来 实 现 本 地 和 远 端 站 点 之 间 的 文 件 同 步 功 能 Dreamweaver 还 简 化 了 站 点 上 的 协 作 功 能 通 过 简 单 的 设 置 就 可 以 在 远 端 服 务 器 中 存 回 和 取 出 文 件, 使 得 所 有 开 发 人 员 都 能 够 实 时 了 解 各 个 文 件 的 处 理 进 度 并 根 据 需 要 对 所 属 的 站 点 文 件 添 加 设 计 备 注, 以 便 与 他 人 了 解 文 件 的 共 享 状 态 等 Dreamweaver CS3 所 增 添 的 工 作 流 程 报 告 功 能, 可 以 在 自 己 的 站 点 上 运 行 报 告, 查 看 有 关 文 件 存 回 取 出 状 态 的 信 息, 并 收 集 附 加 到 文 件 的 设 计 备 注 中 文 件 面 板 中 提 供 了 所 有 的 文 件 操 作, 例 如 打 开 文 件 更 改 文 件 名 添 加 与 删 除 文 件 等 由 于 这 些 文 件 操 作 的 方 法 都 大 同 小 异, 下 面 就 以 重 命 名 文 件 或 文 件 夹 来 说 明 这 些 操 作 的 具 体 操 作 步 骤

18 (1) 在 窗 口 主 菜 单 下 选 中 文 件 子 菜 单, 打 开 文 件 面 板 在 右 侧 下 拉 列 表 框 中 可 以 选 择 本 地 视 图 远 程 视 图 测 试 服 务 器 或 是 地 图 视 图 来 查 看 对 应 站 点 的 文 件 结 构, 如 图 2.16 所 示 (2) 选 定 要 操 作 的 对 象 后, 在 文 件 列 表 框 中 就 会 以 高 亮 形 式 显 示 右 击 该 文 件, 选 择 编 辑 分 支, 选 择 重 命 名 命 令, 来 更 改 文 件 名, 如 图 2.17 所 示 图 2..16 文 件 面 板 图 2..17 文 件 重 命 名 操 作 (3) 输 入 要 更 改 的 新 文 件 名, 按 回 车 键, 会 弹 出 更 新 文 件 对 话 框 Dreamweaver 会 检 索 出 站 点 中 所 有 与 之 前 操 作 对 象 相 关 联 的 所 有 文 件, 要 求 网 页 设 计 师 选 择 是 否 进 行 自 动 更 新 操 作, 如 图 2.18 所 示 图 2..18 更 新 文 件 2.7 Dreamweaver CS3 的 快 捷 键 要 成 为 一 个 合 格 的 网 页 设 计 师,Dreamweaver CS3 的 熟 练 使 用 者, 必 须 拥 有 一 定 的 软 件 操 作 熟 练 度 来 保 证 实 际 开 发 效 率 而 使 用 快 捷 键 将 是 一 个 行 之 有 效 的 方 法, 下 面 就 提 供 了 最 常 用 的 快 捷 键 列 表, 如 表 2.1 所 示 表 2.1 Dreamweaver 快 捷 键 列 表 快 捷 键 Ctrl+F/H Shift+Enter Ctrl+F2 Ctrl+F3 F4 F5 F7 F8 功 能 说 明 调 出 查 找 / 替 换 对 话 框 插 入 一 个 换 行 (Line break) 显 示 / 隐 藏 Object 面 板 显 示 / 隐 藏 属 性 面 板 显 示 / 隐 藏 浮 动 窗 口 显 示 站 点 文 件 列 表 调 出 Styles 窗 口 调 出 Behaviors 窗 口

第 2 章 网 站 开 发 工 具 19 F9 F10 F11 F12 Ctrl+Tab Ctrl+U Ctrl+J Ctrl+E Ctrl+ 双 击 Ctrl+Shift+S Ctrl+Shift+I Ctrl+Alt+Shift+R Ctrl+Alt+Shift+G Ctrl+Shift+C Ctrl+Shift+V Ctrl+T Ctrl+Shift+Space 调 出 历 史 窗 口 启 动 HTML 源 代 码 编 辑 器 调 出 图 层 窗 口 在 主 浏 览 器 中 浏 览 页 面 文 档 窗 口 与 HTML 检 查 器 间 切 换 调 出 参 数 选 择 (Preferences) 对 话 框 调 出 页 面 属 性 (Page Properties) 对 话 框 启 动 外 部 编 辑 器 在 Dreamweaver 中 打 开 链 接 对 象 文 档 保 存 所 有 打 开 文 档 隐 藏 / 显 示 不 可 见 元 素 显 示 / 隐 藏 标 尺 显 示 / 隐 藏 网 格 只 复 制 文 本, 不 复 制 HTML 标 记 只 粘 贴 文 本, 不 粘 贴 HTML 标 记 快 速 标 签 编 辑 器, 连 续 按 可 切 换 编 辑 方 式 生 成 一 个 non-breaking 空 格 2.8 学 会 使 用 Dreamweaver CS3 的 帮 助 帮 助 菜 单 中 的 联 机 帮 助 系 统 提 供 了 有 关 使 用 Dreamweaver CS3 可 执 行 任 务 的 详 细 信 息 初 学 者 可 以 在 帮 助 文 件 中 执 行 全 文 搜 索, 找 到 想 解 决 的 问 题 的 相 关 帮 助 信 息, 具 体 步 骤 如 下 (1) 单 击 帮 助 Dreamweaver 帮 助 命 令, 打 开 Adobe Help Viewer 窗 口, 如 图 2.19 所 示 (2) 单 击 索 引 标 签, 选 择 索 引 首 字 母 系 统 将 显 示 所 有 的 以 该 字 母 开 始 的 主 题 选 中 要 查 看 的 主 题, 单 击 显 示 按 钮, 在 窗 口 右 侧 就 会 显 示 该 主 题 的 明 细 内 容, 如 图 2.20 所 示 图 2.19 Adobe Help Viewer 窗 口 图 2..20 帮 助 全 文 搜 索