兴趣篮球网站设计与实现
摘 要关于篮球网站的网页大多只有单纯的视频，爱好相同的人无法近一步交流。基于此兴趣篮球网站提供一个兴趣平台。通过这个兴趣平台，访问者能以评论发帖和浏览博客的形式结交朋友。可以在网站观看比赛视频，了解球队信息，获取篮球赛事的最新资讯，评论所见所想，畅所欲言。网站制作主要包含的特效是js特效制作，自动切换滚动的特效使本网站更具多元化。网站特点明显，以黑色为主白色为辅，布局采用图文并用，直观有吸引力，相信会受到许多篮球爱好者的喜爱。
目 录
一、引言 1
二、网站开发工具与技术 1
三、网站设计制作分析 1
（一）网站总体设计 1
（二）网站详细设计 3
1.网站的创意特色 3
2.网站的结构组成 3
3.网站首页制作及其效果图 3
4.网站子页制作及其效果图 6
四、网站代码及css分析 9
（一）网站首页代码及css分析 9
1.首页div结构和层样式 9
2.首页html代码 10
3.首页css样式 10
4.首页中的特效制作 11
（二）网站子页代码分析 12
1.子页div结构和层样式 12
2.子页html代码布局 12
3.子页css样式 13
五、总结 13
致谢 15
参考文献 16
一、引言
制作兴趣篮球网站的初衷是给予篮球爱好者一个沟通的平台，如今的网络社会也有不少出名的篮球资讯网站，譬如虎扑、优酷、腾讯体育等等，但这些网站基本都是清一色的比赛视频或者大片的文字平台，很少有视频和互动平台结合的网站，因此有这个契机设计这个网站给了访问者更多的沟通性和选择性，添加了博客论坛增加互动，这无疑是篮球爱好者的喜事。可以浏览到关于篮球及其赛事的一手资讯，可以与其他人一起交流观看赛后的所闻所想，也可以结交五湖四海的朋友。此网站给访问者增添了更多的可能性，相信推出之际一定会受到大家的欢迎。
二、网站开发工具与技术
设计制作篮球兴趣网站的过程，技术层面主要使用了Dreamweaver和 Ph
*好棒文|www.hbsrm.com +Q: ￥351916072$
otoshop。构建网站结构使用了div和css。主要需要解决的问题是首页中通过编写代码程序使图片达到自动滚动切换效果和文字滚动自动切换效果。
三、网站设计制作分析
（一）网站总体设计
兴趣篮球网站的构建方法是图文并茂，顾名思义图片与文字的结合生动形象的传递网站所要表达的内容，十分具有吸引力。除此之外重点添加了博客论坛这个页面，用以互动和沟通。
首页布局是自上而下从左到右布局的，根据人的阅读习惯，网页上半部分和偏左部分会引起重视，往往是第一时间跃入眼帘，因此在左上角是网站的logo，紧接着排列网站的宣传图片和宣传标语，标语嵌入图中伴随着js特效，抓住访问者的视线。布局如图31所示。
图31 网站页面设计布局
全网站都是图文混排的排列结构方式，以首页为列树形结构图如图32所示。
图32 首页树形结构
以NBA球队这个子页面为列树形结构图如图33所示。
图32 子页树形结构图
（二）网站详细设计
1.网站的创意特色
网站的构建方式是图文混排，宋体的文字叙述配上图片形容，增强了信息表达程度，整个网页以黑色为主白色为辅，三句宣传语添加于图片中制作chengjs特效的滚动方式，是网站一大亮丽风景线。同时还有博客论坛的部分增强访问者之间的交流。
2.网站的结构组成
兴趣篮球网站分成六个部分，分别是：网站首页、赛程、博客论坛、NBA球队、比赛视频和联系我们。
网站首页的内容分四部分，上部是导航栏；中间左部分是比赛时间、赛后点评和球员们的精彩瞬间；中间右部分是球星推荐和热门比赛视频；最后底部分是论坛文章及信息留言。
赛程这个子页面包含东部地区和西部地区每支球队的季后赛赛程安排，有准确的时间安排，球迷能及时观看直播。
博客论坛这个页面主要介绍了当下实时热度最高的文章，访问者可以浏览之后在文章下面写出自己的见解所想，也可以互相沟通。
NBA球队这个页面顾名思义介绍了各个不同的球队详情，如热火、马刺、湖人等等，都会有详细的介绍供访问者浏览。
比赛视频这个页面与首页分布相似，中间左部分是赛事直播，其余与首页传递的信息一致。
联系我们这个页面介绍了兴趣篮球网站建设的初衷，通过发布留言访问者可以给管理员提出自己的想法和建议。
3.网站首页制作及其效果图
首页的内容分四部分，上部是导航栏；中间左部分是比赛时间、赛后点评和球员们的精彩瞬间；中间右部分是球星推荐和热门比赛视频；最后底部分是论坛文章及信息留言。
首页的导航栏的组成是网站的logo和首页，赛程，博客论坛，NBA球队，比赛视频，联系我们。网站制作使用无序列表实现了整个导航栏的呈现，导航栏设计如图33所示。
图33 导航栏设计图
导航栏下插入了图片，是一张燃烧热火的篮球图片，图片上三句宣传标语制作成js特效，自动切换文字，体现网站所传递的中心思想。网站插图如图34所示。
图34 网站插图
首页主体部分有季后赛、比赛瞬间、球星推荐、赛后点评和热门比赛，季后赛中介绍了赛程的队伍、时间以及排名，大家可以直观的看到每个队伍的比赛安排。比赛瞬间介绍了每场比赛的精彩操作。球星推荐介绍了热门的杰出球星，访问者可以来看看自己最喜爱的球星是否上榜。赛后点评是类似论坛交流的沟通部分，是搭建篮球爱好者互动的部分，可以在里面写下观看完比赛的想法。热门比赛是选用了最受关注的几场比赛放在首页链接，访问者可以来回顾热门。首页主体如图35所示。
图35 首页主体图
网站底部由四部分构成：最新的文章、热门文章、信息留言和版权信息，最新的文章顾名思义让访问者能浏览到最近的文章更新信息；热门文章即人气浏览量较高的文章；信息留言则可以把建议传递给开发人员。最后加上兴趣篮球网站的版权信息。首页底部图如图36所示。
图36 首页底部图
以上就构成了兴趣篮球网的首页制作。首页效果图如图37所示。
图37 网站首页效果图
4.网站子页制作及其效果图
目 录
一、引言 1
二、网站开发工具与技术 1
三、网站设计制作分析 1
（一）网站总体设计 1
（二）网站详细设计 3
1.网站的创意特色 3
2.网站的结构组成 3
3.网站首页制作及其效果图 3
4.网站子页制作及其效果图 6
四、网站代码及css分析 9
（一）网站首页代码及css分析 9
1.首页div结构和层样式 9
2.首页html代码 10
3.首页css样式 10
4.首页中的特效制作 11
（二）网站子页代码分析 12
1.子页div结构和层样式 12
2.子页html代码布局 12
3.子页css样式 13
五、总结 13
致谢 15
参考文献 16
一、引言
制作兴趣篮球网站的初衷是给予篮球爱好者一个沟通的平台，如今的网络社会也有不少出名的篮球资讯网站，譬如虎扑、优酷、腾讯体育等等，但这些网站基本都是清一色的比赛视频或者大片的文字平台，很少有视频和互动平台结合的网站，因此有这个契机设计这个网站给了访问者更多的沟通性和选择性，添加了博客论坛增加互动，这无疑是篮球爱好者的喜事。可以浏览到关于篮球及其赛事的一手资讯，可以与其他人一起交流观看赛后的所闻所想，也可以结交五湖四海的朋友。此网站给访问者增添了更多的可能性，相信推出之际一定会受到大家的欢迎。
二、网站开发工具与技术
设计制作篮球兴趣网站的过程，技术层面主要使用了Dreamweaver和 Ph
*好棒文|www.hbsrm.com +Q: ￥351916072$
otoshop。构建网站结构使用了div和css。主要需要解决的问题是首页中通过编写代码程序使图片达到自动滚动切换效果和文字滚动自动切换效果。
三、网站设计制作分析
（一）网站总体设计
兴趣篮球网站的构建方法是图文并茂，顾名思义图片与文字的结合生动形象的传递网站所要表达的内容，十分具有吸引力。除此之外重点添加了博客论坛这个页面，用以互动和沟通。
首页布局是自上而下从左到右布局的，根据人的阅读习惯，网页上半部分和偏左部分会引起重视，往往是第一时间跃入眼帘，因此在左上角是网站的logo，紧接着排列网站的宣传图片和宣传标语，标语嵌入图中伴随着js特效，抓住访问者的视线。布局如图31所示。
图31 网站页面设计布局
全网站都是图文混排的排列结构方式，以首页为列树形结构图如图32所示。
图32 首页树形结构
以NBA球队这个子页面为列树形结构图如图33所示。
图32 子页树形结构图
（二）网站详细设计
1.网站的创意特色
网站的构建方式是图文混排，宋体的文字叙述配上图片形容，增强了信息表达程度，整个网页以黑色为主白色为辅，三句宣传语添加于图片中制作chengjs特效的滚动方式，是网站一大亮丽风景线。同时还有博客论坛的部分增强访问者之间的交流。
2.网站的结构组成
兴趣篮球网站分成六个部分，分别是：网站首页、赛程、博客论坛、NBA球队、比赛视频和联系我们。
网站首页的内容分四部分，上部是导航栏；中间左部分是比赛时间、赛后点评和球员们的精彩瞬间；中间右部分是球星推荐和热门比赛视频；最后底部分是论坛文章及信息留言。
赛程这个子页面包含东部地区和西部地区每支球队的季后赛赛程安排，有准确的时间安排，球迷能及时观看直播。
博客论坛这个页面主要介绍了当下实时热度最高的文章，访问者可以浏览之后在文章下面写出自己的见解所想，也可以互相沟通。
NBA球队这个页面顾名思义介绍了各个不同的球队详情，如热火、马刺、湖人等等，都会有详细的介绍供访问者浏览。
比赛视频这个页面与首页分布相似，中间左部分是赛事直播，其余与首页传递的信息一致。
联系我们这个页面介绍了兴趣篮球网站建设的初衷，通过发布留言访问者可以给管理员提出自己的想法和建议。
3.网站首页制作及其效果图
首页的内容分四部分，上部是导航栏；中间左部分是比赛时间、赛后点评和球员们的精彩瞬间；中间右部分是球星推荐和热门比赛视频；最后底部分是论坛文章及信息留言。
首页的导航栏的组成是网站的logo和首页，赛程，博客论坛，NBA球队，比赛视频，联系我们。网站制作使用无序列表实现了整个导航栏的呈现，导航栏设计如图33所示。
图33 导航栏设计图
导航栏下插入了图片，是一张燃烧热火的篮球图片，图片上三句宣传标语制作成js特效，自动切换文字，体现网站所传递的中心思想。网站插图如图34所示。
图34 网站插图
首页主体部分有季后赛、比赛瞬间、球星推荐、赛后点评和热门比赛，季后赛中介绍了赛程的队伍、时间以及排名，大家可以直观的看到每个队伍的比赛安排。比赛瞬间介绍了每场比赛的精彩操作。球星推荐介绍了热门的杰出球星，访问者可以来看看自己最喜爱的球星是否上榜。赛后点评是类似论坛交流的沟通部分，是搭建篮球爱好者互动的部分，可以在里面写下观看完比赛的想法。热门比赛是选用了最受关注的几场比赛放在首页链接，访问者可以来回顾热门。首页主体如图35所示。
图35 首页主体图
网站底部由四部分构成：最新的文章、热门文章、信息留言和版权信息，最新的文章顾名思义让访问者能浏览到最近的文章更新信息；热门文章即人气浏览量较高的文章；信息留言则可以把建议传递给开发人员。最后加上兴趣篮球网站的版权信息。首页底部图如图36所示。
图36 首页底部图
以上就构成了兴趣篮球网的首页制作。首页效果图如图37所示。
图37 网站首页效果图
4.网站子页制作及其效果图
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/696.html
