网 页 设 计 与 制 作 案 例 教 程 ( 第 3 版 ) 签 进 行 解 释 并 生 成 最 终 呈 现 给 用 户 的 丰 富 多 彩 的 网 页 网 页 比 报 纸 广 播 电 视 等 传 统 媒 介 在 信 息 传 递 上 更 加 迅 速 多 样 化, 交 互 能 力 更 强 掌 握 一

Transcription

1 D 第 章 互 联 网 的 迅 速 发 展 与 普 及, 为 人 们 提 供 了 更 方 便 快 捷 的 信 息 交 流 平 台 上 网 已 经 成 为 很 多 人 工 作 生 活 中 必 不 可 少 的 一 部 分, 这 主 要 是 由 于 网 页 承 载 了 其 他 任 何 一 种 媒 介 都 无 法 比 拟 的 丰 富 资 源 本 章 学 习 要 点 : 网 页 及 网 页 类 型 ; 网 页 基 本 元 素 ; 网 页 制 作 常 用 软 件 和 技 术 ; 网 站 与 域 名 ; 网 站 建 设 的 一 般 流 程 ; HTML 基 础 知 识 学 习 任 务 : 认 识 网 页 互 联 网 是 一 个 蕴 藏 着 无 穷 资 源 的 宝 库, 在 资 源 共 享 和 信 息 交 互 方 面 具 有 得 天 独 厚 的 优 势, 网 页 正 是 传 递 这 些 资 源 和 信 息 的 重 要 载 体 网 页 不 但 可 以 用 于 浏 览 文 字 图 片 多 媒 体 信 息, 而 且 在 娱 乐 商 务 等 领 域 都 有 重 要 应 用 ( 如 电 子 邮 件 聊 天 室 搜 索 引 擎 网 上 购 物 电 子 政 务 等 ) 本 节 学 习 任 务 认 识 什 么 是 网 页, 熟 悉 网 页 类 型 和 网 页 基 本 构 成 元 素, 了 解 设 计 制 作 网 页 常 用 的 软 件 和 技 术 什 么 是 网 页 网 页 是 一 种 可 以 在 互 联 网 上 传 输 能 被 浏 览 器 识 别 和 翻 译 成 页 面 并 显 示 出 来 的 文 件, 网 页 是 网 站 的 基 本 构 成 元 素 在 联 网 的 计 算 机 上 安 装 浏 览 器 后, 在 浏 览 器 的 地 址 栏 中 输 入 诸 如 的 网 址, 即 可 在 浏 览 器 中 打 开 网 页, 如 图 1-1 所 示 该 网 页 是 全 国 大 学 生 创 业 服 务 网 站 的 主 页 ( 即 Homepage), 具 有 呈 现 整 个 网 站 主 题 及 页 面 导 航 的 门 户 功 能 一 般 网 页 上 都 会 有 文 本 和 图 片 等 信 息, 复 杂 一 些 的 网 页 上 还 会 有 声 音 视 频 动 画 等 多 媒 体 内 容 在 网 页 上 单 击 鼠 标 右 键, 选 择 查 看 源 文 件 命 令, 可 以 查 看 网 页 的 代 码 结 构 用 户 可 以 使 用 记 事 本 对 网 页 中 的 文 字 图 片 表 格 多 媒 体 等 页 面 内 容 进 行 编 辑, 并 通 过 超 文 本 标 记 语 言 HTML 对 这 些 元 素 进 行 描 述 和 控 制, 最 后 由 浏 览 器 对 这 些 标

2 网 页 设 计 与 制 作 案 例 教 程 ( 第 3 版 ) 签 进 行 解 释 并 生 成 最 终 呈 现 给 用 户 的 丰 富 多 彩 的 网 页 网 页 比 报 纸 广 播 电 视 等 传 统 媒 介 在 信 息 传 递 上 更 加 迅 速 多 样 化, 交 互 能 力 更 强 掌 握 一 定 的 网 页 设 计 理 念 和 网 站 开 发 技 术, 将 有 助 于 用 户 更 好 地 利 用 网 络 资 源 2 图 1-1 网 页 网 页 类 型 网 页 分 为 静 态 网 页 和 动 态 网 页 两 种 类 型 1. 静 态 网 页 在 网 站 设 计 中, 使 用 纯 HTML 格 式 的 网 页 通 常 称 为 静 态 网 页, 它 运 行 于 客 户 端 早 期 的 网 站 一 般 都 是 由 静 态 网 页 组 成 的, 它 们 是 以.htm.html.shtml 和.xml 等 为 扩 展 名 的 静 态 网 页 的 内 容 仅 仅 是 标 准 的 HTML 代 码, 但 静 态 网 页 上 也 可 以 出 现 各 种 动 态 效 果, 如 GIF 格 式 的 动 画 Flash 动 画 等, 只 不 过 这 些 动 态 效 果 只 是 视 觉 上 的, 与 下 面 将 要 介 绍 的 动 态 网 页 是 不 同 的 概 念 静 态 网 页 的 基 本 特 点 归 纳 如 下 每 个 静 态 网 页 都 有 一 个 固 定 的 URL, 并 且 网 页 URL 的 扩 展 名 为.htm.html 和.shtml 等 格 式 网 页 内 容 发 布 到 网 站 服 务 器 上 之 后, 无 论 是 否 有 用 户 访 问, 每 个 静 态 网 页 的 内 容 都 是 保 存 在 网 站 服 务 器 上 的, 也 就 是 说, 静 态 网 页 是 实 实 在 在 保 存 在 服 务 器 上 的 文 件, 每 个 网 页 都 是 一 个 独 立 的 文 件 静 态 网 页 的 内 容 相 对 稳 定, 因 此 容 易 被 搜 索 引 擎 检 索 静 态 网 页 没 有 数 据 库 的 支 持, 在 网 站 制 作 和 维 护 方 面 工 作 量 较 大, 因 此 当 网 站 信 息 量 很 大 时 完 全 依 靠 静 态 网 页 的 制 作 方 式 是 比 较 困 难 的 静 态 网 页 的 交 互 性 较 差, 在 功 能 方 面 有 较 大 的 限 制

3 2. 动 态 网 页 采 用 了 动 态 网 页 技 术, 在 服 务 器 端 运 行 的 网 页 和 程 序 被 称 为 动 态 网 页, 它 们 会 根 据 编 写 的 程 序 访 问 数 据 库, 并 动 态 地 生 成 页 面 动 态 网 页 的 优 点 是 效 率 高 更 新 快 移 植 性 强, 可 以 根 据 先 前 制 定 好 的 程 序 页 面, 根 据 用 户 的 不 同 请 求 返 回 相 应 的 数 据, 从 而 达 到 资 源 的 最 大 利 用 和 节 省 服 务 器 的 物 理 资 源 动 态 网 页 的 基 本 特 点 归 纳 如 下 动 态 网 页 以 数 据 库 技 术 为 基 础, 可 以 大 大 降 低 网 站 维 护 的 工 作 量 但 是, 动 态 网 页 的 高 效 率 要 通 过 频 繁 地 和 数 据 库 进 行 通 信 才 能 实 现, 频 繁 地 读 取 数 据 库 会 花 费 大 量 的 时 间, 当 访 问 量 达 到 一 定 的 数 量 时, 会 导 致 效 率 成 倍 下 降 采 用 动 态 网 页 技 术 的 网 站 可 以 实 现 更 多 的 功 能, 如 用 户 注 册 用 户 登 录 在 线 调 查 用 户 管 理 订 单 管 理 等 动 态 网 页 实 际 上 并 不 是 存 在 于 服 务 器 上 的 独 立 的 网 页 文 件, 只 有 当 用 户 请 求 时, 服 务 器 才 生 成 并 返 回 一 个 完 整 的 网 页 动 态 网 页 中 URL 的 字 符? 对 搜 索 引 擎 检 索 存 在 一 定 的 问 题 搜 索 引 擎 一 般 不 可 能 从 一 个 网 站 的 数 据 库 中 检 索 全 部 网 页, 或 者 出 于 技 术 方 面 的 考 虑, 搜 索 引 擎 不 会 去 抓 取 网 址 中? 后 面 的 内 容, 因 此, 采 用 动 态 网 页 的 网 站 在 进 行 搜 索 引 擎 检 索 设 计 时, 需 要 做 一 定 的 技 术 处 理 才 能 适 应 搜 索 引 擎 的 要 求 由 此 可 见, 静 态 网 页 和 动 态 网 页 各 有 特 点, 网 站 采 用 动 态 网 页 还 是 静 态 网 页 主 要 取 决 于 网 站 的 功 能 需 求 和 网 站 内 容 的 多 少 如 果 网 站 功 能 比 较 简 单, 内 容 更 新 量 不 是 很 大, 采 用 纯 静 态 网 页 的 方 式 会 更 简 单, 反 之, 一 般 要 采 用 动 态 网 页 技 术 来 实 现 在 静 态 网 页 的 基 础 上, 结 合 动 态 网 页 技 术 是 目 前 常 用 的 网 站 建 设 方 法 网 页 固 定 不 变 的 内 容 可 以 使 用 静 态 方 法 设 计, 而 特 殊 的 功 能 以 及 日 常 更 新 部 分 使 用 动 态 网 页 技 术 来 实 现, 如 用 户 注 册 用 户 登 录 新 闻 发 布 等 由 于 动 态 网 页 以 数 据 库 技 术 为 基 础, 数 据 库 的 存 储 方 式 存 在 搜 索 引 擎 的 检 索 问 题, 另 外 如 何 最 大 程 度 保 证 数 据 库 的 安 全 也 是 动 态 网 页 技 术 中 的 核 心 问 题 出 于 以 上 考 虑, 同 时 也 为 了 提 高 网 页 访 问 速 度, 使 用 动 态 网 页 技 术 将 网 页 内 容 生 成 为 HTML 格 式 的 静 态 网 页 发 布 也 是 一 种 好 办 法 网 页 基 本 元 素 设 计 网 页 时 要 组 织 好 页 面 的 基 本 元 素, 同 时 再 配 合 一 些 特 效, 这 样 才 能 构 成 一 个 图 文 并 茂 绚 丽 多 彩 的 网 页 网 页 包 括 文 本 图 像 音 频 视 频 动 画 和 超 链 接 等 基 本 元 素 1. 文 本 文 本 是 网 页 传 递 信 息 的 主 要 载 体, 如 图 1-2 所 示 文 本 传 输 速 度 快, 而 且 网 页 中 的 文 本 可 以 设 置 其 大 小 颜 色 段 落 样 式 等 属 性, 风 格 独 特 的 网 页 文 本 设 置 会 给 浏 览 者 以 赏 心 悦 目 的 感 觉 提 示 : 在 网 页 中 应 用 了 某 种 字 体 样 式 后, 如 果 浏 览 者 的 计 算 机 中 没 有 安 装 该 种 样 式 的 字 体, 文 本 会 以 计 算 机 系 统 默 认 的 字 体 显 示 出 来, 此 时 就 无 法 显 示 出 网 页 应 有 的 效 果 了

