网页设计说明书Word格式文档下载.docx
《网页设计说明书Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《网页设计说明书Word格式文档下载.docx（17页珍藏版）》请在冰豆网上搜索。
网站规划
内容策划
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>
htmllang="
en"
>
<
head>
metacharset="
UTF-8"
metaname="
Generator"
content="
EditPlus®
"
Author"
Keywords"
Description"
viewport"
width=device-width,initial-scale=1"
/>
title>
水院生活指南<
/title>
linkrel="
stylesheet"
href="
css/jquery.mobile-1.4.5.min.css"
scripttype="
text/javascript"
src="
js/jquery.js"
/script>
js/jquery.mobile-1.4.5.js"
scriptsrc="
js/jquery.min.js"
type="
styletype="
text/css"
/********************公共样式******************************/
*{margin:
0px;
padding:
}
ulli{list-style-type:
none;
#pagea{text-decoration:
none;
color:
#000;
text-shadow:
p,h2{text-shadow:
body#page{background-image:
url（"
img/bj.jpg"
）;
font{text-shadow:
/*body{margin-bottom:
60px!
important;
}/*页面上升*/
/********************内容样式******************************/
/*页眉*/
.head{width:
100%;
height:
40px;
background:
#ddd;
/*内容*/
.nav{width:
90%;
60px;
border-bottom:
1px#000solid;
margin:
20pxauto;
/*页脚*/
.footp{text-align:
center;
/********************导航样式******************************/
/style>
/head>
body>
divdata-role="
page"
id="
header"
class="
head"
ahref="
#home"
data-role="
button"
data-icon="
home"
首页<
/a>
/div>
<
--内容-->
divclass="
nav"
pstyle="
text-indent:
2em;
当前位置：
水院资讯<
/p>
--页脚-->
footer"
foot"
p>
广东水利电力职业技术学院&
copy;
13信管梁展图<
--底部导航-->
/body>
/html>
测试发布
测试
这个阶段主要对网站做兼容性测试，使其在匹配主流浏览器的基础之上，匹配更多的浏览器。
发布
前期主要在校内推广给学生使用，在用户量增长的同时，尝试向即将进入我校的新生推广本网站。
维护
每天都要更新当天的资讯，并且对出现的问题进行维护。
升级会员 