个人网站（体育站）设计与实现

1、先锋软件职业技术学院先锋软件职业技术学院 毕业设计（论文）毕业设计（论文） （20082008 届）届） 题题 目目 个人网站（体育站）设计与实现个人网站（体育站）设计与实现 系系 别别 软件系软件系 专专 业业 软件设计与开发软件设计与开发 班班 级级 0804 姓姓 名名 指导教师指导教师 2008 年 月 日 目目 录录 第一章网站特点.5 1.1 网站构思 .5 1.2 开发工具的选用及介绍.5 第章网站页面规划.8 2.1 页面设计定义：.8 2.2 页面设计要求：.8 2.3 页面设计流程： .9 第 3 章 网站页面设计.10 3.1 设计需求 .10 3.2 网站结构 .10

2、3.3 页面结构： .11 第章网站制作问题.22 4.1 常见问题.22 参考文献.23 附录或相关资料.24 结束语.27 致谢.28 个人网站（体育站）设计与实现 【摘要】面对日益加快的生活节奏和信息社会日新月异的变化，Internet 的快速普及，上网者已经不再满足于仅仅浏览网页，而是希望更深入地参与到 网络中。假如想上一个体育的网站了解一下当天的足球战报，那么我上网的目 的性就是非常的明确，直接看足球的结果。那么考虑一下的上网过程就是先敲 入网址，到主页上，然后尽快的找到足球的栏目，再找到比分的链接。体育网 站现已是网络经济的一匹黑马。体育网站将成为网站中成功的佼佼者，丰富多 彩的体

3、育新闻会使你流连忘返。网页内的体育新闻可以说是网站构成的基本元 素。组建体育网站先要规划一个网站的整体结构，做到条理清晰，使浏览者 不致迷路，同时还要使网页美观独特，一目了然，优点。 【关键词】个人网站：页面设计；Dreamweaver；Photoshop。 第第 1 1 章章 网站网站构思及相关技术构思及相关技术 如今 Internet 飞速发展，互联网成为人们快速获取、发布和传递信息的重要渠道， 它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet 上发布信息主要 是通过网站来实现的，获取信息也是要在 Internet“海洋”中按照一定的检索方式将 所需要的信息从网站上下载

4、下来。因此网站建设在 Internet 应用上的地位显而易见， 它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为 了让志同道合的人一起欣赏，一起研究，一起来探讨，本论文就是介绍如何建设个人 网站。 1.11.1 网站构思网站构思 该网站的特点： 1. 建有自己特色的网站及内容。 2. 结构层次协调且合理。 3. 插入视频、音频文件使内容生动。 4. 使用多种特效使页面不显得枯燥。 1.21.2 开发工具的选用及介绍开发工具的选用及介绍 DreamweaverDreamweaver MXMX 概述概述 Dreamweaver MX 是美国 MACROMEDIA 公司开发

5、的集网页制作和管理网站于一身的网 页编辑器, 与 Firework MX 、Flash MX 一起，被人们喻为“网页制作三剑客” 。随着 互联网(Internet)的 HTML 技术不断发展和完善，我们身边出现了很多种网页编辑器， 从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器 （则原始代码编辑器） 。所见即所得网页编辑器的优点就是直观性，使用方便，容易上 手，您在所见即所得网页编辑器进行网页制作和在 WORD 中进行文本编辑几乎一样。同 FrontPage 一样，Dreamweaver MX 就是第一套针对专业网页设计师特别发展的可视化 网页开发工具，利用它可以轻而

6、易举地制作出跨越平台限制的网页。它能够很好地支 持 Active X、JavaScript、Java、Flash 和 Shockwave 等，而且还能通过鼠标拖动的 方式从头到尾制作动态的 HTML 效果。Dreamweaver MX 还采用 Roundtrip HTML 技术， 使用这项技术，网页可以在reamwaver MX 和 HTML 代码编辑器之间进行自由转换，而 HTML 语法及结构不变。这样，专业设计者可以在不改变原有的编辑习惯的同时，充分 享受到“所见即所得”带来的方便。Dreamweaver MX 最具有挑战性和生命力的是它的 开放式设计，这项设计使任何人可以轻易扩展它的功能

7、。 Dreamweaver MX 是一种全新概念的产品。利用它，开发人员、编程人员可以在多 种服务器平台上、在一个软件中完成支持几种语言的动态网页的开发，产生和编辑用 ASP（Active Server Pages） 、JSP(Java Server Pages)和 Cold Fusion 开发的 Web 内 容。由于 Dreamweaver MX 是从低版本的 Dreamweaver 环境衍生出来的，因此它也具有 十分完美的 HTML、Java Script 功能。 Dreamweaver MX 的界面和工作环境比以前的 Dreamweaver 版本更简洁、更具弹性， Dreamweaver

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

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

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

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

