网页设计说明书

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

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

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

4、果是让用户浏览简 洁方便，而且导航栏不会占据页面的内容。 感谢下载载 网站设计 网站架构图 页面设计图 主页面 水院生活指南(index.html ) 二级页面 水院文化(sywenhua.html ) 机构设置(syjigou.html ) 首页 首页：机构设置 动图（左右滑动）：师资力量，学生作品 ?水院单位 水院资讯(syzixun.html ) 精品 生活指南(syshenghuo.html) 感谢下载载 精品 周边景点(syzhoubian.html ) 首页 首页：周边景点 r 带图标：溪头村 V 带图标：石门 J f 带图标：玫瑰园 丿 带图标：流溪河 ?水院单位 感谢下载载 交

5、通路线(syluxian.html ) 首页：交通路线 到校自驾车 到校公车 游玩路线 精品 ?水院单位 感谢下载载 三级页面 社团活动(syshetuan.html) 首页：水院文化 社团活动 精品 学习环境(syhuanjing.html ) 感谢下载载 校园风光(syfengguang.html) 精品 首页 宣传视频(syshipin.html ) 首页：水院文化 宣传视频 视频窗口 视频窗口 ?水院单位 感谢下载载 精品 首页 街口中心(jiekouzhongxin.html) 首页： 生后指南 街口中心 简介街口购物中心 图片 短文字简介 短文字简介 欣荣商圈(xinrongsha

6、ngquan.html) 首页： 生后指南 欣荣商圈 简介欣荣宏广场 图片 短文字简介 短文字简介 ?水院单位 感谢下载载 第九菜系(xueyuanshitang.html 首页：生后指南 第九菜系 轮播：特色菜 历届学生评价 饭堂趣事 短文字简介 学生宿舍(xueshengsushe.html) 首页：生后指南 学生宿舍 宿舍彩漫动图 r 高清、特写（乱搭） 精品 部分板块设计图 周边景点折叠块设计图 首页：周边景点 玫瑰园 详细介绍 景点大图 基本信息 景点亮点 温馨提示 上下折叠模块（表格） 学习环境详细设计图 （主要参考八音盒） 感谢下载载 首页 图片 （设 计） ;简洁文字说明 静

7、谧 （设 计） 相册 图片 ?水院单位 首页： 水院文化 学习环境 底部导航条 程序设计 模板代码 Vdoctype html 水院生活指南 /* 公共样式 */ *margin:0px;padding:0px; ul lilist-style-type:none; #page atext-decoration: none;color:#000;text-shadow:none; p,h2text-shadow:none;color:#000; body #pagebackground-image:url(img/bj.jpg); fonttext-shadow:none; /*body ma

8、rgin-bottom:60px !important; /*页面上升 */ /* 内容样式 */ /* 页眉 */ .headwidth:100%;height:40px;background:#ddd; /* 内容 */ .navwidth:90%;height:60px;border-bottom:1px #000 solid;margin:20px auto; /* 页脚 */ .foot ptext-align:center;color:#000; /* 导航样式 */ 首页 当 前 位 置 ： 首 页 水院资讯 广 东 水 利 电 力 职 业 技 术 学 院 13 信管 梁展图 测试发布 测试 这个阶段主要对网站做兼容性测试