昆明理工大学网页设计实训报告

《昆明理工大学网页设计实训报告》由会员分享，可在线阅读，更多相关《昆明理工大学网页设计实训报告（16页珍藏版）》请在金锄头文库上搜索。

1、计 算 机 基 础 操 作 实 验 报 告1实 训 报 告课 程 名 称 多 媒 体 技 术专 业 班 级 电 信1311学 号2013118504111学 生 姓 名 杨 幼 周指 导 教 师 殷 群2016年12月16日实 训 成 绩批 阅 教 师日 期网 页 设 计 与 制 作2一 .网 页 设 计 方 向 及 内 容 的 选 定我 的 家 乡 位 于 云 南 省 昆 明 市 ， 这 是 一 个 四 季 如 春 ， 天 空 蔚 蓝 的 城 市 ， 并 且 昆 明 有 历 史 文 化 古 迹 ， 有 特 色鲜 明 的 城 市 地 标 ， 还 有 美 味 可 口 的 独 特 美 食 。 所

2、以 我 选 择 昆 明 作 为 网 页 的 主 体 内 容 ， 通 过 介 绍 昆 明 的 概 况 ，首 先 让 旅 行 者 有 个 初 步 认 识 ， 然 后 通 过 昆 明 的 美 食 ， 地 标 ， 历 史 等 依 次 介 绍 昆 明 的 旅 游 优 势 。 希 望 通 过 该 网页 设 计 能 够 大 体 的 反 映 出 昆 明 的 特 点 ， 并 且 为 旅 行 者 提 供 一 个 旅 行 的 参 考 。二 .网 页 设 计 中 网 站 的 风 格 选 择通 过 搜 集 相 关 资 料 ， 网 页 设 计 的 风 格 分 类 大 概 可 分 为 以 下 几 类 。1.时 尚 类适 用

3、 于 精 品 、 时 尚 、 饭 店 旅 馆 、 服 饰 、 婚 纱 等 产 业 。 需 要 特 别 注 重 视 觉 效 果 的 行 业 别 。 时 尚 风 格 类 型的 设 计 特 色 呈 现 出 简 约 、 精 致 、 高 质 感 。 线 条 的 运 用 上 大 致 用 弧 度 表 现 ， 比 较 少 使 用 线 条 。 另 外 照 片 的 运 用上 建 议 使 用 高 解 析 度 、 饱 和 度 高 、 鲜 明 对 比 色 为 主 ， 较 能 表 现 出 高 质 感 的 感 觉 。2.科 技 类顾 名 思 义 ， 此 类 型 一 般 适 用 于 高 科 技 、 机 械 、 电 子 、 多

4、 媒 体 等 产 业 。 科 技 类 型 大 多 使 用 大 量 动 画 特 效 、多 媒 体 音 效 及 线 条 并 结 合 主 打 商 品 或 服 务 ， 来 传 达 企 业 之 高 科 技 技 术 和 专 业 度 。3.商 业 类商 业 网 站 制 作 适 用 于 任 何 类 型 的 企 业 ， 为 目 前 最 多 数 类 型 的 网 站 。 此 类 型 网 站 的 风 格 偏 向 简 单 且 网 站 主题 明 确 为 主 ， 不 做 过 度 华 丽 的 版 面 设 计 或 使 用 过 多 的 动 画 ， 以 增 加 网 站 浏 览 速 度 进 而 提 高 搜 寻 排 名 。4.古 典

5、风商 用 于 企 业 形 象 或 主 要 商 品 风 格 偏 向 中 国 风 或 欧 洲 古 典 风 的 企 业 。 这 种 类 型 的 网 站 设 计 将 以 复 古 风 格 结合 的 花 纹 底 图 或 图 腾 效 果 来 表 现 柔 美 复 古 感 。 若 是 属 于 中 国 风 的 网 站 ， 通 常 在 设 计 上 会 使 用 一 些 毛 笔 字 和 印章 烙 印 的 图 片 来 传 达 中 国 文 化 。5.大 众 风适 用 于 主 要 客 群 为 年 轻 族 群 的 企 业 。 因 大 众 风 格 的 网 站 在 设 计 上 会 较 为 活 泼 有 创 意 ， 使 用 大 量 几

