1、吉林工程技术师范学院网站设计与建设课程设计报告设计题目： 游戏网站设计 专 业： 班级： 学生姓名： 学号： 指导教师： 2012 年 12 月信息工程学院信息工程学院网站设计与建设课程设计I摘 要20 世纪以来，科技进步和社会生产力的提高，使人类得以创造出前所未有的物质财富。人类对精神世界也有了更高的要求。互联网是现代科技产品，为人类提供者丰富多彩的精神享受。人们通过对网页浏览信息，欣赏视频。这样网页也就是人们登录网络的阶梯。网站是企业向用户和网民提供信息的一种方式，是企业开展电子商务的基础设施和信息平台，企业的网址被称为“网络商标”，也是无形资产的组成部分。网页设计就是企业或个人对网页的一
2、种编辑和个性化的表达方式。网页游戏作为网络的一部分也是用于人们身心放松的一种方式，这样网页游戏也拥有了网络世界的半壁江山。人们的日常生活越来越丰富，娱乐活动已不像过去那么贫乏。在大量的娱乐活动中有一项不仅受到我们学生喜爱，而且还吸引了不少成年人，那就是网络游戏。设计中的审美需求和其各种视觉构成要素(文字、图片、颜色等) 进行了分析, 结合人们在流览信息时的视觉习惯, 探讨了网页视觉信息如何更有效、更为合理的表现与传达。关键字：网页游戏，互联网，网站，网页设计信息工程学院网站设计与建设课程设计1目 录摘 要 I第 1 章 系统概述 21.1 选题的意义 .2第 2 章 系统分析 32.1 技术分
3、析 .32.2 功能分析 .3第 3 章 总体设计与详细设计 43.1 总体结构设计 .43.2 网站目录结构设计 .53.3 详细设计 .5第 4 章 系统测试 64.1 设计和调试过程中遇到的问题 .64.2 运行通过后的结果 .7第 5 章 使用说明 8第 6 章 设计总结 9参考文献 10致 谢 11附录： 121.源代码 .122系统界面图 .17信息工程学院网站设计与建设课程设计2第 1 章 系统概述1.1 选题的意义游戏的发展与社会的变迁息息相关，当我们进入工业化时代以及后工业化时代以后，游戏的发展突飞猛进，每一项新技术的诞生和发明都会催生新的游戏工具和游戏方式，以及网页游戏与现
4、实游戏的差异以此折射游戏发展与社会变迁之问的关系。游戏是人类的天性，从农业时代到工业时代，再到今天的信息时代，从滚铁环、踢毽子到赛车竞速，再到各种各样的电子游戏产品，游戏的形式发生了显著地变化，但其精神内核却始终未变。我们为了趣味、想象和刺激参加游戏。不管我们的游戏具有哪种形态，游戏都是对日常生活实际事物的超离。在游戏中，我们投人具有独特时空限制、独特目 的的实践当中，也经常享受游戏的表达性精神和创造性自治。游戏让我们严肃地对待些琐碎的事情，可以暂时不理会那些在以工作为中心的生活里看来重要的事情。从另一个角度来看，游戏的发展与文明的发展、科学技术的发展、生产力的发展、媒介的发展、社会的发展息息
5、相关。信息工程学院网站设计与建设课程设计3第 2 章 系统分析2.1 技术分析本设计是对网页的结构进行简单的设计，采用 Windows 操作系统作为运行平台、HTML（Dreamweaver）网页技术对网页的风格及其结构功能进行设计，设计的网页中包含 div+CSS 程序技术，使整个网页结构更有层次感。运用PhotoShop 软件对网页中的图片和 logo 等进行设计。保证了网站的主题明确，个性化，网站设计采用浅绿色的风格，给人以一种清新自然之感，贴近大自然。2.2 功能分析设计参考现在一些主流的游戏网站和网页游戏网站，发现了一些普遍的特点，主流游戏网页在设计大多内容过多而令人眼花缭乱，在网站
6、中很难确定那个是自己想要的。所以，本设计在设计时避开了繁琐的网页设计思想使网页真正变得清新脱俗。在本设计中使用 Index（主页）作为网站的登录页，可以方便的浏览、访问各个子级的网站。其中包含了文字说明页，游戏访问页。设计加入了HTTP 特效，使网站的格式更加的明朗。让浏览者在浏览众多网页之余，在游戏页能能够在玩游戏的时候放松自己的身心，陶冶心情的作用。信息工程学院网站设计与建设课程设计4信息工程学院网站设计与建设课程设计5第 3 章 总体设计与详细设计3.1 总体结构设计系统设计包含了 index（主页） ，新闻资讯（文本） 、大鱼吃小鱼、痞子特工和水果忍者等子网页。子网页沿用了主页的清晰浅
7、绿的板式风格，简约大方，去掉了复杂的结构形式，使页面给浏览者以一目了然的感觉。与主流游戏网页在设计相比减去内容过多而令人眼花缭乱问题。1系统结构图图 3-1 系统总体结构图Index(主页)新闻资讯水果忍者痞子特工大鱼吃小鱼信息工程学院网站设计与建设课程设计63.2 网站目录结构设计本系统设计包含了 index（主页） ，新闻资讯（文本） 、大鱼吃小鱼、痞子特工和水果忍者等子网页。结构简单，涵盖了基本的网页类型。Index（主页）有链接各个子网页的相关链接，而进入子网页后也设计了返回主页的链接接口，使整个子页与主页之间产生联动。3.3 详细设计HTML 标记用于标记 HTML 文档的开始和结束
8、 . . . 是整个设计的核心。网页嵌入的 java 源代码如下： 你认为本站的制作水平如何：非常好！一般，有待提高。太差了！ 信息工程学院网站设计与建设课程设计7第 4 章 系统测试4.1 设计和调试过程中遇到的问题在设计时，网页文件与图片文件混合存储在同一个文件夹中，使得设计网络链接是无法正确的找到所链接文件。Photoshop 编辑图片时，文件名中出现了“空格” ，使网页文件在 dreamweaver 中打开时产生了错误提示，而使网站文件错位存储，经过调试之后才真正的解决了这个问题。设计之初，没有将设计文件保和备份文件保存失误，对设计产生了影响。准备工作不充分。设计在板式和风格上简约和淡
9、绿色风格设计突出，而选色方面设计者没有更多的相关知识，在设计时显得繁琐。最终采用清晰浅绿的板式风格，简约大方，去掉了复杂的结构形式，使页面给浏览者以一目了然的感觉。避开了主流游戏网页在设计中大多内容过多而令人眼花缭乱问题。信息工程学院网站设计与建设课程设计84.2 运行通过后的结果图 4-1 index 界面设计图 4-2 水果忍者界面信息工程学院网站设计与建设课程设计9第 5 章 使用说明网页在现代网络中扮演了重要的角色，它是提供网络信息的窗口，而今不会使用网络的人可谓是凤毛麟角。网络的普及给我们的生活带来了巨大的变化。本系统录入了时下比较流行的网页文件，操作简单方便。而系统设计包含了 in
10、dex（主页） ，新闻资讯（文本） 、大鱼吃小鱼、痞子特工和水果忍者等子网页。结构简单，涵盖了基本的网页类型。Index （主页）有链接各个子网页的相关链接，而进入子网页后也设计了返回主页的链接接口，使整个子页与主页之间产生联动。清晰浅绿的板式风格，简约大方，去掉了复杂的结构形式，使页面给浏览者以一目了然的感觉。信息工程学院网站设计与建设课程设计10第 6 章 设计总结这次的课程放在期末课程作业量比较大让我们压力很大也正是因为这样我们被迫提高了时间的使用效率当然也有利于知识的消化和吸收。课程设计的目的不仅仅在于学习到相关网页的制作和站点的发布更重要的是提高我们在网站建设上整体的把握以及给予我们
11、对于网络资源合理使用和对相关信息进行有效地搜索提供了一些方法和途径让我们对于网络的认识发生了一定的改观同时一些新颖和有创意的开发和制作的工具和技术也会激发我们网页设计的兴趣和进一步地学习动力。课程设计题目描述和要求下完成了本次的课程设计真的有一种打了胜仗的喜悦心情。利用 HTML CSS +JavaScript、Photoshop 技术或是应用软件提高了自己的知识水平。信息工程学院网站设计与建设课程设计11参考文献1 曾海文等.网页设计与制作教程.北京:清华大学出版社,2010.92 杨选辉.网页设计与制作教程.北京:清华大学出版社,2008.83 东方人华.网页制作三剑客.北京:清华大学出版
12、社 2004.94 相万让.网页设计与制作.北京:人民邮电出版社,2004.35 邹婷.DreamweaverMX2004 标准教程.北京:中国青年出版社,2004.1信息工程学院网站设计与建设课程设计12致 谢紧张的设计课程就要完美的结束了我们需要感谢所有课程设计的老师，是你们给了我设计网站，在设计之初，不了解网页设计的详细步骤，经过老师的精心指导，使我在繁琐的设计中找到了灵感，作为学生，我要感谢老师对我的大力支持。建立风格的想法和思路，在此，我要感谢所有支持和帮助过我们的所有课程设计的老师，在这个新旧之年交替的时候，希望老师能阖家幸福安康，事业蒸蒸日上。信息工程学院网站设计与建设课程设计1
13、3附录：1.源代码牟游网meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“BlankImage=new Image();BlankImage.src=“blank.gif“;var Opera=(navigator.userAgent.indexOf(“Opera“)!=-1)?1:0;var Opera6=(navigator.userAgent.indexOf(“Opera 6“)!=-1)?1:0;var Konqueror=(navigator.userAgent.indexOf(“Konqueror“)
14、!=-1)?1:0;var NS4=(document.layers)?1:0;var IEMac=0;if (navigator.appVersion.indexOf(“Mac“) != -1) var IEver4=0;if (document.all)var vers=navigator.appVersion;if (vers.substring(0,1)=“4“)IEver4=1;var IEMac4=0;if (IEMac=1) var NS6=0;信息工程学院网站设计与建设课程设计14if (!NS4 meta http-equiv=“Content-Type“ content=“
15、text/html; charset=gb2312“BlankImage=new Image();BlankImage.src=“blank.gif“;var Opera=(navigator.userAgent.indexOf(“Opera“)!=-1)?1:0;var Opera6=(navigator.userAgent.indexOf(“Opera 6“)!=-1)?1:0;var Konqueror=(navigator.userAgent.indexOf(“Konqueror“)!=-1)?1:0;var NS4=(document.layers)?1:0;var IEMac=0;
16、if (navigator.appVersion.indexOf(“Mac“) != -1) var IEver4=0;if (document.all)var vers=navigator.appVersion;if (vers.substring(0,1)=“4“)IEver4=1;var IEMac4=0;if (IEMac=1) var NS6=0;if (!NS4 “;document.write(_tempStr_);destOp)direction = -1;delta=Math.min(direction*diff,delta);信息工程学院网站设计与建设课程设计16objec
17、t.filters.alpha.opacity+=direction*delta;if (object.filters.alpha.opacity != destOp)nereidFadeObjectsobject.sourceIndex=object;nereidFadeTimersobject.sourceIndex=setTimeout(“nereidFade(nereidFadeObjects“+object.sourceIndex+“,“+destOp+“,“+rate+“,“+delta+“)“,rate);BODY SCROLLBAR-FACE-COLOR: #66CC00; S
18、CROLLBAR-HIGHLIGHT-COLOR: #66CC00; SCROLLBAR-SHADOW-COLOR: #999999; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-TRACK-COLOR: #f0ffe8; SCROLLBAR-DARKSHADOW-COLOR: #666666; function bookmarkit()window.external.addFavorite(http:/,阳光梦想)信息工程学院网站设计与建设课程设计17常用软件 Winzip ACDsee Winrar Realplayer QQ ICQ Flashplayer信息工程学院网站设计与建设课程设计18版 权 所 有Copyright 2002.All Rights Reserved.2系统界面图图 附录-1信息工程学院网站设计与建设课程设计19图 附录-2图 附录-3信息工程学院网站设计与建设课程设计20图 附录-4
