网页设计说明书.docx
《网页设计说明书.docx》由会员分享，可在线阅读，更多相关《网页设计说明书.docx（17页珍藏版）》请在冰豆网上搜索。
网页设计说明书
设计说明书
需求分析
目标定位
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）
部分板块设计图
周边景点--------折叠块设计图
学习环境详细设计图
（主要参考八音盒）
底部导航条
程序设计
模板代码
doctypehtml>
水院生活指南
/********************公共样式******************************/
*{margin:
0px;padding:
0px;}
ulli{list-style-type:
none;}
#pagea{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#000solid;margin:
20pxauto;}
/*页脚*/
.footp{text-align:
center;color:
#000;}
/********************导航样式******************************/
首页