kl800.com省心范文网

网页设计课程设计报告3


?????? 网页设计课程设计报告

游戏类网站设计制作 游戏类网站设计制作

院 专 学 姓 学

系 业 生 班 级 名 号

物理与材料科学学院 物理与材料科学学院 电子信息工程 2007 2007 级 1 班 ??? ???

指导教师单位 指导教师姓名 指导教师职称

??? ??? ???

20??年??月 20??年??月 ??

游戏类网站设计制作
电子信息工程专业 2007 级 指导教师 ??? ??

摘要:网站主页的版头主要是根据专题游戏类网站的框架和模式而设计的,再用 摘要 上 flash 以及对图片运用 PS 技术进行修改,使版头更加美观形象。本网站主要介绍 奇迹 MU 这一款游戏的具体情况,通过各个分模块详细介绍与游戏相关的各种设计, 如游戏的经验倍数、升级点数、刷怪设置、物品掉落概率、游戏装备设置等等;在注 册帐号页面,利用 ASP+T-SQL 语言,与 SQL 连接进而实现游戏帐号注册;除此之外; 其它页面还可以实现游戏帐号管理、 与游戏相关的下载以及英雄排行等相关信息的查 看。设计的各功能模块与其它其它专题游戏类网站风格相似。设计制作本网站所用的 所有资源,均来自互联网。

关键词:首页,注册帐号,帐号管理,下载中心 关键词

设计目的: 设计目的: (1)进一步掌握 Dreamweaver 课程所学的理论知识。 (2)熟悉常用的网页设计技巧,并掌握相关内容,使用其进行网页设计。

设计技术指标与要求: 设计技术指标与要求: (1)制作表格以及图片插入; (2)制作图片链接以及文字链接。 (3)制作图像热区链接。 (4)利用 JavaScript 脚本制作幻灯展示图。 (5)利用 JavaScript 脚本实现页面与 SQL 连接。

1

目录
前言…………………………………………………………………………………………1 前言 1 游戏类网站设计制作 …………………………………………………………………1 1.1 设计思想 …………………………………………………………………………1 设计方案………………………………………………………………………1 设计所需的资源………………………………………………………………1 组织结构图……………………………………………………………………2

1.1.1 1.1.2 1.1.3 2 3 4 5

首页效果预览 …………………………………………………………………………2 分页效果预览 …………………………………………………………………………4 网页设计关健部分代码 ………………………………………………………………5 设计体会 ………………………………………………………………………………6

参考文献 …………………………………………………………………………………6

前言 随着计算机网络的飞速发展,网站种类也越来越多,不仅有企业展示网站、电子 商务网站,还有专门供浏览者休闲娱乐的游戏网站。随着越来越多年轻、庞大的用户 群加入游戏阵营,大师的游戏网站就去而生。 专题游戏类网站是游戏类网站中最常见的,通常是某一款游戏的相关内容,其特 点是专业性较强,界面精美。本设计报告内容就是关于一款名叫奇迹 MU 的专题游戏 网站。

1 游戏类网站设计制作 1.1 设计思想 1.1.1 设计方案

方案:网站首页(内容包括:顶部导航栏、游戏精美截图、新闻公告、游戏介绍、 与子页面相关的图片链接以及文字链接等等) ;注册帐号(内容包括:顶部导航栏、 游戏精美截图、游戏帐号注册、页面与 SQL 连接等) ;帐号管理(内容包括:顶部导 航栏、游戏精美截图、游戏帐号登陆、页面与 SQL 连接等) ;下载中心(内容包括: 顶部导航栏、游戏精美截图、游戏登陆器下载、游戏客户端下载、游戏客户端补丁包 下载等) ;赞助我们(内容包括:顶部导航栏、游戏精美截图、管理者心声、赞助服 务等) ;英雄排行(内容包括:顶部导航栏、游戏精美截图、游戏各服务区相关英雄 排行列表、与 SQL 连接等) ;战盟排行(内容包括:顶部导航栏、游戏精美截图、游 戏各服务区相关的各大战盟排行列表、与 SQL 连接等)

设计所需的资源 1.1.2 设计所需的资源 Dreamweaver8,Potoshop7.0,Flash8,SQL2000 企业版 (1)Dreamweaver8 用于实现对网页内容的设计排版等; (2)Potoshop7.0 用于实现对网页内容所需图片的技术处理; (3)Flash8 用于实现网页内容所需 FLASH 的设计; (4)SQL2000 企业版用于实现游戏帐号、人物角色等相关信息的储存。

1

甘国甜

游戏类网站设计制作

1.1.3 组织结构图 .1.3

首页
注册帐号 帐号管理 下载中心 赞助我们 英雄排行 战盟排行

2 首页效果预览

图 1 首页预览第一部分 上示图 1 为网站主页的版头,制作版头主要有几下几点关健:一,导航栏为图片 链接,从导航栏,可以实现从主页到注册帐号、帐号管理、下载中心和英雄排行等分 页面的链接;二,导航下面的图片模块,利用 PS 对游戏的截图进行技术,让网站访 问者在第一时间,享受到视觉上的刺激,同时,利用 PS 在图片上合适的位置,添加 描述游戏本身属性的关健字,更让网站访问者在享受到视觉冲激的同时,对游戏的版 本和游戏的规则等有了一个大概的了解;三,FLASH 动画效果,两个游戏角色手拿武 器对决的场面,让网站访问者的视觉冲激加深了层次;四,FLASH 链接,一个闪亮的 圆形注册按钮,其作用不仅增强了视觉效果,也实现了对注册页面的链接;等等。

2

钦州学院本科课程设计报告

