网页设计说明书范例.doc

1、题 目： 走进宁夏 专业班级： 09 级计算机科学与技术 1 班姓 名： 姓 名 学 号： 学 号 指导教师： 指导教师 成 绩： 宁夏风采展示网站说明文档2- 目 录第一章 网页概述 .11.1 网页简介 11.2 网页组成 .11.3 网页设计思想 .2第二章 网页设计思路 .32.1 网页设计背景 32.2 制作工具选择 32.3 素材收集 42.4 网页设计内容构想 5第三章 网页内容简介 .73.1 网页功能简介 73.2 网页主要功能描述 73.3 网页的浏览 .8第四章 网页设计 .94.1 网页结构总图 94.2 各网页模块的组成 104.3 网页制作环境 124.4 网页设计

2、思路 12第五章 网页制作 .145.1 素材的加工制作 145.2 网站的建立 .155.3 网页设计 155.3.1 主页设计 155.3.2“环境” .185.3.3“历史” .205.3.4“文化” .215.3.5 “城市” 245.3.6 其它页面设计 26第六章 设计体会 .28致谢 .293- 摘 要 【 摘 要 】 本 网 页 主 要 用 HTML 语 言 编 写 ， 利 用 Macromedia Dreamweaver8.0 作 为 开 发 工 具 ， 介 绍 了 宁 夏 回 族 自 治 区 的 历 史 、 文 化 、 人 口 、民 族 、 城 市 、 经 济 、 地 理

3、、 特 产 等 基 本 概 况 ， 以 图 片 和 文 字 介 绍 相 结 合 的 方 式 ，穿 插 一 些 视 频 媒 体 ， 以 网 站 浏 览 的 方 式 综 合 展 示 了 宁 夏 回 族 自 治 区 的 整 体 面 貌 ，着 重 介 绍 了 宁 夏 几 大 城 市 和 特 色 文 化 。【 关 键 词 】 网 页 设 计 说 明 书 走 进 宁 夏 设 计 思 路 Dreamweaver8.0 Javascript 语 言 1- 第一章 网页概述1.1 网页简介网 页 ， 是 构 成 网 站 的 基 本 元 素 ， 是 承 载 各 种 网 站 应 用 的 平 台 。 通 俗 的 说

4、，网 站 就 是 由 网 页 组 成 的 。 网 页 说 具 体 了 是 一 个 html 文 件 ， 浏 览 器 是 是 用 来解 读 这 份 文 件 的 。本 次 网 页 设 计 ， 主 要 用 HTML 语 言 编 写 ， 利 用 Dreamweaver8.0 作 为 开 发工 具 ， 中 间 插 入 了 一 些 Javascript 语 言 用 以 编 制 一 些 特 效 ， 如 左 右 移 动 图片 广 告 、 显 示 当 前 时 间 等 ， 主 要 介 绍 了 宁 夏 回 族 自 治 区 的 历 史 、 文 化 、 人 口 、环 境 、 民 族 、 城 市 、 经 济 、 地 理

5、、 特 产 等 基 本 概 况 ， 以 图 片 和 文 字 介 绍 相 结 合的 方 式 ， 穿 插 一 些 视 频 媒 体 ， 以 网 站 浏 览 的 方 式 综 合 展 示 了 将 宁 夏 回 族 自 治 区的 整 体 面 貌 展 现 给 大 家 ， 着 重 介 绍 了 宁 夏 回 族 自 治 区 几 大 城 市 和 特 色 文 化 。1.2 网页组成1、 主 页（ 1） 宁 夏 介 绍（ 2） 五 大 城 市（ 3） 宁 夏 特 色2、 环 境介 绍 了 宁 夏 回 族 自 治 区 的 自 然 生 态 环 境 。3、 历 史介 绍 了 宁 夏 的 历 史 （ 旧 石 器 时 期 新 中

6、国 成 立 自 治 区 成 立 ） 。4、 文 化（ 1） 九 大 文 化（ 2） 宁 夏 花 儿（ 3） 宁 夏 文 学（ 4） 宁 夏 书 画2- 5、 城 市（1）银川市（2）石嘴山市（3）吴忠市（4）固原市（5）中卫市6、 民 族（1）民族构成概况（2）宁夏回族7、 人 口介 绍 了 宁 夏 回 族 自 治 区 的 人 口 状 况 。8、 地 理介 绍 了 宁 夏 回 族 自 治 区 的 地 理 概 况 。9、 经 济介 绍 了 宁 夏 回 族 自 治 区 2009 年 经 济 统 计 数 据 。10、 特 产介 绍 了 宁 夏 回 族 自 治 区 “五 宝 ”以 及 其 它 特 色

