毕业设计（论文）个人网站（体育站）设计与实现

《毕业设计（论文）个人网站（体育站）设计与实现》由会员分享，可在线阅读，更多相关《毕业设计（论文）个人网站（体育站）设计与实现（30页珍藏版）》请在装配图网上搜索。

1、先锋软件职业技术学院 毕业设计（论文）（2008届）题 目 个人网站（体育站）设计与实现系 别 软件系 专 业 软件设计与开发 班 级 0804 姓 名 指导教师 2008年 月 日目 录第一章网站特点51.1 网站构思51.2 开发工具的选用及介绍5第章网站页面规划82.1 页面设计定义：82.2 页面设计要求：82.3 页面设计流程：9第3章 网站页面设计103.1 设计需求103.2 网站结构103.3 页面结构：11第章网站制作问题224.1常见问题22参考文献23附录或相关资料24结束语27致谢28个人网站（体育站）设计与实现【摘要】面对日益加快的生活节奏和信息社会日新月异的变化，I

2、nternet 的快速普及，上网者已经不再满足于仅仅浏览网页，而是希望更深入地参与到网络中。假如想上一个体育的网站了解一下当天的足球战报，那么我上网的目的性就是非常的明确，直接看足球的结果。那么考虑一下的上网过程就是先敲入网址，到主页上，然后尽快的找到足球的栏目，再找到比分的链接。体育网站现已是网络经济的一匹黑马。体育网站将成为网站中成功的佼佼者，丰富多彩的体育新闻会使你流连忘返。网页内的体育新闻可以说是网站构成的基本元素。组建体育网站先要规划一个网站的整体结构，做到条理清晰，使浏览者不致迷路，同时还要使网页美观独特，一目了然，优点。【关键词】个人网站：页面设计；Dreamweaver；Pho

3、toshop。30第1章 网站构思及相关技术 如今Internet飞速发展，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为了让志同道合的人一起欣赏，一起研究，一起来探讨，本论文就是介绍如何建设个人网站。1.1 网站构思该网站的特点：1. 建有自己特色的网站及内容。2. 结构层

4、次协调且合理。3. 插入视频、音频文件使内容生动。4. 使用多种特效使页面不显得枯燥。1.2 开发工具的选用及介绍Dreamweaver MX概述Dreamweaver MX是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的网页编辑器, 与Firework MX 、Flash MX一起，被人们喻为“网页制作三剑客”。随着互联网(Internet)的HTML技术不断发展和完善，我们身边出现了很多种网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）。所见即所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器

5、进行网页制作和在WORD中进行文本编辑几乎一样。同FrontPage一样，Dreamweaver MX就是第一套针对专业网页设计师特别发展的可视化网页开发工具，利用它可以轻而易举地制作出跨越平台限制的网页。它能够很好地支持Active X、JavaScript、Java、Flash和Shockwave等，而且还能通过鼠标拖动的方式从头到尾制作动态的HTML效果。Dreamweaver MX还采用Roundtrip HTML技术，使用这项技术，网页可以在reamwaver MX和HTML代码编辑器之间进行自由转换，而HTML语法及结构不变。这样，专业设计者可以在不改变原有的编辑习惯的同时，充分享

6、受到“所见即所得”带来的方便。Dreamweaver MX最具有挑战性和生命力的是它的开放式设计，这项设计使任何人可以轻易扩展它的功能。Dreamweaver MX 是一种全新概念的产品。利用它，开发人员、编程人员可以在多种服务器平台上、在一个软件中完成支持几种语言的动态网页的开发，产生和编辑用ASP（Active Server Pages）、JSP(Java Server Pages)和Cold Fusion开发的Web内容。由于Dreamweaver MX是从低版本的Dreamweaver 环境衍生出来的，因此它也具有十分完美的HTML、Java Script功能。Dreamweaver

7、MX的界面和工作环境比以前的Dreamweaver 版本更简洁、更具弹性，Dreamweaver MX同样具备了与Fireworks、Flash和Shockwave紧密集成的诸多优点，以及使用Dreamweaver MX的可扩展结构来扩展和定制Web的功能。Dreamweaver MX大大加速了网络时代电子交易应用中的项目交付。它提供了从网页和表单动态生成到企业级的解决方案，如电子商店，库存管理系统和企业内部局域网的数据库应用等功能。基于Dreamweaver MX的以上优点，所以我们在进行网站的页面设计和页面布局时采用这一软件来完成的。Fireworks概述Fireworks是一款用于网络图

