计算机网络技术毕业论文 体育小报网站设计

1、计算机网络（专科）毕业设计设计题目： 体育小报网站 教 学 班： 计算机网络技术专业 学生姓名： 学 号： 指导教师： 完成日期： 1目录目录第一章 引言 -11.1 网站开发意义 -21.2 网站简介 - 2 1.3 网站制作背景 -21.4 网站制作目标 -21.5 相关技术及软件介绍 -3第二章 可行性分析 -42.1 功能可行性分析 -52.2 技术可行性分析 -5第三章 需求分析 -73.1 功能描述 -73.2 内容 - 7第四章 网站开发工具 -84.1 网页制作软件概述 -84.2 网页制作软件 Dreamweaver -84.3 图象处理软件 PHOTOSHOP -9第五章

2、网站设计与版式风格 -105.1 网站设计思想 -105.2 网站结构-105.3 网站版式风格-125.4 网站功能 -12第六章 网站实现-136.1 频道与栏目 -136.2 文本与插图 -146.3 特效制作 -146.4 多媒体制作 -14第七章 网站测试与调试-157.1 测试的任务与目标 -1527.2 测试方案-157.3 测试结果 -15结束语-16致谢-171第一章第一章 引言引言随着 Internet 的普及和深入,传统的“千人一面”的静态网页已经不能满足人们日益增长的获取有效信息的需求，在这种情况下，能够实现交互式的动态网页技术应运而生。目前实现交互式动态网页的技术主要

3、有:CGI、ASP、JSP、PHP 等,下面具体介绍一下各语言的区别以及我对将来语言发展趋势的观点:1. CGICGI 是一种通用的网关接口，是外部程序和 WEB 服务器之间的标准编程接口。可以使用各种不同的程序语言编写适合的 CGI 程序，这些程序语言包括 Visual Basic、Delphi 或 C/C+等等，可以将已经写好的程序放在 Web 服务器的计算机上运行，再将其运行结果通过 Web 服务器传输到客户端的网页浏览器上。事实上，这样的编制方式比较困难而且效率低，因为每一次修改程序都必须重新将 CGI 程序编译成可执行文件。2. ASPASP 由于其应用程序程序容易开发和修改、功能强

4、大等特点，一经推出就受到了众多专业人士的好评，再加上微软强有力的支持，可以说是时下网站建设最为流行的技术之一。可以认为Dreamweaver是一种类似 HTML、Script 与 CGI 的合体，但是其运行效率却要比 CGI 高。Dreamweaver与 CGI 最大的不同在于对象和组件的使用，ASP 除了内置的 Request 对象、Response 对象、Server 对象、Session 对象、Application 对象及 Object Context 对象等基本对象外，还允许用户以外挂的方式使用 ActiveX 控件。当然，Dreamweaver本身也提供了多个 ActiveX 控件

5、使用，这些组件包括广告回转组件、文件存取组件、文件连接组件及数据库存取件等，这些大量扩充且重复使用的组件使得 ASP 的功能远远强于 CGI。3. PHPPHP(Hypertext Preprocessor,超文本预处理器)是一种 HTML 内嵌式的语言（类似于 ASP） 。PHP 秉承 Linux 的 CNU 风格，借助于源代码公开，成为目前广泛应用的网站建设的技术之一。PHP 独特的语法混合了 C、JAVA、Perl 以及 PHP 式的新语法，它执行动态网页的速度也比 CGI 快。从性能、开发及维护时间上看，PHP 和ASP 是并驾齐驱的，它们都有不错的表现。4. JSPJSP（Java

6、Server Pages）是 SUN 公司推出的网站开发技术，是将纯 Java 代码嵌入 HTML 中实现动态功能的一项技术。目前 JSP 已经成为 ASP 的有力竞争者。JSP 与Dreamweaver技术非常相似，两者都是在 HTML 代码中嵌入某种脚本并2由语言引擎解释执行程序代码，它们都是面向服务器的技术，客户端浏览器不需要任何附加软件的支持。两者最明显的区别在于Dreamweaver使用的编程语言是 VBScript 之类的脚本程序，而 JSP 使用的是 Java。此外，ASP 中的 VBScript 代码被 ASP 引擎解释执行，而 JSP 中的脚本在第一次执时被编译成 Servl