7、产 品 、 食 品 等 。1.3 网页设计思想本 网 页 使 用 Macromedia Dreamweaver8.0 作 为 设 计 工 具 ， 采 用 多 重 链接 的 方 式 展 示 宁 夏 回 族 自 治 区 的 历 史 文 化 等 几 个 方 面 ， 力 求 界 面 简 洁 明 了 的 同时 ， 设 计 中 插 入 了 一 些 Javascript 语 言 用 以 编 制 一 些 特 效 ， 以 提 高 可 观 赏性 。 在 制 作 过 程 中 力 求 综 合 运 用 所 学 计 算 机 技 能 ， 充 分 发 挥 本 人 的 专 业 特 长 ，使 能 够 通 过 网 页 上 图 片

8、展 示 和 文 字 介 绍 ， 真 实 而 且 较 为 全 面 地 反 映 宁 夏 回 族 自治 区 的 概 况 ， 同 时 也 反 映 了 宁 夏 人 民 的 风 土 人 情 、 民 族 风 情 、 文 化 氛 围 、 精 神风 貌 、 发 展 前 景 。3- 第二章 网页设计思路2.1 网页设计背景由 于 因 特 网 的 开 放 结 构 ， 对 多 数 用 户 来 说 ， 已 不 满 足 于 浏 览 别 人 制 作 的 网页 ， 而 要 自 己 制 作 网 页 发 布 到 因 特 网 上 ， 所 以 网 页 制 作 不 仅 是 专 业 人 员 的 工 作 ，已 成 为 普 通 人 的 生

9、活 和 工 作 需 求 。值 此 之 际 ， 新 中 国 61 华 诞 和 自 治 区 52 大 庆 的 庆 祝 宣 传 活 动 气 氛 热 烈 ，因 此 构 想 借 毕 业 设 计 之 机 ， 通 过 计 算 机 工 具 ， 以 “走 进 宁 夏 ”为 主 题 ， 制 作一 网 站 来 展 示 宁 夏 回 族 自 治 区 的 全 新 面 貌 ， 渲 染 回 乡 风 情 ， 弘 扬 优 秀 文 化 ， 促进 民 族 团 结 。2.2 制作工具选择Macromedia Dreamweaver 是 一 款 集 网 页 制 作 和 管 理 网 站 于 一 身 的 所 见 即所 得 网 页 编 辑 器

10、 ， 是 一 套 视 觉 化 网 页 开 发 工 具 ， 利 用 它 可 以 轻 而 易 举 地 制 作 出跨 越 平 台 限 制 和 跨 越 浏 览 器 限 制 的 充 满 动 感 的 网 页 。 概 括 起 来 ，Dreamweaver 具 有 以 下 优 点 ：一 是 最 佳 的 制 作 效 率 。 Dreamweaver 可 以 用 最 快 速 的 方 式 将Fireworks， FreeHand， 或 Photoshop 等 档 案 移 至 网 页 上 。 对 于 选 单 ， 快 捷键 与 格 式 控 制 ， 都 只 要 一 个 简 单 步 骤 便 可 完 成 。二 是 方 便 的

11、网 站 管 理 功 能 。 使 用 网 站 地 图 可 以 快 速 制 作 网 站 雏 形 、 设 计 、更 新 和 重 组 网 页 。 改 变 网 页 位 置 或 档 案 名 称 ， Dreamweaver 会 自 动 更 新 所有 链 接 。三 是 无 可 比 拟 的 控 制 能 力 。 Dreamweaver 是 提 供 HTML、 视 觉 化 编 辑 与 原始 码 编 辑 同 步 的 设 计 工 具 。 帧 (frames)和 表 格 的 制 作 速 度 快 。 Dreamweaver 支 援 精 准 定 位 ， 利 用 可 轻 易 转 换 成 表 格 的 图 层 以 拖 拉 置 放

12、的 方 式 进 行 版 面 配 置 。当 使 用 Dreamweaver 在 设 计 动 态 网 页 时 ， 所 见 即 所 得 的 功 能 ， 让 您 不 需 要 透过 浏 览 器 就 能 预 览 网 页 。 全 方 位 的 呈 现 利 用 Dreamweaver 设 计 的 网 页 ， 可 以全 方 位 的 呈 现 在 任 何 平 台 的 热 门 浏 览 器 上 。4- 因 此 ， 选 用 Dreamweaver8.0 作 为 开 发 工 具 。2.3 素材收集文 字 与 图 片 是 构 成 一 个 网 页 的 两 个 最 基 本 的 元 素 。 可 以 简 略 的 理 解 为 ： 文字