8、像设计和艺术处理的优秀应用软件.它最大的优点在于解决了图像设计和网络应用的关键问题.Fireworks又是一个多才多艺的图像和网页设计工具.它强大的工具套餐使您在这一个软件里,可以获得其他矢量图像处理软件和位图图像处理软件所拥有的一些最好功能.您可以自由的在Fireworks中编辑对象,对它们进行位图效果的处理,例如添加斜角,光晕,阴影等,或者应用Photoshop的滤镜效果-当您在编辑的时候,这些效果会自动的实时添加,你可以随时看到添加后的图像效果.Fireworks的出现使得网页设计师处理网络图像时,能从费力的在一大堆图像处理软件间切换来切换去中解放出来.在图像的编辑过程中,设计师可以随时

9、观察图像的效果,随时返回以前的操作,非常的便捷.它的图像优化功能使得创作的图像既能获得满意的品质又能进行适当的压缩,从而适合网络的传输和显示。第章网站页面规划2.1 页面设计定义网站结构：应该只为了实现一个目标而努力，引领你的访问者从主页访问到站点中其它不同的页面。导航结构：导航条的结构主要为了方便访问者在各页面之间进行切换。文本内容：相信人们会阅读你页面上的所有信息吗？他们不会的，他们所做的事情就是“浏览”。页面设计时可掺入以下元素：1文本格式化：页面本身对文本和字体的格式化能力并不强，在页面中，可以指定文本尺寸、排列和其他的一些格式化属性（序号列表和无序号列表），但建议不要改变字体，而应当

10、使用缺省字体，你指定的字体在浏览者那里并不一定能够找到，如果确实有必要少量使用某种特殊字体，可以把这些字体象素化变为图像，然后将图像插入到页面中。2按钮、图标和其他导航工具：可以帮助浏览者在页面内导航。3背景：给页面添加背景，包括纹理填充、水印式背景和长条状背景等等，可以使得页面更加美观，给浏览者留下深刻的印象。4图形：可加入图片、图表和图形等。5表格：用来显示按行和列组织的信息等。6颜色：包括图片的色彩、文本和背景的色彩等。7多媒体元素：包括声音、动画、视频片断等。8页面布局：在页面上放置文本、图形等元素，在元素间添加横线条，空白等，并用表格、框架进行排版。2.2 页面设计要求2.2.1简洁

11、：设计并不再现具体的物象和特征，它要表达的是一定的意图和要求，在适当的环境里为人们所理解和接受。它与绘画有内在联系，但又不同于绘画，它以满足人们的实用和需求为目标，因而它比绘画更单纯，清晰和精确。页面设计属于设计的一种，同样要求简练，准确。2.2.2 一致性：一致性是表现一个站点的独特风格的重要手段之一。要保持一致性，可以从页面的排版下手，各个页面使用相同的页边距。文本，图形之间保持相同的间距。主要图形，标题或符号旁边留下相同的空白。如果在第一页的顶部放置了公司标志，那么在其他各页面都放上这一标志。如果使用图标导航，则各个页面应当使用相同的图标。一致性还包括：页面中的每个元素与整个页面以及站点

12、的色彩和风格上的一致性。2.2.3对比度：使用对比是强调突出某些内容的最有效的办法之一。好的对比度使内容更易于辨认和接受。实现对比的方法很多，最常用的是使用颜色的对比。比如，内容提要和正文使用不同颜色的字体，内容提要使用蓝色，而正文采用黑色；也可以使用大的标题，也即是面积上的对比；还可以使用图像对比，题头的图像明确的向浏览者传达本页的主题，这里同样需要注意的是链接的色彩，在设计页面时我们常常会只注意到未被访问的链接的色彩，而容易忽视访问过的链接色彩将使得链接的文字难地辨认。2.3 页面设计流程1. Web上的内容包罗万象，版式丰富多彩，但无论怎样的变化，好的Web站点总是有许多共同之处，例如：

13、2. 精心组织的内容；3. 格式美观的正文； 4. 和谐的色彩搭配；5. 较好的对比度，使得文字具有较强的可读性；6. 生动背景图案； 7. 页面元素大小适中，布局匀称； 8. 不同元素之间留有足够空白，给人视觉上休息的机会；9. 各元素之间保持平衡； 10. 文字准确无误，无错别字、无拼写错误；2.4 页面内容组织有了好的内容，还必须知道如何更好地去表达它。现在网页已从过去的“如何做网页设计”的技术阶段进入到“如何做好网页设计”的提高阶段。一个优秀的网站，除了含有丰富的内容之外，最重要的就是要有清晰的页面布局。换句话说，要创造一个能吸引人们注意而且能保持吸引力的网站，必须是简单明了的布局，可

