网站设计方案(修改).doc

XX网站设计方案
（模板）

专业班级：
姓 名：
学 号：
指导教师：
日 期：

目 录
1.网站的目标规划
2.网站的内容规划
3.网页的风格和布局设计
4.网站的资料收集和准备
5.网站制作进度安排
6.网站建设的心得体会和扩展性分析

1．网站的目标规划
1.1 网站主题策划
通过网络就某个主题搜索资料，题材不限，要求有个人特色、新颖和有吸引力，并对网站作简单的介绍如主题是什么？分那几个栏目，每个栏目的特色和主要内容是什么？
参考专题：对计算机基础教育的看法，互动式教学的方式，网上论坛，QQ聊天论述等。也可以是其它的有兴趣的专题如：文学、历史、科技、体育、旅游、生活、时尚等。
参考主题：（1）教学资源网站；（2）个人网站；（3）班级网站；（4）学习网站；（5）学校网站；（6）旅游网站；（7）公司网站；（8）体育网站。
1.2 目标用户定位
确定了站点实现的目标之后，需要确定站点的浏览客户。创建世界上每个人都能使用的 Web 站点是不可能的。人们的兴趣、爱好不同，使用不同的浏览器，以不同的速度连接，这些因素都会影响站点的使用。因此需要确定目标用户，根据用户的特点来设计站点风格。

2．网站的内容规划
2.1网站栏目结构设计
（一般企业型网站应包括：公司简介、企业动态、产品介绍、客户服务、联系方式、在线留言等基本内容。更多内容如：常见问题、营销网络、招贤纳士、在线论坛、英文版等等。）
可先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构，本网站的系统结构图如下（示例）：
网站首页
联系我们
产品中心
新闻中心
关于我们

…
……

发展历程

企业简介
XX信息
XX信息
XX信息
XX信息
XX信息
行业新闻
企业新闻

表2.1　“XX企业网站”的栏目结构
一级栏目
二级栏目
三级栏目及内容页面
首页
index.html
关于我们：AboutUs.html
qyjj.html
……
fzlc.html
新闻中心：News.html
News_hy.html
News_qy.html
……
产品中心：Product.html
proinfo_xx.html
proinfo_xx.html
proinfo_xx.html
proinfo_xx.html
……
联系我们：Contact.html
留言板.html
……
产品论坛（http://www.XXX）

2.2网站目录结构和链接结构设计
1.目录结构
根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。“XX企业网站”的目录结构，各文件夹的所存放文件类型如表2.2所示。
注意：文件夹和文件的名称建议不要使用中文名，因为中文名在HTML文档中容易生成乱码，导致链接产生错误。
表2.2　　网站的目录结构及其存放的文件类型
文件夹名称
存放的文件类型
css
CSS样式文件。
flash
动画文件、视频文件。
image
图像文件、照片。
js
外部脚本文件。
Library
库文件。
music
音乐、音频文件。
Templates
模板文件。
text
文字素材。
webpage_1
一级页面文件，该文件夹又有多个子文件夹，例如webpage_1_01。
webpage_2
二级页面文件，该文件夹又有多个子文件夹，例如webpage_2_01。
other
其他类型的文件。
webstandby
备用页面、备用素材
index.html
主页

2.网站链接结构
网站的链接结构与目录结构不同，网站的目录结构指站点的文件存放结构，一般只有设计人员可以直接看到，而网站的链接结构指网站通过页面之间的联系表现的结构，浏览者浏览网站能够观察到这种结构。本网站的链接结构采用“网状”链接结构，结构图如图17-2所示。

3．网页风格和布局设计
3.1网站形象设计
包括设计网站标志、设计网站的标准色彩和网站采用的标准字体等等。例如：网站全名及 logo 标志创意。
3.2网站的界面风格
如主、从色调的搭配（即采用什么色彩为基调，配以相关的其他色彩，与企业整体形象一致），页面导航设计和页面视觉构成等等。
例如：色彩搭配及其含义（如绿色 + 金黄 + 淡白，体现优雅 , 舒适的感觉）
3.3网站的版面布局设计
采用何种方式的页面布局，在网页文字和图像等元素上如何平衡，根据网络速度、阅读习惯等采用了什么技术方案来解决。根据所需的站点布局外观，先画一个站点草图，以便以后建立站点时可以按照它来操作。
1.首页设计草图如下：

Logo
Banner
简单功能
导航栏
功能列表
或
局部导航

主要内容
版权声明

2.栏目页设计草图如下：

3.4网站的导航设计
设计站点导航时，应考虑如何使访问者能够方便的从一个区域移动到另一个区域。具体考虑以下几点：明确“当前位置”；导航方便；提供与网站管理员的联系方法。
4．网站资料收集和准备
根据网站的栏目、内容设计，链接结构设计，首页的布局结构，几个主要导航页面的布局结构，准备所需素材。
4.1文本资料准备
准备大量网页中所需的文字资料，可以从各类网站、各种书籍中搜集文字资料，然后制作成word文档或文本文件，注意各种文字资料的文件名命名要科学合理，避免日后找不到所需的文本内容。
4.2准备各种图片及按钮
1.利用Fireworks或Photoshop量身定做本网站的Logo标志，Logo标志要与本网站的主题相符，要有新意。
2.其他图片及按钮。根据需要到网上或素材光盘中搜集所需的图片和按钮、有些图片、按钮需要自己利用图像处理软件制作。例如：需要制作那些图片，图片的尺寸等等。
4.3 flash动画设计
网站中的动画最好能突出主题，起到画龙点睛之功效。动画的功能是什么（企业展示还是产品展示，亦或其他……）。使用的地方：首页、二级页面或者广告栏等等。
4.4建立库项目
网页中经常用到的项目，例如版权区，可以事先定义为库项目，以备制作网页时重复使用，提高工作效率。
5．网站制作进度安排
包括如何安排每一部分的进度和计划完成时间。
6．网站建设的心得体会和扩展性分析
6.1心得体会
在网站建设中遇到了那些问题，如何解决？学习到了那些知识等等。
6.2扩展性分析
网站还可以添加那些模块，以及可以实现那些功能等等。

8