13、， 就 是 网 页 的 内 部 实 质 意 义 ； 图 片 ， 就 是 网 页 的 美 容 护 肤 品 。 除 此 以 外 ，网 页 的 元 素 还 包 括 动 画 、 音 乐 等 等 。1、 图 形主 要 通 过 网 络 媒 体 获 得 图 片 资 料 。 如 历 史 、 地 理 、 文 化 、 环 境 方 面 ， 主 要浏 览 政 府 网 站 以 及 所 属 相 关 部 门 专 业 网 站 并 搜 集 资 料 ； 城 市 、 特 产 、 名 胜 等 方面 ， 通 过 搜 索 引 擎 、 一 些 旅 游 资 源 网 站 （ 如 “宁 夏 旅 游 ”“天 下 游 ”） 获 得 ，还 有 一 部

14、 分 是 同 事 、 朋 友 出 游 的 时 候 拍 摄 的 照 片 。 将 这 些 资 料 库 中 的 照 片 、 书画 作 品 、 图 片 资 料 ,根 据 具 体 需 要 ， 用 ACDSee、 Photoshop 软 件 适 当 处 理 ，变 成 素 材 添 加 到 网 页 的 某 个 地 方 ， 充 分 提 高 网 页 的 观 赏 性 。2、 文 字由 设 计 思 路 展 开 ， 搜 集 所 需 要 的 文 字 资 料 。 历 史 、 地 理 、 环 境 、 民 族 、 文化 、 人 口 部 分 参 考 宁 夏 通 志 、 回 族 文 化 等 书 籍 ， 经 济 、 城 市 、 特

15、产 部分 资 料 来 自 政 府 网 站 以 及 所 属 相 关 部 门 专 业 网 站 、 旅 游 资 源 网 站 。 对 素 材 分 析选 取 ， 进 行 相 应 的 文 字 编 辑 和 加 工 。3.图 表“经 济 ”子 页 引 用 了 政 府 网 站 、 统 计 局 的 数 据 图 表 。4.视 频网 络 为 我 们 提 供 了 丰 富 的 视 频 资 源 。 为 展 示 回 族 文 化 精 粹 ， 特 选 取 下 载 了两 个 “花 儿 ”视 频 。5.动 画在 指 导 教 师 的 指 导 下 ， 利 用 Flash 8.0 动 画 制 作 软 件 创 作 了 网 页 中 的 主要

16、动 画 ， 同 时 利 用 网 上 的 动 画 资 源 ， 收 集 了 一 些 小 的 动 画 素 材 ， 大 部 分 作 为 网页 顶 部 标 题 图 片 的 点 缀 。5- 2.4 网页设计内容构想就 具 体 设 计 环 节 而 言 ， 概 括 为 两 个 方 面 ： 一 方 面 是 纯 网 站 本 身 的 设 计 比 如文 字 排 版 ， 图 片 制 作 ， 平 面 设 计 ， 三 维 立 体 设 计 ， 静 态 无 声 图 文 ， 动 态 有 声 影像 等 ； 另 一 方 面 是 网 站 的 延 伸 设 计 ， 包 括 网 站 的 主 题 定 位 和 浏 览 群 的 定 位 ， 制作

17、策 划 ， 形 象 ， 宣 传 等 等 。网 站 设 计 优 化 的 具 体 表 现 是 ： 以 用 户 需 求 为 导 向 ， 设 计 方 便 的 网 站 导 航 ，网 页 下 载 速 度 尽 可 能 快 ， 网 页 布 局 合 理 并 且 适 合 保 存 、 打 印 、 转 发 ， 网 站 信 息丰 富 、 有 效 ， 有 助 于 用 户 产 生 亲 切 感 、 信 任 感 。 通 过 对 网 站 功 能 、 结 构 、 布局 、 内 容 等 关 键 要 素 的 合 理 设 计 ， 使 得 网 站 的 功 能 和 表 现 形 式 达 到 最 优 效 果 。构 思 阶 段 需 要 考 虑 以

18、 下 内 容 ：1.页 面 主 题此 网 页 的 中 心 思 想 是 通 过 网 页 浏 览 欣 赏 ， 利 用 文 字 介 绍 、 图 片 展 示 ， 其 中辅 以 动 画 、 音 乐 、 视 频 ， 以 图 文 并 茂 、 视 听 兼 有 的 形 式 来 全 面 反 映 宁 夏 整 体 面貌 ， 渲 染 “浓 郁 的 回 乡 风 情 ”。 有主题就要进行宣传，设计网站的宣传标语。也可以说是网站的精神，网站的目标。用一句话甚至一个词来高度概括，类似实际生活中的广告金句。本网站的主题宣传是：“走进宁夏浓郁的回乡风情” 。2.页 面 内 容内 容 要 为 网 页 主 题 服 务 。用 文 字 介

