《网页设计总复习》PPT课件

1 一 、 网 页 制 作 基 本 概 念 和 HTML语 言1 .网 页 组 成 元 素 文 本 图 像 和 动 画 声 音 和 视 频 超 级 链 接 表 格 表 单 导 航 栏 2 2 .网 页 的 分 类 与 区 别 网 页 都 是 由 一 些 文 本 文 件 组 成 的 ， 用 一 种 叫“ HTML ”（ 超 文 本 标 记 语 言 ） 的 语 言 编 写 的 。这 些 文 本 文 件 的 扩 展 名 为 “ htm” 或 “ html” 网 页 一 般 分 两 类 ： 静 态 网 页 和 动 态 网 页 。 二 者 的 区 别 不 是 指 网 页 是 否 有 动 感 效 果 ； 而 是在 于 网 页 是 否 有 应 用 程 序 解 释 和 后 台 数 据 库 支持 。 使 用 了 应 用 程 序 服 务 器 和 后 台 数 据 库 的 网 页 称为 动 态 网 页 ； 反 之 称 为 静 态 网 页 3 3 .网 站 网 站 是 由 许 多 相 关 网 页 有 机 结 合 而 构 成 的一 个 信 息 服 务 中 心 。 网 站 通 过 超 链 接 与 其 他 各 页 面 相 连 的 页 面 ，称 为 主 页 ， 主 页 是 整 个 网 站 的 目 录 、 索 引 。 网 页 具 体 地 说 是 单 个 文 件 ， 而 网 站 则 是 由许 多 的 网 页 文 件 集 合 而 成 ， 即 使 只 有 一 个网 页 也 能 被 称 为 网 站 。 通 常 一 个 网 站 都 有 一 个 被 称 做 主 页(HomePage)的 特 殊 页 面 ， 也 称 首 页 。 4 网 站 的 目 录 结 构 ： (1 )图 像 文 件 要 建 立 单 独 的 保 存 目 录 。 这 样 便 于修 改 和 更 新 图 像 文 件 ， 避 免 和 其 他 文 件 发 生冲 突 。 一 般 在 根 目 录 下 建 立 一 个 images目 录来 保 存 首 页 中 的 图 像 。 (2 )不 要 将 所 有 的 文 件 都 放 在 根 目 录 下 。 要 尽 量减 少 根 目 录 下 的 文 件 ， 便 于 管 理 和 不 影 响传 输 速 度 。 5 (3 )建 立 适 当 子 目 录 。 便 于 文 件 分 类 管 理 ，同 栏 目 的 内 容 要 放 在 同 一 个 子 目 录 下 ，必 要 是 在 子 目 录 下 再 建 子 目 录 ， 注 意 一般 不 超 过 三 层 。不 使 用 中 文 目 录 。不 要 使 用 过 长 的 目 录 名 。尽 量 使 用 意 义 明 确 的 目 录 。 6 (4 )目 录 和 文 件 命 名 。 具 体 命 名 规 范 ， 可 以 根据 网 站 的 内 容 来 定 ， 一 般 情 况 下 要 求 看 到文 件 名 就 知 道 其 内 容 ， 比 如 首 页 文 件 名 为index.*或 者 default.*,同 类 的 文 件 名 可 用 相同 字 母 前 缀 的 文 件 来 命 名 ， 图 片 、 多 媒 体文 件 分 别 放 到 相 应 的 目 录 ， 图 片 目 录 用image,多 媒 体 目 录 用 media,声 音 用 sound,插图 目 录 用 pic等 。 7 4 .超 链 接 链 接 通 常 可 以 分 为 以 下 几 种 ：(1 )外 部 链 接 （ 绝 对 链 接 ） ：不 同 网 站 页 面 之 间 的 链 接 ；(2 )本 地 链 接 （ 相 对 链 接 ） ：本 地 网 站 内 部 页 面 之 间 的 链 接 ；(3 )锚 点 链 接 （ 也 称 书 签 ） ：同 一 页 面 或 不 同 页 面 指 定 位 置 的 链 接 ；(4 )电 子 邮 件 链 接 ：指 向 一 个 电 子 邮 件 地 址 的 链 接 。 8 根 据 链 接 对 象 的 不 同 还 有 ： 下 载 链 接 ， 该 链 接 指 向 某 一 特 定 的 文 件 ，单 击 它 可 下 载 该 文 件 。 例 如 ：我 的 视 频 热 区 链 接 ， 通 过 设 置 热 区 来 实 现 在 一 幅 图像 中 创 建 多 个 链 接 区 域 。 文 本 超 链 接 和 图 像 超 链 接 是 使 用 最 多 的 两种 超 链 接 。 9 5 .绝 对 路 径 和 相 对 路 径 :(1 )绝 对 路 径 为 文 件 提 供 完 全 的 路 径 ， 包 括适 用 的 协 议 ， 比 如 http、 ftp等 。 创 建 对当 前 站 点 以 外 的 链 接 时 必 须 使 用 绝 对 路径 。例 如 ： http:/ ftp:/2 0 2 .1 3 6 .2 5 4 .1 1 0 (2 )相 对 路 径 适 合 网 站 内 部 的 链 接 ， 即 使 在 同 一 网站 不 同 的 目 录 下 。使 用 方 法 ：如 果 链 接 到 同 一 目 录 下 ， 则 只 需 要 输 入 要 链接 文 档 的 名 称 ， 如 back.gif。要 链 接 到 下 一 级 目 录 中 的 文 件 ， 只 需 先 输 入目 录 名 ， 然 后 加 “ /”， 再 输 入 文 件 名 ， 如 ：images/back.gif。如 链 接 到 上 一 级 目 录 中 的 文 件 ， 则 先 输 入“ ./”， 再 输 入 目 录 名 、 文 件 名 ，如 ： ./images/back.gif。 1 1 6 .HTML标 记 语 言(1 )HTML的 基 本 结 构 文 件 头 部 分 文 件 体 部 分 1 2 (2)HTML的 基 本 语 法 ， 标 记 符 号 的 表 示 方 式 双 边 标 记 ： 也 叫 成 对 标 记 ， 需 要 两 个 标 记组 合 才 能 完 成 所 需 功 能 。如 及 、 及 等 。 单 边 标 记 ： 只 要 一 个 标 记 就 能 完 成 所 需 表示 的 功 能 。如 、 、 。 HTML 标 记 不 区 分 大 小 写 ， 混 合 写 也 是 可 以的 。 1 3 (3) 常 用 的 HTML标 记 的 意 义 与 用 法 页 面 标 签 ： 是 对 网 页 的 整 体 参 数 进 行 设 置 的标 签 ， 必 须 掌 握 的 是 文 档 标 签 ： 标 示 网 页 文 档 开头 和 结 尾 。 文 件 头 标 签 ： 标 题 名 等 网 页信 息 。 文 件 体 标 签 ： 定 义 网 页 显 示的 内 容 和 格 式 。 标 题 标 签 ： 定 义 在 网 页 标 题 栏显 示 的 标 题 。 1 4 的 常 见 参 数 设 置 实 例 : ,设 置 背 景 颜 色 为 蓝 色 。 body background=image/bg.jpg， 设 置image目 录 下 的 bg.jpg图 片 为 背 景（ 注 意 ： 当 上 面 两 个 属 性 同 时 设 置 时 ， 背 景图 起 作 用 ） 1 5 格 式 标 签 ： 用 来 设 置 网 页 上 文 本 和 段 落 的排 版 格 式 ， 这 些 标 签 必 须 放 在之 间 。 常 用 的 有 ： 换 行 标 签 ： 放 在 一 行 的 末 尾 ， 可 使后 面 的 文 字 换 到 下 一 行 而 不 会 留 下 空 行 。 段 落 标 签 ： 放 在 一 段 文 字 末 尾 ，定 义 一 个 新 的 段 落 。 1 6 文 本 标 签 ， 用 来 定 义 网 页 上 字 符 的 样 式 。常 用 的 有 ： 标 题 字 体 标 签 .：设 定 标 题 文 字 的 大 小 ， 取 1 最 大 ， 取 6 最 小 。 字 体 标 签 ： 可 设 置 网 页 文 字的 字 体 、 字 号 和 颜 色 。参 数 设 置 实 例 ： 华 工 1 7 图 形 图 像 标 签 ： 直 线 标 签 ： 在 网 页 中 插 入 一 条 分 隔 线 。 图 像 插 入 标 签 ： 将 一 幅 图 像 加 入 到 网 页 中 。参 数 设 置 实 例 ： 插 入 一 条 宽 6 象 素 ， 红 色 ， 长 度 为 浏 览 器 宽 度 8 0 的 水 平 线 参 数 设 置 实 例 ： 插 入 图 片 tu1 .jpg， 宽 高 均 为 1 0 0 象 素 ， 靠 右 对 齐 。 1 8 链 接 标 签 ： 在 网 页 上 建 立 超 链 接 。 设 置 实 例 ： 太 阳 系 页 面 加 入 背 景 音 乐 标 签 设 置 实 例 ：页 面 添 加 背 景 音 乐 sound目 录 下 的 bouree.mid，播 放 一 次 。 1 9 表 格 标 签 ： 表 格 标 签 ： 在 网 页 中 创 建一 个 表 格 。 标 题 标 签 ： 给 表 格 加上 标 题 。 表 头 标 签 ： 表 格 的 第 一 行 ， 文字 按 粗 体 居 中 显 示 。 2 0 行 标 签 ： 用 来 创 建 表 格 中 的 每 一行 。 只 能 放 在 之 间 使 用 。在 此 标 签 对 中 加 入 文 本 将 是 无 效 的 。 列 标 签 ： 用 来 创 建 表 格 中 一 行中 的 每 一 个 单 元 格 ， 此 标 签 对 不 能 直 接 放在 之 间 ， 必 须 放 在标 签 对 之 间 才 有 效 。 表 格 中 的 所有 的 文 本 和 其 他 信 息 只 有 放 在 标 签 对 中 才 有 效 。 2 1 表 格 标 签 应 用 综 合 实 例 ： 公 共 管 理 学 院 行 政 1 班 行 政 2 班 3 0 人 4 0 人 2 2 (4 )设 定 链 接 的 目 标 窗 口 _parent 在 上 一 级 窗 口 中 打 开 。 例 ： a href=文 件 名 .htm Target=_parent _blank 在 新 窗 口 中 打 开 。 例 ： a href=文 件 名 .htm Target=_blank _self 在 同 一 个 窗 口 中 打 开 。 例 ： a href=文 件 名 .htm Target=_self _top 忽 略 任 何 框 架 ， 在 浏 览 器 的 整 个 窗 口 中打 开 。 例 ： a href=文 件 名 .htm Target=_top 2 3 二 、 网 页 制 作 工 具 和 软 件1 . 网 页 制 作 工 具 所 见 即 所 得 的 工 具 ： Dreamweaver 和 FrontPage 是 目 前 最 流 行 的 两 种 所 见 即 所 得的 网 页 编 辑 工 具 。与 用 Word 排 版 差 不 多 ， 你 不 用 去 学 HTML 语 言 ， 只 要 把 自 己 需 要 的 文 字 和 图 像 摆 到网 页 中 ， 软 件 会 自 动 生 成 相 应 的 HTML 代 码 。 代 码 编 辑 工 具 ： 各 种 文 本 编 辑 器 ， 记 事 本 、Word等 。 2 4 2 . 网 页 上 常 用 的 图 形 格 式 在 网 页 上 常 用 到 的 图 形 格 式 只 包 括 以 下 3 种 ：PNG、 GIF 和 JPEG。PNG是 Fireworks的 本 身 文 件 格 式 。GIF格 式 主 要 应 用 于 卡 通 画 、 素 描 作 品 、 插图 、 带 有 大 块 纯 色 区 域 的 图 形 、 透 明 图 形和 简 单 动 画 等 。JPEG格 式 的 图 像 主 要 应 用 于 连 续 色 调 的 作品 、 数 字 化 照 片 和 扫 描 图 像 等 。 2 5 位 图 和 矢 量 图位 图 ： 由 排 列 成 若 干 行 、 列 的 光 点 组 成 的 像素 点 阵 。优 点 ： 视 觉 效 果 好 ， 生 动 逼 真 ， 适 合 于表 现 层 次 和 色 彩 比 较 丰 富 、 包 含 大 量 细 节的 图 像 。缺 点 ： 清 晰 度 与 分 辨 率 有 关 ， 放 大 后 会出 现 锯 齿 、 变 模 糊 2 6 矢 量 图 ： 是 指 使 用 绘 图 指 令 描 述 的 由 直 线 、曲 线 等 图 元 组 成 的 图 像 。 一 般 分 为 二 维 图形 和 三 维 图 形 两 大 类 。优 点 ： 图 形 质 量 与 分 辨 率 无 关 ， 占 用 存储 空 间 很 小 ， 放 大 与 缩 小 不 会 失 真 ， 适于 表 示 由 有 规 律 的 线 条 组 成 的 图 像缺 点 ： 图 形 越 复 杂 显 示 时 间 越 长 ， 难 以表 示 人 物 、 景 色 照 片 一 类 的 彩 色 图 像 。 2 7 3 .关 于 Dreamweaver 8 用 Dreamweaver 8 制 作 网 页 ， 可 以 用 表 格 、层 和 框 架 或 者 用 Fireworks8 作 图 切 片 的 方 式进 行 网 页 布 局 。 用 Dreamweaver 8 提 供 了 进 行 网 页 编 辑 的 设几 种 工 作 模 式 ， 就 是 设 计 模 式 、 拆 分 模 式和 代 码 模 式 。 Dreamweaver 8 网 页 编 辑 中 用 于 在 浏 览 器 中测 试 网 页 的 快 捷 方 式 。 2 8 Dreamweaver 8 中 的 行 为 。 行 为 (behavior)是 事件 (Event)和 动 作 (Action)的 组 合 ， 为 对 象 添 加 行为 需 要 进 行 动 作 和 事 件 的 设 置 。 常 用 的 几 种 鼠标 事 件 ： 2 9 Dreamweaver 8 中 的 层 的 特 性 。 层 是 网 页 中用 来 放 置 文 本 、 图 像 、 动 画 、 视 频 和 表 单等 网 页 元 素 的 载 体 。 它 的 几 种 主 要 功 能 ：可 以 重 叠 、 自 由 移 动 、 定 位 网 页 元 素 、 可以 和 时 间 轴 配 合 实 现 动 画 效 果 、 可 以 显 示和 隐 藏 层 、 可 以 转 换 为 表 格 。 Dreamweaver8 中 为 图 像 设 置 替 代 文 字 、 插入 日 期 等 操 作 。 3 0 Dreamweaver8 可 以 在 网 页 中 插 入 导 航 条 ， 该 导航 条 是 一 组 超 链 接 ， 添 加 导 航 条 可 以 使 浏 览 者可 以 快 速 容 易 地 转 向 站 点 的 主 要 网 页 ， 有 效 地防 止 浏 览 者 在 浏 览 网 页 时 迷 失 方 向 。 Dreamweaver8 中 利 用 框 架 技 术 设 计 网 页 ， 由 框架 集 和 框 架 两 部 分 组 成 ， 把 页 面 划 分 成 独 立 的若 干 个 区 域 ， 每 个 区 域 相 当 于 一 个 独 立 的 页 面 。 在 Dreamweaver 8 中 建 立 一 个 网 站 所 需 的 基 本步 骤 。 3 1 利 用 CSS样 式 表 可 自 动 格 式 化 网 页 文 档 ， 可为 部 分 文 件 、 整 个 文 件 或 整 个 网 站 定 义 样式 。 可 将 定 义 好 的 CSS样 式 直 接 插 入 网 页 文档 中 ， 也 可 定 义 在 网 页 文 档 之 外 的 CSS样 式表 文 件 中 。 当 一 个 定 义 好 的 CSS样 式 被 修 改好 ， 使 用 这 个 CSS样 式 的 网 页 文 档 的 格 式 也将 被 自 动 更 新 。 3 2 模 板 和 库 的 应 用 ， 它 们 各 自 文 件 名 的 后 缀分 别 是 .dwt和 .lbi。 Dreamweaver 8 的 表 单 ： 表 单 实 现 浏 览 者 和服 务 器 之 间 信 息 的 交 互 传 送 。 表 单 中 可 以插 入 的 对 象 有 文 本 框 、 单 选 按 钮 、 复 选 框 、列 表 框 、 图 像 域 和 隐 藏 域 等 。 文 本 框 的 三种 形 式 ： 单 行 文 本 框 、 多 行 文 本 框 和 密 码的 功 能 。 3 3 4 .关 于 Flash 8 Flash 8 是 一 种 网 页 动 画 制 作 软 件 ， 它 的 源 文件 的 扩 展 名 是 .fla， 生 成 的 影 片 的 格 式 是 .swf。 Flash 8 中 的 元 件 的 概 念 ： 元 件 指 一 种 比 较 特殊 的 、 可 以 在 Flash动 画 中 重 复 使 用 的 对 象 。元 件 可 以 提 高 编 辑 动 画 的 效 率 ， 使 创 建 复杂 的 交 互 效 果 时 变 得 更 加 容 易 。 元 件 可 以是 图 形 ， 也 可 以 是 动 画 。 每 个 Flash动 画 文 件 都 有 用 于 存 放 动 画 元 素的 库 ， 用 来 存 放 元 件 、 位 图 、 声 音 以 及 视频 文 件 等 。 3 4 Flash8 中 引 导 层 的 作 用 是 确 定 被 引 导 层 中 对象 运 动 的 轨 迹 。 Flash8 中 遮 罩 层 可 以 用 来 屏 蔽 下 面 被 遮 罩 层的 内 容 ， 透 过 遮 罩 对 象 上 镂 出 的 缺 口 显 示被 遮 罩 层 中 相 应 部 分 的 内 容 。 3 5 元 件 的 种 类 ： 图 形 元 件 、 按 钮 元 件 、 影 片剪 辑 元 件 。 Flash 8 中 的 按 钮 的 状 态 ， 按 钮 具 有 4 个 状 态 ：“ 弹 起 ” 、 “ 指 针 经 过 ” 、 “ 按 下 ” 和“ 点 击 ” 。“ 弹 起 ” 是 正 常 状 态 ，“ 指 针 经 过 ” 是 鼠 标 移 过 的 时 候 显 示 的 画 面 ，“ 按 下 ” 是 鼠 标 按 下 时 显 示 的 状 态 ，“ 点 击 ” 是 用 来 确 定 按 钮 的 作 用 范 围 的 。 3 6 Flash 8 中 逐 帧 动 画 的 概 念 ： 逐 帧 动 画 就 是 对每 一 帧 的 内 容 逐 个 进 行 编 辑 ， 然 后 按 一 定的 时 间 顺 序 进 行 播 放 而 形 成 的 动 画 。 Flash 8 的 渐 变 动 画 有 ： 运 动 渐 变 动 画 和 形 状渐 变 动 画运 动 渐 变 动 画 ： 在 一 个 关 键 帧 上 放 置 一 个元 件 ， 然 后 在 另 一 个 关 键 帧 改 变 这 个 元 件的 大 小 、 颜 色 、 位 置 、 透 明 度 等 ， Flash根据 二 者 之 间 的 帧 创 建 的 动 画 。 3 7 形 状 渐 变 动 画 ： 在 一 个 关 键 帧 中 绘 制 一 个形 状 ， 然 后 在 另 一 个 关 键 帧 中 改 变 该 形 状或 者 绘 制 另 外 一 个 形 状 ， Flash根 据 两 者 之间 的 值 或 形 状 来 创 建 动 物 成 为 形 状 补 间 动画如 果 使 用 图 形 元 件 、 按 钮 、 文 字 ， 则 必 须 先“ 分 离 ” 才 能 创 建 变 形 动 画 。 3 8 Flash动 画 制 作 中 时 间 轴 和 关 键 帧 的 概 念 和 作用 。 时 间 轴 窗 口 是 Flash进 行 动 画 创 作 和 编 辑 的主 要 工 具 ， 它 是 由 帧 、 图 层 和 播 放 指 针 组 成 。时 间 轴 显 示 的 是 动 画 中 各 帧 的 排 列 顺 序 ， 同 时也 包 括 了 各 层 的 前 后 顺 序 。 用 它 可 以 查 看 每 一帧 的 情 况 ， 调 整 动 画 播 放 的 速 度 ， 安 排 帧 的 内容 ， 改 变 帧 与 帧 之 间 的 关 系 ， 从 而 实 现 不 同 效果 的 动 画 。 关 键 帧 是 包 含 内 容 的 帧 ， 它 可 以 编 制 图 形或 元 件 等 ， 当 时 间 帧 在 播 放 动 画 渐 变 时 ， 只 要播 放 经 过 关 键 帧 时 ， 关 键 帧 的 内 容 一 定 会 显 示 。关 键 帧 后 的 普 通 帧 将 继 续 播 放 该 关 键 帧 的 内 容 。 3 9 5 .关 于 Fireworks 8 Fireworks 8 是 一 个 网 页 图 形 编 辑 软 件 ， 使 用Fireworks不 仅 可 以 方 便 地 将 图 做 的 又 小 又 漂亮 ， 将 图 像 优 化 导 出 成 .GIF和 .JPEG文 件 ， 还可 以 将 制 作 的 动 画 作 为 GIF动 画 文 件 或 Flash SWF文 件 导 出 。 关 于 蒙 版 的 应 用 、 概 念 和 种 类 。 4 0 Fireworks8 中 切 片 与 文 件 优 化切 片 ： 顾 名 思 义 就 是 将 一 幅 大 图 像 分 割成 一 些 小 的 图 像 切 片 ， 在 网 页 中 可 以 将这 些 小 的 图 像 切 片 放 入 一 个 表 格 ， 将 表格 单 元 格 之 间 的 间 距 设 为 0 ， 从 而 将 这 些小 的 图 像 切 片 没 有 缝 隙 地 重 新 组 合 起 来 ，还 原 成 一 幅 完 整 的 图 像 。 4 1 切 片 可 以 分 别 优 化 ， 每 一 个 切 片 上 都 可 以 采用 不 同 的 优 化 方 式 ， 即 使 用 最 适 合 的 文 件 格式 和 压 缩 设 置 来 分 别 优 化 每 个 独 立 切 片 。 通 过 切 片 把 图 形 分 割 为 若 干 个 部 分 ， 在 浏 览的 时 候 可 以 同 时 并 行 下 载 ， 这 样 就 可 以 节 约访 问 者 等 待 的 时 间 。 可 以 使 用 切 片 来 创 建 相 应 各 种 交 互 动 作 。 每 个 切 片 可 以 建 立 自 己 的 超 链 接 ， 通 过 切 片可 以 轻 松 地 更 新 网 页 中 经 常 更 改 的 部 分 ， 做到 局 部 更 新 。 4 2 如 何 将 Fireworks的 图 片 应 用 到 网 页 上 ？ 使 用 Fireworks 8 的 切 片 功 能 ， 将 图 像 分 割 成 多个 较 小 的 部 分 ， 并 将 每 部 分 导 出 成 单 独 的 文件 。 在 导 出 时 ， 选 择 【 导 出 】 “ HTML和 图 像 ” ，导 出 多 个 图 像 文 件 和 一 个 包 含 表 格 代 码 的HTML文 件 。 启 动 在 Dreamweaver 8 ， 在 编 辑 窗 口 中 插 入 由Fireworks 8 导 出 时 生 成 的 HTML文 件 。 将 该 Fireworks 8 保 存 的 HTML文 件 插 入 到 网 页中 ， 可 以 得 到 和 原 来 图 片 位 置 、 链 接 位 置 都不 变 的 一 个 嵌 在 表 格 中 图 片 网 页 。 4 3 4 4 题 型 数 量 每 题 分 数 总 分 （ 1 0 0 分 ）判 断 题 1 0 1 1 0单 选 题 3 0 1 3 0多 选 题 5 2 1 0填 空 题 1 2 1 1 2问 答 题 7 4 2 8实 践 题 2 5 1 0考 题 相 关 4 5 考 试 时 间 ： 6 月 2 8 日 下 午 3 ： 0 0 5 ： 0 0 考 试 地 点 ： 自 查请 带 齐 有 关 考 试 物 品 ： 学 生 证 等座 位 表 请 到 服 务 器 查 看考 试 要 求 ： 闭 卷 考 试大 作 业 提 交 截 至 时 间 ： 6 月 2 5 日 (过 时 将 关 闭 服 务 器 ) 4 6