毕业设计论文个人网站体育站设计与实现管理资料.docx

毕业设计论文个人网站体育站设计与实现管理资料.docx

《毕业设计论文个人网站体育站设计与实现管理资料.docx》由会员分享，可在线阅读，更多相关《毕业设计论文个人网站体育站设计与实现管理资料.docx（19页珍藏版）》请在冰豆网上搜索。

毕业设计论文个人网站体育站设计与实现管理资料

先锋软件职业技术学院

毕业设计（论文）

（2008届）

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

系别软件系

专业软件设计与开发

班级0804

姓名

指导教师

2008年月日

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

【摘要】面对日益加快的生活节奏和信息社会日新月异的变化，Internet的快速普及，上网者已经不再满足于仅仅浏览网页，而是希望更深入地参与到网络中。

假如想上一个体育的网站了解一下当天的足球战报，那么我上网的目的性就是非常的明确，直接看足球的结果。

那么考虑一下的上网过程就是先敲入网址，到主页上，然后尽快的找到足球的栏目，再找到比分的链接。

体育网站现已是网络经济的一匹黑马。

体育网站将成为网站中成功的佼佼者，丰富多彩的体育新闻会使你流连忘返。

网页内的体育新闻可以说是网站构成的基本元素。

组建体育网站先要规划一个网站的整体结构，做到条理清晰，使浏览者不致迷路，同时还要使网页美观独特，一目了然，优点。

【关键词】个人网站：

页面设计；Dreamweaver；Photoshop。

第1章网站构思及相关技术

如今Internet飞速发展，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。

因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

为了让志同道合的人一起欣赏，一起研究，一起来探讨，本论文就是介绍如何建设个人网站。

网站构思

该网站的特点：

1.建有自己特色的网站及内容。

2.结构层次协调且合理。

3.插入视频、音频文件使内容生动。

4.使用多种特效使页面不显得枯燥。

开发工具的选用及介绍

DreamweaverMX概述

DreamweaverMX是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的网页编辑器,与FireworkMX、FlashMX一起，被人们喻为“网页制作三剑客”。

随着互联网（Internet）的HTML技术不断发展和完善，我们身边出现了很多种网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）。

所见即所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑几乎一样。

同FrontPage一样，DreamweaverMX就是第一套针对专业网页设计师特别发展的可视化网页开发工具，利用它可以轻而易举地制作出跨越平台限制的网页。

它能够很好地支持ActiveX、JavaScript、Java、Flash和Shockwave等，而且还能通过鼠标拖动的方式从头到尾制作动态的HTML效果。

DreamweaverMX还采用RoundtripHTML技术，使用这项技术，网页可以在ＤreamwaverMX和HTML代码编辑器之间进行自由转换，而HTML语法及结构不变。

这样，专业设计者可以在不改变原有的编辑习惯的同时，充分享受到“所见即所得”带来的方便。

DreamweaverMX最具有挑战性和生命力的是它的开放式设计，这项设计使任何人可以轻易扩展它的功能。

DreamweaverMX是一种全新概念的产品。

利用它，开发人员、编程人员可以在多种服务器平台上、在一个软件中完成支持几种语言的动态网页的开发，产生和编辑用ASP（ActiveServerPages）、JSP（JavaServerPages）和ColdFusion开发的Web内容。

由于DreamweaverMX是从低版本的Dreamweaver环境衍生出来的，因此它也具有十分完美的HTML、JavaScript功能。

DreamweaverMX的界面和工作环境比以前的Dreamweaver版本更简洁、更具弹性，DreamweaverMX同样具备了与Fireworks、Flash和Shockwave紧密集成的诸多优点，以及使用DreamweaverMX的可扩展结构来扩展和定制Web的功能。

DreamweaverMX大大加速了网络时代电子交易应用中的项目交付。

它提供了从网页和表单动态生成到企业级的解决方案，如电子商店，库存管理系统和企业内部局域网的数据库应用等功能。

基于DreamweaverMX的以上优点，所以我们在进行网站的页面设计和页面布局时采用这一软件来完成的。

Fireworks概述

.

,对它们进行位图效果的处理,例如添加斜角,光晕,阴影等,或者应用Photoshop的滤镜效果----当您在编辑的时候,这些效果会自动的实时添加,你可以随时看到添加后的图像效果.

Fireworks的出现使得网页设计师处理网络图像时,,设计师可以随时观察图像的效果,随时返回以前的操作,,从而适合网络的传输和显示。

第２章　网站页面规划

页面设计定义

网站结构：

应该只为了实现一个目标而努力，引领你的访问者从主页访问到站点中其它不同的页面。

导航结构：

导航条的结构主要为了方便访问者在各页面之间进行切换。

文本内容：

相信人们会阅读你页面上的所有信息吗？

他们不会的，他们所做的事情就是“浏览”。

页面设计时可掺入以下元素：

1．文本格式化：

页面本身对文本和字体的格式化能力并不强，在页面中，可以指定文本尺寸、排列和其他的一些格式化属性（序号列表和无序号列表），但建议不要改变字体，而应当使用缺省字体，你指定的字体在浏览者那里并不一定能够找到，如果确实有必要少量使用某种特殊字体，可以把这些字体象素化变为图像，然后将图像插入到页面中。

2．按钮、图标和其他导航工具：

可以帮助浏览者在页面内导航。

3．背景：

给页面添加背景，包括纹理填充、水印式背景和长条状背景等等，可以使得页面更加美观，给浏览者留下深刻的印象。

4．图形：

可加入图片、图表和图形等。

5．表格：

用来显示按行和列组织的信息等。

6．颜色：