19、 绍 宁 夏 回 族 自 治 区 的 悠 久 历 史 、 地 区 民 族 文 化 和 民 族 文 化 精 粹 、文 学 艺 术 、 书 画 艺 术 、 书 画 名 人 及 其 优 秀 作 品 ， 宁 夏 地 理 、 环 境 概 貌 描 述 、 图片 说 明 ， 宁 夏 风 景 名 胜 描 绘 ， 宁 夏 经 济 状 况 和 数 据 说 明 ， 宁 夏 所 辖 城 市 面 貌 ，宁 夏 特 产 ； 用 图 片 回 顾 宁 夏 悠 久 的 历 史 ， 再 现 解 放 宁 夏 历 史 ， 展 示 宁 夏 回 族 自治 区 书 画 名 人 及 其 优 秀 作 品 ， 展 现 现 代 经 济 发 展 背

20、 景 下 的 城 市 景 观 ； 用Flash 特 效 相 册 播 放 宁 夏 著 名 风 景 名 胜 区 的 自 然 人 文 景 观 ； 用 Javascript语 言 编 制 多 图 片 左 移 特 效 及 多 图 片 自 动 翻 页 特 效 ， 展 示 宁 夏 所 辖 城 市 面 貌 和 繁华 的 景 象 ； 用 视 频 及 Javascript 语 言 编 制 多 图 片 自 动 翻 页 特 效 ， 展 现 民 族文 化 、 风 情 。6- 3.结 构 布 局版 面 指 的 是 浏 览 器 看 到 的 完 整 的 一 个 页 面 ， 就 象 传 统 的 报 刊 杂 志 编 辑 一 样

21、，我 们 将 网 页 看 作 一 张 报 纸 ， 一 本 杂 志 来 进 行 排 版 布 局 。 虽 然 动 态 网 页 技 术 的 发展 使 得 我 们 开 始 趋 向 于 学 习 场 景 编 剧 ， 但 是 固 定 的 网 页 版 面 设 计 基 础 依 然 是 必须 的 。 它 们 的 基 本 原 理 是 共 通 的 。本 网 站 的 主 页 和 绝 大 部 分 页 面 采 用 “三 ”字 型 结 构 布 局 ， 其 中 顶 部 、 底部 链 接 样 式 ， 以 便 统 一 协 调 。 部 分 子 页 面 采 用 “T”字 型 、 “ ”型 、 标 题正 文 型 、 封 面 型 布 局

22、， 以 配 合 特 效 页 面 设 计 。布 局 ， 就 是 以 最 适 合 浏 览 的 方 式 将 图 片 和 文 字 排 放 在 页 面 的 不 同 位 置 。 本次 设 计 ， 利 用 表 格 布 局 页 面 。 由 于 表 格 定 位 方 便 ， 在 页 面 的 布 局 中 有 很 大 的 用处 ， 浏 览 器 在 下 载 表 格 时 ， 将 表 格 中 的 所 有 内 容 （ 包 括 图 像 ） 都 下 载 完 毕 后 才显 示 。 如 果 一 个 页 面 有 很 好 的 上 下 结 构 ， 就 分 成 几 个 上 下 并 列 的 表 格 ， 而 不 把整 个 页 面 中 的 所 有

23、 内 容 都 放 在 一 个 表 格 中 ， 这 样 可 以 加 快 浏 览 速 度 ， 减 少 等 待时 间 ， 如 宁 夏 特 产 介 绍 ， ； 如 果 版 面 是 大 块 内 容 ， 就 使 用 较 粗 的 表 格 ， 即 行 列数 不 用 太 多 ， 如 宁 夏 人 口 状 况 简 介 ； 如 果 页 面 内 容 比 较 细 碎 ， 就 使 用 较 细 的 表格 ， 也 可 使 用 嵌 套 表 格 ， 即 表 格 单 元 的 内 容 是 另 一 个 表 格 ， 如 主 页 ， 其 中 的“宁 夏 简 介 ”、 地 图 “宁 夏 特 色 ”等 都 是 不 同 的 内 容 ， 且 内 容

24、 较 多 ， 因 此 ，使 用 嵌 套 表 格 。4.色 彩 搭 配网 站 给 人 的 第 一 印 象 来 自 视 觉 冲 击 ， 确 定 网 站 的 标 准 色 彩 是 相 当 重 要 的 一步 。 不 同 的 色 彩 搭 配 产 生 不 同 的 效 果 ， 并 可 能 影 响 到 访 问 者 的 情 绪 。 “标准 色 彩 ”是 指 能 体 现 网 站 型 象 和 延 伸 内 涵 的 色 彩 。 彩 色 页 面 如 同 五 彩 缤 纷 的大 自 然 ， 能 给 人 美 的 享 受 ， 因 此 上 色 彩 搭 配 必 须 得 当 。绿 色 是 具 有 黄 色 和 蓝 色 两 种 成 份 的

