Microsoft Word - 04.doc

第 4 章 Dreamweaver 基 础 应 用 在 Dreamweaver 中, 创 建 网 页 非 常 简 单 用 户 只 要 熟 悉 Word 文 档 的 编 写, 就 可 以 以 所 见 即 所 得 的 方 式, 在 网 页 中 插 入 文 本 图 像 Flash 及 超 链 接 等 内 容, 从 而 制 作 出 各 式 各 样 的 网 页 本 章 将 详 细 讲 解 如 何 在 网 页 中 插 入 各 种 资 源 4.1 插 入 文 本 文 本 是 网 页 中 的 基 础 元 素 根 据 文 本 的 作 用, 网 页 中 的 文 本 可 以 分 为 网 页 标 题 普 通 文 本 和 特 殊 字 符 三 大 类 本 节 将 详 细 讲 解 如 何 插 入 这 三 类 文 本 4.1.1 插 入 网 页 标 题 网 页 标 题 是 整 个 网 页 的 标 题 它 现 在 在 浏 览 器 的 标 题 栏 上 设 置 合 理 的 标 题, 可 以 帮 助 读 者 通 过 标 题, 就 区 分 各 个 网 页 的 内 容 下 面 讲 解 如 何 设 置 网 页 的 标 题 (1) 启 动 Dreamweaver, 单 击 文 件 新 建 命 令, 打 开 新 建 文 档 对 话 框, 选 择 空 白 页 选 项, 然 后 在 页 面 类 型 选 项 框 选 择 HTML 选 项, 在 布 局 选 项 框 中 选 择 无 选 项, 如 图 4.1 所 示 图 4.1 新 建 文 档 对 话 框 (2) 单 击 创 建 按 钮,Dreamweaver 创 建 一 个 空 白 的 页 面, 如 图 4.2 所 示

34 图 4.2 设 计 视 图 (3) 单 击 工 具 栏 上 的 代 码 按 钮, 切 换 到 代 码 视 图, 如 图 4.3 所 示 代 码 视 图 中, 显 示 了 Dreamweaver 自 动 添 加 的 一 些 HTML 基 本 代 码 如 果 设 计 视 图 中 没 有 打 开 文 档 工 具 栏, 可 以 单 击 查 看 工 具 栏 文 档 命 令, 显 示 文 档 工 具 栏, 如 图 4.4 所 示 图 4.3 代 码 视 图 图 4.4 文 档 工 具 栏 (4) 在 标 题 文 本 框 中 输 入 网 页 的 标 题, 例 如 第 一 个 网 页 用 户 页 可 以 单 击 属 性 面 板 上 的 页 面 属 性 按 钮, 打 开 页 面 属 性 对 话 框, 如 图 4.5 所 示 单 击 标 题 / 编 码 选 项, 然 后 在 标 题 文 本 框 中 输 入 标 题, 在 编 码 下 拉 列 表 框 中 选 择 简 体 中 文 (GB2312) 选 项, 如 图 4.6 所 示

第 3 章 网 站 的 创 建 与 管 理 35 图 4.5 页 面 属 性 对 话 框 图 4.6 设 置 标 题 (5) 选 择 文 件 保 存 命 令, 打 开 另 存 为 对 话 框 在 文 件 名 文 本 框 中 输 入 网 页 名 称, 如 test (6) 单 击 保 存 按 钮, 将 网 页 保 存 到 存 放 网 页 文 件 的 文 件 夹 中 (7) 在 浏 览 器 中 打 开 该 页 面, 如 图 4.7 所 示 可 见 该 网 页 的 标 题 是 刚 才 输 入 的 标 题, 但 是 网 页 正 文 还 是 空 的 图 4.7 浏 览 网 页 4.1.2 插 入 普 通 文 本 网 页 中 文 本 内 容 是 内 容 表 达 的 主 要 方 式 根 据 输 入 方 式 的 不 同, 可 以 分 为 普 通 文 本 和 特 殊 字 符 本 小 节 首 先 讲 解 普 通 文 本 的 插 入 普 通 文 本 就 是 使 用 者 可 以 在 网 页 文 档 中 按 照 文 本 方 式 直 接 输 入 的 文 本 操 作 步 骤 如 下 所 示 (1) 打 开 上 一 小 节 创 建 的 网 页, 在 设 计 视 图 中, 单 击 页 面 空 白 处, 输 入 文 字 秋 日 (5) 选 中 秋 日, 单 击 属 性 面 板 的 字 体 下 拉 列 表 框, 选 择 宋 体 选 项 如 果 下 列 列 表 中 没 有 该 选 项, 则 单 击 编 辑 字 体 列 表 选 项, 打 开 编 辑 字 体 列 表 对 话 框, 添 加 字 体, 如 图 4.8 所 示 (6) 单 击 大 小 下 拉 列 表 框, 选 择 24, 字 体 设 置 效 果 如 图 4.9 所 示

36 图 4.8 编 辑 字 体 列 表 图 4.9 更 改 文 字 大 小 (7) 单 击 回 车 键, 输 入 其 他 文 本, 在 输 入 文 本 的 过 程 中, 也 可 以 在 属 性 面 板 对 字 体 大 小 和 颜 色 等 进 行 设 置, 最 终 页 面 如 图 4.10 所 示 (8) 完 成 文 本 输 入 后, 选 择 文 件 另 存 为 命 令, 保 存 网 页 为 test1.html (9) 在 浏 览 器 中 打 开 该 文 档, 网 页 显 示 效 果 如 图 4.11 所 示 图 4.10 输 入 普 通 文 本 图 4.11 网 页 最 终 效 果 4.1.3 插 入 特 殊 字 符 在 网 页 中, 设 计 人 员 还 经 常 需 要 插 入 一 些 特 殊 字 符, 如 版 权 符 号 这 些 特 殊 字 符 在 HTML 中 以 名 称 或 数 字 的 形 式 表 示 例 如, 版 权 符 号 表 示 版 权 声 明, 在 HTML 中 用 © 表 示 ; 注 册 商 标 符 号 表 示 注 册 商 标 声 明, 在 HTML 中 用 ® 表 示 插 入 特 殊 符 号 的 操 作 如 下 所 示 (1) 新 建 一 个 空 白 文 档 在 设 计 视 图 中, 单 击 网 页 空 白 处

第 3 章 网 站 的 创 建 与 管 理 37 (2) 输 入 版 权 的 文 字, 如 图 4.12 所 示 (3) 将 光 标 插 入 到 Copyright 之 后, 单 击 插 入 面 板 的 文 本 标 签, 打 开 文 本 工 具 栏, 如 图 4.13 所 示 图 4.12 输 入 版 权 文 字 图 4.13 文 本 工 具 栏 (4) 单 击 工 具 栏 末 端 的 倒 三 角 按 钮, 选 择 版 权 命 令, 弹 出 信 息 提 示 对 话 框 该 对 话 框 提 示 特 殊 符 号 是 否 支 持, 如 图 4.14 所 示 单 击 确 定 按 钮, 关 闭 该 对 话 框 插 入 版 权 符 号 完 成, 如 图 4.15 所 示 图 4.14 Dreamweaver 对 话 框 图 4.15 插 入 版 权 符 号 (5) 单 击 代 码 标 签, 切 换 到 代 码 视 图 可 以 看 到 版 权 符 号 的 HTML 代 码, 如 图 4.16 所 示

38 (6) 保 存 网 页 打 开 该 文 件, 最 终 效 果 如 图 4.17 所 示 图 4.16 版 权 符 号 实 体 代 码 图 4.17 版 权 符 号 单 击 文 本 工 具 栏 的 倒 三 角 按 钮, 选 择 其 他 字 符 命 令, 弹 出 插 入 其 他 字 符 对 话 框, 如 图 4.18 所 示 在 该 对 话 框 中, 显 示 了 Dreamweaver 可 以 支 持 的 特 殊 字 符 单 击 所 需 的 字 符, 然 后 单 击 确 定 按 钮, 就 可 以 将 选 择 的 字 符 插 入 到 页 面 图 4.18 插 入 其 他 字 符 对 话 框 4.2 设 置 文 本 样 式 在 前 面 小 节 的 实 例 中, 输 入 的 唐 诗 只 是 采 用 了 普 通 文 本, 而 在 实 际 的 生 活 中, 各 种 各 样 的 文 本 需 要 设 置 不 同 的 字 体 字 号 颜 色 样 式 等, 这 样 才 能 更 好 地 准 确 无 误 地 传 达 文 字 所 要 表 达 的 信 息

第 3 章 网 站 的 创 建 与 管 理 39 4.2.1 设 置 标 题 和 段 落 格 式 网 页 中 的 默 认 存 在 6 种 标 题 它 们 依 次 为 标 题 1 标 题 2 标 题 3 标 题 4 标 题 5 和 标 题 6 使 用 这 些 标 题, 可 以 标 注 文 本 内 容 的 不 同 层 次 而 段 落 格 式 是 对 整 个 文 档 进 行 设 置, 使 文 档 更 便 于 阅 读 设 置 标 题 和 段 落 格 式 需 要 使 用 属 性 面 板 的 格 式 下 拉 列 表 操 作 过 程 如 下 所 示 (1) 新 建 空 白 网 页 在 设 计 视 图 中, 单 击 网 页 空 白 处 (2) 输 入 几 段 文 字, 效 果 如 图 4.19 所 示 (3) 选 中 第 1 行 文 本 单 击 格 式 下 拉 列 表 框, 选 择 标 题 1 选 项 设 置 后 的 效 果 如 图 4.20 所 示 图 4.19 输 入 所 需 的 文 字 图 4.20 更 改 为 标 题 1 格 式 (4) 选 择 文 字 夏 天 单 击 格 式 下 拉 列 表, 选 择 标 题 2 选 项, 效 果 如 图 4.21 所 示 (5) 重 复 以 上 操 作, 依 次 设 置 秋 天 和 冬 天 的 格 式 为 标 题 3 和 标 题 4 最 终 效 果 如 图 4.22 所 示 图 4.21 更 改 为 标 题 2 格 式 图 4.22 加 入 了 标 题 格 式 的 网 页