4 网页设计与制作案例教程 第3版 图 1-2 网页中的文本 2 图像 4 图像给人的视觉效果要比文字强烈得多 在网页中灵活运用图像可以起到点缀的效 果 如图 1-3 所示 图 1-3 网页中的图像 网页上的图像文件大部分是 JPEG 格式或 GIF 格式 因为它们除了具有压缩比例高 的特点外 还具有跨平台特性 图像在网页中的应用主要有以下几种形式 图像标题 在网页中一般都有标题 起到导航的作用 应用图像标题可以使网页 更加美观 网页背景 图像的另一个重要应用是作为网页背景 特别是一些个人网站 应用

5 图 像 背 景 比 较 多 网 页 主 图 : 在 网 页 上, 除 了 用 小 的 图 像 美 化 网 页 外, 有 时 还 会 用 一 些 大 的 图 片 来 突 出 网 页 主 题, 特 别 是 网 站 主 页 中 用 主 图 的 比 较 多 超 链 接 : 有 时 可 以 用 图 片 取 代 文 字 作 为 超 链 接 按 钮, 使 网 页 更 加 美 观 提 示 : 一 般 情 况 下, 图 像 在 网 页 中 不 可 缺 少, 但 也 不 能 太 多, 网 页 上 放 置 过 多 的 图 片 会 显 得 很 乱, 也 影 响 网 页 的 下 载 速 度 3. 动 画 动 画 是 网 页 最 活 跃 的 元 素, 有 创 意 的 动 画 是 吸 引 浏 览 者 的 有 效 方 法 网 页 中 的 动 画 不 易 太 多, 否 则 会 使 浏 览 者 眼 花 缭 乱, 无 心 细 看 在 网 页 中 加 入 的 动 画 一 般 是 GIF 格 式 或 者 SWF 格 式 的 动 画 4. 超 链 接 超 链 接 是 最 为 有 趣 的 网 页 元 素 在 网 页 中 单 击 超 链 接 对 象, 即 可 实 现 在 不 同 页 面 之 间 的 跳 转 访 问 其 他 网 站 下 载 文 件 发 送 等 操 作 无 论 是 文 本 还 是 图 像 都 可 以 加 上 超 链 接 标 签, 当 鼠 标 移 至 超 链 接 对 象 上 时, 鼠 标 会 变 成 小 手 形 状, 单 击 鼠 标 左 键 即 可 链 接 到 相 应 地 址 (URL) 的 网 页 在 一 个 完 整 的 网 站 中, 至 少 要 包 括 站 内 链 接 和 站 外 链 接 站 内 链 接 : 如 果 网 站 规 划 了 多 个 主 题 版 块, 必 须 给 网 站 的 首 页 加 入 超 链 接, 让 浏 览 者 可 以 快 速 地 转 到 感 兴 趣 的 页 面 在 各 个 子 页 面 之 间 也 要 有 超 链 接, 并 有 能 够 回 到 主 页 的 链 接 通 过 超 链 接, 浏 览 者 可 以 迅 速 找 到 自 己 需 要 的 信 息 站 外 链 接 : 在 制 作 的 网 站 上 放 置 一 些 与 网 站 主 题 有 关 的 对 外 链 接, 不 但 可 以 把 好 的 网 站 介 绍 给 浏 览 者, 而 且 能 使 浏 览 者 乐 意 再 度 光 临 该 网 站 如 果 对 外 链 接 信 息 很 多, 可 以 进 行 分 类 5. 音 频 和 视 频 通 过 音 频 进 行 人 机 交 流 逐 步 成 为 网 页 交 互 的 重 要 手 段 浏 览 网 页 时, 一 些 网 页 设 置 了 背 景 音 乐, 伴 随 着 优 美 的 乐 曲, 浏 览 者 在 网 上 冲 浪 会 更 加 惬 意 但 是 加 入 音 乐 后, 网 页 文 件 会 变 大, 下 载 时 间 会 增 加 在 网 页 中 加 入 视 频, 会 使 网 页 具 有 较 强 的 吸 引 力 常 见 的 网 络 视 频 有 视 频 短 片 远 程 教 学 视 频 聊 天 视 频 点 播 和 DV 播 放 等 但 是, 在 应 用 视 频 时 要 考 虑 网 速 问 题, 如 果 视 频 播 放 不 流 畅 也 会 影 响 浏 览 效 果 网 页 制 作 常 用 软 件 和 技 术 制 作 不 同 类 型 的 网 站, 首 先 做 出 一 个 个 的 网 页, 再 把 这 些 网 页 链 接 起 来 制 作 网 页 可 以 直 接 使 用 HTML 语 言, 也 可 以 使 用 工 具 软 件 网 站 开 发 涉 及 的 工 具 和 技 术 多 种 多 样, 应 根 据 网 站 的 不 同 需 求, 以 及 设 计 者 掌 握 开 发 工 具 的 熟 练 程 度, 灵 活 应 用 开 发 工 具 和 技 术 下 面 介 绍 目 前 常 用 的 设 计 软 件 和 开 发 技 术 1. 网 页 编 辑 排 版 软 件 Dreamweaver Dreamweaver 是 一 款 由 Macromedia 公 司 ( 已 被 Adobe 公 司 并 购 ) 开 发 的 专 业 网 页 编 辑 工 具, 是 一 个 优 秀 的 所 见 即 所 得 的 网 页 编 辑 器 它 集 网 页 设 计 与 网 站 管 理 于 一 身, 能 够 使 网 页 和 数 据 库 关 联 起 来, 支 持 最 新 的 HTML 和 CSS, 用 于 对 Web 站 点 Web 页 面

