dreamweaver网页设计与制作教学课件作者宋协栋第１３章　层与行为

《dreamweaver网页设计与制作教学课件作者宋协栋第１３章　层与行为》由会员分享，可在线阅读，更多相关《dreamweaver网页设计与制作教学课件作者宋协栋第１３章　层与行为（43页珍藏版）》请在金锄头文库上搜索。

1、第 章 层 与 行 为,. 层 基 础 . 创 建 层 . 层 的 编 辑 . 层 的 组 合 应 用 . 层 与 时 间 轴 的 应 用 . 行 为 的 应 用,返回,. 层 基 础,层 是 指 某 个 事 物 在 结 构 或 功 能 方 面 的 等 级 秩 序 。 层 具 有 多 样 性 ， 可 按 物 质 的 质 量 、 能量 、 运 动 状 态 、 空 间 尺 度 、 时 间 顺 序 、 组 织 化 程 度 等 多 种 标 准 划 分 。 不 同 层 次 具 有 不 同 的 性质 和 特 征 ， 其 既 有 共 同 的 规 律 ， 又 各 有 特 殊 规 律 。 在 网 页 设 计 中

2、 ， 图 层 是 网 页 的 一 个 区 域 ， 在 一 个 网 页 中 可 以 有 多 个 图 层 存 在 ， 它 最 大 的魅 力 在 于 各 个 图 层 可 以 重 叠 ， 并 且 可 以 决 定 每 个 图 层 是 否 可 见 ， 同 时 也 能 够 自 定 义 各 图 层 之间 的 层 次 关 系 。 熟 练 掌 握 图 层 技 术 ， 可 以 给 网 页 提 供 强 大 的 页 面 控 制 能 力 。,下一页,返回,. 层 基 础,层 工 具 提 供 弹 性 的 画 面 设 计 功 能 ， 就 像 的 图 文 框 ， 可 以 放 入 任 何 网 页 组 件 ， 包 含文 本 、 图

3、 像 或 其 他 任 何 可 以 在 文 档 正 文 中 放 入 的 内 容 。 它 的 最 大 好 处 是 可 以 任 意 移 动位 置 ， 并 互 相 重 叠 。 因 此 ， 也 可 以 认 为 层 其 实 是 一 个 更 小 的 空 白 网 页 ， 在 里 面 可 以 插 入 任 何网 页 组 件 ， 从 而 为 网 页 设 计 提 供 灵 活 、 多 变 的 架 构 。 在 中 ， 自 版 本 以 后 ， 系 统 采 取 使 用 标 签 和 技 术 来 实 现 层 对 象 的 效 果 ， 所 以 也 称 为 绝 对 定 位 的 标 记 。,上一页,返回,. 创 建 层,创 建 层 相

4、对 简 单 。 第 一 步 ， 把 的 工 作 界 面 切 换 至 “ 设 计 ” 界 面 ， 然 后 在 工 作 窗 口 的 上 方 找 到 “ 布 局 ” 工 作栏 ， 单 击 布 局 模 式 上 的 按 钮 ， 如 图 所 示 。 第 二 步 ， 在 网 页 编 辑 区 按 住 鼠 标 左 键 进 行 拖 动 即 可 创 建 层 ， 如 图 所 示 。 第 三 步 ， 在 层 中 插 入 页 面 元 素 内 容 。,返回,. 层 的 编 辑,. 修 改 层 的 位 置 与 大 小 在 中 修 改 层 的 位 置 与 大 小 与 在 中 编 辑 图 片 类 似 。 选 中 所 要 编 辑

5、的 层 ，在 层 的 四 周 会 出 现 黑 色 节 点 ， 对 这 些 节 点 进 行 拖 放 操 作 就 可 达 到 预 计 的 效 果 了 ， 如 图 所 示 。 . 删 除 层 在 页 面 上 用 鼠 标 单 击 图 层 边 框 ， 选 中 某 个 图 层 后 ， 按 键 盘 上 的 键 即 可 删 除 该图 层 。 注 意 ： 当 删 除 某 个 图 层 时 ， 会 将 该 图 层 所 包 含 的 页 面 元 素 一 并 删 除 。,下一页,返回,. 层 的 编 辑,. 通 过 “ 层 ” 面 板 修 改 层 在 的 工 作 界 面 中 ， 在 右 上 角 找 到 “ 设 计 ” 面

