网页设计的规则经验谈
作者:别祖杰
  目 前Internet 上 有 众 多 提 供 免 费 存 放 网 页 的 服 务 器, 不 少 网 友 自 己 设 计 网 页、 在 网 上 发 布 信 息。 随 着 网 页 设 计 技 术 的 发 展, 丰 富 多 彩 的 个 人 网 页 越 来 越 多 地 出 现 在 网 上, 但 是, 网 页 下 载 速 度 受 到 带 宽 和 通 讯 线 路 等 因 素 的 制 约。 网 页 设 计 者 应 该 知 道, 客 户 是 用 昂 贵 的 通 讯 费 用 在 换 取 您 的 信 息, 除 了 网 页 的 内 容 要 受 益 于 客 户 外, 对 下 载 速 度 的 考 虑 也 应 该 放 在 网 页 设 计 规 划 时 的 重 要 位 置。 如 果 您 正 在 做 网 页, 那 么 下 面 的 一 些 规 则 与 技 巧 或 许 对 您 有 所 帮 助。

  一、 控 制 页 面 的 总 规 模

---- 要 想 把 网 页 做 得 精 彩, 内 容 必 定 要 丰 富, 但 不 要 把 所 有 的 内 容 都 放 在 一 个 页 面 上, 应 控 制 页 面 的 总 规 模。 首 先 统 计 页 面 中 的 每 个 对 象, 如 文 字、 图 像、ActiveX 或Java 代 码 以 及HTML 文 本 的 大 小。 用28.8Kbps 的Modem 粗 略 地 估 计 一 下, 按 每 秒3KB 的 速 度 下 载 整 页 所 需 的 时 间, 如 果 整 页 有5KB 的HTML 代 码 和30KB 的 图 像, 下 载 该 页 大 约 需 要12 秒, 这 一 般 能 满 足 访 问 者 的 要 求。

  二、 分 解 大 型 表 格

---- 尽 可 能 避 免 用 大 型 表 格, 因 为 浏 览 器 必 须 等 待 整 个 表 格 的 内 容 全 部 到 达 客 户 端, 才 能 显 示 这 个 表 格 的 内 容, 而 文 本 或 图 像 则 是 一 边 下 载 一 边 显 示。 如 果 页 面 中 必 须 使 用 表 格, 可 将 大 表 格 分 解 成 若 干 小 表 格, 浏 览 器 下 载 后 面 的 表 格 时, 客 户 可 以 阅 读 已 经 下 载 完 的 前 一 个 表 格。 用 客 户 浏 览 信 息 的 时 间 去 代 替 等 待 下 载 的 时 间, 这 一 技 巧 在 任 何 时 候 都 适 用。

  三、 不 用 图 片 来 叙 述 内 容

---- 为 了 解 决 不 同 的 语 言 平 台 上 不 能 正 常 显 示 本 国 文 字 的 问 题( 比 如 简 体 中 文 平 台 不 能 显 示BIG5 码 的 文 字 信 息), 有 些 设 计 者 将 本 国 文 字 的 叙 述 内 容 用 图 像 文 件 来 表 示, 而 不 用 文 本, 这 样 虽 然 解 决 了 因 内 码 不 同 导 致 的 乱 码 问 题, 但 却 给 页 面 增 加 了 负 担, 因 为 同 样 的 文 字 内 容, 用 文 本 存 储 比 图 片 文 件 小 得 多。 另 外, 一 些 文 字 性 的 图 像 按 钮 也 尽 量 少 用, 如 果 必 须 要 用, 也 应 包 含Alt 解 释 文 本, 这 样 即 使 客 户 关 闭 了 浏 览 器 的 图 像 显 示 功 能, 也 可 以 明 白 按 钮 的 意 思。

  四、 标 记 图 像 的 大 小

---- 在HTML 代 码 中, 最 好 标 记 出 图 像 的 显 示 高 度 和 宽 度, 在 下 载 页 面 时, 浏 览 器 会 按 这 个 高 度 和 宽 度 留 出 图 像 的 位 置, 在 图 像 下 载 完 毕 之 前 及 时 地 显 示 其 周 围 的 文 字 内 容。 否 则, 让 浏 览 器 按 图 像 本 身 的 高 度 和 宽 度 显 示, 那 么 只 能 等 待 图 像 全 部 下 载 完 毕 后, 才 显 示 图 像 及 其 周 围 的 其 他 文 字 信 息, 无 疑 造 成 客 户 的 等 待。

  五、 重 用 图 像

