基于Html的NBA篮球主题网页设计

「爱情、让人受尽委屈。」 2024-04-03 08:06 69阅读 0赞

目 录

1 网站的主题 1  
2 网站的规划 1  
3 网站的页面设计 1  
4页面设计的主要技术 2  
4.1 XHTML的关键标记元素、设计中常用的标记元素 2  
4.2 CSS的介绍 3  
4.3 joomla概述 3  
4.3.1先进的网站技术的运用 4  
4.3.2简单且丰富的操作接口 4  
4.3.3高度的客制和开发的弹性 4  
5 Joomal的技术实现 4  
5.1网站主题 4  
5.1.1菜单介绍 4  
5.1.2 顶部菜单 4  
5.1.3 主菜单 5  
5.1.4 内容 5  
5.1.5 媒体管理器 7  
论文注释 8  
参考文献 9  
致 谢 10  
1 网站的主题  
篮球是我曾经的梦，而NBA是这个梦最夺目的色彩，我知道我再也无法像以前一样肆无忌惮的继续着关于篮球的种种梦想，无法找回曾经那种叱咤风云的感觉，但是，我会依然执著地热爱着她，它让我明白了什么叫做争取、也让我明白了什么叫做努力、想要打得越好、就越要去努力、生命中没有什么不用努力就能争取到的、一切的一切、都要靠自己努力、我想说、我不会再在篮球场上留下遗憾、尽管会输、但也精彩、所以我将全力以赴、对待每一场、那怕会摔倒、更能激起我的斗心、摔得越厉害、斗心越强、想对自己说、加油……永远将曾经所有关于篮球美好的记忆珍藏［2］……  
2 网站的规划  
网站只要由一个主网页，还有若干个通过超链接进入的网页。主网页主要展示NBA一个大概信息，通过每个标题还可以点击到各个网页了解消息的信息［3］。本网站主要以照片为主，文字解释辅助，因为照片统领了一个时刻的光彩和一个人精神，照片还有什么意义，那就是我们给这样的照片赋予了背后的故事，或者后来的各种可能。所以照片所说的意义就是神秘的一种东西，它不会随着时间的消失而消失。  
5 Joomal的技术实现  
5.1网站主题  
5.1.1菜单介绍  
菜单有使导航网页上尽可能容易为用户。那里不同的菜单不同的任Joomla ！已预定四种菜单中的样本数据。我们可以添加许多额外的菜单或作为您想，当然，也禁用。第四菜单，顺便说一下，是不会显示在我们的例子。本文转载自http://www.biyezuopin.vip/onews.asp?id=14703已登记的用户看到了所谓的用户菜单后，他或她登录。  
5.1.2 顶部菜单  
在顶部菜单中的高增长是在网页上。它使用户快速访问最重要的网页内容。这样的菜单往往显示产品，联系人和公司信息。  
5.1.3 主菜单  
主菜单是中央导航领域的网页。应该永远是一个链接，返回第一页。这个菜单应该会出现在相同的位置的每个页面上的网站。主菜单是一个重要的方向发生的用户。网站主页截图如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="keywords"   />
    <meta name="description" content="我的网页nba">
    <link rel="stylesheet" type="text/css" href="images/style.css">
    
    <title>我爱NBA</title>
    
    </head><body class="body1">
    <div id="getValues" value="index" style="display: none;"></div>
    <div id="getParams" value="a:0:{}" style="display: none;"></div>
         
    <div id="top">
        <div id="header">
    		<div id="logo"><div id="MODBLK_222" class="mod_block media_image mb_logo_block">
    <div class="flash_image">
    <img src="images/logo.png" alt="" width="292" height="88">
    </div>
    
    </div>
                </div>
                
             
    <div class="switch_langbar" style="float: right; margin-top: 15px; margin-right: 15px;">
    </div>
    
    
         
              <div id="nav_bg">
     <div id="nav">
    	<div id="MODBLK_225" class="mod_block mb_56YrvV58_block">
    
    
    			<div class="nav_l"></div>
            	<ul id="nav_pMf9ZF" class="navigation">
    			    <li>
            <a href="index.htm">
        首页</a>        </li>
            <li>
            <a href="news.html">
        最新资讯</a>        </li>
            <li>
            <a href="teams.html">
        最爱的球队</a>        </li>
            <li class="">
            <span id=""><a href="stars.html">
        最爱的球星</a>
        <ul style="display: none;">
            </ul></span>
            </li>
            <li>
            <a href="mvp.html">
        联盟MVP</a>        </li>
            <li>
            <a href="champion.html">
        总冠军球队</a>        </li>
            <li>
            <a href="me.html">
        作者介绍</a>        </li>
              </ul>
    			<div class="nav_r"></div>
    
    </div>
    	</div>
        </div>  
                </div>      
    </div>
     
        
            
      
    <div id="main_div">
    
    
    <div class="web_bg">
      
    <div id="main_all">
    <div id="mainmain">
    
     <div id="banner_bg">
       <div id="banner">
    	<div id="MODBLK_223" class="mod_block media_image mb_banner_block">
    <div class="flash_image">
    
    <img src="images/002.jpg" alt="" width="940" height="326">
    </div>
    
    
    </div>
    	</div>
        </div>  
    	 <div id="main_con" class="web_bg">
        
                      
            <div id="use"><div id="MODBLK_939" class="mod_block mb_i8swgeag_block">
    <div id="marquee_demo5dNRXF" class="marquee_list">
    <table align="center" border="0" cellpadding="0" cellspacing="0">
    <tbody><tr>
    <td id="marquee_product15dNRXF" valign="top">
    <table width="100%" border="0" cellpadding="0" cellspacing="8" height="100">
    <tbody><tr>
    <td><a href="content/team_rehuo.html" title="热火"><img style="width: 160px; height: auto; padding: 3px 0px;" src="images/teams/rehuo.jpg" name="picautozoom" width="160" border="0" height="120"></a></td>
    <td><a href="content/team_huren.html" title="湖人"><img style="width: 160px; height: auto; padding: 8px 0px;" src="images/teams/huren.jpg" name="picautozoom" width="160" border="0" height="120"></a></td>
    <td><a href="content/team_huojian.html" title="火箭"><img style="width: 160px; height: auto; padding: 8px 0px;" src="images/teams/huojian.jpg" name="picautozoom" width="160" border="0" height="120"></a></td>
    <td><a href="content/team_maci.html" title="马刺"><img style="width: 160px; height: auto; padding: 8px 0px;" src="images/teams/maci.jpg" name="picautozoom" width="160" border="0" height="120"></a></td>
    <td><a href="#" title="凯尔特人"><img style="width: 160px; height: auto; padding: 8px 0px;" src="images/teams/kaierteren.jpg" name="picautozoom" width="160" border="0" height="120"></a></td>
    <td><a href="#" title="爵士"><img style="width: 160px; height: auto; padding: 8px 0px;" src="images/teams/jueshi.jpg" name="picautozoom" width="160" border="0" height="120"></a></td>
    <td><a href="#" title="篮网"><img style="width: aoto; height: 128; padding: 8px 0px;" src="images/teams/lanwang.jpg" name="picautozoom" width="160" border="0" height="120"></a></td>
    <td><a href="content/team_xiaoniu.html" title="小牛队"><img style="width: 160px; height: auto; padding: 0px;" src="images/teams/sll.jpg" name="picautozoom" width="160" border="0" height="120"></a></td>
    
    </tr>
    
    </tbody></table>
    </td>
    <td id="marquee_product25dNRXF" valign="top">
    
    </td>
    </tr>
    </tbody></table>
    </div>
    <div class="list_bot"></div>
    <script type="text/javascript">
    
    
    var speed=20;
    var marquee_product25dNRXF = document.getElementById("marquee_product25dNRXF");
    var marquee_product15dNRXF = document.getElementById("marquee_product15dNRXF");
    var marquee_demo5dNRXF = document.getElementById("marquee_demo5dNRXF");
    marquee_product25dNRXF.innerHTML=marquee_product15dNRXF.innerHTML;
    function Marquee5dNRXF(){
        
    if(marquee_demo5dNRXF.scrollLeft>=marquee_product15dNRXF.scrollWidth){
        
    marquee_demo5dNRXF.scrollLeft=0;
    }
    else{
        
    marquee_demo5dNRXF.scrollLeft++;
    }
    }
    var MyMar5dNRXF=setInterval(Marquee5dNRXF,speed);
    marquee_demo5dNRXF.onmouseover=function(){
        clearInterval(MyMar5dNRXF);}
    marquee_demo5dNRXF.onmouseout=function(){
        MyMar5dNRXF=setInterval(Marquee5dNRXF,speed);}
    
    </script>
    
    </div>
    </div>
      
            <div id="main_01">
    		<div id="i_left"><div id="MODBLK_914" class="mod_block mb_aSlzIyVD_block">
    <h3 class="blk_t">球  星</h3>
    
    
    <div class="list_main category">
    	<div class="prod_type">
    	<div id="pro_type_l7bBq1">
    		<ul>
    			    <li>
            <a href="content/star_kobe.html">
        科比布莱恩特KOBE</a>
            </li>
            <li>
            <a href="content/star_james.html">
        勒布朗詹姆斯JAMES</a>
            </li>
            <li>
            <a href="content/star_rose.html">
        罗斯ROSE</a>
            </li>
            <li>
            <a href="content/star_nuoweiciji.html">
        德克-诺维茨基</a>
            </li>
            <li>
            <a href="content/star_weide.html">
        韦德WADE</a>
            </li>
            <li>
            <a href="content/star_yaoming.html">
        姚明YAO</a>
            </li>
        			<div class="blankbar1"></div>
    		</ul>		
    	</div>
    	</div>
    	<div class="list_bot"></div>
    </div>
    <div class="blankbar"></div>
    
    
    </div>
    <div id="MODBLK_916" class="mod_block mb_03Kj95bK_block">
    <h3 class="blk_t">最爱球队</h3>
    <div align="center"><a href="content/team_huren.html"><img src="images/teams/huren.jpg" alt="湖人"  border="0"></a></div>
    <div class="blankbar"></div>
    
    </div>
    </div>
         <div id="center"><div id="MODBLK_943" class="mod_block mb_IjQGfuRD_block">
    <h3 class="blk_t">2011 NBA</h3>
    <div class="list_con company_intro">
    <p><img src="images/indexnews.jpg" alt="" width="350" height="260"  align="left" style="margin-right: 10px;" />    
     
     6月12日，小牛队球员诺维茨基（中）手捧奖杯与球队成员们庆祝。当日，在NBA总决赛第六场中，达拉斯小牛队客场以105比95战胜迈阿密热火队，从而以4比2的总比分在NBA总冠军榜上第一次写上了小牛队的名字。</p>
    <div class=""><br />
    </div></div><div class="list_bot"></div>
    </div>
    </div>
            <div id="i_right"><div id="MODBLK_940" class="mod_block mb_jKadXmvB_block">
    <h3 class="blk_t">最新资讯</h3>
    <div class="list_main">
    	<div class="list_con">
    	<ul class="titlelist">
    	<li>
    	  <div align="center"><a href="content/news_01.html">美媒再谈小牛赢在团战</a><a href="http://qiche11a36.site3.sitestar.cn/qiche11a36/wwwroot/index.php?_m=mod_article&_a=article_content&article_id=87" title="最新资讯"></a>…</div>
    	</li>
    	<li>
    	  <div align="center"><a href="content/news_02.html">波什解释哭泣原因：篮</a><a href="http://qiche11a36.site3.sitestar.cn/qiche11a36/wwwroot/index.php?_m=mod_article&_a=article_content&article_id=73" title="最新资讯"></a>…</div>
    	</li>
    	<li>
    	  <div align="center"><a href="content/news_03.html">冲冠失利韦德在家禁闭</a><a href="http://qiche11a36.site3.sitestar.cn/qiche11a36/wwwroot/index.php?_m=mod_article&_a=article_content&article_id=88" title="最新资讯”"></a>…</div>
    	</li>
    <li>
      <div align="center"><a href="content/news_04.html">斯帅：热火教练组全部</a><a href="http://qiche11a36.site3.sitestar.cn/qiche11a36/wwwroot/index.php?_m=mod_article&_a=article_content&article_id=74" title="最新资讯"></a>…</div>
    </li>
    </ul>
        <div class="list_more"><a href="#"><img src="images/more_37.jpg" width="32" border="0" height="9"></a></div>
    	
    	</div>
    	<div class="list_bot"></div>
    </div>
    <div class="blankbar"></div>
    </div>
    <div id="MODBLK_944" class="mod_block mb_t7gWwKCa_block">
    <h3 class="blk_t">最爱球星</h3>
    
    		<div class="newprod">
    				<div class="newprod_top"></div>
    				<div class="newprod_con">
               
    			
    <div class="pro_over">
    	<table class="media_grid" width="100%" cellspacing="4">
    		<tbody><tr>			<td><div align="center"><a href="content/star_kobe.html"><img src="images/stars/kobe.jpg" height="200" align="absMiddle" border="0"></a></a></div></td>
    		</tr>	</tbody></table>
    </div>
    			</div>
    				<div class="list_bot"></div>
    			</div>
    			<div class="blankbar"></div>
    
    
    
    </div>
    
    </div>
    </div>
    
            
     		       
            <div class="blankbar"></div>
    	</div>
    
    <div id="footer_bg">
    
    
    <div id="footer">
    	<div class="copyright">
    	<style type="text/css">
    		.mb_foot_block {
        position:relative;}
    		.mb_foot_block a{
        display:inline;}
    	</style>
    	<div id="MODBLK_224" class="mod_block mb_foot_block">
    <div class="com_con">版权所有  <a href="http://wy.yilushang.net" target="_blank">网页作业</a>
      <br>
    </div>
    <div class="list_bot"></div>
    </div>
     </div>
    </div>
    
    <script type="text/javascript" language="javascript">
    
    </script>
    
    </div>
    
            </div>
            </div>
    
        </div>
    
    </div>

