网页设计-静态网站毕业论文.doc

摘 要
随着二十一世纪新兴科技的飞速发展，如今的电子信息产业正在经受着一个巨大的挑战，同时也面临着一个重大的机遇。就目前的科技发展水平而言，电子信息产业的发展已经不能够满足社会化大生产的要求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需要。可喜的是在这几十年的发展中我们有了互联网。互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上信息化的道路。
伴随通信技术和计算机网络应用技术的发展,人类已经进入了名副其实的网络时代。体育信息是网络信息的重要内容,体育信息网络化也有助于体育文化的传播。信息网络化促使体育信息传播方式发生变革,其资源共享功能促进了体育社会化;快速传输功能突破了时空限制,使得人们可以更快、更多地了解体育信息。
该网站通过展示国际足球、国内足球、NBA、CBA、羽毛球、网球、图库等页面向用户传递了体育信息和体育文化。网站制作工具主要为Dreamweaver8.0、Firewroks8.0和Phptoshop等，基于奥运会、中超、英超、NBA等国际性体育新闻为题材向用户传递丰富多彩的体育新闻，并且为广大体育爱好者提供了体育信息的交流、共享和学习的平台。
论文首先介绍网站建设的相关知识，根据以上知识制作网站。其中主要包括需求分析、详细设计并图文并茂的解释说明。论文还包含网站制作过程中的源码及图片的截图

关键字：Dreamweaver 体育网站 网站制作

第一章 绪论
1.1引言
在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。 互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。
网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。 面对日益加快的生活节奏和信息社会日新月异的变化，企业极需要一种快捷，便利的平台来对外宣传企业形象,介绍最新产品和及时售后服务。如何运用现代化信息技术完成这一目标，建立“一座企业与顾客之间畅通无阻的大桥”已成为企业中应该解决的重要课题之一，本网站正是为这一目标设计制作的。
1.2体育新闻网站现状
一些发达国家在体育领域的信息应用系统建设和体育信息资源的开发利用方面取得了领先地位，已形成比较健全的信息采集、处理、保存和使用体系拥有一批综合性数据库，为其国民提供体育信息和相关服务。
例如美国实施《健康公民2000年》健身计划，在全美51个州建立了目标管理数据库和高度现代化的信息网络，政府可以全面了解全国任务地区的目标实施计划，国民可以随时得到所需的健身信息和服务，欧共体17个国家通过对国民体育活动状况进行多年跟踪，建立了庞大的体育人口数据库。而我国目前的体育信息网络化传播无论从规模，还是传播速度上都与国外体育信息的网络化发展存在一定的差距。因此，在国内体育信息化角度上来说，开发体育网站对国内体育信息网络化传播有很大影响。

第二章 开发工具及开发语言介绍
2.1 Dreamweaver简介
Dreamweaver 是美国MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举的制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。突出的特点主要有灵活的编写方式；可视化编辑界面；功能更多的CSS支持——CSS可视化设计、CSS检查工具；动态跨浏览器验证；强大的WEB站点管理功能；内建的图形编辑引擎；丰富的媒体支持能力等。
它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。开发人员可以使用 Dreamweaver 及所选择的服务器技术来创建功能强大的 Internet 应用程序，从而使用户能连接到数据库、Web 服务和旧式系统。开发环境支持HTML、ASP、ASP.NET、JSP等，提供众多功能强大的可视化设计工具、应用开发环境以及代码编辑支持。主要用于素材整理、排版以及后台程序的交互。
2.2 Fireworks 矢量图处理
Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。
借助于 Macromedia Fireworks 8，您可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。Fireworks业界领先的优化工具可帮助您在最佳图像品质和最小压缩大小之间达到平衡。它与 Macromedia Dreamweaver 和 Macromedia Flash 共同构成的集成工作流程可以让您创建并优化图像，同时又能避免由于进行 Roundtrip 编辑而丢失信息或浪费时间。利用可视化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如变换图像和弹出菜单等。
2.3 HTML简史
HTML超文本标记语言（Hypertext Markup Language） 网络的资讯越来越多，网站须有引人注意的外观，才能增加浏览人次，达到宣传的目的。人们开始注意网页的外观，HTML亦因此变得更复杂、更具弹性。表格，原本是更整齐展现资料的工具，变成了排版工具。CSS的出现令以表格为基础的外观设计被视为过时。服务器方面的技术亦改变了网络的构造，使用者可以选择其浏览方式、外观。Flash的出现为设计师和媒体创作人开创了新路。除了引人的外观之外，亦有一个重要的考虑点：网络无障碍，即使用者能否容易读取资讯。
基本结构：
ml>

无标题文档

2.4 CSS样式表概述
CSS是Cascading Style Sheet 的缩写，译作“层叠样式表单”。它是一种在网页制作过程中经常用到的技术。CSS样式表其实是一组样式，它增加了更多的样式定义方法来辅助HTML。样式就是用一个指定的名字来标识和保存的一组有关字符和段落格式的选项集合。其实，我们很早就已经与“样式”打过交道了。在Word的“格式”菜单中的“样式项”里，提供了多种样式，如“标题1”、“标题2”、“正文”等。只要选定文字，然后选择不同的样式，所选定的文字就会自动改变字体、字号、对齐方式、字间距等。同样，我们可以通过CSS来规定网页元素的各种样式，如颜色、位置、大小等。
2.5 CSS样式表在HTML中的实现
在HTML网页中加入CSS并不是只有一种方法，在不同的情况下，可以采用不同的方法，比较常用的有下面几中。
2.5.1 嵌入式样式表
嵌入式样式表的实现很简单，只需在每个要应用样式的HTML标签后写上CSS属性即可。例如要设置指定表格中的文字的样式为红色，字号为10pt，可在当前表格的件中以方便其他网页的调用。这种方式的优点是可以通过一个.css文件管理网站中的多个网页。如果要对网站中其他页面进行样式引用，可以先把样式用记事本定义成一个“.css”的文件。例如：打开记事本，将定义的名为h3的样式代码写到记事本中，保存的文件名为example.css，代码如下：
h3{
font-family:“黑体”;
color:green;
font-style:italic;
}
引用时在网页HTML代码的标记后用引用这个样式文件，在部分的相应内容的前后加上和元素、制作动画效果、事件处理、使用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)选择“文本”工具→在画布上输入“天下体育”、“”→给“天下体育”和“”分别设置不同的字体和颜色→再将网站的图片放在文字的左边，形成了图4-2的效果：

图 4-2 网站logo效果图

43.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文档部分代码：
href="css/index.css">//外部CSS连接代码
style="cursor:pointer">
网球
eft: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代码：
tml文档匹配的外部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秒自动切换到下一张。区域，"htmlpages/txt_pages.html">dl>
ration: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;
height340px;
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 中部新闻模块制作
首页中部又分为综合体育、中国足球两大模块，两个模块布局相似都分为左、中、右三个部分。每个部分新闻标题用关于我们      便捷服务       自信AI       AI导航        抽奖活动©2010-2026 宁波自信网络信息技术有限公司  版权所有客服电话：[phone]  投诉电话：[phone]浙公网安备33021202000488号   浙ICP备2021020529号-1  |  浙B2-20240490  关注我们 ：