网页设计与制作开发文档

网页设计与制作开发文档工商11-3班110614301苏晨网站主题“京叹号”，以介绍CBA北京金隅队为主的网站，同时着重介绍今年北京队夺得总冠军系列赛的比赛，作为网站的主要内容。网站栏目包括“首页（京叹号）”，“球队介绍”，“赛季十大经典回顾”，“季后赛之路”，“总决赛拼杀”，“会员注册”，以及“关于我”七个栏目。“首页”主要是对北京队夺得总冠军的热烈庆祝，以及六个栏目的链接：“球队介绍”，“赛季十大经典回顾”，“季后赛之路”，“总决赛拼杀”，“会员注册”，以及“关于我”。“球队简介”，主要介绍俱乐部建队时间，俱乐部概况，队员组成，价廉组情况。“2011-12赛季十大经典时刻”主要介绍球队逆转绝杀，十三连胜等激动人心的时刻。“季后赛之路”：主要介绍季后赛首轮3比0横扫浙江广厦战况，以及和山西血拼五战的激烈战况。“总决赛拼杀”：遇到八年七冠的卫冕冠军广东，赛前每人看好我们，但我们不相信命运，4比1横扫广东！“球队图片”：把北京队中的每个球员图片展示出来，并且还有夺冠时那些感人至深的画面“会员注册”是一个注册表单，主要是为北京球迷提供一个大家可以交流的平台。由于是静态页面，不能做出可以提交的效果。“关于我”是对我本人的一些介绍和对这个网站的一些想法的说明。网站布局1.总体布局网站的整体布局分为六部分：#container，#header、#sidebar，#maincontent，#content、#footer，用一个div#wrap包裹起来。这样只要把#wrap设置居中，整个网站页面就可以达到居中的效果。#container部分此部分是整个页面的LOGO，背景是高清晰图片，可以与菜单栏完美融合。B.#header部分设置了网站的主菜单，与LOGO融合在一起，文字和图片也很协调。C.#sidebar部分设置了SPRY菜单，可以提供二级菜单支持，更好的支持浏览，并且还设置了滚动字幕，是页面看起来更活泼。D.#maincontent包含了sidebar和content两部分，主要的作用是使得页面主体部分风格一致。E.#content只有注册页面的时候没有#sidebar，其他都存在。F.#footer这里包含一张图片，“京叹号！”页面布局如下：#header#header#content#sidebar#content#sidebar#footer#footer模板的应用3.JS的应用对于javascript，我更倾向于使用javascript的一个很优秀的框架——Jquery来实现所有的JS动态效果。在本网站中，我用到了两个JS特效：A．相册页面展示。这个页面用的是Jquery的galleriffic插件，很轻松地实现了图片幻灯片播放的效果，可设置自动或手动播放。B.关于我展示：这个页面用的是Jquery和move插件，实现了页面叠加和图文混排的效果，可设置自动或手动播放。运行环境经过测试，本网站在IE7版本以上浏览器和Firefox浏览器中浏览能达到最佳效果。IE6中的兼容效果没有那么好。设计心得这个网站整体设计比较简单，也不是非常的漂亮，但我觉得我这个网站最大的特点就是朴素，给人一种一目了然的感觉，同时几乎包括了作为一个北京球迷想了解这个赛季所有大事的信息。在设计网站的过程中，了解了许多以前自己不知道的东西，比如