7、et 并由 Java 虚拟机执行，这是 ASP与 JSP 技术本质的区别。本系统的开发语言是Dreamweaver，那么我就先谈一下它的发展趋势。当今一些企业由于语言发展的速度，已经渐渐淡忘了Dreamweaver,也就是说现在企业开发网站一般不用 ASP,只有及少部分的小型企业还在用.尽管这样,我还是敢做出推测,在将来, Dreamweaver还是不会被忘记,还会存在于公司内部。因为 ASP 这种语言虽说与新出的语言功能、支持方面减弱了不少，但是这种语言用起来非常简便、易懂。而且还可以外挂组件，几乎所有网站建设功能都包括在内，所以我认为Dreamweaver还可以在企业之间留一席之地。JSP

8、，可以说现在十分流行，大部分大、中型企业都开始使用这种语言，将来的趋势也趋向这门语言,他对 ASP 语言相对比，最明显的好处就是安全性强。PHP，这种语言，一般用得很少，只有官方、政府、大型企业之类的网站使用这种语言，中、小企业都很少使用，这种语言到任何时候都是一样的，只能应用于特殊的网站。CGI，就不用再讲了，现在几乎是脱离了这种语言，对于未来我想它也不会再出现。实际上语言这个东西真不好说，有谁敢保证不再出新的程序语言，也许出来之后，立刻就能跑到语言的头衔位置；JSP 就是一个很好的例子。1.11.1 网站开发意义网站开发意义1、为什么要建立网站，是为了树立企业形象，宣传产品，进行电子商务，

9、还是建立行业性网站？是企业的基本需要还是市场开拓的延伸？ 2、整合公司资源，确定网站功能。根据公司的需要和计划，确定网站的功能类型：企业型网站、应用型网站、商业型网站（行业型网站） 、电子商务型网站；企业网站又分为企业形象型、产品宣传型、网上营销型、客户服务型、电子商务型等。 3、根据网站功能，确定网站应达到的目的作用。 体育网的建设情况和网站的可扩展性。1.21.2 网站简介网站简介一个网站的成功与否与建站前的网站策划有着极为重要的关系。在建立网站前应明确建设网站的目的，确定网站的功能，确定网站规模、投入费用，进行必要的3市场分析等。只有详细的策划，才能避免在网站建设中出现的很多问题，使网站

10、建设能顺利进行。 网站策划是指在网站建设前对市场进行分析、确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出策划。网站策划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。 网站策划书出应该尽可能涵盖网站策划中的各个方面，网站策划书的写作要科学、认真、实事求是。1.31.3 网站制作背景网站制作背景1、根据网站的目的确定网站的结构导航。一般体育网站应包括：网站简介、新闻、田径、足球、篮球、装备、图片。 2、根据网站的目的及内容确定网站整合功能。 如开篇引导、网站图片显示系统、每日信息、视频等。 3、确定网站的结构导航中的每个频道的子栏目。 如每个子栏

11、目当中都会及时更新当天发生的重要体育事件及图片新闻还有热卖的体育装备等等。 4、如果网站栏目比较多，则考虑采用网站编程专人负责相关内容。注意：网站内容是网站吸引浏览者最重要的因素，无内容或不实用的信息不会吸引匆匆浏览的访客。可事先对人们希望阅读的信息进行调查，并在网站发布后调查人们对网站内容的满意度，以及时调整网站内容。 5、确定网站内容的实现方式。如图片中心使用动态程序数据库还是静态页面；网站是采用列表方式还是地图展示。1.41.4 网站制作目标网站制作目标建设网站前的分析 1、体育网站的定位，是专业的体育学者还是普通的体育爱好者，对于专业的体育学者，要求网站的整体技术水平较高；如果是面对普