12、间添加横线条，空白等， 并用表格、框架进行排版。 2.22.2 页面设计要求页面设计要求 2.2.1 简洁： 设计并不再现具体的物象和特征，它要表达的是一定的意图和要求，在适当的环 境里为人们所理解和接受。它与绘画有内在联系，但又不同于绘画，它以满足人们的 实用和需求为目标，因而它比绘画更单纯，清晰和精确。页面设计属于设计的一种， 同样要求简练，准确。 2.2.2 一致性： 一致性是表现一个站点的独特风格的重要手段之一。 要保持一致性，可以从页面的排版下手，各个页面使用相同的页边距。文本，图 形之间保持相同的间距。主要图形，标题或符号旁边留下相同的空白。如果在第一页 的顶部放置了公司标志，那么

13、在其他各页面都放上这一标志。如果使用图标导航，则 各个页面应当使用相同的图标。一致性还包括：页面中的每个元素与整个页面以及站 点的色彩和风格上的一致性。 2.2.3 对比度： 使用对比是强调突出某些内容的最有效的办法之一。好的对比度使内容更易于辨 认和接受。实现对比的方法很多，最常用的是使用颜色的对比。比如，内容提要和正 文使用不同颜色的字体，内容提要使用蓝色，而正文采用黑色；也可以使用大的标题， 也即是面积上的对比；还可以使用图像对比，题头的图像明确的向浏览者传达本页的 主题，这里同样需要注意的是链接的色彩，在设计页面时我们常常会只注意到未被访 问的链接的色彩，而容易忽视访问过的链接色彩将使

14、得链接的文字难地辨认。 2.32.3 页面设计流程页面设计流程 1. Web 上的内容包罗万象，版式丰富多彩，但无论怎样的变化，好的 Web 站点总 是有许多共同之处，例如： 2. 精心组织的内容； 3. 格式美观的正文； 4. 和谐的色彩搭配； 5. 较好的对比度，使得文字具有较强的可读性； 6. 生动背景图案； 7. 页面元素大小适中，布局匀称； 8. 不同元素之间留有足够空白，给人视觉上休息的机会； 9. 各元素之间保持平衡； 10. 文字准确无误，无错别字、无拼写错误； 2.42.4 页面内容组织页面内容组织 有了好的内容，还必须知道如何更好地去表达它。现在网页已从过去的“如何做 网页

15、设计”的技术阶段进入到“如何做好网页设计”的提高阶段。一个优秀的网站， 除了含有丰富的内容之外，最重要的就是要有清晰的页面布局。换句话说，要创造一 个能吸引人们注意而且能保持吸引力的网站，必须是简单明了的布局，可读性强，并 且能在浏览者心中建立信任感。有时在浏览网页时，特别是浏览一些内容丰富的大型 网站的主页时，常感觉到网页的内容虽然既多且杂，但并不凌乱，反而显得井然有序。 这是因为在网页上应用了表格进行排版。 2.52.5 页面设计要点页面设计要点 1. 构思出所建网站初步轮廓。 2. 收集设计中所需求的资料及软件。 3. 准备好各类文件及文件夹位置、名字方便以后查找。 4. 熟悉页面设计中

16、所用到的相关软件及如何操作。 第第 3 3 章章 网站页面设计网站页面设计 3.13.1 设计需求设计需求 硬件需求： CPU：Celeron（R）1.00GHz； 内存：256MB。 软件需求： 操作系统：Windows XP 以上； 需求软件：Dreamweaver、Macromedia Fireworks 8、Photoshop； 浏览器：IE8.0； 分辨率：最佳效果 1024768。 3.23.2 网站结构网站结构 网站页面采用静态的方式，静态主页方式包括： 1. 引页：由一张图片为主进入网站首页。 2. 首页：由引页进入后，可以一眼看出此网站主题风格及内容。首页内容可以 由导航条作