6、 板 ， 打 开 “ 层 ” 标 签 页 ， 就可 以 打 开 “ 层 ” 面 板 ， 如 图 所 示 ， 在 这 个 面 板 中 可 对 层 进 行 修 改 编 辑 。,上一页,返回,. 层 的 组 合 应 用,. 嵌 套 图 层 所 谓 嵌 套 图 层 指 的 是 一 个 图 层 创 建 在 另 外 一 个 图 层 中 ， 实 际 上 制 作 这 种 嵌 套 图 层 很 简单 ， 只 要 创 建 一 个 父 图 层 之 后 用 鼠 标 点 击 图 层 内 部 ， 再 次 插 入 一 个 图 层 即 可 。 不 过 嵌 套 的 图层 并 不 意 味 着 子 图 层 必 须 要 在 父 图 层

7、 内 部 ， 它 们 之 间 存 在 着 继 承 关 系 。 继 承 的 作 用 是 使 子 图 层 的 可 见 性 和 父 图 层 保 持 一 致 ， 由 于 很 多 动 态 网 页 的 特 效 是 通 过 控制 图 层 的 可 见 性 来 实 现 的 ， 因 此 当 父 图 层 的 可 见 性 改 变 时 ， 子 图 层 的 可 见 性 也 随 之 改 变 。 继承 关 系 也 可 以 让 子 图 层 和 父 图 层 的 相 对 位 置 不 变 ， 比 如 拖 曳 父 图 层 使 其 移 动 ， 此 时 子 图 层 也会 随 着 移 动 ， 这 在 制 作 动 态 网 页 的 时 候 非

8、常 有 用 。,下一页,返回,. 层 的 组 合 应 用,操 作 方 法 如 下 ： 第 一 步 ， 打 开 ， 新 建 一 个 文 件 ， 在 文 件 内 创 建 一 个 图 层 。 第 二 步 ， 用 鼠 标 点 击 层 内 ， 当 光 标 在 层 内 闪 动 时 点 击 “ 描 绘 层 ” 按 钮 ， 并 将 其 拖 动 到层 内 ， 就 新 创 建 了 一 个 嵌 套 的 层 了 ， 如 图 所 示 。 第 三 步 ， 查 看 代 码 ， 可 以 发 现 一 个 子 层 嵌 套 在 一 个 父 层 内 了 。 第 四 步 ， 如 果 有 需 要 ， 还 可 以 设 置 子 层 的 各

9、类 属 性 ， 如 图 所 示 。 子 层 属 性 内 的 左和 上 分 别 是 指 子 层 的 左 边 到 父 层 左 边 的 距 离 和 上 边 到 母 层 上 边 的 距 离 。 这 就 把 子 层 和 父 层 的关 系 固 定 了 。 拖 动 父 层 时 子 层 跟 随 着 一 起 移 动 。,上一页,下一页,返回,. 层 的 组 合 应 用,. 设 置 图 层 顺 序 和 表 格 相 比 ， 图 层 的 最 大 优 势 在 于 图 层 可 以 重 叠 ， 为 了 表 示 各 个 图 层 哪 个 在 上 面 ， 哪 个在 下 面 ， 要 给 每 个 图 层 设 定 一 个 序 号 ，

10、这 个 序 号 就 是 “ 顺 序 ” ， 它 的 意 思 就 是 除 了 屏 幕的 和 坐 标 之 外 ， 人 为 增 加 一 个 垂 直 于 屏 幕 的 轴 。 在 中 要 设 置 元 素 的 堆 叠 顺 序 ， 首 先 要 打 开 需 要 编 辑 的 文 档 ， 点击 “ 设 计 ” 视 图 ， 使 文 档 处 于 “ 设 计 ” 视 图 的 编 辑 窗 口 中 ， 然 后 按 照 下 面 的 步 骤 进 行 操 作 ： 方 法 一 ， 使 用 “ 属 性 ” 面 板 设 置 元 素 的 堆 叠 顺 序 。 （ ） 单 击 “ 窗 口 ” 菜 单 ， 选 择 “ 元 素 ” 命 令 ，