图 2 首页预览第三部分 上示图 2 为网站主页中底部分,主要显示信息为与游戏相关的各项设置。图示左 边,首先看到的,是关于游戏的几大特色,如镶嵌系统,镶宝装备,让玩家清楚了解 到,在游戏中,可以实现对游戏装备进行宝石镶嵌,娱乐的感觉将会不言而喻;其次 可以看到友情链接内容,长城宽带、中国电信、中国联通……不管网站访问者是以为 何种方式与互联网连接的,皆可以访问本网站,同时也能成功链接并且登陆游戏,享 受自己的娱乐生活。图示右边,网站访问者可以从其所展示的内容,对游戏有一个相 对较详细的了解,游戏版本一栏,清楚地告诉了访问者关于游戏的版本、经验倍数和 各职业升级点数;新人出生一栏,明了地让访问者知道,各种职业出生后可以获赠的 自由分配属性点的数量;从积分商店一栏,访问者可以获知,在游戏中,从积分商店 里可以采购到何种类型的物品; 积分获得一栏使读者掌握在游戏中如何获得积分的方 法;刷怪设置、宝石爆率和卓越爆率这几栏,是所有游戏玩家关注的重要信息,玩游 戏,一定要升级,刷怪设置让玩家获知在哪个地图可以激情地刷经验,而宝石的爆率 以及卓越爆率,更让玩家疯狂冲级的同时,增加大量的意外惊喜;等等。

3

甘国甜

游戏类网站设计制作

3 分页效果预览

图 3 分页预览第三部分 上示图 3 为分页实现主要作用部分,该部分可实现游戏帐号注册以及游戏帐号相 关的管理等等。如上图所示,玩家在网页成功登录之后,就要可以对下拉菜单的选项 功能进行选择。各项功能,均由 ASP 代码结合页面设计实现:帐号登陆,为游戏玩家 实现帐号登陆,而找回密码,刚是为了忘记游戏帐号密码的部分玩家提供案例保障服 务,兑换积分,该项功能,比较特殊,玩家在游戏,玩家首先要在游戏中,刷到可以 兑换积分的相应的宝石及材料,然后再到网站登录并选择此项功能方可实现;等等。

4

钦州学院本科课程设计报告

4 网页设计关健部分代码 以下所示代码为实现游戏帐号注册时相关新区的选择: <SCRIPT type=text/javascript> <!-function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;

i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null)
5

甘国甜

游戏类网站设计制作

{document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </SCRIPT> 5 设计体会 通过本次网页课程设计学习,本人对以下内容更加熟识: (1)对表格在网页设计中的运用更加熟练; (2)对标签 DIV 的认识和了解进一步深化; (3)对 FORM 在网页设计中的运用有了初步认识; (4)对利用 ASP 语言实现网站与数据库连接有了初步认识。 以上所述,即本人在本次网页课程设计学习中的体会。 参考文献 [1]何琛.中文版 Dreamveaver8 网页设计经典商用案例.上海:上海科学普及出版 社,2007 年 6 月第一版.ISBN978-7-900423-88-7/TP.43. [2] 锐 博 科 技 .DreamveaverCS3 从 入 门 到 精 通 . 北 京 : 中 国 青 年 出 版 社,2008.ISBN978-7-5006-7840-3.

6


赞助商链接

网页制作课程设计报告

网页制作课程设计报告_学习总结_总结/汇报_实用文档。网页制作课程设计 报告 课题... 大剑神 奇幻     ...

网页设计课程设计报告3

网页设计课程设计报告3 网页设计课程设计报告网页设计课程设计报告隐藏>> ??? 网页设计课程设计报告 游戏类网站设计制作 游戏类网站设计制作 院专学姓学 系业生班级...

网页设计课程设计报告

网页设计课程设计报告_工学_高等教育_教育专区。随着网络技术的发展与互联网的普及...(3)网站提供的信息应与网站主题相符合; (4)网站 LOGO 与网页风格应该协调一致...

网页设计课程设计报告

钦 州 学 院 网页设计课程设计报告 博客类网站的设计 院专学姓学 系业生...和代码提示制作滚动公告; (3)利用插入文本域制作登录区; (4)制作圆角表格; (...

网页设计课程设计报告

网页设计课程设计报告... 12页 免费 网页设计与制作Ⅱ课程报告... 3页 免费如要投诉违规内容,请到百度文库投诉中心;如要提出功能问题或意见建议,请点击此处...

网页制作课程设计报告

学会 设计制作网站(全部工作流程) ,包括完成设计报告,了解网站的软、硬件平台...3.课程设计说明书 (1)主题定位 满足公司对外的宣传, 按公司要求设计站点, 更...

网页设计课程设计报告

网页设计课程设计报告_工学_高等教育_教育专区。课程设计报告 课程名称: 设计题目...2 首页 游戏介绍 英雄介绍 攻略心得 反馈意见 站长信息 3 个英雄实例 英雄列表...

网页设计课程设计报告(1)

(一)网站设计目的和任务 (二)网站主题 网站主题 (三)网站规划思想 (四)网站页面链接总结 (五)综合知识的运用情况 (六)课程设计心得与体会 2 网站设计目的和...

web网页设计课程设计报告_图文

web网页设计课程设计报告 - 《web 开发技术》课程设计 学专班姓学 院: 业: 级: 名: 号: 工学院 软件工程 1401 兰欣 2014011029 姬广永 指导教师:...

网页课程设计报告_图文

学生应完成的工作: 1、分析 2、规划 3、设计 4、实现 5、测试 6、撰写课程设计报告 参考文献阅读: [1] 任小琦,网页编程.清华大学出版社,20011.12 [2] ...