游戏网站设计与制作毕业论文

大连东软信息学院成人高等教育本科毕业设计（论文）论文题目：星辰游戏网站设计与制作 Design and Implementation of RecruitmentManagement System系 所： 继续教育学院 专 业： 电子商务 学生姓名： 朱曦瑶 学生学号： 20112130115 指导教师： 崔艳清 导师职称： 副教授 完成日期： 2014 年 4 月 23 日 大连东软信息学院Dalian Neusoft Institute of Informationi maquinria de construcci, 0 # disel i combustible sense plom de complement, reduir les emissions de gasos txics i perjudicials. 3, laire contaminaci control de voladures durant la construcci, aix com les excavadores, excavadores i maquinria pesant de construcci com ara les emissions de deb vols contamina el medi ambient, per garantir la construcci demissi de contaminants atmosfrics per satisfer lestndard demissi integrat de patrons secundaris de aire contaminants (GB17297-1796), construcci dhabitatge compleix les aire aire ambiental qualitat estndards (GB3095-1796) secundria normes. Ens assegurarem que els vehicles, maquinria utilitzada dacord amb lestndard nacional de petroli, estrictes proves, vehicles deficients per les emissions no poden entrar al lloc de construcci tan descapament que les seves emissions de treballadors de la construcci, com ara danys personals. 16.4.4 escombraries disposici empresa empleat no-escombraries residus, crema de deixalles i altres residus en el lloc est estrictament prohibit, a oficina i habitatge estan equipades amb prou escombraries piscina residus piscines o Fossa sptica de laigua i el menjador hauria de no ser menys de 50m. Es netegen regularment disposades a jornada de salut pblica, en carreteres de lloc de construcci, clavegueres, residus industrials, residus slids, com ara la neteja regular, i transport大连东软信息学院成人高等教育本科毕业设计（论文） 摘要星辰游戏网站设计与制作摘 要随着社会不断地发展，经济呈现飞速增长的趋势，尤其在21世纪这个科技发达的年代，电脑成为家家户户的必备品，这也就使网络成为广大人民群众的工作、生活、学习的主要组成部分。而各类网站就出现在了我们的生活中。根据不同类型，功能的网站就需要不同的页面来实现网站的作用。因此更好的网页布局就能方便，快捷的完成网站所需的功能要求。这就需要网页设计来完成这一工作，因此突显了网页设计的重要性。Internet的迅速普及，正是依靠不计其数、丰富多彩的网站。 网站是由网页按照一定的链接顺序组成。现在有越来越多的人希望在网络上拥有自己的个人主页或个人网站，来展示个人的个性和特点。 同时也有越来越多的企业通过互联网上来展示自身形象，提供服务和产品资讯。 以这种廉价的方式获取最大的宣传效果。“星辰游戏网站”这里主要是把网络游戏集合在一起为对这一领域感兴趣的用户提供一个专门性的网站。运用所学的网页设计技术对网站进行布局，划分功能模块，其中主要包括三个级别的页面，由首页开始，分成四个模块，包括游戏贩卖、游戏代练、游戏攻略和游戏资讯这些功能，更好的网罗时下热门游戏，并辅以详细介绍。关键词：网络发展，游戏网站，网页设计 大连东软信息学院成人高等教育本科毕业设计（论文） AbstractDesign and fabrication of the stars game site AbstractWith the increasing development of the society, economy has shown rapid growth trend, especially in twenty-first Century this technological era, computer become essential goods each and every family, the main part of this also makes the network become peoples work, life, learning. And all kinds of Web sites have appeared in our life. According to the different types, functions of the website requires different pages to achieve the role of the site. Therefore Webpage layout can be more convenient, fast and complete web site for the functional requirements. This requires Webpage design to complete this work, therefore, highlights the importance Webpage design.The popularization of Internet, it is relying on too many to count, rich and colorful website. The site is composed of Webpage according to certain link sequence. Now there are more and more people want to own their own personal home page or site on the Internet, to show the personality and characteristics of the individual. At the same time, there are more and more enterprises through the Internet to display their image, to provide service and product information. In such a cheap way to get maximum publicity.The stars game website here is the network game set in a special website to interested in this field of the user. To carry out the layout of Web site uses Webpage design study, divides function modules, which include three levels of the page by page, start, is divided into four modules, including the game player, trafficking, games and game information of these functions, the popular game better snare, supplemented by details.Key words: network game development, website design, Webpag大连东软信息学院成人高等教育本科毕业设计（论文）目 录摘 要IDESIGN AND FABRICATION OF THE STARS GAME SITEIIABSTRACTII第1章绪 论11.1本文的研究意义112中国网络游戏的现状1第2章关键技术介绍32.1网页制作常用工具介绍32.1.1Dreamweaver32.1.2 Photoshop42.1.3 Flash62.2网页制作常用技术介绍72.2.1HTML72.2.2 DIV+CSS92.2.3 JavaScript10第3章网站的分析与设计113.1需求分析113.1.1 确定网站主题113.1.2 网站的功能结构113.2 网站的基本设计123.2.1 网站设计的原理123.2.2 可行性分析123.3 网站的主体设计133.3.1 网站的布局设计133.3.2 LOGO的设计与制作143.3.3图片批处理143.3.4导航条的设计14第4章网站页面的实现144.1导航条的实现144.2CSS的实现154.3JavaScript的应用21第5章设计中遇到的重点难点395.1重点难点1395.1重点难点239结论40参考文献41致谢4241大连东软信息学院成人高等教育本科毕业设计（论文）第1章绪 论进入二十一世纪，互联网进一步普及，人们的网络生活进一步丰富，网络已经成为人们之间沟通交流的另一种方式。作为一名大学生，学习如何设计和制作网页变成了一项必不可少的过程，经过几个月的集中学习，我开始对网页的设计和制作有了初步的认识，并且学习了一些网页制作基础。在网页制作中，我借鉴了热血传奇官网和许多私服网站的设计风格，着重于给浏览者以强烈的视觉冲击。运用photoshop和fireworks强大的图像制作和处理能力。进行了大量的图片制作，从而给人以强烈的美感。并利用Flash进行片头动画的制作，给予浏览者一种强烈的时代动感。整个网站的架构是由Dreamwave完成的。1.1本文的研究意义网络游戏作为一门新生的艺术，具有独立的美学范式和艺术结构。游戏交互设计的优劣，直接影响着玩家的游戏体验和感性判断。游戏界面作为人机交互的桥梁，其作用无可取代。游戏玩家对游戏的直观印象，一个来自操作，另一个就是画面。游戏界面本身就是画面的一部分，其地位举足轻重。界面设计应该是游戏设计中非常重要的一个环节，玩家与游戏系统的直接交互就是通过界面系统完成的。游戏的界面跟产品的外观和功能一样，要能吸引玩家并且易用。在设计界面的过程中，要一直注重易用性设计原则，并且充分考虑用户感受，随时调整和修改界面的设计细节。游戏界面既具有界面设计的一般规律，更有游戏这一特殊领域的个性设计原则。在界面的设计制作过程中，应在掌握基本游戏框架设定能力和对用户需求分析能力的基础上，了解并掌握游戏开发机制尤其是游戏界面的实现原理以及设计中常用的技术，例如：界面风格制定、美术需求文档制作、界面原型制作、程序坐标图制作等技术。如今外国游戏已经在中国市场占有很重要的地位，使得中国的文化环境逐渐改变，民族文化已经不能吸引玩家，尤其近年来屡屡的事件和媒体舆论的影响，已经让网络游戏成为大众眼中毒害青少年的精神毒品。而宣传中国传统文化，引导青少年健康游戏、快乐游戏应该是每个游戏工作者的责任和义务。 12中国网络游戏的现状 游戏是人类的天性，网络是现代信息社会的宠儿，二者有机结合而诞生的网络游戏就拥有了巨大的客户资源。目前，全球电脑游戏行业已经成为电影、电视、音乐并驾齐驱的最为重要的文化娱乐产业之一，其年销售额已经超过好莱坞的全年收入。亚洲是世界游戏市场的核心力量之一，而韩国与台湾成为全球最大的两个网络游戏市场。中国的网络游戏虽然刚刚起步，但是其以惊人的发展速度、巨大的经济利益以及对游戏用户的广泛影响吸引了政府、企业、学者等社会各界人士的目光。网络游戏产业本身具有相当大的商业价值，也具有广泛的价值链。对电信、IT、媒体等贡献巨大，已经展现出成为一个巨大的新兴产业的潜力、中国的网络游戏市场得到了中国电信的巨大支持，并且拥有巨大的用户资源，目前已经处于起步阶段，市场增长非常迅速。第2章关键技术介绍2.1网页制作常用工具介绍2.1.1DreamweaverDreamweaver是当前最流行的网页设计软件。Dreamweaver与其它同类软件相比主要有以下优点：不生成冗余代码。可视化的网页编辑器，都要把使用者的操作转换成html代码。一般的编辑器都会生成大量的冗余代码，给网页以后的修改带来了极大的不方便，同时还增加了网页文件的大小。Dreamweaver则在使用时完全不生成冗余代码，避免了诸多麻烦。而且，通过设置，还可用Dreamweaver清除掉网页文件原有的冗余代码。方便的代码编辑。可视化编辑和源代码编辑都有其长处和短处。有时候，直接用源代码编辑会很有效。Dreamweaver提供了html快速编辑器和自建的html编辑器，能方便自如的在可视化编辑状态和源代码编辑状态间切换。强大的动态页面支持。Dreamweaver的Behavior能在使用者不懂javascript的情况下，往网页中加入丰富的动态效果。Dreamweaver还可精确的对层进行定位，再加上timeline功能，可生成动感十足的动态层效果。操作简便。首先，Dreamweaver提供的历史面板、html样式、模版、库等功能避免了重复劳动，使用者不必重复输入相同的内容、格式。其次，Dreamweaver能直接往页面中插入Flash、Shockwave等插件，经过设置后还可直接调用相应的软件对这些插件进行编辑。最后，Dreamweaver与Fireworks集成紧密，可直接调用Fireworks对页面的图像进行修改、优化。优秀的网站管理功能。在定义的本地站点中，改变文件的名称、位置，Dreamweaver会自动更新相应的超级链接。Checkin和Checkout功能可协调多个使用者对远程站点的管理。便于扩展。使用者可给Dreamweaver安装各种插件，使其功能更强大。使用者若有兴趣，还可自己给Dreamweaver制作插件，使Dreamweaver更适应个人的需求。.制作效率Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如PlaybackFlash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver会自动更新所有链接。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，ColdFusion，iCAT，Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XMLDreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascadingstylesheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft浏览器上执行。使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从Dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。2.1.2 PhotoshopPhotoShop是一款图像处理软件,由Adobe公司于上世纪80年代末期推出是专门用于图形图像处理的软件。他功能强大、集成度高、并且适用面广、操作简便。它不仅提供了强大的绘图工具，可以绘制艺术图形，还能从扫描仪、数码相机等设备采集图像，对它们进行修改、修复，调整图像的色彩、亮度，改变图像的大小，还可以对多幅图像进行合并增加特殊效果。Photoshop中文意思是“照片商店”也可被称为“思想的相机”是目前最流行的图像设计与制作工具。它不仅能够真实地反映现实世界，而且能够创造出虚幻的景物，还可以创建成百上千种特效文字，根据自己的思想制作几十种纹理效果。学会并灵活运用Photoshop，每个人都可能成为图形图像方面的专家，使你创作的作品达到专业水平。处理图像尺寸和分辨率：可以按要求任意调整图像的尺寸，分辨率就是指图像显示的精密度在ps中还可以在不影响尺寸的同时增减分辨率，以适应图像的要求这样可以方便我们裁剪图像某部分的内容。图层功能：PS支持多图层工作方式，可以对图层进行合并、合成、翻转、复制和移动等操作，PS的特效也都可以用在图层的上面。此外图层还可以进行像素的色相、渐变和透明度等属性的调整。我们还可以将图像从一个图层复制到另一个图层之中。PS的功能绘画功能：我们可以使用喷枪工具、画笔工具、铅笔工具、直线工具来绘制图形，此外还使用文字工具来在图像之中添加文本，选取功能：矩形选区工具和椭圆选区工具可以选择一个或多个不同大小或不同形状的范围。套索工具可以选取不规则形状的图形。魔术棒工具可以根据颜色范围自动选取所需部分。色调和色彩功能：对图像进行色彩色调的调整图像的旋转和变形：可以将图像进行翻转和旋转，还可以将图像进行拉伸、倾斜和自由变形等处理。颜色模式：PS具有多种的颜色模式，包括黑白、灰度、双色调、索引色、HSB、Lab、RGB和CMYK等模式。其中最主要的是CMYK和RGB模式。Photoshop 应用领域平面印刷：Photoshop被应用到平面广告、包装、装潢、印刷、制版等领域，比如各种的宣传海报、产品包装等。建筑装潢设计：利用Photoshop来进行后期贴图，进行图像调整、渲染颜色。网络游戏设计：利用Photoshop可以制作游戏中变换复杂的虚拟背景。修复照片：利用Photoshop对照片进行修复以及美化处理。2.1.3 FlashFlash通过使用关键帧和图符使得所生成的动画(.swf)文件非常小，几k字节的动画文件已经可以实现许多令人心动的动画效果，用在课件设计上不仅可以使课件更加生动，而且小巧玲珑上传、下载迅速，使得课件便于网上交流。 Flash强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画，通过action和fs command可以实现交互性，使flash具有更大的设计自由度，另外，它与当今最流行的课件设计工具director配合默契，可以制作出优秀的幼儿多媒体课件。Flash动画是将静止的画面变为动态的艺术实现由静止到动态，主要是靠人眼的视觉残留效应利用人的这种视觉生理特性可制作出具有高度想象力和表现力的动画影片。动画以人类视觉的原理为基础。 如果快速查看一系列相关的静态图像，那么我们会感觉到这是一个连续的运动。 每一个单独图像称之为帧。帧是动画电影中的单个图像。动画的原理-通过一系列连续画面的播放，由于眼睛的视觉停留原理，从而使人觉得画面中的物体是运动的。 帧-就是一幅图像。Flash中的帧中可分为普通帧和关键帧，Flash可在两个 关键帧之间自动生成动画。 时间轴-由许多帧按时间顺序组成。Flash 8 的操作界面：菜单栏 文件：可以执行创建、打开、保存、关闭和导入、导出等文件操作。 编辑：可以执行复制、粘贴、撤销、清除和查找等编辑操作。 视图：可以执行放大、缩小、标尺和网络等有关视图的操作。 插入：可以执行插入新元素（例如帧、图层、元件和场景等）的操作。 修改：可以执行元素本身或元素属性的变化动作，例如将位图转换为矢量图，将选中的物品转换为新元件等。 文本：可以执行与文件有关的属性，例如设置字体、设置字距和检查拼写等。 命令：可以执行相关动作，管理和运行命令，达到批处理的目的。 控制：可以执行与影片进程与测试有关的命令，例如测试影片和场景、播放和停止等。 窗口：可以执行对窗口和面板进行管理，例如新建窗口、展开或隐藏某个面板、将窗口作特定排列等。 帮助：可以提供工作过程的支持，例如展开帮助面板、链接到Macromedia支中心等。舞台 创建文档以后，可以看到文档窗口中的舞台。舞台是用于放置图形内容矩形区域，这些图形内容包括矢量插图、文本框、按钮和导入的位图图形或视频剪辑。Fash创作环境中的舞台相当于flash播放器中在回放期间显示flash文档的矩形空间。可以再工作室放大和缩小以便更改舞台的视图，而网格、辅助线和标尺有助于在舞台上精确的放置内容。工具栏工具也称为“作图工具栏”。工具栏中的工具可以用于绘制、涂色、选择和修改插图，并可以更改舞台视图。工具栏分为以下四个部分。 “工具”区域：包含绘图、涂色和选择工具，这个区域特别常用。 “查看”区域：包含在应用程序窗口内进行缩放和移动的工具。 “颜色”区域：包含用于笔触颜色和填充颜色的功能键。 “选项”区域：显示选定工具的组合键，这些组合键会影响工具的涂色或编辑操作。面板 Flash提供了多种面板，每个面板对应于一个功能模块，例如“混色器”面板用于颜色的配置，“库”面板用于库资源的管理，“属性”面板用于设置对象的属性。面板可以展开和折叠，并可以通过面板上的功能菜单进一步使用扩展功能。2.2网页制作常用技术介绍2.2.1HTMLHTML是在SGML定义下的一个描述性语言，或可说HTML是SGML的一个应用程式，HTML不是程式语言，如C+和Java之类，它只是标示语言。u html基本代码：title星辰游戏u 段落-标题从大小。表示段落换行符此标签没结束标签。注释标签。水平线删除文本下划线文本u 字体格式化：粗体加强大号加强斜体下注释上注释u 一个无序列表：游戏攻略游戏代练游戏资讯u 一个有序列表：游戏攻略游戏代练游戏资讯u 超链接Texttobedisplayedu 表格的基本格式:OR2.2.2 DIV+CSSCSS语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言). 在标准网页设计中CSS负责网页内容(XHTML)的表现. CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。 如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。 外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。 HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。 开始思考 首先要学习什么是结构，一些作家也称之为语义。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。 如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：标志和站点名称 主页面内容 站点导航(主菜单) 子菜单 搜索框 功能区(例如购物车、收银台) 页脚(版权和有关法律声明) 我们通常采用DIV元素来将这些结构定义出来，类似这样： div id=header/div div id=content/div div id=globalnav/div div id=subnav/div div id=search/div div id=shop/div div id=footer/div 这不是布局，是结构。这是一个对内容块的语义说明。当理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素-标题、段落、图片、表格、列表等等。 根据上面讲述的，已经知道如何结构化HTML，现在可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。 2.2.3 JavaScriptJavaScript可以出现在HTML的任意地方。使用标记，你可以在HTML文档的任意地方插入JavaScript，甚至在之前插入也不成问题。不过如果要在声明框架的网页（框架网页）中插入，就一定要在之前插入，否则不会运行。基本格式另外一种插入JavaScript的方法，是把JavaScript代码写到另一个文件当中（此文件通常应该用“.js”作扩展名），然后用格式为“”的标记把它嵌入到文档中。注意，一定要用“”标记。每一句JavaScript都有类似于以下的格式：;其中分号“;”是JavaScript语言作为一个语句结束的标识符。虽然现在很多浏览器都允许用回车充当结束符号，培养用分号作结束的习惯仍然是很好的。语句块语句块是用大括号“”括起来的一个或n个语句。在大括号里边是几个语句，但是在大括号外边，语句块是被当作一个语句的。语句块是可以嵌套的，也就是说，一个语句块里边可以再包含一个或多个语句块。第3章网站的分析与设计3.1需求分析3.1.1 确定网站主题“星辰游戏网站”这里主要是把网络游戏集合在一起为对这一领域感兴趣的用户提供一个专门性的网站。运用所学的网页设计技术对网站进行布局，划分功能模块，其中主要包括三个级别的页面，由首页开始，分成四个模块，包括游戏贩卖、游戏代练、游戏攻略和游戏资讯这些功能，更好的网罗时下热门游戏，并辅以详细介绍。3.1.2 网站的功能结构首页游戏代练游戏贩卖游戏攻略游戏资讯账号贩卖账号购买装备贩卖游戏币贩卖装备升级迅速升级求高人级数升高装备功能武器杀伤力游戏币作用升级规则作战规则联合队友装备升级基本攻略活动公告帮助中心留言中心3.2 网站的基本设计3.2.1 网站设计的原理“星辰”游戏网站设计与制作主要应用Dreamweaver、Fireworks、Photoshop和Flash这些软件。网站应用Web标准方法DIV+CSS制作实现网站。DIV+CSS 是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。并且为了实现更加复杂的效果使用了JavaScript技术、高级CSS和flash动画等。网站根据主题划分了多个栏目，并且针对每个栏目进行了具体的设计与制作其中包含网站的基本要素：Logo、导航、内容、版权信息等。3.2.2 可行性分析电商与游戏相结合，将会提高电商网站的娱乐性和网站流量。电商网站流量相比一些娱乐平台流量较为逊色，流量和电商的盈利有正相关性。电商网站需要在做好电商服务的基础上，通过丰富网站内容以进一步提高网站流量。游戏网站可以扮演好这一角色，其对客户有较强的吸引力，创新性强，可以俘获众多游戏玩家的“芳心”3.3 网站的主体设计3.3.1 网站的布局设计布局结构：网站采取“T字型”布局结构。上面是LOGO与横幅，左侧是对产品类别、服务的简介及导航等，右侧为主要内容部分，下面是网站的辅助信息。如图3.3.1所示：LOGO banner主要内容导航分栏目基本信息 版权 联系方式图3.3.1“T字型”的布局适用于内容较多的网站，页面简洁明了、给人以清晰感，并能更好的突出主要内容。3.3.2 LOGO的设计与制作对于logo 主体直接用游戏命名，效果主要运用了PS中的图层样式、滤镜、蒙版、渐变等效果，笔刷等工具。给人耳目一新的感觉。如图3.3.2图3.3.23.3.3图片批处理对于网业制作过程中，图片是很重要的一部分素材。同样图片的处理更是重要。对于玩家相册，以及游戏截图都要同样规格的图片，所以就用到了，fireworks 的批处理功能。文件批处理选择图片缩入添加scale to size更改图片像素。并且利用fireworks进行各别图片的发光效果的设置。3.3.4导航条的设计导航条用了黄色和亮眼的绿色，给人惊艳的感觉，简洁直观，可用性强。主要运用了PS中的图层样式、滤镜、蒙版、渐变等效果，笔刷等工具。如图3.3.4所示图3.3.4第4章网站页面的实现4.1导航条的实现 游戏首页 游戏观战 游戏通知 活动公告 帮助中心 留言中心 4.2CSS的实现/* CSS Document */body margin-left: 0px;margin-top: 0px;#head,#center,#footerwidth:1024px; margin:auto;#head height: 84px;#nav li float: left;width: 108px;#logo float: left;#nav float: left;margin-left: 180px;height: 36px;font-family: 新宋体;font-size: 16px;line-height: 18px;#left margin-top: 18px;float: left;width: 202px;border-right-width: 4px;border-right-style: groove;border-right-color: #FFFF99;#search float: left;width: 280px;margin-top: 12px;margin-left: 548px;padding: 0px;#right float: left;margin-top: 18px;margin-left: 16px;width: 764px;border-top-style: ridge;#nav ul list-style-type: none;margin-top: 6px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;height: 24px;background-image: url(./image/5.png);padding-top: 6px;padding-right: 0px;padding-bottom: 0px;padding-left: 12px;background-repeat: no-repeat;#search_inputheight: 25px;width: 200px;padding-top: 1px;padding-bottom: 1px;padding-left: 4px;border-top-width: 2px;border-right-width: 1px;border-bottom-width: 2px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color: #FFCC00;border-right-color: #FFCC00;border-bottom-color: #FFCC00;border-left-color: #FFCC00;padding-right: 2px;#right_center li float: left;margin-right: 3px;border: 1px groove #FFFF00;margin-top: 10px;#search_btn height: 31px;width: 60px;padding: 0px;background-color: #FFCC00;color: #FFFFFF;font-weight: bold;font-size: 18px;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;#left_top background-image: url(./image/1.png);height: 200px;background-repeat: no-repeat;padding-top: 68px;padding-left: 12px;#left_bottom background-image: url(./image/3.png);background-repeat: no-repeat;height: 200px;padding-top: 68px;padding-left: 12px;#footer margin-top: 18px;background-image: url(./image/footer.png);height: 20px;padding-top: 10px;background-repeat: no-repeat;text-indent: 24px;#left_center background-image: url(./image/2.png);height: 200px;background-repeat: no-repeat;padding-top: 68px;padding-left: 12px;#center height: 1092px;background-image: url(./image/7.png);padding-left: 16px;background-repeat: no-repeat;width: 1012px;#left_center_2 background-image: url(./image/4.png);height: 190px;background-repeat: no-repeat;padding-top: 68px;padding-left: 12px;#right_center width: 764px;height: 466px;margin-top: 12px;h2 padding: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;#right_top position: relative;width: 764px;#right_bottom width: 764px;margin-top: 34px;#right_bottom ul list-style-type: none;margin: 0px;padding: 0px;list-style-image: url(./image/ul.png);#right_bottom li font-family: 宋体;font-size: 14px;border: 1px ridge #FF9933;margin-top: 2px;padding-top: 2px;padding-bottom: 2px;background-color: #FFFFCC;#left_top ul,#left_center ul, #left_center_2 ul,#left_bottom ul margin: 0px;list-style-type: none;list-style-image: url(./image/ul.png);padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 8px;#left_top li,#left_center li, #left_center_2 li,#left_bottom lifont-family: Arial, Helvetica, sans-serif;font-size: 24px;line-height: 30px;color: #FF6633;border-bottom-width: 2px;border-bottom-style: groove;border-bottom-color: #00FF00;#right_center ul margin: 0px;padding: 0px;list-style-type: none;border: 2px groove #FFFF00;height: 466px;a:linkcolor: #FF8133;text-decoration: none;a:visited color: #CC00CC;text-decoration: none;a:hover color: #FF0000;text-decoration: underline;font-family: 宋体;font-size: 28px;a.name:hover color: #FF0000;text-decoration: underline;font-family: 宋体;font-size: 20px;a.name:visited color: #00FF00;text-decoration: underline;font-family: 宋体;font-size: 20px;#Layer1 position:absolute;width:68px;height:62px;z-i