实 训 一 实 训 一 制 作 诗 词 欣 赏 页 面 1.1 实 训 目 标 了 解 HTML 网 页 基 本 语 法 和 结 构 了 解 HTML 基 本 元 素 掌 握 对 网 页 中 文 字 格 式 化 的 方 法 掌 握 对 网 页 中 段 落 格 式 化 的 方 法 1.2 实 训 内 容 文 字 是 网 页 的 基 础 部 分, 具 体 内 容 包 括 浏 览 器 中 要 显 示 的 文 字 空 格 特 殊 符 号 以 及 注 释 语 句 可 以 通 过 一 些 HTML 标 记 实 现 对 文 字 段 落 的 格 式 化 本 实 训 通 过 对 网 页 中 的 文 字 和 段 落 进 行 格 式 化 制 作 一 个 诗 词 欣 赏 页 面 1.3 实 训 效 果 诗 词 欣 赏 页 面 运 行 效 果 如 图 1 1 所 示 图 1 1 诗 词 欣 赏 页 面 运 行 效 果
网 页 设 计 实 训 教 程 1.4 实 现 过 程 任 务 1: 制 作 诗 词 欣 赏 页 面 步 骤 1: 打 开 编 辑 环 境, 创 建 HTML 文 档 1 1.html, 保 存 到 指 定 位 置, 在 文 档 中 输 入 HTML 文 档 的 基 本 结 构, 代 码 如 下 : <! 程 序 1 1.html > <html> <head> <title> 诗 词 欣 赏 页 面 </title> </head> <body> </body> </html> 说 明 : (1) 一 个 完 整 的 HTML 文 档 包 含 头 部 和 主 体 两 个 部 分 的 内 容, 在 头 部 内 容 里, 可 以 定 义 标 题 样 式 等, 文 档 的 主 体 内 容 就 是 要 显 示 的 信 息 (2)HTML 用 来 描 述 功 能 的 符 号 称 为 标 记 或 标 签 <html> <head> <body> 等 都 是 标 记 标 记 在 HTML 源 文 件 中 书 写 不 区 分 大 小 写 (3) 标 记 通 常 分 为 单 标 记 和 双 标 记 两 种 类 型 其 中 : 1) 单 标 记 仅 单 独 使 用 就 可 以 表 达 完 整 的 意 思 如 <br> 表 示 换 行,<hr> 表 示 水 平 分 隔 线 2) 双 标 记 由 首 标 记 和 尾 标 记 两 部 分 构 成, 必 须 成 对 使 用 首 标 记 告 诉 Web 浏 览 器 从 此 处 开 始 执 行 该 标 记 所 表 示 的 功 能, 尾 标 记 告 诉 Web 浏 览 器 在 这 里 结 束 该 标 记 HTML 中 大 部 分 标 记 为 双 标 记 如 :<b> 和 </b> 之 间 的 文 字 会 加 粗,<center> 和 </center> 之 间 的 文 字 会 居 中 显 示 标 记 对 之 间 的 内 容 称 为 HTML 元 素 注 意 : 标 记 可 以 成 对 嵌 套, 但 不 能 交 叉 嵌 套, 如 下 面 的 代 码 是 错 的 : <p><b> 这 是 错 误 的 交 叉 嵌 套 </p></b> (4)HTML 标 记 可 以 添 加 一 些 附 加 信 息, 称 之 为 属 性 属 性 应 该 写 在 首 标 记 内, 并 且 和 标 记 名 之 间 有 一 个 空 格 分 隔 例 如 :<hr> 的 作 用 是 在 网 页 中 插 入 一 条 水 平 线, 那 么 水 平 线 的 粗 细 对 齐 方 式 等 就 是 该 标 记 的 属 性, 如 : <hr size="5px" align="center"> 代 码 中 <hr> 标 记 中 的 size 为 属 性,5px 为 属 性 值 ;align 为 属 性,center 为 属 性 值 属 性 值 需 要 使 用 双 引 号 "" 括 起 来 (5)<html> 标 记 通 常 会 作 为 HTML 文 档 的 开 始 代 码, 出 现 在 文 档 的 第 一 句, 而 </html> 标 记 通 常 作 为 HTML 文 档 的 结 束 代 码, 出 现 在 文 档 的 尾 部, 其 他 所 有 的 HTML 代 码 都 位 于 这 两 个 标 记 之 间, 该 标 记 用 于 告 知 浏 览 器 或 其 他 程 序, 这 是 一 个 Web 文 档, 应 该 按 照 HTML 语 言 规 则 对 文 档 内 容 的 标 记 进 行 解 释 (6)<head></head> 是 HTML 文 档 的 头 部 标 记, 在 浏 览 器 窗 口 中, 头 部 信 息 是 不 被 显 示 在 正 2
制 作 诗 词 欣 赏 页 面 实 训 一 文 中 的, 在 此 标 记 中 可 以 插 入 其 他 用 于 说 明 文 件 的 标 题 和 一 些 公 共 属 性 的 标 记 如 果 要 指 定 HTML 文 档 的 网 页 标 题 ( 它 将 显 示 在 浏 览 器 窗 口 顶 部 标 题 栏 ), 就 要 在 头 部 内 容 中 提 供 有 关 信 息 用 title 元 素 来 指 定 网 页 标 题, 即 在 <title></title> 之 间 写 上 网 页 标 题 文 字 (7)<body></body> 标 记 之 间 的 文 本 是 在 浏 览 器 中 要 显 示 的 页 面 内 容, 如 图 片 文 字 表 格 表 单 超 链 接 等 元 素 (8)<head></head> 标 记 和 <body></body> 标 记 在 文 档 中 都 是 唯 一 的, 并 嵌 套 在 <html></html> 标 记 中 (9)<! 程 序 1 1.html > 为 注 释 注 释 标 记 用 于 在 HTML 源 码 中 插 入 注 释 注 释 会 被 浏 览 器 忽 略, 不 做 解 释 可 以 使 用 注 释 对 程 代 码 进 行 解 释, 适 当 的 注 释 对 代 码 的 阅 读 和 维 护 有 很 大 的 帮 助 (10)HTML 文 件 的 扩 展 名 为.html 文 件 名 可 以 有 英 文 字 母 数 字 和 下 划 线 组 成, 不 能 包 含 特 殊 符 号, 如 空 格 $ 等 文 件 名 区 分 大 小 写 网 站 首 页 文 件 名 一 般 是 index.html 或 者 default.html HTML 文 档 有 记 事 本 或 其 他 HTML 开 发 工 具 编 写, 由 浏 览 器 解 释 执 行 程 序 1 1 只 有 HTML 的 基 本 结 构, 还 未 添 加 内 容, 所 以 在 浏 览 器 中 的 执 行 效 果 是 空 白 页 面, 如 图 1 2 所 示 图 1 2 空 白 页 面 运 行 效 果 步 骤 2: 在 <body></body> 标 记 之 间 录 入 诗 词 内 容, 如 下 : <! 程 序 1 2.html > <html> <head> <title> 诗 词 欣 赏 页 面 </title> </head> <body> 简 析 唐 诗 欣 赏 静 夜 思 李 白 床 前 明 月 光, 疑 是 地 上 霜 举 头 望 明 月, 低 头 思 故 乡 这 是 写 远 客 思 乡 之 情 的 诗, 诗 以 明 白 如 话 的 语 言 雕 琢 出 明 静 醉 人 的 秋 夜 的 意 境 它 不 追 求 想 象 的 新 颖 奇 特, 也 摒 弃 了 辞 藻 的 精 工 华 美 ; 它 以 清 新 朴 素 的 笔 触, 抒 写 了 丰 富 深 曲 的 内 容 境 是 境, 情 是 情, 那 么 逼 真, 那 么 动 人, 百 读 不 厌, 耐 人 寻 绎 无 怪 乎 有 人 赞 它 是 妙 绝 古 今 版 权 : 版 权 所 有, 违 者 必 究 3
网 页 设 计 实 训 教 程 E mail:zhongdawei@163.com </body> </html> 程 序 1 2 在 浏 览 器 中 的 运 行 效 果 如 图 1 3 所 示 图 1 3 录 入 文 字 后 诗 词 页 面 由 运 行 效 果 可 见, 在 文 本 编 辑 器 中 输 入 的 回 车 和 额 外 的 空 格 均 被 HTML 忽 略 了 若 想 让 文 字 展 现 出 一 定 的 格 式 和 样 式, 需 要 对 文 字 进 行 格 式 化 和 段 落 控 制 步 骤 3: 修 饰 文 字 通 过 <h2> <p> <font> <b> <br> <address> 等 标 记 对 诗 词 内 容 进 行 修 饰 代 码 如 下 : <! 程 序 1 3.html > <h2> 唐 诗 欣 赏 </h2> <hr> <p><b><font size="3"> 静 夜 思 </font></b></p> <p><font size="2"> 李 白 </font></p> <p><b> 床 前 明 月 光,<br> <p> </p> <hr> <p><b> 简 析 </b><br> 疑 是 地 上 霜 <br> 举 头 望 明 月,<br> 低 头 思 故 乡 </b></p> <p> 这 是 写 远 客 思 乡 之 情 的 诗, 诗 以 明 白 如 话 的 语 言 雕 琢 出 明 静 醉 人 的 秋 夜 的 意 境 它 不 追 求 想 象 的 新 颖 奇 特, 也 摒 弃 了 辞 藻 的 精 工 华 美 ; 它 以 清 新 朴 素 的 笔 触, 抒 写 了 丰 富 深 曲 的 内 容 境 是 境, 情 是 情, 那 么 逼 真, 那 么 动 人, 百 读 不 厌, 耐 人 寻 绎 无 怪 乎 有 人 赞 它 是 妙 绝 古 今 </p> <hr> 版 权 : 版 权 所 有, 违 者 必 究 <address>e mail:zhongdawei@163.com</address> 说 明 : (1) 标 题 字, 是 用 几 种 固 定 的 字 号 显 示 文 字 <h2> 为 二 级 标 题 在 HTML 中, 定 义 了 六 级 标 题, 从 一 级 到 六 级, 每 级 标 题 的 字 体 大 小 依 次 递 减 标 题 字 标 记 如 表 1 1 所 示 4
制 作 诗 词 欣 赏 页 面 实 训 一 表 1 1 标 题 字 标 记 标 记 描 述 标 记 描 述 <h1> </h1> 一 级 标 题 <h4> </h4> 四 级 标 题 <h2> </h2> 二 级 标 题 <h5> </h5> 五 级 标 题 <h3> </h3> 三 级 标 题 <h6> </h6> 六 级 标 题 标 题 字 标 记 的 align 属 性 设 置 标 题 字 的 对 齐 方 式, 如 <h2 align="left center right"> </h2>, 其 中 left 表 示 左 对 齐,center 为 居 中 对 齐,right 为 右 对 齐 使 用 标 题 字 的 元 素 自 动 换 行 (2) 文 字 样 式 网 页 中 添 加 文 字 后, 可 以 利 用 <font> 标 记 及 其 属 性 对 网 页 文 字 的 字 体 字 号 颜 色 进 行 定 义 如 :<font face="" size="" color=""> </font>, 其 中 : 1) face 属 性 用 来 定 义 字 体, 任 何 安 装 在 操 作 系 统 中 的 字 体 都 可 以 显 示 在 浏 览 器 中 可 以 为 face 属 性 一 次 定 义 多 个 字 体, 字 体 之 间 用, 分 隔 开, 浏 览 器 在 读 取 字 体 时, 如 果 第 一 种 字 体 系 统 中 不 存 在, 就 显 示 第 2 种 字 体, 依 此 类 推, 如 果 这 些 字 体 都 不 存 在, 就 显 示 系 统 默 认 字 体 2)size 属 性 用 来 定 义 字 号, 取 值 范 围 为 1~7 3)color 属 性 用 来 定 义 颜 色, 其 值 为 该 颜 色 的 英 文 单 词 或 十 六 进 制 数 值 (3) 文 字 修 饰 用 于 文 字 修 饰 的 标 签 语 法 及 描 述, 如 表 1 2 所 示 表 1 2 文 字 修 饰 标 记 标 记 描 述 标 记 描 述 <b></b> 加 粗 文 字 显 示 <sup></sup> 上 标 <i></i> 斜 体 文 字 显 示 <sub></sub> 下 标 <u></u> 文 字 添 加 下 划 线 <address></address> 以 斜 体 显 示 地 址 信 息 <del></del> 文 字 添 加 删 除 线 其 中,<address></address> 标 记 用 来 表 示 HTML 文 档 的 特 定 信 息, 如 E mail 地 址 签 名 作 者 文 档 信 息 等, 这 些 内 容 通 常 为 斜 体, 大 多 数 浏 览 器 会 在 address 元 素 前 后 添 加 一 个 换 行 符 (4) 段 落 标 记 <p></p>, 可 以 对 文 字 进 行 段 落 定 义, 段 落 间 会 有 默 认 间 距 它 可 以 单 独 使 用, 也 可 以 成 对 使 用 单 独 使 用 时, 下 一 个 <p> 的 开 始 就 意 味 着 上 一 个 <p> 的 结 束, 良 好 的 习 惯 是 成 对 使 用 (5) 水 平 分 割 线 <hr> 标 记 在 浏 览 器 显 示 为 水 平 线, 可 以 作 为 段 落 之 间 的 分 割 线, 使 得 文 档 结 构 清 晰, 层 次 分 明 可 以 通 过 属 性 来 修 饰 水 平 线 的 样 式 如 <hr width="" size="" color="" align=""> 默 认 情 况 下, 水 平 线 的 宽 度 为 100% 水 平 线 的 宽 度 可 以 使 用 百 分 比 或 像 素 作 为 单 位, 但 是 水 平 线 高 度 必 须 使 用 像 素 作 为 单 位, 水 平 线 对 齐 方 式 包 括 居 左 (left) 居 中 (center) 居 右 (right) 水 平 线 属 性 如 表 1 3 所 示 表 1 3 水 平 线 属 性 属 性 说 明 属 性 说 明 align 水 平 线 对 齐 方 式 color 水 平 线 颜 色 width 水 平 线 宽 度 noshade 水 平 线 不 出 现 阴 影 size 水 平 线 高 度 5
网 页 设 计 实 训 教 程 (6) 换 行 标 记 <br>, 用 于 文 字 的 换 行 由 于 在 文 本 编 辑 器 中 输 入 的 回 车 将 被 HTML 忽 略, 所 以 要 通 过 <br> 标 记 实 现 换 行 <br> 是 个 单 标 记, 一 次 换 行 使 用 一 个 <br>, 多 次 换 行 可 以 使 用 多 个 <br> 一 般, 浏 览 器 会 根 据 窗 口 的 宽 度 自 动 将 文 本 进 行 换 行 显 示, 如 果 想 强 制 浏 览 器 不 换 行 显 示, 可 以 使 用 <nobr></nobr> 标 记, 但 是 在 <nobr></nobr> 标 记 中 被 <wbr></wbr> 包 含 的 内 容 将 被 强 制 换 行 (7) 添 加 空 格 代 码 中 表 示 输 入 一 个 空 格 通 常,HTML 会 自 动 删 除 文 字 内 容 中 的 多 余 空 格, 不 管 文 字 中 有 多 少 空 格, 都 被 视 为 一 个 空 格 为 了 在 网 页 中 增 加 空 格, 可 以 明 确 使 用 表 示 空 格 输 入 一 个 空 格 使 用 一 个, 输 入 多 个 空 格 就 添 加 多 个 代 码 中 这 是 写 远 客 思 乡 之 前 加 了 4 个 空 格 (8) 添 加 特 殊 符 号 代 码 中 表 示 特 殊 符 号 特 殊 符 号 和 空 格 一 样, 也 是 通 过 在 HTML 文 件 中 输 入 符 号 代 码 添 加 的 使 用 特 殊 符 号 可 以 输 出 键 盘 上 没 有 的 字 符 常 用 的 特 殊 符 号 及 其 对 应 的 符 号 代 码 如 表 1 4 所 示 表 1 4 特 殊 符 号 特 殊 符 号 符 号 代 码 特 殊 符 号 符 号 代 码 & & < < > > " (9) 预 格 式 化 标 记 <pre></pre> 浏 览 器 在 显 示 HTML 页 面 时, 通 常 会 将 页 面 中 所 有 的 额 外 空 白 和 回 车 进 行 压 缩, 并 根 据 窗 口 宽 度 自 动 换 行 要 想 保 留 原 始 文 字 排 版 的 格 式, 可 以 通 过 <pre></pre> 标 记 对 来 实 现 (10) 段 落 缩 进 标 记 <blockquote></blockquote> 该 标 记 嵌 套 在 段 落 标 记 <p></p> 之 外, 可 以 使 段 落 中 的 首 行 文 字 缩 进 5 个 字 符, 如 需 缩 进 更 多, 可 嵌 套 多 层 (11) 滚 动 标 记 <marquee></marquee> 标 记 中 的 内 容 将 在 浏 览 器 中 滚 动 显 示 常 用 的 属 性 及 说 明 如 表 1 5 所 示 表 1 5 <marquee> 标 记 的 属 性 及 说 明 属 性 属 性 功 能 属 性 取 值 属 性 值 功 能 scroll 循 环 滚 动 ( 默 认 值 ) behavior 设 置 滚 动 方 式 slide 滚 动 一 次 停 止 alternate 来 回 交 替 滚 动 left 由 右 向 左 滚 动 ( 默 认 值 ) direction 设 置 滚 动 方 向 right up down 由 左 向 右 滚 动 由 下 向 上 滚 动 由 上 向 下 滚 动 bgcolor 设 置 背 景 颜 色 颜 色 名 称 #rrggbb 表 示 所 用 颜 色 6
制 作 诗 词 欣 赏 页 面 实 训 一 续 表 属 性 属 性 功 能 属 性 取 值 属 性 值 功 能 width 和 height 设 置 滚 动 背 景 的 宽 和 高 数 字 百 分 比 设 置 背 景 的 绝 对 大 小 设 置 背 景 相 对 浏 览 器 窗 口 的 大 小 hspace 和 vspace 设 置 滚 动 背 景 和 周 围 其 他 元 素 的 空 白 间 距 数 字 设 置 滚 动 背 景 和 周 围 其 他 元 素 的 绝 对 间 距 loop 设 置 滚 动 的 循 环 次 数 正 整 数 滚 动 次 数 infinite 无 限 次 ( 默 认 值 ) scrollamount 设 置 每 次 移 动 的 距 离 数 字 ( 默 认 单 位 px) 每 次 移 动 的 距 离 scrolldelay 设 置 每 次 移 动 后 的 间 歇 时 间 数 字 ( 默 认 单 位 ms) 每 次 移 动 后 的 间 歇 时 间 程 序 1 3 在 浏 览 器 中 运 行 结 果 如 图 1 4 所 示 图 1 4 格 式 化 后 诗 词 欣 赏 页 面 任 务 2: 美 化 诗 词 欣 赏 页 面 为 了 让 页 面 更 美 观 典 雅, 需 要 对 页 面 中 的 各 个 内 容 进 行 排 版 布 局 颜 色 大 小 等 的 控 制 可 以 通 过 HTML 标 记 的 属 性 来 实 现 页 面 中 唐 诗 欣 赏 文 字 内 容 要 居 中 显 示, 设 置 <h2> 标 记 的 align 属 性 值 为 center 第 一 二 条 水 平 分 隔 线 设 置 其 width 属 性 值 为 100%, 水 平 线 高 度 size 属 性 值 为 1px, 水 平 线 颜 色 color 属 性 7
网 页 设 计 实 训 教 程 值 为 #00ffee 第 一 二 三 段 落 内 容 均 设 置 为 居 中 对 齐, 即 <p> 标 记 的 align 属 性 值 为 center, 同 时 设 置 文 字 内 容 静 夜 思 和 李 白 的 字 体 大 小, 即 分 别 设 置 <font> 标 记 的 size 属 性 值 为 3 和 2 第 三 条 水 平 分 隔 线 设 置 其 width 属 性 值 为 400px, 水 平 线 高 度 size 属 性 值 为 3px, 水 平 线 颜 色 color 属 性 值 为 #00ee99 水 平 线 的 对 齐 方 式 为 左 对 齐, 将 align 属 性 的 值 设 置 为 left 代 码 如 下 : <! 程 序 1 4.html > <h2 align="center"> 唐 诗 欣 赏 </h2> <hr width="100%" size="1" color="#00ffee"> <p align="center"><b><font size="3"> 静 夜 思 </font></b></p> <p align="center"><font size="2"> 李 白 </font></p> <p align="center"><b> 床 前 明 月 光,<br> <p> </p> 疑 是 地 上 霜 <br> 举 头 望 明 月,<br> 低 头 思 故 乡 </b></p> <hr width="100%" size="1" color="#00ffee"> <p><b> 简 析 </b><br> <p> 这 是 写 远 客 思 乡 之 情 的 诗, 诗 以 明 白 如 话 的 语 言 雕 琢 出 明 静 醉 人 的 秋 夜 的 意 境 它 不 追 求 想 象 的 新 颖 奇 特, 也 摒 弃 了 辞 藻 的 精 工 华 美 ;<br> 它 以 清 新 朴 素 的 笔 触, 抒 写 了 丰 富 深 曲 的 内 容 境 是 境, 情 是 情, 那 么 逼 真, 那 么 动 人, 百 读 不 厌, 耐 人 寻 绎 无 怪 乎 有 人 赞 它 是 妙 绝 古 今 </p> <hr width="400" size="3" color="#00ee99" align="left"> 版 权 : 版 权 所 有, 违 者 必 究 <address>e mail:zhongdawei@163.com</address> 说 明 : (1) 在 计 算 机 中, 可 以 利 用 RGB 表 示 自 然 界 的 任 何 一 种 颜 色 RGB 由 红 (red) 绿 (green) 蓝 (blue) 三 种 颜 色 组 成, 定 义 每 种 颜 色 的 强 度 都 是 0~255 当 所 有 颜 色 强 度 为 0 时, 产 生 黑 色, 当 所 有 颜 色 的 强 度 都 是 255 时, 产 生 白 色 <hr> 标 记 的 color 属 性 值 为 #00ffee, 这 是 用 # 号 加 上 6 位 十 六 进 制 数 字 来 表 示 一 种 颜 色, 格 式 为 #RRGGBB 其 中 R G B 这 三 个 字 母 的 取 值 范 围 为 0~9 a~f 这 16 个 数 字 (a~f 不 区 分 大 小 写 ) 例 如, #FF0000 表 示 红 色 (2) 在 HTML 代 码 中 要 设 置 颜 色 时, 可 以 直 接 使 用 颜 色 名 称 常 用 的 颜 色 名 称 如 表 1 6 所 示 表 1 6 网 页 常 用 颜 色 中 英 文 对 照 表 英 文 名 称 颜 色 英 文 名 称 颜 色 black 黑 purple 紫 white 白 olive 橄 榄 绿 gray 灰 navy 深 蓝 silver 银 灰 aqua 水 蓝 red 红 lime 青 绿 green 绿 maroon 茶 色 blue 蓝 teel 墨 绿 yellow 黄 fuchsia 紫 红 8
制 作 诗 词 欣 赏 页 面 实 训 一 程 序 1 4 在 浏 览 器 中 运 行 结 果 如 图 1 5 所 示 图 1 5 美 化 后 的 诗 词 欣 赏 页 面 1.5 总 结 与 思 考 本 实 训 主 要 介 绍 了 HTML 文 件 的 基 本 结 构 和 基 本 语 法, 以 及 文 字 段 落 的 修 饰 HTML 文 件 基 本 结 构 包 含 三 大 部 分, 其 中 :<html> 和 </html> 分 别 表 示 一 个 HTML 文 档 的 开 始 和 结 束 ;<head> 和 </head> 分 别 表 示 文 档 头 部 的 开 始 和 结 束 ;<body> 和 </body> 分 别 表 示 文 档 主 体 的 开 始 和 结 束 <body> 和 </body> 是 HTML 文 档 的 核 心 部 分, 在 浏 览 器 中 看 到 的 任 何 信 息 都 定 义 在 这 个 标 记 之 内 熟 悉 并 掌 握 关 于 文 字 样 式 文 字 修 饰 以 及 段 落 等 标 记 及 属 性 的 应 用 文 字 不 仅 是 网 页 信 息 传 达 的 一 种 常 用 方 式, 也 是 视 觉 传 达 最 直 接 的 方 式, 运 用 经 过 精 心 处 理 的 文 字 材 料, 可 以 制 作 效 果 很 好 的 版 面 根 据 所 学 的 知 识 完 成 如 下 班 级 网 站 页 面 的 制 作, 效 果 如 图 1 6 所 示 图 1 6 班 级 网 站 页 面 9
实 训 二 制 作 新 闻 列 表 页 面 2.1 实 训 目 标 掌 握 无 序 列 表 的 应 用 掌 握 有 序 列 表 的 应 用 掌 握 嵌 套 列 表 的 应 用 2.2 实 训 内 容 在 制 作 网 页 时, 列 表 是 一 种 常 用 的 格 式 控 制 方 法, 它 可 以 把 相 关 联 的 内 容 以 简 洁 的 易 于 阅 读 的 方 式 呈 现 出 来 本 实 训 将 通 过 使 用 无 序 列 表 有 序 列 表 以 及 列 表 的 嵌 套 制 作 一 个 新 闻 列 表 和 通 知 的 页 面 2.3 实 训 效 果 新 闻 列 表 页 面 运 行 效 果 如 图 2 1 所 示 图 2 1 新 闻 列 表 页 面 运 行 效 果
制 作 新 闻 列 表 页 面 实 训 二 2.4 实 现 过 程 任 务 1: 制 作 新 闻 列 表 页 面 步 骤 1: 打 开 编 辑 环 境, 创 建 HTML 文 档 2 1.html 保 存 到 指 定 位 置, 在 文 档 中 输 入 HTML 文 档 的 基 本 结 构, 代 码 如 下 : <! 程 序 2 1.html > <html> <head> <title> 新 闻 列 表 页 面 </title> </head> <body> </body> </html> 步 骤 2: 无 序 列 表 应 用 在 <body> 和 </body> 标 记 之 间 添 加 无 序 列 表 <ul></ul> 标 记 以 及 列 表 项 标 记 <li></li> 根 据 实 训 要 求, 制 作 班 级 新 闻 列 表 代 码 如 下 : <! 程 序 2 2.html > 班 级 新 闻 <ul type="disc"> <li> 最 新 课 程 表 </li> </ul> 说 明 : <li> 关 于 普 通 话 考 试 的 通 知 </li> <li> 钢 琴 名 曲 音 乐 欣 赏 献 给 爱 丽 丝 </li> <li> 中 国 奥 运 屈 辱 史 </li> <li>div+css 高 级 应 用 学 习 </li> (1) 列 表 (List), 顾 名 思 义 就 是 在 网 页 中 将 相 关 资 料 以 条 目 的 形 式 有 序 或 无 序 排 列 而 形 成 的 表 常 用 的 列 表 有 无 序 列 表 (ul) 有 序 列 表 (ol) 和 定 义 列 表 (dl) 三 种 另 外 还 有 目 录 列 表 (Dir) 和 菜 单 列 表 (Menu) (2) 无 序 列 表 (Unordered List) 是 一 个 没 有 特 定 顺 序 的 相 关 条 目 ( 也 称 为 列 表 项 ) 的 集 合 在 无 序 列 表 中, 各 个 列 表 项 之 间 属 于 并 列 关 系, 没 有 先 后 顺 序 之 分, 它 们 之 间 以 一 个 项 目 符 号 来 标 记 基 本 语 法 : <ul type=" "> <li> 项 目 名 称 </li> </ul> <li> 项 目 名 称 </li> 11
网 页 设 计 实 训 教 程 语 法 说 明 : 1) 在 HTML 文 件 中, 可 以 利 用 成 对 的 <ul></ul> 标 记 插 入 无 序 列 表, 其 中 列 表 项 标 记 <li></li> (List items) 用 来 定 义 列 表 项 序 列 2) 使 用 无 序 列 表 标 记 的 type 属 性, 可 以 指 定 出 现 在 列 表 项 前 的 项 目 符 号 的 样 式, 其 取 值 以 及 相 对 应 的 符 号 样 式 如 下 : disc: 指 定 项 目 符 号 为 一 个 实 心 圆 点 (IE 浏 览 器 默 认 为 disc) circle: 指 定 项 目 符 号 为 一 个 空 心 圆 square: 指 定 项 目 符 号 为 一 个 实 心 方 块 (3) 使 用 列 表 项 标 记 <li></li> 的 type 属 性, 可 以 指 定 单 个 列 表 项 的 项 目 符 号 程 序 2 2 在 浏 览 器 中 运 行 结 果 如 图 2 2 所 示 图 2 2 班 级 新 闻 列 表 步 骤 3: 有 序 列 表 应 用 在 <body> 和 </body> 标 记 之 间 继 续 添 加 <ol></ol> 标 记 以 及 列 表 项 标 记 <li></li> 制 作 普 通 话 考 试 报 名 通 知 列 表 代 码 如 下 : <! 程 序 2 3.html > <ol> </ol> 说 明 : <li> 报 名 时 间 :3 月 16 21 日, 逾 期 不 予 受 理 </li> <li> 报 名 地 点 : 所 在 院 系 办 公 室 </li> <li> 报 名 费 用 : 按 物 价 局 规 定 85 元 / 人 / 次 ( 含 培 训 费 用 ), 报 名 时 交 齐 </li> <li> 提 交 资 料 及 注 意 事 项 :</li> (1) 有 序 列 表 (Ordered List) 是 一 个 有 特 定 顺 序 的 相 关 条 目 ( 也 称 为 列 表 项 ) 的 集 合, 在 有 序 列 表 中, 各 个 列 表 项 有 先 后 顺 序 之 分, 它 们 之 间 以 编 号 来 标 记 基 本 语 法 : <ol> <li> 项 目 名 称 </li> </ol> <li> 项 目 名 称 </li>... 12
制 作 新 闻 列 表 页 面 实 训 二 语 法 说 明 : 1) 在 HTML 文 件 中, 可 以 利 用 成 对 的 <ol></ol> 标 记 插 入 有 序 列 表, 其 中 的 列 表 项 标 记 <li></li> 用 来 定 义 列 表 项 顺 序 2) 使 用 有 序 列 表 标 记 的 type 属 性, 可 以 指 定 列 表 项 的 项 目 编 号 的 样 式, 其 取 值 以 及 相 应 的 编 号 样 式 如 下 : 1: 指 定 项 目 编 号 为 阿 拉 伯 数 字 (IE 浏 览 器 的 默 认 值 是 1) a: 指 定 项 目 编 号 为 小 写 英 文 字 母 A: 指 定 项 目 编 号 为 大 写 英 文 字 母 i: 指 定 项 目 编 号 为 小 写 罗 马 数 字 I: 指 定 项 目 编 号 为 大 写 罗 马 数 字 (2) 编 号 起 始 值 通 常, 在 指 定 列 表 的 编 号 样 式 后, 浏 览 器 会 从 1 a A i 或 I 开 始 自 动 编 号 有 序 列 表 标 记 的 start 属 性, 可 改 变 编 号 的 起 始 值 start 属 性 值 是 一 个 整 数, 表 示 从 哪 一 个 数 字 或 字 母 开 始 编 号 例 如, 设 置 start="3", 则 有 序 列 表 的 列 表 项 编 号 将 从 3 c C iii 或 III 开 始 编 号 (3) 列 表 项 样 式 使 用 列 表 项 标 记 <li></li> 的 type 属 性, 可 以 指 定 单 个 列 表 项 的 编 号 (4) 列 表 项 编 号 列 表 项 标 记 <li></li> 的 value 属 性, 可 以 改 变 当 前 列 表 项 的 编 号 大 小, 并 会 影 响 其 后 所 有 列 表 项 的 编 号 大 小 但 该 属 性 只 适 用 于 有 序 列 表 程 序 2 3 在 浏 览 器 中 运 行 结 果 如 图 2 3 所 示 图 2 3 普 通 话 考 试 报 名 通 知 步 骤 4: 制 作 列 表 嵌 套 在 之 前 的 有 序 列 表 <ol></ol> 标 记 内 嵌 套 一 无 序 列 表, 并 设 置 无 序 列 表 标 记 <ul></ul> 的 type 属 性 值 为 square 代 码 如 下 : <! 程 序 2 4.html > <ol> 13
网 页 设 计 实 训 教 程 <li> 提 交 资 料 及 注 意 事 项 :</li> <ul type="square"> <li> 填 写 准 考 证 一 份 ( 编 号 不 用 填 写 ), 所 填 姓 名 和 出 生 年 月 等 须 与 身 份 证 一 致 ;</li> <li> 提 交 小 一 寸 彩 色 证 件 照 3 张 ( 照 片 不 能 是 打 印 版 不 能 是 生 活 照, 3 张 照 片 必 须 统 一 底 片 ), 其 中 两 张 照 片 贴 在 报 名 表 和 准 考 证 上, 另 一 张 用 钢 笔 在 背 面 写 上 校 名 系 别 和 姓 名, 与 表 格 一 起 上 交 </li> </ol> </ul> 说 明 : 列 表 还 可 以 嵌 套 使 用, 也 就 是 一 个 列 表 中 还 可 以 包 含 多 层 子 列 表 在 网 页 文 件 中, 对 于 内 容 层 次 较 多 的 情 况, 使 用 嵌 套 列 表 不 仅 使 网 页 的 内 容 布 局 更 加 合 理 美 观, 而 且 使 其 内 容 看 起 来 更 加 清 晰 明 了 嵌 套 的 列 表 可 以 是 无 序 列 表 的 嵌 套, 也 可 以 是 有 序 列 表 的 嵌 套, 还 可 以 是 无 序 列 表 和 有 序 列 表 的 混 合 嵌 套 程 序 2 4 在 浏 览 器 中 运 行 结 果 如 图 2 4 所 示 图 2 4 列 表 嵌 套 任 务 2: 美 化 新 闻 列 表 页 面 设 置 班 级 新 闻 普 通 话 考 试 报 名 通 知 文 字 内 容 为 三 级 标 题 大 小, 并 以 粗 体 的 形 式 显 示, 在 两 部 分 内 容 之 间 加 一 水 平 分 隔 线 代 码 如 下 : <h3><b> 班 级 新 闻 </b></h3> <hr> <h3><b> 普 通 话 考 试 报 名 通 知 </b></h3> 美 化 后 的 新 闻 列 表 程 序 在 浏 览 器 中 运 行 结 果 如 图 2 1 所 示 14
制 作 新 闻 列 表 页 面 实 训 二 2.5 总 结 与 思 考 在 HTML 页 面 中, 列 表 是 一 个 常 用 的 格 式 控 制 方 法, 合 理 使 用 列 表 标 签 可 以 起 到 提 纲 和 将 排 序 文 件 格 式 化 的 作 用 HTML 中 常 用 的 列 表 有 : 无 序 列 表 (ul) 有 序 列 表 (ol) 和 定 义 列 表 (dl) 三 种 根 据 所 学 内 容 完 成 列 表 嵌 套 页 面 和 导 航 页 面 的 制 作, 效 果 如 图 2 5 和 图 2 6 所 示 图 2 5 列 表 嵌 套 图 2 6 导 航 页 面 15