25、色 。 在 绿 色 中 ， 将 黄 色 的 扩 张 感 和 蓝 色的 收 缩 感 相 中 庸 ， 将 黄 色 的 温 暖 感 与 蓝 色 的 寒 冷 感 相 抵 消 。 这 样 使 得 绿 色 的 性格 最 为 平 和 、 安 稳 。 是 一 种 柔 顺 、 恬 静 、 潢 足 、 优 美 的 色 。 同 时 ， 宁 夏 回族 自 治 区 是 具 有 民 族 特 色 的 地 区 ， 绿 色 是 重 要 的 色 彩 基 调 ， 让 人 欣 赏 后 油 然 而生 一 种 亲 切 之 感 ， 因 此 ， 以 一 幅 绿 色 为 基 调 的 大 型 民 族 特 色 风 情 的 图 片 ， 辅 以Fla

26、sh 动 画 点 缀 ， 作 为 页 面 顶 部 主 题 。 在 二 级 、 三 级 引 用 。7- 第三章 网页内容简介3.1 网页功能简介本 网 页 使 用 超 链 接 ， 即 把 一 个 网 页 与 一 个 网 页 连 接 起 来 ， 能 够 实 现 在“IE”浏 览 器 中 快 速 、 全 面 地 展 示 宁 夏 回 族 自 治 区 的 悠 久 历 史 、 地 区 民 族 文化 和 民 族 文 化 精 粹 、 文 学 艺 术 、 书 画 艺 术 、 书 画 名 人 及 其 优 秀 作 品 ， 宁 夏 地 理 、环 境 概 貌 、 风 景 名 胜 、 人 文 景 观 ， 宁 夏 经 济

27、状 况 、 城 市 面 貌 、 宁 夏 特 产 等 等 现代 发 展 成 就 。3.2 网页主要功能描述本 网 站 分 成 多 层 链 接 关 系 ， 主 要 实 现 如 下 功 能 ：1、 简 介 宁 夏 回 族 自 治 区 的 基 本 情 况 ， 宁 夏 回 族 自 治 区 的 政 区 地 图 ， 宁 夏特 色 总 览 。2、 展 示 宁 夏 回 族 自 治 区 的 悠 久 历 史 ， 历 史 来 源 和 足 迹 ， 再 现 解 放 宁 夏 历史 。3、 介 绍 宁 夏 回 族 自 治 区 的 自 然 生 态 环 境 ， 著 名 风 景 名 胜 区 “两 沙 一 景 ”沙 湖 、 沙 坡

28、头 的 自 然 景 观 。4、 介 绍 宁 夏 回 族 自 治 区 九 大 文 化 、 宁 夏 文 化 、 宁 夏 文 学 及 作 品 欣 赏 、 宁夏 书 画 艺 术 及 优 秀 作 品 。5、 展 示 宁 夏 回 族 自 治 区 现 辖 五 大 城 市 的 繁 荣 景 象 ， 着 重 展 示 首 府 银 川 市的 魅 力 。6、 介 绍 宁 夏 回 族 自 治 区 民 族 构 成 ， 展 示 回 族 特 色 文 化 、 民 族 风 情 。7、 介 绍 宁 夏 回 族 自 治 区 人 口 状 况 。8、 介 绍 了 宁 夏 回 族 自 治 区 的 地 理 概 况 ， 展 示 “两 山 一 河

29、 ”、 “塞 上 湖 城 ”。9、 介 绍 了 宁 夏 回 族 自 治 区 的 2009 年 经 济 统 计 数 据 ， 展 现 经 济 蓬 勃 发 展势 头 。10、 介 绍 了 宁 夏 回 族 自 治 区 特 产 “五 宝 ”和 其 它 产 品 、 食 品 。8- 3.3 网页的浏览本 网 页 在 任 何 Windows 环 境 下 均 可 以 打 开 浏 览 ， 只 要 双 击“zoujinningxia”文 件 夹 下 的 主 页 index.html， 便 可 打 开 主 页 “走 进 宁 夏 ”， 点 击 其 中 的 任 意 一 个 超 级 链 接 ， 便 可 随 心 所 欲 地

30、去 观 赏 宁 夏 回 族 自 治 区 文 化特 色 、 文 化 作 品 、 民 族 文 化 风 采 、 风 俗 民 情 ， 观 赏 几 大 城 市 美 丽 的 自 然 景 观 和人 文 景 观 ， 欣 赏 名 胜 风 景 等 ， 特 别 是 “两 沙 一 景 ”沙 湖 、 沙 坡 头 的 自 然景 观 ， 由 于 采 用 了 特 效 flash 相 册 ， 浏 览 时 可 以 全 屏 欣 赏 美 景 。9- 第四章 网页设计4.1 网页结构总图网 站 的 链 接 结 构 是 指 页 面 之 间 相 互 链 接 的 拓 扑 结 构 。 它 建 立 在 目 录 结 构 基础 之 上 ， 但 可

