搜索
1秦皇岛职业技术学院课程设计论文设计题目：游戏网页设计与制作学生姓名：指导教师：专业名称：网络系统管理所在院系：信息工程系2010年12月25日秦皇岛职业技术学院信息工程系2摘要进入二十一世纪，互联网进一步普及，人们的网络生活进一步丰富，网络已经成为人们之间沟通交流的另一种方式。作为一名大学生，学习如何设计和制作网页变成了一项必不可少的过程，经过几个月的集中学习，我开始对网页的设计和制作有了初步的认识，并且学习了一些网页制作基础。在网页制作中，我借鉴了热血传奇官网和许多私服网站的设计风格，着重于给浏览者以强烈的视觉冲击。运用photoshop和fireworks强大的图像制作和处理能力。进行了大量的图片制作，从而给人以强烈的美感。并利用Flash进行片头动画的制作，给予浏览者一种强烈的时代动感。整个网站的架构是由Dreamwave完成的。关键词：网页制作热血传奇图片的制作秦皇岛职业技术学院信息工程系3目录第1章选题及本次课设内容··················································11.1查找资料··········································································11.2开发工具··········································································11.3设计理念··········································································11.4基本框架··········································································11.5内容与主题的确立·······························································21.6总体的选材········································································2第二章对于网站中图片的处理···············································32.1对于logo的制作································································32.2图片批处理········································································32.3导航条的制作·····································································3三分说每一内容页的制作过程···············································43.1欢迎页··············································································43.2首页·················································································43.3装备展示页········································································53.4下载中心页········································································53.5游戏介绍页········································································53.6玛法史记页········································································53.7游戏截图页········································································53.8新手指南页········································································63.9充值首页与充值子页····························································63.10成功页············································································63.11客服中心页······································································63.12玩家相册页······································································6四设计中遇到的重点与难点··················································7秦皇岛职业技术学院信息工程系44.1难点1··············································································74.2难点2··············································································7结论················································································8参考文献················································································9致谢··············································································10指导教师评语·······································································111第1章选题及本次课程设计的内容1.1查找资料本次课程设计的资料主要来自专业课本,查找了有关色彩搭配和网页布局的设计作品。1.2开发工具本次课设的设计使用了PhotoshopCS3、DeamweaverCS3、FlashCS3、FireworksCS3软件。其中，PhotoshopCS3和FireworksCS3制做前期效果图，使用DeamweaverCS3中的div和表格为整个网页布局，并用代码制作网页特效。1.3设计理念21世纪是信息主宰的世纪，当人们的生活水平提高后，人们不仅仅满足于物质生活的需求，更注重精神上的享受。而热血传奇就是一款很好的网游。它可以成为你茶余饭后的休闲。为了让广大游戏爱好者更好的了解关于热血传奇的准确信息，网站设计者综合了热血传奇官网以及私服网站的特点，综合性的设计了该网站，在网站美观和信息量上，都做出了很大的改进。1.4基本框架秦皇岛职业技术学院信息工程系21.5总体的选材在选择材料的过程中，考虑到主题，颜色的统一，主题的材料颜色选择黑红灰，三个颜色。而在材料中网络素材主要是为游戏截图页做准备，选择了热血传奇10周年图片。欢迎页首页装备展示页下载中心页游戏介绍页玛法史记页新手指南页游戏截图页充值首页玩家相册页客服中心页充值子页成功秦皇岛职业技术学院信息工程系3第二章对于网站中图片的处理2.1对于logo的制作（如图2.1）图2.1Logo：主题是风云网络潮流，主题人物是传奇中的男战士。表现了传奇的武士精神，效果主要运用了PS中的图层样式、滤镜、蒙版、渐变等效果，笔刷等工具。给人耳目一新的感觉！2.2图片批处理对于网业制作过程中，图片是很重要的一部分素材。同样图片的处理更是重要。对于玩家相册，以及游戏截图都要同样规格的图片，所以就用到了，fireworks的批处理功能。文件→批处理→选择图片→缩入→添加→scaletosize→更改图片像素。并且利用fireworks进行各别图片的发光效果的设置。2.3导航条的设计如图所示（1）图2.2（2）图2.3△设计剖析：（1）为主导航条，每一个链接都可以实现（链接到下一个网页）。（2）充值页导航，首页与官方网站可以实现。这两个主导航条和充值页导航分别放在内容页不同的网页上，用了黑色和明度低的蓝色，给人踏实的感觉，简洁直观，可用性强。主要运用了PS中的图层样式、滤镜、蒙版、渐变等效果，笔刷等工具。秦皇岛职业技术学院信息工程系4第三章分说每一内容页的制作过程3.1欢迎页使用两张热血传奇十周年图片，一张做背景，另一张使用时间轴做出一个类似于窗帘的效果。然后使用PS制作了“风云网络欢迎您”和“进入主页”的字。效果主要运用了PS中的图层样式、滤镜、蒙版、渐变等效果，笔刷等工具（如图3.1）。“进入主页”应用DW中的鼠标经过图像做成了按钮的形式，点击可进入主页。图3.13.2首页对于首页，整体的框架就利用表格和APdiv来完成的，页顶部分添加logo图片作为背景，在制作中利用网络素材进行拉伸。接下来在页顶部分添加导航条，在导航图下面添加一个怀旧flash，如图3.2（使用FlashCS3制作的）用网络素材闪图作为背景，在dreamweaver中进行flash的添加。然后，使用了代码，做了一个动态的游戏截图，如图3.3。秦皇岛职业技术学院信息工程系5图3.2图3.33.3装备展示页装备展示页是给玩家展示传奇装备以及让玩家了解装备的属性。此页主要应用了表格和APdiv部局，3.4下载中心页在内容页新曲中，添加表格，表格中是具体的内容是传奇所开区，以及开区的状态，在整体的内容页中超链接的设置，修改→页面属性→分类（链接）→更改链接颜色与已访问链接，并选择下划线样式。“下载专用登录器”点击可以下载登录器。3.5游戏介绍页游戏介绍页中主要突出的是他的实用性。在此面插入了文本域。插入方法：插入—〉表单—〉文本域，然后在添加文本。它的功能是为玩家介绍了传奇的玩法，在什么地方打怪，怎么获得元宝等……3.6玛法史记页在此页中插入了一个Flash，以一本书的形式出现的。此Flash是在热血传奇官网中获得的。此页的主要功能是介绍了传奇的历史，更好的让玩家了解传奇，让玩家有身临其境的感觉。3.7游戏截图页在本页中使用了代码，设置背景为黑色。图片是360度旋转，当鼠标放在上面时，图下的旋转速度变慢，当鼠标左右相关甩动时，图片的旋转秦皇岛职业技术学院信息工程系6方向也会发生改变。这些图片都是玩家所截的精彩图片，让人有赏心悦目的感觉，会让观看者有试玩传奇的冲动。3.8新手指南页在本页的设计中，插入了表格，表格中具体添加了新手如何申请账号，如何找回密码，如何设置密保等……为新手指明了方向。3.9充值首页与充值子页对于静态网站，制作充值界面有些不合适，但是我们课程设置的目的就是为了让我们可以对网页三侠客的使用有一个全面的整合，所以为了知识点的全面功能全面的利用，所以制作了充值界面，同样也是和首页呼应。在制作过程中，有几点是要说明的，一是单选按扭，要是在添加后将他们的值改为同一数值，以便实现单选的作业。在文本框的添加过程中同样要知识每个文本框的意义，进行单行，多行，密