82 第 章 使 用 图 像 图 像 格 式 添 加 图 像 img 设 置 图 像 属 性 图 像 的 超 链 接 万 维 网 (World Wide Web) 与 其 他 网 络 类 型 ( 如 FTP) 最 大 的 不 同 就 在 于 它 在 网 页 上 可 呈 现 丰 富 的 色 彩 及 图 像 用 户 可 以 在 网 页 中 放 入 自 己 的 照 片 ; 可 以 放 入 公 司 的 商 标 ; 还 可 以 把 图 像 作 为 一 个 按 钮 来 链 接 到 另 一 个 网 页, 这 就 让 网 页 变 得 丰 富 多 彩 了
第 6 章 使 用 图 像 83 6.1 图 像 格 式 每 天 在 网 络 上 交 流 的 计 算 机 多 不 胜 数, 因 此 使 用 的 图 像 格 式 一 定 能 够 被 每 一 个 操 作 平 台 所 接 受 当 前 万 维 网 上 流 行 的 图 像 格 式 以 GIF 及 JPEG 为 主, 另 外 还 有 一 种 名 为 PNG 的 文 件 格 式, 也 被 越 来 越 多 地 应 用 在 网 络 中 以 下 分 别 对 这 3 种 图 像 格 式 的 特 点 进 行 介 绍 1.GIF 格 式 GIF 格 式 采 用 LZW 压 缩, 是 以 压 缩 相 同 颜 色 的 色 块 来 减 少 图 像 大 小 的 由 于 LZW 压 缩 不 会 造 成 任 何 品 质 上 的 损 失, 而 且 压 缩 效 率 高, 再 加 上 GIF 在 各 种 平 台 上 都 可 使 用, 所 以 很 适 合 在 互 联 网 上 使 用, 但 GIF 只 能 处 理 256 色 GIF 格 式 适 合 于 商 标 新 闻 式 的 标 题 或 其 他 小 于 256 色 的 图 像 要 想 将 图 像 以 GIF 的 格 式 存 储, 可 参 考 下 面 范 例 的 方 法 LZW 压 缩 是 一 种 能 将 数 据 中 重 复 的 字 符 串 加 以 编 码 制 作 成 一 数 据 流 的 一 种 压 缩 法, 通 常 应 用 于 GIF 图 像 文 件 的 格 式 2.JPEG 格 式 对 于 照 片 之 类 全 彩 的 图 像, 通 常 都 以 JPEG 格 式 来 进 行 压 缩, 也 可 以 说,JPEG 格 式 通 常 用 来 保 存 超 过 256 色 的 图 像 格 式 JPEG 的 压 缩 过 程 会 造 成 一 些 图 像 数 据 的 损 失, 所 造 成 的 损 失 是 剔 除 一 些 视 觉 上 不 容 易 察 觉 的 部 分 如 果 剔 除 适 当, 视 觉 上 不 但 能 够 接 受, 而 且 图 像 的 压 缩 效 率 也 会 提 高, 使 图 像 文 件 变 小 ; 反 之, 剔 除 太 多 图 像 数 据, 则 会 造 成 图 像 过 度 失 真 3.PNG 格 式 PNG(Portable Network Graphics) 图 像 格 式 是 一 种 非 破 坏 性 的 网 页 图 像 文 件 格 式, 它 提 供 了 将 图 像 文 件 以 最 小 的 方 式 压 缩 却 又 不 造 成 图 像 失 真 的 技 术 它 不 仅 具 备 了 GIF 图 像 格 式 的 大 部 分 优 点, 而 且 还 支 持 48-bit 的 色 彩, 更 快 的 交 错 显 示, 跨 平 台 的 图 像 亮 度 控 制, 更 多 层 的 透 明 度 设 置 6.2 添 加 图 像 img 有 了 图 像 文 件 之 后, 就 可 以 使 用 img 标 记 将 图 像 插 入 到 网 页 中, 从 而 达 到 美 化 页 面 的 效 果 语 法 :<img src=" 图 像 文 件 的 地 址 "> 说 明 : 在 该 语 法 中,src 参 数 用 来 设 置 图 像 文 件 所 在 的 路 径, 这 一 路 径 可 以 是 相 对 路 径, 也 可 以 是 绝 对 路 径 <title> 插 入 图 像 文 件 </title> <h3> 动 漫 世 界, 精 彩 无 限!</h3>
84 动 漫 名 称 ; 魔 卡 少 女 樱 <br> 打 开 封 印 之 书 的 木 之 本 樱, 因 身 负 回 收 库 洛 牌 的 任 务 而 变 身 成 拥 有 魔 法 的 魔 卡 少 女, 就 此 展 开 了 一 系 列 的 冒 险 动 画 的 基 本 架 构 与 漫 画 大 致 相 同, 在 细 节 部 分 做 了 一 些 改 动, 并 出 现 了 原 作 中 没 有 的 卡 片 和 角 色, 卡 片 收 集 的 顺 序 上 也 有 所 变 化, 剧 情 节 奏 较 漫 画 延 缓 不 少 <br> <!-- 在 页 面 中 居 中 插 入 一 张 卡 通 图 片 --> <center> <img src="pic.jpg"> </center> 运 行 这 段 代 码, 可 以 看 到 页 面 中 插 入 了 图 片, 如 图 6-1 所 示 如 果 不 通 过 <br> 标 记 进 行 换 行 操 作, 那 么 图 片 不 会 自 动 换 行 图 6-1 插 入 图 片 的 效 果 6.3 设 置 图 像 属 性 在 网 页 中 直 接 插 入 图 片 时, 图 像 的 大 小 和 原 图 是 相 同 的, 而 在 实 际 应 用 时 可 以 通 过 各 种 图 像 属 性 的 设 置 调 整 图 像 的 大 小 分 辨 率 等 内 容 6.3.1 图 像 高 度 height 通 过 height 属 性 可 以 设 置 图 片 显 示 的 高 度, 默 认 情 况 下, 改 变 高 度 的 同 时, 其 宽 度 也 会 等 比 例 进 行 调 整 语 法 :<img src=" 图 像 文 件 的 地 址 " height= 图 像 的 高 度 > 说 明 : 在 该 语 法 中, 图 像 的 高 度 单 位 是 像 素 <title> 设 置 页 面 图 像 大 小 </title>
第 6 章 使 用 图 像 85 <h3> 电 视 剧 : 仙 剑 奇 侠 传 </h3> 根 据 RPG 游 戏 改 编, 故 事 讲 述 的 是 平 凡 少 年 逍 遥 与 婶 婶 相 依 为 命, 经 营 着 一 家 小 客 栈 有 一 天, 婶 婶 突 然 生 了 重 病, 焦 急 的 逍 遥 前 往 仙 灵 岛 寻 找 解 药 仗 着 从 剑 仙 学 得 的 几 招 剑 法, 逍 遥 踏 上 了 一 段 危 险 重 重 的 旅 程, 开 始 了 一 段 波 澜 壮 阔 的 冒 险 与 奇 遇 <br> <!-- 在 页 面 中 居 中 插 入 两 张 图 片 --> <center> <!-- 默 认 的 图 片 大 小 --> <img src="pic.jpg"> <!-- 设 置 图 片 的 高 度 为 160 像 素 --> <img src="pic.jpg" height=160> </center> 运 行 这 段 代 码, 可 以 看 到 设 置 了 高 度 的 图 片 大 小 改 变 的 效 果, 如 图 6-2 所 示 图 6-2 调 整 图 片 的 高 度 6.3.2 图 像 宽 度 width 图 像 宽 度 的 属 性 与 图 像 高 度 类 似, 同 样 是 用 来 调 整 图 像 大 小 的 语 法 :<img src=" 图 像 文 件 的 地 址 " width= 图 像 的 宽 度 > 说 明 : 在 该 语 法 中, 图 像 的 宽 度 单 位 是 像 素 如 果 在 使 用 属 性 的 过 程 中, 只 设 置 了 高 度 或 宽 度, 则 另 外 一 个 参 数 会 等 比 例 变 化 如 果 同 时 设 置 两 个 属 性, 且 缩 放 比 例 不 同 的 情 况 下, 图 像 很 可 能 会 变 形, 下 面 通 过 实 例 说 明 <title> 设 置 页 面 图 像 大 小 </title> <h3> 轩 辕 剑 三 外 传 : 天 之 痕 </h3> <hr size=2> 神 州 大 地 上, 从 神 话 时 代 流 传 下 来 十 种 上 古 神 器 钟 剑 斧 壶 塔 琴 鼎 印 镜 石 它 们 各 自 有 着 迥 然 不 同 的 绝 世 力 量 只 要 稍 加 利 用 即 可 纵 横 四 海, 无 敌 天 下 但 它 们 的 下 落, 已 湮 灭 于 神 州 漫 长 之 乱 世 历 史 中 <br> 除 了 轩 辕 剑, 还 有 创 世 神 开 天 辟 地 使 用 的 神 器 炼 妖 壶, 在 上 古 英 雄 的 手 中 辗 转 流 传, 在 这 些 古 人 的 庇 佑 下, 中 国 到 了 文 化 鼎 盛 的 时 代 隋 唐 <br> 公 元 七 世 纪, 南 北 朝 时 期, 北 朝 皇 帝 隋 文 帝 派 兵 消 灭 了 南 朝 陈 国 后, 结 束 了 中 原 南 北 朝 数 百 年 之 分 裂 局 面, 重 新 统 一 了 中 国 并 成 立 了 隋 国 然 而 陈 国 的 遗 民 悲 痛 祖 国 亡 灭, 在 江 南 集 结 大 军 数 万 兴 兵 反 抗, 企 图 一 举 复 国 隋 文 帝 下 令 出 兵 平 乱, 然 而 最 令 人 惊 讶 的 是, 这 支 平 乱 部 队 为 首 竟 是 一 位 身 披 神 秘 斗 篷, 年 近 十 二 岁 的 少 年 他 手 持 一 把 雕 有 古 朴 花 纹 的 金 色 之 剑, 此 乃 十 大 上 古 神 器 之 一 轩 辕 剑 少 年 在 一 击 之 间, 便 将 反 抗 朝 廷 的 陈 国 数 万 人 马 化 为 飞 灰! 自 此, 大 隋 威 名 让 所 有 反 抗 者 闻 之 色 变, 再 没 有 人 敢 轻 起 反 抗 之 念 <br>
86 天 之 痕 的 故 事 从 十 六 年 后 开 始, 发 生 在 轩 辕 剑 三 的 一 百 三 十 三 年 前 <br> <!-- 在 页 面 中 居 中 插 入 两 张 图 片 --> <center> <!-- 设 置 图 片 的 宽 度 为 160 像 素 --> <img src="pic.jpg" width=260> <!-- 同 时 设 置 图 片 的 高 度 和 宽 度 --> <img src="pic.jpg" width=260 height=140> </center> 运 行 这 段 代 码, 可 以 看 到 设 置 了 宽 度 的 图 片 大 小 改 变 的 效 果, 如 图 6-3 所 示 在 该 图 中, 第 一 张 图 片 只 设 置 了 图 像 的 宽 度, 因 此 它 被 等 比 例 缩 小 而 在 第 二 张 图 片 中, 同 时 设 置 了 图 片 的 高 度 和 宽 度, 而 且 缩 小 的 比 例 不 同, 因 此 造 成 了 图 片 被 压 扁 的 效 果 图 6-3 设 置 图 像 的 大 小 6.3.3 图 像 边 框 border 在 默 认 情 况 下, 页 面 中 插 入 的 图 像 是 没 有 边 框 的, 可 以 通 过 border 属 性 为 图 像 添 加 边 框 语 法 :<img src=" 图 像 文 件 的 地 址 " border=" 图 像 边 框 的 宽 度 "> 说 明 : 在 该 语 法 中,src 是 图 像 文 件 的 地 址, 是 不 可 缺 少 的 border 的 单 位 是 像 素 <title> 设 置 图 像 边 框 </title> <h3> 美 女 与 野 兽 (Beauty and the Beast)</h3> <hr size=2> 在 一 个 被 施 了 魔 咒 的 古 堡 里, 一 位 王 子 因 不 懂 得 慈 悲 与 宽 容 而 被 仙 女 变 为 野 兽, 惟 有 他 学 会 如 何 爱 人 才 能 变 回 原 貌, 后 来 美 女 贝 儿 为 救 父 亲 而 答 应 被 野 兽 囚 禁, 在 一 群 魔 堡 仆 役 的 穿 针 引 线 之 下, 贝
第 6 章 使 用 图 像 87 儿 与 野 兽 从 针 锋 相 对 到 相 知 相 守, 经 历 了 一 番 波 折 之 后, 最 后 才 终 于 得 以 解 开 魔 法 的 桎 梏 <br> <!-- 在 页 面 中 居 中 插 入 两 张 图 片 --> <center> <!-- 不 设 置 图 片 的 边 框 --> <img src="pic.jpg"> <!-- 设 置 图 片 的 边 框 为 5 像 素 --> <img src="pic.jpg" border="5"> </center> 运 行 这 段 代 码, 效 果 如 图 6-4 所 示 可 以 看 到 在 右 侧 图 像 的 周 围 添 加 了 边 框 的 效 果, 边 框 的 宽 度 为 5 像 素 惟 图 6-4 设 置 图 像 的 边 框 6.3.4 图 像 水 平 间 距 hspace 如 果 不 使 用 <br> 标 记 或 者 <p> 标 记 进 行 换 行 显 示, 那 么 添 加 的 图 像 会 紧 跟 在 文 字 之 后 而 图 像 与 文 字 之 间 的 水 平 距 离 是 可 以 通 过 hspace 参 数 进 行 调 整 的 通 过 调 整 间 距, 可 以 使 文 字 和 图 像 的 排 版 不 那 么 拥 挤, 看 上 去 更 加 协 调 语 法 :<img src=" 图 像 文 件 的 地 址 " hspace=" 水 平 间 距 "> 说 明 : 在 该 语 法 中,src 是 图 像 文 件 的 地 址, 是 不 可 缺 少 的 水 平 间 距 hspace 属 性 的 单 位 是 像 素 <title> 设 置 图 像 的 水 平 间 距 </title> <h3> 请 选 择 您 喜 欢 的 头 像 </h3> <hr size=2> <!-- 在 页 面 中 居 中 插 入 两 张 图 片 --> <!-- 不 设 置 图 片 水 平 间 距 的 效 果 --> 人 物 头 像 <img src="pic01.jpg" border="2"> <img src="pic02.jpg" border="2">
88 <img src="pic03.jpg" border="2"> <img src="pic04.jpg" border="2"> <br><br> <!-- 设 置 图 片 的 水 平 间 距 为 20 像 素 --> 动 物 头 像 <img src="pic11.jpg" border="2" hspace="20"> <img src="pic12.jpg" border="2" hspace="20"> <img src="pic13.jpg" border="2" hspace="20"> <img src="pic14.jpg" border="2" hspace="20"> 运 行 代 码 的 效 果 如 图 6-5 所 示, 其 中 人 物 头 像 一 行 没 有 设 置 水 平 间 距, 图 片 和 文 字 紧 紧 连 在 一 起 ; 在 动 物 头 像 一 行 设 置 了 20 像 素 的 间 距, 图 像 与 文 字 就 显 得 不 那 么 拥 挤 了 图 6-5 设 置 图 像 的 水 平 间 距 6.3.5 图 像 垂 直 间 距 vspace 垂 直 间 距 参 数 vspace 用 来 调 整 图 像 与 文 字 的 垂 直 距 离 语 法 :<img src=" 图 像 文 件 的 地 址 " vspace=" 垂 直 间 距 "> 说 明 : 在 该 语 法 中,vspace 属 性 的 单 位 是 像 素 <title> 设 置 图 像 的 垂 直 间 距 </title> <img src="pic.jpg" vspace="40"> 英 国 著 名 的 音 乐 剧 超 级 天 后 莎 拉 布 莱 曼 的 新 专 辑 伊 甸 园 隆 重 推 出 伊 甸 园 共 收 录 了 十 五 首 歌 曲, 曲 风 涵 盖 了 古 典 跨 界 与 流 行, 专 辑 中 莎 拉 依 旧 保 持 她 美 如 天 籁 的 歌 声 <br> 英 国 著 名 的 音 乐 剧 超 级 天 后 莎 拉 布 莱 曼 的 新 专 辑 伊 甸 园 隆 重 推 出 伊 甸 园 共 收 录 了 十 五 首 歌 曲, 曲 风 涵 盖 了 古 典 跨 界 与 流 行, 专 辑 中 莎 拉 依 旧 保 持 她 美 如 天 籁 的 歌 声 以 她 最 美 丽 的 声 音 来 诠 释 这 些 极 富 古 典 气 息 的 歌 曲, 相 信 喜 欢 莎 拉 布 莱 曼 (Sarah Brightman) 的 歌 迷 应 该 不 会 错 过 这 张 充 满 古 典 之 美 的 专 辑 音 乐 是 她 所 热 爱 的 东 西, 她 自 己 的 音 乐 也 是 这 样, 我 演 唱 我 热 爱 的 音 乐 如 果 我 变 得 不 诚 实, 就 不 再 成 为 音 乐 你 必 须 表 达 你 内 心 的 情 感, 听 众 知 道 他 们 是 否 被 欺 骗 同 名 主 打 歌 伊 甸 园 由 她 亲 自 填 词, 是 她 个 人 最 喜 欢 的 作 品 之 一
第 6 章 使 用 图 像 89 运 行 这 段 代 码, 效 果 如 图 6-6 所 示, 为 图 像 设 置 了 40 像 素 的 垂 直 间 距 图 6-6 设 置 图 像 的 垂 直 间 距 6.3.6 图 像 相 对 于 文 字 基 准 线 的 对 齐 方 式 align 图 像 和 文 字 之 间 的 排 列 方 式 可 以 通 过 align 参 数 来 调 整 图 像 的 绝 对 对 齐 方 式 与 相 对 文 字 的 对 齐 方 式 不 同, 绝 对 对 齐 方 式 包 括 左 对 齐 右 对 齐 和 居 中 对 齐 3 种, 而 相 对 文 字 对 齐 方 式 则 是 指 图 像 与 一 行 文 字 的 相 对 位 置 语 法 :<img src=" 图 像 文 件 的 地 址 " align=" 相 对 文 字 的 对 齐 方 式 "> 说 明 : 在 该 语 法 中,align 的 取 值 见 表 6-1 align 取 值 表 6-1 图 像 相 对 文 字 的 对 齐 方 式 表 示 的 含 义 top 把 图 像 的 顶 部 和 同 行 的 最 高 部 分 对 齐 ( 可 能 是 文 本 的 顶 部, 也 可 能 是 图 像 的 顶 部 ) middle 把 图 像 的 中 部 和 行 的 中 部 对 齐 ( 通 常 是 文 本 行 的 基 线, 并 不 是 实 际 的 行 的 中 部 ) bottom texttop absmiddle baseline absbottom 把 图 像 的 底 部 和 同 行 文 本 的 底 部 对 齐 把 图 像 的 顶 部 和 同 行 中 最 高 的 文 本 的 顶 部 对 齐, 常 用 于 Netscape 中 把 图 像 的 中 部 和 同 行 中 最 大 项 的 中 部 对 齐, 常 用 于 Netscape 中 把 图 像 的 底 部 和 文 本 的 基 线 对 齐, 常 用 于 Netscape 中 把 图 像 的 底 部 和 同 行 中 的 最 低 项 对 齐, 常 用 于 Netscape 中 left 使 图 像 和 左 边 界 对 齐 ( 文 本 环 绕 图 像 ) right 使 图 像 和 右 边 界 对 齐 ( 文 本 环 绕 图 像 ) 在 表 中,Netscape 支 持 texttop baseline absmiddle 和 absbottom 的 取 值 <title> 设 置 图 像 与 文 字 的 相 对 位 置 </title>
90 <font size=4> 作 为 基 准 的 文 字 </font> <!-- 图 像 的 底 端 与 文 字 的 底 端 对 齐 --> <img src="pic.gif" width=85 align="bottom"> <!-- 图 像 的 中 间 与 文 字 的 中 间 线 对 齐 --> <img src="pic.gif" width=85 align="middle"> <!-- 图 像 的 顶 端 与 文 字 的 顶 端 对 齐 --> <img src="pic.gif" width=85 align="texttop"> <!-- 图 像 的 中 间 线 与 文 字 的 中 间 线 对 齐 --> <img src="pic.gif" width=85 align="absmiddle"> <!-- 图 像 的 底 端 与 文 字 的 底 端 对 齐 --> <img src="pic.gif" width=85 align="baseline"><br> <hr size=2> 下 面 显 示 图 像 位 于 文 字 左 侧 的 效 果 :<br><br> <img src="pic.gif" align="left"> 本 实 例 讲 解 的 是 关 于 图 像 与 文 字 的 相 对 位 置 的 设 置, 文 字 作 为 图 像 对 齐 效 果 的 参 照 物 如 果 将 图 像 的 对 齐 方 式 设 置 成 left 或 者 right, 图 像 则 会 与 文 字 进 行 环 绕 显 示 这 是 图 像 设 置 为 left 的 效 果 <br><br><br> 下 面 显 示 图 像 位 于 文 字 右 侧 的 效 果 :<br><br> <img src="pic.gif" align="right"> 本 实 例 讲 解 的 是 关 于 图 像 与 文 字 的 相 对 位 置 的 设 置, 文 字 作 为 图 像 对 齐 效 果 的 参 照 物 如 果 将 图 像 的 对 齐 方 式 设 置 成 left 或 者 right, 图 像 则 会 与 文 字 进 行 环 绕 显 示 这 是 图 像 设 置 为 right 的 效 果 <br><br> 运 行 这 段 代 码, 可 以 看 到 在 水 平 线 上 面 是 文 字 与 图 像 的 相 对 垂 直 位 置 的 变 化 效 果 ; 而 在 水 平 线 下 面, 则 是 左 对 齐 和 右 对 齐 的 效 果, 如 图 6-7 所 示 图 6-7 设 置 图 像 与 文 字 的 相 对 位 置 6.3.7 图 像 的 提 示 文 字 alt 如 果 网 络 上 观 看 Web 站 点 的 人 使 用 了 一 个 非 图 像 化 的 浏 览 器, 或 者 为 了 加 快 浏 览 器 速 度 关 掉 了 图 像 显 示, 这 时 候 提 示 文 字 就 可 以 起 作 用 了 当 图 像 没 有 装 载 到 浏 览 器 上 时, 就 会 显 示 添 加 的 提 示 文 字, 而 下 载 图 像 之 后, 当 鼠 标 停 留 在 图 像 上 方 时 也 会 显 示 出 提 示 文 字, 这 一 功 能 通 过 alt 属 性 来 实 现 语 法 :<img src=" 图 像 文 字 的 地 址 " alt=" 提 示 文 字 的 内 容 "> 说 明 : 在 该 语 法 中, 提 示 文 字 的 内 容 可 以 是 中 文, 也 可 以 是 英 文
第 6 章 使 用 图 像 91 <title> 为 图 像 添 加 提 示 文 字 </title> <h3> 史 密 斯 夫 妇 Mr. and Mrs. Smith</h3> <img src="pic.jpg" hspace="20" align=left alt=" 这 是 6 月 6 日 发 布 的 由 美 国 影 星 布 拉 德 皮 特 ( 右 ) 和 安 吉 丽 娜 朱 莉 主 演 的 影 片 史 密 斯 夫 妇 的 海 报 该 影 片 将 于 2005 年 6 月 10 日 在 全 美 上 映 "> 影 片 介 绍 : 布 拉 德 皮 特 和 安 吉 丽 娜 朱 莉 所 扮 演 的 史 密 斯 夫 妇 在 外 人 眼 里 是 一 对 令 人 羡 慕 的 夫 妻, 他 们 家 境 优 越, 夫 妻 恩 爱 但 多 年 的 夫 妻 生 活 却 多 少 磨 平 当 初 的 激 情, 而 多 些 许 平 淡 与 乏 味, 而 这 一 切 都 仅 仅 是 假 象 而 已, 这 夫 妇 二 人 都 是 受 过 专 业 训 练, 身 经 百 战, 杀 人 无 数 的 职 业 杀 手 他 们 各 自 效 力 于 对 立 的 两 个 秘 密 组 织, 可 能 由 于 双 方 都 是 伪 装 技 法 高 超 的 超 级 杀 手, 虽 然 同 室 而 居 七 年 有 余, 但 各 自 却 对 对 方 的 秘 密 身 份 知 之 甚 少 而 在 一 次 执 行 刺 杀 任 务 中, 夫 妇 二 人 恰 好 被 同 时 指 派 去 刺 杀 同 一 个 目 标, 这 使 得 二 人 为 完 成 任 务 不 得 不 同 室 操 戈, 而 结 果 却 是 两 败 俱 伤 为 了 找 到 导 致 自 己 任 务 失 败 的 对 方, 夫 妇 俩 开 始 调 动 一 切 资 源 调 查 对 方 的 身 份, 而 随 着 调 查 的 深 入, 越 来 越 多 的 证 据 指 向 同 自 己 生 活 多 年 的 爱 人, 因 此, 夫 妻 二 人 的 猜 疑 和 试 探 也 越 加 深 入, 直 到 妻 子 在 晚 餐 中 无 意 将 自 己 敏 捷 的 身 手 暴 露 给 同 是 内 行 的 杀 手 丈 夫, 之 后 运 行 这 段 代 码, 当 鼠 标 位 于 图 像 上 面 时 可 以 看 到 添 加 的 说 明 文 字, 如 图 6-8 所 示 图 6-8 图 像 的 提 示 文 字 6.4 图 像 的 超 链 接 除 了 文 字 可 以 添 加 超 链 接 之 外, 图 像 也 可 以 设 置 超 链 接 属 性 而 一 幅 图 像 可 以 切 分 成 不 同 的 区 域 设 置 链 接, 而 这 些 区 域 被 称 为 热 区 因 此 一 幅 图 像 也 就 可 以 设 置 多 个 链 接 地 址 6.4.1 设 置 图 像 的 超 链 接 对 于 给 整 个 一 幅 图 像 文 件 设 置 超 链 接 来 说, 方 法 比 较 简 单, 与 文 本 链 接 类 似 语 法 :<A href=" 链 接 地 址 " target=" 目 标 窗 口 的 打 开 方 式 "><img src=" 图 像 文 件 的 地 址 "></A> 说 明 : 在 该 语 法 中,href 参 数 用 来 设 置 图 像 的 链 接 地 址, 而 在 图 像 属 性 中 可 以 添 加 图 像 的 其 他 参 数, 如 height border hspace 等
92 下 面 设 置 一 个 实 例, 该 实 例 的 第 一 个 页 面 index.html 是 一 幅 中 国 地 图, 单 击 该 页 面 中 的 图 像, 可 以 链 接 到 一 个 介 绍 中 国 的 文 字 页 面 china.html 实 例 中 index.html 文 件 的 代 码 如 下 : <title> 为 图 像 添 加 超 链 接 </title> <h3> 中 国 是 个 优 秀 的 国 家 </h3> <center> <A href="china.html"><img src="map.jpg" hspace="10" alt=" 中 国 "></A> </center> 实 例 中 china.html 文 件 的 代 码 如 下 : <title> 给 图 像 添 加 超 链 接 </title> 中 华 人 民 共 和 国, 简 称 中 国, 位 于 亚 洲 大 陆 东 部, 太 平 洋 西 岸 陆 地 面 积 约 960 万 平 方 公 里, 在 亚 洲, 是 面 积 最 大 的 国 家, 在 世 界 上, 是 仅 次 于 俄 罗 斯 和 加 拿 大 的 第 三 大 国 家 <br> 中 国 领 土 北 起 黑 龙 江 省 漠 河 以 北 的 黑 龙 江 江 心, 南 到 南 沙 群 岛 的 曾 母 暗 沙, 南 北 相 距 约 5500 公 里 ; 东 起 黑 龙 江 与 乌 苏 里 江 的 汇 合 处, 西 到 帕 米 尔 高 原, 东 西 相 距 约 5000 公 里 陆 地 边 界 长 约 2.28 万 公 里 中 国 临 海 海 域 广 阔, 从 北 向 南 依 次 是 渤 海 黄 海 东 海 和 南 海, 海 域 面 积 共 约 473 万 平 方 公 里 海 上 分 布 着 5400 多 个 岛 屿 中 国 海 岸 线 总 长 度 3.2 万 公 里, 其 中 大 陆 海 岸 线 1.8 万 公 里, 岛 屿 海 岸 线 1.4 万 公 里 <br> 运 行 文 件 index.html, 可 以 看 到 打 开 的 页 面 中 包 含 一 幅 中 国 地 图, 当 鼠 标 停 留 在 图 片 上 方 时, 会 出 现 中 国 的 提 示 文 字, 如 图 6-9 所 示 在 图 像 中 单 击 鼠 标, 页 面 将 会 跳 转 到 china.html 文 件 中, 效 果 如 图 6-10 所 示 图 6-9 图 像 链 接 页 面 的 效 果 图 6-10 图 像 超 链 接 的 跳 转 页 面
第 6 章 使 用 图 像 93 6.4.2 设 置 图 像 热 区 链 接 除 了 对 整 个 图 像 进 行 超 链 接 的 设 置 外, 还 可 以 将 图 像 划 分 成 不 同 的 区 域 进 行 链 接 设 置 而 包 含 热 区 的 图 像 也 可 以 称 为 映 射 图 像 语 法 : 首 先 需 要 在 图 像 文 件 中 设 置 映 射 图 像 名, 在 图 像 的 属 性 中 使 用 <usemap> 标 记 添 加 图 像 要 引 用 的 映 射 图 像 的 名 称 如 下 : <img src=" 图 像 地 址 " usemap=" 映 射 图 像 名 称 "> 然 后 需 要 定 义 热 区 图 像 以 及 热 区 的 链 接 属 性 如 下 : <map name=" 映 射 图 像 名 称 "> <area shape=" 热 区 形 状 " coords=" 热 区 坐 标 " href=" 链 接 地 址 "> </map> 说 明 : 在 该 语 法 中 要 先 定 义 映 射 图 像 的 名 称, 然 后 再 引 用 这 个 映 射 图 像 在 <area> 标 记 中 定 义 了 热 区 的 位 置 和 链 接, 其 中 shape 用 来 定 义 热 区 形 状, 可 以 取 值 为 rect( 矩 形 区 域 ) circle( 圆 形 区 域 ) 以 及 poly( 多 边 形 区 域 );coords 参 数 则 用 来 设 置 区 域 坐 标, 对 于 不 同 形 状 来 说,coords 设 置 的 方 式 也 不 同 对 于 矩 形 区 域 rect 来 说,coords 包 含 4 个 参 数, 分 别 为 left top right 和 bottom, 也 可 以 将 这 4 个 参 数 看 作 矩 形 两 个 对 角 的 点 坐 标 ; 对 于 圆 形 区 域 circle 来 说,coords 包 含 3 个 参 数, 分 别 为 center-x center-y 和 tadius, 也 可 以 看 作 是 圆 形 的 圆 心 坐 标 (x,y) 与 半 径 的 值 ; 对 于 多 边 形 区 域 poly 设 置 坐 标 参 数 比 较 复 杂, 跟 多 边 形 的 形 状 息 息 相 关 coords 参 数 需 要 按 照 顺 序 ( 可 以 是 逆 时 针, 也 可 以 是 顺 时 针 ) 取 各 个 点 的 x y 坐 标 值 由 于 定 义 坐 标 比 较 复 杂 而 且 难 以 控 制, 一 般 情 况 下 都 使 用 可 视 化 软 件 进 行 这 种 参 数 的 设 置 具 体 方 法 如 下 : (1) 编 写 一 个 HTML 文 件, 代 码 如 下 : <title> 给 图 像 添 加 超 链 接 </title> <h3> 中 国 是 个 优 秀 的 国 家 </h3> <center> <img src="map.jpg" hspace="10"><br><br> </center> <hr color="#990000" size=3><br><br> 中 华 人 民 共 和 国, 简 称 中 国, 位 于 亚 洲 大 陆 东 部, 太 平 洋 西 岸 陆 地 面 积 约 960 万 平 方 公 里, 在 亚 洲, 是 面 积 最 大 的 国 家, 在 世 界 上, 是 仅 次 于 俄 罗 斯 和 加 拿 大 的 第 三 大 国 家 <br> 中 国 领 土 北 起 黑 龙 江 省 漠 河 以 北 的 黑 龙 江 江 心, 南 到 南 沙 群 岛 的 曾 母 暗 沙, 南 北 相 距 约 5500 公 里 ; 东 起 黑 龙 江 与 乌 苏 里 江 的 汇 合 处, 西 到 帕 米 尔 高 原, 东 西 相 距 约 5000 公 里 陆 地 边 界 长 约 2.28 万 公 里 中 国 临 海 海 域 广 阔, 从 北 向 南 依 次 是 渤 海 黄 海 东 海 和 南 海, 海 域 面 积 共 约 473 万 平 方 公 里 海 上 分 布 着 5400 多 个 岛 屿 中 国 海 岸 线 总 长 度 3.2 万 公 里, 其 中 大 陆 海 岸 线 1.8 万 公 里, 岛 屿 海 岸 线 1.4 万 公 里 <br> 中 国 行 政 区 包 括 省 直 辖 市 自 治 区 以 及 特 别 行 政 区 直 辖 市 的 行 政 地 位 相 当 于 省 级, 目 前 我 国 直 辖 市 的 数 目 为 4 个, 分 别 为 北 京 上 海 天 津 重 庆 <br><br> <font color="#990066" size=4><a name="beijing"> 北 京 </a></font><br> 北 京 是 我 国 的 首 都, 全 国 的 政 治 文 化 中 心 和 国 际 交 往 的 枢 纽, 也 是 一 座 著
94 名 的 历 史 文 化 名 城 北 京 位 于 华 北 平 原 的 最 北 端, 西 与 黄 土 高 原 相 邻, 北 与 内 蒙 古 高 原 相 接, 处 于 高 原 相 接 山 地 和 平 原 衔 接 部 北 京 地 处 温 带 半 干 旱 半 湿 润 季 风 气 候 区, 四 季 分 明 北 京 有 着 大 气, 严 肃, 正 统 而 又 不 失 闲 适 清 雅 的 文 化 氛 围 <br><br> <font color="#990066" size=4><a name="tianjin"> 天 津 </a></font><br> 天 津 市 简 称 津, 地 处 华 北 平 原 东 北 部, 渤 海 之 滨, 素 有 渤 海 明 珠 之 称 天 津 毗 邻 首 都 北 京, 是 海 上 通 往 北 京 的 咽 喉 要 道, 自 古 就 是 京 师 门 户, 畿 辅 重 镇 天 津 是 华 北 的 一 大 工 业 城 市, 是 华 北 重 要 商 业 中 心 和 口 岸 城 市, 油 气 海 盐 资 源 丰 富, 又 有 一 定 的 工 业 技 术 基 础 天 津 的 旅 游 景 点 以 人 文 景 观 为 主, 以 自 然 景 观 为 辅, 主 要 由 三 个 部 分 组 成 : 以 海 河 为 轴 线 的 市 中 心 旅 游 区, 以 名 胜 古 迹 见 长 的 蓟 县 旅 游 区 和 以 滨 海 观 光 为 特 色 的 塘 沽 旅 游 区 <br><br> <font color="#990066" size=4><a name="shanghai"> 上 海 </a></font><br> 上 海 地 处 长 江 三 角 洲 前 沿, 倚 东 海 之 滨, 向 东 是 浩 瀚 无 垠 的 太 平 洋 与 美 国 的 西 海 岸 隔 海 相 望, 南 临 杭 州 湾, 西 与 富 庶 的 江 苏 浙 江 两 省 毗 邻, 北 界 黄 金 水 道 长 江 入 海 口, 正 当 我 国 南 北 海 岸 线 的 中 部, 交 通 便 利, 地 理 位 置 十 分 优 越, 是 世 界 第 三 大 港 和 中 国 最 大 的 港 口 上 海 虽 然 尚 没 有 雄 伟 的 名 山 大 川 奇 峰 异 谷, 也 无 世 界 奇 迹 之 类 的 名 胜 古 迹, 但 是, 多 少 年 来 一 直 以 她 独 有 的 风 韵 吸 引 着 无 数 的 中 外 游 客 她 是 一 个 不 断 发 展 日 渐 强 盛 的 城 市, 是 我 国 最 大 的 商 业 金 融 中 心, 也 是 西 太 平 洋 地 区 重 要 的 国 际 港 口 城 市 <br><br> <font color="#990066" size=4><a name="chongqing"> 重 庆 </a></font><br> 重 庆 位 于 青 藏 高 原 与 长 江 中 下 游 平 原 的 过 渡 地 带 气 候 属 亚 热 带 季 风 性 湿 润 气 候, 冬 暖 夏 热, 无 霜 期 长 雨 量 充 沛 温 润 多 阴 雨 热 同 季 重 庆 地 处 我 国 中 西 结 合 部, 是 承 东 启 西 左 右 传 递 的 枢 纽, 在 我 国 经 济 发 展 总 格 局 和 西 部 大 开 发 中, 具 有 重 要 的 战 略 地 位 和 作 用 重 庆 中 心 城 区 为 长 江 嘉 陵 江 所 环 抱, 夹 两 江 拥 群 山, 山 清 水 秀, 风 景 独 特, 各 类 建 筑 依 山 傍 水, 鳞 次 栉 比, 错 落 有 致, 素 以 美 丽 的 山 城 江 城 著 称 于 世 北 有 大 巴 山, 东 有 巫 山, 东 南 有 武 陵 山, 南 有 大 娄 山, 地 形 大 势 由 南 北 向 长 江 河 谷 倾 斜, 起 伏 较 大 地 貌 以 丘 陵 山 地 为 主, 坡 地 面 积 较 大, 成 层 性 明 显, 分 布 着 典 型 的 石 林 峰 林 溶 洞 峡 谷 等 喀 斯 特 景 观 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> (2) 启 动 Dreamweaver MX 2004, 选 择 文 件 打 开 命 令, 弹 出 打 开 对 话 框, 在 对 话 框 中 选 择 刚 才 编 写 的 HTML 文 件, 单 击 打 开 按 钮 打 开 HTML 文 件, 效 果 如 图 6-11 所 示 (3) 在 属 性 面 板 中 设 置 地 图 的 值 为 map, 也 就 是 定 义 图 像 要 引 用 的 映 射 图 像 名 (4) 为 了 显 示 各 种 热 区 的 效 果, 这 里 将 不 同 的 热 区 设 置 为 不 同 的 形 状 选 择 矩 形 热 点 工 具, 拖 动 鼠 标 左 键 在 北 京 的 位 置 上 绘 制 出 一 个 矩 形 区 域, 如 图 6-12 所 示 图 6-11 打 开 的 文 件 图 6-12 绘 制 矩 形 区 域
第 6 章 使 用 图 像 95 (5) 在 链 接 文 本 框 中 添 加 链 接 地 址 #beijing, 在 替 代 文 本 框 设 置 选 区 的 提 示 文 字 为 北 京 (6) 再 次 单 击 图 片, 选 择 多 边 形 热 点 工 具, 依 次 单 击 热 区 的 各 个 点 创 建 一 个 多 边 形 选 区, 如 图 6-13 所 示 (7) 在 属 性 面 板 中 设 置 链 接 地 址 为 #tianjin, 设 置 提 示 文 字 为 天 津 (8) 用 同 样 的 方 法 设 置 两 个 椭 圆 形 选 区, 分 别 设 置 链 接 地 址 为 #shanghai 和 #chongqing ; 然 后 设 置 对 应 的 提 示 文 字 为 上 海 和 重 庆 (9) 完 成 后 保 存 文 件, 使 用 浏 览 器 运 行 这 个 文 件 当 鼠 标 位 于 某 一 个 热 区 上 方 时, 会 出 现 该 热 区 的 提 示 文 字 与 链 接 标 志, 效 果 如 图 6-14 所 示 图 6-13 绘 制 多 边 形 选 区 图 6-14 运 行 文 件 的 效 果 单 击 上 海 所 在 的 热 区, 将 会 自 动 跳 转 到 关 于 上 海 的 介 绍 文 字 的 位 置, 如 图 6-15 所 示 运 行 其 他 热 区 的 效 果 类 似, 这 里 不 再 列 举 图 6-15 跳 转 到 热 区 的 链 接 地 址 重 新 打 开 源 文 件, 可 以 看 到 在 源 文 件 添 加 图 像 的 代 码 中 增 加 了 部 分 内 容 在 原 来 的 文 件 代 码 中 插 入 图 像 的 代 码 如 下 :
96 <img src="map.jpg" hspace="10"><br><br> 这 是 位 于 标 记 <center> 与 </center> 之 间 的 内 容, 而 增 加 后 的 代 码 如 下 : <img src="map.jpg" hspace="10" border="0" usemap="#map"> <map name="map"> <area shape="rect" coords="398,168,420,190" href="#beijing" alt=" 北 京 "> <areashape="poly"coords="413,194,419,188,423,192,423,197,443,197,442,209,422,208,414,201" href="#tianjin" alt=" 天 津 "> <area shape="circle" coords="317,323,17" href="#chongqing" alt=" 重 庆 "> <area shape="circle" coords="485,299,17" href="#shanghai" alt=" 上 海 "> </map> <br><br> 这 段 代 码 就 是 设 置 热 区 的 关 键 代 码, 在 这 段 代 码 中 设 置 了 4 个 不 同 形 状 的 热 区, 并 分 别 为 这 些 热 区 设 定 了 链 接 地 址 和 提 示 文 字