包括图片的色彩、文本和背景的色彩等。

7．多媒体元素：

包括声音、动画、视频片断等。

8．页面布局：

在页面上放置文本、图形等元素，在元素间添加横线条，空白等，并用表格、框架进行排版。

页面设计要求

：

设计并不再现具体的物象和特征，它要表达的是一定的意图和要求，在适当的环境里为人们所理解和接受。

它与绘画有内在联系，但又不同于绘画，它以满足人们的实用和需求为目标，因而它比绘画更单纯，清晰和精确。

页面设计属于设计的一种，同样要求简练，准确。

一致性：

一致性是表现一个站点的独特风格的重要手段之一。

要保持一致性，可以从页面的排版下手，各个页面使用相同的页边距。

文本，图形之间保持相同的间距。

主要图形，标题或符号旁边留下相同的空白。

如果在第一页的顶部放置了公司标志，那么在其他各页面都放上这一标志。

如果使用图标导航，则各个页面应当使用相同的图标。

一致性还包括：

页面中的每个元素与整个页面以及站点的色彩和风格上的一致性。

：

使用对比是强调突出某些内容的最有效的办法之一。

好的对比度使内容更易于辨认和接受。

实现对比的方法很多，最常用的是使用颜色的对比。

比如，内容提要和正文使用不同颜色的字体，内容提要使用蓝色，而正文采用黑色；也可以使用大的标题，也即是面积上的对比；还可以使用图像对比，题头的图像明确的向浏览者传达本页的主题，这里同样需要注意的是链接的色彩，在设计页面时我们常常会只注意到未被访问的链接的色彩，而容易忽视访问过的链接色彩将使得链接的文字难地辨认。

页面设计流程

1.Web上的内容包罗万象，版式丰富多彩，但无论怎样的变化，好的Web站点总是有许多共同之处，例如：

2.精心组织的内容；

3.格式美观的正文；

4.和谐的色彩搭配；

5.较好的对比度，使得文字具有较强的可读性；

6.生动背景图案；

7.页面元素大小适中，布局匀称；

8.不同元素之间留有足够空白，给人视觉上休息的机会；

9.各元素之间保持平衡；

10.文字准确无误，无错别字、无拼写错误；

页面内容组织

有了好的内容，还必须知道如何更好地去表达它。

现在网页已从过去的“如何做网页设计”的技术阶段进入到“如何做好网页设计”的提高阶段。

一个优秀的网站，除了含有丰富的内容之外，最重要的就是要有清晰的页面布局。

换句话说，要创造一个能吸引人们注意而且能保持吸引力的网站，必须是简单明了的布局，可读性强，并且能在浏览者心中建立信任感。

有时在浏览网页时，特别是浏览一些内容丰富的大型网站的主页时，常感觉到网页的内容虽然既多且杂，但并不凌乱，反而显得井然有序。

这是因为在网页上应用了表格进行排版。

页面设计要点

1.构思出所建网站初步轮廓。

2.收集设计中所需求的资料及软件。

3.准备好各类文件及文件夹位置、名字方便以后查找。

4.熟悉页面设计中所用到的相关软件及如何操作。

第3章网站页面设计

设计需求

硬件需求：

●CPU：

Celeron（R）；

●内存：

256MB。

软件需求：

●操作系统：

WindowsXP以上；

●需求软件：

Dreamweaver、MacromediaFireworks8、Photoshop；

●浏览器：

；

分辨率：

最佳效果1024×768。

网站结构

网站页面采用静态的方式，静态主页方式包括：

1.引页：

由一张图片为主进入网站首页。

2.首页：

由引页进入后，可以一眼看出此网站主题风格及内容。

首页内容可以由导航条作出分类，其中可以包含：

引页、Mylove（首页）、我的相册、各种收藏、心情日记、个人简历等。

3.各级分页：

页面色彩、背景须与首页一致，以达到色彩统一，有层次感。

此次做的是个人球迷网站。

这个网站主要的目的就是针对个人爱好进行了设计，并且加入了自我介绍，以方便访问者了解我。

总的来说，对于这个网站我是很满意的。

从布局，选色，做图还有文字都是我花了很多的时间。

虽然不算专业性的网站，但是最后还是做成了，简单有意义。

结构图

：

主结构图

页面结构：

页面内容由：

●标题栏

●导航条

●公告栏

●日历

●链接区

正文信息等组成。

以下的是我在做此网站期间认为比较不错的页面以及它的实现过程,在此贴出来给大家欣赏下。

引页图片如下：

引页

丝丝小雨，带给我们多少温柔与浪漫，这篇教程里，我们将会用Fireworks里的运动模糊滤镜来制作出丝小雨的动画特效．希望大家在网页设计中能有帮助．

：

选则背景图

。

新建图层

，回到图片编辑窗口，用图形工具在图片上方拉出一个大出画布，然后填充为黑色的长方形。

编辑画布

，为其添加效果：

效果—杂点—新增杂点，设置数量为：

400

新增杂点

：

滤镜—模糊—运动模糊。

增加运动模糊

，这样才能把背景显示出来。

调整透明度

。

显示调整透明度后图片

，下面就是关键步骤！

转到帧面板为长方形添加一帧。

插入帧

，虚线为本来的位置，蓝线是调整后的位置。

调整帧位置

。

，回到层面板，选择背景所在的层，双击该层名称在弹出的对话框中把“共享交叠层”项勾上，作品到此也就完成了。

3.3.2切换图片：

每隔2秒都会出现形式多变的图片,既增添了网站的内容，又增添了不少色彩。

图片切换效果

代码如下：

--//BannerAD

varbannerAD=newArray（）;

varba