40 4.2.2 设 置 文 本 字 号 设 置 标 题 和 段 落 格 式, 都 是 从 整 体 的 角 度 设 置 文 本 样 式 设 计 人 员 可 以 具 体 设 置 文 本 的 细 节, 如 文 本 所 使 用 的 字 体 和 字 号 在 Dreamweaver 中, 字 号 的 大 小 默 认 的 有 无 1-36 极 小 - 极 大 等 其 中 的 数 值 越 大 字 号 就 越 大 操 作 步 骤 如 下 所 示 (1) 新 建 空 白 网 页 在 设 计 视 图 中, 单 击 网 页 空 白 处 (2) 输 入 几 段 文 字, 效 果 如 图 4.23 所 示 (3) 选 择 文 字 Office 帮 助 的 使 用 文 字 打 开 属 性 面 板, 在 字 体 下 拉 列 表 框 中, 选 择 宋 体 选 项 在 大 小 下 拉 列 表 框 中 选 择 36 选 项 将 文 字 设 置 为 宋 体, 字 体 大 小 为 36 (4) 选 中 文 字 以 上 内 容 都 不 合 适, 请 从 Web 上 查 看 更 多 的 帮 助, 设 置 该 文 字 字 体 为 宋 体, 字 体 大 小 为 16, 并 单 击 加 粗 按 钮 最 终 页 面 效 果 如 图 4.24 所 示 图 4.23 插 入 文 本 图 4.24 文 字 字 体 调 整 4.2.3 设 置 文 本 字 体 不 同 字 体 给 人 带 来 的 感 觉 不 同 在 Dreamweaver 中, 设 计 人 员 仅 仅 使 用 了 宋 体 黑 体 等 常 见 的 字 体 如 果 要 使 页 面 的 文 字 更 贴 近 网 页 设 计 者 所 设 计 的 网 页 风 格, 有 时 候 就 必 须 要 添 加 新 的 字 体 要 在 Dreamweaver 中 使 用 新 字 体, 必 须 确 保 该 字 体 已 经 安 装 到 Windows 的 字 体 中 安 装 字 体 的 步 骤 如 下 : (1) 选 择 需 要 安 装 字 体 文 件, 一 般 字 体 文 件 后 缀 名 为.TTF (2) 复 制 该 字 体 文 件 到 系 统 目 录 中 的 Fonts 目 录 下 复 制 过 程 中, 系 统 会 提 示 正 在 安 装 字 体 文 件 安 装 完 成 后, 就 可 以 使 用 该 字 体 了 (3) 打 开 属 性 面 板 单 击 字 体 下 拉 列 表 框 中 的 编 辑 字 体 列 表 命 令, 打 开 编 辑 字 体 列 表 对 话 框, 如 图 4.25 所 示 (4) 在 可 用 字 体 列 表 框 中 选 择 要 添 加 的 字 体 名 称, 如 新 宋 体 单 击 添 加 字 体 按 钮, 将 选 定 字 体 添 加 到 选 择 的 字 体 列 表 框 中, 如 图 4.26 所 示 如 果 要 删 除 该 字 体, 在 选 择 的 字 体 列 表 框 中 选 择 该 字 体, 然 后 单 击 删 除 字 体 按 钮

