足球空间网页设计论文.docx

1、足球空间网页设计论文网站设计与建设课程设计报告设计题目： 足球空间网页设计 专 业： 班级： 学生姓名： 学号： 指导教师： 2011年9月前 言网页设计网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。Web站点应针对所服务对象（机构或人）的不同而具有不同的形式。有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以

2、下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。 版式设计通过文字图形的空间组合，表达出和谐与美。 多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。本网站制作网页运用了超级链接，亮光字体，条幅滚动，滚动字幕，插入多媒体，光柱等特效，阐述了制作网页时需要的知识和相关技能。 第1章 概述1.1 选题的意义1主题足球网站空间设计

3、2选题的意义足球运动是一项古老的体育活动，源远流长。最早起源于我国古代的一种球类游戏“蹴鞠”，后来经过阿拉伯人传到欧洲，发展成现代足球。所以说，足球的故乡是中国。据说，希腊人和罗马人在中世纪以前就已经从事一种足球游戏了。他们在一个长方形场地上，将球放在中间的白线上，用脚把球踢滚到对方场地上，当时称这种游戏为“哈巴斯托姆”。而现代足球起源地是在英国，是来源于12世纪前后他们和丹麦发生了一场战争，战争结束后英国人看到地上有丹麦士兵的人头，由于英国对丹麦士兵非常痛恨，便踢起了那人头。到19世纪初叶，足球运动在当时欧洲及拉美一些国家特别是在资本主义的英国已经相当盛行。直到1848年，足球运动的第一个文

4、字形式的规则剑桥规则诞生了。中国人民十三亿，可谓是能人辈出，可惜的是，老祖宗发明的运动却让外国人玩的很好，中国足球队现在连世界杯都进不去，更别说拿到好的成绩。本人设计足球空间网站只是把自己最近学会的知识用网页的形式表达出来，在网页中表达我对足球的喜爱，让人们对网页制作产生浓厚兴趣。第2章 分析2.1 技术分析一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟

5、，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。 尽管选择什么样的工具并不会影响对设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、fireworks等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等，网上有许多这方面的软件。2.2 功能

6、分析Web站点应针对所服务对象（机构或人）的不同而具有不同的形式。有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中， 它

7、的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。 点、线、面作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效果，充分表达完美的设计意境。网络资源的优势之一是多媒体功能。要吸引浏览者注意力，网页的内容可以用三维动画、FLASH等来表现。但要由于网络宽带的限制，在使用多媒体的形式表现网页的内容时不得不考虑客户端的传输速度。第3章 总体设计与详细设计3.1 总体结构设计1系统结构图2系统设计草图3.2网站目录结构设计足球空间网站的根目录包含了明星传记子目录，音乐子目录和视频子目录。明星传记子目录主要有一些明

8、星的最近动态，生日，辉煌的功绩，小道新闻，爱好等。音乐子目录有世界杯时候的歌曲等。视频子目录是球员在比赛中的精彩射门等。网络上的三维空间是一个假想空间，这种空间关系需借助动静变化图像的比例关系等空间因素表现出来。 在页面中，图片、文字位置前后叠压，或页面位置变化所产生的视觉效果都各不相同。通过图片、文字前后叠压所构成的空间层次不太适合网页设计，根据现有浏览器的特点，网页设计适合比较规范、简明的页面，尽管这种叠压排列能产生强节奏的空间层次，视觉效果强烈。 网页上常见的是页面上、下、左、右、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空间层次富有弹性，同时也让

9、人产生轻松或紧迫的心理感受。 现在，人们已不满足于HTML语言编制的二维Web页面，三维世界的诱惑开始吸引更多的人，虚拟现实要在Web网上展示其迷人的风采，于是VRML语言出现了。VRML是一种面向对象的语言，它类似Web超级链接所使用的HTML语言，也是一种基于文本的语言，并可以运行在多种平台之上，只不过能够更多地为虚拟现实环境服务3.3 详细设计一、 明确建立网站的目标和用户需求 Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此我们必须明确设计站点的目的和用户需求，从而做出切实可行的设计计划。我们会根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，

10、以“消费者（customer)”为中心，而不是以“美术”为中心进行设计规划。 在设计中，需要考虑：建设网站的目的是什么？ 为谁提供服务和产品？ 企业能提供什么样的产品和服务？ 网站的目的消费者和受众的特点是什么？ 企业产品和服务适合什么样的表现方式（风格）？ 二、网页设计总体方案主题鲜明 在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。 Web站点应针对所服务对象（机构或人）的不同而具有不同的形式。有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。好的Web站点

