足球资讯网的设计与实现

一、课题意义

传统看新闻的方式是看电视和读报纸，随着互联网的高速发展，它低成本、高速、易获取的优势突显，通过网站的阅读新闻逐渐取代传统媒介成为主流。

为了让人们花最短的时间用最低的成本浏览更多的新闻资讯，满足人们对信息获取的迫切性。

随着我国网络和媒体的发展，人们观看足球比赛的方式变得多样化，可以通过电视、电脑、平板电脑、手机等工具收看画面转播、视频直播、图文直播等。目前国内的各大门户网站以及与足球有关的论坛基本都是把各项体育赛事的信息综合为体育板块，很少有直接的，专题的足球信息网站。对足球的信息也不全面。由于我也是皇家马德里足球俱乐部球迷，在关注比赛时对信息总有缺憾。也体会到，对于球迷来说各种信息是非常重要的，也是提高球迷兴趣和关注度所需要的重要因素。因此，为了方便球迷查看俱乐部比赛的相关数据、赛况等信息，以便球迷能更直接和及时了解联赛的各种信息。一个关于皇家马德里足球俱乐部资讯的信息查询网站，使广大的皇马球迷可以更好的查询信息是必不可少的。

二、文献综述

起源，2010年5月，伊桑.马科特（Ethan Marcotte）在“A List Apart”写了一篇开创性的文章（题为“Responsive Web Design” ），他利用三种已有的工具：流动布局（fluid grids）、媒介查询（media queries）和弹性图片（scalable images）创建了一个在不同分辨率屏幕下都能漂亮地显示的网站。 Ethan Marcotte力劝设计师们要去利用那些Web独有的特性去进行设计： “我们可以将不同联网设备上众多的体验，当作是同一网站体验的不同侧面来对待，而不要为每种设备进行单独剪裁而使得设计彼此断开，这才是我们前进的方向。虽然我们已经能够设计出最佳的视觉体验，但还要把基于标准的技术也嵌入到我们的设计中去，这样才能使得我们的设计不仅灵活，而且还能适应渲染它们的各种媒介。” Ethan Marcotte证明了一种在多种设备上都能提供卓越体验的方法的存在，而且这一方法不会忽视不同设备的差异，也不会强调设计师的控制权，而是选择了顺其自然并拥抱Web的灵活性。这里简单介绍下上面的提到的三个概念：流动布局（fluid grids）、媒介查询（media queries）和弹性图片（scalable images）原本都是指现有的一些技术手段，但在做响应式设计研究的过程中，这些概念还是有更广泛的意义。

1. 流动布局：原特指以百分比为度量单位的布局技术实现方式。这里就不对如流动布局、弹性布局、流体栅格等各种概念做一一说明。笔者就此统为一个大的概念：在响应式设计的布局中，不再以像素（px）作为唯一单位，而是采用百分比或者混合百分比、像素为单位，设计出更具灵活性的布局方式。2. 媒介查询：媒介查询可以让你根据在特定环境下查询到的各种属性值——比如设备类型、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样式。通过使用媒介查询，可以获取到设备及设备的特性，并给出求同存异的方案，从而解决之前在单纯的布局设计中遗留的问题。3. 弹性图片：伴随布局的弹性，图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。

未来的路，虽然响应式设计的优势和趋势已被普遍认可，但目前响应式设计的模式的普及还是有很多难题需要突破：

1. 响应式图片：目前弹性图片的做法主要是：缩放、剪裁、分条件加载等实现方法本质上都只是一个技巧，只是治标不治本地掩盖了问题，并未真正完美地实现图片的弹性。2. 跨端的交互：在响应式设计中，我们不仅要需要考虑桌面用户的使用习惯，还必须兼顾不同尺寸的手持设备。比如在桌面端无尽优雅的Hover，在移动端却是无比糟糕的体验，如何“求同存异”，让各端体验均能最佳，还是需要继续深入探究的。

3. 性能：性能估计是在响应式开发中最大的痛，按条件加载、隐藏或显示什么内容，都会比单一条件判断的代码结构来的繁琐，并影响体验及维护。尤其是移动性能上，更多样的设备具有更加复杂的使用环境，如何识别设备，并让设备在不同环境均能良好体验，也是一根硬骨头。

4. 合作流程：响应式设计远远不止是一种简单的设计策略，它为Web项目带来的是一整套全新的、完整的方法，还应该包括一种新的、可以更好地利用这一模式的工作流程。

三、课题研究内容与方法

查阅相关最新文献，熟练应用Visual Studio Code+数据库，建立数据库及相关数据表，完成开发。本次开发会用到html，css，JQuery，数据库等相关开发语言。

功能：1.登录/注册，可以注册成为网站的会员。

2.足球俱乐部信息查询，方便球迷了解俱乐部的历史以及所获得的荣誉，主教练的执教生涯，教练组成员，球员的介绍等信息。

3.足球赛程信息查询，可以查询已结束的场次的比赛结果和未来的对阵情况。

4.数据信息查询，能够查看当前轮次结束后最新的积分榜，射手榜，助攻榜等数据的统计。

5.精彩图片/视频浏览，可以观看比赛时高清摄像机拍下的图片，以及比赛集锦，精彩进球等。

6.足球新闻浏览，可以查看一些转会信息、看看球员在场外的动态和平时训练时的一些备战图片以及球员在球场上及赛场外的一些趣闻、花絮，从多个方面了解球员的生活。

7.会员论坛，注册的用户可以在论坛发表一下看球时的感想，表达愤怒或者高兴的心情，也可以和球迷讨论一些比赛的战术。论坛的设立给会员提供一个相互交流的平台，能让每个会员可以更好的和广大球迷朋友互动，交到可以畅谈足球的朋友。

8.后台管理，管理员登录系统，对前台信息进行管理。主要包括信息的添加、修改、删除和查询

四、课题研究进度安排