电子竞技宣传网站的设计与实现
目 录
引言 1
一、网站开发的背景 2
（一） 电子竞技 2
（二） 电子竞技行业现状 2
二、开发工具简介 3
（一）Dreamwear CS5 3
（二）HTML简介 3
（三）JavaScript 3
（四）Div+CSS 3
三、网站需求分析 4
（一） 系统概述 4
（二）系统的可行性分析 4
1、实用性分析 4
2、技术可行性分析 4
四、网站总体设计和分析 5
（一）网站结构图 5
（二）网站的详细 5
1、材料准备 5
2、色彩的搭配 5
3、导航设计 6
4、logo设计 6
五、网站功能实现 7
（一）首页 7
（二）二级子页 8
（三）三级子页 10
六、总结 12
致谢 13
参考文献 13
附录 14
（一）折叠效果 14
（二）导航的下拉菜单 15
（三）轮播效果 15
引言
曾经，网络这个词汇令多少家长、老师视为洪水猛兽，“孩子应当远离游戏”，“青少年网络成瘾”这样的报纸头条屡见不鲜。更为甚者，当家长老师们听到某学生、某孩子作为职业玩家，为国征战获得荣誉嗤之以鼻，理由只有四个字——不学无术。
然而，在网络飞速发展的今天，电子竞技已悄然发展起来。2014年英雄联盟S4总决赛万人空巷，青年们都在谈论，甚至在1月13日CCTV《体育人间》播放了皇族战队的 *好棒文|www.hbsrm.com +Q: ^3^5`1^9`1^6^0`7^2#
纪录片。为了让大众更深入的了解电子竞技，笔者制作了这样的小型网站简单介绍电子竞技。
论文详细论述了电子竞技介绍网站的开发设计过程。本站以Dreamwear为主要工具，运用了CSS+DIV布局网站，并结合JavaScript的客户端语言，并用Photoshop处理图片。这样，网站的结构更加清晰，思路明确了，网站的开发更有把握。本文实现了电子竞技的总体介绍、电竞历程、电竞赛事、电竞大事件等子页，丰富了网站的内容。
论文组织：首先介绍了该网站的开发背景、意义，同时介绍相关的开发工具，接着对网站的内容布局进行解析，提出具体的设计方案；然后展示了整个网站的实现，各个子页分布模块的实现，最后对网站进行测试。
一、网站开发的背景
电子竞技
Electronic Sports-电子竞技就是电子游戏比赛达到“竞技”层面的比赛项目。电子竞技运动就是利用电子设备（Electronic equipment）作为运动器械（Electronic equipment）进行的人与人的脑力对抗的运动。通过此类运动，可以锻炼和提高参与者的思维（Thought）、反应（Repercussion）、四肢（Limbs）、心（Heart）、眼（Eye）和意志（Will），培养团队精神（Team spirit）。电子竞技也是一种职业，和棋艺等非电子游戏比赛类似，电子竞技作为一个新兴的竞技体育项目，自2003年11月成为国家体育总局批复的第99个运动项目（如今已经更名为第七十八项体育运动）。
电子竞技行业现状
2013年3月，体育总局决定组建电子竞技国家队后，何超（国家跳水运动员）在自己的微博上评论：“电子竞技也算体育？玩游戏都可以拿奥运冠军，那我们这些项目练得这么辛苦真白干了，干脆好好玩游戏算了”引发网民的激烈讨论，也第一次引起了媒体对电子竞技的关注。参与这个话题讨论的人数达到了上万人，微博围观人数甚至高达2000多万。人民网投票显示只有20%的网友赞成电子竞技是体育项目，而微博投票却显示近70%的网友赞成电子竞技是体育项目。
尽管事后体育总局与央视新闻一再表示电子竞技为国家承认的体育项目，但这也侧面说明了民众对电竞缺少认知，主流媒体报道缺失，将电子竞技与普通玩游戏混为一谈的情况。
至今，电子竞技已经在世界发展了十多年，但除了韩国外，并没有其他国家拥有像中国一样完整的电子竞技产业链。许多俱乐部、赛事昙花一现，最终都会因亏本纷纷倒闭。尽管早在03年11月，体育总局就承认电子竞技为我国正式开展的第99个运动项目，但这并没有对国内的电竞产业带来改变。
尽管如此，电子竞技在世界已经有了十多年的发展。随着行业的不断规范、主流媒体的关注、商业化、规范化的趋势已愈发明显，特别是传出“电竞申奥”的消息后更是引起轩然大波，不管是炒作还是确有此事，都说明了电子竞技的影响力。
电子竞技作为一个新兴的竞技体育项目，它已经发展成为了一个具有现代竞技体育精神的一种人与人之间的电子游戏竞技运动。
二、开发工具简介
（一）Dreamwear CS5
Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，Dreamweaver CS5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
本站主要用Dreamwear CS5来编辑网站的代码，显示网站的各个页面。
（二）HTML简介
超文本标记语言，是标准通用标记语言下的一个应用。
简单来说HTML就是一种文本规范，就如写作文一样，有在编写语言的时候，我们同样需要这样的规范，HTML就是文本规范的一种。
超文本标记语言的结构包括主体”部分（Body）、和“头”部分（英Head）“，主体（Body）部分提供网页的具体内容，头（Head）部提供关于网页的信息。
（三）JavaScript
JavaScripts——一种直译式脚本语言，是一种基于原型、动态类型、弱类型的语言，内置支持类型。在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML（标准通用标记语言下的一个应用）网页增加动态功能。
而本站，则是用JavaScript来实现页面的动态效果，如轮播效果、鼠标悬停等等。
（四）Div+CSS
DIV+CSS是网页设计的标准，它是一种网页的布局方法。与传统中通过表格布局定位的方式不同，它可以实现网页页面内容与表现相分离。本站主要以DIV+CSS来布局网站。XHTML是一种在HTML基础上优化和改进的新语言，目的是以XML应用于强大的数据转换，适应未来网络应用更多的需求。
三、网站需求分析
（一） 系统概述
五、网站功能实现
（一）首页
首页主要包含了相关图片的展示以及电子竞技的各类简介：电子竞技的基本特征、电子竞技的概念总结、电子竞技的相关错误理解，同时也介绍了电子竞技的俱乐部相关等等。
引言 1
一、网站开发的背景 2
（一） 电子竞技 2
（二） 电子竞技行业现状 2
二、开发工具简介 3
（一）Dreamwear CS5 3
（二）HTML简介 3
（三）JavaScript 3
（四）Div+CSS 3
三、网站需求分析 4
（一） 系统概述 4
（二）系统的可行性分析 4
1、实用性分析 4
2、技术可行性分析 4
四、网站总体设计和分析 5
（一）网站结构图 5
（二）网站的详细 5
1、材料准备 5
2、色彩的搭配 5
3、导航设计 6
4、logo设计 6
五、网站功能实现 7
（一）首页 7
（二）二级子页 8
（三）三级子页 10
六、总结 12
致谢 13
参考文献 13
附录 14
（一）折叠效果 14
（二）导航的下拉菜单 15
（三）轮播效果 15
引言
曾经，网络这个词汇令多少家长、老师视为洪水猛兽，“孩子应当远离游戏”，“青少年网络成瘾”这样的报纸头条屡见不鲜。更为甚者，当家长老师们听到某学生、某孩子作为职业玩家，为国征战获得荣誉嗤之以鼻，理由只有四个字——不学无术。
然而，在网络飞速发展的今天，电子竞技已悄然发展起来。2014年英雄联盟S4总决赛万人空巷，青年们都在谈论，甚至在1月13日CCTV《体育人间》播放了皇族战队的 *好棒文|www.hbsrm.com +Q: ^3^5`1^9`1^6^0`7^2#
纪录片。为了让大众更深入的了解电子竞技，笔者制作了这样的小型网站简单介绍电子竞技。
论文详细论述了电子竞技介绍网站的开发设计过程。本站以Dreamwear为主要工具，运用了CSS+DIV布局网站，并结合JavaScript的客户端语言，并用Photoshop处理图片。这样，网站的结构更加清晰，思路明确了，网站的开发更有把握。本文实现了电子竞技的总体介绍、电竞历程、电竞赛事、电竞大事件等子页，丰富了网站的内容。
论文组织：首先介绍了该网站的开发背景、意义，同时介绍相关的开发工具，接着对网站的内容布局进行解析，提出具体的设计方案；然后展示了整个网站的实现，各个子页分布模块的实现，最后对网站进行测试。
一、网站开发的背景
电子竞技
Electronic Sports-电子竞技就是电子游戏比赛达到“竞技”层面的比赛项目。电子竞技运动就是利用电子设备（Electronic equipment）作为运动器械（Electronic equipment）进行的人与人的脑力对抗的运动。通过此类运动，可以锻炼和提高参与者的思维（Thought）、反应（Repercussion）、四肢（Limbs）、心（Heart）、眼（Eye）和意志（Will），培养团队精神（Team spirit）。电子竞技也是一种职业，和棋艺等非电子游戏比赛类似，电子竞技作为一个新兴的竞技体育项目，自2003年11月成为国家体育总局批复的第99个运动项目（如今已经更名为第七十八项体育运动）。
电子竞技行业现状
2013年3月，体育总局决定组建电子竞技国家队后，何超（国家跳水运动员）在自己的微博上评论：“电子竞技也算体育？玩游戏都可以拿奥运冠军，那我们这些项目练得这么辛苦真白干了，干脆好好玩游戏算了”引发网民的激烈讨论，也第一次引起了媒体对电子竞技的关注。参与这个话题讨论的人数达到了上万人，微博围观人数甚至高达2000多万。人民网投票显示只有20%的网友赞成电子竞技是体育项目，而微博投票却显示近70%的网友赞成电子竞技是体育项目。
尽管事后体育总局与央视新闻一再表示电子竞技为国家承认的体育项目，但这也侧面说明了民众对电竞缺少认知，主流媒体报道缺失，将电子竞技与普通玩游戏混为一谈的情况。
至今，电子竞技已经在世界发展了十多年，但除了韩国外，并没有其他国家拥有像中国一样完整的电子竞技产业链。许多俱乐部、赛事昙花一现，最终都会因亏本纷纷倒闭。尽管早在03年11月，体育总局就承认电子竞技为我国正式开展的第99个运动项目，但这并没有对国内的电竞产业带来改变。
尽管如此，电子竞技在世界已经有了十多年的发展。随着行业的不断规范、主流媒体的关注、商业化、规范化的趋势已愈发明显，特别是传出“电竞申奥”的消息后更是引起轩然大波，不管是炒作还是确有此事，都说明了电子竞技的影响力。
电子竞技作为一个新兴的竞技体育项目，它已经发展成为了一个具有现代竞技体育精神的一种人与人之间的电子游戏竞技运动。
二、开发工具简介
（一）Dreamwear CS5
Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，Dreamweaver CS5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
本站主要用Dreamwear CS5来编辑网站的代码，显示网站的各个页面。
（二）HTML简介
超文本标记语言，是标准通用标记语言下的一个应用。
简单来说HTML就是一种文本规范，就如写作文一样，有在编写语言的时候，我们同样需要这样的规范，HTML就是文本规范的一种。
超文本标记语言的结构包括主体”部分（Body）、和“头”部分（英Head）“，主体（Body）部分提供网页的具体内容，头（Head）部提供关于网页的信息。
（三）JavaScript
JavaScripts——一种直译式脚本语言，是一种基于原型、动态类型、弱类型的语言，内置支持类型。在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML（标准通用标记语言下的一个应用）网页增加动态功能。
而本站，则是用JavaScript来实现页面的动态效果，如轮播效果、鼠标悬停等等。
（四）Div+CSS
DIV+CSS是网页设计的标准，它是一种网页的布局方法。与传统中通过表格布局定位的方式不同，它可以实现网页页面内容与表现相分离。本站主要以DIV+CSS来布局网站。XHTML是一种在HTML基础上优化和改进的新语言，目的是以XML应用于强大的数据转换，适应未来网络应用更多的需求。
三、网站需求分析
（一） 系统概述
五、网站功能实现
（一）首页
首页主要包含了相关图片的展示以及电子竞技的各类简介：电子竞技的基本特征、电子竞技的概念总结、电子竞技的相关错误理解，同时也介绍了电子竞技的俱乐部相关等等。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1748.html