11、把图形表现手法和有效的组织与通信结合起来。 为了做到主题鲜明突出，要点明确，我们将按照客户的要求，以简单明确的语言和画面体现站点的主题；调动一切手段充分表现网站点的个性和情趣，办出网站的特点。 Web站点主页应具备的基本成分包括： 页头：准确无误地标识你的站点和企业标志； Email地址：用来接收用户垂询； 联系信息：如普通邮件地址或电话； 版权信息：声明版权所有者等。 充分利用已有信息，如客户手册公共关系文档技术手册和数据库等。 三、网站的版式设计 网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。 版式设计通过文字图形的空间组合，表达出和谐

12、与美。 多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。 四、色彩在网页设计中的作用 色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合搭配来构成美丽的页面。 根据色彩对人们心理的影响，合理地加以运用。如果您的企业有CIS（企业形象识别系统），我们将按照其中的VI进行色彩运用。 五、网页设计形式与内容相统一 为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的

13、丰富含义。 灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中， 它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。 点、线、面作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效果，充分表达完美的设计意境。 六、三维空间的构成和虚拟现实 网络上的三维空间是一个假想空间，这种空间关系需借助动静变化图像的比例关系等空间因素表现出来。 在页面中，图片、文字位置前后叠压，或页面位置变化所产生的视觉效果都各不相同。

14、通过图片、文字前后叠压所构成的空间层次不太适合网页设计，根据现有浏览器的特点，网页设计适合比较规范、简明的页面，尽管这种叠压排列能产生强节奏的空间层次，视觉效果强烈。 网页上常见的是页面上、下、左、右、中位置所产生的空间关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空间层次富有弹性，同时也让人产生轻松或紧迫的心理感受。 现在，人们已不满足于HTML语言编制的二维Web页面，三维世界的诱惑开始吸引更多的人，虚拟现实要在Web网上展示其迷人的风采，于是VRML语言出现了。VRML是一种面向对象的语言，它类似Web超级链接所使用的HTML语言，也是一种基于文本的语言，并可以运行在多

15、种平台之上，只不过能够更多地为虚拟现实环境服务。 七、网页设计中多媒体功能的利用 网络资源的优势之一是多媒体功能。要吸引浏览者注意力，网页的内容可以用三维动画、FLASH等来表现。但要由于网络宽带的限制，在使用多媒体的形式表现网页的内容时不得不考虑客户端的传输速度。 八、结构清晰并且便于使用。 如果人们看不懂或很难看懂您的网站，那么，他如何了解你的企业和服务呢？使用一些醒目的标题或文字来突出您的产品与服务。并且即使您拥有最棒的产品，如果客户从您的网站上不清楚您在介绍什么或不清楚如何受益的话，他们是不会喜欢您的网站的，这就是网页设计的失败。 九、导向清晰。 网页设计中导航使用超文本链接或图片链接

16、，使人们能够在您的网站上自由前进或后退，而不会让他们使用浏览器上的前进或后退。我们在所有的图片上使用“ALT”标识符注明图片名称或解释，以便那些不愿意自动加载图片的观众能够了解图片的含义。 十、快速的下载时间。 很多的浏览者不会进入需要等待5分钟下载时间才能进入的网站，在互联网上30秒的等待时间与我们平常10分钟等待时间的感觉相同。因此，我们会建议您在网页设计中尽量避免使用过多的图片及体积过大的图片。我们通常会与客户合作，将主要页面的容量控制在50K以内，平均30K左右，确保普通浏览者页面等待时间不超过10秒。 十一、非图形的内容。 我们在必要时适当使用动态“Gif”图片，为减少动画容量，应用

17、巧妙设计的Java动画可以用很小的容量使图形或文字产生动态的效果。但是，由于在互联网浏览的大多是一些寻找信息的人们，我们仍然建议您要确定您的网站将为他们提供的是有价值的内容，而不是过度的装饰。 十二、方便的反馈及订购程序。 让客户明确您所能提供的产品或服务并让他们非常方便地订购是您获得成功的重要因素。如果客户在您的网站上产生了购买产品或服务的欲望，您是否能够让他们尽快实现吗？是在线还是离线？ 十三、网站测试和改进 测试实际上是模拟用户询问网站的过程，用以发现问题并改进网页设计。我们通常与用户共同安排网站测试。第4章 系统测试4.1 设计和调试过程中遇到的问题在设计和调试的过程中，遇到的问题很多

