本网站利用现在比较流行以及比较成熟的JavaScript技术加CSS的DIV布局的架构实现的，进行系统分析，从用户的角度去思考，怎么能实现让用户既能看懂又能学会的游戏攻略，从而实现信息化，系统化和平台化，具有良好的适应性和移植性。

此网站分为游戏内容介绍和帮助中心两个主要架构。游戏内容部分主要分为5个小部分，首页、英雄大全、英雄对比、英雄攻略、英雄排行，分别使用超链接以便用户访问相应网页；帮助中心又分为四个小块，联系方式、免责声明、家长监护、帮助中心，采用左侧导航栏的方式，使用户可以简单明了的查看信息。

第1章，项目的基本分析：对系统的可行性以及系统需求分析进行了研究。

第2章，介绍网站的开发平台和一些关键技术的说明。

第3章，分析了网站布局该如何选择，以及对页面的设计。

第4章，网站设计：按照软件工程的**，从软件开发的角度，对网站的设计类图以及设计流程等进行了介绍，然后设计出系统所要实现的核心流程和核心是算法。

第5章，主要页面的实现：选取顶部导航栏，底部导航栏，及页面布局，网页之间的链接，页面风格美化等几个方面进行说明。

第6章，分析了在开发过程中遇到的重难点问题，提出了思考过程和解决方案。

第7章，网站测试：在完成测试后对展现的运行结果进行一些叙述和分析。

系统关键技术确定后，需要对项目的实际需求进行详细的需求分析，清楚地了解该项目所包含的功能，并制定完善的需求分析说明书，为后期的业务设计设定明确的目标和制定参考，严格规范的需求说明书可以避免由于既定业务需求的不确定性造成后期频繁的需求变更，在软件开发中具有举足轻重的作用。需求分析完成后进入系统架构设计系统架构设计是将软件需求转化为数据结构和软件的系统结构以及划分系统功能模块目的是将软件系统需求转换为未来系统的设计，逐步开发出健壮的系统架构，并且使设计适合于实施环境，为提高性能而进行设计。

1.1.1技术可行性

本系统采用Html + CSS技术来实现大部分功能，也有少部分使用到了JavaScript开发技术，以及jQuery框架。HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：
），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。标记符，说明该文件是用超文本标记语言（本标签的中文全称）来描述的，它是文件的开头;而，则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。只要修改保存着网站格式的CSs样式表文件就町以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.1.2经济可行性

本项目是基于html开发，开发平台我们选择Visual Studio Code，此版本为免费版，由Microsoft公司免费提供给开发者使用；主流的开发环境有Windows和Linux，我们选择使用Windows进行开发，因为Windows我们比较熟悉，方便我们快速入手项目开发，所以需要一台安装了Windows操作系统的计算机；此外还使用了jQuery框架，这个框架也是免费提供给开发者使用和学习的。因此，总的经济方面付出不高，故经济可行性较高。

1.1.3操作可行性

目前，大多数计算机都能运行该系统，该系统的安装、调试、运行不会改变原计算机系统的设置和布局，并且系统界面简单，提示信息完整，即使无相关人员指导也能够方便的操作此网站。

根据上面的分析，需要设计出网站的主页和其他页面。用户在访问主页的时候也可以通过超链接访问其他网页，并且可以随时返回主页。通过研究分析，主页包含的模块大致有以下几个：

（1）顶部导航栏：导航栏位置、导航栏宽带和高度、导航栏背景颜色、导航栏布局、导航栏内容、鼠标移入的动态效果。

（2）底部导航栏：导航栏位置、导航栏宽带和高度、导航栏背景颜色、导航栏布局、导航栏链接、导航栏界面美化、版权信息声明。

（3）中间内容：背景图片、布局方式、内容宽度、内容排版、内容缩进、合理的放置文字和图片、更多内容提示链接。

其他页面的功能如下：

关于我页面：这个页面使用div技术进行布局，包含顶部区块，顶部导航栏，左侧自我介绍区块，右侧详细介绍区块，顶部区块包含了自己的简介，顶部导航栏包括了相册、课程总结及主页的超链接，左侧自我介绍区块包括了自我介绍说明和图片一张，右侧区块则包括了图片及详细的文字说明。

帮助中心页面：帮助中心页面采用了左侧主导航栏的方式进行设计，这样可以使用户简单清楚的浏览网页信息，及快速跳转至联系方式、免责声明和家长监护页面，除此之外还设计了顶部导航栏及底部链接栏，可以跳转至其他任意页面。

