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

网站项目规划与设计班级网站的设计报告目录TOC\o"1-3"\h\u23220一、概述 2185331.网站开发背景和目的 26692二、需求分析 21893三、网站开发平台 216210四、网站建设日程表 225324五、总体设计 330380六、网页UI设计 423986七、线框图及页面详细设计图： 4102441、界面设计及布局 4226062、主模块子页的样图 6126343、关键技术 824939八、网站测试 8298991、测试准备 841872、用户界面测试 8151803、功能测试 814194、兼容性测试 914799九、网站推广 918284十、个人心得 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动态图片等等。运用工具：美图秀秀，表情工厂，DW8，等等八、网站测试1、测试准备测试前对被测系统做好以下准备：系统的全面备份，包括应用程序备份、数据备份等；记录测试前系统状态；制定应急措施，确保在测试中发生问题时系统可恢复。测试员应在测试开始前了解网页的相关情况，对测试的预期结果应进行准备和预测。测试前要做好真实数据的准备工作，并进行系统的数据初始化。2、用户界面测试主要测试导航条、内容、颜色、背景、图像、返回等。3、功能测试主要测试站点中的链接等。链接测试：目的是检查各个URL所联接的页面是否正确。表单测试：目的是检查每个表单与程序是否正确联接，能够正确地发送用户请求。4、兼容性测试主要检验应用能否在不同的客户端使用。如苹果（iOS系统的）用户，经常使用chrome，Firefox等浏览器的用户是否都能正常使用。九、网站推广微信公众平台、朋友圈、微博、QQ空间推广（2）论坛推广我们可以注册几十个论坛，每个论坛注册若干个帐号，把签名设为自己的网站及团队图标。发表热门内容，自己顶自己的帖子。目前我们应用的论坛包括校内的极速之星、外网的百度贴吧、天涯论坛、豆瓣等等网民较为聚集的地方。（3）电子邮件推广我们会像宜家一样让用户进行自愿注册会员，浏览者自愿留下他的邮箱地址，定期或不定期的发布一些电子刊物、会员通讯、专业服务商的电子邮件广告等。可以减少广告对用户的滋扰、增加潜在吸引人群定位的准确度、增强与客户的关系、提高品牌忠诚度等。十、个人心得做好主页，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。1.标题在个人主页中标题起着很重要的作用，它在很大程度上决定了你整套个人主页的定位。一个好的标题必须有概括性、简短，有特色、容易记，还要符合自己主页的主题和风格，决不要取一个名不符实的"好名字"，别人第一次上了当，下次再也不会光顾了。2.内容的采集选好标题后，开始采集内容，内容必须与标题相符，在采集内容的过程中，应注重特色，所谓特色应该是有一些自己的东西。个人主页中的特色，应该突出自己的个性，把自己的兴趣、爱好尽情地发挥出来，因为在网络上不受限制。主页就是在网络上的一个小小家园，在那里，可以放上自己喜欢的任何东西，包括你自己平时喜欢一些文章，一些好听的歌，一些好的动画作品。把这些内容按类别进行分类，设置栏目，让人一目了然，在栏目上不要设置太多，最好不要超过十个，层次上最好少于五层。3.图片做个人主页不能只用文字，必须在主页上适当地加一些图片，增加可看性，俗话说"一图胜（转载自第一范文网，请保留此标记。）千言"，我想不无道理，一张处理得好的图片不需要多做任何解释，就能让人一目了然，让人去思考，去了解它。当然处理得不好的以及无关紧要的图片最好不要放上去，否则让人觉得是累赘，同时也影响网页的传输速度。图片不仅要好看，还要在保证图片质量的情况下尽量缩小图片的大小（即字节数），在目前网络传输速度不是很快的情况下，图片的大小在很大程度上影响了网页的传输速度。那么如何精简图片的大小呢，一般来说，图片颜色较少的及在256色以内的最好把它处理成gif图像格式，如果是一些色彩比较丰富的图片，最好把它处理成jpg图像格式，因为gif和jpg各有各的压缩优势，应根据具体的图片来选择压缩比