18、。图片链接，文字链接，背景音乐链接，视频链接，滚动条字幕，左右滚动字，改变制作鼠标特效，制作页面特效等等。4.2 运行通过后的结果经过翻阅大量的资料和老师的指导帮助，终于完成了这个网页。第5章 使用说明在dreamweaver中，把制作好的网站用IE浏览器就可以运行出来。第6章 设计总结通过本次网页程序课程设计，我觉得对自己提高很大：克服了的偷懒的毛病，这在我以后的学习和工作中的心理定位与调节有很大的帮助。我感受到了网页设计是一项非常烦琐周密的活动，他不但需要一个人周密的思考问题的能力，处理问题的能力，还需要有足够的耐心和严谨治学的作风，来不得半点马虎。通过本次论文设计，我初步学会了论文设计的

19、基本方法，学会了怎样去借鉴别人的方法和经验，知道如何去查找资料和整合处理这些资料的能力，这为以后的大学毕业设计论文打下了一个初步的基础使我收益最大的是享受到了一种成功的喜悦，在这两个星期之中从开始的确定论文题目，然后是上网和上图书馆查找资料，了解网页设计的技巧，然后是进行设计，这个环节是一个非常痛苦和艰难的，常常会因为一小点的错误而在网页设计中设计不出好的效果与再次修改的漫漫循环之路中，但失败的越多，对人的考验就越多，在网站设计成功之后的享受成功的喜悦也就越多，另外在调试程序的过程中不断的思考和运用已经学到的知识，这对于自己是有很大的提高的。这个足球空间网站的最大特点是采用了很多特效技术，使我

20、做的网站有了一些美好的艺术效果。按现有的知识水平有些东西暂时还无法解决，像连接数据库等方面，还有待于在以后的学习中不断的学习、提高和改进！参考文献1 曾海文等.网页设计与制作教程.北京:清华大学出版社,2010.92 杨选辉.网页设计与制作教程.北京:清华大学出版社,2008.83 中国高等职业技术教育研究会.网站设计建设与维护实务.北京:高等教育出版社,20084 东方人华.网页制作三剑客.北京:清华大学出版社2004.95 相万让.网页设计与制作.北京:人民邮电出版社,2004.36 邹婷.DreamweaverMX2004标准教程.北京:中国青年出版社,2004.17 黄英等.网页设计与

21、制作上机实践指导教程.北京:机械出版社,2004.3致 谢在此论文撰写过程中，要特别感谢我的导师戴红老师的指导与督促，同时感谢她的谅解与包容。没有戴红老师的帮助也就没有今天的这篇论文。求学历程是艰苦的，但又是快乐的。感谢在这四年的学期中结识的各位生活和学习上的挚友们，是他们让我得到了人生最大的一笔财富。在学习上给了我无私的帮助。在此，也对他们表示衷心感谢。谢谢我的父母，没有他们辛勤的付出也就没有我的今天，在这一刻，将最崇高的敬意献给你们！这次的毕业论文设计总结是在我的指导老师戴红老师亲切关怀和悉心指导下完成的。从毕业设计选题到设计完成，戴红老师给予了我耐心指导与细心关怀，有了戴红老师耐心指导与

22、细心关怀我才不会在设计的过程中迷失方向，失去前进动力。戴红老师有严肃的科学态度，严谨的治学精神和精益求精的工作作风，这些都是我所需 要学习的，感谢老师给予了我这样一个学习机会，谢谢！ 感谢与我并肩作战的舍友与同学们，感谢关心我支持我的朋友们，感谢学校领导、老师们，感谢你们给予我的帮助与关怀；特别感谢吉林工程技术师范学院四年来为我提供的良好学习环境，谢谢！ 本文参考了大量的文献资料，在此，向各学术界的前辈们致敬！附录：1源代码标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scroll

23、delay等，它们都是可选的。 behavior属性的参数值为alternate、scroll、slide中的一个，分别表示文字来回滚动、单方向循环滚动、只滚动一次，需要注意的是：如果在标签中同时出现了direction和behavior属性，那么scroll和slide的滚动方向将依照direction属性中参数的设置。如下所示： 我来回滚动我来回滚动 我单方向循环滚动我单方向循环滚动 我改单方向向上循环滚动 我改单方向向上循环滚动 我只滚动一次我只滚动一次 我改向上只滚动一次了我改向上滚动一次了 bgcolor属性 文字滚动范围的背景颜色，参数值是16进制（形式：#AABBCC或#AA5566等）或预定义的颜色名字（如red、yellow、blue等）。如下所示： 我的背景色是红色的我的背景色是红色的 direction属性 文字滚动的方向，属性的参数值有down、left、right、up共四个单一可选值，分别代表滚动方向向下、向左、向右、向上。如下所示： 我向右滚动我向右滚动2系统界面图