第 3 章 网 站 的 创 建 与 管 理 41 图 4.25 编 辑 字 体 列 表 对 话 框 图 4.26 添 加 新 字 体 (5) 单 击 加 号 按 钮, 在 字 体 列 表 列 表 框 中 添 加 一 行, 用 以 添 加 新 的 字 体 如 果 不 单 击 加 号 按 钮, 那 么 一 次 只 能 添 加 一 个 字 体 单 击 减 号 按 钮, 可 以 在 字 体 列 表 列 表 框 中 删 除 所 选 的 字 体 单 击 上 三 角 按 钮 和 下 三 角 按 钮, 可 以 对 字 体 列 表 的 次 序 进 行 更 改 (6) 单 击 确 定 按 钮, 关 闭 当 前 对 话 框, 所 添 加 的 字 体 已 经 出 现 在 字 体 下 拉 列 表 框 中 ( 注 意 : 在 网 页 中 设 置 字 体 时, 需 要 考 虑 用 户 的 计 算 机 上 是 否 安 装 相 应 的 字 体 如 果 没 有 安 装, 将 使 用 其 他 字 体 进 行 替 代 所 以, 设 置 字 体 的 时 候 需 要 考 虑 字 体 应 用 的 普 遍 性 对 于 特 殊 的 效 果 的 文 字, 可 以 使 用 图 片 的 形 式 代 替 文 本 4.2.4 设 置 文 本 颜 色 在 网 页 中, 文 本 的 颜 色 包 括 文 本 内 容 的 背 景 色 和 文 字 字 体 颜 色 通 过 设 置 文 本 颜 色, 可 以 提 高 文 本 内 容 的 视 觉 效 果, 降 低 阅 读 疲 劳 默 认 情 况 下, 文 本 的 背 景 色 为 白 色, 文 字 字 体 颜 色 为 黑 色 下 面 讲 解 如 何 设 置 文 本 的 颜 色 (1) 新 建 空 白 网 页 在 设 计 视 图 中, 单 击 网 页 空 白 处 输 入 几 段 文 字 (2) 打 开 属 性 面 板, 单 击 页 面 属 性 按 钮, 打 开 页 面 属 性 对 话 框, 如 图 4.27 所 示 图 4.27 页 面 属 性 对 话 框 (3) 在 背 景 颜 色 文 本 框 中 输 入 #9966CC, 在 文 本 颜 色 对 话 框 中 输 入 #000033 注 意 不 要 漏 掉 其 中 的 # 用 户 可 以 单 击 前 面 的 小 按 钮, 弹 出 颜 色 选 择 框 进 行 颜 色 选 择 (4) 单 击 确 定 按 钮, 关 闭 对 话 框 这 时 页 面 效 果 如 图 4.28 所 示 (5) 选 中 Office 帮 助 的 使 用 文 字, 单 击 属 性 面 板 中 的 颜 色 设 定 按 钮, 弹 出 选 择

42 颜 色 对 话 框, 如 图 4.29 所 示 图 4.28 设 定 文 字 颜 色 效 果 图 429 选 择 颜 色 对 话 框 (6) 选 择 一 个 颜 色 最 终 网 页 效 果 如 图 4.30 所 示 图 4.30 整 体 效 果 4.3 设 置 文 本 列 表 使 用 文 本 列 表 可 以 将 多 个 短 小 的 内 容 并 列 起 来, 并 添 加 各 种 并 列 编 号 这 样 方 便 用 户 的 浏 览, 降 低 用 户 的 视 觉 疲 劳 本 节 将 讲 解 文 本 列 表 的 类 型 和 设 置 方 法

第 3 章 网 站 的 创 建 与 管 理 43 4.3.1 文 本 列 表 的 类 型 文 本 列 表 根 据 每 段 文 字 之 间 是 否 有 先 后 次 序, 可 以 分 为 有 序 列 表 和 无 序 列 表 两 种 有 序 列 表 中 的 每 段 文 字 之 间 具 有 明 确 的 先 后 关 系, 并 列 编 号 常 常 是 阿 拉 伯 数 字 罗 马 数 字 和 英 文 字 母 等 序 号 无 序 列 表 中 的 各 段 文 字 没 有 先 后 次 序, 通 常 使 用 如 正 方 形 菱 形 等 符 号 作 为 列 表 的 并 列 编 号 图 4.31 和 图 4.32 显 示 了 有 序 列 表 和 无 序 列 表 图 4.31 有 序 列 表 图 4.32 无 序 列 表 4.3.2 添 加 文 本 列 表 当 存 在 大 量 并 列 关 系 的 文 本 内 容 时, 使 用 列 表 可 以 增 加 文 本 内 容 的 条 理 性 在 Dreamweaver 中, 创 建 文 本 列 表 过 程 如 下 所 示 (1) 新 建 一 个 空 白 网 页, 输 入 文 字 内 容, 如 图 4.33 所 示 (2) 选 择 下 面 的 几 个 项 目, 然 后 单 击 文 本 列 表 编 号 列 表 命 令, 建 立 一 个 有 序 列 表, 如 图 4.34 所 示

44 图 4.33 键 入 文 字 图 4.34 建 立 有 序 列 表 (3) 在 网 页 中 输 入 另 一 段 文 字, 如 图 4.35 所 示 (4) 选 中 刚 刚 输 入 的 文 字, 单 击 文 本 列 表 项 目 列 表 命 令, 将 选 中 的 文 字 成 为 项 目 列 表, 如 图 4.36 所 示 图 4.35 键 入 文 字 图 4.36 创 建 项 目 列 表 4.3.3 设 置 文 字 列 表 的 并 列 编 号 添 加 文 本 列 表 后, 默 认 只 有 一 种 前 缀 在 建 立 项 目 列 表 之 后, 往 往 还 需 要 设 置 列 表 的 编 号 形 式 设 置 操 作 步 骤 如 下 所 示 (1) 打 开 上 一 节 创 建 的 网 页, 将 光 标 插 入 到 篮 球 文 字 后 (2) 单 击 文 本 列 表 属 性 命 令, 打 开 列 表 属 性 对 话 框, 如 图 4.37 所 示 图 4.37 列 表 属 性 对 话 框 (3) 在 样 式 下 拉 列 表 框 中 选 择 小 写 罗 马 字 母 选 项, 如 果 要 更 改 开 始 基 数, 还 可 以 在 开 始 计 数 文 本 框 中 输 入 开 始 计 数 的 数 字 (4) 单 击 确 定 按 钮, 关 闭 对 话 框 网 页 界 面 如 图 4.38 所 示 (5) 将 光 标 插 入 到 足 球 文 字 后, 单 击 属 性 面 板 中 的 列 表 项 目 按 钮, 打 开 列 表 属 性 对 话 框, 在 样 式 下 拉 列 表 框 中 选 择 正 方 形 选 项 (6) 单 击 确 定 按 钮, 关 闭 对 话 框, 页 面 如 图 4.39 所 示

第 3 章 网 站 的 创 建 与 管 理 45 图 4.38 更 改 有 序 列 表 属 性 图 4.39 更 改 无 序 列 表 属 性 4.4 插 入 图 片 除 了 文 本, 网 页 中 另 外 一 个 重 要 的 表 现 元 素 是 图 片 合 理 的 使 用 图 片, 可 以 使 网 页 美 观 生 动, 而 且 富 有 生 机 采 用 图 片 的 形 式, 可 以 提 交 浏 览 者 获 取 信 息 的 速 度, 但 也 会 加 大 网 页 数 据 的 传 输 量 本 节 将 介 绍 如 何 插 入 和 设 置 图 片 4.2.1 插 入 图 片 网 页 中, 常 用 的 图 片 格 式 包 括 GIF JPG PNG 用 户 可 以 在 文 本 段 落 中 表 格 内 表 单 和 层 中 插 入 图 片 而 插 入 的 图 像 可 以 是 本 地 磁 盘 中 的 图 片, 也 可 以 是 网 络 图 片 如 果 选 择 的 图 片 文 件 不 在 站 点 内, 系 统 就 会 提 示 是 否 将 图 像 复 制 到 站 点 内 这 时, 需 要 单 击 是 按 钮 否 则, 网 页 上 传 服 务 器 后, 图 像 将 不 会 显 示 插 入 图 片 的 操 作 如 下 所 示 (1) 新 建 一 个 空 白 网 页, 并 单 击 网 页 的 空 白 处 单 击 插 入 记 录 图 像 命 令, 弹 出 选 择 图 像 源 文 件 对 话 框, 如 图 4.40 所 示

46 图 4.40 选 择 图 像 源 文 件 对 话 框 (2) 在 选 择 图 像 源 文 件 对 话 框 中, 选 择 好 需 要 的 图 像 文 件, 单 击 确 定 按 钮, 图 像 即 被 插 入 到 页 面 中 插 入 图 像 后, 再 单 击 图 片, 打 开 属 性 面 板, 如 图 4.41 所 示 在 该 面 板 中, 可 以 对 图 片 的 各 项 属 性 进 行 设 置 设 置 操 作 如 下 所 示 图 4.41 属 性 面 板 (1) 在 缩 略 图 右 侧 文 本 框 中, 输 入 图 片 的 名 称 由 于 该 名 称 用 于 客 户 端 脚 本 编 程, 所 以 尽 量 使 用 英 文 名 称 (2) 在 宽 文 本 框 中 输 入 图 片 显 示 的 宽 度 在 高 文 本 框 中 输 入 图 片 的 显 示 高 度 源 文 件 文 本 框 中 显 示 该 图 片 的 路 径 该 路 径 通 常 不 用 修 改 链 接 文 本 框 通 常 用 来 设 置 图 片 的 链 接 (3) 在 替 换 文 本 框 中, 输 入 图 片 的 说 明 文 字 这 样, 当 图 片 无 法 显 示 时, 将 显 示 说 明 文 字 这 样, 用 户 即 使 看 不 到 图 片, 也 可 以 图 片 所 表 示 的 信 息 4.2.2 设 置 图 片 为 网 页 背 景 使 用 图 片 作 为 背 景, 可 以 赋 予 整 个 网 页 明 确 的 主 题, 提 升 网 页 的 美 感 设 置 网 页 背 景 图 片 时, 需 要 控 制 图 片 文 件 的 大 小 如 果 文 件 太 大, 用 户 看 完 网 页, 才 显 示 图 片, 就 无 法 起 到 背 景 图 片 应 有 的 作 用 了 设 置 网 页 背 景 图 片 的 操 作 如 下 所 示 (1) 新 建 一 个 空 白 网 页 (2) 单 击 属 性 面 板 中 的 页 面 属 性 按 钮, 打 开 页 面 属 性 对 话 框, 如 图 4.42 所 示 (3) 单 击 背 景 图 像 文 本 框 后 的 浏 览 按 钮, 选 择 背 景 图 像 文 件 (4) 单 击 确 定 按 钮, 关 闭 对 话 框 保 存 网 页, 在 浏 览 器 中 预 览 网 页, 效 果 如 图 4.43 所 示 图 4.42 页 面 属 性 对 话 框 图 4.43 添 加 页 面 背 景 的 效 果 图

第3章 47 网站的创建与管理 4.2.3 设置鼠标经过图片 鼠标经过图像也被称为翻转图像 当鼠标指向网页中的一个图片时 图片自动显示为另一种效果 使用这种效果 可以引起用户的注意力 帮助用户进行鼠标定位 翻转图像的实质就是在两张图片之间 进行切换 所以实现该效果 需要准备必须准备两个不同的图片 一个是正常显示的图片 另一个是鼠 标移动到图像上显示的图片 设置鼠标经过图片的操作如下所示 1 新建一个空白网页 单击网页空白处 2 单击 插入记录 图像对象 鼠标经过图像 命令 打开 插入鼠标经过图像 对话框 如图 4.44 所示 图 4.44 插入鼠标经过图像 对话框 3 单击 原始图像 文本框后的 浏览 按钮 选择第 1 幅图片 单击 鼠标经过图像 文本 框后的 浏览 按钮 选择第 2 幅图片 4 在 替换文本 文本框中输入文字 鼠标经过图像 在 按下时 前往的 URL 文本框中 输入 http://www.sina.com.cn 5 单击 确定 按钮 添加成功 保存网页 在浏览器中预览 鼠标移到图片上前后效果对比 如图 4.45 和图 4.46 所示 图 4.45 鼠标在图片之外效果 图 4.46 鼠标在图片上方效果

48 4.5 插 入 Flash 动 画 Flash 动 画 是 网 上 最 流 行 的 动 画 形 式 由 于 其 体 积 小 色 彩 丰 富 和 放 大 不 变 形, 而 受 到 广 大 设 计 人 员 的 喜 爱 本 节 将 介 绍 如 何 插 入 Flash 动 画 和 利 用 Flash 模 板 快 速 设 置 Flash 功 能 4.3.1 插 入 Flash 动 画 Flash 也 是 Adobe 力 推 的 网 页 动 画 标 准 所 以,Flash 在 Dreamweaver 中, 得 到 很 好 的 支 持 用 户 可 以 直 接 在 网 页 中 插 入 Flash 动 画 插 入 Flash 影 片 的 步 骤 如 下 所 示 (1) 新 建 一 个 空 白 网 页 单 击 网 页 空 白 处 (2) 移 动 光 标 到 需 要 插 入 Flash 影 片 的 地 方, 单 击 插 入 记 录 媒 体 Flash 命 令, 在 弹 出 的 选 择 文 件 话 框 中 选 择 要 插 入 的 Flash 动 画 (3) 单 击 确 定 按 钮, 将 Flash 影 片 插 入 到 网 页 中, 效 果 如 图 4.47 所 示 图 4.47 Flash 影 片 插 件 标 记 (4) 保 存 网 页, 在 浏 览 器 中 预 览, 查 看 Flash 效 果 如 果 不 符 合 要 求, 可 以 在 属 性 面 板 中 重 新 设 置, 如 图 4.48 所 示 相 关 参 数 说 明 如 下 图 4.48 属 性 设 置 面 板 名 称 : 指 定 Flash 动 画 的 名 称 该 名 称 用 来 进 行 脚 本 调 用 宽 高 文 本 框 : 指 定 影 片 的 宽 度 和 高 度, 以 像 素 为 单 位 文 件 文 本 框 : 指 定 Flash 或 Shockwave 文 件 的 路 径 编 辑 按 钮 : 单 击 该 按 钮, 启 动 Flash 用 以 更 新.fla 文 件 如 果 计 算 机 上 没 有 安 装 Flash, 此

第 3 章 网 站 的 创 建 与 管 理 49 按 钮 将 被 禁 用 重 设 大 小 按 钮 : 单 击 该 按 钮, 将 Flash 动 画 设 置 为 初 始 大 小 循 环 复 选 框 : 选 择 该 选 项, 影 片 将 连 续 播 放 ; 如 果 没 有 选 中 该 选 项, 影 片 只 播 放 一 次 自 动 播 放 复 选 框 : 选 择 该 选 项, 在 加 载 页 面 时, 自 动 播 放 影 片 垂 直 边 距 和 水 平 边 距 文 本 框 : 指 定 影 片 上 下 左 右 间 距, 单 位 为 像 素 品 质 下 拉 列 表 : 该 选 项 用 以 设 置 Flash 动 画 播 放 的 质 量 比 例 下 拉 列 表 : 该 选 项 设 置 影 片 如 何 适 合 在 宽 度 和 高 度 文 本 框 中 设 置 的 尺 寸 默 认 值 选 项 设 置 显 示 整 个 影 片 无 边 框 选 项 设 置 影 片 适 合 设 定 的 尺 寸 严 格 匹 配 选 项 设 置 影 片 进 行 缩 放 以 适 合 设 定 的 尺 寸 对 齐 下 拉 列 表 : 该 选 项 设 置 影 片 在 页 面 上 的 对 齐 方 式 背 景 颜 色 选 项 : 设 置 影 片 区 域 的 背 景 颜 色 参 数 按 钮 : 单 击 该 按 钮, 打 开 参 数 对 话 框 在 该 对 话 框 中, 可 以 输 入 影 片 的 参 数 值 4.3.2 插 入 Flash 文 本 Flash 文 本 是 Dreamweaver 提 供 的 一 个 Flash 模 板 使 用 该 模 板, 用 户 可 以 快 速 制 作 包 含 文 本 的 动 画 插 入 Flash 文 本 的 步 骤 如 下 (1) 在 编 辑 窗 口 中, 将 光 标 定 位 在 要 插 入 Flash 文 本 的 位 置 (2) 选 择 插 入 记 录 媒 体 Flash 文 本 命 令, 弹 出 插 入 Flash 文 本 对 话 框, 如 图 4.49 所 示 图 4.49 插 入 Flash 文 本 对 话 框 字 体 下 拉 菜 单 : 选 择 设 置 文 本 字 体, 菜 单 列 出 当 前 系 统 所 有 TimeType 字 体 大 小 文 本 框 : 输 入 字 体 大 小, 默 认 单 位 为 磅 文 本 样 式 按 钮 组 : 设 置 文 体 的 粗 体 或 者 斜 体, 同 时 可 以 选 择 文 本 对 齐 方 式 : 右 对 齐 左 对 齐 居 中 和 两 端 对 齐 颜 色 文 本 框 : 设 置 文 本 颜 色

50 转 换 颜 色 文 本 框 : 设 置 鼠 标 停 在 Flash 文 本 上 的 文 本 颜 色 文 本 文 本 框 : 输 入 文 本 要 查 看 字 体 样 式 显 示 效 果, 选 择 显 示 字 体 复 选 框 链 接 文 本 框 : 输 入 链 接 文 档 的 相 对 或 者 绝 对 路 径 Flash 动 画 内 部 不 能 使 用 相 对 于 站 点 的 绝 对 历 经 如 果 使 用 相 对 于 文 档 的 相 对 路 径, 要 把 SWF 文 件 和 HTML 文 件 存 放 在 同 一 个 目 录 中 目 标 下 拉 列 表 : 如 果 已 经 输 入 了 链 接, 就 可 以 定 义 目 标 打 开 窗 口 方 式 在 目 标 下 拉 列 表 中 可 选 定 链 接 文 档 打 开 的 位 置, 可 以 选 择 框 架 或 窗 口 选 项 只 有 在 框 架 页 中 编 辑 Flash 对 象 时, 才 能 出 现 列 出 的 框 架 名 称 背 景 色 文 本 框 : 为 文 本 背 景 设 置 一 种 颜 色 另 存 为 文 本 框 : 输 入 将 要 输 入 的 Flash 电 影 的 文 件 名 可 以 使 用 默 认 值, 或 者 输 入 下 一 个 新 名 城 如 果 一 个 文 件 包 含 一 个 相 对 链 接, 必 须 在 该 文 件 保 存 到 和 HTML 相 同 的 目 录 下 (3) 参 数 设 置 如 图 4.50 所 示 单 击 应 用 按 钮 而 不 关 闭 当 前 的 对 话 框, 此 操 作 方 式 便 于 边 修 改 边 看 效 果, 可 以 在 文 档 中 看 到 插 入 对 象 的 效 果 最 后 单 击 确 定 按 钮 插 入 一 个 flash 文 本 (4) 按 F12 键 在 浏 览 器 中 预 览, 效 果 如 图 4.51 所 示 单 击 网 页 左 侧 的 导 航 按 钮, 这 些 按 钮 全 部 是 Flash 文 本 制 作 图 4.50 设 置 参 数 图 4.51 网 页 预 览 4.3.4 插 入 Flash 按 钮 Flash 按 钮 Dreamweaver 提 供 的 Flash 模 板 使 用 该 模 板, 设 计 人 员 可 以 快 速 制 作 出 所 需 要 的 Flash 按 钮, 而 避 免 了 切 换 到 Flash 中 制 作 按 钮 的 操 作 插 入 Flash 按 钮 的 操 作 如 下 所 示 (1) 新 建 一 个 空 白 页 单 击 网 页 空 白 处 (2) 将 光 标 定 位 到 要 插 入 Flash 按 钮 的 地 方, 然 后 单 击 插 入 记 录 媒 体 Flash 按 钮 命 令, 打 开 插 入 Flash 按 钮 对 话 框, 如 图 4.52 所 示 (3) 在 样 式 列 表 框 中 选 择 一 个 按 钮 样 式 在 按 钮 文 本 文 本 框 中 输 入 按 钮 文 字 登 录, 在 字 体 下 拉 列 表 框 中 选 择 宋 体 选 项, 在 大 小 文 本 框 中 输 入 12, 如 图 4.53 所 示

第 3 章 网 站 的 创 建 与 管 理 51 图 4.52 插 入 Flash 按 钮 对 话 框 图 4.53 设 置 参 数 (4) 单 击 确 定 按 钮, 弹 出 Flash 辅 助 功 能 属 性 对 话 框, 如 图 4.54 所 示 (5) 在 标 题 文 本 框 中 输 入 登 录 文 字 单 击 确 定 按 钮, 将 按 钮 插 入 网 页 (6) 单 击 确 定 按 钮, 最 终 添 加 Flash 按 钮 到 页 面, 效 果 如 图 4.55 所 示 图 4.54 Flash 辅 助 功 能 属 性 对 话 框 图 4.55 添 加 Flash 按 钮 4.3.5 插 入 FlashPaper FlashPaper 是 Adobe 推 出 的 一 款 电 子 文 档 类 工 具 使 用 该 工 具, 用 户 可 以 将 任 何 类 型 的 可 打 印 文 档 转 换 为 SWF 或 PDF 文 档 这 样, 读 者 不 需 要 安 装 原 有 文 档 的 阅 读 器, 就 可 以 通 过 网 页 查 看 文 档 内 容 了 使 用 FlashPaper 的 操 作 如 下 所 示 (1) 新 建 空 白 网 页 单 击 网 页 空 白 处 (2) 选 择 插 入 记 录 媒 体 FlashPaper 命 令, 打 开 插 入 FlashPaper 对 话 框, 如 图 4.56 所 示 (3) 单 击 浏 览 按 钮, 打 开 选 择 文 件 对 话 框, 选 择 需 要 打 开 的 文 件 (4) 可 以 在 插 入 FlashPaper 对 话 框 中 设 置 FlashPaper 的 高 度 和 宽 度 文 本 框 单 击 确 定 按 钮, 弹 出 对 象 标 签 辅 助 功 能 属 性 对 话 框, 如 图 4.57 所 示

52 图 4.56 插 入 FlashPaper 对 话 框 图 4.57 对 象 标 签 辅 助 功 能 属 性 对 话 框 (5) 在 标 题 文 本 框 中, 设 定 Flash 的 标 题 单 击 确 定 按 钮, 在 Dreamweaver 编 辑 窗 口 中 插 入 一 个 FlashPaper 按 F12 键, 可 在 浏 览 器 中 浏 览 4.3.6 插 入 Flash 视 频 Flash 视 频 是 现 有 网 络 应 用 最 广 的 视 频 格 式 使 用 Flash 视 频, 无 需 特 殊 技 术 知 识, 就 可 以 将 视 频 添 加 到 网 页 把 Flash 视 频 插 入 网 页 中, 只 要 用 户 浏 览 器 中 安 装 FlashPlayer, 用 户 可 以 立 即 浏 览 网 页 中 插 入 的 Flash 视 频 插 入 Flash 视 频 操 作 如 下 所 示 单 击 插 入 媒 体 Flash 视 频 命 令, 提 示 用 户 先 保 存 网 页, 然 后 打 开 插 入 Flash 视 频 对 话 框, 如 图 4.58 所 示 视 频 类 型 下 拉 列 表 : 设 置 视 频 下 载 类 型, 包 括 累 进 式 下 载 视 频 和 流 视 频 两 种 类 型 当 选 择 流 视 频 选 项 后, 对 话 框 变 成 如 图 4.59 所 示 图 4.58 插 入 Flash 视 频 对 话 框 图 4.59 插 入 流 视 频 服 务 器 URL 文 本 框 : 设 置 Flash 视 频 文 件 所 在 服 务 器 的 地 址 流 名 称 文 本 框 : 设 置 Flash 视 频 文 件 名 称 URL 文 本 框 : 设 置 Flash 视 频 的 文 件 地 址, 单 击 浏 览 按 钮 就 可 以 浏 览 文 件 并 选 定, 也 可 以 在 文 本 框 中 直 接 输 入 Flash 视 频 文 件 的 相 对 或 绝 对 路 径 外 观 下 拉 列 表 : 设 置 播 放 器 控 制 按 钮 的 显 示 样 式, 在 下 面 显 示 样 式 效 果

第 3 章 网 站 的 创 建 与 管 理 53 宽 度 和 高 度 文 本 框 : 设 置 Flash 视 频 的 宽 度 和 高 度 限 制 宽 高 比 复 选 框 : 根 据 外 观 设 置 Flash 视 频, 进 行 总 体 控 制 检 测 大 小 按 钮 : 单 击 该 按 钮 可 以 自 动 检 测 Flash 视 频 文 件 大 小 实 时 视 频 输 入 复 选 框 : 可 以 为 Flash 视 频 提 供 实 时 的 活 动 支 持 自 动 播 放 复 选 框 : 可 以 自 动 播 放 Flash 视 频 自 动 重 新 播 放 复 选 框 : 可 以 自 动 重 放 播 放 Flash 视 频 如 果 必 要, 提 示 用 户 下 载 Flash Player 复 选 框 : 选 中 该 复 选 框, 如 果 用 户 的 计 算 机 上 没 有 FlashPlayer, 可 以 在 网 上 自 动 下 载 缓 冲 时 间 文 本 框 : 设 置 Flash 视 频 下 载 的 缓 冲 时 间 4.3.7 插 入 Flash 相 册 Flash 相 册 是 现 有 博 客 中 最 常 用 的 功 能 在 Dreamweaver 中, 用 户 只 要 在 网 页 中 插 入 图 片 查 看 器, 设 置 好 参 数, 就 可 以 立 即 实 现 Flash 相 册 功 能, 实 现 交 互 式 幻 灯 片 演 示 效 果 插 入 图 片 查 看 器 的 步 骤 如 下 所 示 (1) 新 建 空 白 网 页 单 击 网 页 空 白 处 (2) 单 击 插 入 媒 体 媒 体 图 片 查 看 器 命 令, 弹 出 保 存 Flash 元 素 对 话 框, 如 图 4.60 所 示 (3) 选 择 位 置 后, 单 击 保 存 按 钮 Dreamweaver 自 动 生 成 一 个 SWF 文 件 (4) 单 击 插 入 网 页 内 的 SWF 动 画, 打 开 Flash 元 素 面 板, 如 图 4.61 所 示 图 4.60 保 存 Flash 元 素 对 话 框 图 4.61 Flash 元 素 面 板 (6) 单 击 imageurls 参 数, 可 以 通 过 单 击 右 下 方 的 编 辑 图 标 来 选 择 网 站 根 目 录 下 的 图 片 (7) 参 数 设 置 好 后, 在 属 性 面 板 上 单 击 播 放 按 钮 可 以 观 看 图 像 查 看 器 效 果, 如 图 4.62 所 示

54 图 4.62 图 片 查 看 器 最 终 效 果 4.6 插 入 其 他 视 频 或 音 频 文 件 除 Flash 格 式 的 音 频 和 视 频 文 件 外, 网 页 中 还 经 常 使 用 一 些 其 他 格 式 的 多 媒 体 文 件, 如 WMV 的 视 频 文 件 WAV 的 音 频 文 件 4.6.1 插 入 WMV 影 片 WMV 格 式 是 微 软 推 出 的 一 种 视 频 格 式 该 类 文 件 具 有 较 高 的 压 缩 率 和 流 畅 的 播 放 效 果 很 多 视 频 网 站 都 使 用 这 种 格 式 因 为 这 类 视 频 文 件 往 往 采 用 了 不 同 的 压 缩 算 法, 所 以 不 能 直 接 在 浏 览 器 中 进 行 播 放, 需 要 借 助 于 外 部 的 程 序 这 些 程 序 被 称 为 插 件 下 面 讲 解 如 何 在 网 页 中 插 入 WMV 影 片 (1) 新 建 一 个 空 白 网 页 (2) 定 位 光 标 到 需 要 插 入 影 片 的 地 方, 单 击 插 入 记 录 媒 体 插 件 命 令, 打 开 选 择 文 件 对 话 框, 如 图 4.63 所 示

第 3 章 网 站 的 创 建 与 管 理 55 图 4.63 选 择 文 件 对 话 框 (3) 选 择 文 件, 单 击 确 定 按 钮, 网 页 中 将 显 示 一 个 插 件 图 标 (4) 选 中 该 图 标, 在 属 性 面 板 中 设 置 属 性 值 (5) 保 存 文 档, 在 浏 览 器 中 预 览 4.6.2 插 入 ActiveX 控 件 ActiveX 控 件 是 用 来 增 强 软 件 的 功 能 和 提 高 代 码 的 复 用 性 ActiveX 控 件 技 术 插 入 网 页 后, 提 供 了 不 受 浏 览 器 限 制 的 交 互 的 能 力 ActiveX 技 术 由 微 软 提 出, 被 Internet Explore 浏 览 器 所 支 持 其 他 浏 览 器 支 持 该 技 术 并 不 好 在 网 页 中 插 入 ActiveX 控 件 的 步 骤 如 下 : (1) 新 建 一 个 空 白 网 页 单 击 网 页 空 白 处 (2) 选 择 插 入 媒 体 媒 体 ActiveX 命 令, 在 编 辑 窗 口 中 插 入 一 个 ActiveX 控 件 (3) 选 中 ActiveX 控 件, 然 后 在 属 性 面 板 中 设 置 ActiveX 控 件 属 性, 如 图 4.64 所 示 图 4.64 ActiveX 属 性 面 板 ActiveX 名 称 文 本 框 : 设 置 ActiveX 控 件 的 名 称, 以 便 在 脚 本 中 能 够 引 用 宽 和 高 文 本 框 : 设 置 ActiveX 控 件 的 宽 度 和 高 度, 默 认 以 像 素 为 单 位 也 可 以 设 置 为 pc( 十 二 点 活 字 ) pt( 点 ) in( 英 寸 ) mm( 毫 米 ) cm( 厘 米 ) 或 者 %( 相 对 于 父 对 象 的 宽 度 和 告 诉 的 百 分 比 0, 缩 写 形 式 的 单 位 与 前 面 的 数 值 之 间 不 能 有 空 格, 如 10mm ClassID 下 拉 列 表 : 为 浏 览 器 识 别 ActiveX 控 件, 可 输 入 或 选 择 一 个 值 在 加 载 页 面 时, 浏 览 器 使 用 该 类 ID 来 确 定 与 该 页 面 相 关 联 的 ActiveX 控 件 所 需 的 ActiveX 控 件 的 位 置 如 果 浏 览 器 没 有 找 到 指 定 的 ActiveX 控 件, 它 将 尝 试 从 基 址 指 定 的 位 置 中 下 载 如 果 选 择 ClassID 下 拉 列 表 中 的 Shockwave for Director 6, 则 ActiveX 属 性 面 板 将 变 成 Shockwave

56 属 性 面 板, 可 直 接 对 Shockwave 电 影 的 属 性 进 行 设 置 如 果 选 择 ClassID 下 拉 列 表 中 的 Shockwave for Flash, 则 ActiveX 属 性 面 板 变 成 Flash 属 性 面 板, 可 直 接 对 Flash 动 画 的 属 性 进 行 设 置 对 齐 下 拉 列 表 : 设 置 ActiveX 控 件 和 页 面 的 对 齐 方 式 包 括 10 个 选 项, 详 细 介 绍 参 见 前 面 的 章 节 嵌 入 复 选 框 : 选 中 该 复 选 框, 则 把 ActiveX 控 件 同 时 设 置 称 插 件, 可 被 Netscape Communicator 浏 览 器 所 支 持 Dreamweaver 把 用 户 给 ActiveX 控 件 属 性 输 入 的 值 同 时 分 配 给 等 效 的 Netscape Communicator 插 件 源 文 件 文 本 框 : 设 置 用 于 插 件 的 数 据 文 件, 如 果 没 有 设 置, 则 Dreamweaver 将 根 据 已 输 入 的 ActiveX 属 性 确 定 该 值 垂 直 边 距 和 水 平 边 距 文 本 框 : 设 置 ActiveX 控 件 的 上 下 左 右 与 其 他 元 素 的 距 离 基 址 文 本 框 : 设 置 ActiveX 控 件 的 地 址 如 果 浏 览 者 的 系 统 中 未 按 章 ActiveX 控 件, 则 浏 览 器 从 这 个 地 址 下 载 它 如 果 没 有 设 置 基 址 文 本 框, 则 浏 览 者 未 安 装 相 应 的 ActiveX 控 件, 则 浏 览 器 无 法 显 示 ActiveX 对 象 编 号 文 本 框 : 设 置 ActiveX 控 件 的 编 号 数 据 文 本 框 : 未 ActiveX 控 件 指 定 数 据 文 件, 很 多 类 ActiveX 控 件 不 需 要 设 置 数 据 文 件 替 代 图 像 文 本 框 : 设 置 ActiveX 控 件 的 替 代 图 像, 当 ActiveX 控 件 无 法 显 示 时, 将 显 示 这 个 替 代 图 像 播 放 按 钮 : 单 击 该 按 钮 可 在 Dreamweaver 编 辑 窗 口 预 览 这 个 ActiveX 控 件 效 果, 同 时 播 放 按 钮 变 成 停 止 按 钮, 单 击 停 止 按 钮, 则 停 止 ActiveX 控 件 的 预 览 参 数 按 钮 : 单 击 该 按 钮 可 打 开 参 数 对 话 框, 设 置 参 数 以 对 ActiveX 控 件 进 行 初 始 化 4.6.3 插 入 背 景 音 乐 在 实 际 中, 使 用 背 景 音 乐 和 使 用 背 景 图 片 一 样, 可 以 表 达 网 页 特 定 的 主 题 例 如, 在 论 坛 中 的 短 消 息 页 面 中, 通 过 添 加 背 景 音 乐 可 以 提 示 用 户 是 否 有 新 短 消 息 可 以 作 为 背 景 音 乐 的 声 音 文 件 格 式 有 : Mid Wav 和 Mp3 等 插 入 背 景 音 乐 的 操 作 如 下 所 示 (1) 新 建 一 个 空 白 网 页 单 击 网 页 空 白 处 (2) 单 击 插 入 记 录 媒 体 插 件 命 令, 打 开 选 择 文 件 对 话 框 (3) 选 择 一 个 音 乐 文 件, 单 击 确 定 按 钮, 网 页 中 将 显 示 一 个 插 件 图 标 (4) 选 中 该 图 标, 在 属 性 面 板 中 设 置 属 性 值 (5) 单 击 播 放 按 钮, 可 以 试 听 一 下 音 乐 效 果 (6) 单 击 参 数 按 钮, 打 开 参 数 对 话 框, 如 图 4.65 所 示 (7) 单 击 加 号 按 钮, 在 可 编 辑 文 本 域 中 输 入 文 字 hidden, 在 后 面 的 可 编 辑 文 本 域 中 输 入 文 字 true, 如 图 4.66 所 示 图 4.65 参 数 对 话 框 图 4.66 添 加 隐 藏 参 数

第 3 章 网 站 的 创 建 与 管 理 57 (8) 单 击 加 号 按 钮, 在 可 编 辑 文 本 域 中 输 入 文 字 loop, 在 后 面 的 可 编 辑 文 本 域 中 输 入 文 字 true, 如 图 4.67 所 示 (9) 保 存 文 档, 在 浏 览 器 中 预 览 图 4.67 添 加 循 环 播 放 参 数 4.7 插 入 超 级 链 接 超 级 链 接 是 Internet 的 核 心 技 术 通 过 超 级 链 接, 网 页 之 间 建 立 连 接 用 户 可 以 通 过 超 级 链 接 访 问 各 种 资 源 按 照 形 式, 超 级 链 接 可 以 分 为 文 字 链 接 图 片 链 接 锚 点 链 接 电 子 邮 件 链 接 脚 本 链 接 和 空 链 接 等 几 种 本 章 依 次 讲 解 这 几 种 链 接 的 使 用 4.7.1 插 入 文 本 链 接 文 本 链 接 是 超 级 链 接 最 基 本 的 方 式 文 本 链 接 形 式 最 简 单, 占 有 的 网 络 带 宽 也 最 少 各 种 网 站 广 泛 使 用 文 字 链 接 在 Dreamweaver 中, 文 字 链 接 分 为 绝 对 路 径 和 相 对 路 径 两 种 绝 对 路 径 : 提 供 链 接 资 源 的 完 整 URL, 常 常 用 于 指 向 站 点 外 部 文 件 例 如, http:/mail.263.net/index.htm, 指 向 的 就 是 mail.263.net 服 务 器 上 主 目 录 下 index.htm 文 件 相 对 路 径 : 网 络 资 源 的 路 径 是 相 对 于 当 前 基 础 路 径 的 位 置, 用 来 指 向 站 内 文 件 例 如, 当 前 访 问 http://mail.263.net/index.htm 文 件, 如 果 要 访 问 http://mail.263.net/images/index.htm 文 件, 则 可 以 直 接 使 用 images/index.htm 定 位 到 该 文 件 所 以, 绝 对 路 径 可 以 用 来 指 向 所 有 资 源, 而 相 对 路 径 可 以 用 来 指 向 站 内 资 源 设 置 文 本 链 接 的 操 作 如 下 所 示 (1) 单 击 站 点 新 建 站 点 命 令, 打 开 编 辑 文 件 对 话 框, 如 图 4.68 所 示 (2) 在 您 打 算 为 您 的 站 点 起 什 么 名 字? 文 本 框 中 输 入 站 点 名 test 单 击 下 一 步 按 钮, 打 开 编 辑 文 件, 第 2 部 分 对 话 框, 如 图 4.69 所 示

58 图 4.68 编 辑 文 件 对 话 框 图 4.69 编 辑 文 件, 第 2 部 分 对 话 框 (3) 选 择 否, 我 不 想 使 用 服 务 器 技 术 选 项 单 击 下 一 步 按 钮, 打 开 编 辑 文 件, 第 3 部 分 对 话 框, 如 图 4.70 所 示 (4) 选 择 编 辑 我 的 计 算 机 上 的 本 地 副 本, 完 成 后 再 上 传 到 服 务 器 选 项, 在 下 面 的 文 本 框 中 输 入 网 站 在 本 地 磁 盘 上 的 存 储 路 径, 一 般 情 况 下, 该 文 本 框 会 根 据 读 者 计 算 机 上 的 主 目 录 自 动 生 成, 读 者 不 需 更 改 单 击 下 一 步 按 钮, 打 开 共 享 文 件 对 话 框, 如 图 4.71 所 示 图 4.70 编 辑 文 件, 第 3 部 分 对 话 框 图 4.71 站 点 定 义 对 话 框 4 (5) 单 击 您 如 何 连 接 到 远 程 服 务 器 下 拉 列 表 框, 选 择 无 选 项 单 击 下 一 步 按 钮, 打 开 总 结 对 话 框, 如 图 4.72 所 示

第 3 章 网 站 的 创 建 与 管 理 59 图 4.72 站 点 定 义 对 话 框 (6) 单 击 完 成 按 钮, 关 闭 当 前 对 话 框 单 击 文 件 新 建 命 令, 弹 出 新 建 文 档 对 话 框, 如 图 4.73 所 示 单 击 创 建 按 钮, 就 会 打 开 一 个 空 白 网 页 图 4.73 新 建 文 档 对 话 框 (7) 在 页 面 里 输 入 文 字 测 试 页 面 按 下 快 捷 键 Ctrl+S, 保 存 网 页 为 ceshi1.html (8) 单 击 文 件 新 建 命 令, 打 开 新 建 文 档 对 话 框 (9) 创 建 一 个 新 的 HTML 空 白 网 页 (10) 在 网 页 里 输 入 3 行 文 字 : 绝 对 路 径 相 对 路 径 和 263 网 站, 如 图 4.74 所 示 (11) 选 中 文 本 绝 对 路 径, 在 属 性 面 板 的 链 接 文 本 框 中 输 入 刚 建 立 的 网 页 ceshi1.html 的 绝 对 路 径 : http://localhost/test/ceshi1.html (12) 选 中 文 本 相 对 路 径, 在 链 接 文 本 框 中 输 入 文 件 ceshi1.html 的 相 对 路 径 ceshi1.html (13) 选 中 文 本 263 网 站, 在 链 接 文 本 框 中 输 入 263 网 站 的 地 址 http://mail.263.net (14) 单 击 站 点 管 理 站 点 命 令, 打 开 管 理 站 点 对 话 框, 如 图 4.75 所 示

60 图 4.74 插 入 文 字 图 4.75 管 理 站 点 对 话 框 (15) 在 列 表 中 选 择 test 选 项, 单 击 编 辑 按 钮, 弹 出 站 点 定 义 对 话 框, 单 高 级 标 签, 如 图 4.76 所 示 (16) 单 击 测 试 服 务 器 选 项, 在 访 问 下 拉 列 表 框 中 选 择 本 地 / 网 络 选 项, 这 时 下 面 的 文 本 框 会 自 动 生 成 测 试 文 件 夹 的 位 置, 如 图 4.77 所 示 图 4.76 站 点 定 义 对 话 框 图 4.77 设 置 测 试 服 务 器 (17) 单 击 确 定 按 钮, 关 闭 对 话 框 (18) 按 下 快 捷 键 Ctrl+S 将 网 页 保 存 为 index.html 按 下 快 捷 键 F12, 在 浏 览 器 中 预 览 依 次 单 击 三 个 超 链 接, 可 见 前 两 个 都 打 开 了 同 样 的 网 页, 而 第 3 个 则 打 开 了 263 网 站 的 首 页 4.4.2 插 入 图 片 链 接 现 在 网 页 对 美 感 要 求 越 来 越 高 由 于 文 本 链 接 可 以 实 现 的 效 果 有 限, 所 以 现 在 广 泛 使 用 图 片 链 接 图 片 链 接 和 文 本 链 接 基 本 类 似, 只 是 链 接 的 载 体 不 同 设 置 链 接 的 方 法 如 下 所 示

第 3 章 网 站 的 创 建 与 管 理 61 (1) 创 建 一 个 空 白 网 页 单 击 插 入 记 录 图 像 命 令, 打 开 选 择 图 像 源 文 件 对 话 框 选 择 tree.jpg 文 件, 单 击 确 定 按 钮, 打 开 图 像 标 签 辅 助 功 能 属 性 对 话 框, 如 图 4.78 所 示 图 4.78 图 像 标 签 辅 助 功 能 属 性 对 话 框 (2) 在 替 换 文 本 文 本 框 中 输 入 文 字 树 木, 单 击 确 定 按 钮, 关 闭 对 话 框 (3) 在 属 性 面 板 下 发 的 链 接 文 本 框 中 输 入 http://mail.263.net (4) 保 存 网 页, 在 浏 览 器 中 预 览 单 击 该 图 片, 可 以 链 接 到 263 网 站 的 首 页 4.4.4 插 入 电 子 邮 件 地 址 链 接 电 子 邮 件 地 址 链 接 是 一 种 特 殊 的 文 本 链 接 当 浏 览 者 单 击 该 链 接, 将 打 开 用 户 电 脑 上 默 认 的 邮 件 收 发 程 序, 并 且 邮 件 接 受 人 地 址 为 指 定 电 子 邮 件 地 址 使 用 该 链 接, 可 以 方 便 用 户 通 过 邮 件 的 方 式 联 系 其 他 人 插 入 电 子 邮 件 地 址 链 接 的 操 作 如 下 所 示 (1) 创 建 一 个 新 的 空 白 网 页, 输 入 文 字 邮 件 联 系 (2) 选 中 该 文 字, 在 属 性 面 板 的 链 接 文 本 框 中 输 入 mailto:lppt@263.net (3) 保 存 网 页, 按 下 快 捷 键 F12, 在 浏 览 器 中 预 览 (4) 单 击 邮 件 联 系 超 链 接, 系 统 会 自 动 打 开 邮 件 收 发 程 序, 如 图 4.79 所 示 图 4.79 打 开 收 发 邮 件 程 序 注 意 : 使 用 邮 件 收 发 程 序 发 送 邮 件, 需 要 预 先 配 置 收 发 程 序 否 则, 用 户 无 法 正 确 发 送 邮 件 现 在 很 多 用 户 不 使 用 这 类 程 序, 所 以 电 子 邮 件 地 址 链 接 的 应 用 有 所 局 限

62 4.4.6 插 入 脚 本 链 接 脚 本 链 接 就 是 一 段 JavaScript 代 码 当 单 击 该 链 接, 将 执 行 该 段 JavaScript 代 码 由 于 用 户 可 以 手 动 编 写 代 码, 所 以 可 以 灵 活 实 现 各 种 功 能 下 面 演 示 一 个 脚 本 链 接 插 入 方 式 (1) 新 建 一 个 空 白 网 页, 输 入 文 字 执 行 脚 本 (2) 选 中 该 文 字, 然 后 在 下 方 的 属 性 面 板 链 接 文 本 框 中 输 入 如 下 代 码 : javascript:alert(' 这 是 一 段 脚 本 程 序 ') (3) 保 存 网 页, 在 浏 览 器 中 预 览 单 击 链 接 文 字 执 行 脚 本, 系 统 会 弹 出 对 话 框, 如 图 4.80 所 示 图 4.80 系 统 对 话 框 4.4.7 插 入 空 链 接 空 链 接 通 常 用 在 未 完 成 的 网 页 上 空 链 接 的 目 标 URL 使 用 # 表 示 在 制 作 链 接 时, 只 要 属 性 面 板 的 链 接 文 本 框 中 输 入 # 标 记 空 链 接 主 要 有 以 下 几 种 去 掉 href 属 性, 通 过 JavaScript 的 onclick 事 件 执 行 操 作, 并 且 把 style 设 为 cursor:hand href= #, 页 面 跳 到 页 面 的 顶 部 href= #temp, 任 意 设 置 一 个 页 面 上 没 有 的 锚 记, 页 面 就 不 动 4.8 插 入 表 格 表 格 是 网 页 设 计 的 一 个 重 要 组 成 部 分 它 不 仅 用 于 显 示 表 格 数 据, 还 可 以 用 于 网 页 排 版 使 用 表 格 排 版 可 以 精 确 排 版 和 定 位 但 在 新 的 网 页 规 范 标 准 中, 建 议 不 要 使 用 表 格 进 行 网 页 布 局 4.1.1 表 格 的 构 成 表 格 通 常 由 单 元 行 和 单 元 格 构 成 其 基 本 HTML 语 法 形 式 如 下 所 示 一 个 表 格 可 以 包 括 一 行 或 多 行, 而 每 一 行 可 以 包 括 一 个 或 者 多 个 单 元 格 <table > <!-- 定 义 表 格 的 开 始 -->

第 3 章 网 站 的 创 建 与 管 理 63 <tr> <!-- 定 义 表 格 一 行 的 开 始 --> <td> <!-- 定 义 表 格 一 个 单 元 格 的 开 始 --> </td> <!-- 定 义 表 格 一 个 单 元 格 的 结 束 --> <td> </td> </tr> <!-- 定 义 表 格 一 行 的 结 束 --> <tr> </tr> </table> <!-- 定 义 表 格 的 结 束 --> 4.8.1 插 入 表 格 在 Dreamweaver 中, 使 用 表 格 首 先, 需 要 插 入 一 个 表 格 插 入 表 格 后, 才 能 对 表 格 中 行 列 和 单 元 格 进 行 操 作 在 插 入 表 格 的 时 候, 需 要 指 定 表 格 的 行 数 列 数 宽 度 边 框 宽 度 单 元 格 间 距 和 边 距 等 属 性, 插 入 表 格 操 作 如 下 所 示 (1) 单 击 插 入 记 录 表 格 命 令, 弹 出 表 格 对 话 框, 如 图 4.81 所 示 图 4.81 表 格 对 话 框 (2) 在 表 格 对 话 框 中, 输 入 表 格 参 数 其 中, 表 格 宽 度 文 本 框 中 输 入 640, 并 在 后 面 的 下 拉 列 表 框 中 选 择 像 素 (3) 单 击 确 定 按 钮, 关 闭 当 前 对 话 框 即 可 看 见 网 页 编 辑 区 中 已 经 插 入 了 一 个 表 格, 如 图 4.82 所 示

64 图 4.82 插 入 表 格 (4) 按 下 Ctrl+S 保 存 网 页 为 test13.html, 按 下 快 捷 键 F12 在 浏 览 器 中 预 览 (5) 更 改 浏 览 器 窗 口 的 大 小, 查 看 不 同 大 小 的 网 页, 是 否 会 影 响 表 格 的 大 小 4.8.2 设 置 表 格 属 性 当 选 取 了 整 个 表 格 后, 编 辑 区 下 方 的 属 性 检 视 面 板 会 显 示 表 格 的 属 性, 如 图 4.83 所 示 如 果 属 性 面 板 不 可 见, 可 以 单 击 查 看 查 看 面 板 命 令, 或 者 是 按 下 F4 快 捷 键 图 4.83 表 格 的 属 性 面 板 表 格 属 性 面 板 参 数 说 明 : 表 格 ID 下 拉 列 表 框 : 指 定 表 格 的 ID 行 和 列 文 本 框 : 指 定 表 格 中 行 和 列 的 数 目 宽 文 本 框 : 指 以 像 素 为 单 位 或 按 占 浏 览 器 窗 口 宽 度 的 百 分 比 计 算 的 表 格 宽 度 单 元 格 边 距 文 本 框 : 单 元 格 内 容 和 单 元 格 边 框 之 间 的 像 素 数 单 元 格 间 距 文 本 框 : 指 相 邻 的 表 格 单 元 格 之 间 的 像 素 数 如 果 没 有 明 确 指 定 单 元 格 间 距 和 单 元 格 边 距 的 值, 大 多 数 浏 览 器 都 按 单 元 格 边 距 设 置 为 1, 单 元 格 间 距 设 置 为 2 来 显 示 表 格 如 果 不 想 显 示 表 格 中 的 边 距 和 间 距, 请 将 单 元 格 边 距 和 单 元 格 间 距 设 置 为 0 对 齐 下 拉 列 表 框 : 确 定 表 格 相 对 于 同 一 段 落 中 其 他 元 素 ( 例 如 文 本 或 图 像 ) 的 显 示 位 置 边 框 文 本 框 : 指 定 表 格 边 框 的 宽 度 ( 以 像 素 为 单 位 ) 如 果 没 有 明 确 指 定 边 框 的 值, 则 大 多 数 浏 览 器 按 边 框 设 置 为 1 显 示 表 格 若 要 确 保 显 示 的 表 格 没 有 边 框, 请 将 边 框 设 置 为 0 若 要 在 边 框 设 置 为 0 时 查 看 单 元 格 和 表 格 边 框, 请 选 择 查 看 可 视 化 助 理 表 格 边 框 菜 单 项 清 除 列 宽 按 钮 和 清 除 行 高 按 钮 : 指 按 钮 从 表 格 中 删 除 所 有 明 确 指 定 的 行 高 或 列 宽 将 表 格 宽 度 转 换 成 像 素 按 钮 和 将 表 格 高 度 转 换 成 像 素 按 钮 : 指 将 表 格 中 每 列 的 宽 度 或 高 度 设 置 为 以 像 素 为 单 位 的 当 前 宽 度 背 景 颜 色 文 本 框 : 指 表 格 的 背 景 颜 色 边 框 颜 色 文 本 框 : 指 表 格 边 框 的 颜 色 背 景 图 像 文 本 框 : 指 表 格 的 背 景 图 像

第 3 章 网 站 的 创 建 与 管 理 65 设 置 完 属 性 值 以 后, 需 要 将 鼠 标 移 走, 改 变 当 前 输 入 焦 点, 设 置 就 会 自 动 生 效 4.8.3 设 置 列 行 和 单 元 格 属 性 设 置 表 格 属 性 是 对 表 格 的 整 体 进 行 设 置 用 户 也 可 以 但 对 表 格 中 一 列 一 行 或 者 一 个 单 元 格 进 行 设 置 设 置 方 法 如 下 所 示 (1) 在 表 格 中 选 取 单 元 格 打 开 属 性 面 板, 如 图 4.84 所 示 图 4.84 单 元 格 属 性 面 板 单 元 格 属 性 面 板 参 数 说 明 : 水 平 指 定 单 元 格 行 或 列 内 容 的 水 平 对 齐 方 式 : 可 以 将 内 容 对 齐 到 单 元 格 的 左 侧 右 侧 或 使 之 居 中 对 齐, 也 可 以 指 示 浏 览 器 使 用 其 默 认 的 对 齐 方 式 ( 通 常 常 规 单 元 格 为 左 对 齐, 标 题 单 元 格 为 居 中 对 齐 ) 垂 直 指 定 单 元 格 行 或 列 内 容 的 垂 直 对 齐 方 式 可 以 将 内 容 对 齐 到 单 元 格 的 顶 端 中 间 底 部 或 基 线, 或 者 指 示 浏 览 器 使 用 其 默 认 的 对 齐 方 式 ( 通 常 是 居 中 对 齐 ) 宽 和 高 是 以 像 素 为 单 位 或 按 占 整 个 表 格 宽 度 或 高 度 百 分 比 计 算 的 所 选 单 元 格 的 宽 度 和 高 度 若 要 指 定 百 分 比, 请 在 值 后 面 使 用 百 分 比 符 号 (%) 若 要 让 浏 览 器 根 据 单 元 格 的 内 容 以 及 其 他 列 和 行 的 宽 度 和 高 度 确 定 适 当 的 宽 度 或 高 度, 请 将 此 域 留 空 ( 默 认 设 置 ) 默 认 情 况 下, 浏 览 器 选 择 一 列 的 宽 度 来 容 纳 列 中 最 宽 的 图 像 或 最 长 的 行 这 就 是 为 什 么 当 您 将 内 容 添 加 到 某 个 列 时, 该 列 有 时 变 得 比 表 格 中 其 他 列 宽 得 多 的 原 因 默 认 情 况 下, 浏 览 器 选 择 一 行 的 高 度 来 容 纳 该 行 中 的 所 有 文 本 和 图 像 注 意 : 可 以 按 占 表 格 总 高 度 的 百 分 比 指 定 一 个 高 度, 但 是 浏 览 器 中 行 可 能 不 以 指 定 的 百 分 比 高 度 显 示 背 景 ( 上 面 的 文 本 字 段 ) 是 单 元 格 列 或 行 的 背 景 图 像 的 文 件 名 单 击 文 件 夹 图 标 浏 览 到 某 个 图 像, 或 使 用 指 向 文 件 图 标 选 择 某 个 图 像 文 件 背 景 ( 下 面 的 颜 色 样 本 和 文 本 字 段 ) 是 使 用 颜 色 选 择 器 选 择 的 单 元 格 列 或 行 的 背 景 颜 色 边 框 是 单 元 格 的 边 框 颜 色 合 并 单 元 格 按 钮 可 以 将 所 选 的 单 元 格 行 或 列 合 并 为 1 个 单 元 格 ( 请 参 见 拆 分 和 合 并 单 元 格 ) 只 有 当 单 元 格 形 成 矩 形 或 直 线 的 块 时 才 可 以 合 并 这 些 单 元 格 拆 分 单 元 格 按 钮 可 以 将 一 个 单 元 格 分 成 两 个 或 更 多 单 元 格 ( 请 参 见 拆 分 和 合 并 单 元 格 ) 一 次 只 能 拆 分 一 个 单 元 格 ; 如 果 选 择 的 单 元 格 多 于 一 个, 则 此 按 钮 将 禁 用 不 换 行 可 以 防 止 换 行, 从 而 使 给 定 单 元 格 中 的 所 有 文 本 都 在 一 行 上 如 果 启 用 了 不 换 行, 则 当 您 键 入 数 据 或 将 数 据 粘 贴 到 单 元 格 时 单 元 格 会 加 宽 来 容 纳 所 有 数 据 ( 通 常, 单 元 格 在 水 平 方 向 扩 展 以 容 纳 单 元 格 中 最 长 的 单 词 或 最 宽 的 图 像, 然 后 根 据 需 要 在 垂 直 方 向 进 行 扩 展 以 容 纳 其 他 内 容 ) 标 题 可 以 将 所 选 的 单 元 格 格 式 设 置 为 表 格 标 题 单 元 格 默 认 情 况 下, 表 格 标 题 单 元 格 的 内 容 为 粗 体 并 且 居 中

66 4.8.6 向 表 格 中 导 入 数 据 当 表 格 中 需 要 包 含 大 量 数 据 时, 手 工 输 入 的 工 作 量 就 非 常 巨 大 如 果 用 户 有 格 式 化 的 数 据, 就 可 以 直 接 使 用 Dreamweaver 的 导 入 功 能, 将 数 据 导 入 表 格 中 操 作 如 下 所 示 在 工 作 中, 可 能 在 另 一 个 应 用 程 序, 如 Microsoft Excel 中 创 建 了 很 多 工 作 报 表, 现 在 需 要 将 这 些 表 格 放 到 网 页 上 进 行 发 布, 这 时 就 可 以 将 这 些 以 分 隔 文 本 的 格 式 ( 其 中 的 项 以 制 表 符 逗 号 冒 号 分 号 或 其 他 分 隔 符 隔 开 ) 保 存 的 表 格 式 数 据 导 入 到 Dreamweaver 中, 而 不 需 要 重 新 制 作 表 格 (1) 选 择 文 件 导 入 表 格 式 数 据 命 令 (2) 选 择 插 入 表 格 对 象 导 入 表 格 式 数 据 命 令, 即 会 出 现 导 入 表 格 式 数 据 对 话 框, 如 图 4.85 所 示 图 4.85 导 入 表 格 式 数 据 对 话 框 (3) 在 该 对 话 框 中, 输 入 有 关 包 含 数 据 的 文 件 的 信 息 数 据 文 件 : 要 导 入 的 文 件 的 名 称 用 户 可 以 单 击 浏 览 按 钮, 选 择 另 一 个 文 件 定 界 符 : 对 导 入 的 文 件 所 使 用 的 分 隔 符 如 果 选 择 其 他 选 项, 则 一 个 文 本 框 会 出 现 在 弹 出 式 菜 单 的 右 侧 注 意 : 确 保 指 定 保 存 数 据 文 件 时 使 用 的 分 隔 符 如 果 未 能 做 到, 则 无 法 正 确 地 导 入 文 件, 数 据 也 无 法 在 表 格 中 进 行 正 确 的 格 式 设 置 表 格 宽 度 : 将 创 建 的 表 格 的 宽 度 选 择 匹 配 内 容 选 项 使 每 个 列 足 够 宽, 以 适 应 该 列 中 最 长 的 文 本 字 符 串 单 元 格 边 距 : 单 元 格 内 容 和 单 元 格 边 界 之 间 的 像 素 数 单 元 格 间 距 : 相 邻 的 表 格 单 元 格 之 间 的 像 素 数 注 意 : 如 果 没 有 明 确 指 定 单 元 格 间 距 和 单 元 格 边 距 的 值, 则 大 多 数 浏 览 器 按 单 元 格 边 距 设 置 为 1, 单 元 格 间 距 设 置 为 2 显 示 表 格 若 要 确 保 浏 览 器 显 示 的 表 格 没 有 边 距 和 间 距, 请 将 单 元 格 填 充 和 单 元 格 间 距 设 置 为 0 格 式 化 首 行 确 定 应 用 于 表 格 首 行 的 格 式 设 置 从 4 个 格 式 设 置 选 项 中 进 行 选 择 : 无 格 式 粗 体 斜 体 或 加 粗 斜 体 边 框 以 像 素 为 单 位 指 定 表 格 边 框 的 宽 度 4.8.8 随 鼠 标 移 动 变 色 的 表 格 当 表 格 数 据 超 过 5 列 时, 大 量 数 据 就 会 造 成 浏 览 者 的 阅 读 困 难 在 浏 览 数 据 时 候, 人 们 很 容 易 看 错 行 这 时, 设 计 人 员 可 以 设 置 单 元 行 数 据 背 景 随 鼠 标 变 色 当 用 户 鼠 标 移 动 到 浏 览 的 单 元 行, 当 前 行 的 背 景 就 变 换 颜 色 这 样 就 帮 助 用 户 区 分 所 阅 读 的 数 据 实 现 指 向 行 变 色 的 步 骤 如 下 :

第 3 章 网 站 的 创 建 与 管 理 67 (1) 打 开 网 页, 然 后 选 取 表 格 第 1 行, 如 图 4.86 所 示 (2) 在 代 码 视 图 中, 在 <tr> 标 签 插 入 如 下 代 码 插 入 后, 代 码 如 图 4.87 所 示 <tr onmouseout="this.style.backgroundcolor='#ffffff'" onmouseover="this.style.backgroundcolor='#ffcccc'"> (3) 选 择 第 3 行, 然 后 重 复 上 面 两 步 (4) 保 存 网 页, 然 后 预 览 最 终 效 果 如 图 4.88 所 示 图 4.86 选 择 行 图 4.87 插 入 代 码 图 4.88 鼠 标 指 向 的 行 变 色 如 果 在 几 十 行 数 据 中 浏 览 需 要 的 信 息, 那 么 该 效 果 会 更 加 突 出