12、通的体育爱好者，则要求网站的内容通俗易懂。 2、网站分析，确定网站的策划、功能作用。 3、网站自身条件分析、网站概况、相对于其他体育网站的优势，可以利用网站提升全民体育的普及度，大众体育用品的购买能力。1.51.5 相关技术及软件介绍相关技术及软件介绍根据网站的功能确定网站技术解决方案。 1、采用自建服务器，还是租用虚拟主机。 2、选择操作系统，用 Window2000/NT 还是 Unix, Linux。分析投入成本、功能、开发、稳定性和安全性等。 3、采用模板自助建站、建站套餐还是个性化开发。 44、网站安全性措施，防黑、防病毒方案（如果采用虚拟主机，则该项由专业公司代劳） 。 5、选择什

13、么样的动态程序及相应数据库。如程序 Dreamweaver、JSP、PHP；数据库 SQL、ACCESS、ORACLE 等。5第二章第二章 可行性分析可行性分析 2.12.1 功能可行性分析功能可行性分析1、根据网站的目的确定网站的结构导航。一般体育网站应包括：网站简介、新闻、田径、足球、篮球、装备、图片。 2、根据网站的目的及内容确定网站整合功能。 如开篇引导、网站图片显示系统、每日信息、视频等。 3、确定网站的结构导航中的每个频道的子栏目。 如每个子栏目当中都会及时更新当天发生的重要体育事件及图片新闻还有热卖的体育装备等等。 4、如果网站栏目比较多，则考虑采用网站编程专人负责相关内容。 注

14、意：网站内容是网站吸引浏览者最重要的因素，无内容或不实用的信息不会吸引匆匆浏览的访客。可事先对人们希望阅读的信息进行调查，并在网站发布后调查人们对网站内容的满意度，以及时调整网站内容。 5、确定网站内容的实现方式。如图片中心使用动态程序数据库还是静态页面；网站是采用列表方式还是地图展示。 2.22.2 技术可行性分析技术可行性分析 HTML 英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用 HTML 编写的超文本文档称为 HTML 文档，它能独立于各种操作系统平台（如 UNIX，WINDOWS 等） 。自 1990 年

15、以来 HTML 就一直被用作 World Wide Web 的信息表示语言，用于描述 Homepage 的格式设计和它与 WWW上其它 Homepage 的连结信息。使用 HTML 语言描述的文件，需要通过浏览器显示出效果。所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。通过 HTML 可以表现出丰富多彩的设计风格,下面来举一些我们都常用的代码例子:图片调用：文字格式：文字通过 HTML 可以实现页面之间的跳转页面跳转：通过 HTML 可以展现多媒体的效果声频：视频：6上面我们在示例超文本特征的同时，采用了一些我们在制作超

16、文本文件时需要用到的一些标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“”来表示。HTML 文档的扩展名通常为*.htm或*.html，可用记事本等文本编辑软件编辑，用 Internet Explorer 浏览。超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。头 部 信 息文 档 主 体， 正 文 部分其中在最外层， 表示这对标记间的内容是 HTML 文 档。我们还会看到一些 Homage 省略标记，因为.html 或.htm 文件被 Web 浏览器默认为是 HTML 文档。 之间包括文档的头部信息，

17、如文档总标题等，若不需头部信息则可省略此标记。 标记一般不省略， 表示正文内容的开始。下面是一个最基本的超文本文档的源代码：一个简单的 HTML 示例欢迎光临我的主页这是我第一次做主页，无论怎么样，我都会努力做好！7第三章第三章 需求分析需求分析3.13.1 功能描述功能描述网站后台是用 Dreamweaver+Dreamweaver+ ACCESS 所做，主要目的是让用户可以通过我们的网站，了解我们的公司最新情况。网站具备体育信息发布、体育常识、技术交流、常用体育软件下载等一些新闻功能，还有图片发布等与体育摄影相关知识的交流栏目。新闻：为体育爱好者们提供一个及时准确的每日信息，让大家更快跟方

