网页设计说明书.pdf

《网页设计说明书.pdf》由会员分享，可在线阅读，更多相关《网页设计说明书.pdf（23页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

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

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

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

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

7、设计）图片 简洁文字说明 以下类推（具体见详细图）顶部 宣传视频（syshipin.html）首页 水院单位 首页：水院文化宣传视频 视频窗口 视频窗口 街口中心（jiekouzhongxin.html）首页 水院单位 首页：生后指南街口中心 简介街口购物中心 图片 短文字简介 短文字简介 欣荣商圈(xinrongshangquan。html）首页 水院单位 首页：生后指南欣荣商圈 简介欣荣宏广场 图片 短文字简介 短文字简介 第九菜系（xueyuanshitang。html）首页 水院单位 首页：生后指南第九菜系 短文字简介 轮播：特色菜 历届学生评价 饭堂趣事 学生宿舍(xueshengs

8、ushe。html)首页 水院单位 首页：生后指南学生宿舍 宿舍彩漫动图 高清、特写（乱搭）部分板块设计图 周边景点-折叠块设计图 景点大图 基本信息 景点亮点 温馨提示 上下折叠模块（表格）首页：周边景点玫瑰园详细介绍 水院单位 学习环境详细设计图（主要参考八音盒）首页 水院单位 首页：水院文化学习环境 环 境 （设计）图片 简洁文字说明 静 谧（设计）图片 氛 围（设计）图片 相册 底部导航条 程序设计 模板代码！doctype html html lang=en”head meta charset=UTF-8”meta name=Author content=meta name=Keyw

9、ords content=”meta name=”Description”content=meta name=viewport content=width=device-width,initial-scale=1”/script type=”text/javascript src=”js/jquery.js script type=text/javascript”src=js/jquery.mobile1。4。5.js”/script script src=js/jquery。min.js”type=”text/javascript”style type=text/css/*公共样式*/mar

10、gin:0px；padding：0px;ul lilist-styletype：none;#page atextdecoration:none；color:000；textshadow：none；p,h2text-shadow：none；color：000;body pagebackground-image：url（img/bj。jpg”）;首页 水院文化 机构设置 水 院资讯 交通路线 周边景点 生 活指南 fonttext-shadow：none；/body marginbottom:60px！important；/*页面上升*/*内容样式*/页眉*/。headwidth:100%;hei

11、ght:40px;background:ddd；/内容*/.navwidth：90%；height：60px；border-bottom:1px#000 solid；margin：20px auto;/页脚*/.foot ptext-align：center;color：000；/*导航样式*/style div data-role=”header class=head a href=”#home data-role=”button data-icon=home”首页 /div !-内容-p style=textindent:2em;”当前位置：a href=”首页 a href=”水院资讯/p /div !页脚-div data-role=footer”class=footp广东水利电力职业技术学院©；13信管 梁展图/div /div !-底部导航-/body/html 测试发布 测试 这个阶段主要对网站做兼容性测试,使其在匹配主流浏览器的基础之上，匹配更多的浏览器.发布 前期主要在校内推广给学生使用,在用户量增长的同时，尝试向即将进入我校的新生推广本网站。维护 每天都要更新当天的资讯，并且对出现的问题进行维护.