设计完成后的网站具有：建成后的系统是一个综合性游戏攻略网站，有着统一友好的操作界面，保证系统的易用性，基本完成了用户对网站的要求。

本章从系统的可行性方面及模块方面分析了系统的需求。

Microsoft Visual Studio是VS的全称。VS是美国微软公司的开发工具包系列产品。VS是一个基本完整的开发工具集，它包括了整个软件生命周期中所需要的大部分工具，如UML工具、代码管控工具、集成开发环境(IDE)等等。所写的目标代码适用于微软支持的所有平台，包括Microsoft Windows、Windows Mobile、Windows CE、.NET Framework、.Net Core、.NET Compact Framework和Microsoft Silverlight 及Windows Phone。Visual Studio是目前最流行的Windows平台应用程序的集成开发环境。最新版本为 Visual Studio 2019版本，基于.NET Framework 4.7。该编辑器也集成了所有一款现代编辑器所应该具备的特性，包括语法高亮（syntax high lighting），可定制的热键绑定（customizable keyboard bindings），括号匹配（bracket matching）以及代码片段收集（snippets）。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。

Visual Studio Code 提供了丰富的快捷键。用户可通过快捷键 [Ctrl] + [K] + [S] （按住Ctrl键不放，再按字母K键和S键）调出快捷键面板，查看全部的快捷键定义。也可在面板中双击任一快捷键，为某项功能指定新的快捷键。一些预定义的常用快捷键包括：格式化文档（整理当前视图中的全部代码），[Shift] + [Alt] + [F]；格式化选定内容（整理当前视图中被选定部分代码），[Ctrl] + [K] + [F]；放大视图，[Ctrl] + [Shift] + [=]；缩小视图，[Ctrl] + [Shift] + [-]；打开新的外部终端（打开新的命令行提示符）：[Ctrl] + [Shift] + [C]。

2.1.1 HTML

HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。 [2]

自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。

2.1.2 CSS

CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。

样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。

名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

总体来说，CSS具有以下特点：

（1）丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

（2）易于使用和修改

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

（3）多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

（4）层叠

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

（5）页面压缩

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。

2.1.3 JavaScript

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

（1）是一种解释性脚本语言（代码不进行预编译）。

（2）主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。

（3）可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

（4）跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

2.2.1 jQuery 框架

jQuery的模块可以分为3部分：入口模块、底层支持模块和功能模块。

在构造jQuery对象模块中，如果在调用构造函数jQuery()创建jQuery对象时传入了选择器表达式，则会调用选择器Sizzle（一款纯JavaScript实现的CSS选择器引擎，用于查找与选择器表达式匹配的元素集合）遍历文档，查找与之匹配的DOM元素，并创建一个包含了这些DOM元素引用的jQuery对象。

浏览器功能测试模块提供了针对不同浏览器功能和bug的测试结果，其他模块则基于这些测试结果来解决浏览器之间的兼容性问题。

在底层支持模块中，回调函数列表模块用于增强对回调函数的管理，支持添加、移除、触发、锁定、禁用回调函数等功能；异步队列模块用于解耦异步任务和回调函数，它在回调函数列表的基础上为回调函数增加了状态，并提供了多个回调函数列表，支持传播任意同步或异步回调函数的成功或失败状态；数据缓存模块用于为DOM元素和Javascript对象附加任意类型的数据；队列模块用于管理一组函数，支持函数的入队和出队操作，并确保函数按顺序执行，它基于数据缓存模块实现。

在功能模块中，事件系统提供了统一的事件绑定、响应、手动触发和移除机制，它并没有将事件直接绑定到DOM元素上，而是基于数据缓存模块来管理事件；Ajax模块允许从服务器上加载数据，而不用刷新页面，它基于异步队列模块来管理和触发回调函数；动画模块用于向网页中添加动画效果，它基于队列模块来管理和执行动画函数；属性操作模块用于对HTML属性和DOM属性进行读取、设置和移除操作；DOM遍历模块用于在DoM树中遍历父元素、子元素和兄弟元素；DOM操作模块用于插入、移除、复制和替换DOM元素；样式操作模块用于获取计算样式或设置内联样式；坐标模块用于读取或设置DOM元素的文档坐标；尺寸模块用于获取DOM元素的高度和宽度。

2.2.2 Div 布局

DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。