网页设计说明书_第1页
网页设计说明书_第2页
网页设计说明书_第3页
网页设计说明书_第4页
已阅读5页,还剩20页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、.设计说明书需求分析目标定位a、 制作这个网站的目的是为了方便我们学院的新生与老生能快速浏览的我们学校的基本情况,了解我们学校所有好玩,有趣的事情。b、 本网站的主要职能是实时为新生提供部分新的资讯。c、 本网站所面向的用户是所有进入我校的同学以及想要了解我们学校的用户。用户分析a、 使用本网站的用户主要是想要了解我们学校的所有信息,并且能够为他们提供所需的生活所需的信息。b、 他们最想本网站为他们提供校内外的所有资讯,包括饮食,住宿,景点旅游等。c、 本网站制作内容架构清晰,避免过多的文字介绍造成用户过多阅读的麻烦。d、 用户可以每天浏览我们为其提供的实时热点以及校内外最新的资讯,比如:校园

2、通知、饭堂价格等。市场前景a、 本网站的市场需求在于为本校师生以及想要了解我校的用户提供最便捷,最新的信息。b、 基于前面的分析, 决定了本网站的设计风格要简明、清晰;主题围绕着学生所需而开展。网站规划内容策划a、 本往网站主要经营的内容是:校园文化、校园资讯、美食住宿、周边景点等主题。b、 基于以上主题,其中重点制作的是校园文化和美食住宿;而辅助的是校园资讯等主题。对于网页如此划分的目的是, 使用本网站的用户都是想要了解我们学校于他们息息相关的事1/23.情,无论是新生、老生还是其他用户,都想知道我们学校有哪些特色的文化和美食。文化可以增进他们知道我们学校的最近的文化活动生活。 而美食, 则

3、能吸引更多的学生来了解我们学校的吃货,这对于新进校园的新生有着极强引导作用。界面设计a、 对于每个版块的设计都有着其不同的元素,首页,主要突出网页围绕的主题设计导航,并且使用简单明了的文字对学院做出说明;而二级页面,则分为六个版块,每个版块都有着不同的设计元素来突出其主题; 对于三级页面, 由于其划分表达内容上得较为详细,所以社体元素较为单调以图文介绍为主。b、 全版设计所使用的元素极为简单,主要以框架、线条、设计,在此基础之上配合色彩、阴影、重叠、浮动、定位等的元素来协调画面风格。c、 对于次级页面的导航栏设计,是浮动置于页面的底部,这样设计的效果是让用户浏览简洁方便,而且导航栏不会占据页面

4、的内容。2/23.网站设计网站架构图水院生活指南网社团活动水院文化学习环境校园风光机构设置宣传视频招生就业水院资讯水院要闻吃遍水院住宿环境生活指南购物娱乐* 细模块 *校园内部街口广百欣荣商城流溪滩涂* 折叠快 *周边景点石门公园森林公园流溪公园交通路线3/23.页面设计图主页面水院生活指南(index.html )首页轮播:学院各主题图文本:简介水院水院文化生活指南机构设置周边景点水院资讯交通路线? 水院单位4/23.二级页面水院文化( sywenhua.html )首页首页:水院文化文本:文化生活简洁社团活动学习环境宣传视频? 水院单位拖动形状至中心, 跳转到下一页面拖动后,形状复位校园风

5、光5/23.机构设置( syjigou.html )首页首页:机构设置主体部门教学系部党群组织行政单位教辅单位动图(左右滑动) :师资力量,学生作品? 水院单位6/23.水院资讯( syzixun.html )首页首页:水院资讯文字滚动栏招生就业水院要闻招生就业水院要闻可加折叠显示? 水院单位7/23.生活指南( syshenghuo.html )首页轮播:生活主题图片首页:生活指南吃货图片住宿图片购物、美味与住宿街口中心欣荣商圈第九菜系学生宿舍? 水院单位8/23.周边景点( syzhoubian.html )首页首页:周边景点文本:介绍周围景点带图标:溪头村带图标:石门带图标:玫瑰园带图标

6、:流溪河? 水院单位9/23.交通路线( syluxian.html )首页首页:交通路线到校自驾车到校公车游玩路线? 水院单位10/23.三级页面社团活动 (syshetuan.html)-首页首页:水院文化 >社团活动大屏显示(未点击时,出现社团主体图点击时,轮换到每个社团的介绍内容)? 水院单位11/23.学习环境( syhuanjing.html)首页首页:水院文化 >学习环境学习(设计)图片简洁文字说明以下类推(具体见详细图)? 水院单位长边幅网页,上下拖动,参考“八音盒”顶部12/23.校园风光 (syfengguang.html)首页首页:水院文化 >校园风光环

7、境(设计)图片简洁文字说明以下类推(具体见详细图)? 水院单位长边幅网页,上下拖动,参考“八音盒”顶部13/23.宣传视频( syshipin.html )首页首页:水院文化 >宣传视频视频窗口视频窗口? 水院单位14/23.街口中心( jiekouzhongxin.html)首页首页:生后指南 >街口中心简介街口购物中心图片短文字简介短文字简介? 水院单位15/23.欣荣商圈 (xinrongshangquan.html)首页首页:生后指南 >欣荣商圈简介欣荣宏广场图片短文字简介短文字简介? 水院单位16/23.第九菜系( xueyuanshitang.html)首页首页:

8、生后指南 >第九菜系轮播:特色菜历届学生评价饭堂趣事短文字简介? 水院单位17/23.学生宿舍 (xueshengsushe.html)首页首页:生后指南 >学生宿舍宿舍彩漫动图高清、特写(乱搭)? 水院单位18/23.部分板块设计图周边景点 - 折叠块设计图首页:周边景点 >玫瑰园 >详细介绍景点大图基本信息景点亮点温馨提示上下折叠模块(表格)? 水院单位19/23.学习环境详细设计图(主要参考八音盒)首页首页:水院文化 >学习环境环氛境围(设设计)计)图片图片简洁文字说明静谧相册(设计)图片? 水院单位20/23.底部导航条首页水院文机构设水院生活周边景交通路

9、化置资讯指南点线程序设计模板代码<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus?"><meta name="Author" content=""><meta name="Keywords" content=""

10、><meta name="Description" content=""><meta name="viewport" content="width=device-width,initial-scale=1"/> <title> 水院生活指南 </title>/*公共样式 */*margin:0px;padding:0px;ul lilist-style-type:none;#page atext-decoration: none;color:#000;text-

11、shadow:none; p,h2text-shadow:none;color:#000;body #pagebackground-image:url("img/bj.jpg");fonttext-shadow:none;21/23./*body margin-bottom:60px !important; /*页面上升 */*内容样式 */* 页眉 */.headwidth:100%;height:40px;background:#ddd;/* 内容 */.navwidth:90%;height:60px;border-bottom:1px #000 solid;marg

12、in:20px auto;/* 页脚 */.foot ptext-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="

13、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 信管梁展图 &

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论