网站设计方案(修改)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.2 目标用户定位
确定了站点实现的目标之后，需要确定站点的浏览客户。创建 世界上每个人都能使用的 Web 站点是不可能的。人们的兴趣、爱好 不 同 ，使 用 不 同 的 浏 览 器 ，以 不 同 的 速 度 连 接 ，这 些 因 素 都 会 影 响 站 点 的 使 用 。因 此 需 要 确 定 目 标 用 户 ，根 据 用 户 的 特 点 来 设 计 站 点 风 格 。
3．网页风格和布局设计
3.1 网站形象设计
5
包 括 设 计 网 站 标 志 、设 计 网 站 的 标 准 色 彩 和 网 站 采 用 的 标 准 字 体 等等。例如：网站全名及 logo 标志创意。
3.2 网站的界面风格
如 主 、从 色 调 的 搭 配（ 即 采 用 什 么 色 彩 为 基 调 ，配 以 相 关 的 其 他 色 彩 ， 与 企 业 整 体 形 象 一 致 ）， 页 面 导 航 设 计 和 页 面 视 觉 构 成 等 等 。
XX 网站设计方案
（模板）
专业班级： 姓 名： 学 号： 指导教师： 日 期：
目录 1.网站的目标规划 2.网站的内容规划 3.网页的风格和布局设计 4.网站的资料收集和准备 5.网站制作进度安排 6.网站建设的心得体会和扩展性分析
2
1．网站的目标规划
1.1 网站主题策划
通过网络就某个主题搜索资料，题材不限，要求有个人特色、 新 颖 和 有 吸 引 力 ，并 对 网 站 作 简 单 的 介 绍 如 主 题 是 什 么 ？ 分 那 几 个 栏 目，每个栏目的特色和主要内容是什么？
8
Library
库文件。
music
音乐、音频文件。
Te m p l a t e s 模 板 文 件 。
text
文字素材。
webpage_1 一 级 页 面 文 件 ， 该 文 件 夹 又 有 多 个 子 文 件 夹 ， 例 如
webpage_1_01。
webpage_2 二 级 页 面 文 件 ， 该 文 件 夹 又 有 多 个 子 文 件 夹 ， 例 如
参考专题：对计算机基础教育的看法，互动式教学的方式，网 上论坛，QQ 聊天论述等。也可以是其它的有兴趣的专题如：文学、 历史、科技、体育、旅游、生活、时尚等。
参 考 主 题 ：（ 1） 教 学 资 源 网 站 ；（ 2） 个 人 网 站 ；（ 3） 班 级 网 站 ； （ 4） 学 习 网 站 ；（ 5） 学 校 网 站 ；（ 6） 旅 游 网 站 ；（ 7） 公 司 网 站 ；（ 8） 体育网站。
注意：文件夹和文件的名称建议不要使用中文名，因为中文名 在 HTML 文档中容易生成乱码，导致链接产生错误。
表 2.2 网 站 的 目 录 结 构 及 其 存 放 的 文 件 类 型
文件夹名称
存放的文件类型
css
CSS 样 式 文 件 。
flash
动画文件、视频文件。
image
图像文件、照片。
js
外部脚本文件。
例 如 ：色 彩 搭 配 及 其 含 义（ 如 绿 色 + 金 黄 + 淡 白 ，体 现 优 雅 , 舒适的感觉）
3.3 网站的版面布局设计
采用何种方式的页面布局，在网页文字和图像等元素上如何平 衡 ，根 据 网 络 速 度 、阅 读 习 惯 等 采 用 了 什 么 技 术 方 案 来 解 决 。根 据 所 需 的 站 点 布 局 外 观 ，先 画 一 个 站 点 草 图 ，以 便 以 后 建 立 站 点 时 可 以 按 照它来操作。
……
一级栏目
首页 index.html
表 2.1 “ XX 企 业 网 站 ” 的 栏 目 结 构
二级栏目
三级栏目及内容页面
关 于 我 们 ： AboutUs.html
qyjj.html
……
fzlc.html
新 闻 中 心 ： News.html
Ne ws_h y.h tml
Ne ws_q y.h tml
4.3 flash 动画设计
网 站 中 的 动 画 最 好 能 突 出 主 题 ，起 到 画 龙 点 睛 之 功 效 。动 画 的 功 能 是 什 么 （ 企 业 展 示 还 是 产 品 展 示 ， 亦 或 其 他 … … ）。 使 用 的 地 方 ： 首页、二级页面或者广告栏等等。
4.4 建立库项目
4.2 准备各种图片及按钮
1.利用 Fireworks 或 Photoshop 量身定做本网站的 Logo 标志， Logo 标志要与本网站的主题相符，要有新意。
2.其 他 图 片 及 按 钮 。根 据 需 要 到 网 上 或 素 材 光 盘 中 搜 集 所 需 的 图 片和按钮、有些图片、按钮需要自己利用图像处理软件制作。例如： 需要制作那些图片，图片的尺寸等等。
可先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确 定 完 整 的 栏 目 和 内 容 的 层 次 结 构 ，本 网 站 的 系 统 结 构 图 如 下（ 示 例 ）：
3
关 于 我 们
企
发
业
展
简…
历
介
程
网站首页
新
产
联
闻
品
系
中
中
我
心
心
们
XX XX XX XX XX
行
企
业
业
新
新
闻
闻
Biblioteka Baidu
信信信信信 息息息息息
1.首 页 设 计 草 图 如 下 ：
Logo
Banner 导航栏
简单功能
功能列表 或
局部导航
主要内容
版权声明
2.栏 目 页 设 计 草 图 如 下 ：
6
3.4 网站的导航设计
设 计 站 点 导 航 时 ，应 考 虑 如 何 使 访 问 者 能 够 方 便 的 从 一 个 区 域 移 动 到 另 一 个 区 域 。具 体 考 虑 以 下 几 点 ：明 确“ 当 前 位 置 ”；导 航 方 便 ； 提供与网站管理员的联系方法。
……
产 品 中 心 ： Product.html
proinfo_xx.html
proinfo_xx.html
proinfo_xx.html
proinfo_xx.html
……
联 系 我 们 ： Contact.html
留 言 板 .html
……
产 品 论 坛 （ http://www.XXXbbs.com）
4．网站资料收集和准备
根据网站的栏目、内容设计，链接结构设计，首页的布局结构， 几个主要导航页面的布局结构，准备所需素材。
4.1 文本资料准备
准 备 大 量 网 页 中 所 需 的 文 字 资 料 ，可 以 从 各 类 网 站 、各 种 书 籍 中 搜集文字资料，然后制作成 word 文档或文本文件，注意各种文字资 料的文件名命名要科学合理，避免日后找不到所需的文本内容。
网页中经常用到的项目，例如版权区，可以事先定义为库项目， 以备制作网页时重复使用，提高工作效率。
5．网站制作进度安排
包括如何安排每一部分的进度和计划完成时间。
6．网站建设的心得体会和扩展性分析
6.1 心得体会
在网站建设中遇到了那些问题，如何解决？学习到了那些知识
7
等等。
6.2 扩展性分析
网站还可以添加那些模块，以及可以实现那些功能等等。
webpage_2_01。
other
其他类型的文件。
webstandby 备 用 页 面 、 备 用 素 材
index.html 主 页
2.网 站 链 接 结 构
网站的链接结构与目录结构不同，网站的目录结构指站点的文 件 存 放 结 构 ，一 般 只 有 设 计 人 员 可 以 直 接 看 到 ，而 网 站 的 链 接 结 构 指 网 站 通 过 页 面 之 间 的 联 系 表 现 的 结 构 ，浏 览 者 浏 览 网 站 能 够 观 察 到 这 种 结 构 。本 网 站 的 链 接 结 构 采 用“ 网 状 ”链 接 结 构 ，结 构 图 如 图 17-2 所示。
2．网站的内容规划
2.1 网站栏目结构设计
（一 般 企业 型 网站 应包 括：公司 简 介 、企业 动 态、产 品 介绍、客 户服 务 、联 系 方 式 、在 线 留 言 等 基 本 内 容 。更 多 内 容 如 ：常 见 问 题 、营 销 网 络 、 招 贤 纳 士 、 在 线 论 坛 、 英 文 版 等 等 。）
2.2 网站目录结构和链接结构设计
1.目 录 结 构 根据网站策划确定的栏目结构，创建站点目录，一个网站的目 录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确， 有 利 于 日 后 的 修 改 。“ XX 企 业 网 站 ” 的 目 录 结 构 ， 各 文 件 夹 的 所 存 放
4
文件类型如表 2.2 所示。
确定了站点实现的目标之后，需要确定站点的浏览客户。创建 世界上每个人都能使用的 Web 站点是不可能的。人们的兴趣、爱好 不 同 ，使 用 不 同 的 浏 览 器 ，以 不 同 的 速 度 连 接 ，这 些 因 素 都 会 影 响 站 点 的 使 用 。因 此 需 要 确 定 目 标 用 户 ，根 据 用 户 的 特 点 来 设 计 站 点 风 格 。
3．网页风格和布局设计
3.1 网站形象设计
5
包 括 设 计 网 站 标 志 、设 计 网 站 的 标 准 色 彩 和 网 站 采 用 的 标 准 字 体 等等。例如：网站全名及 logo 标志创意。
3.2 网站的界面风格
如 主 、从 色 调 的 搭 配（ 即 采 用 什 么 色 彩 为 基 调 ，配 以 相 关 的 其 他 色 彩 ， 与 企 业 整 体 形 象 一 致 ）， 页 面 导 航 设 计 和 页 面 视 觉 构 成 等 等 。
XX 网站设计方案
（模板）
专业班级： 姓 名： 学 号： 指导教师： 日 期：
目录 1.网站的目标规划 2.网站的内容规划 3.网页的风格和布局设计 4.网站的资料收集和准备 5.网站制作进度安排 6.网站建设的心得体会和扩展性分析
2
1．网站的目标规划
1.1 网站主题策划
通过网络就某个主题搜索资料，题材不限，要求有个人特色、 新 颖 和 有 吸 引 力 ，并 对 网 站 作 简 单 的 介 绍 如 主 题 是 什 么 ？ 分 那 几 个 栏 目，每个栏目的特色和主要内容是什么？
8
Library
库文件。
music
音乐、音频文件。
Te m p l a t e s 模 板 文 件 。
text
文字素材。
webpage_1 一 级 页 面 文 件 ， 该 文 件 夹 又 有 多 个 子 文 件 夹 ， 例 如
webpage_1_01。
webpage_2 二 级 页 面 文 件 ， 该 文 件 夹 又 有 多 个 子 文 件 夹 ， 例 如
参考专题：对计算机基础教育的看法，互动式教学的方式，网 上论坛，QQ 聊天论述等。也可以是其它的有兴趣的专题如：文学、 历史、科技、体育、旅游、生活、时尚等。
参 考 主 题 ：（ 1） 教 学 资 源 网 站 ；（ 2） 个 人 网 站 ；（ 3） 班 级 网 站 ； （ 4） 学 习 网 站 ；（ 5） 学 校 网 站 ；（ 6） 旅 游 网 站 ；（ 7） 公 司 网 站 ；（ 8） 体育网站。
注意：文件夹和文件的名称建议不要使用中文名，因为中文名 在 HTML 文档中容易生成乱码，导致链接产生错误。
表 2.2 网 站 的 目 录 结 构 及 其 存 放 的 文 件 类 型
文件夹名称
存放的文件类型
css
CSS 样 式 文 件 。
flash
动画文件、视频文件。
image
图像文件、照片。
js
外部脚本文件。
例 如 ：色 彩 搭 配 及 其 含 义（ 如 绿 色 + 金 黄 + 淡 白 ，体 现 优 雅 , 舒适的感觉）
3.3 网站的版面布局设计
采用何种方式的页面布局，在网页文字和图像等元素上如何平 衡 ，根 据 网 络 速 度 、阅 读 习 惯 等 采 用 了 什 么 技 术 方 案 来 解 决 。根 据 所 需 的 站 点 布 局 外 观 ，先 画 一 个 站 点 草 图 ，以 便 以 后 建 立 站 点 时 可 以 按 照它来操作。
……
一级栏目
首页 index.html
表 2.1 “ XX 企 业 网 站 ” 的 栏 目 结 构
二级栏目
三级栏目及内容页面
关 于 我 们 ： AboutUs.html
qyjj.html
……
fzlc.html
新 闻 中 心 ： News.html
Ne ws_h y.h tml
Ne ws_q y.h tml
4.3 flash 动画设计
网 站 中 的 动 画 最 好 能 突 出 主 题 ，起 到 画 龙 点 睛 之 功 效 。动 画 的 功 能 是 什 么 （ 企 业 展 示 还 是 产 品 展 示 ， 亦 或 其 他 … … ）。 使 用 的 地 方 ： 首页、二级页面或者广告栏等等。
4.4 建立库项目
4.2 准备各种图片及按钮
1.利用 Fireworks 或 Photoshop 量身定做本网站的 Logo 标志， Logo 标志要与本网站的主题相符，要有新意。
2.其 他 图 片 及 按 钮 。根 据 需 要 到 网 上 或 素 材 光 盘 中 搜 集 所 需 的 图 片和按钮、有些图片、按钮需要自己利用图像处理软件制作。例如： 需要制作那些图片，图片的尺寸等等。
可先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确 定 完 整 的 栏 目 和 内 容 的 层 次 结 构 ，本 网 站 的 系 统 结 构 图 如 下（ 示 例 ）：
3
关 于 我 们
企
发
业
展
简…
历
介
程
网站首页
新
产
联
闻
品
系
中
中
我
心
心
们
XX XX XX XX XX
行
企
业
业
新
新
闻
闻
Biblioteka Baidu
信信信信信 息息息息息
1.首 页 设 计 草 图 如 下 ：
Logo
Banner 导航栏
简单功能
功能列表 或
局部导航
主要内容
版权声明
2.栏 目 页 设 计 草 图 如 下 ：
6
3.4 网站的导航设计
设 计 站 点 导 航 时 ，应 考 虑 如 何 使 访 问 者 能 够 方 便 的 从 一 个 区 域 移 动 到 另 一 个 区 域 。具 体 考 虑 以 下 几 点 ：明 确“ 当 前 位 置 ”；导 航 方 便 ； 提供与网站管理员的联系方法。
……
产 品 中 心 ： Product.html
proinfo_xx.html
proinfo_xx.html
proinfo_xx.html
proinfo_xx.html
……
联 系 我 们 ： Contact.html
留 言 板 .html
……
产 品 论 坛 （ http://www.XXXbbs.com）
4．网站资料收集和准备
根据网站的栏目、内容设计，链接结构设计，首页的布局结构， 几个主要导航页面的布局结构，准备所需素材。
4.1 文本资料准备
准 备 大 量 网 页 中 所 需 的 文 字 资 料 ，可 以 从 各 类 网 站 、各 种 书 籍 中 搜集文字资料，然后制作成 word 文档或文本文件，注意各种文字资 料的文件名命名要科学合理，避免日后找不到所需的文本内容。
网页中经常用到的项目，例如版权区，可以事先定义为库项目， 以备制作网页时重复使用，提高工作效率。
5．网站制作进度安排
包括如何安排每一部分的进度和计划完成时间。
6．网站建设的心得体会和扩展性分析
6.1 心得体会
在网站建设中遇到了那些问题，如何解决？学习到了那些知识
7
等等。
6.2 扩展性分析
网站还可以添加那些模块，以及可以实现那些功能等等。
webpage_2_01。
other
其他类型的文件。
webstandby 备 用 页 面 、 备 用 素 材
index.html 主 页
2.网 站 链 接 结 构
网站的链接结构与目录结构不同，网站的目录结构指站点的文 件 存 放 结 构 ，一 般 只 有 设 计 人 员 可 以 直 接 看 到 ，而 网 站 的 链 接 结 构 指 网 站 通 过 页 面 之 间 的 联 系 表 现 的 结 构 ，浏 览 者 浏 览 网 站 能 够 观 察 到 这 种 结 构 。本 网 站 的 链 接 结 构 采 用“ 网 状 ”链 接 结 构 ，结 构 图 如 图 17-2 所示。
2．网站的内容规划
2.1 网站栏目结构设计
（一 般 企业 型 网站 应包 括：公司 简 介 、企业 动 态、产 品 介绍、客 户服 务 、联 系 方 式 、在 线 留 言 等 基 本 内 容 。更 多 内 容 如 ：常 见 问 题 、营 销 网 络 、 招 贤 纳 士 、 在 线 论 坛 、 英 文 版 等 等 。）
2.2 网站目录结构和链接结构设计
1.目 录 结 构 根据网站策划确定的栏目结构，创建站点目录，一个网站的目 录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确， 有 利 于 日 后 的 修 改 。“ XX 企 业 网 站 ” 的 目 录 结 构 ， 各 文 件 夹 的 所 存 放
4
文件类型如表 2.2 所示。