第 4 章 Dreamweaver CS3 高 级 篇 4.1 表 单 概 述 表 单 是 用 来 收 集 浏 览 者 的 用 户 名 密 码 E-mail 地 址 个 人 爱 好 和 联 系 地 址 等 用 户 信 息 的 输 入 区 域 集 合 浏 览 者 填 写 表 单 的 方 式 一 般 是 输 入 文 本 选 择 单 选 按 钮 或 复 选 框 以 及 从 下 拉 列 表 框 中 选 择 选 项 等 在 填 写 好 表 单 后, 浏 览 者 应 该 提 交 所 输 入 的 数 据, 这 些 数 据 会 根 据 网 页 设 计 者 设 置 的 表 单 处 理 程 序 以 各 种 不 同 的 方 式 进 行 处 理 除 了 直 接 嵌 入 到 网 页 的 简 单 表 单 以 外, 在 WWW 中 还 有 大 量 复 杂 的 表 单 可 以 传 递 更 多 的 信 息 和 完 成 更 加 复 杂 的 功 能 例 如, 在 网 上 购 物 时, 往 往 需 要 填 写 多 个 相 关 信 息 的 表 单, 最 后 才 能 完 成 信 息 的 提 交 在 申 请 一 些 免 费 账 号 时, 也 需 要 填 写 一 系 列 的 表 单 才 能 最 终 获 得 想 要 的 账 号 另 外,WWW 上 大 量 的 调 查 表 也 是 用 表 单 实 现 的 为 了 制 作 好 复 杂 的 表 单 网 页, 在 Dreamweaver CS3 中 提 供 了 文 本 框 文 本 区 单 选 按 钮 复 选 框 下 拉 列 表 框 提 交 按 钮 和 重 置 按 钮 等 丰 富 的 表 单 域 这 些 表 单 域 具 有 以 下 各 自 不 同 的 功 能 : (1) 单 行 文 本 框 单 行 文 本 框 用 来 输 入 比 较 简 单 的 信 息, 如 网 页 中 的 按 姓 名 查 找 按 部 门 查 找 等 (2) 多 行 文 本 框 如 果 需 要 输 入 建 议 需 求 等 大 段 文 字, 使 用 单 行 文 本 框 就 显 得 力 不 从 心 了, 这 时 通 常 使 用 带 滚 动 条 的 多 行 文 本 框 如 同 学 录 注 册 等 表 单 中 的 简 介 即 为 多 行 文 本 框 (3) 单 选 按 钮 单 选 按 钮 常 用 于 表 示 唯 一 的 选 择 结 果, 如 同 学 录 注 册 等 表 单 中 的 性 别 按 钮 (4) 复 选 框 复 选 框 常 用 来 表 示 许 多 项 可 以 同 时 选 中 的 事 物, 比 如 个 人 爱 好 所 学 科 目 和 选 购 的 产 品 种 类 等 (5) 下 拉 列 表 框 当 需 要 选 择 职 业 文 化 程 度 等 事 项 时, 除 了 文 本 区 以 外, 还 可 以 考 虑 使 用 下 拉 列 表 框 比 如 同 学 录 注 册 表 单 中 的 学 历 婚 姻 和 状 况 都 是 下 拉 列 表 框 下 拉 列 表 框 比 文 本 区 节 省 空 间, 但 是 不 直 观 (6) 提 交 按 钮 和 重 置 按 钮 当 用 户 完 成 了 表 单 的 填 写 后, 如 果 需 要 提 交 数 据, 则 可 以 单 击 表 单 中 的 提 交 按 钮, 通 常 按 钮 上 的 文 字 为 提 交 或 确 认 等, 如 果 希 望 恢 复 表 单 为 填 写 前 的 状 态 以 便 重 新 填 写, 则 可 以 单 击 重 置 按 钮, 通 常 按 钮 上 的 文 字 为 重 置 重 填 或 重 新 填 写 等 4.1.1 利 用 Dreamweaver CS3 创 建 表 单 Dreamweaver CS3 提 供 了 一 个 专 门 的 表 单 对 象 插 入 面 板, 该 面 板 上 包 含 了 各 种 表 单 对 象 选 择 窗 口 插 入 命 令, 打 开 插 入 面 板, 单 击 插 入 面 板 上 的 表 单 标 签 切 换 到 插 入
网 页 制 作 基 础 教 程 表 单 面 板, 即 可 看 到 各 种 表 单 元 素, 如 图 4-1 所 示 插 入 表 单 面 板 上 的 各 个 按 钮, 从 左 到 右 依 次 为 : 插 入 表 单 插 入 文 本 字 段 插 入 隐 藏 域 插 入 复 选 框 插 入 单 选 按 钮 插 入 单 选 按 钮 组 插 入 列 表 / 菜 单 插 入 跳 转 菜 单 插 入 图 像 域 插 入 文 件 字 段 插 入 按 钮 插 入 标 签 插 入 字 段 集 等 图 4-1 插 入 表 单 面 板 4.1.2 创 建 空 白 表 单 本 节 以 同 学 录 注 册 为 例 介 绍 利 用 Dreamweaver CS3 制 作 和 编 辑 网 页 表 单 的 方 法 因 为 在 发 送 表 单 时 是 以 整 个 表 单 发 送 的, 所 以 在 插 入 表 单 元 素 前, 先 要 在 网 页 中 插 入 空 白 表 单, 然 后 才 能 在 表 单 中 插 入 表 元 素 ( 如 文 本 框 按 钮 列 表 / 菜 单 图 片 等 ), 以 达 到 整 体 发 送 的 效 果 为 了 使 表 单 整 齐 漂 亮, 这 里 采 用 表 格 形 式 (1) 单 击 新 建 按 钮, 打 开 一 个 新 的 网 页, 输 入 标 题 同 学 录 注 册, 设 置 标 题 的 颜 色 和 字 体 并 居 中 (2) 将 光 标 置 于 文 本 后, 按 Enter 键, 单 击 插 入 表 单 面 板 上 的 插 入 表 单 图 标, 此 时 将 在 网 页 中 出 现 一 个 红 色 虚 线 围 成 的 矩 形 边 框, 该 红 色 边 框 即 为 空 白 表 单 的 边 框, 在 窗 口 的 左 下 方 出 现 一 个 <form> 字 样, 同 时 属 性 面 板 变 成 表 单 的 属 性 如 果 没 有 看 到 所 创 见 的 表 单, 选 择 查 看 可 视 化 处 理 不 可 见 元 素 命 令, 即 可 显 示 设 计 视 窗, 如 图 4-2 所 示 图 4-2 显 示 设 计 视 窗 - 94 -
第 4 章 Dreamweaver CS3 高 级 篇 表 单 属 性 面 板 中 各 项 的 含 义 如 下 : 表 单 名 称 : 给 表 单 命 名, 该 名 称 必 须 是 唯 一 的, 因 为 其 在 脚 本 语 言 中 将 作 为 变 量 名 使 用 方 法 : 表 示 处 理 表 单 的 方 法 在 该 下 拉 列 表 中 有 3 个 选 项 : GET: 为 表 单 值 添 加 一 个 URL, 并 向 服 务 器 发 送 GET 请 求 因 为 URL 被 限 定 在 8192 个 字 符 之 内, 所 以 不 要 对 内 容 较 多 的 表 单 使 用 GET 方 法 POST: 在 消 息 正 文 中 发 送 表 单 值, 并 向 服 务 器 发 送 POST 请 求 默 认 : 使 用 浏 览 器 的 默 认 方 法 ( 一 般 为 GET) 动 作 : 制 定 处 理 表 单 信 息 的 服 务 器 应 用 程 序 可 以 单 击 其 后 面 的 浏 览 图 标 选 择 对 话 框 中 的 应 用 程 序, 或 直 接 输 入 应 用 程 序 的 路 径 文 件 名 MIME 类 型 : 指 定 对 提 交 个 服 务 器 进 行 处 理 的 数 据 使 用 MIME 编 码 类 型 有 两 个 选 项 默 认 设 置, 其 中 application/x-www-form-urlcncode 通 常 与 POST 方 法 协 同 使 用 如 果 要 创 建 文 件 传 域, 应 指 定 multipart/form-data MIME 类 型 目 标 : 指 定 一 个 窗 口, 在 该 窗 口 中 显 示 调 用 程 序 所 返 回 的 数 据 目 标 值 有 4 个 选 项 : _blank: 在 未 命 名 的 新 窗 口 中 打 开 目 标 文 档 _parent: 在 显 示 当 前 文 档 的 窗 口 的 父 窗 口 中 打 开 目 标 文 档 _self: 在 提 交 表 单 所 使 用 的 窗 口 中 打 开 目 标 文 档 _top: 在 当 前 窗 口 的 窗 体 内 打 开 目 标 文 档 此 值 可 用 于 确 保 目 标 文 档 占 用 整 个 窗 口, 即 使 原 始 文 档 显 示 在 框 架 中 (3) 在 表 单 内 插 入 一 个 10 4 的 表 格, 并 根 据 需 要 合 并 单 元 格, 调 整 单 元 格 的 大 小 并 隐 藏 表 格 边 框 4.1.3 利 用 Dreamweaver CS3 添 加 表 单 元 素 1. 插 入 并 设 置 文 本 框 文 本 框 是 一 个 接 受 文 本 信 息 的 空 白 框 在 文 本 框 中 几 乎 可 以 容 纳 任 何 类 型 的 文 本 数 据 利 用 它 可 以 使 网 页 设 计 师 不 必 限 制 访 问 者 提 交 的 内 容 在 网 页 中, 常 见 的 文 本 框 有 以 下 3 种 形 式 : 单 行 文 本 框 : 只 能 用 来 输 入 一 行 信 息 多 行 文 本 框 : 可 以 由 设 计 者 限 定 行 数, 并 决 定 是 否 出 现 滚 动 条 该 文 本 框 可 以 输 入 多 行 信 息 密 码 文 本 框 : 在 该 文 本 框 中 输 入 的 信 息 都 会 以 * 显 示 在 屏 幕 上 (1) 插 入 单 行 文 本 框 先 将 光 标 置 于 第 一 个 单 元 格 中, 输 入 提 示 信 息 用 户 名 :, 然 后 将 光 标 移 至 后 面 的 单 元 格 中, 单 击 插 入 表 单 面 板 上 的 插 入 文 本 字 段 图 标, 或 选 择 插 入 表 单 对 象 文 本 域 命 令, 此 时 会 在 表 单 中 插 入 一 个 单 行 文 本 框 (2) 插 入 多 行 文 本 框 插 入 多 行 文 本 框 的 方 法 与 用 户 名 文 本 框 的 建 立 方 法 基 本 一 致 首 先 将 光 标 移 到 相 应 的 单 元 格 中, 输 入 提 示 文 本 简 介 :, 然 后 单 击 插 入 表 单 面 板 上 的 插 入 文 本 区 域 图 标, 或 选 择 插 入 表 单 对 象 文 本 区 域 命 令, 此 时 会 在 表 单 中 插 入 一 个 多 行 文 本 框 (3) 插 入 密 码 文 本 框 首 先 将 光 标 置 于 表 单 中, 在 合 适 的 位 置 输 入 提 示 信 息 密 码 : 然 后 单 击 插 入 表 单 面 板 上 的 插 入 文 本 字 段 图 标, 或 者 选 择 插 入 表 单 对 象 文 本 域 命 令, 在 表 单 中 插 入 一 个 单 行 文 本 框 单 击 此 单 行 文 本 框, 在 属 性 面 板 上 - 95 -
网 页 制 作 基 础 教 程 的 类 型 下 单 击 密 码 单 选 按 钮, 则 单 行 文 本 框 变 成 了 密 码 文 本 框 如 图 4-3 所 示 图 4-3 添 加 文 本 框 的 效 果 (4) 设 置 文 本 框 属 性 在 表 单 中 插 入 文 本 框 后, 选 择 所 插 入 的 文 本 框, 此 时 属 性 面 板 中 各 选 项 的 含 义 如 下 : 文 本 框 名 称 : 用 于 给 文 本 框 命 名 每 一 个 文 本 框 必 须 有 一 个 唯 一 的 名 称 也 就 是 说, 有 多 个 文 本 域 时, 名 称 不 能 相 同 字 符 宽 度 : 指 定 文 本 框 所 能 显 示 的 字 符 数 一 个 中 文 为 两 个 字 符 类 型 : 指 定 文 本 框 的 类 型 此 项 包 含 以 下 3 个 选 项 : 单 行 : 选 择 此 选 项 得 到 INPUT 标 记, 其 Type 属 性 设 置 为 text Char Width 设 置 被 映 射 为 size 属 性,Max Chars 设 置 被 映 射 为 maxlength 属 性 多 行 : 选 择 此 选 项 得 到 TEXTAREA 标 记 Char Width 设 置 被 映 射 为 cols 属 性,Num Lines 设 置 被 映 射 为 rows 属 性 密 码 : 选 择 此 选 项 得 到 INPUT 标 记, 其 Type 属 性 设 置 为 password Char Width 和 Max Chars 设 置 的 映 射 与 单 行 文 本 域 相 同, 当 用 户 在 密 码 文 本 域 输 入 密 码 时, 输 入 内 容 被 显 示 为 * 最 大 字 符 数 : 文 本 框 所 能 输 入 的 最 大 字 符 数 在 多 行 文 本 框 中, 该 参 数 将 变 成 行 数, 表 示 输 入 的 最 大 字 符 行 数 初 始 值 : 表 单 首 次 载 入 时 文 本 框 中 显 示 的 值 换 行 : 在 多 行 文 本 框 中 换 行 的 方 式 有 以 下 4 种 选 择 : 默 认 : 当 输 入 的 字 符 数 达 到 字 符 宽 度 时 会 自 动 产 生 换 行 关 : 当 输 入 的 字 符 数 大 于 字 符 宽 度 时 自 动 产 生 水 平 滚 动 条, 只 有 当 用 户 按 Enter 键 后 才 能 强 制 换 行 虚 拟 : 当 输 入 的 字 符 数 达 到 字 符 宽 度 时 将 自 动 产 生 换 行, 但 系 统 将 自 动 换 行 的 数 据 - 96 -
第 4 章 Dreamweaver CS3 高 级 篇 作 为 字 符 串 处 理 实 体 : 当 输 入 的 字 符 数 达 到 字 符 宽 度 时 会 自 动 产 生 换 行, 但 系 统 可 以 处 理 自 动 换 行 的 数 据 根 据 要 求 完 成 文 本 框 各 项 属 性 的 设 置 并 插 入 其 他 的 文 本 框 2. 插 入 并 设 置 单 选 按 钮 (1) 插 入 单 选 按 钮 要 在 表 单 中 插 入 单 选 按 钮, 首 先 将 光 标 置 于 表 单 中 的 相 应 位 置, 输 入 提 示 信 息, 如 * 性 别 : 然 后 单 击 插 入 表 单 面 板 上 的 插 入 单 选 按 钮 图 标, 或 者 选 择 插 入 表 单 对 象 插 入 单 选 按 钮 命 令, 插 入 单 选 按 钮, 再 输 入 男 用 同 样 的 方 法 输 入 单 选 按 钮 女 (2) 设 置 单 选 按 钮 的 属 性 在 表 单 中 选 择 单 选 按 钮 后, 属 性 面 板 将 变 为 如 图 4-4 所 示 图 4-4 单 选 按 钮 属 性 面 板 该 面 板 中 各 项 的 含 义 如 下 : 单 选 按 钮 : 给 单 选 按 钮 命 名 同 一 组 的 单 选 按 钮 名 称 必 须 相 同, 这 一 点 非 常 重 要 选 定 值 : 设 置 单 选 按 钮 被 选 时 的 取 值 当 用 户 提 交 表 单 时, 该 值 被 传 送 给 处 理 程 序 ( 如 CGI 脚 本 ), 应 赋 给 同 组 的 每 个 单 选 按 钮 不 同 的 值 初 始 状 态 : 指 定 首 次 载 入 表 单 时 单 选 按 钮 是 已 勾 选 还 是 未 勾 选 一 组 单 选 按 钮 中, 只 能 有 一 个 按 钮 的 初 始 状 态 被 设 为 选 中 在 选 定 值 文 本 框 中 可 以 设 置 按 钮 被 选 中 时 的 取 值, 在 传 送 表 单 时, 传 送 的 不 是 在 网 页 上 的 显 示 值 或 文 本, 而 是 选 定 值 框 中 的 值 所 以 在 设 置 单 选 按 钮 的 属 性 时, 必 须 把 选 定 值 属 性 改 成 处 理 程 序 ( 如 CGI 脚 本 ) 相 匹 配 的 值 3. 插 入 并 设 置 复 选 框 (1) 插 入 复 选 框 首 先 将 光 标 置 于 表 单 中 的 相 应 位 置, 输 入 提 示 信 息 兴 趣, 再 给 复 - 97 -
网 页 制 作 基 础 教 程 选 框 添 加 说 明 性 语 言, 如 读 书 旅 游 体 育 和 音 乐 然 后 单 击 插 入 表 单 面 板 上 的 插 入 复 选 框 的 图 标, 或 者 选 择 插 入 表 单 对 象 复 选 框 命 令, 在 选 项 的 合 适 位 置 加 入 复 选 框 (2) 设 置 复 选 框 的 属 性 在 表 单 中 选 择 复 选 框 后, 其 属 性 面 板 的 显 示 与 单 选 按 钮 属 性 面 板 基 本 相 同 ( 只 是 图 标 不 同 ) 但 在 给 复 选 框 命 名 时, 要 注 意 复 选 框 与 单 选 按 钮 命 令 的 区 别, 单 选 按 钮 是 以 组 为 单 位 的, 而 复 选 框 则 是 以 个 为 单 位 的, 所 以 每 一 个 复 选 框 的 名 称 都 不 应 该 相 同 在 指 定 复 选 框 的 选 定 值 时, 由 于 一 组 复 选 框 中 可 以 有 多 个 选 项 被 选 中, 所 以 在 指 定 选 定 值 时 也 应 输 入 能 代 表 选 项 意 义 的 值 如 图 4-5 所 示 图 4-5 添 加 复 选 框 的 效 果 4. 插 入 并 设 置 下 拉 列 表 框 (1) 插 入 下 拉 列 表 框 要 在 表 单 中 插 入 下 拉 列 表 框, 应 按 照 以 下 步 骤 进 行 : 1) 首 先 将 光 标 置 于 表 单 中 的 相 应 位 置, 输 入 提 示 信 息 * 学 历 2) 单 击 插 入 表 单 面 板 上 的 插 入 列 表 / 菜 单 图 标, 或 者 选 择 插 入 表 单 对 象 列 表 / 菜 单 命 令, 则 在 表 单 中 出 现 下 拉 列 表 框 的 框 架 选 中 该 下 拉 列 表 框, 属 性 面 板 变 成 下 拉 列 表 属 性 面 板 3) 选 择 类 型 为 列 表, 单 击 属 性 面 板 上 的 列 表 值 按 钮 ( 确 保 下 拉 列 表 框 处 于 选 择 状 态 ), 弹 出 列 表 值 对 话 框 4) 在 列 表 值 对 话 框 的 项 目 标 签 下 输 入 要 在 列 表 框 中 显 示 的 内 容, 在 值 下 输 入 与 显 示 内 容 相 应 的 值 ( 传 送 到 服 务 器 中 的 即 为 该 值 ), 即 可 为 列 表 框 加 入 显 示 的 内 容 列 表 值 对 话 框 中 各 项 的 意 义 如 下 : - 98 -
第 4 章 Dreamweaver CS3 高 级 篇 +/- 图 标 : 用 来 增 加 或 删 除 列 表 值 项 目 标 签 : 该 标 签 将 作 为 列 表 中 的 显 示 项 值 : 列 表 项 的 值, 当 在 列 表 中 选 中 相 应 的 列 表 时, 该 值 将 传 送 到 服 务 器 中 进 行 处 理 上 移 / 下 移 图 标 : 单 击 该 图 标 可 以 移 动 列 表 项 的 顺 序 在 项 目 标 签 中 依 次 输 入 : 大 专 大 学 硕 士 博 士, 此 时 属 性 面 板 设 定 初 始 化 时 选 定 为 大 专, 并 设 定 选 定 范 围 为 不 允 许 多 选, 即 不 选 择 允 许 多 选 复 选 框 按 照 上 述 方 法 插 入 * 婚 姻 * 状 况 和 * 职 业 下 拉 列 表 框, 并 添 加 内 容, 如 图 4-6 所 示 图 4-6 添 加 下 拉 列 表 框 的 效 果 (2) 设 置 下 拉 列 表 框 的 属 性 在 表 单 中 插 入 下 拉 列 表 框 后, 选 择 所 插 入 的 下 拉 列 表 框, 其 属 性 面 板 中 各 项 的 含 义 如 下 : 列 表 / 菜 单 : 给 列 表 或 菜 单 命 名 该 项 必 须 设 置, 且 名 称 必 须 唯 一 类 型 : 表 示 此 元 素 是 下 拉 列 表 框 还 是 菜 单 列 表 框 列 表 表 示 创 建 下 拉 列 表 框, 菜 单 表 示 创 建 菜 单 列 表 框 选 择 范 围 : 对 下 拉 列 表 框 中 选 择 的 设 置 如 选 中 其 后 的 允 许 多 选 选 项, 则 表 示 在 下 拉 列 表 框 中 可 以 选 择 多 个 选 项 高 度 : 菜 单 列 表 框 的 高 度, 即 在 不 滚 动 的 情 况 下 显 示 出 来 的 选 项 数 初 始 化 时 选 定 : 首 次 载 入 列 表 时 出 现 的 值 列 表 值 : 打 开 列 表 值 对 话 框, 在 此 对 话 框 中 即 可 设 定 列 表 项 根 据 要 求 完 成 下 拉 列 表 框 各 项 属 性 的 设 置 5. 插 入 按 钮 (1) 插 入 提 交 按 钮 首 先 将 光 标 置 于 要 插 入 按 钮 的 表 单 中, 单 击 插 入 表 单 面 板 - 99 -
网 页 制 作 基 础 教 程 中 的 插 入 按 钮 图 标, 或 者 选 择 插 入 表 单 对 象 按 钮 命 令, 则 在 表 单 中 插 入 一 个 提 交 按 钮 如 图 4-7 所 示 (2) 插 入 重 置 按 钮 要 在 网 页 中 插 入 重 置 按 钮, 则 首 先 在 表 单 中 插 入 提 交 按 钮, 选 中 此 按 钮, 在 属 性 面 板 的 动 作 下 单 击 重 设 表 单 单 选 按 钮, 则 在 表 单 中 出 现 重 置 按 钮 (3) 插 入 普 通 按 钮 普 通 按 钮 的 创 建 方 法 与 重 置 按 钮 的 创 建 方 法 基 本 相 同, 但 在 属 性 面 板 上 的 动 作 下 要 选 择 单 选 按 钮 无 图 4-7 插 入 提 交 按 钮 (4) 按 钮 属 性 设 置 表 单 中 的 3 种 按 钮 可 以 通 过 选 择 属 性 面 板 动 作 中 的 不 同 选 项 实 现 相 互 交 换 按 钮 的 属 性 面 板 中 各 项 的 含 义 如 下 : 按 钮 名 称 :Dreamweaver 有 两 个 保 留 名 称 提 交 和 重 置 提 交 指 示 域 给 处 理 程 序 或 脚 本 ; 重 置 恢 复 所 有 表 单 域 为 它 们 各 自 的 初 始 值 标 签 : 显 示 在 按 钮 上 的 文 本 动 作 : 确 定 按 钮 被 单 击 发 生 什 么 动 作, 本 属 性 有 3 个 单 选 按 钮 供 选 择 提 交 表 单 : 单 击 该 按 钮 时, 将 向 服 务 器 发 送 表 单 数 据 重 设 表 单 : 单 击 该 按 钮 时, 表 单 中 各 元 素 值 都 将 变 成 刚 载 入 时 的 数 据 无 : 单 击 该 按 钮 时, 不 发 生 任 何 动 作, 提 交 和 重 置 动 作 都 不 发 生 按 照 上 述 方 法 插 入 注 册 和 重 填 按 钮, 即 可 得 到 完 整 的 同 学 录 注 册 网 页 6. 设 置 表 单 的 背 景 颜 色 因 为 表 单 是 以 表 格 形 式 创 建 的, 所 以 可 以 通 过 设 置 表 格 的 背 景 颜 色 来 设 置 表 单 的 背 景 颜 色 下 面 通 过 设 置 同 学 录 注 册 的 背 景 颜 色 来 说 明 设 置 表 单 背 景 颜 色 的 方 法 选 中 表 格 的 每 一 行, 通 过 单 元 格 属 性 面 板 设 置 单 元 格 的 背 景 颜 色 设 置 完 背 景 颜 色, 同 学 录 注 册 表 单 基 本 上 完 成 了 如 图 4-8 所 示 - 100 -
第 4 章 Dreamweaver CS3 高 级 篇 图 4-8 同 学 录 注 册 表 单 的 效 果 4.2 利 用 图 层 技 术 制 作 网 页 4.2.1 认 识 图 层 图 层 又 称 层, 是 Dreamweaver CS3 中 最 有 价 值 的 对 象 之 一, 是 由 层 叠 式 表 发 展 过 来 的, 提 供 了 一 种 对 网 页 对 象 进 行 有 效 控 制 的 手 段 层 可 以 包 含 文 本 图 像 表 单 插 件, 甚 至 层 内 还 可 以 包 含 其 他 层, 即 在 HTML 文 档 的 正 文 部 分 可 以 放 置 的 元 素 都 可 以 放 入 层 内 由 于 层 可 以 放 置 在 网 页 的 任 何 位 置, 从 而 能 有 效 地 控 制 网 页 中 的 对 象 层 是 在 制 作 网 页 时 经 常 用 到 的 对 象, 元 素 的 定 位 就 是 一 个 简 单 的 应 用 用 表 格 来 对 网 页 进 行 排 版 非 常 方 便, 但 有 时 需 要 在 文 字 上 放 一 些 图 片 之 类 的 元 素, 表 格 就 不 能 胜 任 了, 这 时 就 可 以 利 用 图 层 来 排 版 图 层 可 以 重 叠 地 放 置, 制 作 出 层 叠 的 效 果 也 可 以 控 制 层 的 显 示 或 隐 藏, 实 现 交 互 技 术 配 合 时 间 轴 的 使 用, 还 可 以 同 时 移 动 一 个 或 多 个 图 层, 轻 松 制 作 出 动 态 效 果 4.2.2 图 层 的 基 本 操 作 有 关 图 层 的 基 本 操 作 包 括 创 建 图 层 选 择 图 层 激 活 图 层 移 动 图 层 复 制 图 层 调 整 图 层 的 大 小 对 其 图 层 和 设 置 图 层 的 背 景 等 1. 插 入 图 层 在 利 用 Dreamweaver CS3 制 作 网 页 时, 如 果 需 要 在 网 页 中 创 建 图 层, 可 以 执 行 一 下 操 作 之 一 : 将 光 标 放 置 在 文 档 窗 口 中 需 要 插 入 层 的 位 置, 然 后 执 行 菜 单 布 局 绘 制 AP Div 命 令 打 开 插 入 常 用 面 板, 单 击 该 面 板 上 的 插 入 图 层 图 标, 然 后 释 放 鼠 标, 鼠 标 会 变 - 101 -
网 页 制 作 基 础 教 程 成 + 形 状, 用 鼠 标 在 页 面 中 绘 制 一 个 矩 形 来 创 建 层 如 果 需 要 绘 制 多 个 层, 在 单 击 绘 制 AP Div 图 标 的 同 时 按 住 Ctrl 键, 在 文 档 窗 口 中 绘 制 一 个 层, 只 要 不 释 放 Ctrl 键, 就 可 以 连 续 画 多 个 层 如 图 4-9 所 示 图 4-9 插 入 图 层 创 建 完 层 后, 在 页 面 中 会 出 现 一 个 层 标 志, 且 有 一 个 矩 形 的 层 出 现 单 击 层 标 志, 其 属 性 面 板 中 各 项 的 含 义 如 下 : 层 编 号 : 用 于 设 置 层 的 名 称, 只 能 使 用 英 文 字 母 或 数 字 左 : 指 定 层 左 边 边 框 在 文 档 中 所 处 的 位 置, 可 以 用 像 素 点 英 寸 毫 米 厘 米 等 计 量 单 位, 系 统 默 认 的 计 量 单 位 为 像 素 上 : 指 定 层 顶 部 边 框 与 页 面 或 上 一 级 图 层 的 距 离 宽 和 高 : 用 于 指 定 层 的 宽 度 和 高 度, 如 果 层 的 内 容 超 出 指 定 的 大 小, 则 超 出 部 分 内 容 将 自 动 被 剪 切 掉 Z 轴 : 在 层 重 叠 时 使 用, 用 于 指 定 层 的 Z 轴 编 号,Z 轴 编 号 较 大 的 层 出 现 在 编 号 较 小 的 层 的 上 面 显 示 : 用 于 控 制 层 的 初 始 显 示 状 态 有 四 个 选 项 :default 表 示 默 认 值, 不 指 定 层 的 可 见 属 性 ;inherit 表 示 继 承 父 图 层 的 可 见 属 性 ;visible 表 示 不 考 虑 父 图 层 的 值, 显 示 指 定 层 的 内 容 ;hidden 表 示 不 考 虑 父 图 层 的 值, 隐 藏 指 定 层 的 内 容 背 景 图 像 : 用 于 设 置 层 的 背 景 图 像 背 景 颜 色 : 用 于 设 置 层 的 背 景 颜 色 标 签 : 用 于 指 定 层 使 用 的 标 记 溢 出 : 用 于 设 置 层 的 内 容 超 出 了 它 的 大 小 后 以 何 种 方 式 显 示, 该 选 项 仅 适 用 与 CSS 层 剪 切 : 用 于 设 置 层 中 被 剪 切 掉 的 范 围, 左 右 上 下 分 别 表 示 对 层 内 容 剪 切 后 剩 余 的 可 见 部 分 的 左 边 界 或 右 边 界 到 层 的 左 边 框 上 边 界 或 下 边 界 到 层 的 上 边 框 的 距 离 2. 创 建 嵌 套 图 层 图 层 嵌 套 是 指 在 一 个 图 层 的 内 部 创 建 另 一 个 图 层, 可 以 用 嵌 套 的 方 法 将 多 个 图 层 组 合 在 一 起 使 用 嵌 套 层 的 目 的 通 常 是 为 了 将 多 个 图 层 组 成 群 组, 这 样 一 来, 只 要 移 动 父 层, 其 中 的 子 层 也 会 一 起 移 动, 而 且 子 层 还 会 继 承 父 层 的 显 示 隐 藏 状 态, 其 可 见 性 与 父 层 保 持 一 致 这 在 网 页 制 作 动 态 网 页 时 十 分 有 用 创 建 嵌 套 层 通 常 有 以 下 2 种 方 法 : 直 接 创 建 嵌 套 层 先 创 建 一 个 层 为 父 层, 然 后 在 父 层 内 创 建 的 层 称 为 子 层 在 图 层 面 板 中 也 可 以 看 出 层 2 是 层 1 的 子 层 - 102 -
第 4 章 Dreamweaver CS3 高 级 篇 将 已 有 的 多 个 层 变 为 嵌 套 层 打 开 图 层 面 板, 在 层 列 表 中 将 需 要 作 为 子 层 的 层 选 中, 按 住 Ctrl 键 将 该 层 拖 动 到 父 层 上, 释 放 鼠 标 即 可 4.2.3 选 择 图 层 1. 选 择 一 个 图 层 选 择 图 层 的 目 的 是 便 于 层 的 对 齐 重 定 位 和 缩 放, 还 可 以 为 图 层 添 加 背 景 图 像 和 背 景 颜 色 在 Dreamweaver CS3 中 要 选 择 一 个 层, 可 以 使 用 如 下 方 法 之 一 : 单 击 层 标 志 单 击 层 的 任 意 边 框 线 打 开 图 层 面 板, 单 击 该 面 板 中 需 要 选 择 的 层 的 名 称 选 择 层 后, 层 的 四 周 出 现 8 个 调 控 点, 且 层 的 标 志 反 色 显 示 在 图 层 面 板 中 层 以 名 称 列 表 的 形 式 显 示, 先 创 建 的 层 位 于 图 层 面 板 的 底 部, 最 后 创 建 的 层 位 于 图 层 面 板 的 顶 部 选 择 图 层 面 板 中 的 防 止 重 叠 复 选 框, 可 以 防 止 层 重 叠 ; 单 击 眼 睛 图 标, 图 标 是 睁 眼 时, 显 示 层 可 见, 图 标 为 闭 眼 时, 显 示 层 不 可 见 ; 单 击 Z 列 需 要 改 变 层 的 数 字, 可 以 改 变 层 的 堆 叠 顺 序, 数 字 越 大, 该 层 在 堆 叠 顺 序 中 越 往 后 移, 反 之 亦 然 2. 选 择 多 个 图 层 如 果 要 同 时 选 择 多 个 图 层 后, 可 以 按 住 Shift 键, 再 执 行 上 述 操 作 之 一 注 意 : 当 选 择 了 多 个 图 层 后, 最 后 选 择 的 图 层 标 记 高 亮 显 示, 同 时 调 控 点 显 示 为 黑 色, 其 他 图 层 的 调 控 点 显 示 为 白 色 如 图 4-10 所 示 图 4-10 选 择 多 个 图 层 4.2.4 激 活 图 层 如 果 需 要 在 图 层 中 插 入 对 象, 必 须 激 活 图 层 把 鼠 标 指 针 移 动 到 层 内 的 任 何 地 方 单 击, 即 可 激 活 该 图 层 此 时, 插 入 点 位 于 图 层 内, 被 激 活 图 层 的 边 界 突 出 显 示, 选 中 手 柄 也 同 时 显 示 出 来 注 意 : 激 活 图 层 的 操 作 不 同 于 选 择 图 层 - 103 -
网 页 制 作 基 础 教 程 4.2.5 移 动 图 层 移 动 图 层 的 目 的 是 改 变 图 层 的 坐 标 位 置, 使 图 层 中 的 内 容 可 以 在 网 页 上 任 意 移 动 在 文 档 中 要 移 动 一 个 图 层, 可 以 执 行 以 下 操 作 之 一 : 先 选 择 层, 然 后 在 该 层 的 选 择 手 柄 上 按 住 鼠 标 左 键 并 拖 动, 则 可 以 移 动 层 将 鼠 标 指 针 移 动 到 需 要 移 动 层 的 边 框 位 置, 当 鼠 标 指 针 形 状 变 为 四 个 箭 头 时, 按 住 鼠 标 左 键 并 拖 动, 则 可 移 动 层 在 属 性 面 板 中 直 接 设 置 左 上 的 数 值, 也 可 以 移 动 层 利 用 键 盘, 每 按 一 次 方 向 将, 则 移 动 一 个 像 素 单 位 ; 若 在 按 Shift 键 时 同 时 按 一 次 方 向 键, 则 移 动 一 个 网 格 单 位 注 意 : 层 属 性 面 板 中 的 左 和 上 是 以 页 面 或 父 图 层 ( 嵌 套 层 ) 左 边 和 顶 部 的 位 置 (0,0) 为 坐 标 起 点 的 如 果 同 时 选 择 多 个 层, 在 最 后 一 个 被 选 择 层 的 手 柄 上 按 住 鼠 标 左 键 并 拖 动 来 移 动 该 层, 则 其 他 被 选 择 的 层 也 跟 着 移 动 4.2.6 调 整 图 层 的 大 小 1. 调 整 单 个 图 层 的 大 小 在 文 档 中 要 调 整 一 个 图 层 的 大 小, 可 以 执 行 如 下 操 作 之 一 : 拖 拽 层 : 选 择 层, 拖 拽 图 层 的 调 控 点 上 下 调 控 点 只 能 调 整 层 的 高 度, 左 右 调 控 点 只 能 调 整 层 的 宽 度, 四 角 的 调 控 点 能 同 时 调 整 层 的 高 度 和 宽 度 在 层 属 性 面 板 中 设 置 宽 和 高 的 数 值 利 用 键 盘 来 调 整 图 层 的 大 小 选 择 要 调 整 的 图 层, 按 Ctrl+ 方 向 键, 每 次 调 整 一 个 像 素 单 位 按 Ctrl+Shift+ 方 向 键, 每 次 调 整 一 个 网 格 单 位 2. 调 整 多 个 图 层 的 大 小 在 文 档 中 要 调 整 多 个 图 层 的 大 小, 可 以 执 行 如 下 操 作 之 一 : 在 设 计 视 图 中 按 Shift 键 选 择 多 个 图 层, 单 击 修 改 对 齐 设 成 宽 度 相 同 或 设 成 高 度 相 同 命 令 选 择 要 调 整 的 图 层, 打 开 其 属 性 面 板 在 属 性 面 板 的 多 个 层 的 高 和 宽 文 本 框 中 修 改 所 有 选 中 层 的 宽 度 值 和 高 度 值 注 意 : 多 个 图 层 调 整 后 的 高 度 和 宽 度 以 最 后 一 个 被 选 中 的 图 层 的 ( 黑 色 突 出 显 示 ) 宽 度 或 高 度 为 基 准 4.2.7 对 齐 图 层 文 档 窗 口 中 有 多 个 图 层, 可 以 选 择 这 些 图 层, 然 后 使 用 图 层 对 齐 命 令 使 被 选 择 的 多 个 图 层 与 最 后 被 选 择 的 图 层 边 框 对 齐 对 齐 多 个 层 的 方 法 是 在 文 档 窗 口 中 选 中 需 要 对 齐 的 图 层, 执 行 修 改 对 齐 命 令, 选 择 对 齐 方 式 中 的 一 种 : 左 对 齐 右 对 齐 对 齐 上 缘 对 齐 下 院 设 成 宽 度 相 同 设 成 高 度 相 同 注 意 : 在 对 齐 图 层 时, 没 有 选 择 的 子 图 层 会 因 为 其 父 图 层 的 移 动 而 移 动 - 104 -
第 4 章 Dreamweaver CS3 高 级 篇 4.2.8 Dreamweaver CS3 中 使 用 层 的 一 些 技 巧 (1) 假 如 要 嵌 套 层, 决 不 要 使 用 多 重 父 层, 应 共 享 一 个 共 同 的 单 一 父 层 假 如 必 须 使 用 未 在 样 式 表 中 作 完 全 限 定 的 嵌 套 层, 应 在 Netscape 4.x 中 做 经 常 地 检 查 (2) 总 是 将 文 本 放 在 层 中 的 一 个 表 格 里, 表 格 应 该 是 绝 对 大 小 ( 以 像 素 为 单 位, 而 不 是 百 分 比 ) 且 不 大 于 层, 不 过 主 表 中 的 嵌 套 表 可 以 设 置 为 相 对 的 百 分 比 大 小 这 样 做 可 以 防 止 当 窗 口 大 小 改 变 时,NC4xx 会 重 新 调 整 文 字 到 不 可 预 期 的 位 置 (3) 决 不 放 置 层 在 表 格 中 Netscape 4.x 将 不 能 正 确 地 理 解 表 格 中 的 层 (4) 总 是 使 用 Netscape Resize Fix 这 个 插 件 于 任 何 具 有 层 或 CSS 样 式 的 页 面 (5) 不 要 期 望 当 浏 览 器 窗 口 大 小 或 屏 幕 分 辨 率 发 生 变 化 后, 绝 对 定 位 的 层 仍 能 保 持 与 居 中 的 表 格 或 页 面 内 容 的 对 齐 有 插 件 可 用 来 动 态 地 实 现 这 个 效 果 (6) 不 要 试 图 在 层 中 放 置 滚 动 条 ( 用 overflow 属 性 ), 使 用 一 个 DHTML 滚 动 器 或 者 Project Seven IFRAME 技 术 来 代 替, 对 于 Netscape 4.x 用 户, 可 以 在 IFRAME 中 设 置 一 个 特 定 的 弹 出 页 面 (7) 决 不 给 层 和 一 幅 图 像 相 同 的 命 名, 每 个 层 应 该 有 自 己 唯 一 的 并 区 别 于 页 面 中 的 其 他 元 素 的 名 字 ( 事 实 上, 不 应 该 让 两 个 具 有 相 同 名 称 的 元 素 出 现 在 同 一 个 页 面 中 ) (8) 不 要 直 接 对 层 应 用 事 件 或 行 为 它 们 将 不 能 跨 浏 览 器 地 工 作 应 用 它 们 到 层 中 的 内 容 ( 链 接 或 图 像 ) 而 不 是 层 自 身 4.2.9 图 层 的 管 理 图 层 的 命 名 在 默 认 的 情 况 下,Dreamweaver CS3 中 创 建 的 图 层 是 以 Layer 开 头 的, 如 Laryer1 Laryer2 Laryer3 等, 依 次 命 名 这 样 命 名 在 处 理 图 层 时 很 容 易 混 淆, 因 此 要 对 每 个 图 层 进 行 命 名 命 名 图 层 可 以 执 行 以 下 操 作 之 一 : 选 择 图 层, 在 其 属 性 面 板 的 层 编 号 文 本 框 中 输 入 图 层 名 称 打 开 图 层 面 板 双 击 要 命 名 图 层 的 名 称 栏, 使 之 处 于 可 编 辑 状 态, 输 入 图 层 名 称 改 变 图 层 的 可 见 性 图 层 可 以 设 置 为 显 示 或 隐 藏, 用 户 可 以 通 过 层 属 性 面 板 或 图 层 面 板 来 改 变 图 层 的 可 见 性 1. 改 变 单 个 图 层 的 可 见 性 若 要 更 改 单 个 层 的 可 见 性, 可 以 执 行 以 下 操 作 之 一 : 打 开 图 层 面 板, 单 击 图 层 面 板 中 一 个 层 的 眼 睛 图 标 以 更 改 其 可 见 性 眼 睛 睁 开 表 示 该 图 层 是 可 见 的 眼 睛 闭 合 表 示 该 层 时 不 可 见 的 如 果 未 指 定 可 见 性, 则 不 会 显 示 眼 睛 图 标, 表 示 默 认 可 见 性 默 认 情 况 下, 所 有 图 层 都 是 可 见 的 选 择 图 层, 在 其 属 性 面 板 的 显 示 栏 中 设 置 图 层 的 可 见 性 2. 改 变 所 有 图 层 的 可 见 性 若 要 同 时 更 改 所 有 图 层 的 可 见 性, 单 击 图 层 面 板 标 题 栏 的 眼 睛 图 标, 所 有 图 层 为 可 见 或 不 可 见 - 105 -
网 页 制 作 基 础 教 程 注 意 : 改 变 所 有 图 层 的 可 见 性 时, 可 以 将 所 有 层 设 置 为 可 见 或 隐 藏, 但 不 能 设 置 为 继 承 3. 改 变 图 层 的 叠 放 次 序 用 户 可 以 通 过 层 属 性 面 板 或 图 层 面 板 来 改 变 图 层 的 叠 放 次 序 利 用 图 层 面 板 调 整 图 层 的 叠 放 次 序 打 开 图 层 面 板, 把 光 标 放 置 到 要 改 变 位 置 的 层 的 名 称 上, 比 如 拖 动 Layer3 到 Layer1 下 面, 释 放 鼠 标,Layer3 便 移 动 到 最 底 端,Layer3 的 Z 值 由 3 变 成 1, 而 另 外 两 个 层 的 Z 值 都 在 原 来 值 的 基 础 上 加 1, 表 示 Layer3 现 在 位 于 其 他 两 个 层 的 下 面 利 用 层 属 性 面 板 调 整 图 层 的 叠 放 次 序 在 属 性 面 板 中 直 接 修 改 层 的 Z 轴 值 也 可 以 改 变 层 的 叠 放 次 序 可 以 在 文 本 框 中 输 入 数 值, 当 输 入 的 数 值 比 当 前 值 大 时, 表 示 图 层 的 叠 放 次 序 提 高 ; 当 输 入 的 数 值 比 当 前 数 值 小 时, 表 示 图 层 的 叠 放 次 序 降 低 如 果 把 Layer3 重 新 放 到 Layer1 Layer2 的 上 一 层, 则 需 要 使 Z 轴 的 值 大 于 3 4.2.10 图 层 与 表 格 图 层 和 表 格 都 可 以 用 来 进 行 页 面 定 位, 但 图 层 是 可 以 随 意 移 动 的, 应 用 图 层 进 行 页 面 设 计 更 快 捷 方 便 灵 活 但 图 层 只 有 在 较 高 版 本 的 浏 览 器 ( 如 Internet Explorer 4.0 或 Netscape Navigator 4.0 及 其 更 高 的 版 本 ) 中 才 能 够 正 确 显 示, 如 果 要 使 设 计 的 网 页 在 3.0 版 本 的 浏 览 器 中 也 能 正 确 显 示, 则 不 能 使 用 图 层 来 控 制 版 面 为 了 避 免 显 示 错 误, 可 以 先 用 图 层 来 快 速 创 建 复 杂 的 页 面 布 局, 然 后 再 把 图 层 布 局 转 换 为 表 格 布 局, 供 不 支 持 使 用 图 层 的 浏 览 器 浏 览 需 要 时, 也 可 以 进 行 图 层 和 表 格 的 相 互 转 换, 以 调 整 布 局 和 优 化 页 面 设 计 4.2.11 将 图 层 转 换 为 表 格 在 Dreamweaver CS3 中, 先 用 图 层 来 制 作 一 个 页 面, 再 选 择 修 改 转 换 将 AP Div 转 换 为 表 格 命 令, 弹 出 将 AP Div 转 换 为 表 格 对 话 框 如 图 4-11 所 示 图 4-11 将 AP Div 转 换 为 表 格 对 话 框 该 对 话 框 中 各 项 的 含 义 如 下 : 最 精 确 : 选 择 该 项, 则 每 一 层 建 立 一 个 表 格 单 元, 同 时 层 之 间 的 空 隙 也 建 立 相 应 的 单 元 格 - 106 -
第 4 章 Dreamweaver CS3 高 级 篇 最 小 : 合 并 空 白 单 元 选 择 该 项, 当 层 之 间 的 距 离 小 于 设 定 值 时, 则 这 些 空 隙 不 生 成 独 立 的 单 元 格, 它 们 被 合 并 在 较 近 的 层 生 成 的 单 元 格 中 使 用 透 明 GIFs: 如 果 选 择 该 项, 则 生 成 表 格 的 最 后 一 行 用 透 明 的 GIF 文 件 格 式 填 充, 这 样 在 不 同 的 浏 览 器 中 可 以 保 持 表 格 的 外 观 一 致 置 于 页 面 中 央 : 如 果 选 择 该 项, 则 生 成 表 格 在 文 档 窗 口 中 居 中 放 置 防 止 重 叠 : 如 果 选 择 该 项, 可 以 防 止 层 重 叠 显 示 AP 元 素 面 板 : 如 果 选 择 该 项, 转 换 后 可 以 显 示 图 层 面 板 显 示 网 格 : 如 果 选 择 该 项, 转 换 后 显 示 网 格 靠 齐 到 网 格 : 如 果 选 择 该 项, 启 动 吸 附 到 网 格 功 能 根 据 需 要 对 以 上 各 项 进 行 设 置, 设 置 完 毕 单 击 确 定 按 钮, 即 可 把 页 面 中 的 所 有 图 层 转 换 成 表 格 注 意 : 隐 藏 的 图 层 不 能 转 换 为 表 格 重 叠 的 层 不 允 许 转 换 为 表 格, 因 为 表 格 的 单 元 格 是 不 能 重 叠 的 在 模 板 文 档 或 已 应 用 的 文 档 中, 不 能 将 层 转 换 为 表 格 或 将 表 格 转 换 为 层, 即 应 该 在 非 模 板 文 档 中 创 建 布 局, 然 后 在 将 该 文 档 另 存 为 模 板 之 前 进 行 转 换 4.2.12 将 表 格 转 换 为 图 层 当 对 页 面 布 局 不 满 意 时, 必 须 进 行 调 整 如 果 是 使 用 表 格 布 局 的 页 面, 调 整 时 没 有 使 用 图 层 的 页 面 灵 活, 这 时 可 以 将 表 格 布 局 转 换 为 图 层 布 局, 再 进 行 调 整 将 表 格 转 换 为 图 层 的 步 骤 是 : 选 择 需 要 转 换 的 表 格, 执 行 修 改 转 换 将 表 格 转 换 AP Div 命 令, 弹 出 转 换 表 格 为 AP Div 对 话 框 ; 在 对 话 框 中 选 择 所 需 要 的 选 项 ( 各 项 的 含 义 同 转 换 AP Div 为 表 格 对 话 框 中 的 选 项 ), 单 击 确 定 按 钮, 选 中 的 表 格 转 换 为 层, 但 空 表 格 单 元 不 转 换, 表 格 之 外 的 内 容 也 被 置 于 图 层 中 注 意 : 如 果 文 档 应 用 了 模 板 或 模 板 文 档, 则 不 能 把 表 格 转 换 为 图 层 如 果 确 实 需 要 转 换, 可 以 在 存 为 模 板 之 前 先 进 行 转 换 4.3 CSS 样 式 CSS( 即 层 叠 样 式 表 ) 是 一 种 用 于 统 一 网 页 设 计 风 格 的 技 术, 合 理 使 用 CSS 不 但 能 够 减 少 设 计 代 码, 还 能 加 快 网 页 下 载 速 度 本 小 节 主 要 介 绍 CSS 样 式 的 基 础 知 识, 关 于 CSS 样 式 的 具 体 应 用, 将 在 以 后 章 节 中 结 合 其 他 实 例 来 介 绍 4.3.1 CSS 样 式 面 板 CSS 样 式 面 板 主 要 用 于 创 建 编 辑 和 删 除 CSS 样 式, 还 可 以 将 外 部 样 式 表 附 加 到 文 档 中 来 选 择 窗 口 CSS 样 式 命 令, 将 打 开 CSS 样 式 面 板 如 图 4-12 所 示 在 CSS 样 式 面 板 中, 可 以 查 看 与 当 前 文 档 相 关 联 的 CSS 样 式 及 其 层 次 结 构 CSS 样 式 面 板 可 以 显 示 自 定 义 CSS 样 式 重 定 义 的 HTML 标 签 和 CSS 选 择 器 样 式 的 规 则 定 义 此 外, 创 建 和 附 加 CSS 样 式 表 时, 样 式 的 名 称 和 属 性 也 会 出 现 在 CSS 样 式 面 板 中 - 107 -
网 页 制 作 基 础 教 程 CSS 样 式 面 板 列 出 了 所 有 样 式 标 签 中 定 义 的 所 有 选 择 器 以 及 外 部 链 接 或 导 入 的 样 式 表 图 4-12 CSS 样 式 面 板 展 开 CSS 样 式 面 板 中 的 样 式 后, 在 上 部 将 显 示 已 定 义 的 CSS 样 式 的 名 称, 下 方 则 显 示 选 择 CSS 样 式 的 具 体 属 性 4.3.2 自 动 创 建 CSS 样 式 Dreamweaver 提 供 了 多 种 创 建 CSS 样 式 的 方 法, 在 进 行 网 页 属 性 设 置 文 本 编 辑 等 操 作 时 会 自 动 创 建 CSS 样 式 1. 页 面 属 性 设 置 利 用 页 面 属 性 设 置 网 页 属 性 时, 实 际 上 是 同 时 应 用 了 一 种 CSS 内 部 文 档 头 方 式, Dreamweaver 会 自 动 将 页 面 属 性 设 置 生 成 一 段 CSS 样 式 代 码, 置 于 代 码 的 <head> 与 </head> 之 间 下 面 通 过 一 个 实 例 来 说 明 (1) 新 建 一 个 HTML 文 档, 单 击 页 面 属 性 按 钮, 打 开 页 面 属 性 对 话 框, 然 后 对 页 面 的 外 观 链 接 标 题 等 类 型 的 属 性 进 行 设 置 如 图 4-13 所 示, 设 置 完 成 后 单 击 确 定 按 钮 图 4-13 页 面 属 性 对 话 框 (2) 在 文 档 编 辑 窗 口 中 单 击 代 码 按 钮, 切 换 到 代 码 视 图, 便 可 以 看 到 对 页 面 属 性 所 进 行 的 设 置, 变 成 了 一 段 CSS 样 式 代 码 如 图 4-14 所 示 2. 文 本 编 辑 使 用 文 本 属 性 面 板 中 的 样 式 选 项, 可 以 对 文 字 的 字 体 颜 色 大 小 等 样 式 进 行 快 速 设 置, 如 图 4-15 所 示 设 置 样 式 时, 会 自 动 将 用 户 的 设 置 记 忆 生 成 Style 1 Style2 等 样 式 下 次 重 复 使 用 时, 只 需 要 直 接 在 样 式 列 表 中 套 用 样 式 - 108 -
第 4 章 Dreamweaver CS3 高 级 篇 图 4-14 CSS 样 式 代 码 图 4-15 样 式 属 性 面 板 4.3.3 创 建 新 的 CSS 样 式 要 创 建 新 的 CSS 样 式, 需 要 使 用 新 建 CSS 规 则 对 话 框, 如 图 4-16 所 示 打 开 新 建 CSS 规 则 对 话 框 的 方 法 有 以 下 几 种 : 在 CSS 样 式 面 板 中 单 击 面 板 右 下 角 区 域 中 的 新 建 CSS 规 则 从 主 菜 单 中 选 择 窗 口 CSS 样 式 新 建 命 令 图 4-16 新 建 CSS 规 则 对 话 框 CSS 样 式 包 括 类 标 签 高 级 3 个 选 项 类 选 项 用 于 创 建 自 定 义 CSS 样 式 类, 可 以 应 用 到 页 面 的 任 何 元 素 上 选 择 该 选 项 时, 需 要 在 名 称 文 本 框 中 输 入 英 文 字 母 或 句 点 开 头 的 字 母, 否 则 将 弹 出 警 告 提 示 重 定 义 标 签 选 项 用 于 重 新 定 义 HTML 标 签 的 显 示 样 式 选 择 该 选 项 后, 名 称 文 本 框 将 变 成 标 签 下 拉 列 表 框, 当 需 要 重 新 定 义 页 面 元 素 的 显 示 样 式 时 只 需 要 从 下 拉 列 表 框 中 选 择 对 应 的 元 素 标 签 即 可 重 定 义 标 签 后, 以 后 使 用 该 标 签 对 应 的 元 素 都 将 显 示 定 义 样 式 - 109 -
网 页 制 作 基 础 教 程 高 级 选 择 器 选 项 用 于 对 具 有 唯 一 ID 属 性 的 元 素 以 及 关 联 选 择 器 和 伪 类 选 择 器 进 行 格 式 化 设 置 其 作 用 是 同 时 定 义 多 个 元 素 或 者 限 制 某 个 样 式 只 出 现 指 定 标 签 中 ID 是 标 识 页 面 元 素 的 属 性, 在 为 页 面 元 素 命 名 时 必 须 使 用 唯 一 的 值 关 联 选 择 器 是 限 制 样 式 应 用 范 围 的 一 种 设 置, 可 以 把 自 定 义 类 重 定 义 标 签 和 ID 名 称 相 互 结 合 确 定 应 用 范 围 伪 类 选 择 器 是 该 高 级 选 项 的 默 认 值, 主 要 用 来 设 置 页 面 链 接 样 式 4.3.4 编 辑 CSS 样 式 创 建 CSS 样 式 后, 可 以 使 用 CSS 规 则 定 义 对 话 框 来 进 行 编 辑 处 理 如 图 4-17 所 示, CSS 规 则 定 义 对 话 框 中 提 供 的 选 项 很 多, 应 熟 悉 它 们 的 含 义 和 用 法 1. 定 义 CSS 类 型 在 CSS 规 则 定 义 对 话 框 中 选 择 类 型 类 别, 可 以 利 用 选 项 来 定 义 CSS 样 式 的 基 本 字 体 和 类 型 设 置 图 4-17 CSS 规 则 定 义 对 话 框 字 体 : 为 样 式 设 置 字 体 大 小 : 定 义 文 本 大 小, 可 以 通 过 选 择 数 字 和 度 量 单 位 选 择 特 定 的 大 小, 也 可 以 选 择 相 对 大 小 样 式 : 选 择 正 常 斜 体 或 偏 斜 体 等 选 项, 将 其 指 定 为 字 体 样 式, 默 认 设 置 是 正 常, 行 高 : 设 置 文 本 所 在 行 的 高 度 修 饰 : 向 文 本 中 添 加 下 划 线 上 划 线 或 删 除 线, 或 使 文 本 闪 烁 粗 细 : 对 字 体 应 用 特 定 或 相 对 的 粗 体 量 正 常 等 于 400, 粗 体 等 于 700 变 量 : 设 置 文 本 的 小 型 大 写 字 母 变 量 大 小 写 : 将 选 定 内 容 中 的 每 个 单 词 的 首 字 母 大 写 或 将 文 本 设 置 为 全 部 大 写 或 小 写 颜 色 : 设 置 文 本 颜 色 2. 定 义 CSS 样 式 背 景 属 性 在 CSS 规 则 定 义 对 话 框 中 选 择 背 景 类 别, 可 以 利 用 选 项 定 义 CSS 背 景 颜 色 如 - 110 -
第 4 章 Dreamweaver CS3 高 级 篇 图 4-18 所 示 图 4-18 定 义 CSS 背 景 颜 色 背 景 颜 色 : 设 置 元 素 的 背 景 颜 色 背 景 图 像 : 设 置 元 素 的 背 景 图 像 重 复 : 确 定 是 否 如 何 重 复 背 景 图 像 附 件 : 确 定 背 景 图 像 是 固 定 在 它 的 原 始 位 置 还 是 随 内 容 一 起 滚 动 水 平 位 置 和 垂 直 位 置 : 指 定 背 景 图 像 相 对 于 元 素 的 初 始 位 置, 可 以 用 于 背 景 图 像 与 页 面 中 心 垂 直 和 水 平 对 齐 3. 定 义 CSS 样 式 区 块 属 性 在 CSS 规 则 定 义 对 话 框 中 选 择 区 块 类 别, 可 以 利 用 如 图 4-19 所 示 的 选 项 来 定 义 标 签 和 属 性 的 间 距 和 对 齐 设 置 图 4-19 定 义 CSS 样 式 区 块 单 词 间 距 : 设 置 单 词 的 间 距 字 母 间 距 : 用 于 增 大 或 减 小 字 母 或 字 符 的 间 距 垂 直 对 齐 : 用 于 指 定 应 用 它 的 元 素 的 垂 直 对 齐 方 式 仅 当 应 用 于 <img> 标 签 时, Dreamweaver 才 在 文 档 窗 口 中 显 示 该 属 性 - 111 -
网 页 制 作 基 础 教 程 文 本 对 齐 : 用 于 设 置 元 素 中 的 文 本 对 齐 方 式 文 本 缩 进 : 用 于 指 定 第 一 行 文 本 缩 进 的 程 度 可 以 使 用 负 值 创 建 凸 出, 但 显 示 取 决 于 浏 览 器 仅 当 标 签 应 用 于 块 级 元 素 时,Dreamweaver 才 在 文 档 窗 口 中 显 示 该 属 性 空 格 : 用 于 确 定 如 何 处 理 元 素 中 的 空 白 包 括 了 正 常 保 留 和 不 换 行 3 个 选 项 选 择 正 常 表 示 收 缩 空 白 ; 选 择 保 留 表 示 保 留 所 有 空 白, 包 括 空 格 制 表 符 合 回 车 ; 选 择 不 换 行 表 示 仅 当 遇 到 br 标 签 时 文 本 才 换 行 显 示 : 用 于 指 定 是 否 以 及 如 何 显 示 元 素 选 择 无 时, 将 关 闭 它 被 指 定 给 的 元 素 的 显 示 4. 定 义 CSS 样 式 方 框 属 性 在 CSS 规 则 定 义 对 话 框 中 选 择 方 块 类 别, 可 以 利 用 如 图 4-20 所 示 的 选 项 为 控 制 元 素 在 页 面 上 的 放 置 方 式 的 标 签 和 属 性 定 义 设 置 图 4-20 定 义 CSS 样 式 方 框 宽 和 高 : 设 置 元 素 的 宽 度 和 高 度 浮 动 : 设 置 其 他 元 素 ( 如 文 本 层 表 格 等 ) 在 哪 个 边 围 绕 元 素 浮 动 其 他 元 素 按 通 常 的 方 式 围 绕 在 浮 动 的 元 素 周 围 清 除 : 定 义 不 允 许 层 的 边 如 果 清 除 边 上 出 现 层, 则 带 清 除 设 置 的 元 素 移 动 到 该 层 的 下 方 填 充 : 指 定 元 素 内 容 与 元 素 边 框 ( 如 果 没 有 边 框, 则 为 边 距 ) 之 间 的 间 距 取 消 选 择 全 部 相 同 选 项 可 设 置 元 素 各 个 边 的 填 充 选 择 全 部 相 同, 将 相 同 的 填 充 属 性 设 置 为 它 应 用 于 的 元 素 的 上 右 下 和 左 侧 边 界 : 指 定 一 个 元 素 的 边 框 ( 如 果 没 有 边 框, 则 为 填 充 ) 与 另 一 个 元 素 之 间 的 间 距 仅 当 应 用 于 块 级 元 素 ( 段 落 标 题 列 表 等 ) 时,Dreamweaver 才 在 文 档 窗 口 中 显 示 该 属 性 取 消 选 择 全 部 相 同 可 设 置 元 素 各 个 边 的 边 距 选 择 全 部 相 同, 将 相 同 的 边 距 属 性 设 置 为 它 应 用 于 元 素 的 上 右 下 和 左 侧 5. 定 义 CSS 样 式 边 框 属 性 在 CSS 规 则 定 义 对 话 框 中 选 边 框 类 别, 可 以 利 用 如 图 4-21 所 示 的 选 项 定 义 元 素 - 112 -
第 4 章 Dreamweaver CS3 高 级 篇 周 围 的 边 框 的 设 置 ( 如 宽 度 颜 色 和 样 式 ) 图 4-21 定 义 CSS 样 式 边 框 样 式 : 设 置 边 框 的 样 式 外 观, 样 式 的 显 示 方 式 取 决 于 浏 览 器 Dreamweaver 在 文 档 窗 口 中 将 所 有 样 式 呈 现 为 实 线 取 消 选 择 全 部 相 同 可 设 置 元 素 各 个 边 的 边 框 样 式 选 择 全 部 相 同, 将 相 同 的 边 框 样 式 属 性 设 置 为 它 应 用 于 的 元 素 的 上 右 下 和 左 侧 宽 度 : 设 置 元 素 边 框 的 粗 细 两 种 浏 览 器 都 支 持 宽 度 属 性 取 消 选 择 全 部 相 同 可 设 置 元 素 各 个 边 的 边 框 宽 度 选 择 全 部 相 同, 将 相 同 的 边 框 宽 度 设 置 为 它 应 用 于 的 元 素 的 上 右 下 和 左 侧 颜 色 : 设 置 边 框 的 颜 色 可 以 分 别 设 置 每 个 边 的 颜 色, 但 显 示 取 决 于 浏 览 器 取 消 选 择 全 部 相 同 可 设 置 元 素 各 个 边 的 边 框 颜 色 选 择 全 部 相 同, 将 相 同 的 边 框 颜 色 设 置 为 它 应 用 于 的 元 素 的 上 右 下 和 左 侧 6. 定 义 CSS 样 式 列 表 属 性 在 CSS 规 则 定 义 对 话 框 中 选 列 表 类 别, 可 以 利 用 如 图 4-22 所 示 的 选 项 为 列 表 标 签 定 义 列 表 设 置 ( 如 项 目 符 号 大 小 和 类 型 ) 图 4-22 定 义 CSS 样 式 列 表 - 113 -
网 页 制 作 基 础 教 程 类 型 : 设 置 项 目 符 号 或 编 号 的 外 观 项 目 符 号 图 像 : 可 以 为 项 目 符 号 指 定 自 定 义 图 像 单 击 浏 览 按 钮, 通 过 浏 览 器 选 择 图 像, 或 键 入 图 像 的 路 径 位 置 : 设 置 列 表 项 文 本 是 否 换 行 或 缩 进 ( 外 部 ) 以 及 文 本 是 否 换 行 到 左 边 距 ( 内 部 ) 7. 定 义 CSS 样 式 定 位 属 性 在 CSS 规 则 定 义 对 话 框 中 选 择 定 位 类 别, 可 以 利 用 如 图 4-23 所 示 的 选 项 为 样 式 属 性 使 用 层 首 选 参 数 中 定 义 层 的 默 认 标 签, 将 标 签 或 所 选 文 本 块 更 改 为 新 层 图 4-23 定 义 CSS 样 式 定 位 类 型 选 项 类 型 选 项 用 于 确 定 浏 览 器 应 如 何 来 定 位 层, 其 中 提 供 了 以 下 3 个 选 项 : 绝 对 : 使 用 定 位 框 中 输 入 坐 标 ( 相 对 于 页 面 左 上 角 ) 来 放 置 层 相 对 : 使 用 定 位 框 中 输 入 坐 标 ( 相 对 于 对 象 在 文 档 的 文 本 中 的 位 置 ) 来 放 置 层 该 选 项 不 显 示 在 文 档 窗 口 中 静 态 : 将 层 放 在 它 在 文 本 中 的 位 置 显 示 选 项 显 示 选 项 显 示 用 于 确 定 层 的 初 始 显 示 条 件 如 果 不 指 定 可 见 性 属 性, 则 默 认 情 况 下 大 多 数 浏 览 器 都 继 承 父 级 的 值 包 括 以 下 3 个 选 项 : 继 承 : 继 承 父 级 的 可 见 性 属 性 如 果 层 没 有 父 级, 则 它 将 是 可 见 的 可 见 : 显 示 该 层 的 内 容, 而 不 管 父 级 的 值 是 什 么 隐 藏 : 隐 藏 这 些 层 的 内 容, 而 不 管 父 级 的 值 是 什 么 Z 轴 Z 轴 用 于 确 定 层 的 堆 叠 顺 序 编 号 较 高 的 层 显 示 在 编 号 较 低 的 层 的 上 面 值 可 以 为 正, 也 可 以 为 负 溢 出 溢 出 仅 限 于 CSS 层, 确 定 在 层 的 内 容 超 出 它 的 大 小 时 发 生 的 情 况 这 些 属 性 控 制 如 何 处 理 此 扩 展, 包 括 以 下 4 个 选 项 : 可 见 : 增 加 层 的 大 小, 使 它 的 所 有 内 容 均 可 见 层 向 右 下 方 扩 展 隐 藏 : 保 持 层 的 大 小 并 剪 辑 任 何 超 出 的 内 容 不 提 供 任 何 滚 动 条 滚 动 : 在 层 中 添 加 滚 动 条, 不 论 内 容 是 否 超 出 层 的 大 小 专 门 提 供 滚 动 条 可 避 - 114 -
第 4 章 Dreamweaver CS3 高 级 篇 免 滚 动 条 在 动 态 环 境 中 出 现 和 消 失 所 引 起 的 混 乱 自 动 : 是 滚 动 条 仅 在 层 的 内 容 超 出 它 的 边 界 时 才 出 现 该 选 项 不 显 示 在 文 档 窗 口 中 定 位 定 位 指 定 层 的 位 置 和 大 小 浏 览 器 如 何 解 释 位 置 取 决 于 类 型 设 置 如 果 层 的 内 容 超 出 指 定 的 大 小, 则 大 小 值 被 覆 盖 位 置 和 大 小 的 默 认 单 位 是 像 素 对 于 CSS 层, 还 可 以 指 定 到 下 列 单 位 :pc( 十 二 点 活 字 ) pt( 点 ) in( 英 寸 ) mm( 毫 米 ) (ems) (exs) 或 %( 父 级 值 的 百 分 比 ) 缩 写 必 须 紧 跟 在 值 之 后, 中 间 不 能 留 空 格 : 例 如,3mm 剪 辑 剪 辑 用 于 定 义 层 的 可 见 部 分 如 果 指 定 了 剪 辑 区 域, 可 以 通 过 脚 本 语 言 ( 如 JavaScript) 访 问 它, 并 操 作 属 性 以 创 建 像 擦 除 这 样 的 特 殊 效 果 通 过 改 变 属 性 行 为 可 以 设 置 这 些 擦 除 效 果 8. 定 义 CSS 样 式 扩 展 属 性 在 CSS 规 则 定 义 对 话 框 中 选 扩 展 类 别, 如 图 4-24 所 示 可 以 利 用 其 中 的 选 项 定 义 扩 展 样 式 属 性, 如 过 滤 分 页 和 指 针 等 选 项 图 4-24 定 义 CSS 样 式 扩 展 分 页 : 在 打 印 期 间 在 样 式 所 控 制 的 对 象 之 前 或 者 之 后 强 行 分 页 选 择 要 在 弹 出 式 菜 单 中 设 置 的 选 项 光 标 : 当 指 针 位 于 样 式 所 控 制 的 对 象 上 时 改 变 指 针 图 像 选 择 要 在 弹 出 菜 单 中 设 置 的 选 项 滤 镜 : 对 样 式 所 控 制 的 对 象 应 用 特 殊 效 果 ( 包 括 模 糊 和 反 转 ) 4.3.5 链 接 到 外 部 CSS 样 式 表 在 编 辑 处 理 外 部 的 CSS 样 式 表 时, 链 接 到 该 CSS 样 式 表 的 所 有 文 档 都 将 更 新 以 反 映 所 做 的 编 辑 可 以 导 出 文 档 中 包 含 的 CSS 样 式, 以 创 建 新 的 CSS 样 式 表, 然 后 附 加 或 链 接 到 外 部 样 式 表 以 应 用 那 里 所 包 含 的 样 式 链 接 或 导 出 外 部 CSS 样 式 表 的 方 法 如 下 : (1) 打 开 CSS 样 式 面 板, 单 击 其 中 的 附 加 样 式 表 图 标, 将 出 现 链 接 外 部 样 式 表 对 话 框 - 115 -
网 页 制 作 基 础 教 程 (2) 在 附 加 外 部 样 式 表 对 话 框 中 单 击 浏 览 按 钮, 浏 览 到 外 部 CSS 样 式 表, 选 择 外 部 样 式 表 文 件, 或 者 在 文 件 /URL 文 本 框 中 输 入 样 式 表 的 路 径 (3) 单 击 预 览 按 钮, 确 认 样 式 表 是 否 将 所 需 的 样 式 应 用 于 当 前 页 面 (4) 如 果 应 用 的 样 式 没 有 达 到 预 期 效 果, 单 击 取 消 按 钮, 删 除 该 样 式 表 页 面 将 恢 复 到 原 来 的 外 观, 如 果 满 意, 则 单 击 确 定 按 钮, 完 成 到 外 部 样 式 表 的 链 接 在 链 接 外 部 样 式 表 对 话 框 中, 还 有 一 个 范 例 样 式 表 的 链 接, 单 击 此 链 接, 会 出 现 范 例 样 式 表 对 话 框, 在 该 对 话 框 中, 提 供 了 大 量 的 外 部 CSS 样 式 表, 可 以 选 择 一 个 自 己 需 要 的 作 为 外 部 CSS 链 接 4.4 使 用 行 为 使 用 行 为, 可 以 响 应 鼠 标 或 键 盘 的 一 些 动 作, 从 而 实 现 一 些 网 页 特 效 4.4.1 行 为 基 础 行 为 是 事 件 和 动 作 的 结 合, 行 为 被 规 定 附 属 于 用 户 页 面 上 的 某 个 特 定 的 元 素, 可 以 是 一 个 文 本 链 接 一 个 图 像 或 者 <body> 标 识 行 为 实 质 上 就 是 是 网 页 上 的 一 段 用 于 实 现 访 问 者 与 Web 页 交 互 的 JavaScript 代 码 使 用 行 为 面 板 可 以 指 定 动 作 及 触 发 该 动 作 的 事 件, 从 而 将 行 为 添 加 到 页 面 中 1. 事 件 事 件 可 以 是 任 何 与 使 用 者 在 一 个 链 接 上 单 击 同 样 具 有 交 互 性 的 事 物, 或 与 一 个 Web 页 的 载 入 过 程 同 样 自 动 化 的 某 件 事 情 实 际 上, 客 户 端 脚 本 程 序 要 处 理 的 内 容 就 是 操 作 Web 页 上 的 各 种 对 象, 并 通 过 响 应 各 种 事 件 ( 如 鼠 标 单 击 鼠 标 移 动 按 下 键 盘 按 键 等 ) 来 提 供 一 种 表 现 力 丰 富 的 具 有 交 互 功 能 的 用 户 界 面 比 如, 将 鼠 标 指 针 移 动 到 某 个 链 接 上 时, 浏 览 器 便 为 该 链 接 生 成 一 个 onmouseover( 鼠 标 经 过 ) 事 件, 然 后 浏 览 器 查 看 是 否 存 在 当 为 该 链 接 生 成 该 事 件 时 浏 览 器 应 该 调 用 的 JavaScript 代 码, 不 同 的 页 元 素 定 义 了 不 同 的 事 件 每 个 浏 览 器 都 提 供 了 一 组 事 件, 这 些 事 件 可 以 与 行 为 面 板 的 添 加 动 作 按 钮 + 下 拉 菜 单 中 列 出 的 动 作 相 关 联 当 用 户 进 行 单 击 按 钮 等 操 作 时, 即 产 生 了 一 个 事 件, 需 要 浏 览 器 进 行 处 理 浏 览 器 响 应 事 件 并 进 行 处 理 的 过 程 称 为 事 件 处 理, 进 行 这 种 的 代 码 称 为 事 件 响 应 函 数 通 常 浏 览 器 会 默 认 定 义 一 些 通 用 的 事 件 处 理, 以 便 响 应 那 些 最 基 本 的 事 件 例 如, 单 击 超 链 接 的 默 认 响 应 就 是 装 入 并 显 示 目 标 页 面, 单 击 表 单 中 的 提 交 按 钮 默 认 响 应 就 是 将 表 单 提 交 到 服 务 器 等 2. 动 作 动 作 是 由 预 先 编 写 的 JavaScript 代 码 组 成 的, 这 些 代 码 执 行 特 定 的 任 务, 例 如 打 开 浏 览 器 窗 口 显 示 或 隐 藏 层 播 放 声 音 或 停 止 Macromedia Shockwave 影 片 Dreamweaver CS3 自 身 提 供 的 一 些 动 作 由 Dreamweaver 工 程 师 精 心 编 写 的, 提 供 了 最 大 的 跨 浏 览 器 兼 容 性 浏 览 器 与 服 务 器 一 个 完 整 的 上 下 交 互 行 程 都 可 以 理 解 成 一 个 动 作 3. 事 件 与 动 作 的 关 系 在 将 行 为 附 加 到 页 元 素 之 后, 只 有 对 该 元 素 发 生 了 所 指 定 的 事 件, 浏 览 器 就 会 调 用 与 该 事 件 关 联 的 动 作 (JavaScript 代 码 ) 例 如, 如 果 将 播 放 声 音 动 作 附 加 到 某 个 链 接 并 指 定 它 - 116 -
第 4 章 Dreamweaver CS3 高 级 篇 将 由 onmouseover 事 件 触 发, 那 么 只 要 某 人 在 浏 览 器 中 用 鼠 标 指 针 指 向 该 链 接, 就 将 播 放 设 置 的 声 音 文 件 一 个 单 独 的 事 件 可 以 触 发 多 个 动 作, 用 户 不 会 在 向 单 个 事 件 中 附 加 多 个 相 同 动 作 的 实 体 时 受 到 限 制 这 些 动 作 发 生 的 顺 序 可 以 被 指 定 Dreamweaver CS3 带 有 20 多 个 跨 越 浏 览 器 兼 容 的 动 作, 同 时 第 三 方 开 发 者 已 经 开 发 出 许 多 附 加 的 可 用 的 动 作, 还 有 更 多 正 在 开 发 当 中 的 行 为 极 大 地 扩 展 了 现 代 Web 设 计 者 可 以 做 到 的 能 力 范 围, 而 不 用 学 习 如 何 编 写 JavaScript 程 序 4.4.2 行 为 面 板 利 用 行 为 面 板 可 以 在 Dreamweaver CS3 中 轻 松 设 计 出 相 对 应 的 JavaScript 代 码, 当 选 择 了 一 个 动 作, 并 结 束 了 相 应 的 对 话 框 操 作 后, 默 认 的 事 件 就 出 现 事 件 窗 格 中, 所 选 择 的 动 作 出 现 在 动 作 窗 格 中 通 过 单 击 默 认 事 件 旁 边 的 向 下 箭 头, 可 以 选 择 不 同 的 事 件 双 击 相 应 的 动 作, 打 开 相 关 的 参 数 窗 口, 可 以 修 改 动 作 的 属 性 利 用 行 为 面 板 可 在 网 页 上 实 现 一 系 列 在 客 户 端 发 生 的 行 为 动 作 可 在 菜 单 栏 中 选 择 窗 口 行 为 命 令 或 使 用 快 捷 键 F8 键 打 开 行 为 面 板, 如 图 4-25 所 示, 在 该 面 板 上 主 要 包 括 显 示 设 置 事 件 显 示 所 有 事 件 添 加 动 作 删 除 动 作 向 上 移 动 向 下 移 动 六 个 按 钮, 现 将 其 主 要 功 能 和 使 用 方 法 介 绍 如 下 : 显 示 设 置 事 件 : 仅 显 示 附 加 到 当 前 文 档 的 那 些 事 件 事 件 被 分 别 划 归 到 客 户 端 或 服 务 器 端 类 别 中 每 个 类 别 的 事 件 都 包 含 一 个 可 以 折 叠 的 列 表 中, 可 以 单 击 类 别 名 称 旁 边 的 加 号 或 减 号 按 钮 展 开 或 折 叠 该 列 表 显 示 设 置 事 件 是 默 认 的 视 图, 如 图 4-26 所 示, 是 一 个 网 页 上 存 在 三 个 设 置 事 件 在 行 为 面 板 中 的 显 示 效 果 图 4-25 行 为 面 板 图 4-26 网 页 上 存 在 的 三 个 设 置 事 件 显 示 所 有 事 件 : 单 击 显 示 所 有 事 件, 会 在 行 为 面 板 中 按 字 母 降 序 显 示 给 定 类 别 的 所 有 事 件, 当 然 也 包 括 在 网 页 中 已 经 设 置 的 事 件, 如 图 4-27 所 示 添 加 动 作 + : 单 击 添 加 动 作 图 标 会 出 现 一 个 添 加 动 作 菜 单, 如 图 4-28 所 示, 其 中 包 含 可 以 附 加 到 当 前 所 选 元 素 的 动 作 当 从 该 列 表 中 选 择 一 个 动 作 时, 将 出 现 一 个 对 话 框, 在 该 对 话 框 中 可 以 指 定 该 动 作 的 参 数 如 果 所 有 动 作 都 灰 显, 则 没 有 所 选 元 素 可 以 生 成 的 事 件 删 除 动 作 - : 单 击 删 除 动 作 图 标 可 以 从 行 为 列 表 中 删 除 所 选 的 事 件 和 动 作 上 下 箭 头 图 标 : 将 特 定 事 件 的 所 选 动 作 在 行 为 列 表 中 向 上 或 向 下 移 动 给 定 事 件 的 - 117 -
网 页 制 作 基 础 教 程 动 作 是 以 特 定 的 顺 序 指 定 的 图 4-27 显 示 所 有 事 件 图 4-28 添 加 动 作 菜 单 行 为 类 表 框 : 页 面 上 添 加 的 行 为 会 显 示 在 行 为 列 表 中, 当 单 击 行 为 列 表 框 中 所 选 事 件 名 称 旁 边 的 箭 头 按 钮 时, 会 出 现 一 个 下 拉 列 表 菜 单, 其 中 包 括 可 以 触 发 该 动 作 的 所 有 事 件 只 有 在 选 择 了 行 为 列 表 中 的 某 个 事 件 时 才 显 示 此 菜 单 显 示 事 件 : 显 示 事 件 指 添 加 行 为 菜 单 中 的 子 菜 单, 指 定 当 前 行 为 应 该 在 其 中 作 用 的 浏 览 器 在 此 菜 单 中 进 行 的 选 择 确 定 哪 些 事 件 将 显 示 在 事 件 出 现 菜 单 中 4.4.3 行 为 操 作 通 过 行 为 面 板 上 的 添 加 行 为 菜 单, 可 以 将 行 为 附 加 到 整 个 文 档, 也 可 以 附 加 到 链 接 图 像 表 单 元 素 或 多 种 其 他 HTML 元 素 的 任 何 一 种 Dreamweaver CS3 自 带 的 行 为 动 作 非 常 丰 富, 能 够 满 足 多 数 人 制 作 网 页 时 对 这 些 行 为 的 需 要, 以 下 是 Dreamweaver CS3 自 带 的 一 些 行 为 : 调 用 JavaScript 改 变 属 性 检 查 浏 览 器 检 查 插 件 控 制 Shockwave 或 Flash 设 置 文 本 拖 动 层 转 到 URL 打 开 浏 览 器 窗 口 出 现 信 息 预 先 载 入 图 像 显 示 / 隐 藏 层 - 118 -
第 4 章 Dreamweaver CS3 高 级 篇 交 换 图 像 设 置 导 航 条 图 像 检 查 表 单 1. 调 用 JavaScript 行 为 用 户 如 果 觉 得 Dreamweaver 内 部 集 成 的 可 供 调 用 的 JavaScript 不 能 适 合 自 己 的 需 要, 则 可 以 使 用 调 用 JavaScript 动 作 自 己 编 写 JavaScript 或 使 用 Web 上 多 个 免 费 的 JavaScript 库 中 提 供 的 代 码 调 用 JavaScript 动 作 允 许 使 用 行 为 面 板 指 定 当 发 生 某 个 事 件 时 应 该 执 行 的 自 定 义 函 数 或 JavaScript 代 码 行 调 用 JavaScript 的 基 本 操 作 方 法 如 下 : (1) 在 编 辑 窗 口 中 选 择 用 于 触 发 动 作 的 对 象 (2) 在 行 为 面 板 中 单 击 添 加 动 作 按 钮, 选 择 调 用 JavaScript 动 作 (3) 在 调 用 JavaScript 对 话 框 中 输 入 JavaScript 代 码 或 函 数 名 称 到 文 本 框 中 (4) 单 击 确 定 按 钮 2. 改 变 属 性 行 为 使 用 改 变 属 性 动 作 可 以 更 改 对 象 某 个 属 性 的 值 基 本 操 作 方 法 如 下 : (1) 选 择 用 来 触 发 动 作 的 对 象 (2) 在 行 为 面 板 中 单 击 添 加 动 作 按 钮, 在 出 现 的 菜 单 中 选 择 更 改 属 性 动 作, 出 现 改 变 属 性 对 话 框, 如 图 4-29 所 示, 根 据 需 要 对 该 对 话 框 进 行 设 置 图 4-29 改 变 属 性 对 话 框 (3) 在 元 素 类 型 下 拉 列 表 中 选 择 一 种 对 象 类 型 (4) 在 元 素 下 拉 列 表 中 选 择 想 要 的 页 面 对 象 (5) 在 属 性 栏 的 选 择 右 侧 较 远 处 的 下 拉 列 表 中 选 择 目 标 浏 览 器, 然 后 选 择 要 改 变 的 属 性 (6) 在 新 的 值 文 本 框 中 输 入 当 事 件 发 生 时 被 插 入 的 属 性 的 新 值 (7) 改 变 属 性 对 话 框 设 置 完 成 后, 单 击 确 定 按 钮 (8) 检 查 行 为 面 板 中 默 认 事 件 是 否 是 所 需 要 的 事 件 如 果 不 是, 从 出 现 菜 单 中 选 择 另 一 个 事 件, 如 果 未 列 出 所 需 要 的 事 件, 则 在 显 示 事 件 出 现 菜 单 中 更 改 目 标 浏 览 器 3. 打 开 浏 览 器 行 为 使 用 打 开 浏 览 器 动 作 可 根 据 访 问 者 不 同 类 型 和 版 本 的 浏 览 器 将 它 们 转 到 不 同 的 页 基 本 操 作 如 下 : (1) 选 择 触 发 该 动 作 的 对 象 - 119 -
网 页 制 作 基 础 教 程 (2) 在 行 为 面 板 中 单 击 添 加 行 为 按 钮, 从 出 现 的 菜 单 中 选 择 打 开 浏 览 器 窗 口 动 作, 出 现 打 开 浏 览 器 窗 口 对 话 框, 如 图 4-30 所 示, 可 根 据 需 要 对 此 进 行 必 要 设 置 图 4-30 打 开 浏 览 器 窗 口 对 话 框 (3) 指 定 Netscape navigator 和 Internet explorer 版 本, 以 及 用 户 是 否 希 望 浏 览 器 停 留 当 前 的 页 面 上, 转 到 其 他 的 URL 或 者 进 入 第 三 个 可 选 择 的 URL (4) 为 所 有 其 他 的 浏 览 器 设 置 相 同 的 选 项 (5) 在 各 自 的 文 本 框 中 输 入 URL 和 第 二 个 可 选 的 URL 选 项, 或 者 选 择 浏 览 按 钮 来 定 位 相 应 的 文 件 (6) 完 成 设 置 后 单 击 确 定 按 钮 (7) 检 查 行 为 面 板 中 默 认 事 件 是 否 是 所 需 要 的 事 件 如 果 不 是, 从 出 现 菜 单 中 选 择 另 一 个 事 件 4. 检 查 插 件 检 查 插 件 动 作 可 根 据 访 问 者 是 否 安 装 了 指 定 的 插 件 这 一 情 况 将 它 们 转 到 不 同 的 页 基 本 操 作 如 下 : (1) 选 择 用 于 触 发 动 作 的 对 象 (2) 在 行 为 面 板 中 单 击 添 加 行 为 按 钮, 从 出 现 的 菜 单 中 选 择 检 查 插 件 动 作, 出 现 检 查 插 件 对 话 框, 根 据 需 要 对 该 对 话 框 进 行 设 置 如 图 4-31 所 示 图 4-31 检 查 插 件 对 话 框 (3) 在 检 查 插 件 对 话 框 插 件 旁 的 选 择 下 拉 列 表 中 选 择 一 个 插 件, 用 户 也 可 以 在 输 入 文 本 框 中 输 入 其 他 的 插 件 名 称 (4) 如 果 用 户 希 望 将 正 使 用 相 应 插 件 的 使 用 者 发 到 不 同 的 页 面 上, 那 么 在 如 果 有, 转 到 URL 文 本 框 中 输 入 待 定 的 URL, 或 者 使 用 浏 览 按 钮 来 定 位 文 件 同 样, 要 让 不 具 有 - 120 -
第 4 章 Dreamweaver CS3 高 级 篇 该 插 件 的 访 问 者 留 在 同 一 页 上, 则 不 需 要 选 择 此 项 (5) 在 否 则, 转 到 URL 文 本 框 中, 输 入 为 没 有 插 件 的 使 用 者 所 准 备 的 URL (6) 检 查 插 件 对 话 框 设 置 完 成 后, 单 击 确 定 按 钮 (7) 检 查 行 为 面 板 中 默 认 事 件 是 否 是 所 需 要 的 事 件 如 果 不 是, 从 出 现 菜 单 中 选 择 另 一 个 事 件 5. 拖 动 层 拖 动 层 动 作 允 许 访 问 者 拖 动 层 使 用 此 动 作 创 建 拼 版 游 戏 滑 块 控 件 或 其 他 可 移 动 的 界 面 元 素 基 本 操 作 如 下 : (1) 在 文 档 窗 口 底 部 标 签 选 择 中 选 择 <body> 标 签 (2) 在 行 为 面 板 中 单 击 添 加 行 为 按 钮, 从 出 现 的 菜 单 中 选 择 拖 动 AP 元 素 命 令 (3) 弹 出 的 拖 动 AP 元 素 对 话 框 如 图 4-32 所 示, 该 对 话 框 包 括 基 本 与 高 级 两 个 选 项, 默 认 状 态 为 基 本 选 项 设 置 状 态, 根 据 需 要 对 该 对 话 框 进 行 设 置 图 4-32 拖 动 AP 元 素 对 话 框 (4) 在 层 下 拉 列 表 中 选 择 希 望 被 移 动 的 层 (5) 限 制 层 的 移 动, 在 移 动 下 拉 菜 单 中 选 择 限 制 选 项, 出 现 上 下 左 右 四 个 文 本 框 (6) 要 设 置 被 拖 动 对 象 的 位 置, 在 放 下 目 标 中 的 左 和 上 文 本 框 中 输 入 坐 标 (7) 要 围 绕 层 被 放 置 到 的 目 标 坐 标 来 设 置 一 个 对 齐 区 域, 如 果 在 目 标 位 置 释 放, 那 么 可 以 在 靠 齐 距 离 文 本 框 中 输 入 一 个 像 素 值 (8) 对 于 附 加 的 选 项, 可 以 单 击 高 级 选 项 卡 (9) 如 果 用 户 希 望 限 制 拖 动 操 作 所 使 用 的 区 域, 可 以 选 择 拖 动 控 制 点 下 拉 菜 单 中 的 层 内 区 域 选 项 (10) 要 控 制 被 拖 动 层 的 位 置, 可 以 设 置 下 面 列 出 的 拖 动 时 选 项 (11) 在 拖 动 层 的 同 时, 要 执 行 JavaScript 命 令, 在 呼 叫 JavaScript 文 本 框 中 输 入 命 令 或 函 数 名 称 (12) 要 在 释 放 层 的 同 时 执 行 一 个 JavaScript 命 令, 在 放 下 时, 呼 叫 JavaScript 文 本 框 中 输 入 代 码 (13) 拖 动 AP 元 素 对 话 框 设 置 完 成 后, 单 击 确 定 按 钮 (14) 检 查 行 为 面 板 中 默 认 事 件 是 否 是 所 需 要 的 事 件 如 果 不 是, 从 出 现 菜 单 中 选 择 另 一 个 事 件 - 121 -
网 页 制 作 基 础 教 程 6. 打 开 浏 览 器 窗 口 使 用 打 开 浏 览 器 窗 口 行 为, 可 以 在 一 个 新 的 窗 口 中 打 开 网 页, 并 且 可 以 指 定 新 窗 口 的 属 性 ( 包 括 其 大 小 ) 特 性 ( 它 是 否 可 以 调 节 大 小, 是 否 具 有 菜 单 栏 等 ) 和 名 称 基 本 操 作 如 下 : (1) 选 择 用 来 触 发 工 作 的 对 象 (2) 在 行 为 面 板 中 单 击 添 加 行 为 按 钮, 从 出 现 的 菜 单 中 选 择 打 开 浏 览 器 窗 口 命 令, 出 现 打 开 浏 览 器 对 话 框, 如 图 4-33 所 示, 根 据 需 要 对 该 对 话 框 进 行 设 置 图 4-33 打 开 浏 览 器 窗 口 (3) 打 开 浏 览 器 窗 口 对 话 框 设 置 完 成 后, 单 击 确 定 按 钮 (4) 检 查 行 为 面 板 中 默 认 事 件 是 否 是 所 需 的 事 件 如 果 不 是, 从 出 现 菜 单 中 选 择 另 一 个 事 件 7. 预 先 载 入 图 像 预 先 载 入 图 像 动 作 将 不 会 立 即 出 现 在 页 上 的 图 像 载 入 浏 览 器 缓 存 中, 这 样 可 以 防 止 当 图 像 应 该 出 现 时 由 于 下 载 而 导 致 延 迟 使 用 预 先 载 入 图 像 动 作 的 基 本 操 作 如 下 : (1) 选 择 用 来 触 发 动 作 的 对 象 (2) 在 行 为 面 板 中 单 击 添 加 行 为 按 钮, 从 出 现 的 菜 单 中 选 择 预 先 载 入 图 像 命 令, 随 后 出 现 预 先 载 入 图 像 对 话 框, 如 图 4-34 所 示 图 4-34 预 先 载 入 图 像 对 话 框 (3) 在 预 先 载 入 图 像 对 话 框 中 单 击 浏 览 按 钮, 选 择 要 预 先 载 入 的 图 像 文 件, 或 在 图 像 源 文 件 文 本 框 中 输 入 图 像 的 路 径 和 文 件 名 (4) 单 击 该 对 话 框 顶 部 的 加 号 + 按 钮, 将 图 像 添 加 到 预 先 载 入 图 像 列 表 中 对 所 有 剩 下 的 要 预 先 载 入 当 前 页 的 图 像 重 复 第 3 步 和 第 4 步 的 操 作 如 果 要 从 预 先 载 - 122 -
第 4 章 Dreamweaver CS3 高 级 篇 入 图 像 列 表 中 删 除 某 个 图 像, 则 在 列 表 中 选 择 该 图 像, 然 后 单 击 减 号 - 按 钮 (5) 预 先 载 入 图 像 对 话 框 设 置 完 成 后, 单 击 确 定 按 钮 (6) 检 查 行 为 面 板 中 默 认 事 件 是 否 是 所 需 事 件 如 果 不 是, 从 出 现 菜 单 中 选 择 另 一 个 事 件 8. 设 置 框 架 文 本 设 置 框 架 文 本 动 作 可 以 动 态 设 置 框 架 的 文 本, 用 指 定 的 内 容 替 换 框 架 的 内 容 和 格 式 设 置 使 用 设 置 框 架 文 本 动 作 的 操 作 如 下 : (1) 选 择 用 来 触 发 的 动 作 对 象 (2) 在 行 为 面 板 中 单 击 添 加 行 为 按 钮, 从 出 现 的 菜 单 中 选 择 设 置 文 本 设 置 框 架 文 本 命 令, 随 后 出 现 设 置 框 架 文 本 对 话 框 (3) 在 设 置 框 架 文 本 对 话 框 的 框 架 下 拉 列 表 中 选 择 目 标 框 架 (4) 在 新 建 HTML 文 本 框 中 输 入 文 本 (5) 单 击 获 取 当 前 HTML 按 钮, 复 制 当 前 目 标 框 架 的 <body> 部 分 的 内 容 (6) 设 置 框 架 文 本 对 话 框 设 置 完 成 后, 单 击 确 定 按 钮 (7) 检 查 行 为 面 板 中 默 认 事 件 是 否 是 所 需 事 件 如 果 不 是, 从 出 现 菜 单 中 选 择 另 一 个 事 件 9. 设 置 状 态 栏 文 本 设 置 状 态 栏 文 本 动 作 将 在 浏 览 器 窗 口 底 部 左 侧 的 状 态 栏 中 显 示 消 息 使 用 设 置 状 态 栏 文 本 动 作 的 基 本 操 作 如 下 : (1) 选 择 用 来 触 发 的 对 象 (2) 在 行 为 面 板 中 单 击 添 加 行 为 按 钮, 从 出 现 的 菜 单 中 选 择 设 置 文 本 设 置 状 态 栏 文 本 命 令, 随 后 出 现 设 置 状 态 栏 文 本 对 话 框 如 图 4-35 所 示 图 4-35 设 置 状 态 栏 文 本 对 话 框 (3) 在 设 置 状 态 栏 文 本 对 话 框 的 消 息 文 本 框 中 输 入 文 本 (4) 设 置 状 态 栏 文 本 对 话 框 设 置 完 成 后, 单 击 确 定 按 钮 (5) 检 查 行 为 面 板 中 默 认 事 件 是 否 是 所 需 事 件 如 果 不 是, 从 出 现 菜 单 中 选 择 另 一 个 事 件 10. 设 置 文 本 域 文 本 设 置 文 本 域 文 本 动 作 可 以 用 指 定 的 内 容 替 换 表 单 文 本 域 的 内 容 使 用 设 置 文 本 域 文 本 动 作 的 基 本 操 作 如 下 : (1) 选 择 用 来 触 发 动 作 的 对 象 (2) 在 行 为 面 板 中 单 击 添 加 行 为 按 钮, 并 从 出 现 的 菜 单 中 选 择 设 置 文 本 设 置 文 本 域 文 本 命 令, 随 后 出 现 设 置 文 本 域 文 本 对 话 框 - 123 -
网 页 制 作 基 础 教 程 (3) 在 设 置 文 本 域 文 本 对 话 框 的 文 本 域 的 下 拉 列 表 中 选 择 目 标 文 本 域 (4) 在 新 建 文 本 文 本 框 中 输 入 文 本 (5) 设 置 文 本 域 文 本 对 话 框 设 置 完 成 后, 单 击 确 定 按 钮 (6) 检 查 行 为 面 板 中 默 认 事 件 是 否 是 所 需 事 件 如 果 不 是, 从 出 现 菜 单 中 选 择 另 一 个 事 件 11. 检 查 表 单 检 查 表 单 行 为 用 于 检 查 指 定 文 本 域 的 内 容, 以 确 保 用 户 输 入 了 正 确 的 数 据 类 型, 防 止 表 单 提 交 到 服 务 器 后 存 在 任 何 指 定 的 文 本 域 包 含 无 效 的 数 据 使 用 检 查 表 单 动 作 的 基 本 操 作 如 下 : (1) 选 择 用 来 触 发 动 作 的 对 象 (2) 在 行 为 面 板 中 单 击 添 加 行 为 按 钮, 并 从 出 现 的 菜 单 中 选 择 检 查 表 单 命 令, 随 后 出 现 检 查 表 单 对 话 框, 如 图 4-36 所 示, 该 对 话 框 各 选 项 可 根 据 需 要 进 行 设 置 图 4-36 检 查 表 单 对 话 框 (3) 如 果 要 验 证 整 个 表 单, 可 以 在 域 列 表 中 选 择 一 个 文 本 域 如 果 想 要 验 证 单 个 区 域, 那 么 选 取 所 需 要 的 表 单 对 象, 然 后 该 对 象 将 出 现 在 域 列 表 中 (4) 要 使 用 某 个 域 成 为 必 需 的 域, 选 中 必 需 的 复 选 框 (5) 要 设 置 所 期 望 的 输 入 种 类, 可 在 可 接 受 选 项 中 选 择 一 个 (6) 如 果 需 要 检 查 多 个 域, 对 要 检 查 的 任 何 其 他 域 重 复 第 3 步 至 第 5 步 即 可 (7) 检 查 表 单 对 话 框 设 置 完 成 后, 单 击 确 定 按 钮 (8) 如 果 在 用 户 提 交 表 单 时 检 查 多 个 域, 则 onsubmit 事 件 自 动 出 现 在 事 件 出 现 菜 单 中 如 果 要 分 别 检 查 各 个 域, 则 检 查 默 认 事 件 是 否 是 onblur 或 onchange, 如 果 不 是, 则 重 新 选 择 onblur 或 onchange 4.5 使 用 模 板 模 板 是 一 种 用 于 设 计 统 一 风 格 页 面 布 局 的 特 殊 类 型 的 文 档 使 用 模 板 既 能 快 速 创 建 网 站 而 且 还 能 使 各 个 网 页 的 风 格 保 持 一 致 4.5.1 模 板 基 础 网 站 风 格 是 设 计 网 站 的 重 要 原 则 之 一, 网 站 的 所 有 页 面 应 体 现 同 一 风 格 Dreamweaver - 124 -
第 4 章 Dreamweaver CS3 高 级 篇 的 模 板 便 是 用 于 控 制 网 站 风 格 的 利 器, 模 板 可 以 保 持 所 有 页 面 的 共 性, 以 帮 助 网 页 设 计 师 用 最 短 的 时 间 来 完 成 繁 重 的 网 站 维 护 工 作 比 如, 一 个 网 站 的 大 多 数 网 页 都 要 求 其 版 面 风 格 相 似, 其 标 题 导 航 条 完 全 相 同, 只 是 正 文 部 分 不 同, 只 需 要 创 建 一 个 模 板, 就 可 以 将 网 页 中 无 需 变 化 的 对 象 固 定 下 来, 然 后 再 用 来 应 用 到 其 他 风 格 类 似 的 网 页 中 显 然, 只 需 修 改 页 面 的 部 分 内 容, 就 能 快 速 制 作 出 各 个 页 面 模 板 在 本 质 上 是 一 个 独 立 的 网 页 文 件, 创 建 模 板 时 应 把 握 好 以 下 两 个 要 领 : (1) 要 从 全 局 考 虑 : 在 创 建 模 板 前, 需 要 先 定 义 好 站 点 框 架, 明 确 整 个 站 点 所 需 要 的 不 同 的 版 式, 每 个 模 板 需 要 定 义 的 可 编 辑 区 域 (2) 要 注 意 与 程 序 的 整 合 : 大 多 数 商 业 站 点 都 含 有 数 据 库 程 序, 在 创 建 模 板 时 就 应 考 虑 程 序 代 码 在 模 板 中 的 位 置 和 安 全 性 4.5.2 创 建 新 模 板 在 创 建 Dreamweaver 模 板 时, 会 自 动 锁 定 文 档 的 大 部 分 区 域 因 此, 需 要 指 定 基 于 模 板 的 文 档 中 的 哪 些 区 域 可 以 编 辑 需 要 注 意 的 是, 创 建 模 板 的 过 程 中, 可 编 辑 区 域 和 锁 定 区 域 都 可 以 更 改 但 在 基 于 模 板 的 文 档 中, 模 板 用 户 只 能 在 可 编 辑 区 域 中 进 行 更 改, 无 法 修 改 锁 定 区 域 1. 使 用 菜 单 创 建 模 板 既 可 以 以 现 有 文 档 为 基 准 创 建 模 板, 也 可 以 从 新 建 的 空 白 文 档 中 创 建 模 板, 具 体 创 建 方 法 如 下 : (1) 新 建 一 个 网 页 或 打 开 要 另 存 为 模 板 的 文 档 (2) 选 择 文 件 另 存 为 模 板 命 令, 出 现 另 存 为 模 板 对 话 框 (3) 从 站 点 下 拉 菜 单 中 选 择 一 个 用 来 保 存 模 板 站 点, 并 在 另 存 为 文 本 框 中 为 模 板 输 入 一 个 唯 一 的 名 称 (4) 单 击 保 存 按 钮,Dreamweaver 将 模 板 文 件 保 存 在 站 点 的 本 地 根 文 件 夹 中 的 templates 文 件 夹 中, 使 用 文 件 扩 展 名.dwt 如 果 该 templates 文 件 夹 在 站 点 中 不 存 在, 则 Dreamweaver 在 保 存 新 建 模 板 时 自 动 创 建 该 文 件 夹 2. 使 用 资 源 面 板 创 建 新 模 板 (1) 选 择 资 源 面 板 左 侧 的 模 板 类 型, 即 会 显 示 资 源 面 板 的 模 板 类 别 (2) 单 击 资 源 面 板 底 部 的 新 建 模 板 图 标 (3) 一 个 新 添 加 的 面 板 名 称 出 现 在 资 源 面 板 的 模 板 列 表 中 (4) 在 模 板 仍 处 于 选 定 状 态 时, 输 入 模 板 的 名 称, 然 后 按 Enter 键 (5)Dreamweaver 即 在 资 源 面 板 和 templates 文 件 夹 中 创 建 一 个 新 的 空 模 板 4.5.3 设 置 面 板 可 编 辑 区 可 编 辑 模 板 区 域 的 创 建, 也 就 意 味 着 可 以 在 基 于 模 板 制 作 的 网 页 的 特 定 区 域 中 编 辑 文 档 1. 插 入 可 编 辑 区 域 在 插 入 可 编 辑 区 域 之 前, 确 保 编 辑 的 是 新 模 板 文 件, 否 则 普 通 网 页 文 档 中 插 入 一 个 可 编 辑 区 域,Dreamweaver 会 提 示 该 文 档 将 自 动 另 存 为 模 板 可 编 辑 区 域 可 以 放 在 页 面 中 的 任 何 位 - 125 -
网 页 制 作 基 础 教 程 置, 插 入 可 编 辑 模 板 区 域 的 基 本 操 作 方 法 如 下 : (1) 选 择 想 要 设 置 为 可 编 辑 区 域 的 文 本 和 内 容, 或 将 文 本 光 档 定 位 于 想 要 插 入 可 编 辑 区 域 的 地 方 (2) 打 开 新 建 可 编 辑 区 域,Dreamweaver 提 供 了 3 种 打 开 途 径 (3) 出 现 新 建 可 编 辑 区 域 对 话 框, 在 名 称 文 本 框 中 为 该 区 域 输 入 一 个 唯 一 的 名 称, 单 击 确 定 按 钮 可 编 辑 区 域 被 创 建 后, 在 模 板 中 由 高 亮 显 示 的 矩 形 边 框 围 绕, 该 区 域 左 上 角 的 选 择 卡 显 示 该 区 域 的 名 称 如 果 在 文 档 中 插 入 空 白 的 可 编 辑 区 域, 则 该 区 域 的 名 称 会 出 现 在 该 区 域 内 部 在 新 建 可 编 辑 区 域 对 话 框 中, 不 要 在 名 称 文 本 框 中 使 用 特 殊 字 符 不 能 对 特 定 模 板 中 的 多 个 可 编 辑 区 域 使 用 相 同 的 名 称 2. 选 择 可 编 辑 区 域 在 模 板 文 档 和 基 于 模 板 的 文 档 中, 都 可 以 容 易 地 识 别 和 选 择 面 板 区 域, 常 用 以 下 两 种 方 法 进 行 选 择 : 单 击 可 编 辑 区 域 左 上 角 的 选 择 卡, 可 编 辑 区 域 在 文 档 中 被 选 定 在 菜 单 中 选 择 修 改 模 板 命 令, 然 后 从 该 子 菜 单 底 部 的 列 表 中 选 择 区 域 的 名 称, 可 编 辑 区 域 在 文 档 中 被 选 定, 被 选 择 的 可 编 辑 区 域 名 称 旁 边 会 出 现 一 个 标 记 重 复 区 域 内 的 可 编 辑 区 域 不 会 出 现 在 修 改 菜 单 中, 只 能 通 过 在 文 档 窗 口 中 查 找 选 项 卡 的 边 框 来 定 位 这 些 区 域 3. 删 除 可 编 辑 区 域 使 用 删 除 可 编 辑 标 记 命 令 可 以 将 面 板 文 件 的 一 个 标 记 为 可 编 辑 区 域, 再 次 锁 定, 使 其 在 基 于 模 板 的 文 档 中 不 可 编 辑 4. 更 改 可 编 辑 区 域 的 名 称 插 入 可 编 辑 区 域 后, 其 名 称 可 以 自 由 更 改 4.5.4 创 建 重 复 区 域 一 个 模 板 如 果 创 建 了 重 复 区 域, 则 可 以 根 据 需 要 在 基 于 模 板 的 页 面 中 复 制 任 意 次 数 到 指 定 重 复 区 域 的 地 方 重 复 区 域 用 于 表 格, 也 可 以 为 其 他 页 面 元 素 定 义 重 复 区 域 1. 模 板 中 插 入 重 复 区 域 模 板 用 户 可 以 使 用 重 复 区 域 在 模 板 中 复 制 任 意 次 数 的 指 定 区 域 重 复 区 域 不 是 可 编 辑 区 域 要 是 重 复 区 域 的 内 容 可 编 辑, 必 须 在 重 复 区 域 内 插 入 可 编 辑 区 域 2. 插 入 重 复 表 格 插 入 重 复 表 格 后 可 以 使 用 它 来 创 建 包 含 重 复 行 的 表 格 格 式 的 可 编 辑 区 域 可 以 定 义 表 格 属 性 并 设 置 哪 些 表 格 单 元 格 可 编 辑 4.6 课 后 习 题 选 择 题 1. 在 创 建 一 个 Dreamweaver 模 板 时, 必 须 在 该 模 板 中 加 入 一 个 ( ), 以 便 在 把 该 模 板 - 126 -
第 4 章 Dreamweaver CS3 高 级 篇 套 用 到 某 个 网 页 后, 网 页 能 被 正 常 使 用 A. 可 复 制 区 域 B. 可 编 辑 区 域 C. 可 控 制 区 域 D. 可 套 用 区 域 2. 在 Dreamweaver 中, 关 于 插 入 到 页 面 中 的 Flash 动 画 说 法 错 误 的 是 ( ) A. 在 属 性 面 板 中 可 为 影 片 设 置 播 放 参 数 B. 具 有.fla 扩 展 名 的 Flash 文 件 尚 未 在 Flash 中 发 布, 不 能 导 入 到 Dreamweaver 中 C.Flash 文 件 只 有 在 浏 览 器 中 才 能 播 放 D.Flash 在 Dreamweaver 的 编 辑 状 态 下 可 以 预 览 动 画 3. 当 鼠 标 移 动 到 文 字 链 接 上 时 显 示 一 个 隐 藏 层, 这 个 动 作 的 触 发 事 件 应 该 是 ( ) A.onMouseOut B.onMouseOver C.onClick D.onDblClick - 127 -