6、 何 图 形构 成 鲜 明 活 泼 的 版 面 ， 因 此 在 颜 色 的 使 用 上 也 会 较 多 元 化 。6.休 闲 风适 用 于 休 闲 农 场 、 观 光 景 点 、 户 外 餐 厅 等 企 业 。 此 类 型 的 网 页 设 计 大 多 会 使 用 户 外 的 素 材 ， 如 蓝 天 白云 、 天 空 、 树 木 、 绿 地 等 等 来 营 造 出 休 闲 的 风 格 。计 算 机 基 础 操 作 实 验 报 告37.活 泼 型适 用 于 主 题 乐 园 、 童 装 、 学 校 等 客 群 以 幼 童 或 年 轻 人 为 主 的 企 业 。根 据 相 关 的 网 站 主 题 ，

7、确 定 相 应 的 风 格 。 我 所 要 设 计 的 网 页 是 介 绍 旅 游 为 主 的 地 方 性 网 页 ， 所 以 选 用 的是 “ 休 闲 风 ” 的 网 页 设 计 风 格 。 按 照 “ 休 闲 风 ” 的 一 些 要 素 ， 在 选 择 图 片 上 就 刻 意 的 选 择 了 一 些 符 合 “ 休 闲风 ” 风 格 的 图 片 。三 .网 页 布 局 的 确 定通 过 搜 集 相 关 资 料 ， 网 页 设 计 的 风 格 分 类 大 概 可 分 为 以 下 几 类 。1.“ 国 ” 字 型也 可 以 称 为 “ 同 ” 字 型 ， 是 一 些 大 型 网 站 所 喜 欢

8、 的 类 型 ， 即 最 上 面 是 网 站 的 标 题 以 及 横 幅 广 告 条 ， 接 下来 就 是 网 站 的 主 要 内 容 ， 左 右 分 列 一 些 两 小 条 内 容 ， 中 间 是 主 要 部 分 ， 与 左 右 一 起 罗 列 到 底 ， 最 下 面 是 网 站的 一 些 基 本 信 息 、 联 系 方 式 、 版 权 声 明 等 。 这 种 结 构 是 我 们 在 网 上 见 到 的 差 不 多 最 多 的 一 种 结 构 类 型 。2.拐 角 型这 种 结 构 与 上 一 种 其 实 只 是 形 式 上 的 区 别 ， 其 实 是 很 相 近 的 ， 上 面 是 标 题

9、 及 广 告 横 幅 ， 接 下 来 的 左 侧 是一 窄 列 链 接 等 ， 右 列 是 很 宽 的 正 文 ， 下 面 也 是 一 些 网 站 的 辅 助 信 息 。 在 这 种 类 型 中 ， 一 种 很 常 见 的 类 型 是 最上 面 是 标 题 及 广 告 ， 左 侧 是 导 航 链 接 。3.标 题 正 文 型这 种 类 型 即 最 上 面 是 标 题 或 类 似 的 一 些 东 西 ， 下 面 是 正 文 ， 比 如 一 些 文 章 页 面 或 注 册 页 面 等 就 是 这 种 类 。4.左 右 框 架 型这 是 一 种 左 右 为 分 别 两 页 的 框 架 结 构 ， 一

10、 般 左 面 是 导 航 链 接 ， 有 时 最 上 面 会 有 一 个 小 的 标 题 或 标 致 ， 右面 是 正 文 。 我 们 见 到 的 大 部 分 的 大 型 论 坛 都 是 这 种 结 构 的 ， 有 一 些 企 业 网 站 也 喜 欢 采 用 。 这 种 类 型 结 构 非 常清 晰 ， 一 目 了 然 。5.上 下 框 架 型与 上 面 类 似 ， 区 别 仅 仅 在 于 是 一 种 上 下 分 为 两 页 的 框 架 。6.综 合 框 架 型上 页 两 种 结 构 的 结 合 ， 相 对 复 杂 的 一 种 框 架 结 构 ， 较 为 常 见 的 是 类 似 于 “ 拐 角

11、 型 ” 结 构 的 ， 只 是 采 用 了网 页 设 计 与 制 作4框 架 结 构 。7.封 面 型这 种 类 型 基 本 上 是 出 现 在 一 些 网 站 的 首 页 ， 大 部 分 为 一 些 精 美 的 平 面 设 计 结 合 一 些 小 的 动 画 ， 放 上 几 个简 单 的 链 接 或 者 仅 是 一 个 “ 进 入 ” 的 链 接 甚 至 直 接 在 首 页 的 图 片 上 做 链 接 而 没 有 任 何 提 示 。 这 种 类 型 大 部 分出 现 在 企 业 网 站 和 个 人 主 页 ， 如 果 说 处 理 的 好 ， 会 给 人 带 来 赏 心 悦 目 的 感 觉