14、读性强，并且能在浏览者心中建立信任感。有时在浏览网页时，特别是浏览一些内容丰富的大型网站的主页时，常感觉到网页的内容虽然既多且杂，但并不凌乱，反而显得井然有序。这是因为在网页上应用了表格进行排版。2.5 页面设计要点1. 构思出所建网站初步轮廓。2. 收集设计中所需求的资料及软件。3. 准备好各类文件及文件夹位置、名字方便以后查找。4. 熟悉页面设计中所用到的相关软件及如何操作。第3章 网站页面设计3.1 设计需求硬件需求：l CPU：Celeron（R）1.00GHz；l 内存：256MB。软件需求：l 操作系统：Windows XP以上；l 需求软件：Dreamweaver、Macrome

15、dia Fireworks 8、Photoshop；l 浏览器：IE8.0；分辨率：最佳效果1024768。3.2 网站结构网站页面采用静态的方式，静态主页方式包括：1. 引页：由一张图片为主进入网站首页。2. 首页：由引页进入后，可以一眼看出此网站主题风格及内容。首页内容可以由导航条作出分类，其中可以包含：引页、Mylove（首页）、我的相册、各种收藏、心情日记、个人简历等。 3. 各级分页：页面色彩、背景须与首页一致，以达到色彩统一，有层次感。此次做的是个人球迷网站。这个网站主要的目的就是针对个人爱好进行了设计，并且加入了自我介绍，以方便访问者了解我。总的来说，对于这个网站我是很满意的。从

16、布局，选色，做图还有文字都是我花了很多的时间。虽然不算专业性的网站，但是最后还是做成了，简单有意义。结构图：首页My Love我的相册各种收藏心情日记个人简历雁过留声图3.1 主结构图3.3 页面结构：页面内容由：l 标题栏l 导航条l 公告栏l 日历l 链接区正文信息等组成。以下的是我在做此网站期间认为比较不错的页面以及它的实现过程,在此贴出来给大家欣赏下。3.3.1 引页图片如下：图3.2 引页丝丝小雨，带给我们多少温柔与浪漫，这篇教程里，我们将会用Fireworks里的运动模糊滤镜来制作出丝小雨的动画特效希望大家在网页设计中能有帮助 第一步.先选择一张做为背景的图片：图3.3 选则背景图

17、第二步.转换到层面板添加一个新图层。图3.4 新建图层第三步.选中第二层，回到图片编辑窗口，用图形工具在图片上方拉出一个大出画布，然后填充为黑色的长方形。图3.5 编辑画布第四步.保持长方形选中的状态，为其添加效果：效果杂点新增杂点，设置数量为：400图3.6 新增杂点第五步.再为其添加滤镜效果：滤镜模糊运动模糊。图3.7 增加运动模糊第六步.接着调整它的透明度，这样才能把背景显示出来。图3.8 调整透明度第七步.这时候图片有点像下雨的感觉吧。图3.9 显示调整透明度后图片第八步.要做成动态下雨的效果，下面就是关键步骤！转到帧面板为长方形添加一帧。图3.10 插入帧第九步.调整该帧长方形的位置

18、，虚线为本来的位置，蓝线是调整后的位置。图3.11 调整帧位置第十步.重复8-9的步骤再添加一帧。 第十一步.最后，回到层面板，选择背景所在的层，双击该层名称在弹出的对话框中把“共享交叠层”项勾上，作品到此也就完成了。图3.12共享交叠层3.3.2 切换图片：每隔2秒都会出现形式多变的图片,既增添了网站的内容，又增添了不少色彩。3.13 图片切换效果代码如下： !- / BannerAD var bannerAD=new Array(); var bannerADlink=new Array(); var adNum=0; bannerAD0=picture/inter/a11.jpg; ba

19、nnerADlink0=#; bannerAD1=picture/inter/a12.jpg; bannerADlink1=#; bannerAD2=picture/inter/a17.jpg; bannerADlink2=#; bannerAD3=picture/inter/a14.jpg; bannerADlink3=#; bannerAD4=picture/inter/a15.jpg; bannerADlink4=#; bannerAD5=picture/inter/a16.jpg; bannerADlink5=#; var preloadedimages=new Array(); fo