18、便的了解世界体育信息。购买装备：方便全国各地的体育同好购买体育器材、装备以及体育设施周边的产品。提供一个很好的展示平台。3.23.2 内容内容设计活动中包含着主观和客观两方面的因素，在确立了网页主题之后，首先要明确和熟悉设计的对象和构成的要素。网页艺术设计涉及的具体内容很多，可以概括为视听元素和版式设计两个方面。 1.视听元素 这里所说的视听元素，主要包括：文本、背景、按、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文字、图形、动画，还是音频、视频，网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。多媒体技术的运用大大丰富了网页艺术设计的表现力。 以上各视

19、听元素大多数浏览器本身都可以显示或收听，无需任何外部程序或模块支持。比如，大部分浏览器都可以显示 GIF、JPEG 图形和 GIF89a 动画。还有些多媒体文件（如 MP3 音乐）需要先下载到本地硬盘上，然后启动相应的外部程序来播放。另外，在浏览器使用插件（Plug-in）可以播放更多格式的多媒体文件。微软推出 IE 浏览器后，提供了基于 OLE 的 ActiveX 技术，用来在网页中播放多媒体。目前 ActiveX 已经成为热门技术。另一种播放多媒体的技术是 JavaApplet。它是用Java 语言编写的应用于网页之中的小应用程序，相比于插件和 ActiveX，JavaApplet具有更大

20、的灵活性和良好的跨平台能力，因此具有很好的发展前景。总之，技术的不断发展使多媒体元素在网页艺术设计中的综合运用越来越广泛，使浏览者可以享受到更加完美的视听效果。这些新技术的出现，也对网页的艺术设计提出了更高的要求。 2.版式设计 网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。 但网页的排版与书籍杂志的排版又有很多差异。印的尺寸和位置。而且，网页

21、8的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。第四章第四章 网站开发工具网站开发工具4.14.1 网页制作软件概述网页制作软件概述Dreamweaver 是美国 MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。4.24.2 网页制作软件网页制作软件DREAMWEAVER、FLASH 以及在 DREAMWEAVER 之后推出的针对专业网页图像设计的FIREWORKS，三者被 MACROMEDIA 公司称为

22、DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA 公司对它们的自信。说到 DREAMWEAVER 我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓，HTML 技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） ，两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在 WORD 中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。优点：1最佳的制作效率Dreamweaver 可以用最快速的

23、方式将 Fireworks，FreeHand，或 Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简2网站管理 单步骤便可完成Dreamweaver 能与您喜爱的设计工具，如 Playback Flash，Shockwave 和外挂模组等搭配，不需离开 Dreamweaver 便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使 Dreamweaver 自动开启 Firework 或 Photoshop 来进行编辑与设定图档的最佳化。 使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档