12、。8.Flash型其 实 这 与 封 面 型 结 构 是 类 似 的 ， 只 是 这 种 类 型 采 用 了 目 前 非 常 游 戏 行 的 Flash， 与 封 面 型 不 同 的 是 ， 由于 Flash强 大 的 功 能 ， 页 面 所 表 达 的 信 息 更 丰 富 ， 其 视 觉 效 果 及 听 觉 效 果 如 果 处 理 得 当 ， 绝 不 差 于 传 统 的 多媒 体 。9.综 合 变 化 型即 上 面 几 种 类 型 的 结 合 与 变 化 。本 次 设 计 选 用 的 结 构 较 为 简 洁 ， 但 是 简 洁 的 结 构 能 直 观 的 反 应 出 网 页 主 题 ， 并

13、且 方 便 使 用 者 使 用 ， 不 存在 一 些 使 用 复 杂 的 问 题 。计 算 机 基 础 操 作 实 验 报 告5四 .多 媒 体 素 材 的 选 用网 页 设 计 的 素 材 ， 根 据 具 体 的 布 局 ， 以 及 所 需 要 表 现 的 内 容 ， 根 据 自 己 的 生 活 经 验 和 结 合 网 络 上 的 评 分 ，选 定 了 一 些 特 色 鲜 明 的 素 材 。 例 如 小 锅 米 线 ， 昆 明 桥 香 园 是 最 著 名 的 小 锅 米 线 店 之 一 ， 大 观 楼 景 点 ， 也 是 中国 “ 四 大 名 楼 ” 之 一 ， 总 之 对 于 昆 明 最

14、有 表 现 力 的 旅 游 文 化 进 行 了 简 单 介 绍 。 本 次 设 计 采 集 了 大 量 图 片 ， 然后 经 过 网 页 实 时 视 图 的 比 较 ， 最 终 选 定 了 表 现 效 果 好 的 图 片 。五 .处 理 网 页 设 计 素 材一 些 图 片 可 能 会 存 在 清 晰 度 ， 亮 度 ， 对 比 度 的 不 合 适 问 题 ， 通 过 Photoshop CS2软 件 进 行 适 当 调 整 ， 使图 片 颜 色 更 加 亮 丽 ， 富 有 表 现 力 。网 页 设 计 与 制 作6六 .网 页 设 计 效 果 图1. 主 页计 算 机 基 础 操 作 实 验

15、 报 告72. 美 食网 页 设 计 与 制 作83. 购 物计 算 机 基 础 操 作 实 验 报 告94. 住 宿5. 风 景网 页 设 计 与 制 作1 06. 地 图7. 滚 动 图 片计 算 机 基 础 操 作 实 验 报 告1 1七 .关 键 性 代 码1.主 页简 介 网 页 设 计 与 制 作1 2昆 明 旅 游 介 绍 首 页 美 食 购 物 住 宿 风 景 地 图 昆 明 ， 享 “ 春 城 ” 之 美 誉 ， 云 南 省 会 ， 中 国 面 向 东 南 亚 、 南 亚 开 放 的 门 户 城 市 ， 国 家级 历 史 文 化 名 城 ， 我 国 重 要 的 旅 游 、 商

16、 贸 城 市 ， 西 部 地 区 重 要 的 中 心 城 市 之 一 。 昆 明 地 处 云 贵 高 原 中 部 ， 北 与 凉 山 彝 族 自 治 州 相 连 ， 西 南 与 玉 溪 市 、 东 南 与 红 河 哈 尼族 彝 族 自 治 州 毗 邻 ， 西 与 楚 雄 彝 族 自 治 州 接 壤 ， 东 与 曲 靖 市 交 界 ， 是 滇 中 城 市 群 的 核 心 圈 、 亚 洲 5 小 时 航 空圈 的 中 心 ， 国 家 一 级 物 流 园 区 布 局 城 市 之 一 。 昆 明 市 为 山 原 地 貌 。 地 势 大 致 北 高 南 低 ， 多 溶 洞 和 溶 岩 地 貌 ，溶 岩 盆 地 有 石 林 坝 子 。 属 北 亚 热 带 低 纬 高 原 山 地 季 风 气 候 。 年 平 均 气 温 1 6 .5 ， 年 均 降 雨 量 1 4 5 0 毫 米 ， 无霜 期 2 7 8 天 ， 气 候 宜 人 。 2.美 食豌 豆 粉 计