《网页设计说明书》由会员分享,可在线阅读,更多相关《网页设计说明书(23页珍藏版)》请在金锄头文库上搜索。
1、设计说明书需求分析目标定位a、制作这个网站的目的是为了方便我们学院的新生与老生能快速浏览的我们学校的基本 情况,了解我们学校所有好玩,有趣的事情。b、本网站的主要职能是实时为新生提供部分新的资讯。c、本网站所面向的用户是所有进入我校的同学以及想要了解我们学校的用户。用户分析a、使用本网站的用户主要是想要了解我们学校的所有信息 ,并且能够为他们提供所需的生 活所需的信息。b、他们最想本网站为他们提供校内外的所有资讯,包括饮食,住宿,景点旅游等.c、本网站制作内容架构清晰,避免过多的文字介绍造成用户过多阅读的麻烦.d、用户可以每天浏览我们为其提供的实时热点以及校内外最新的资讯,比如:校园通知、 饭
2、堂价格等。市场前景a、本网站的市场需求在于为本校师生以及想要了解我校的用户提供最便捷,最新的信息.b、基于前面的分析,决定了本网站的设计风格要简明、清晰;主题围绕着学生所需而开展.网站规划内容策划a、本往网站主要经营的内容是:校园文化、校园资讯、美食住宿、周边景点等主题。b、基于以上主题,其中重点制作的是校园文化和美食住宿;而辅助的是校园资讯等主题. 对于网页如此划分的目的是,使用本网站的用户都是想要了解我们学校于他们息息相关的事 情,无论是新生、老生还是其他用户,都想知道我们学校有哪些特色的文化和美食。文化可 以增进他们知道我们学校的最近的文化活动生活。而美食,则能吸引更多的学生来了解我们
3、学校的吃货,这对于新进校园的新生有着极强引导作用。界面设计a、 对于每个版块的设计都有着其不同的元素,首页,主要突出网页围绕的主题设计导航,并 且使用简单明了的文字对学院做出说明;而二级页面,则分为六个版块,每个版块都有 着不同的设计元素来突出其主题;对于三级页面,由于其划分表达内容上得较为详细, 所以社体元素较为单调以图文介绍为主。b、全版设计所使用的元素极为简单,主要以框架、线条、设计,在此基础之上配合色彩、 阴影、重叠、浮动、定位等的元素来协调画面风格。c、对于次级页面的导航栏设计,是浮动置于页面的底部,这样设计的效果是让用户浏览简洁 方便,而且导航栏不会占据页面的内容.网站设计网站架构
4、图页面设计图主页面水院生活指南(index。html)二级页面水院文化(sywenhua。html)机构设置(syjigou。html)水院资讯(syzixunhtml)生活指南(syshenghuohtml)周边景点(syzhoubian。html)交通路线(syluxian。html)三级页面社团活动(syshetuanhtml)-首页首页:水院文化社团活动大屏显示(未点击时,出现社团主体图点击时,轮换到每个社团的介绍内容)水院单位学习环境(syhuanjing。html)校园风光(syfengguanghtml)宣传视频(syshipin。html)街口中心(jiekouzhongxin
5、。html)欣荣商圈(xinrongshangquan. html)第九菜系(xueyuanshitang。html)学生宿舍(xueshengsushe。html)部分板块设计图周边景点-折叠块设计图首页:周边景点玫瑰园详细介绍水院单位上下折叠模块(表格)景点大图基本信息景点亮点温馨提示学习环境详细设计图主要参考八音盒)底部导航条程序设计模板代码!doctype htmlmeta name=”Generator” content=EditPlus”meta name=Author” content=”meta name=Keywords” content=”meta name=Descrip
6、tion” content=”title水院生活指南/titlevlink rel=stylesheet href=css/jquery。mobile1。4。5。min。css/script type=text/javascript” src=”js/jquery。 js/script script src=”js/jquery。 min.js” type=text/javascript” /scriptstyle type=text/css/* *公共样式 * * * */*margin:0px;padding:0px;ul li list-styletype:none; #page a t
7、extdecoration:none;color:#000; text-shadow: none; p, h2 textshadow: none; color: #000;body #pagebackgroundimage:url(img/bj.jpg);fonttext-shadow:none;/*body margin-bottom:60px !important; /页面上升*/ /*内容样式*/*页眉/。headwidth: 100%; height:40px; background: # ddd;/*内容/.navwidth: 90; height: 60px;border-bott
8、om:1px #000 solid;margin: 20px auto;/*页脚/.foot ptextalign:center; color :# 000;/ *导航样式* */head body当前位置:a href=首页 水院资讯v/a/p /div!-页脚-vdiv datarole=footer class= footxp广东水利电力职业技术学院©13 信管梁展图v/p/div !-底部导航- /bodyv/html测试发布测试这个阶段主要对网站做兼容性测试,使其在匹配主流浏览器的基础之上,匹配更多的浏览器.发布前期主要在校内推广给学生使用,在用户量增长的同时,尝试向即将进入我校的新生推广本 网站。维护每天都要更新当天的资讯,并且对出现的问题进行维护.