20、r (i=1;ibannerAD.length;i+) preloadedimagesi=new Image(); preloadedimagesi.src=bannerADi; function setTransition() if (document.all) bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23); bannerADrotator.filters.revealTrans.apply(); function playTransition() if (document.all) b

21、annerADrotator.filters.revealTrans.play() function nextAd() if(adNum nextAd()3.3.3 导航条效果： 每次刷新页面，所显示的效果就不同，给人一种新颖的感觉。图3.14导航条效果代码如下：首页 西湖雨景 Mylove 国际米兰3.3.4 图片鼠标效果：当鼠标放到图片上后都会有凹凸不平的层次感。图3.15 图片凹凸效果代码如下： 图片鼠标效果后续代码：详见附录 第章网站制作问题4.1常见问题 在这此制作过程中，遇到的问题多种多样，在老师、同学的帮助下终于得到解决。以下是经常遇见的问题：1. 在网页制作中的，有时我们发现图

22、的高度和宽度值都被自动加粗显示了，从而导致整个表格变形，出现这种情况的原因是我们操作不小心，改变了部分文字、图片的大小、高度。图4-1 表格的改变2. 在Dreamweaver中，插入空格需要在全角状态下可以插入，半角状态只能加一次微小的距离，但当用全角插入空格后却与其余文字间位置不能对齐，须用全角半角之间转换加空格来对齐。 把半角切换到全角图4.1全角半角切换3. 设置表格虚线设置表格虚线的方法有如下三种：方法一：作一个1*2的图。半黑半白，再利用表格作成线。这种方法虽然麻烦，但在任何浏览器中都可以浏览，兼容性最好。方法二：在CSS里面设定。在CSS面板里新建一个style，选择“redef

23、ine HTML Tag”，再在下拉菜单里选“table”，在弹出的面板里，category里选择border，在border里，将top,left,right,bottom都设成1px，边框颜色可以设成你所需要的颜色。然后在style下拉框里选择dashed。确定以后所有的表格都会用虚线做边框了。但是，这个效果只有在浏览器里才能看到。方法二只能在IE5.5里用，到了NETSCAPE里一点用处都没有，除非你用做好的底图填充。参考文献1陈青Dreamweaver MX 2004标准案例教材人民邮电出版社 20042李振格等编 网页制作入门与提高（版）M 北京:清华大学出版社 20023成昊/王诚

24、君/刘德强等Dreamweaver MX 2004 网页设计教程 科学出版社 20064卢坚/鲍嘉 中文版 Dreamweaver MX 2004 网页设计实训教程 中国林业出版社/北京希望电子出版社 2006附录或相关资料第三章 3.3.4图片鼠标效果后续代码：  结束语 经过短短的三个月的时间，我完成了毕业设计，对于此次完成的结果我感到很满意。此前我曾制作过2次个人BLOG，相比之下此次完成的工作量大，但效果都比前2次好，对于制作的心得也越积越多。 通过这次设计使我了解了建设个人网站的一般流程，充分认识到要使一个网站吸引更多的访问者，不仅要有好的内容，更需要有好的页面设计。而制作

25、一张页面最重要的两步是页面设计和页面布局，在进行页面设计时应遵循简洁、一致性、对比度的原则。页面的色彩也应根据页面内容的不同来进行搭配，以使整个页面达到最和谐效果。本文只是论述了我在设计中使用的技术和所遇到的一些问题。由于所学的知识不够深入，难免存在着一些不足，希望大家多多包涵。计算机网络的发展是飞快的，所以网站的页面设计不应该是一成不变的，而应根据企业需求的不断改变来具体设计。致 谢 在为本论文准备过程中，我要感谢指导老师许沪敏和杨森老师。在与老师交流过程中，我受益匪浅。是两位老师认真负责的工作态度，严谨的治学精神和深厚的理论水平，都给与我很大的帮助，为本文的撰写打下了坚实的基础，感谢他们耐心的辅导。在页面设计时同组的同学也给予我很大的帮助，帮助我解决了不少的难点，使得设计能如期完成。另外，本文还吸收了一些相关的书籍，在此，向所有对本文提供帮助的人士，一并致谢。大学的学习生活即将结束了，我想我会永远怀念和老师同学相处的这三年。