11、打 开 “ 元 素 ” 面 板 ， 查 看 元素 当 前 的 堆 叠 顺 序 。,上一页,下一页,返回,. 层 的 组 合 应 用,（ ） 在 文 档 的 “ 设 计 ” 视 图 窗 口 中 ， 或 者 在 “ 元 素 ” 面 板 中 ， 选 择 要 更 改 轴 值的 元 素 。 （ ） 单 击 “ 窗 口 ” 菜 单 ， 选 择 “ 属 性 ” 命 令 ， 打 开 元 素 的 “ 属 性 ” 窗 口 ， 如 图 所 示 。 （ ） 在 “ 轴 ” 文 本 框 中 输 入 需 要 的 数 字 ， 即 可 改 变 该 元 素 的 堆 叠 顺 序 ： 输 入 比 原 来 大 的 数 字 可 以 使

12、 元 素 在 堆 叠 顺 序 中 往 上 移 ； 输 入 比 原 来 小 的 数 字 可 以 使 元 素 在 堆 叠 顺 序 中 往 下 移 。 方 法 二 ， 使 用 “ 元 素 ” 面 板 设 置 元 素 的 堆 叠 顺 序 。,上一页,下一页,返回,. 层 的 组 合 应 用,（ ） 单 击 “ 窗 口 ” 菜 单 ， 选 择 “ 元 素 ” 命 令 ， 打 开 “ 元 素 ” 面 板 。 （ ） 在 “ 元 素 ” 面 板 中 ， 双 击 要 修 改 轴 值 的 元 素 旁 的 轴 数 字 ， 如 图 所 示 。 （ ） 双 击 “ ” 使 之 成 为 可 编 辑 的 状 态 ， 再

13、输 入 需 要 的 数 字 ， 然 后 按 回 车 （ ） 键 ，即 可 更 改 元 素 的 堆 叠 顺 序 。,上一页,下一页,返回,. 层 的 组 合 应 用,. 使 用 图 层 建 立 表 格 虽 然 使 用 图 层 来 定 位 网 页 元 素 比 使 用 表 格 方 便 得 多 ， 但 是 只 有 . 以 上 版 本 的 浏 览器 才 支 持 图 层 功 能 ， 因 此 为 了 让 使 用 旧 版 本 浏 览 器 的 用 户 也 可 以 看 到 相 关 作 品 ， 最 好 的 方 法就 是 把 图 层 转 换 为 表 格 。 第 一 步 ： 在 窗 口 中 选 取 上 部 的 “ 防

14、止 重 叠 ” 复 选 框 ， 这 样 使 每 个 图 层 不 能 互 相 重 叠 ，否 则 在 转 换 过 程 中 会 有 警 告 信 息 提 示 。,上一页,下一页,返回,. 层 的 组 合 应 用,第 二 步 ： 运 行 “ 修 改 ” “ 转 换 ” “ 层 到 表 格 ” 命 令 ， 在 “ 表 格 布 局 ” 区 域 中 分 别 选择 “ 最 精 确 ” 和 “ 使 用 透 明 ” 两 个 选 项 。 前 者 通 过 精 确 转 换 为 每 个 图 层 建 立 一 个 单 元格 ， 确 保 各 个 单 元 格 之 间 的 距 离 ； 后 者 在 转 换 的 表 格 最 后 一 行

15、中 填 充 透 明 的 图 ， 这 样 可以 保 证 网 页 在 所 有 浏 览 器 中 都 有 相 同 的 外 观 。 第 三 步 ： 按 “ ” 按 钮 ， 完 成 图 层 到 表 格 的 转 换 操 作 。,上一页,返回,. 层 与 时 间 轴 的 应 用,与 层 密 切 相 关 的 另 一 个 功 能 是 时 间 轴 ， 利 用 时 间 轴 可 以 实 现 动 画 效 果 。 随 着 时 间 的 变 化改 变 层 的 位 置 、 尺 寸 、 可 视 性 以 及 叠 放 顺 序 可 以 实 现 更 多 的 效 果 。 . “ 时 间 轴 ” 面 板 使 用 “ ” 快 捷 键 或 者 在 菜 单 “ 窗 口 ” 中 选 择 “ 时 间 轴 ” 即 可 打 开 “ 时 间 轴 ” 面板 。 面 板 样 式 如 图 所 示 。 . 创 建 时 间 轴 动 画 第 一 步 ： 在 文 档 窗 口 插 入 一 个 层 ， 并 在 层 中 插