网站项目规划与设计 班级网站的设计报告.docVIP

PAGE

PAGE1

网站项目规划与设计班级网站的设计报告

目录

TOC\o1-3\h\u23220一、概述 2

185331.网站开发背景和目的 2

6692二、需求分析 2

1893三、网站开发平台 2

16210四、网站建设日程表 2

25324五、总体设计 3

30380六、网页UI设计 4

23986七、线框图及页面详细设计图： 4

102441、界面设计及布局 4

226062、主模块子页的样图 6

126343、关键技术 8

24939八、网站测试 8

298991、测试准备 8

41872、用户界面测试 8

151803、功能测试 8

14194、兼容性测试 9

14799九、网站推广 9

18284十、个人心得 9

一、概述

网站开发背景和目的

本项目为班级网站。

随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个人宣传自己的有利工具，、网站在当今时代被越来越多的人用来宣传，通过这次个人网页的制作，我对计算机有了更深层次得到了解，也有了更浓厚的兴趣。尤其是对网页制作的过程与一些技巧手法更有了另外一番了解，对网页制作的基础知识也有了一定的掌握。所以我觉得这次制作网页我已经达到了自己的目的，而不是单单为了完成作业而已。这是一个完全关于班级网站的网页。主题《班级网站》是在Windwos7环境下用记事本、Dreamweaver和Photoshop等工具完成静态网站的开发，我们完全是运用了这一学期的网页制作教程所学习的知识和课外自学知识完成的。

二、需求分析

用户对网站的要求是：风格统一和谐的网页，网页操作合理、方便、友好

需要实现的功能和性能是：适当运用HTML语言和CSS样式定义，并正确运用多媒体信息，设计出风格统一和谐的网页；网站正常运行，功能达到设计要求，风格和谐统一，操作合理、方便、友好，界面具有美感或创意，还要符合网站管理的原则。

三、网站开发平台

功能模块

技术和软件平台

操作系统

Windows8

设计稿、图形处理

PhotoshopCS6

动画设计制作

FlashCS5

网页制作平台

Dreamweaver

网站开发语言

HTML,CSS,JavaScript

网站测试平台

Chrome，Firefox

四、网站建设日程表

完成整个项目所需时间为三个月，其中各项规划任务如下表所示：

时间

任务内容

3月9日-16日

拟定项目

3月17日-23日

制定初步项目计划

4月6日-19日

网站初步框架

4月20日-5月1日

网站内容具体丰富

5月2日-5月10日

总结反思，网站细节完善

5月11日-24日

计划微调，网站用户体验感测试

5月25日-6月7日

网站装饰再加工，CSS布局，JS语言

6月8日-6月15日

最终测试

五、总体设计

网站需要让每个人到了解到艺术

主题《班级网站》是在Windwos7环境下用记事本、Dreamweaver和Photoshop等工具完成静态网站的开发

此次网站制作共三人合力完成

需要遵循的规则和标准：网页命名要简洁、确保页面的导览性好、保持新鲜感、合理设计视觉效果、为图片添加文字说明、尽量减少拼写和语法错误、页面长度要适中、保持链接的有效性、整个页面风格要一致

网页色彩搭配原理

①色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。

②色彩的独特性。要有与众不同的色彩，使得用户对企业网站的印象强烈。

③色彩的合适性。色彩和网站表达的内容要与气氛相适应。

④色彩的联想性。不同色彩会产生不同的联想，如蓝色想到天空，白色想到纯洁等。

网站的功能框架结构如下：

班级网站

班级网站主页

班级相册

班级简介

留言板

同学录

班级趣闻

友情链接

首页

六、网页UI设计

我们将坚持以用户体验为中心设计原则，界面直观、简洁，操作方便快捷，浏览者将对界面上对应的功能一目了然。

保持页面内元素风格，版式一致。

使用一致的标记、标准缩写和颜色，显示信息含义明确。

显示有意义的出错信息，而不是单纯的程序错误代码。

减持高效地使用显示器的显示空间，保持语言的一致性与可选择性。

我们将遵循浏览者从上而下，自左向右浏览、操作习惯，尽量多做“减法”运算，将不常用的功能区块隐藏，以保持界面的简洁。

在页面显眼位置应该出现面包屑导航栏，让用户知道当前所在页面的位置，并明确导航结构。并且为页面导航加以设计规划。

七、线框图及页面详细设计图：

1、界面设计及布局

首页的样图

2、主模块子页的样图

3、关键技术

主要运用：DIV、CSS、JAVASCRIPT脚本语言，表格

次要运用：JQuerry脚本，flash动画，gif动态图片等等。