网页设计说明书.doc_咨信网zixin.com.cn

资源描述

设计说明书需求分析目标定位 a、制作这个网站的目的是为了方便我们学院的新生与老生能快速浏览的我们学校的基本情况，了解我们学校所有好玩，有趣的事情。 b、本网站的主要职能是实时为新生提供部分新的资讯。 c、本网站所面向的用户是所有进入我校的同学以及想要了解我们学校的用户. 用户分析 a、使用本网站的用户主要是想要了解我们学校的所有信息，并且能够为他们提供所需的生活所需的信息。 b、他们最想本网站为他们提供校内外的所有资讯，包括饮食，住宿，景点旅游等。 c、本网站制作内容架构清晰,避免过多的文字介绍造成用户过多阅读的麻烦。 d、用户可以每天浏览我们为其提供的实时热点以及校内外最新的资讯，比如：校园通知、饭堂价格等. 市场前景 a、本网站的市场需求在于为本校师生以及想要了解我校的用户提供最便捷，最新的信息。 b、基于前面的分析，决定了本网站的设计风格要简明、清晰；主题围绕着学生所需而开展。网站规划内容策划 a、本往网站主要经营的内容是：校园文化、校园资讯、美食住宿、周边景点等主题。 b、基于以上主题，其中重点制作的是校园文化和美食住宿;而辅助的是校园资讯等主题。对于网页如此划分的目的是，使用本网站的用户都是想要了解我们学校于他们息息相关的事情，无论是新生、老生还是其他用户，都想知道我们学校有哪些特色的文化和美食。文化可以增进他们知道我们学校的最近的文化活动生活。而美食，则能吸引更多的学生来了解我们学校的吃货，这对于新进校园的新生有着极强引导作用。界面设计 a、对于每个版块的设计都有着其不同的元素,首页，主要突出网页围绕的主题设计导航，并且使用简单明了的文字对学院做出说明；而二级页面，则分为六个版块，每个版块都有着不同的设计元素来突出其主题；对于三级页面，由于其划分表达内容上得较为详细，所以社体元素较为单调以图文介绍为主。 b、全版设计所使用的元素极为简单,主要以框架、线条、设计，在此基础之上配合色彩、阴影、重叠、浮动、定位等的元素来协调画面风格。 c、对于次级页面的导航栏设计,是浮动置于页面的底部，这样设计的效果是让用户浏览简洁方便，而且导航栏不会占据页面的内容。网站设计网站架构图 **细模块** **折叠快** 水院生活指南网机构设置水院文化生活指南周边景点水院资讯交通路线社团活动学习环境校园风光吃遍水院住宿环境宣传视频购物娱乐流溪滩涂森林公园招生就业水院要闻石门公园流溪公园校园内部街口广百欣荣商城页面设计图主页面水院生活指南（index.html) 首页轮播：学院各主题图文本：简介水院 ©水院单位生活指南周边景点交通路线水院文化机构设置水院资讯二级页面水院文化(sywenhua。html) 首页 ©水院单位首页：水院文化文本：文化生活简洁社团活动校园风光宣传视频学习环境拖动形状至中心，跳转到下一页面拖动后，形状复位机构设置（syjigou.html）首页 ©水院单位首页：机构设置教学系部党群组织行政单位教辅单位主体部门动图（左右滑动）：师资力量，学生作品水院资讯（syzixun。html）首页 ©水院单位首页：水院资讯招生就业水院要闻招生就业水院要闻文字滚动栏可加折叠显示生活指南(syshenghuo。html) 首页 ©水院单位轮播：生活主题图片首页：生活指南吃货图片住宿图片购物、美味与住宿街口中心欣荣商圈第九菜系学生宿舍周边景点（syzhoubian。html）首页 ©水院单位首页：周边景点文本：介绍周围景点带图标：石门带图标：玫瑰园带图标：流溪河带图标：溪头村交通路线（syluxian.html) 首页 ©水院单位首页：交通路线到校自驾车到校公车游玩路线三级页面社团活动(syshetuan.html）—-—----—---- 首页 ©水院单位首页：水院文化>社团活动大屏显示（未点击时，出现社团主体图点击时，轮换到每个社团的介绍内容）学习环境（syhuanjing.html）首页 ©水院单位首页：水院文化>学习环境长边幅网页，上下拖动，参考“八音盒” 学习（设计）图片简洁文字说明以下类推（具体见详细图）顶部校园风光(syfengguang。html）首页 ©水院单位首页：水院文化>校园风光长边幅网页，上下拖动，参考“八音盒” 环境（设计）图片简洁文字说明以下类推（具体见详细图）顶部宣传视频（syshipin。html）首页 ©水院单位首页：水院文化>宣传视频视频窗口视频窗口街口中心(jiekouzhongxin.html) 首页 ©水院单位首页：生后指南>街口中心简介街口购物中心图片短文字简介短文字简介欣荣商圈(xinrongshangquan.html) 首页 ©水院单位首页：生后指南>欣荣商圈简介欣荣宏广场图片短文字简介短文字简介第九菜系（xueyuanshitang.html）首页 ©水院单位首页：生后指南>第九菜系短文字简介轮播：特色菜历届学生评价饭堂趣事学生宿舍(xueshengsushe.html) 首页 ©水院单位首页：生后指南>学生宿舍宿舍彩漫动图高清、特写（乱搭）部分板块设计图周边景点———-—---折叠块设计图景点大图基本信息景点亮点温馨提示上下折叠模块（表格）首页：周边景点>玫瑰园>详细介绍 ©水院单位学习环境详细设计图（主要参考八音盒）首页 ©水院单位首页：水院文化>学习环境环境（设计）图片简洁文字说明静谧（设计）图片氛围（设计）图片相册底部导航条首页水院文化机构设置水院资讯交通路线周边景点生活指南程序设计模板代码〈！doctype html〉 <html lang="en”> <head〉〈meta charset=”UTF—8”〉〈meta name=”Generator” content="EditPlus®”〉 <meta name="Author" content="”〉 <meta name=”Keywords" content=""> <meta name=”Description” content="”> <meta name=”viewport" content=”width=device-width,initial—scale=1"/> <title>水院生活指南</title> 〈link rel=”stylesheet" href=”css/jquery.mobile-1。4。5.min.css”/〉 <script type=”text/javascript” src="js/jquery。js”></script〉〈script type=”text/javascript" src=”js/jquery。mobile-1。4.5.js”>〈/script〉 <script src=”js/jquery.min。js” type=”text/javascript">〈/script〉 <style type="text/css"〉 /*＊＊＊**＊*＊＊*＊＊＊******公共样式＊*****＊*＊***＊******＊***＊＊＊*＊＊＊/ ＊{margin:0px;padding：0px;｝ ul li｛list-style-type：none;｝ #page a｛text—decoration： none；color:＃000；text-shadow：none；} p,h2｛text-shadow：none;color：#000；｝ body ＃page｛background—image：url（”img/bj。jpg")；｝ font{text—shadow:none;｝ /＊body ｛ margin-bottom：60px ！important； }/＊页面上升＊/ /***＊**＊＊*＊*＊*＊＊＊＊*＊＊内容样式＊＊*＊*＊＊**＊*＊*＊＊＊*＊＊*＊＊*＊＊**＊*＊/ /＊页眉＊/ 。head｛width:100%;height：40px;background:#ddd;｝ /＊内容*/ 。nav｛width：90%;height:60px；border—bottom：1px ＃000 solid;margin:20px auto;} /＊页脚＊/ .foot p{text-align：center；color:＃000;｝ /＊*＊*＊*＊*＊*＊＊＊＊*＊＊*＊*导航样式＊*＊＊***＊*＊****＊*＊***＊＊＊*******/ </style> 〈/head〉〈body〉〈div data-role=”page" id="page"> <div data—role="header" class="head"> <a href=”＃home" data—role=”button” data-icon=”home"〉首页〈/a> </div> 〈!--内容--〉 <div class=”nav”〉 <p style=”text-indent：2em；">当前位置：<a href=""〉首页〈/a〉〉<a href=””>水院资讯〈/a>〈/p> 〈/div> 〈！——页脚-—〉 <div data—role="footer" class="foot"〉<p>广东水利电力职业技术学院＆copy;13信管梁展图〈/p〉〈/div> </div〉 <!-—底部导航-—> </body> 〈/html〉测试发布测试这个阶段主要对网站做兼容性测试，使其在匹配主流浏览器的基础之上，匹配更多的浏览器. 发布前期主要在校内推广给学生使用,在用户量增长的同时，尝试向即将进入我校的新生推广本网站. 维护每天都要更新当天的资讯，并且对出现的问题进行维护。

展开阅读全文