31、以 跨 越 目 录 。 形 象 的 说 ： 每 个 页 面 都 是 一 个 固 定 点 ， 链 接 则 是 在两 个 固 定 点 之 间 的 连 线 。 一 个 点 可 以 和 一 个 点 连 接 ， 也 可 以 和 多 个 点 连 接 。 更重 要 的 是 ， 这 些 点 并 不 是 分 布 在 一 个 平 面 上 ， 而 是 存 在 于 一 个 立 体 的 空 间 中 。网 站 的 链 接 结 构 的 目 的 在 于 ： 用 最 少 的 链 接 ， 使 得 浏 览 最 有 效 率 。 通 过 对网 站 功 能 、 结 构 、 布 局 、 内 容 等 关 键 要 素 的 合 理 设 计 ，

32、使 得 网 站 的 功 能 和 表 现形 式 达 到 最 优 效 果 。根 据 网 页 功 能 的 要 求 ， 本 网 站 分 为 十 个 主 页 面 ， 其 中 ， “历 史 ”、 “文 化 ”、 “城 市 ”等 主 页 面 下 又 有 二 级 、 三 级 子 页 面 。 结 构 如 下 图 所 示 。走进宁夏主页 环境 历史 文化 城市 民族 人口 地理 特产自然环境宁夏名胜解放 九大文化宁夏花儿宁夏文学宁夏书画银川市石嘴山市吴忠市中卫市固原市经济10- 4.2 各网页模块的组成一 般 的 ， 建 立 网 站 的 链 接 结 构 有 两 种 基 本 方 式 ：1.树 状 链 接 结 构 （

33、 一 对 一 ） 。 类 似 DOS 的 目 录 结 构 ， 首 页 链 接 指 向 一 级 页面 ， 一 级 页 面 链 接 指 向 二 级 页 面 。 立 体 结 构 看 起 来 就 象 蒲 公 英 。 这 样 的 链 接 结构 浏 览 时 ， 一 级 级 进 入 ， 一 级 级 退 出 。 优 点 是 条 理 清 晰 ， 访 问 者 明 确 知 道 自 己在 什 么 位 置 ， 不 会 “迷 “路 。 缺 点 是 浏 览 效 率 低 ， 一 个 栏 目 下 的 子 页 面 到 另 一个 栏 目 下 的 子 页 面 ， 必 须 绕 经 首 页 。2.星 状 链 接 结 构 （ 一 对 多

34、） 。 类 似 网 络 服 务 器 的 链 接 ， 每 个 页 面 相 互 之 间都 建 立 有 链 接 。 立 体 结 构 象 东 方 明 珠 电 视 塔 上 的 钢 球 。 这 种 链 接 结 构 的 优 点 是浏 览 方 便 ， 随 时 可 以 到 达 自 己 喜 欢 的 页 面 。 缺 点 是 链 接 太 多 ， 容 易 使 浏 览 者 迷路 ， 搞 不 清 自 己 在 什 么 位 置 ， 看 了 多 少 内 容 。这 两 种 基 本 结 构 都 只 是 理 想 方 式 ， 在 实 际 的 网 站 设 计 中 ， 总 是 将 这 两 种 结构 混 合 起 来 使 用 。 我 希 望 浏

35、 览 者 既 可 以 方 便 快 速 的 达 到 自 己 需 要 的 页 面 ， 又 可以 清 晰 的 知 道 自 己 的 位 置 。 所 以 ， 本 网 站 采 用 的 办 法 是 ： 首 页 和 一 级 页 面 之 间用 星 状 链 接 结 构 ， 一 级 和 二 级 页 面 之 间 用 树 状 链 接 结 构 。1.主 页（ 1） 宁 夏 介 绍 ： 历 史 、 文 化 、 人 口 、 环 境 、 民 族 、 城 市 、 经 济 、 地 理 、特 产 ； 政 区 地 图 。（ 2） 宁 夏 特 色 ： “五 宝 ”、 特 色 食 品 、 产 品 、 民 族 特 色 建 筑 、 民 族 风

36、 情 。主页宁夏介绍 宁夏特色视频介绍 总貌导航 宁夏五宝 特色食品 特色产品 特色建筑 其它特色地图文字11- 2.历 史悠久的历史和历史发展轨迹；老照片再现宁夏解放。3.环 境自然生态环境；风景名胜图片。4.文 化九大文化特征的形成；宁夏民族特色文化精粹花儿；宁夏文学状况介绍、作品欣赏；宁夏书画人物、作品。文化九大文化 宁夏花儿 宁夏文学 宁夏书画5.城 市宁夏区辖城市概况；银川市、美丽的银川图片展；石嘴山市；吴忠市；中卫市；固原市。区辖城市银川市 石嘴山市 吴忠市 中卫市 固原市6.民 族文字介绍、图片展示宁夏回族风情。7.人 口介绍宁夏回族自治区人口状况。8.地 理政区简图、文字介绍宁

