网页设计说明书Word下载.docx
- 文档编号:22974612
- 上传时间:2023-02-06
- 格式:DOCX
- 页数:18
- 大小:418.57KB
网页设计说明书Word下载.docx
《网页设计说明书Word下载.docx》由会员分享,可在线阅读,更多相关《网页设计说明书Word下载.docx(18页珍藏版)》请在冰豆网上搜索。
网站规划
内容策划
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>
测试发布
测试
这个阶段主要对网站做兼容性测试,使其在匹配主流浏览器的基础之上,匹配更多的浏览器。
发布
前期主要在校内推广给学生使用,在用户量增长的同时,尝试向即将进入我校的新生推广本网站。
维护
每天都要更新当天的资讯,并且对出现的问题进行维护。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 说明书