6 网 页 设 计 与 制 作 案 例 教 程 ( 第 3 版 ) 6 和 Web 应 用 程 序 进 行 设 计 编 码 和 开 发 网 页 设 计 者 利 用 它 可 以 轻 而 易 举 地 制 作 出 跨 平 台 和 跨 浏 览 器 的 网 页 Dreamweaver 对 动 态 网 站 的 支 持 也 毫 不 逊 色, 使 用 Dreamweaver 及 相 关 的 服 务 器 技 术 可 以 方 便 地 创 建 功 能 强 大 的 Internet 应 用 程 序 提 示 : 除 了 Dreamweaver 之 外, 微 软 公 司 的 办 公 软 件 Office 家 族 成 员 之 一 的 FrontPage 也 是 一 种 所 见 即 所 得 的 网 页 制 作 软 件 由 于 其 使 用 简 单, 并 且 软 件 容 易 获 得, 也 很 受 初 学 者 的 欢 迎 2. 网 页 图 像 处 理 软 件 Photoshop 和 Fireworks 想 要 制 作 出 界 面 精 美 的 网 页, 还 需 要 使 用 以 下 软 件 工 具 为 每 一 件 网 页 作 品 设 计 主 题 鲜 明 风 格 各 异 的 网 页 图 像 (1)Photoshop Photoshop 是 Adobe 公 司 最 为 著 名 也 最 为 流 行 的 专 业 平 面 图 像 处 理 软 件 其 功 能 十 分 强 大, 使 用 范 围 广 泛, 一 直 占 据 着 图 像 处 理 软 件 的 领 袖 地 位 Photoshop 支 持 多 种 图 像 及 色 彩 模 式, 还 可 以 任 意 调 整 图 像 的 尺 寸 分 辨 率 及 画 布 的 大 小, 使 用 Photoshop 不 仅 可 以 设 计 出 网 页 的 整 体 效 果 图, 还 可 以 设 计 网 页 Logo 网 页 按 钮 和 网 页 宣 传 广 告 等 图 像 长 期 以 来 它 一 直 是 众 多 平 面 设 计 师 进 行 平 面 设 计 图 像 处 理 的 首 选 工 具 (2)Fireworks Fireworks 是 Adobe 推 出 的 一 款 网 页 作 图 软 件, 软 件 可 以 加 速 Web 设 计 与 开 发, 是 一 款 创 建 与 优 化 Web 图 像 和 快 速 构 建 网 站 与 Web 界 面 原 型 的 理 想 工 具 Fireworks 不 仅 具 备 编 辑 矢 量 图 形 与 位 图 图 像 的 灵 活 性, 还 提 供 了 一 个 预 先 构 建 资 源 的 公 用 库, 可 与 Adobe Photoshop Adobe Illustrator Adobe Dreamweaver 和 Adobe Flash 软 件 省 时 集 成, 在 Fireworks 中 将 设 计 迅 速 转 变 为 模 型, 或 利 用 来 自 Illustrator Photoshop 和 Flash 的 其 他 资 源, 直 接 置 入 Dreamweaver 中 轻 松 地 进 行 开 发 与 部 署 3. 网 页 动 画 制 作 软 件 Flash Flash 又 被 称 之 为 闪 客, 是 由 Macromedia 公 司 推 出 的 交 互 式 矢 量 图 和 Web 动 画 的 标 准, 由 Adobe 公 司 收 购 Flash 以 界 面 简 洁 功 能 强 大 而 见 长, 具 有 强 大 的 动 画 编 辑 功 能, 能 把 动 画 音 效 交 互 方 式 完 美 地 融 合 在 一 起, 是 动 画 设 计 初 学 者 和 专 业 动 画 制 作 人 员 的 首 选 使 用 Flash 可 以 制 作 体 积 非 常 小 的 banner 动 画 小 游 戏 MTV 广 告 等 动 画 效 果, 是 最 主 要 的 Web 动 画 形 式 之 一 4. 网 页 标 签 语 言 HTML HTML 是 用 来 制 作 网 页 的 标 签 语 言 HTML 是 Hyper Text Markup Language 的 英 文 缩 写, 即 超 文 本 标 签 语 言 用 HTML 编 写 的 超 文 本 文 档 称 为 HTML 文 档, 必 须 使 用.html 或.htm 为 文 件 扩 展 名, 它 不 需 要 编 译, 直 接 由 浏 览 器 执 行 HTML 是 网 页 技 术 的 核 心 与 基 础, 不 管 是 制 作 静 态 网 页, 还 是 编 写 动 态 交 互 网 页, 都 离 不 开 HTML 语 言 所 以, 要 灵 活 地 实 现 想 要 的 网 页 效 果, 必 须 了 解 HTML 语 言 5. 网 页 脚 本 语 言 JavaScript 使 用 HTML 只 能 制 作 静 态 网 页, 无 法 独 立 完 成 与 客 户 端 动 态 交 互 的 网 页 JavaScript 是 一 种 通 用 跨 平 台 基 于 原 型 的 面 向 对 象 脚 本 语 言, 它 不 需 要 事 先 进 行 编 译, 而 是 嵌 入 到 HTML 文 本 中, 由 客 户 端 浏 览 器 对 其 进 行 解 释 执 行 JavaScript 是 动 态 特 效 网 页 设 计 的 最 佳 选 择, 它 的 作 用 在 于 控 制 网 页 中 的 对 象 元 素, 实 现 网 页 浏 览 者 与 网 页 内 容 之 间 的 动 态 交 互

7 1.2 学 习 任 务 : 认 识 网 站 网 站 的 概 念 是 网 页 设 计 者 必 须 掌 握 的 学 习 本 书 的 最 终 目 的, 就 是 希 望 用 户 能 够 熟 练 利 用 Dreamweaver CS6, 配 合 其 他 的 网 站 开 发 工 具 完 成 网 站 设 计 本 节 学 习 任 务 认 识 什 么 是 网 站, 理 解 网 址 与 域 名, 掌 握 网 站 建 设 的 一 般 流 程 什 么 是 网 站 网 站 是 提 供 各 种 信 息 和 服 务 的 平 台, 例 如, 用 户 熟 悉 的 新 浪 搜 狐 京 东 网 当 当 网 等 都 是 典 型 网 站 网 站 由 许 多 网 页 组 成, 也 可 以 通 俗 地 理 解 成 网 站 是 存 储 在 某 个 服 务 器 上 的, 包 含 了 网 页 图 片 数 据 库 和 多 媒 体 信 息 等 资 源 的 一 个 文 件 夹 网 站 包 含 多 个 网 页, 网 页 彼 此 之 间 由 超 链 接 关 联 在 一 起 用 户 浏 览 一 个 网 站 时 看 到 的 第 一 个 页 面 是 主 页, 从 主 页 出 发, 通 过 站 内 超 链 接 可 以 访 问 到 本 网 站 的 每 一 个 页 面, 也 可 以 通 过 站 外 链 接, 登 录 到 其 他 网 站, 方 便 地 共 享 网 站 资 源 提 示 : 在 Dreamweaver 中, 网 页 设 计 都 是 以 一 个 完 整 的 Web 站 点 为 基 本 对 象 的, 所 有 的 资 源 和 网 页 的 编 辑 都 在 此 站 点 中 进 行, 建 议 不 要 脱 离 站 点 环 境, 初 学 者 要 养 成 良 好 的 习 惯 网 址 与 域 名 每 个 网 站 都 拥 有 一 个 Internet 地 址 浏 览 者 要 访 问 Internet 上 的 一 个 站 点 就 必 须 通 过 访 问 这 个 网 站 的 地 址 来 实 现 域 名 是 Internet 上 网 站 的 名 称, 是 一 个 服 务 器 或 网 络 系 统 的 名 字, 是 解 决 IP 地 址 对 应 问 题 的 一 种 方 法 1. 网 址 浏 览 网 页 时, 在 浏 览 器 地 址 栏 中 输 入 的 诸 如 这 样 的 字 符 串 就 是 一 个 网 址, 访 问 网 页 是 通 过 统 一 资 源 定 位 器 (Uniform Resource Locator,URL) 的 方 式 来 实 现 的 这 里 所 说 的 网 址 实 际 上 有 两 个 内 涵, 即 IP 地 址 和 域 名 地 址 每 一 台 计 算 机 都 必 须 标 有 唯 一 的 地 址, 就 像 打 电 话 必 须 知 道 对 方 的 电 话 号 码, 且 这 个 号 码 必 须 是 唯 一 的 地 址 通 常 用 四 个 十 进 制 数 表 示, 中 间 用 小 数 点. 隔 开, 称 为 IP (Internet Protocol) 地 址, 如 对 于 用 户 来 说, 记 忆 如 此 众 多 的 网 站 IP 地 址 是 件 很 困 难 的 事, 为 了 解 决 这 一 问 题, Internet 规 定 了 一 套 命 名 机 制, 称 为 域 名 系 统 采 用 域 名 系 统 命 名 的 网 址, 即 为 域 名 地 址 域 名 地 址 采 用 了 人 们 善 于 识 记 的 名 字 来 表 示 2. 域 名 域 名 就 是 网 站 的 名 称, 企 业 在 注 册 域 名 时 一 般 都 会 申 请 一 个 符 合 网 站 特 点 的 域 名, 甚 至 会 把 域 名 看 做 企 业 的 网 上 商 标 在 Internet 中, 域 名 与 IP 地 址 之 间 是 一 一 对 应 的, 它 们 之 间 的 转 换 工 作 称 为 域 名 解 析, 这 项 工 作 专 门 由 域 名 系 统 (Domain Name System,

8 网 页 设 计 与 制 作 案 例 教 程 ( 第 3 版 ) DNS) 来 完 成 域 名 系 统 是 一 个 分 布 式 数 据 库 系 统, 为 Internet 上 的 主 机 分 配 域 名 地 址 和 IP 地 址 用 户 输 入 域 名 地 址,DNS 就 会 根 据 数 据 库 中 域 名 与 IP 地 址 的 映 射 关 系 自 动 把 域 名 地 址 转 换 为 IP 地 址, 然 后 通 过 计 算 机 的 IP 地 址 访 问 站 点 此 外, 使 用 域 名 也 便 于 网 址 的 分 层 管 理 和 分 配 一 个 完 整 的 域 名 通 常 由 几 个 层 次 组 成, 不 同 层 次 之 间 用. 隔 开, 例 如, 新 浪 中 国 的 网 址 是 其 中 sina.com.cn 为 域 名,sina 是 第 三 层 次 域 名,com 是 第 二 层 次 域 名,cn 是 国 家 顶 级 域 名 目 前 互 联 网 中 有 两 类 顶 级 域 名 : 一 类 是 地 理 顶 级 域 名, 如 cn 代 表 中 国,jp 代 表 日 本, uk 代 表 英 国 等 ; 另 一 类 是 类 别 顶 级 域 名, 如 com 代 表 商 业 公 司,net 代 表 网 络 机 构,org 代 表 组 织 机 构,edu 代 表 教 育 机 构,gov 代 表 政 府 部 门 等 随 着 互 联 网 的 不 断 发 展, 会 有 越 来 越 多 的 顶 级 域 名 不 断 被 扩 充 到 现 有 的 域 名 体 系 中 来 网 站 建 设 的 一 般 流 程 8 从 开 始 计 划 创 建 网 站 到 最 后 网 站 的 广 为 人 知 包 含 了 一 个 完 整 的 工 作 流 程 作 为 一 名 网 页 设 计 师 或 者 网 页 设 计 爱 好 者, 应 当 熟 悉 一 个 网 站 从 无 到 有 的 创 建 流 程 1. 网 站 策 划 网 站 策 划 是 网 站 建 设 的 第 一 阶 段, 总 的 目 的 是 根 据 调 查 分 析, 明 确 建 设 网 站 的 目 的 与 内 容 (1) 确 定 行 业 策 划 一 个 网 站 之 前 首 先 确 定 所 要 策 划 的 网 站 所 属 的 行 业, 只 有 明 确 了 这 一 点, 后 期 的 网 站 内 容 规 划 才 能 有 的 放 矢 (2) 确 定 网 站 主 题 网 站 的 主 题 就 是 网 站 的 题 材, 即 做 一 个 什 么 类 型 的 网 站 当 前 的 网 站 有 很 多, 按 类 型 分 有 行 业 站 地 方 站, 按 领 域 分 有 游 戏 类 教 育 类 IT 类 等, 也 可 以 按 网 站 模 式 和 网 站 的 服 务 人 群 进 行 细 分 只 有 确 定 了 网 站 的 题 材 和 内 容, 设 计 工 作 才 能 做 到 有 的 放 矢, 取 得 理 想 的 效 果 网 站 主 题 要 鲜 明 突 出 要 点 明 确 (3) 用 户 定 位 与 分 析 网 站 用 户 的 定 位 很 重 要, 只 有 用 户 定 位 对 了, 网 站 的 自 身 内 容 规 划 才 能 把 握 准 确 用 户 分 析 包 括 用 户 群 以 及 用 户 群 规 模 的 分 析 用 户 特 点 的 分 析 用 户 需 求 的 分 析, 以 及 用 户 需 求 满 足 情 况 的 分 析 等 (4) 确 定 网 站 的 配 色 方 案 一 个 成 功 的 网 站, 首 先 吸 引 访 问 者 目 光 的 是 网 站 良 好 的 颜 色 搭 配, 其 次 才 是 网 站 的 内 容, 由 此 可 见, 良 好 的 配 色 方 案 对 于 网 站 成 功 与 否 也 起 到 非 常 重 要 的 作 用 有 关 网 站 的 色 彩 配 色, 将 在 第 2 章 详 细 介 绍 (5) 规 划 网 站 结 构 规 划 网 站 结 构 可 以 用 树 状 结 构 先 把 每 个 页 面 的 内 容 大 纲 列 出 来, 尤 其 当 制 作 一 个 很 大 的 网 站 时, 特 别 需 要 把 这 个 架 构 规 划 好, 也 要 考 虑 到 可 扩 充 性, 免 得 做 好 以 后 又 要 一 改 再 改, 带 来 不 必 要 的 麻 烦 图 1-4 是 一 个 企 业 网 站 的 栏 目 结 构 图 大 纲 列 出 来 后, 还 必 须 考 虑 每 个 页 面 之 间 的 链 接 关 系 是 星 形 树 形 还 是 网 形, 这 也 是 评 价 一 个 网 站 优 劣 的 重 要 标 志 链 接 混 乱 层 次 不 清 的 站 点 会 导 致 浏 览 困 难, 影 响 网 页 内 容 的 展 示

