毕业论文计算机应用献上.doc

毕业论文计算机应用献上 论文题目 姓 名 学 院 东软信息学院专 业 计算机技术指导教师 讲师备 注20 年月日作者姓名 指导教师 讲师单位名称 计算机科学与技术专业名称 计算机大连东软信息学院20年月esign and Implementation ofWarcraft World Game Website by XXX Lecturer XXXDalian Neusoft Institute of Information TechnologyDecember 2011毕业设计论文任务书毕业设计论文题目设计论文的基本内容 Adobe PhotoshopDreamweaver和DIVCSS技术构建前台框架后台技术使用PHPCMS来实现使网站样式美观风格统一毕业设计论文专题部分题目设计或论文专题的基本内容学生接受毕业设计论文题目日期第 周指导教师签字年月日摘 要Dreamweaver来完成在Dreamweaver使用DIVCSS来进行框架的结构布局并且运用Adobe公司的PhotoshopFlash进行图像处理和美化达到预期要求让网站页面更加美观和风格一致同时采用PHPCMS为后台实现技术本地服务器Wamp是运行在微软公司的操作系统Windows 7中该系统稳定操作简单满足了本网站的开发关键词DreamweaverPHPCMSesign and Implementation ofWarcraft World Game Website AbstractThe twenty-first century is the era of rapid development of the network and at the same time in this fast-paced and stressful society many people in order to unpack but not too much time and energy to do outdoor activities so many people choose the Internet at home because of this many computer game will be favored by the majority of peoples love even go online accounts for most of the day of rest time And by the famous game blizzard entertainment company made the first massively multiplayer online role playing game world of warcraft is more deeply the peoples of the worlds love Because of the world of warcraft is the first vehicle to massively multiplayer online role playing games so the game players in the game can meet all kinds of difficulties according to this need to establish the world of warcraft game information web site This game information site can inquires within the game to aspects of the problem the game players will not have to spend too much time to think of a way to solve the difficulties appearing in the game The world of warcraft game resources nets front desk page Dreamweaver to complete with In Dreamweaver use DIV CSS to frame structure layout and use the Adobe Photoshop Flash of image processing and beautification is expected to reach let the web page more beautiful and a style to agree At the same time for the PHPCMS background technology local server Wamp is running in Microsofts Windows 7 operating system this system is stable and simple operation meet the development of this web site Key words warcraft worldDreamweaverPHPCMS目 录I摘 要IIAbstractIII第1章绪 论111课题研究背景112 论文研究主要内容113 国内外现状214 论文组织结构2第2章关键技术介绍321 Photoshop322 Flash323 Dreamweaver324DIVCSS325 PHPCMS3第3章网站分析531 构架概述5311 功能构架5312 模块需求描述532网站开发环境6第4章网站设计741 设计指导思想和原则7411 指导思想7412 网站设计原则742 网站需求定位743 网站目标群体744明确网站内容745网站页面设计8451 首页结构设计8452 栏目页结构设计9453 列表页结构设计9454 内容页结构设计1046后台管理11第5章网站实现1251 数据库实现1252 网站特色的实现12521首页导航12522职业介绍13523首页背景及背景音乐实现14524首页Banner幻灯实现1453功能模块的实现14531后台登录模块实现14532修改登录界面背景图片实现15533 栏目管理模块的实现16534内容管理模块的实现16535模板风格管理模块的实现1754 页面的实现17541网站首页实现18542网站栏目页效果实现20543网站列表页效果实现21434网站内容页效果实现22第6章网站测试2461 背景音乐测试2462 首页Flash测试2463论坛测试24第7章结 论25参考文献26致 谢27绪 论11课题研究背景12 论文研究主要内容13 国内外现状由于这款游戏是先在国外各个国家先公测的所以中国在游戏的更新上相比别的国家要慢很多中国玩家都去别国的服务器去进行游戏并且中国玩家跟外国玩家相比中国玩家比较业余所以很多国内的游戏攻略都是国外流传进来的根据这一现状本资讯网站会留意国外游戏资讯网站的动向而决定自己网站的动向14 论文组织结构本论文主要分为7章第1章是绪论部分主要介绍本网站的设计背景以及论文研究的主要内容第2章主要介绍完成该网站需要运用的一些技术和软件以及各个软件的功能和特点第3章主要介绍网站的分析与设计构思网站中需要有什么功能等第4章主要介绍网站的设计介绍网站的特色和适用群体第5章主要介绍网站的实现具体介绍各个板块需要用什么技术去完成第6章主要介绍网站的相关测试论文第7章是对整篇论文的总结最后还有相关的参考文献第2章关键技术介绍21 Photoshop22 FlashFlash是一款由美国Macromedia 公司推出的一款优秀网页动画设计软件它是一种交互式动画设计工具用它可以将音乐声效动画以及富有新意的界面融合在一起以制作出高品质的网页动态效果23 DreamweaverDreamweaver原本由Macromedia公司所开发的著名网站开发工具它使用所见即所得的接口亦有6HTML编辑的功能Dreamweaver中可以插入由Photoshop制作的图片和Flash制作的动画24DIVCSSDIVCSS是网站标准中常用术语之一DIVCSS 是一种网页的布局方法这一种网页布局方法有别于传统的HTML网页设计语言中的表格定位方式可实现网页页面内容与表现相分离在XHTML网站设计标准中不再使用表格定位技术而是采用DIVCSS的方式实现各种定位 DIV是HTML 超文本语言 中的一个元素DIVCSS是一种网页的布局方法这一种网页布局方法有别于传统的table布局真正地达 到了w3c内容与表现相分离DIV 是标签 CSS是层叠样式CSS是英语Cascading Style Sheets层叠样式表单的缩写它是一种用来表现 HTML 或 XML 等文件式样的计算机语言DIV 是标签CSS是层叠样式表25 PHPCMSPHPCMS 是国内领先的网站内容管理系统PHPCMS由内容模型会员问吧专题财务订单自定义表单全站搜索等20多个功能模块组成内置新闻图片下载信息产品5大内容模型第3章网站分析31 构架概述311 功能构架根据需求调研结果确定本主要包括以下功能模块如图31所示图31 系统体系结构312 模块需求描述1职业专题主要是对游戏中各个职业进行简单的介绍以及有关职业的一些攻略和新闻 2新闻专题主要是采集各个网站中有关魔兽世界的相关热门报道这样用户就不需要到其他的网站去浏览新闻上传新闻的时会进行筛选把一些热门新闻发布到新闻模块中来3通过市场调查很多游戏玩家非常喜欢收集坐骑所以坐骑专题是游戏网站必不可少的模块坐骑专题分为坐骑展示和坐骑获得坐骑展示主要是一些有关坐骑的图片这样用户就可以看到坐骑的样子从而选择自己喜欢的坐骑至于坐骑获得是向用户介绍坐骑是通过什么途径可以获得的这样可以为用户节省很多时间32网站开发环境 硬件环境软件环境第4章网站设计41 设计指导思想和原则411 指导思想12412 网站设计原则Flash使网页更加美观网页主题要明显突出色彩搭配简单化基本使用一个色系页面设计要新颖使网站在同类网站中更有吸引力注重实用性 42 网站需求定位该网站定位为给所有玩家提供最新的信息和攻略使所有的游戏玩家能在本网站上得到很多对自己有用的东西无论是在游戏的技术上还是最新的消息游戏玩家都能在本网站上得到对于这种大型网络游戏会给玩家带来很多不懂的地方本网站使玩家在游戏中遇到各种迷惑不能很好的得到解答类似于这样的游戏资讯网站有很多可是他们的缺点就在于内容比较没有条理性本网站会汲取别的网站上的优点同时也会注意别的同类网站上的缺点加以改正使本网站在同类网站中更出色43 网站目标群体本网站面向的群体是主要是所有魔兽世界玩家其中分在校学生上班族和没有工作的人群对于所有玩家可以在本网站找到自己想要得新闻以及攻略等可以根据自己的喜好和游戏中的职业来浏览网站中的内容对于在校学生可以根据他们的作息时间来开展一些活动而上班族除了周六日休息以及晚上也有大部分时间也可以根据这些来开展活动经过市场调查没有工作的人群几乎都是晚上大多时间用在游戏上44明确网站内容网站的开发者必须明确自己网站的内容和面向的用户群体在开发者方面要事先收集大量的网站内容的信息和素材以及做出相应的市场调查统计表该资讯网站主要是给玩家提供信息在玩家方面来说注重的是网站的视觉效果和对其有价值的信息所以网站中应用到的图片背景以及音效都是游戏中比较受欢迎的在交流方面上网站实现了论坛功能方便用户与管理员和其他用户之间的交流45网站页面设计首先进行前台构思运用Photoshop完成首页栏目页列表页内容页的效果图然后通过Dreamweaver进行前台页面设计由于本网站采用PHPCMS设计模式所以前台跟后台是分隔开的所以前台必须完善各个板块并且美观首先把页面的基本框架确定下来之后用DIVCSS把框架给作出来451 首页结构设计首页的页面布局主要分为页头导航主体和页脚四部分页头中是个Flash动画其中还有自制的网站Banner页头下面是导航的8个栏目导航是横向导航子栏目采用的是JS技术鼠标悬停时出现子栏目节省了网站排版的空间导航下是主体部分主体部分划分为5个区域主要分为左中右其中左上是放置首页幻灯左下是介绍游戏以及游戏中的职业选择中间是新闻栏目右上为热门论坛右下分为四个小栏目主要是游戏中的热门链接方便快捷进入内容页首页最底层是页脚页脚中放着建站者的版权首页框架结构如图41所示图41 首页框架结构图452 栏目页结构设计栏目页的布局和首页相似页头和页脚是PHPCMS自动调用的变化的只有主体部分主体中左面展示位调用了栏目页信息列表实现了信息整齐排列右面调用了新闻中的信息和缩略图栏目页框架结构如图42所示图42 栏目页框架结构图453 列表页结构设计列表页本质上和栏目页没有太大区别在主体的上部多出两个推荐新闻位置下面是相关链接和网站的主要新闻列表如图43所示图43 列表页框架结构图454 内容页结构设计 网站的内容页是在首页的布局和排版中简化出来的注重内容的突出性运用背景色来突出文章主体使用户方便阅读新闻的主要内容在阅读后由于看惯了黑色会视觉疲劳所以相关链接处用了不同的色调不但丰富了内容页的色调并且是用户不会出现厌恶感内容页框架结构如图44所示图44 内容页框架结构图46后台管理 运用后台主要是实现前台内容的更新和实时维护并且管理发布的内容管理栏目信息管理模板风格以及论坛的维护后台管理如图45所示 图45 后台管理示意图第5章网站实现51PHPCMS中是自带数据库的因为在PC机上实现PHPCMS必须先安装Wamp软件Wamp中带有MySQL数据库所以PHPCMS适合于对数据库不熟悉的网站制作人员安装PHPCMS时采用系统提示的数据库名字就行系统会自动在后台生成对应的MySQL数据存储在数据库中只要Wamp能正常启动和运行PHPCMS就可以正常运行了52 网站特色的实现521首页导航之前说过游戏网站跟其他网站最大的区别就是链接非常多为了使页面整齐所以本网站采用了二级导航如图51所示图5 1 展示导航二级导航的实现主要是插入首先插入相应的CSS样式然后进行调试例如需要完成图51的样式需要如下代码 DIV class ddsmoothmenu id smoothmenu1 A href indxhtml 首页 A href 职业 A href lierenhtml 猎人 A href 骑士 A href 盗贼 A href 战士 A href 法师 DIV class ddsmoothmenu id smoothmenu1 中的ddsmoothmenusmoothmenu1就是插入的CSS样式代码的其余部分就是简单的导航实现所以不加以说明522职业介绍主要功能为供用户提供职业介绍如图52所示图52 职业介绍 单击要查询的职业会出现相应的职业介绍比如萨满如图53所示 图53 进入萨满查询页面职业介绍模块其实就是插入一个已经做好的Flash这样就很容易实现只要在对应的盒子中插入之前做好的Flash就行需要注意的是Flash大小可能和设置的盒子大小不一样需要进行调试如图54所示图54 Flash设置523首页背景及背景音乐实现首页背景及背景音乐实现很简单代码如下 body background imagesmainbodyjpg bgsound src wanglingxuqump3 loop -1 此功能需要注意的是图片和音乐的路径524首页Banner幻灯实现首页Banner和别的网站不同的是别的网站一般运用的只是图片本网站运用的是Flash动画把游戏中2个阵营的所有职业制作Flash动画这样可以给用户更新颖的感觉如图55所示图55 Banner 效果图53功能模块的实现531后台登录模块实现整个后台的管理是基于后台的登录所以在这之前要进行后台的登录也就是进入PHPCMSPHPCMS的后台登录地址为httplocalhostPHPCMSadminphp用户名PHPCMS密 码安装时自己定义的默认密码为phpsms登录界面如图56所示图56 PHPCMS登录界面532修改登录界面背景图片实现登录后台时候所有用户基本是系统默认的背景图片为了后台也更好能体现网站的主题将登录界面的背景图片修改成魔兽世界的主题图片修改后的登录界面如图57所示图57 修改后的登录界面这个操作很简单首先打开HwampPHPCMSimages路径找到软件以前的背景图片然后用选好的背景图片将之替换即可需要注意的是图片大小必须一样不然看起来不美观还有这张图片很大所以在选择的时候也要选择一张大图不然图片就会变得不清晰之前软件默认的是两张图片但是修改的时候不需要替换两张图片把02jpg图片直接删除就行这样修改后就更协调533 栏目管理模块的实现栏目管理只要是对原来的PHPCMS自带的栏目进行删除之后对自己的栏目进行添加添加之后可支持修改移动清空删除和添加子栏目的操作如图58所示图58 栏目管理模块界面不同用途的栏目要套用不同形式的模板PHPCMS中有六模板分别为新闻模板图片模板下载模板产品模板信息模板和视频模板该网站主要套用了其中的三个类型的模板新闻模板图片模板下载模板534内容管理模块的实现内容管理模块主要是对采集到的内容进行管理如修改查看移动等也可以手动去发布内容如图59所示图59 内容管理模块535模板风格管理模块的实现模板风格管理中主要是对网站在Dreamweaver实现的静态网站使用三刀法景静态网页分为页头主体和页脚来导入到PHPCMS中通过对PHPCMS中自带的模板风格文件进行处理得到自己的动态网站模板风格管理中要首设定自己的模板方案设定模板方案如图510所示图510 模板方案管理在进行代码修改之前应将PHPCMS中默认模板方案中的原代码备份一份以备后用将静态页实现动态主要修改headerhtmlindexhtml和footerhtml三个模板中的代码魔兽世界游戏资源网就是基于PHPCMS的模板就行设计和修改的模板管理如图511所示图511 模板管理网站前台的动态新闻是通过PHPCMS的特殊标签调用显示的标签属性是可以修改和设计的标签管理如图512所示图512 标签管理通过调用不同的标签来实现前台列表的不同标签中可也设定调用内容的位置是全站调用还是单独调用一个栏目中的内容列表的数目和每个标题的字数都可以通过标签的设定来实现54 页面的实现魔兽世界游戏资源网的每一个静态页都是在Dreamweaver中实现的以为PHPCMS中调用模板拥有一致性所以在Dreamweaver中完成四个页面就可以完成之后首先将首页导入到PHPCMS中得到动态网页的现在的主要任务是如何将Dreamweaver布置的静态页导入到PHPCMS中接下来将系统的介绍导入步骤541网站首页实现首先采用三刀法将Dreamweaver中的静态网页分为三部分网页顶部到导航下为第一部分页脚为第三部分其余的是主题部分定为第二部分将这三部分代码分别对应复制到PHPCMS的模板风格下的模板管理中由于PHPCMS中每级页调用的都是headerhtml模板样式因此headerhtml模板的代码要包含导航部分如图513所示图513 headerhtml中结束代码部分在复制indexhtml模板中代码的过程中要保留原代码中顶部的 template PHPCMSheader 和底部的 template PHPCMSfooter indexhtml模板中的代码上部要和headerhtml模板中的代码衔接正确如果缺少代码会使网页的主体和上不完全错位显示该网站的footerhtml中的代码较少主要涉及到的是版权问题和实现一个JS的调用这部分的代码实现如图514所示图514 footerhtml中代码然后在Dreamweaver站点中找到静态网页所需要的素材图片和CSS样式并将其全部复制到wampPHPCMStemplatesdemoskinsdefaultimages文件夹中准备工作完成接下来修改headerhtml模板中link调用CSS样式的路径CSS样式的正确调用路径如图515所示图515 CSS样式路径图片能正常显示的路径如图516所示图516 图片路径其中的 SKIN_PATH 所代表的文件目录为PHPCMStemplatesdemoskinsdefault因为该网站的CSS样式与图片都放在images文件夹中所以在 SKIN_PATH 后要加上images同理图片的路径也是如此修改PHPCMS中实现的首页效果如图517所示图517 首页效果图首页幻灯片的显示是通过PHPCMS后台的内容缩略图整理自动生成的调用的是整理后的 tag_首页轮换广告标签 标签列表的显示都是通过调用自己建立的标签来完成的运用了PHPCMS中自带的CSS样式控制了调用出来标签的效果和位置主体区域调用标签实现的代码如下 div class main div class left div class box_1 div class left_title 热点话题 tag_栏目页图片标题首页左 div class right div class right_top_img tag_首页轮换广告 img src SKIN_PATH imagesimg_8gif style floatleft div class news div class news_title table width 100 border 0 cellspacing 0 cellpadding 0 tag_栏目页信息列表 div class clear div class huoban div class huoban_title img src SKIN_PATH imagestitle_2gif div class huoban_nr table width 100 border 0 cellspacing 0 cellpadding 0 td height 100 marquee direction left loop -1 onmouseover stop onmouseout start img src SKIN_PATH images1jpg width 274 height 200 nbsp img src SKIN_PATH images2jpg width 274 height 200 nbsp img src SKIN_PATH images3jpg width 274 height 200 nbsp img src SKIN_PATH images4jpg width 274 height 200 nbsp div class clear 542网站栏目页效果实现因为本站栏目与PHPCMS中的原页面的色调比较接近改网站的主色调所以更改的代码就减少了很多栏目页的实现如图518所示图518 栏目页效果栏目页的页头和页脚与首页的调用是一致的通过代码顶部的 template PHPCMSheader 和底部的 template PHPCMSfooter 实现完整网页栏目页采用了PHP中的循环语句loop循环节省代码空间并且达到样式和效果的统一543网站列表页效果实现列表页调用的是PHPCMS中的listhtml模板list_downhtml模板和list_picturehtml模板文章列表页的生成是调用了PHPCMS中自带的样式和效果做简单的修改和调试完成的文章列表页效果如图519所示图519 文章列表页434网站内容页效果实现内容的展示主要是函数 content 调用的内容而且在原代码中还可以找到作者来源和发布时间等对应的调用函数内容效果的实现如图520所示图520 内容页效果第6章网站测试61 背景音乐测试方案当测试用例62 首页Flash测试方案测试用例63论坛测试方案 测试用例第7章结论当前通过这次网站的开发首先考虑到用户的体验漂亮新颖的前台能给用户留下一个深印象好的用户体验首先必须把草图画出来把基本的框架确定之后设计出每个模块的功能使用Dreamweaver采用CSSDIV把框架给实现了然后使用Photoshop按照框架设计的大小去设计与魔兽世界主题风格相似的图片可以去网上找游戏中的热门图片然后根据实际情况做出相应的修改由于是第一次做整体风格把握不大好也是做了改改了做的后来就上网看一些风格的相似的图片模仿着他人的风格去做但是也保留了自己网站的一点风格不然就和抄袭别的网站没什么区别了尽管这样发现还是站在巨人的肩膀上看得远要吸取别的网站好的地方放在自己的网站里而且能从他们的作品中学习很多同时也明白一个道理一个人要开放胸怀不要一个人闭门造车那样是行不通的会走很多不必要的弯路就是做出来的东西虽然有自己的特点但是也很难被身边的人所接受不是凡事有特点的东西就会得到欢迎不是和别人不一样的东西就是特色重要的是保留别人好的地方不好的地方加以修改这样才能做出好的东西受到欢迎闲话少说言归正传因为是第一次做这种类型的网站游戏资讯网站跟别的网站的最大的区别就是连接比较多设计起来总是感觉很乱不是很美观甚至给用户一种啰嗦的感觉所以导航方面采用了二级导航这样可以把一些连接规划在一个大的目录下并且在首页上把一些比较有主题性的链接以图片方式做成链接用户可以单击图片从而链接到想要浏览的界面这样的设计不但使网站的导航看起来不那么繁琐那么没有规律性也使得整个网站首页变得美观由于是先在Dreamweaver上先完成静态网站然后再放入后台不知道为什么可能是由于才接触Wamp把代码放在Wamp中总会出现图片不显示或者板块出现串行后来请教了老师上网查询有关资料终于把这种情况解决了再进行后台设计的