![在这里插入图片描述][dea4cd1012b14fde9be7681705997228.png_pic_center]  
![在这里插入图片描述][efa1b942d39d4afe8e14ba47050d337b.png_pic_center]  
![在这里插入图片描述][9f695f4afc854dc4b298a1119693fd21.png_pic_center]  
![在这里插入图片描述][fae02010645b445597b7381a70a00a95.png_pic_center]  
![在这里插入图片描述][9ddc4cdebcef42d785e62f726747d095.png_pic_center]  
![在这里插入图片描述][3789f68a74ba41ab96d937b05694553c.png_pic_center]  
![在这里插入图片描述][e97f439a8aa64a39b6d0d8c662a88ccb.png_pic_center]  
![在这里插入图片描述][d47052283caf45278aa173b903a310e6.png_pic_center]  
![在这里插入图片描述][4bb31cf33acb44a9a1bdbe8cb1b6f14f.png_pic_center]  
![在这里插入图片描述][eeffc6e23c8a41d6897c1544729d9764.png_pic_center]  
![在这里插入图片描述][544d89a62f294e16b6bebefc3d942ded.png_pic_center]

[dea4cd1012b14fde9be7681705997228.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/86c273eb9fec4cd6a655e19cb5251a10.png
[efa1b942d39d4afe8e14ba47050d337b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/0f567305a5514424848c66fc11e9af2e.png
[9f695f4afc854dc4b298a1119693fd21.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/54bf4e3e0fcc4ab082570d53656bf7cf.png
[fae02010645b445597b7381a70a00a95.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/b4eb1ddaaf624bbd8ba797f8eb6851f7.png
[9ddc4cdebcef42d785e62f726747d095.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e2b101afb2e947deacfddf94ccee73f6.png
[3789f68a74ba41ab96d937b05694553c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/06278710d29b460eaf5177c97e768026.png
[e97f439a8aa64a39b6d0d8c662a88ccb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/4227a247467d4aabb2c6dccd3ffd7e5a.png
[d47052283caf45278aa173b903a310e6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/2f2b979071cf42c9ac92160147dc0a76.png
[4bb31cf33acb44a9a1bdbe8cb1b6f14f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e48b1da5b2cd405eb3be51744cabf65e.png
[eeffc6e23c8a41d6897c1544729d9764.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/107e1d24e08a4275b076cc8be5c3bbb8.png
[544d89a62f294e16b6bebefc3d942ded.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/41b1bb5f5ac34d82ae2777551b095e65.png