17、出分类，其中可以包含：引页、Mylove（首页）、我的相册、各种收藏、 心情日记、个人简历等。 3. 各级分页：页面色彩、背景须与首页一致，以达到色彩统一，有层次感。 此次做的是 个人球迷网站。这个网站主要的目的就是 针对个人爱好 进行了设 计，并且加入了自我介绍，以方便访问者了解我。 总的来说，对于这个网站我是很满意的。从布局，选色，做图还有文字都是我花 了很多的时间。虽然不算专业性的网站，但是最后还是做成了，简单有意义。 结构图 ： 首页 My Love我的相册各种收藏心情日记个人简历雁过留声 图 3.1 主结构图 3.33.3 页面结构页面结构： 页面内容由： 标题栏 导航条 公告栏 日

18、历 链接区 正文信息等组成。 以下的是我在做此网站期间认为比较不错的页面以及它的实现过程,在此贴出来给大家 欣赏下。 3.3.1 引页图片如下： 图 3.2 引页 丝丝小雨，带给我们多少温柔与浪漫，这篇教程里，我们将会用 Fireworks 里的运动 模糊滤镜来制作出丝小雨的动画特效希望大家在网页设计中能有帮助 第一步.先选择一张做为背景的图片： 图 3.3 选则背景图 第二步.转换到层面板添加一个新图层。 图 3.4 新建图层 第三步.选中第二层，回到图片编辑窗口，用图形工具在图片上方拉出一个大出画布， 然后填充为黑色的长方形。 图 3.5 编辑画布 第四步.保持长方形选中的状态，为其添加效

19、果：效果杂点新增杂点，设置数量为： 400 图 3.6 新增杂点 第五步.再为其添加滤镜效果：滤镜模糊运动模糊。 图 3.7 增加运动模糊 第六步.接着调整它的透明度，这样才能把背景显示出来。 图 3.8 调整透明度 第七步.这时候图片有点像下雨的感觉吧。 图 3.9 显示调整透明度后图片 第八步.要做成动态下雨的效果，下面就是关键步骤！转到帧面板为长方形添加一帧。 图 3.10 插入帧 第九步.调整该帧长方形的位置，虚线为本来的位置，蓝线是调整后的位置。 图 3.11 调整帧位置 第十步.重复 8-9 的步骤再添加一帧。 第十一步.最后，回到层面板，选择背景所在的层，双击该层名称在弹出的对话

20、框中把 “共享交叠层”项勾上，作品到此也就完成了。 图 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; bannerADlink0=#; bannerAD1=picture/inter/a12.jpg; bannerADlink1=#; bannerAD2=

21、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(); for (i=1;ibannerAD.length;i+) preloadedimagesi=new Image(); preloadedimagesi.

22、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) bannerADrotator.filters.revealTrans.play() function nextAd() if(adNum nextAd

23、() 3.3.3 导航条效果： 每次刷新页面，所显示的效果就不同，给人一种新颖的感觉。 图 3.14 导航条效果 代码如下： 首页 西湖雨景 Mylove 国际米兰 3.3.4 图片鼠标效果： 当鼠标放到图片上后都会有凹凸不平的层次感。 图 3.15 图片凹凸效果 代码如下： 图片鼠标效果后续代码：详见附录 第章第章网站制作问题网站制作问题 4.14.1常见问题常见问题 在这此制作过程中，遇到的问题多种多样，在老师、同学的帮助下终于得到解决。 以下是经常遇见的问题： 1. 在网页制作中的，有时我们发现图的高度和宽度值都被自动加粗显示了，从而 导致整个表格变形，出现这种情况的原因是我们操作不小心

24、，改变了部分文字、图片 的大小、高度。 图 4-1 表格的改变 2. 在 Dreamweaver 中，插入空格需要在全角状态下可以插入，半角状态只能加一 次微小的距离，但当用全角插入空格后却与其余文字间位置不能对齐，须用全角半角 之间转换加空格来对齐。 把半角切换到全角 图 4.1 全角半角切换 3. 设置表格虚线 设置表格虚线的方法有如下三种： 方法一：作一个 1*2 的图。半黑半白，再利用表格作成线。这种方法虽然麻烦， 但在任何浏览器中都可以浏览，兼容性最好。 方法二：在 CSS 里面设定。在 CSS 面板里新建一个 style，选择“redefine HTML Tag” ，再在下拉菜单里选“table” ，在弹出的面板里，category 里选择 border，在 border 里，将 top,left,right,bottom 都设成 1px，边框颜色可以设成你所需要的颜 色。然后在 style 下拉框里选择 dashed。确定以后所有的表格都会用虚线做边框了。 但是，这个效果只有在浏览器里才能看到。 方法二只能在 IE5.5 里用，到了 NETSCAPE 里一点用处都没有，除非你用做好的底图填 充。 参考文献参考文献 1陈青Dreamwe