篮球部落网站的设计与实现
目录
一、引言 4
（一）开发背景 4
（二）目的和意义 4
二、网站分析与功能设计 4
（一）可行性分析 5
（二）功能设计 5
三、开发软件简介 6
（一）Dreamweaver CS6简介 6
（二）PhotoShop CS6简介 7
（三）IE tester简介 7
四、网站的详细设计与功能实现 8
（一）网站的风格 8
（二）页面的布局 8
（三）导航栏的设计与实现 9
（四）首页的详细设计与实现 11
五、系统测试 20
(一) 测试环境 20
(二) 测试过程 20
(三) 测试结果 20
六、总结 20
致谢 20
参考文献 21
一、引言
（一）开发背景
近年来，通过各个渠道可以了解到现在很多人身体健康问题越来越严重，特别是一些中小学学生，现在学习压力那么大，致使他们忽视健康问题。过去一年，在各大新闻网站上不时就会报道一些孩子在体育课上忽然晕倒等可怕消息。再加上现在大气污染问题迟迟未能得到改善，引起了社会各界人士的注意，我们无时无刻不被雾霾所侵害。介于改善此类问题，最好的方法就是加强体育锻炼，只有身体强壮了才能少受病魔的折磨。本网站通过介绍了篮球的魅力，让越来越多的人喜好篮球，参与到篮球运动中，进而从而在不知不觉中加强了对身体的锻炼。
该网站主要用HTML为基础开发语言，通过DIV+CSS设计方法对网站结构进行布局。近年来通过姚明，易建联等中国球员加盟NBA球队，国人对NBA也越来越关注了。再加上 *好棒文|www.hbsrm.com +Q: 3_5_1_9_1_6_0_7_2
现在大气污染那么严重，人们也越来越关注自己的身体健康，所以开发一个关于篮球的静态网站，让大家更加了解篮球知识，从而投入到篮球运动中来。
（二）目的和意义
现在，互联网正在如春笋般崛地而起，网络已经与我们的生活息息相关起来，在我们生活的各个方面都有互联网的足迹，人们的生活已经越来越离不开互联网了。人们在上网时，信息资源通常是由一个又一个WEB页面关联起来的。通过文字、色彩、多媒体的不同组合以及合理的布局最终呈现在浏览者屏幕上绚丽纷呈的页面。作为一个篮球爱好者，喜欢收集历年那些经典的比赛集锦和球星信息。通过这个网站可以提供给那些热爱篮球的人们一个信息交流的窗口。让大家更好的去了解那些NBA经典的球星的职业生涯，向传奇致敬。
二、网站分析与功能设计
（一）可行性分析
可行性分析是做一个项目首要考虑到的问题。可行性在项目的开始阶段对网站制作的下一步起着导向的作用。从不同方面进行分析，可以预料到在构建网站时会遇到的关键性问题，从而拟定最佳的解决方案。在做这方面的分析工作时可以从以下几方面出发。
1.技术可行性
该网站采用HTML超文本标记语言，HTML是一种常见的网页语言，但独立于任何平台。即使你没有任何计算机基础，花上个一个月时间都可以轻松上手。布局采用DIV+CSS布局，这样会让你的界面整洁美观，并且可以随时调节网站布局。所以说在技术方面是可行的。
2.经济可行性
本网站的搭建可以说成本是非常低的，如果对代码足够熟悉的话，就可以用最简单的记事本就可以完成网页的编写。当然了我们为了方便可以采用Dreamweaver这种易用的设计软件。这将会使人们更加高效的开发网站。通过以往对做工程的经验，前期的设计、中期的搭建和后期的兼容性测试大概需要三个星期左右。本网站在功能上来说并不是很复杂，开发周期也短，人员和财力物力的支出也不是很多，因此从经济方面是可行的。
3.操作可行性
本系统在设计的时候符合传统网站的结构，用户在浏览的时候会很容易上手，因此操作上来说不存在困难性。
4.网站实用性
网站的目标就是建立一个关于篮球的资讯分享网站，这对广大热爱篮球的人来说是很不错的消息。
（二）功能设计
网站共分为六大板块，有首页、新闻、大话NBA、十佳球、图片、和街头篮球六大板块，每个版块都由相应的子页来介绍相关信息。这样方便浏览者找到自己感兴趣的新闻,如图2-1所示：
图2-1 组织结构图
三、开发软件简介
（一）Dreamweaver CS6简介
Dreamweaver?CS6是美国知名软件开发公司Adobe设计的一套拥有可视化编辑软件，用于制作并编辑网站和移动应用程序的网页设计软件。本网站就是在这款软件中完成的，在各个方面都给我提供了便利。例如在代码的编写后可以随时在这款软件中查看设计的网页，还会在一写代码的书写上提示，如图3-1所示:
Dreamweaver展示图：
图3-1 Dreamweaver CS6展示图
（二）PhotoShop CS6简介
PhotoShop图象处理软件的第十三代，是一个重大版本更新。在编辑像素合成的图片时Photoshop的功能很强大。它提供了大量的易于使用的编辑工具和修补工具。新的版本添加了好多种风格滤镜，精通这些技术会让制作者处理图片时得心应手。在做网站时需要插入较多图片，而这些图片大多数都是从网上下载下来的，难免有些水印或者像素大小难控制，或者想加入一些个人元素，利用这款软件就可以轻松解决问题，如图3-2所示:
软件界面图如下：
图3-2 PhotoShop CS6展示图
（三）IE tester简介
IETester是一个测试网页排版的工具。做网站尤其是用户使用IE浏览器的时候，在兼容性方面特别容易出现问题。有可能在CHrome里面排版是正确的，在IE中就会变得面目全非。这时候对于程序开发人员把所有的IE版本都安装不太现实。IEtester应运而生，它内含5中IE版本（从IE5-IE10），可以完全模仿在这些浏览器中的显示效果。这样方便了开发人员的调试时间，也节约了开发成本，软件界面如图3-3所示：
图3-3 IE tester界面
四、网站的详细设计与功能实现
（一）网站的风格
该网站采用了简约的设计风格，网站的内容比较清晰，布局合理。网站的基调颜色有三种 灰色、蓝色、和白色，页面风格简洁紧凑。文字与图片显示相对集中，以连接的形式链接到其他网站。该网站使用较多的JS和Jquery特效，更加丰富网站的内容。在网站的风格上注重实用性和便利性，如图4-1所示：
图4-1 首页展示图
图4-2 子页展示图
（三）导航栏的设计与实现
导航栏的风格和网站的风格一致，简约清晰。白色的字在黑色的背景下显得很清晰，当鼠标悬停在首页部分或者其他部分的时候，在文字下方会出现一道绿线，帮助你分辨鼠标悬停的位置如图4-3所示：
图4-3 导航栏效果图
[1]：BillScottTheresaNeil主编《Web界面设计》电子工业出版社2009年8月 第一版
一、引言 4
（一）开发背景 4
（二）目的和意义 4
二、网站分析与功能设计 4
（一）可行性分析 5
（二）功能设计 5
三、开发软件简介 6
（一）Dreamweaver CS6简介 6
（二）PhotoShop CS6简介 7
（三）IE tester简介 7
四、网站的详细设计与功能实现 8
（一）网站的风格 8
（二）页面的布局 8
（三）导航栏的设计与实现 9
（四）首页的详细设计与实现 11
五、系统测试 20
(一) 测试环境 20
(二) 测试过程 20
(三) 测试结果 20
六、总结 20
致谢 20
参考文献 21
一、引言
（一）开发背景
近年来，通过各个渠道可以了解到现在很多人身体健康问题越来越严重，特别是一些中小学学生，现在学习压力那么大，致使他们忽视健康问题。过去一年，在各大新闻网站上不时就会报道一些孩子在体育课上忽然晕倒等可怕消息。再加上现在大气污染问题迟迟未能得到改善，引起了社会各界人士的注意，我们无时无刻不被雾霾所侵害。介于改善此类问题，最好的方法就是加强体育锻炼，只有身体强壮了才能少受病魔的折磨。本网站通过介绍了篮球的魅力，让越来越多的人喜好篮球，参与到篮球运动中，进而从而在不知不觉中加强了对身体的锻炼。
该网站主要用HTML为基础开发语言，通过DIV+CSS设计方法对网站结构进行布局。近年来通过姚明，易建联等中国球员加盟NBA球队，国人对NBA也越来越关注了。再加上 *好棒文|www.hbsrm.com +Q: 3_5_1_9_1_6_0_7_2
现在大气污染那么严重，人们也越来越关注自己的身体健康，所以开发一个关于篮球的静态网站，让大家更加了解篮球知识，从而投入到篮球运动中来。
（二）目的和意义
现在，互联网正在如春笋般崛地而起，网络已经与我们的生活息息相关起来，在我们生活的各个方面都有互联网的足迹，人们的生活已经越来越离不开互联网了。人们在上网时，信息资源通常是由一个又一个WEB页面关联起来的。通过文字、色彩、多媒体的不同组合以及合理的布局最终呈现在浏览者屏幕上绚丽纷呈的页面。作为一个篮球爱好者，喜欢收集历年那些经典的比赛集锦和球星信息。通过这个网站可以提供给那些热爱篮球的人们一个信息交流的窗口。让大家更好的去了解那些NBA经典的球星的职业生涯，向传奇致敬。
二、网站分析与功能设计
（一）可行性分析
可行性分析是做一个项目首要考虑到的问题。可行性在项目的开始阶段对网站制作的下一步起着导向的作用。从不同方面进行分析，可以预料到在构建网站时会遇到的关键性问题，从而拟定最佳的解决方案。在做这方面的分析工作时可以从以下几方面出发。
1.技术可行性
该网站采用HTML超文本标记语言，HTML是一种常见的网页语言，但独立于任何平台。即使你没有任何计算机基础，花上个一个月时间都可以轻松上手。布局采用DIV+CSS布局，这样会让你的界面整洁美观，并且可以随时调节网站布局。所以说在技术方面是可行的。
2.经济可行性
本网站的搭建可以说成本是非常低的，如果对代码足够熟悉的话，就可以用最简单的记事本就可以完成网页的编写。当然了我们为了方便可以采用Dreamweaver这种易用的设计软件。这将会使人们更加高效的开发网站。通过以往对做工程的经验，前期的设计、中期的搭建和后期的兼容性测试大概需要三个星期左右。本网站在功能上来说并不是很复杂，开发周期也短，人员和财力物力的支出也不是很多，因此从经济方面是可行的。
3.操作可行性
本系统在设计的时候符合传统网站的结构，用户在浏览的时候会很容易上手，因此操作上来说不存在困难性。
4.网站实用性
网站的目标就是建立一个关于篮球的资讯分享网站，这对广大热爱篮球的人来说是很不错的消息。
（二）功能设计
网站共分为六大板块，有首页、新闻、大话NBA、十佳球、图片、和街头篮球六大板块，每个版块都由相应的子页来介绍相关信息。这样方便浏览者找到自己感兴趣的新闻,如图2-1所示：
图2-1 组织结构图
三、开发软件简介
（一）Dreamweaver CS6简介
Dreamweaver?CS6是美国知名软件开发公司Adobe设计的一套拥有可视化编辑软件，用于制作并编辑网站和移动应用程序的网页设计软件。本网站就是在这款软件中完成的，在各个方面都给我提供了便利。例如在代码的编写后可以随时在这款软件中查看设计的网页，还会在一写代码的书写上提示，如图3-1所示:
Dreamweaver展示图：
图3-1 Dreamweaver CS6展示图
（二）PhotoShop CS6简介
PhotoShop图象处理软件的第十三代，是一个重大版本更新。在编辑像素合成的图片时Photoshop的功能很强大。它提供了大量的易于使用的编辑工具和修补工具。新的版本添加了好多种风格滤镜，精通这些技术会让制作者处理图片时得心应手。在做网站时需要插入较多图片，而这些图片大多数都是从网上下载下来的，难免有些水印或者像素大小难控制，或者想加入一些个人元素，利用这款软件就可以轻松解决问题，如图3-2所示:
软件界面图如下：
图3-2 PhotoShop CS6展示图
（三）IE tester简介
IETester是一个测试网页排版的工具。做网站尤其是用户使用IE浏览器的时候，在兼容性方面特别容易出现问题。有可能在CHrome里面排版是正确的，在IE中就会变得面目全非。这时候对于程序开发人员把所有的IE版本都安装不太现实。IEtester应运而生，它内含5中IE版本（从IE5-IE10），可以完全模仿在这些浏览器中的显示效果。这样方便了开发人员的调试时间，也节约了开发成本，软件界面如图3-3所示：
图3-3 IE tester界面
四、网站的详细设计与功能实现
（一）网站的风格
该网站采用了简约的设计风格，网站的内容比较清晰，布局合理。网站的基调颜色有三种 灰色、蓝色、和白色，页面风格简洁紧凑。文字与图片显示相对集中，以连接的形式链接到其他网站。该网站使用较多的JS和Jquery特效，更加丰富网站的内容。在网站的风格上注重实用性和便利性，如图4-1所示：
图4-1 首页展示图
图4-2 子页展示图
（三）导航栏的设计与实现
导航栏的风格和网站的风格一致，简约清晰。白色的字在黑色的背景下显得很清晰，当鼠标悬停在首页部分或者其他部分的时候，在文字下方会出现一道绿线，帮助你分辨鼠标悬停的位置如图4-3所示：
图4-3 导航栏效果图
[1]：BillScottTheresaNeil主编《Web界面设计》电子工业出版社2009年8月 第一版
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1729.html