9 图 1-4 网 站 栏 目 结 构 图 2. 收 集 网 站 的 素 材 和 内 容 网 站 建 设 过 程 中 常 常 需 要 大 量 的 素 材, 素 材 包 括 文 字 图 片 音 频 视 频 和 动 画 等 素 材 可 以 从 图 书 报 刊 光 盘 以 及 多 媒 体 上 收 集, 也 可 以 自 己 制 作 或 者 从 网 上 搜 集 (1) 文 本 内 容 素 材 的 收 集 文 本 内 容 可 以 从 网 络 书 本 报 刊 上 找, 也 可 以 自 己 编 写 文 字 材 料 可 以 将 这 些 素 材 制 作 成 Word 文 档 保 存 在 文 字 资 料 子 目 录 下 收 集 的 文 本 素 材 既 要 丰 富, 又 要 便 于 有 机 地 组 织, 这 样 才 能 做 出 内 容 丰 富 整 体 感 强 的 网 站 (2) 艺 术 类 内 容 素 材 的 收 集 在 网 页 中 适 当 添 加 艺 术 感 强 的 图 片 视 频 动 画 等 素 材, 可 使 网 页 充 满 活 力 和 生 机, 具 有 吸 引 力 艺 术 类 素 材 可 以 从 以 下 几 个 方 面 搜 集 从 网 上 获 取 通 过 百 度 ( com) Google( 北 大 天 网 ( 搜 狗 ( 等 搜 索 引 擎 搜 集 素 材 从 光 盘 中 获 取 市 场 上 有 许 多 关 于 图 片 素 材 库 的 光 盘, 也 有 许 多 教 学 软 件, 可 以 选 取 其 中 的 图 片 资 料 利 用 现 成 图 片 或 自 己 拍 摄 既 可 以 从 各 种 图 书 出 版 物 中 获 取 图 片, 也 可 以 使 用 自 己 拍 摄 或 积 累 的 照 片 资 料 自 己 动 手 制 作 一 些 特 殊 效 果 的 素 材 对 于 动 态 图 像 或 动 画 素 材, 用 户 选 择 熟 悉 的 软 件 亲 自 动 手 制 作 往 往 效 果 更 好 提 示 : 搜 集 的 素 材 最 好 放 置 在 一 个 总 的 文 件 夹 中, 如,D:\mysite, 然 后 根 据 素 材 类 别 在 这 个 目 录 下 建 立 需 要 的 子 目 录, 如,images text 等 放 入 目 录 的 文 件 名 最 好 全 部 用 英 文 小 写, 因 为 有 些 主 机 不 支 持 大 写 英 文 和 中 文 3. 设 计 制 作 网 站 网 站 的 主 题 和 风 格 明 确 后, 就 应 该 围 绕 网 站 主 题 制 作 网 页 内 容, 设 计 题 材 栏 目 等 (1) 网 站 的 栏 目 设 计 以 下 列 出 了 一 些 常 见 的 栏 目 名 称, 希 望 对 用 户 有 所 启 发 资 讯 信 息 类 : 产 品 展 示 在 线 加 盟 股 市 信 息 流 行 情 报 在 线 搜 索 购 物 消 费 网 上 招 聘 阳 光 服 务 支 持 下 载 网 上 公 布 直 击 热 点 等 教 育 学 习 类 : 网 上 图 书 在 线 学 习 电 子 杂 志 硬 件 园 地 少 年 家 园 影 像 合 成 网 上 教 室 软 件 宝 库 病 毒 字 典 等 娱 乐 生 活 类 : 漫 画 天 地 摄 影 俱 乐 部 体 育 博 览 国 画 画 廊 电 子 贺 卡 旅 游 天 地 电 影 世 界 影 视 偶 像 天 文 星 空 MIDI 金 曲 儿 歌 专 集 健 康 资 讯 等 (2) 设 计 网 站 Logo 网 站 Logo 是 网 站 的 标 志, 如 同 公 司 的 商 标 一 样 Logo 是 站 点 9

10 网 页 设 计 与 制 作 案 例 教 程 ( 第 3 版 ) 10 特 色 和 内 涵 的 集 中 体 现, 看 见 Logo 就 让 大 家 联 想 起 站 点 目 前, 网 站 相 当 多, 要 想 吸 引 更 多 的 人 访 问 企 业 的 网 站, 跟 别 的 网 站 进 行 Logo 链 接 交 换 是 很 有 必 要 的 Logo 可 以 由 中 文 文 字 英 文 字 母 阿 拉 伯 数 字 符 号 和 图 案 等 构 成 比 如 新 浪 用 字 母 sina + 大 眼 睛 图 案 作 为 网 站 的 Logo (3) 设 计 网 站 的 标 准 色 彩 标 准 色 彩 是 指 能 体 现 网 站 形 象 和 延 伸 内 涵 的 色 彩 确 定 网 站 的 标 准 色 彩 是 相 当 重 要 的 一 步, 不 同 的 色 彩 搭 配 会 产 生 不 同 的 效 果, 并 可 能 影 响 到 网 页 浏 览 者 的 情 绪 网 站 标 准 色 彩 的 选 择 和 确 定, 是 由 网 站 的 主 题 和 企 业 自 身 的 特 点 决 定 的 一 个 网 站 的 标 准 色 彩 不 宜 超 过 3 种, 太 多 则 让 人 眼 花 缭 乱 标 准 色 彩 要 用 于 网 站 的 Logo 标 题 主 菜 单 和 主 色 块, 从 整 体 上 给 人 以 统 一 的 感 觉 至 于 其 他 色 彩 也 可 以 用, 但 只 作 为 点 缀 和 衬 托, 不 能 喧 宾 夺 主 (4) 制 作 网 页 网 页 设 计 是 一 个 复 杂 而 细 致 的 过 程, 一 定 要 按 照 先 大 后 小 先 简 单 后 复 杂 的 次 序 来 进 行 制 作 也 就 是 说 在 制 作 网 页 时, 先 把 大 的 结 构 设 计 好, 然 后 再 逐 步 完 善 小 的 结 构 设 计 ; 先 设 计 出 简 单 的 内 容, 然 后 再 设 计 复 杂 的 内 容, 以 便 出 现 问 题 时 好 修 改 在 制 作 网 页 时 应 该 灵 活 运 用 模 板 和 库, 这 样 可 以 大 大 提 高 制 作 效 率 如 果 很 多 网 页 都 使 用 相 同 的 版 面 布 局, 就 把 这 个 版 面 设 计 定 义 成 一 个 模 板, 然 后 创 建 基 于 该 模 板 的 其 他 多 个 网 页 页 面 设 计 制 作 完 成 后, 如 果 需 要 动 态 功 能, 就 需 要 开 发 动 态 功 能 模 块 网 站 中 常 用 的 动 态 功 能 模 块 有 新 闻 发 布 系 统 在 线 搜 索 产 品 展 示 管 理 系 统 在 线 调 查 系 统 在 线 购 物 会 员 注 册 管 理 系 统 招 聘 系 统 统 计 系 统 留 言 系 统 论 坛 及 聊 天 室 等 4. 网 站 测 试 与 发 布 在 网 站 发 布 之 前, 通 常 要 检 查 网 页 在 不 同 版 本 浏 览 器 中 的 显 示 情 况, 尤 其 是 制 作 大 型 的 或 访 问 量 高 的 网 站, 这 个 步 骤 十 分 重 要 由 于 各 种 版 本 浏 览 器 支 持 的 HTML 语 言 版 本 不 同, 所 以 要 让 网 页 能 够 在 大 多 数 浏 览 器 中 正 常 显 示, 需 要 仔 细 地 检 查, 必 要 时 可 以 对 网 站 的 特 殊 效 果 做 舍 弃 处 理 网 站 的 发 布 是 指 将 制 作 的 网 站 上 传 到 指 定 的 主 机 服 务 器 上 在 网 站 测 试 无 误 后, 就 可 以 通 过 Dreamweaver 或 FTP 软 件 发 布 网 站 了 有 关 网 站 测 试 与 发 布 的 详 细 内 容, 请 参 见 第 14 章 5. 网 站 推 广 与 维 护 互 联 网 的 应 用 和 繁 荣 为 用 户 提 供 了 广 阔 的 电 子 商 务 市 场 和 商 机, 但 是 互 联 网 上 大 大 小 小 的 各 种 网 站 不 计 其 数, 如 何 让 更 多 的 浏 览 者 迅 速 访 问 到 网 站, 需 要 对 网 站 进 行 宣 传 推 广 网 站 推 广 的 目 的 在 于 让 尽 可 能 多 的 潜 在 用 户 了 解 并 访 问 网 站, 通 过 网 站 获 得 有 关 产 品 和 服 务 等 信 息, 为 最 终 形 成 购 买 决 策 提 供 支 持 网 站 推 广 需 要 借 助 一 定 的 网 络 工 具 和 资 源, 常 用 的 网 站 推 广 工 具 和 资 料 包 括 搜 索 引 擎 分 类 目 录 电 子 邮 件 网 站 链 接 在 线 黄 页 和 分 类 广 告 电 子 书 免 费 软 件 网 络 广 告 媒 体 传 统 推 广 渠 道 等 网 站 发 布 完 成 后, 还 要 进 行 管 理 和 维 护, 就 像 一 栋 房 子 或 者 一 部 汽 车, 如 果 长 期 搁 置 无 人 维 护, 必 然 变 成 朽 木 或 者 废 铁 网 站 也 是 一 样, 只 有 不 断 地 更 新 管 理 和 维 护, 才 能 留 住 已 有 的 浏 览 者 并 且 吸 引 新 的 浏 览 者

11 1.3 学 习 任 务 :HTML 基 础 知 识 HTML 是 一 种 用 来 制 作 超 文 本 文 档 的 简 单 标 记 语 言, 用 HTML 编 写 的 超 文 本 文 档 称 为 HTML 文 档 自 1990 年 以 来,HTML 就 一 直 被 用 作 万 维 网 的 信 息 表 示 语 言, 使 用 HTML 语 言 描 述 的 文 件, 需 要 通 过 Web 浏 览 器 显 示 出 效 果 本 节 学 习 任 务 认 识 HTML 及 显 示 原 理, 掌 握 HTML 的 基 本 语 法 和 文 档 结 构, 理 解 HTML5.0 常 用 的 标 签 及 标 签 主 要 属 性 HTML 简 介 1. 认 识 HTML HTML(Hypertext Marked Language, 超 文 本 标 记 语 言 ), 它 可 以 加 入 图 片 声 音 动 画 影 视 等 内 容, 事 实 上 每 一 个 HTML 文 档 都 是 一 种 静 态 的 网 页 文 件, 这 个 文 件 里 面 包 含 了 HTML 指 令 代 码, 这 些 指 令 代 码 并 不 是 一 种 程 序 语 言, 它 只 是 一 种 排 版 网 页 中 资 料 显 示 位 置 的 标 记 结 构 语 言, 易 学 易 懂, 非 常 简 单 HTML5.0 是 W3C(World Wide Web Consortium, 万 维 网 联 盟 ) 与 WHATWG(Web Hypertext Application Technology Working Group) 合 作 的 结 果 HTML5.0 将 取 代 1999 年 制 定 的 HTML 4.01 XHTML 1.0 标 准, 并 期 望 能 够 在 互 联 网 应 用 迅 速 发 展 的 时 候, 使 网 络 标 准 达 到 符 合 当 代 的 网 络 需 求, 为 桌 面 和 移 动 平 台 带 来 无 缝 衔 接 的 丰 富 内 容 HTML5.0 是 近 十 年 来 Web 标 准 最 巨 大 的 飞 跃 HTML5.0 和 以 前 的 版 本 不 同, 它 并 非 仅 仅 用 来 表 示 Web 内 容, 而 是 将 Web 带 入 一 个 成 熟 的 应 用 平 台, 在 这 个 平 台 上, 视 频 音 频 图 像 动 画 以 及 同 计 算 机 的 交 互 都 被 标 准 化 HTML5.0 有 以 下 优 点 提 高 可 用 性 和 改 进 用 户 的 友 好 体 验 ; 有 几 个 新 的 标 签, 例 如,canvas video article footer header nav section 等, 这 将 有 助 于 开 发 人 员 定 义 重 要 的 内 容 ; 可 以 给 站 点 带 来 更 多 的 多 媒 体 元 素 ( 视 频 和 音 频 ); 可 以 很 好 地 替 代 Flash 和 Silverlight; 当 涉 及 网 站 的 抓 取 和 索 引 的 时 候, 对 于 SEO 很 友 好 ; 将 被 大 量 应 用 于 移 动 应 用 程 序 和 游 戏 ; 可 移 植 性 好 2.HTML 制 作 工 具 及 显 示 原 理 HTML 语 言 由 文 本 和 标 签 构 成,HTML 文 档 的 扩 展 名 是.html 或.htm 制 作 HTML 文 档 需 要 两 个 基 本 工 具, 一 个 是 HTML 编 辑 器, 一 个 是 Web 浏 览 器,HTML 编 辑 器 用 来 生 成 和 保 存 HTML 文 档,Web 浏 览 器 用 来 浏 览 和 测 试 HTML 文 档 因 为 HTML 代 码 是 纯 文 本 的, 所 以 任 何 文 本 编 辑 器, 如 写 字 板 记 事 本 等 都 可 以 作 为 HTML 编 辑 器, 这 些 编 辑 器 要 求 手 工 输 入 HTML 代 码, 可 以 帮 助 学 习 HTML, 所 以 建 议 初 学 者 使 用 文 本 编 辑 器 此 外, 市 面 上 也 有 一 些 优 秀 的 所 见 即 所 得 编 辑 器, 常 用 11

12 网 页 设 计 与 制 作 案 例 教 程 ( 第 3 版 ) 的 有 Dreamweaver Frontpage 等, 它 们 会 根 据 用 户 的 操 作 自 动 生 成 HTML 代 码, 大 大 提 高 了 网 页 制 作 的 效 率 Web 浏 览 器 用 来 浏 览 HTML 文 档, 在 Windows 操 作 系 统 上, 常 用 的 浏 览 器 是 Microsoft Internet Explorer( 常 简 称 为 IE) 同 一 个 HTML 文 档 在 不 同 种 类 的 浏 览 器 或 不 同 版 本 的 浏 览 器 中 显 示 可 能 有 所 不 同, 在 不 同 计 算 机 上 的 显 示 也 可 能 有 所 不 同 HTML 文 档 显 示 原 理 可 概 括 为 :HTML 使 用 一 组 约 定 的 标 签 符 号, 对 Web 上 的 各 种 信 息 进 行 标 记, 浏 览 器 会 解 释 这 些 标 记 符 号 并 以 它 们 指 定 的 格 式 把 相 应 的 内 容 显 示 在 屏 幕 上, 而 标 记 符 号 本 身 不 会 在 屏 幕 上 显 示 出 来 图 1-5 所 示 内 容 是 在 记 事 本 中 编 辑 的 一 个 最 基 本 的 HTML 文 档, 文 档 的 保 存 格 式 是.html; 图 1-6 所 示 是 该 HTML 文 档 在 浏 览 器 中 的 显 示 效 果 12 图 1-5 在 记 事 本 中 编 辑 HTML 文 档 图 1-6 HTML 文 档 在 浏 览 器 中 的 显 示 效 果 在 图 1-5 的 HTML 代 码 中, 用 尖 括 号 括 起 来 的 是 HTML 标 签, 如 <html> <head> 等 标 签 往 往 成 对 出 现, 分 别 是 起 始 标 签 和 结 束 标 签, 起 始 标 签 与 结 束 标 签 之 间 的 部 分 是 标 签 的 内 容 例 如,<title> 为 起 始 标 签,</title> 为 结 束 标 签, 我 的 网 页 是 <title> 标 签 的 内 容, 显 示 在 浏 览 器 的 标 题 栏 上 有 些 起 始 标 签 里 有 形 如 size=12 的 代 码, 称 为 标 签 的 属 性, 用 来 修 饰 标 签 的 内 容 属 性 等 号 左 边 的 称 为 属 性 名, 等 号 右 边 的 称 为 属 性 值 提 示 :HTML 文 档 的 最 终 显 示 效 果 是 由 浏 览 器 决 定 的, 所 以, 同 样 的 文 档 在 不 同 的 浏 览 器 中 ( 如 IE 和 Netscape) 显 示 的 效 果 可 能 会 有 所 差 别 另 外, 浏 览 器 如 果 没 有 正 常 显 示 网 页 文 件, 说 明 文 件 代 码 有 错 误, 这 时 可 以 重 新 切 换 到 HTML 编 辑 器 窗 口, 对 代 码 进 行 修 改 并 保 存, 然 后 再 切 换 到 浏 览 器 窗 口 并 刷 新, 即 可 看 到 修 改 后 的 页 面 HTML 的 基 本 语 法 与 结 构 1.HTML 的 基 本 语 法 HTML 的 语 法 主 要 由 标 签 (tag) 和 属 性 (attribute) 组 成 所 有 标 签 都 由 一 对 尖 括 号 < 和 > 括 起 来 (1) 一 般 标 签 一 般 标 签 由 一 个 起 始 标 签 (Opening Tag) 和 一 个 结 束 标 签 (Ending Tag) 组 成, 其 语 法 格 式 为 :

13 <x> 受 控 内 容 </x> 其 中, x 代 表 标 签 名 称,<x> 为 起 始 标 签,</x> 为 结 束 标 签, 结 束 标 签 前 应 有 一 个 斜 杠 例 如, 若 使 文 本 内 容 成 为 斜 体 字, 可 以 使 用 标 签 <i> </i>; 若 使 文 本 内 容 成 为 一 级 标 题, 可 以 使 用 标 签 <h1> </h1> 另 外, 还 有 许 多 常 用 的 标 签, 如,<body> </body>,<html> </html> 等 在 标 签 之 中 可 以 附 加 一 些 属 性, 用 来 完 成 某 些 特 殊 效 果 或 功 能 大 多 数 标 签 的 起 始 标 签 内 可 以 包 含 一 些 属 性, 属 性 是 可 选 的, 不 写 即 使 用 默 认 值 不 同 属 性 间 用 空 格 分 隔, 属 性 值 要 加 双 引 号, 其 语 法 形 式 为 : < 标 签 名 称 属 性 1 属 性 2 属 性 3 > 受 控 内 容 </ 标 签 名 称 > 也 可 以 写 为 : <x a 1 ="v 1 " a 2 ="v 2 " a n ="v n "> 受 控 内 容 </x> 其 中,a 1, a 2,,a n 为 属 性 名 称,v 1,v 2,,v n 为 属 性 名 称 对 应 的 属 性 值 (2) 空 标 签 大 部 分 标 签 是 成 对 出 现 的, 但 也 有 一 些 是 单 独 存 在 的, 这 些 单 独 存 在 的 标 签 称 为 空 标 签 空 标 签 的 语 法 形 式 非 常 简 单, 只 需 要 直 接 写 < 标 签 名 称 > 即 可 最 常 见 的 空 标 签 有 <hr> <br> 等 其 中,<hr> 标 签 表 示 要 在 页 面 上 加 一 条 水 平 线, 常 用 来 分 割 页 面 的 不 同 部 分 空 标 签 也 可 以 附 加 一 些 属 性, 用 来 完 成 某 些 特 殊 效 果 或 功 能, 一 般 形 式 为 : <x a 1 ="v 1 " a 2 ="v 2 " a n ="v n "> 例 如,<hr align="center" width="80%" size="2">,<hr> 标 签 含 有 3 个 属 性 align size width 属 性, 其 中,align 属 性 表 示 水 平 线 的 对 齐 方 式, 属 性 值 可 取 left( 左 对 齐 ) center ( 居 中, 默 认 值 ) right( 右 对 齐 );width 属 性 定 义 水 平 线 的 长 度, 可 以 取 相 对 值 ( 由 一 对 引 号 括 起 来 的 百 分 数, 表 示 相 对 于 充 满 整 个 窗 口 的 百 分 比 ), 也 可 以 取 绝 对 值 ( 用 整 数 表 示 屏 幕 像 素 点 的 个 数, 如 width="300"), 默 认 值 为 100%;size 属 性 定 义 水 平 线 的 粗 细, 属 性 值 取 整 数, 默 认 为 1px 另 外,<hr> 标 签 中 还 包 含 一 个 noshade 属 性, 用 于 设 定 线 条 为 平 面 显 示, 若 删 去 则 具 有 阴 影 或 者 立 体 效 果, 这 是 默 认 值 2. 网 页 的 HTML 结 构 HTML 文 件 的 主 体 结 构 由 <html> <head> 和 <body>3 对 标 签 组 成 下 面 是 一 个 典 型 的 HTML 文 档 结 构 <html> <head> 头 部 信 息 : 如 <title> <meta> 等 </head> <body> 文 档 主 体 </body> </html> (1)<html> 与 </html> 标 签 在 最 外 层, 包 含 了 整 个 文 档 的 内 容, 分 别 表 示 HTML 文 档 的 开 始 与 结 束 (2)<head> </head> 标 签 之 间 是 网 页 的 头 部 信 息, 这 部 分 主 要 定 义 了 一 些 浏 览 器 用 于 显 示 文 档 的 参 数, 如 网 页 的 标 题 meta 信 息 CSS 样 式 定 义 等 其 中,<title> 与 </title> 标 签 之 间 指 定 了 网 页 的 标 题,<meta> 标 签 用 于 提 供 HTML 网 页 的 字 符 编 码 关 键 字 描 述 作 者 自 动 刷 新 等 多 种 信 息 (3)<body>...</body> 标 签 定 义 文 档 的 主 体, 包 含 文 档 的 所 有 内 容, 比 如 文 本 超 链 13

14 网 页 设 计 与 制 作 案 例 教 程 ( 第 3 版 ) 接 图 像 动 画 表 格 等 可 以 通 过 设 置 <body> 标 签 的 属 性 或 样 式 来 设 置 网 页 的 风 格, 包 括 边 距 背 景 字 体 颜 色 等, 这 些 风 格 决 定 了 网 页 的 整 体 效 果 在 HTML 文 档 结 构 中 还 包 含 了 大 量 的 标 签, 规 定 了 Web 文 档 的 逻 辑 结 构, 并 且 控 制 文 档 的 显 示 格 式, 也 就 是 说, 设 计 者 用 标 签 定 义 Web 文 档 的 逻 辑 结 构, 但 是 文 档 的 实 际 显 示 则 由 浏 览 器 来 负 责 解 释 书 写 HTML 代 码 时 应 注 意 以 下 几 点 HTML 标 签 及 属 性 中 字 母 不 区 分 大 小 写, 如 <html> 与 <HTML> 对 浏 览 器 来 说 是 完 全 相 同 的 标 签 名 与 左 尖 括 号 之 间 不 能 留 有 空 格, 如 < body> 是 错 误 的 属 性 要 写 在 开 始 标 签 的 尖 括 号 中, 放 在 标 签 名 之 后, 并 且 与 标 签 名 之 间 要 有 空 格 ; 多 个 属 性 之 间 也 要 有 空 格 ; 属 性 值 最 好 用 单 引 号 或 双 引 号 括 起 来, 且 引 号 一 定 要 是 英 文 的 引 号, 不 能 是 中 文 的 引 号 结 束 标 签 要 书 写 正 确, 不 能 忘 掉 斜 杠 常 用 的 HTML 标 签 文 本 标 签 为 了 对 网 页 中 的 文 本 元 素 进 行 修 饰 排 版, 使 网 页 丰 富 多 彩, 往 往 使 用 大 量 的 文 本 标 签, 文 本 标 签 分 为 文 本 的 基 本 设 置 与 文 本 的 修 饰 设 置 (1) 段 落 标 签 <p> </p> <p> 是 HTML 基 本 标 签 之 一, 使 用 <p></p> 标 签 可 实 现 分 段, 即 在 段 落 开 始 时 用 <p>, 在 段 落 结 束 时 用 </p> <p> 标 签 是 非 空 元 素 标 签, 所 标 识 的 文 本 代 表 同 一 个 段 落, 必 须 成 对 使 用 语 法 格 式 举 例 : <p align="center"> 段 落 内 容 </p> 属 性 说 明 :align( 对 齐 ) 属 性 的 属 性 值 有 3 个 参 数 :left( 默 认 ) center 和 right, 分 别 代 表 设 置 段 落 文 字 居 左 居 中 居 右 对 齐 (2) 换 行 标 签 <br> <br> 是 换 行 标 签, 在 网 页 设 计 中 比 较 常 用 使 用 <br> 标 签 能 够 使 文 档 在 该 标 签 处 强 制 换 行, 这 一 点 与 <p> 相 同 但 与 <p> 不 同 的 是, 换 行 后 行 与 行 之 间 不 留 空 白 行, 页 面 看 起 来 比 较 紧 凑 <br> 属 于 单 标 签, 没 有 结 束 标 签 (3) 预 格 式 化 标 签 <pre> </pre> <pre> 称 为 预 格 式 化 标 签, 它 的 作 用 是 按 原 始 代 码 的 排 列 方 式 显 示 内 容 通 常 情 况 下, 浏 览 器 显 示 时 会 忽 略 内 容 中 的 空 格 及 换 行, 而 <pre> 与 </pre> 之 间 的 空 格 及 换 行 会 被 保 留 (4) 水 平 线 标 签 <hr> <hr> 是 水 平 线 标 签, 可 以 在 页 面 中 生 成 一 条 水 平 线, 用 于 分 隔 文 档 或 者 修 饰 网 页 <hr> 属 于 单 标 签, 没 有 结 束 标 签 语 法 格 式 举 例 : <hr align="left" size="4" width="80%" color="red" noshade> <hr> 标 签 的 常 用 属 性 如 表 1-1 所 示 表 1-1 <hr> 标 签 的 属 性 属 性 名 功 能 size width 设 置 水 平 线 的 粗 细, 属 性 值 为 整 数, 单 位 为 像 素 设 置 水 平 线 的 宽 度, 属 性 值 单 位 为 像 素 或 %, 如 width="300"

15 续 表 属 性 名 功 能 align 设 置 水 平 线 的 对 齐 方 式, 取 值 left center right color 设 置 水 平 线 的 颜 色, 默 认 值 black noshade 使 线 段 无 阴 影 属 性 (5) 底 部 <footer> 标 签 <footer> 标 签 用 于 定 义 文 档 或 节 的 页 脚 页 脚 通 常 包 含 文 档 的 作 者 版 权 信 息 使 用 条 款 链 接 联 系 信 息 等 需 要 注 意 的 是,<footer> 标 签 在 IE8 及 以 下 IE 浏 览 器 不 兼 容, 谨 慎 使 用 (6) 区 块 标 签 <div> </div> <div> 标 签 成 对 出 现, 常 用 于 组 合 块 级 元 素, 以 便 通 过 样 式 表 来 对 这 些 元 素 进 行 格 式 化 在 <div> 标 签 中 可 以 包 含 各 种 网 页 元 素, 如 文 字 图 片 动 画 表 格 表 单 等 通 过 <div> 标 签 属 性 不 仅 能 够 控 制 区 块, 还 可 以 通 过 定 义 CSS 样 式 来 控 制 区 块, 为 网 页 设 计 者 提 供 内 容 与 结 构 分 离 的 网 站 构 建 (7) 特 殊 字 符 由 于 HTML 文 档 是 ASCII 文 本, 只 支 持 ASCII 字 符 但 是, 还 有 一 些 有 特 殊 用 途 的 字 符 在 HTML 中 无 法 直 接 显 示 成 原 来 的 样 式, 想 要 在 浏 览 器 中 显 示 这 些 字 符 就 必 须 输 入 特 殊 字 符 来 代 替 HTML 常 见 特 殊 字 符 实 体 代 码 如 表 1-2 所 示 表 1-2 HTML 常 见 特 殊 字 符 实 体 代 码 15 屏 幕 显 示 符 号 字 符 实 体 代 码 屏 幕 显 示 符 号 字 符 实 体 代 码 < < " " > > &apos; & & 空 格 (8) 标 题 标 签 <hn> </hn> <hn> 标 签 用 于 设 置 网 页 中 各 个 层 次 的 标 题 文 字, 被 设 置 的 文 字 将 以 黑 体 显 示, 并 自 成 段 落 <hn> 标 签 是 成 对 出 现 的, 共 分 为 6 级,n 取 1~6 之 间 的 正 整 数 其 中 <h1> </h1> 表 示 最 大 的 标 题,<h6> </h6> 表 示 最 小 的 标 题 语 法 格 式 举 例 : <h3 align="center"> 标 题 部 分 </h3> 属 性 说 明 :align 属 性 用 于 设 置 标 题 的 对 齐 方 式, 其 参 数 为 left center right 2. 列 表 标 签 列 表 标 签 可 以 将 网 页 中 相 关 的 信 息 有 条 不 紊 地 组 织 起 来 作 为 块 级 元 素, 在 DIV+CSS 网 页 设 计 中 列 表 标 签 的 使 用 非 常 普 遍 列 表 标 签 可 分 为 : 无 序 列 表 有 序 列 表 嵌 套 列 表 和 自 定 义 列 表, 下 面 介 绍 前 两 种 常 用 的 列 表 (1) 无 序 列 表 标 签 <ul> </ul> <ul> 称 为 无 序 列 表 标 签 或 项 目 列 表 标 签, 在 网 页 中 显 示 项 目 形 式 的 列 表, 列 表 中 的 每 一 项 前 面 会 加 上 等 符 号, 每 一 项 需 要 用 <li> 标 签, 所 以 <ul> 标 签 应 与 <li> 标 签 结 合 使 用 语 法 格 式 举 例 : <ul> <li type="circle"> 列 表 项 1</li> <li type="square"> 列 表 项 2</li> </ul> <ul> 的 常 用 属 性 只 有 一 个 type, 用 来 设 定 列 表 项 前 面 出 现 的 符 号, 可 取 属 性 值 如 下 disc: 列 表 项 前 面 加 上 符 号

16 网 页 设 计 与 制 作 案 例 教 程 ( 第 3 版 ) 16 circle: 列 表 项 前 面 加 上 符 号 square: 列 表 项 前 面 加 上 符 号 (2) 有 序 列 表 标 签 <ol> </ol> <ol> 称 为 有 序 列 表 标 签 或 编 号 列 表 标 签, 用 来 在 页 面 中 显 示 编 号 形 式 的 列 表, 列 表 中 每 一 项 的 前 面 会 加 上 如 A a i 或 I 等 形 式 的 编 号, 编 号 会 根 据 列 表 项 的 增 删 自 动 调 整 每 一 项 需 要 用 <li> 标 签, 所 以 需 要 和 <li> 标 签 结 合 使 用 语 法 格 式 举 例 : <ol type="a" start="1"> <li> 列 表 项 1</li> <li> 列 表 项 2</li> </ol> start 属 性 用 于 设 置 编 号 的 起 始 值, 取 任 意 整 数, 默 认 为 1 如 start="3", 则 列 表 编 号 从 3 开 始 type 属 性 用 来 设 定 列 表 的 编 号 形 式, 可 取 属 性 值 如 下 1: 用 阿 拉 伯 数 字 编 号 a: 用 小 写 英 文 字 母 a b c 编 号 A: 用 大 写 英 文 字 母 A B C 编 号 i: 用 小 写 罗 马 字 母 ⅰ ⅱ ⅲ 编 号 I: 用 大 写 罗 马 字 母 Ⅰ Ⅱ Ⅲ 编 号 例 如,type="a", 表 示 列 表 项 目 用 小 写 字 母 编 号 (a b c ) 在 特 定 列 表 项 的 <li> 标 签 中 设 置 value 属 性 可 以 改 变 该 列 表 项 的 起 始 值, 如 <li value="5"> 另 外, 在 列 表 使 用 中 有 时 也 会 用 到 列 表 的 嵌 套 将 一 个 列 表 嵌 入 到 另 一 个 列 表 中, 作 为 它 的 一 部 分, 这 就 是 列 表 的 嵌 套 有 序 列 表 和 无 序 列 表 之 间 也 可 以 进 行 嵌 套 (3)<li> </li> <li> 标 签 定 义 列 表 项, 在 有 序 列 表 标 签 <ol> 和 无 序 列 表 标 签 <ul> 中 都 使 用 <li> 标 签 <li> 标 签 的 属 性 如 下 type: 用 来 设 定 列 表 项 的 符 号, 如 果 <li> 用 在 <ul> 里, 属 性 取 值 为 disc circle 或 square; 如 果 <li> 用 在 <ol> 里, 则 属 性 取 值 为 1 a A i 或 I 需 要 说 明 的 是, 在 HTML 5.0 中,<li> 标 签 不 再 支 持 type 属 性 value: 此 属 性 仅 当 <li> 用 在 <ol> 里 有 效, 属 性 值 为 一 个 整 数, 用 来 设 定 当 前 项 的 编 号, 其 后 的 项 目 编 号 将 以 此 值 为 起 始 数 目 递 增, 前 面 各 项 不 受 影 响 3. 超 链 接 超 级 链 接 是 网 页 的 灵 魂,Web 上 的 网 页 是 依 靠 单 击 设 置 在 文 本 图 像 Flash 等 元 素 上 的 超 级 链 接 实 现 相 互 间 的 访 问 建 立 超 链 接 的 标 签 是 一 对 <a> </a>, 它 是 网 页 中 最 为 常 用 的 标 签 由 于 定 义 超 链 接 时 常 常 需 要 设 置 文 件 的 路 径, 所 以 首 先 介 绍 文 件 路 径 的 写 法, 然 后 再 介 绍 超 链 接 标 签 的 用 法 (1) 文 件 路 径 网 页 设 计 中, 经 常 需 要 设 置 文 件 路 径, 文 件 的 路 径 可 分 为 绝 对 路 径 和 相 对 路 径 绝 对 路 径 : 文 件 的 绝 对 路 径 提 供 文 档 完 整 的 URL 地 址, 而 且 包 括 所 使 用 的 协 议 ( 如 对 于 Web 页, 通 常 使 用 例 如, 就 是 一 个 绝 对 路 径, 表 明 文 件 index.htm 在 域 名 为 的 Web 服 务 器 中 的 根 目 录 下 再 如, 在 网 页 中 插 入 站 点 之 外 D 盘 images 文 件 夹 中 的 tu1.jpg 文 件, 由 于

17 插 入 的 图 片 在 站 点 之 外, 只 能 使 用 绝 对 路 径 "file:///d /images/tu1.jpg" 需 要 注 意 的 是, 使 用 文 档 绝 对 路 径, 移 植 站 点 后, 往 往 导 致 引 用 的 站 外 素 材 不 能 正 确 显 示, 影 响 网 页 显 示 效 果, 不 建 议 使 用 绝 对 路 径 相 对 路 径 : 相 对 路 径 又 分 为 根 相 对 路 径 和 文 档 相 对 路 径, 根 相 对 路 径 总 是 以 站 点 根 目 录 / 为 起 始 目 录, 写 起 来 比 较 简 单 文 档 相 对 路 径 是 以 当 前 文 件 所 在 路 径 为 起 始 目 录, 进 行 相 对 的 文 件 查 找 在 站 点 内, 通 常 采 用 文 档 相 对 路 径, 便 于 站 点 的 移 植, 因 为 在 整 个 站 点 移 植 过 程 中, 文 件 相 对 路 径 不 变, 移 植 后 不 需 要 修 改 路 径 (2) 超 链 接 标 签 <a> <a> 标 签 定 义 超 链 接, 用 于 从 一 个 页 面 链 接 到 另 一 个 页 面 <a> 标 签 最 重 要 的 属 性 是 href 属 性, 它 指 定 链 接 的 目 标 URL 定 义 的 语 法 : <a href=" target="_blank" title="sohu"> 搜 狐 网 站 </a> 属 性 说 明 :<a> 标 签 的 属 性 如 表 1-3 所 示 表 1-3 <a> 标 签 的 属 性 属 性 名 功 能 href target name title 链 接 所 指 的 URL 地 址, 即 目 标 地 址, 属 性 值 可 以 使 用 绝 对 路 径 或 相 对 路 径 指 定 打 开 链 接 的 目 标 窗 口, 取 值 _parent( 在 父 窗 口 中 打 开 ) _blank( 在 新 窗 口 打 开 ) _self( 在 原 窗 口 中 打 开, 默 认 值 ) _top( 在 浏 览 器 的 整 个 窗 口 中 打 开 ) 用 来 设 定 锚 点 的 名 字, 属 性 值 为 自 定 义 字 符 串 指 定 指 向 链 接 时 所 提 示 的 文 字 图 像 标 签 <img> 标 签 定 义 HTML 页 面 中 的 图 像 Web 上 常 用 的 图 像 格 式 有 3 种 :JPEG GIF PNG 使 用 <img> 标 签 在 网 页 中 加 入 图 像 的 语 法 举 例 : <img src="image/tu.jpg" width="300" height="240"/> <img> 是 空 标 签, 没 有 结 束 标 签 <img> 的 常 用 属 性 如 表 1-4 所 示 表 1-4 <img> 标 签 的 常 用 属 性 属 性 名 功 能 src alt width height align border vspace hspace 图 像 的 URL 路 径, 可 以 是 相 对 路 径 或 绝 对 路 径 用 来 设 定 只 显 示 文 本 的 浏 览 器 或 已 设 置 为 手 动 下 载 图 像 的 浏 览 器 中 代 替 图 像 显 示 的 替 代 文 本 用 来 设 定 图 像 的 宽 度 和 高 度 图 像 与 周 围 文 本 的 对 齐 方 式, 取 值 top middle bottom( 默 认 ) left right 用 来 设 定 图 像 的 边 框 宽 度, 属 性 值 为 整 数, 单 位 为 像 素 用 来 设 定 图 像 顶 部 和 底 部 与 其 他 内 容 之 间 的 空 白 大 小, 属 性 值 为 整 数, 单 位 为 像 素 用 来 设 定 图 像 左 侧 和 右 侧 与 其 他 内 容 之 间 的 空 白 大 小, 属 性 值 为 整 数, 单 位 为 像 素 5. 表 格 标 签 表 格 是 网 页 中 用 来 定 位 元 素 的 重 要 方 法, 同 时 表 格 也 是 网 页 布 局 结 构 中 不 可 缺 少 的 一 部 分 表 格 由 一 行 或 多 行 组 成, 每 行 又 由 一 个 或 多 个 单 元 格 组 成 HTML 中 一 个 表 格 通 常 是 由 <table> <tr> <td>3 个 标 签 来 定 义 的, 这 3 个 标 签 分 别 表 示 表 格 表 格 行 单 元 格 在 对 表 格 进 行 设 置 时, 可 以 设 置 整 个 表 格 表 格 中 的 行 或 单 元 格 的 属 性, 它 们 优 先 顺 序 为 : 单 元 格 优 先 于 行, 行 优 先 于 表 格 例 如, 如 果 将 某 个 单 元 格 的 背 景 色 属 性 设

18 网 页 设 计 与 制 作 案 例 教 程 ( 第 3 版 ) 置 为 红 色, 然 后 将 整 个 表 格 的 背 景 色 属 性 设 置 为 蓝 色, 则 红 色 单 元 格 不 会 变 为 蓝 色 表 格 的 基 本 结 构 如 表 1-5 所 示 表 1-5 表 格 的 基 本 结 构 标 签 功 能 <table> </table> <caption> </caption> <tr> </tr> <td> </td> <th> </th> 定 义 一 个 表 格 开 始 和 结 束 定 义 表 格 标 题, 可 以 使 用 属 性 align, 属 性 值 为 top bottom 定 义 表 行, 一 行 可 以 由 多 组 <td> 或 <th> 标 签 组 成 定 义 单 元 格, 必 须 放 在 <tr> 标 签 内 定 义 表 头 单 元 格, 是 一 种 特 殊 的 单 元 格 标 签, 在 表 格 中 不 是 必 需 的 18 语 法 格 式 举 例 : <table width="400" height="60" border="1" align= "center" cellpadding="0" cellspacing="0"> <caption> 表 格 标 题 </caption> <tr> <td> 单 元 格 1</td> <td> 单 元 格 2</td> </tr> </table> (1)<table> 标 签 <table> 是 表 格 标 签, 整 个 表 格 始 于 <table>, 终 于 </table>, 它 是 一 个 容 器 标 签, 用 于 定 义 一 个 表 格,<tr> <td> 标 签 只 能 在 <table> 中 使 用 <table> 常 用 属 性 如 下 width: 设 定 表 格 的 宽 度, 属 性 值 可 以 是 相 对 的 或 绝 对 的, 如 width="50%" align: 设 定 表 格 水 平 对 齐 方 式, 属 性 值 可 以 是 left center right 三 者 中 之 一 border: 设 定 表 格 边 框 的 粗 度, 属 性 值 为 整 数, 单 位 是 像 素 cellpadding: 设 定 边 距 的 大 小, 也 就 是 单 元 格 中 内 容 与 单 元 格 边 框 之 间 留 的 空 白 大 小, 属 性 值 为 整 数, 单 位 是 像 素 cellspacing: 设 定 单 元 格 与 单 元 格 之 间 的 距 离, 属 性 值 为 整 数, 单 位 是 像 素 bgcolor: 设 定 整 个 表 格 的 背 景 颜 色 background: 设 定 表 格 的 背 景 图 像, 属 性 值 为 图 像 文 件 的 相 对 路 径 或 绝 对 路 径 (2)<tr> 标 签 <tr> 用 来 标 识 表 格 行, 是 单 元 格 (<td> 或 <th>) 的 容 器, 使 用 时 要 放 在 <table> 容 器 里, 结 束 标 签 可 以 省 略 <tr> 常 用 的 属 性 如 下 align: 设 定 这 一 行 单 元 格 中 内 容 的 水 平 对 齐 方 式, 属 性 值 为 left center 或 right bgcolor: 用 来 设 定 这 一 行 的 背 景 颜 色 valign: 设 定 这 一 行 单 元 格 中 内 容 的 垂 直 对 齐 方 式, 可 取 属 性 值 有 :top( 顶 端 对 齐 ) middle( 中 间 对 齐 ) bottom( 底 端 对 齐 ) (3)<td> 标 签 <td> 在 表 格 中 表 示 一 个 单 元 格, 是 表 格 中 具 体 内 容 的 容 器, 使 用 时 要 放 在 <tr> 与 </tr> 之 间 <td> 的 常 用 属 性 如 下 align: 设 定 单 元 格 中 内 容 的 水 平 对 齐 方 式, 属 性 值 为 left center 或 right background: 设 定 单 元 格 的 背 景 图 像 bgcolor: 设 定 单 元 格 的 背 景 颜 色 colspan: 在 水 平 方 向 向 右 合 并 单 元 格, 属 性 值 为 跨 列 的 数 目