24、案名称， Dreamweaver 会自动更新所有连结。使用支援文字、 HTML 码、HTML 属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 3无可比拟的控制能力 Dreamweaver 是唯一提供 Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含 Home Site 和 BBEdit 等主流文字编辑器。帧 (frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、9栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即

25、所得 Dreamweaver 成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给 Third-party 厂商，包含 ASP，Apache，Broad Vision， Cold Fusion，iCAT， Tango 与自行发展的应用软体。当您正使用Dreamweaver 在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和 XML Dreamweaver 将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出

26、XML 内容。 全方位的呈现利用 Dreamweaver 设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets 的动态 HTML 支援和鼠标换图效果，声音和动画的DHTML 效果资料库可在 Netscape和 Microsoft 浏览器上执行。使用不同浏览器检示功能， Dreamweaver 可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver 的网站在下载它的描述档，便可得知详尽的成效报告。缺点：一、难以精确达到与浏览器完全一致的显示效果。也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全

27、达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来； 二、页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的HTML代码 都在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的HTML 代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。在DREAMWEAVER 之前，FRONTPAGE98 一直被人们认为是最好的所见即所得网页编

28、辑器，但是它同样继承了所见即所得的种种劣性。但是我说过这是在DREAMWEAVER 之前，现在我无意说 DREAMWEAVER 已经实现网页设计师的梦想，但我觉得 DREAMWEAVER 正在努力向这个梦想一步步走去。4.34.3 图象处理软件图象处理软件 PhotoshopPhotoshop图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜象、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。 图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确

29、意义的图像，这是美术设计的必经之路。Photoshop 提供的绘图工具让外来图像与创意很好地融合，成为可能使图像的合成天衣无缝。 校色调色是 Photoshop 中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色编的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。 10特效制作在 Photoshop 中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由 Photoshop 特效完成。而各种特效字的制作更是很多美术设计师热衷于Photoshop 的研究的原因。第五章第五章

30、网站设计与版式风格网站设计与版式风格 5.15.1 网站设计思想网站设计思想主要目的是让用户可以通过我的网站，了解体育的最新情况，让他们对最新的体育动向有一定的了解一、在创建站点之前，应当认真的分析和的规划，明确为哪些用户提供服务，提供什么样的服务，这是设计的出发点。 一般说来，一个面向 IT 产业的网站不需要照顾 640 x480 的分辨率和 3.x 的浏览器，因为这个产业里配备最先进的硬件和软件；而一个以医疗信息为主的站点就应当认真考虑分辨率和浏览器的问题了，因为这个站点的用户有可能还在使用 14的显示器和最令人头疼的 IE3.0。而所谓英特尔优化网站自然是图形越复杂、技术越超前、速度越缓

31、慢，越能让人对英特尔最新最贵的 CPU 魂牵梦绕。二，需要明确一个观念。网站不是艺术品，也不是工艺品，而是一件实用工具，一种内容载体。网页过去现在将来都不会成为蒙娜.丽莎那样的名作。所以我们大可不必考虑那么多构图、修饰和装点的问题。一个简洁、干净的网页是永远受人欢迎的。因此，应当清理所有不必要的图片，多用表格组成色块。我甚至认为几乎所有的按钮都可以用文字代替。从另一方面讲，一个网站的精美程度同他的更新维护难度成正比。为了更新维护方便起见，选择一种简洁和便于扩展的方式是至关重要的。三、更重要一点是建立清晰明确的导航系统。四、给用户选择的权利。五、交互性，又称之为互动性，是人性化设计至关重要的一环

32、。 5.25.2 网站结构网站结构我设计的网站是由树型的结构。主级频道可以互相浏览，一级频道之间可以相互访问，他们是并列的关系。二级频道由一级频道中生成的浏览页面进行访问，下级频道由二级频道生成的浏览页面进行访问，由树型结构组成。结构图如下：11首页新闻田径足球篮球装备子栏目子栏目子栏目子栏目子栏目子栏目子栏目子栏目子栏目子栏目子栏目子栏目子栏目子栏目子栏目子栏目子栏目子栏目子栏目子栏目图 5.1 新闻9秒58波尔特刘翔结婚AC米兰意大利世界杯图图 5.25.2新闻的内容是栏目内容如下：新闻的内容是栏目内容如下：9 秒 58！波尔特让世界惊呆了中超刘翔唯美婚纱照曝光 高贵新娘娇美容貌可人(图)

33、12AC 米兰卖亨特拉尔将再买 1 前锋！购法甲射手王直指欧冠意大利世界杯 23 人名单已定 18 人 15 大将激争最后五席位其他栏目依次类推。5.35.3 网站版式风格网站版式风格明朗简单，红色贴合黄颜色、黑色的网站因为本网站属于体育网站，因此在风格上，各个频道的栏目均以红色或黑色字体为主，即体现了体育的带给人的活力，又体现了体育带给人的震撼，文字为宋体字，这样在看起来会觉得比较舒服。频道中的内容均配以图片加以说明，这样可以使人很快的明白该内容。5.45.4 网站功能网站功能本网站是以简洁明快的方式，为喜欢体育的朋友们提供一个可以快速了解，当天在世界各地发生的体育事件和当前流行的体育装备资讯等，希望能为朋友们提供一个方便的阅读空间。13第六章第六章 网站实现网站实现6.16.1 频道与栏目频道与栏目网站简介、新闻、田径、足球、篮球、装备、图片。如图：图 6.1 6.26.2 文本与插图文本与插图通过后台插入文本和图片 6.36.3 特效制作特效制作如图：图 6.2146.46.4 多媒体制作多媒体制作 制作