网页设计说明书文档格式.docx
《网页设计说明书文档格式.docx》由会员分享，可在线阅读，更多相关《网页设计说明书文档格式.docx（13页珍藏版）》请在冰豆网上搜索。
界面设计
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>
测试发布
测试
这个阶段主要对网站做兼容性测试，使其在匹配主流浏览器的基础之上，匹配更多的浏览器。
发布
前期主要在校内推广给学生使用，在用户量增长的同时，尝试向即将进入我校的新生推广本网站。
维护
每天都要更新当天的资讯，并且对出现的问题进行维护。
感谢下载!
欢迎您的下载，资料仅供参考
升级会员 