37、夏回族自治区地理概况。9.经 济引用统计局数据，展现宁夏经济发展势头。10.特 产12- 图片结合文字介绍，推出宁夏特色产品等。4.3 网页制作环境1、此网页运行环境为 Windows98/2000/XP2、此网页主要利用 Dreamweaver8.0 作为开发工具，Dreamweaver 是一款集网页制作和管理网站于一身的所见即所得网页编辑器，它是一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它的主要优点是制作效率高,网站管理非常灵活方便，视觉化编辑与原始码编辑同步的设计。使用 HTML 语言和JAVASCRIPT

38、 语言编写，系统采用了 HTML 语言编写程序，HTML 语言是超文本标记语言（HyperTextMarkupLanguage） ，HTML 语言使用一些约定的符号对各种文件进行标记，利用特定的标记产生各种特定的效果，比如控制超文本显示的字体、字号、颜色、位置，加入表格，插入图像、声音、超链接等。这些标记的文件存放在 WEB 服务器上，通过国际互联网供读者阅读。4.4 网页设计思路网站设计优化的具体表现是：既要网页本身具有丰富的内容，且符合美学原理，还要以用户需求为导向，设计方便的网站导航，网页下载速度尽可能快，网页布局合理并且适合保存、打印、转发，网站信息丰富、有效，有助于用户产生亲切感、信

39、任感。同时，网站还要有自己的“风格” 。风格是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的 CI（标志，色彩，字体，标语） ，版面布局，浏览方式，交互性，文字，语气，内容价值观，意义内涵，站点荣誉等等诸多因素。风格是独特的，是站点不同与其他网站的地方。或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的。本次设计，绝大多数网页采用链接样式，达到和主页页面统一的风格来制作样式统一的网站，部分子页面采用其它如“T”字型、 “”型、标题正文型、封面型布局，以配合特效页面设计，即追求“创意” 。创意是将现有的要素重新组合。创意是传达信息的一种特别方式。

40、13- 设计主要依靠 Dreamweaver8.0 进行可视化编程，达到快速高效完成设计的目的。Dreamweaver8.0 提供了两种搭建站点的方法，一是使用向导完成，二是使用高级设定完成。本站点网页采用第一种方法创建站点，然后创建网站首页，再根据设计的结构，创建子页面，编制二至三层链接，实现网站的设计功能。根据本次设计选题的背景、主题思想，将本次设计的重点内容确定为：主页设计、宁夏历史、宁夏文化、自然生态环境、城市等几个部分的设计。14- 第五章 网页制作5.1 素材的加工制作网页制作之前要收集好相关的素材，对收集的素材进行分类管理，如可分为：文字素材、图像素材、视频素材、动画素材等。并且

41、对素材进行加工处理，以适合网站主题。如果没有合适的素材，还要自己用相关软件进行网页素材制作。一个好的网页除了需要有好的内容外还要有好的美工，网页元素的制作是美工工作的重点。在设计初期，从一些相关书籍、网络媒体、同事朋友处获得了足够多的素材，有文字、图片、flash 动画、视频、音频等，并对这些素材进行精心的挑选，使用相应的软件进行加工制作，以适应具体网页制作的要求。1.文字利用最常用的文字编辑处理软件 Word 2003，对文字资料进行重整、修改或添加，清除格式以便在 Dreamweaver 的设计视图中输入。2.图片根据设计构思，图片分类，用 ACDSee 分别进行调整大小，使同一使用区域的

42、图片尽量大小一致；再用 Potoshop 图像处理软件分别调整其色相、饱和度等参数以满足色彩需要。用 Potoshop 图像处理软件对一些图片进行“减淡” ，作为部分页面的背景图像。3. 制作网页顶部图形根据网站的主题和精神，精心挑选了六张图片：“花儿” 、 “清真寺” 、 “大漠风光” 、 “西夏王陵” 、 “烟花” 、 “民族少女” ， 在 Potoshop CS3 中用图层合并、遮罩、羽化边缘、填充、滤镜等方法或工具，制作出以绿、蓝为主色调的网页顶部图片，彰显民族特色，表明网页主题思想。再嵌入标题文字 “走进宁夏浓郁的回乡风情” 、 “Welcome to ningxia”欢迎问候词语，

43、增进主题，建立友好界面。根据网页设计的结构，在图片中横排植入“主页” 、 “环境” 、 “历史”等十大模块描述文字作为网站的简约导航条，备用。15- 5.2 网站的建立1.搭建站点利用 Dreamweaver8.0 的站点建立向导建立名为“zoujinningxia”的站点，并对站点进行初步设置。2.站点目录网站的目录是指建立网站时创建的目录。例如：建立了根目录和 images 子目录。目录结构的好坏，对浏览者来说并没有什么太大的感受，但是对于站点本身的管理维护，内容未来的扩充和移植有着重要的影响。（1）根目录下建立 images 文件夹，以存放所有图片素材。（2）根目录下建立 media 文