---- 如 果 多 次 使 用 同 一 图 像 文 件, 客 户 端 浏 览 器 的Cache 对 此 有 所 帮 助。 浏 览 器 将 从 它 的Cache 中 找 出 先 前 下 载 的 那 个 图 像 文 件 并 调 入 显 示, 而 无 需 再 从Web 站 点 上 下 载, 即 使 它 们 不 在 同 一 页 面 中, 这 样 调 入 图 像 就 不 受 带 宽 的 约 束。 因 此 各 页 面 的 背 景 图 案 可 使 用 同 一 图 像 文 件, 既 统 一 了 页 面 的 风 格, 又 可 节 省 图 像 下 载 的 时 间。 如 果 您 再 次 调 入 的 图 像 文 件 只 有 尺 寸 有 点 变 化, 那 么 使 用 图 像 高 度 和 宽 度 标 记(Tags) 即 可 改 变 图 像 的 大 小。
---- 顺 便 谈 一 下 客 户 端, 从 技 术 上 讲, 增 大 浏 览 器 的Cache, 可 提 高 浏 览 的 速 度, 但 是, 事 实 并 非 如 此。 有 时, 我 们 清 除Cache 中 的 内 容 后 下 载 的 速 度 则 快 些。 原 因 是 每 次 下 载 页 面 文 本 或 图 像 时, 浏 览 器 总 要 到Cache 中 去 搜 索 相 应 的 页 面 或 图 像, 这 样Cache 中 的 内 容 越 多, 搜 索 的 时 间 就 越 长, 如 果 比 下 载 更 费 时, 那 么 这 时 应 该 及 时 清 除Cache 中 的 内 容。

  六、 选 择 合 适 的 格 式

---- JPEG 格 式 是 网 上 非 常 流 行 的 图 像 格 式, 它 对 于 大 型 图 像 的 压 缩 率 特 别 高, 而GIF 格 式 更 适 合 小 图 像 和 艺 术 线 条 一 类 的 图 像。 对 于 同 样 内 容 的4KB 以 下 的 图 像 文 件,GIF 格 式 比JPEG 格 式 效 果 更 好, 如 果 不 信, 您 可 比 较 一 下 两 种 格 式 的 小 图 像 文 件 的 大 小 和 质 量。

  七、 减 少 图 像 的 数 目

---- 不 要 使 用 太 多 的 图 像 文 件。 图 像 文 件 的 数 量 和 大 小 对 页 面 是 很 重 要 的, 因 为 每 下 载 一 个 图 像 文 件, 浏 览 器 都 将 向Web 服 务 器 请 求 一 次 连 接, 所 以 图 像 文 件 越 多 意 味 着 页 面 下 载 的 时 间 越 长。 可 以 尝 试 用 一 个 图 像 代 替 多 个 分 散 的 小 图 形( 如 多 个 按 钮), 从 而 尽 可 能 地 减 少 图 像 文 件 的 数 目。

  八、 对 大 型 图 像 的 处 理

---- 当 页 面 必 须 有 大 型 图 像 时, 有 两 种 处 理 方 案 可 供 参 考: 其 一, 建 立 一 个 缩 图 图 像 文 件 置 于 主 页 中, 将 它 链 接 到 原 始 的 大 型 图 像; 其 二, 先 创 建 一 个 同 原 始 图 像 一 样 大 小 的 但 降 低 了 色 彩 和 分 辨 率 的 图 像 文 件, 使 用 低 源 标 记, 让 该 图 像 文 件 首 先 下 载。 这 种 方 法 的 优 点 是 使 客 户 不 需 下 载 大 型 图 像 文 件, 就 能 快 速 地 了 解 到 图 像 的 大 概 内 容。
九、 使 用JavaScript
---- 能 **TML 和JavaScript 完 成 的 事 情, 最 好 不 用Java Applet 和ActiveX 来 做。 很 少 的JavaScript 代 码 就 可 在4.0 以 上 版 本 的Internet Explorer 和Navigator 浏 览 器 上 做 出 惊 人 的 效 果 来, 它 比 同 样 大 小 的Java/ActiveX 或 动 态GIF 文 件 要 节 省 更 多 的 下 载 时 间。

  十、 少 用 背 景 音 乐

---- 虽 然 目 前 版 本 的HTML 语 言 具 有 在 网 页 中 加 入 背 景 音 乐 的 功 能, 但 奉 劝 诸 位 少 用 为 妙, 它 会 降 低 您 的 网 页 下 载 到 客 户 端 的 速 度, 除 非 您 正 在 创 建 一 个 有 关 音 乐 的 网 站, 否 则 只 会 给 人 以 华 而 不 实 的 感 觉。 如 果 非 要 加 入 背 景 音 乐, 那 么 音 乐 文 件 最 好 使 用MIDI 格 式, 而 不 用WAV 格 式。
---- 总 之, 网 页 设 计 者 应 该 对 自 己 的 页 面 精 雕 细 刻, 尽 可 能 减 少 每 一 个 字 节, 以 提 高 网 页 下 载 的 速 度, 千 万 不 要 用 庞 大 的 网 页 去 愚 弄 客 户 的 耐 性。 牢 记 鲁 迅 先 生 的 名 言: 浪 费 别 人 的 时 间, 无 异 于 谋 财 害 命。

[关闭本窗口]


[返回]