。这种方式主要用于对具体的标签作具体的调整，其作用的范围只限于本标签。嵌入式样式表不能充分体现出CSS样式表的优越性，所以应用场合并不多。2.5.2 内联式样式表
若想只对当前页面应用样式，就要使用内联式样式表。所谓内联式样式表就是把样式表定义语句放在标签中，设置时通常放在HTML代码的
部分。2.5.3 外联式样式表
外联式样式表是将指定的样式代码放到一个扩展名为.css的样式文件中以方便其他网页的调用。这种方式的优点是可以通过一个.css文件管理网站中的多个网页。如果要对网站中其他页面进行样式引用，可以先把样式用记事本定义成一个“.css”的文件。例如：打开记事本，将定义的名为h3的样式代码写到记事本中，保存的文件名为example.css，代码如下：h3{
font-family:“黑体”;
color:green;
font-style:italic;
}
引用时在网页HTML代码的
标记后用引用这个样式文件，在部分的相应内容的前后加上和
。2.6 JQuery概述
jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more。[1]jQuery 在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多javascript高手加入，现在由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。[2]
jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
第三章需求分析
当今世界,加快推进信息网络化建设已成为世界各国的共识和努力方向。在信息网络化日益发展的趋势下,体育领域必然置身其中，更何况如今各种体育信息已成为网络资源必不可少的一部分，世界各国倡导的信息网络化应用领域体育都占有一席之地并呈快速发展之势。
西方发达国家很早就认识到体育新闻网站对整个国家各项体育事业的发展的良好作用。所以国外的体育事业发展的比中国较好。国外的体育网站起步比中国较早，现在发展的也比较成熟。
天下体育网为满足广大群众浏览和了解体育信息类的新闻一直致力于把该网站做大做全做好，各个板块都及时无误的报道最新体育新闻，为用户更快更全的了解体育信息搭起一座桥。
3.1 网站开发目的
对于体育网站而言，一个好的网页会给人留下深刻的印象，那样才会提高网站的知名度才会增加点击率。如果通过网站管理系统工作，就可以拓开以前传统的宣传思路，用户可以通过上网就能达到找到所需要信息的目的。
本设计简单易用，可以提高时天下体育网站的知名度和形象；直接面对浏览所提供的信息化服务，改善服务水准。
3.2 功能性需求
一个网站的设计是否成功，一方面是看主题的确定，另一个主要的方面就是设计者对于各个板块的设计规划。网站规划的内容包括的很多，如网站的结构，网站的布局，网站的风格、网站的颜色搭配以及文字图片的运用等。
本网站主要分为九个功能模块,其主要为：首页、国际足球、国内足球、NBA、CBA、羽毛球、网球、图库和综合新闻。
首页：用户浏览本站看到的第一个页面，首页主要包括其他几个页面的部分内容。
国际足球：主要介绍国际上的足球赛事新闻，其中又包括：英超、意甲、西甲、德甲和欧冠五个部分。
国内足球：主要介绍中国的足球赛事新闻和各队新闻，足球赛事包括：中超、中甲、足协杯、亚冠、国足和女足。各队新闻包括山东鲁能、广州恒大、北京国安、天津泰达、上海申花5个模块
NBA：主要有分为两大板块，全明星板块和欧盟赛区，全明星板块介绍了火箭、湖人、热火、快船、公牛、尼克斯球队。欧盟板块主要介绍西南区、东南区、太平洋区、西北赛区和中部赛区5个部分
CBA：主要介绍中国CBA以及中国篮球的相关新闻资讯。
羽毛球：主要介绍羽毛球世界锦标赛和羽毛球世界联赛两大板块。其中锦标赛包括男单、女单、男双、女双、国羽和混合新闻5个模块。世界联赛介绍各个强国的羽毛球新闻。
网球：主要分为两大板块分别为中国金花和网球大视野。中国金花介绍国内羽毛球赛程和新闻，网球大视野主要介绍网球界的赛事，视频及新闻。
综合体育：主要介绍一些综合的体育赛事新闻，如：棋牌、F1、台球、排球等。在综合体育下又包括：网球、排球、乒羽、棋牌和F1五个部分。
图库：主要放置一些与体育有关的美图，在其下包括有：滚动图集、篮球图集、足球图集和网球图集四个部分。
如图3-4所示：
图3-4 网站功能需求结构图
3.3 非功能性需求
（1）界面需求
网站的界面要求设计的美观大方，使浏览者有眼前一亮的感觉。网页色调以蓝色、橙色色为主色调，页面宽度为950px，高度根据各个页面内容而言，但不得少于两屏。
（2）硬件环境需求
本网站在软件环境方面的要求为：操作系统为Windows XP或Windows 7；浏览器为IE6.0及以上版本；开发工具是Dreamweaver 8和Fireworks。
本网站在硬件环境方面的要求为：处理器为酷睿I3以上；内存要大于等于1G；硬盘要大于250G。
（3）网站质量要求
本网站的质量要求为：保证网站运行的真确性，无链接错误、图片显示错误及其他运行错误；网站要求可靠性高、安全性高；网站设计合理、代码无冗余、运行速度快；同时要求网站的导航栏目要清晰合理。
第四章详细设计
4.1 网站的制作步骤
网站是网页的集合，一个站点用的所有网页构成一个网站，网页是网站的表现形式，网页设计是指对网站整体页面的设计，包括页面风格、配色、布局、内容等。网页设计包含的内容非常多，大体分为两个方面：一方面是纯网站本身的设计，如文字、排版、图片制作、平面设计、静态图文和动态声音、影像等；另一方面是网站的延伸设计，包括网站主题、浏览群的定位、智能交互、制作策划、形象包装和宣传营销等。
4.2 创建站点
1) 启动Dreamweaver。
2) 打开“站点”菜单，选择“新建站点”命令。如图4-1：
图4-1 建立站点
3) 在文本框中，输入一个名称，该名称可以是任何所需的名称。
4) 然后在下面的“本地跟目录文件夹”和“默认图像文件夹”文本框中输入本地网站预保存
的路径，单击“确认”按钮。
5) 随即在组合面板中点弹出“站点”面板，现在可以在其中添加页面了。
6) 右键单击“站点”面板中的根目录，在弹出菜单中选择“新建文件”命令，把新建文件的
名称改为“index.html”
7) 双击index.html，进入页面编辑状态。
4.3 图片素材的处理
4.3.1 网站logo的制作
(1)打开Fireworks→单击“文件”，选择“新建”→新建一个高为60px，宽为130px的画
布
(2)选择“文本”工具→在画布上输入“天下体育”、“https://www.wendangku.net/doc/6a7251134.html,”→给“天下体育”
和“https://www.wendangku.net/doc/6a7251134.html,”分别设置不同的字体和颜色→再将网站的图片放在文字的左边，形成了图4-2的效果：
图4-2 网站logo效果图
4.3.2 网站banner的制作
网站首页banner的制作与logo的制作基本相似，首先新建一个950*80的画布，然后往画布里导入一张找好的banner素材图片，再往图片上添加文字，并设置文字的字体、大小及颜色（效果如图4-3）
图 4-3 网站banner效果图
4.3.3 站内图片大小处理
图片素材的缩放主要是使用Fireworks软件来处理的，具体操作步骤如下：
(1)单击“文件”选项→单击“批处理”→选择要修改的图片→单击“继续”按钮（如图 4-4）
图4-4选择要缩放的图片
(2)选择你要处理的方法，如缩放→单击“添加”按钮→选择缩放发方法→单击“继续”按钮（如图4-5）
图4-5选择缩放的类型
(3)选择文件存储位置→单击“批次”按钮→单击“完成”按钮完成对图片的处理（如图4-6）
图4-6选择图片缩放后的存储位置
4.4 首页制作
天下体育网站主要内容是有关体育新闻方面的，我从网上下载了一些内容，加上自己对界面的设计，使得整个页面都使用同一种色彩，当然对于色彩这一块，也是参照了各种参考资料进行设计，既要做的不华丽又要显得自然、大方得体。在这次网页设计中，用到了一些图片处理的工具，Fireworks处理了一些背景图片，使得图片与我的页面的背景符合，现在重点谈谈我的首页的制作过程。
网站主页主要采用静、动相结合的方式，即静态的主画面和动态的Flash图片想结合，体现体育网站新闻分类明显，首页被我划分为顶部，Banner（Logo以及图片）、导航、主体、底部等几大模块。网站首页结构如图4-7所示：
图4-7 网站首页结构图
4.4.1导航条及Logo效果制作
对于整个网站，主要采用Div布局，在布局中，把它当做容器，在里面放入文本、图片等，Div标记中可以嵌套Div标记，而且没有层数的限制。运用网页设计好的模板，然后在顶部和底部之间插入Div层作为编辑区域。下面就具体来看看导航的相关代码：
Html文档部分代码：
//外部CSS连接代码
与上面html文档匹配的部分外部CSS代码：
.top ul{
margin-left:auto;
margin-right:auto;
width:980px;
height:80px;
display:block;
}
.top ul li{
width:70px;
height:30px;
display:block;
float:left;
margin-top:60px;
list-style:none;
font-size:14px;
font-weight:bold;
margin-right:5px;
line-height:2.3;
text-align:center;
background-image:url(../images/filter_hover.png);
}
.top ul li a{
display:block;
text-decoration:none;
color:#666666;
}
.top ul li.clickColor{
text-decoration:none;
background-image:url(../images/dh_1.jpg);
}
.top ul li a:hover{
color:#FFFFFF;
}
.top ul li a.sel{
color:#FFFFFF;
}
.top ul li a.out{
color:#666666;
}
.top ul li:hover{
background-image:url(../images/dh_1.jpg);
}
效果如下图 4-8所示
图4-8导航条及Logo效果
4.4.2 Banner效果制作
Banner制作很简单，在html中写一个div用来放Banner图片，再在css中设置这个div 的大小及属性。
Banner部分html代码：
与html文档匹配的外部css代码：
#banner{
height:79px;
width:950px;
clear:both;
padding-top:5px;
margin-left:auto;
margin-right:auto;
}
4.4.3 首页图片轮播特效
图片轮播技术采用JQuery+div+css完成，此模块结构为左边显示图片，右边显示4张缩略图，鼠标每移动一直缩略图，左边则会显示大图，图片下面并有文字描述，缩略图每隔3秒自动切换到下一张。
为整个div，
为大图显示区域，
此结构的作用是用dt、dd显示图片下面的文字介绍。右边缩略图在
里面用到了
方法，宽度为330px，高度230px，用float：left属性处理了4幅图上下排列的效果。
具体html代码如下
与上面html文档匹配的部分外部CSS代码：
/* 图片轮播开始*/
img,a img{
border:none;
}
a{
text-decoration:none;
color:#fff;
}
a:hover{
text-decoration:underline;
color:#fff;
}
.main{
width:550px;
float:left;
height:350px;
padding:0 6px;
}
.fcnt{
display:block;
height:342px;
width:600px;
margin:10px auto;
border:4px solid #222;
position:relative; overflow:hidden;
}
.fcnt .mimg{
float:left;
width:446px;
height:340px; overflow:hidden;
}
.fcnt .mimg div{ display:none;
}
.mimg img{
width:446px;
height:340px;
}
.fcnt ul{
float:right;
width:152px;
height:340px;
}
*html .fcnt ul{ position:absolute; right:1px;
top:2px;
width:152px;
height:340px;
}
.fcnt li{
display:block;
height:82px;
width:150px;
margin-bottom:5px; cursor:pointer; overflow:hidden;
}
.fcnt li img{
width:150px;
height:82px;
filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;
}
.fcnt li.cur img{ width:142px;
height:75px;
margin:4px 0 0 4px; filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1;
}
#tri{
position:absolute;
top:5px;
right:2px;
z-index:1000;
width:155px;
height:82px;
background:url(../images/point.png) no-repeat;
cursor:pointer;
}
*html #tri {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src="../images/point.png");
background:none;
}
.fcnt dl{
position:absolute;
bottom:1px;
left:0px;
width:446px;
height:80px;
background:url(../images/shadow.png) no-repeat;
display:none;
}
.fcnt dt{ line-height:38px;
text-align:center;
font-size:22px;
font-family:"黑体";
font-weight:900;
}
.fcnt dd{
line-height:24px;
text-align:center;
font-size:14px;
color:#999999;
}
*html .fcnt dl{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src="../images/shadow.png");
background:none;
}
/*
与上面html文档JQuery代码：
$(document).ready(function(){
//幻灯片
var j=1;
var MyTime=false;
var fot=200;//当前图片消失时间
var fin=300;//新图片呈现时间
var amt=300;//三角标志滑动时间
var speed=3000;//自动播放间隔
var maxpic=4;//切换图片个数
$("#ppt").find("li").each(function(i){
$("#ppt").find("li").eq(i).mouseover(function(){
var cur=$("#mpc").find("div:visible").prevAll().length;
if(i!==cur){
j=i;
$("#mpc").find("div:visible").fadeOut(fot,function(){
$("#mpc").find("div").eq(i).fadeIn(fin);});
$("#tri").animate({"top":i*87+"px"},amt,current(this,"li"));
$("#ppt").find("dl:visible").slideUp(fot,function(){
$("#ppt").find("dl").eq(i).slideDown(fin);});
}
})
})
//标记当前
function current(ele,tag){
$(ele).addClass("cur").siblings(tag).removeClass("cur");
}
//自动播放不需要的话可以删除这一段
$('#imgnav').hover(function(){
if(MyTime){
clearInterval(MyTime);
}
},function(){
MyTime = setInterval(function(){
$("#ppt").find("li").eq(j).mouseover();
j++;
if(j==maxpic){j=0;}
} , speed);
});
//自动开始
var MyTime = setInterval(function(){
$("#ppt").find("li").eq(j).mouseover();
j++;
if(j==maxpic){j=0;}
} , speed);
})
图片轮播效果图4-9：
图 4-9 图片轮播效果
4.4.4 中部新闻模块制作
首页中部又分为综合体育、中国足球两大模块，两个模块布局相似都分为左、中、右三个部分。每个部分新闻标题用
和
< /a>标签布局P标签作为标题前的图标，a标签为模块的标题。新闻列表我用
、布局，下面是利用标签< /a>和、做的“网球”这一部分的源码：Html文档部分代码：
与上面html文档匹配的部分外部CSS代码：
#md{
width:370px;
height:720px;
float:left;
margin-top:10px;
border-right:#3366CC 1px dashed;
}
#box_md{
width:370px;
height:290px;
float:left;
}
#box_md p {//标题图标样式
width:13px;
float:left;
height:14px;
margin-left:5px;
margin-right:5px;
display:block;
background-image:url(../images/qq.png);