44、件夹，以存放所有视频素材。（3）根目录下建立 Flash 文件夹，以存放特效动画素材。（4）根目录下建立 sound 文件夹，以存放所有音频文件。（5）根目录下建立 js 文件夹，以存放脚本语言 Javascript 文件。（6）根目录下建立 index.html，作为主页。（7）根据设计思路、网站结构，依次建立二级、三级子页面。5.3 网页设计当确定了栏目和版块、确定网站的目录结构和链接结构、确定网站的整体风格创意设计、获得并制作了足够丰富的素材，就可以着手进行页面设计了。根据本次设计选题的背景、主题思想，将本次设计的重点内容确定为：主页设计、宁夏历史、宁夏文化、自然生态环境、城市等几个部分

45、。5.3.1 主页设计网站的首页是一个网站的门面。一个优秀的网站必须要有一个漂亮的首页，首页必须要有吸引力。首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对站点有一个整体的感觉，是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，成为首页设计必须考虑的核心问题之一。主页为 index.html。按照设计构思，以“三”字型布局，创建表格。16- （1）. 顶部图形背景加透明 flash 特效的实现人们通常把网页 LOGO 叫做“网眼” ，顾名思义，就是网站的眼睛，是网站首页设计的第一步。画龙尚需点睛，网站更是如此，不管是新闻网站还是商业网站，LOGO 都是眼睛，也是灵魂

46、，通过 LOGO 的展示，可以把网站的宗旨和理念有力地予以诠释。同样，网页顶部图形能够带给浏览者第一视觉冲击，一个设计精巧的网页顶部，能给浏览者带来惊喜，能够迅速地吸引浏览者的眼球，能在浏览者的心里留下深深的印记。在之前的素材加工阶段，已经设计制作好了顶部图形，接下来再精心挑选了一款网络下载而来的 flash 透明动画小素材“放射的星光” ，利用特效代码置于图形之上，预览，调整，保存，一款比较新颖和切合网站主题的顶部图形便完成了。（2）.导航每一个访问者第一次进入一个网站的时候，最先关注的是这个网站是做什么的。网站要给出它所提供的服务的概貌，既要明确内容：我能在这里找到什么，也要包括功能：我能

47、做什么，还有这些服务是如何组织的。这项工作通常由导航来处理。导航是网站的通道，因此制作导航是必要的，便于浏览者随心所欲地浏览。顶部图片中的导航文字是植入其中的，也就是说，它们是图片的一部分，不能直接设置链接。因此，沿文字依次创建十个“热点” ，设置相应的链接页面，一个简单的导航就完成了。（3）.显示日期应用 Javascript 语言编写的程序，具有时间显示功能。但顶部图片中是不能直接插入 Javascript 语言程序的。因此，使用了“层” 。层是一种定位技术，Dreamweaver 中可将其进行可视化操作。文本、图形图像、表格等元素只能固定其位置而不能互相叠加在一起。使用层功能，可以将其放

48、置在网页文档的任意位置。创建一个层，拖动到顶部图片合适位置，在“代码视图”中插入一段显示当前日期的 Javascript 程序，预览，调整，直至满意。顶部另存为 zjnx_top.html。17- （4）.网页底部基本上互联网上的所有网站首页的底部都有各种形式的版权声明，构成了最为常见的网页底部。鉴于本次设计不牵扯发布网站等内容，我的网页底部设计极为简单：水平线下插入一幅绿色的手拉手象征团结互助的小图标，右边键入个人邮箱地址即成。底部另存为 bottom.htm。（5）.创建层叠样式CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表” ） ，是一组格式设置规

49、则，用于控制 Web 页面的外观。通过使用 CSS 样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在 HTML 文档中，而用于定义表现形式的 CSS 规则则存放在另一个文件中或 HTML 文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使 HTML 文档代码更加简练，缩短浏览器的加载时间。为了简便和网页风格的统一，在完成上述设计制作后，定义了链接样式：css.css，存放于根目录下，主要内容是网页顶部 zjnx_top.html 和网页底部bottom.htm，便于子网页的引用。（6）宁夏介绍将加工好的正文图片根据需要创建九个“热点” ，设置链接至相应的子页面。文字“宁夏介绍”创建热点，链接至“塞上江南 神奇宁夏”子页面（nxjieshao.html） ，该页将播放一段由宁夏旅游局录制的视频：“宁夏国际旅游节介绍片” ，以诗词歌咏隆重介绍神奇的宁夏。正文右上，插入宁夏回族自治区政区简图（五大城市）和文字简介，其中，在政区简图上，依据图形，绘制多边形热点，分别链接五大城市的页面（yinchuan.html、shizuishan.html、wuzhong.h