抗阻组合训练方法的多媒体网课的系统实现

    本篇论文目录导航：

【题目】抗阻组合训练方法的多媒体网络课件构建 
【第一章  第二章】抗阻组合训练技术多媒体网课设计探究前言 
【3.1  3.2】抗阻组合训练方法手段相关介绍 
【3.3  3.4】抗阻训练手段多媒体网络课件的需求与系统设计 
【3.5】抗阻组合训练方法的多媒体网课的系统实现 
【3.6 - 3.8】抗阻力训练技法的多媒体网络课件的系统测试及调试 
【结论/参考文献】抗阻组训方法网络多媒体课件制作研究结论与参考文献

　　3.5 抗阻组合训练方法手段的多媒体网络课件的系统实现

　　课件实现其实就是将我们之前所做的设计付诸实践的过程，实现的核心思想是依据课件要传递的主要内容、遵循课件制作的原则、将文字、图片、视频按照结构设计和详细设计组合在一起的过程。俗话说：“巧妇难为无米之炊”,有了完美的设计，还要有必须的素材，才能够制作出内容丰富、有血有肉的好作品。因此，在进行脚本代码编写之前，除了要进行以上介绍的需求分析、结构设计、详细设计之外，还要收集素材、处理素材，最后才是进行课件的整合制作及后期的调试测试、运行发布等几个环节。

　　3.5.1 课件的素材收集

　　3.5.1.1 课件的文字的收集

　　文字部分是出自本人的导师跟本人正在撰写的一本书，即青少年功能性体能训练指导丛书-《抗阻组合训练》；其中与抗阻速度训练器结合的器材中，栏架、软梯、弹力带相关的训练丛书已经印刷出版了，这些丛书对抗阻组合训练方法手段与栏架、软梯、弹力带结合部分的撰写提供了相当成熟的技术动作方面的参考；当然大部分是通过查阅相关的文献资料、网站信息、书籍等途径所获得的启迪；前期撰写文字素材是在 Microsoft Word 文档中，文字要求是言简意赅、通俗易懂。

　　3.5.1.2 课件图片的收集

　　在选择拍摄对象时是比较有目的性的，第一部分（抗组速度训练器结合田径基本步伐及起跑加速练习）找的是我院运动队队员，本科运动训练专业，国家二级跳高运动员。在国内很多重大赛事取得过好成绩；第二部分（抗组速度训练器结合田径专项的抗阻组合练习）因为是田径专项训练，所以拍摄对象都是我院在田径各专项最优秀的本科运动系专业的学生；后面两部分基本是适合应用于教学方面的方法手段，所以对拍摄对象的田径竞技运动不做要求，为方便团队建设均由本人导师所带的研究生完成，当然包括本人在内。

　　拍摄工具为 2000 万像素的 NikonD7000 单反数码照相机，我们在拍摄图片之前专门向摄影专业人员学习了详细的相机使用方法，2014 年 9 月至 10 月，先让拍摄对象熟悉并练习拍摄动作，然后在我院的田径场及中间的草坪上进行了多次拍摄，在拍摄中我们采用了运动过程中的连拍模式，以便保证技术动作的完整性。第一阶段总共拍摄了 2254 张图片；第二阶段按照动作方法要求的关键环节筛选出 450 张图片；第三阶段把选出来的图片与动作名称相对应存放，因为图片过大，还要通过一些图片处理工具对图片进行进一步修改。

　　3.5.1.3 课件视频的收集

　　2014 年 8 月份，同谭老师一起研究学习了抗阻组合训练方法手段，并反复指导拍摄对象（与图片拍摄对象基本一致）的动作，视频的拍摄是聘请了“北京五彩之星影视艺术有限公司”的专业工作人员来我院进行的，采用双机同时拍摄的方式，用Administrator 摄像机从正向和侧向同时摄像，根据动作需求会再加一遍动作特写，拍摄过程中不仅要与拍摄对象强调动作要求，更要与摄像师很好的交流沟通，要让他们了解每个动作拍摄的重点。

　　拍摄完之后去拍摄公司指导工作人员对视频进行修改制作，在这过程中，我们以青少年功能性体能训练指导丛书-《软梯组合训练》《栏架组合训练》为参考模板。

　　其过程如下，一、把每个动作做得最标准的一遍筛选出来，多余的小动作删掉；二、对动作进行分类并把需要加慢动作的，有特写的，需要连放多次的整理出来；三、把每个动作的动作名称以文字形式相应加上并放上不用类别的音乐，音乐要阳光、欢快与体育运动相吻合；四、输出后反复查看有没有修改不到位的，并再次修改。

　　3.5.2 课件的素材整理

　　文字是人类记录语言的符号，是一种信息的载体，是人们获取知识的一种主要途径。课件中的文字要求简洁明了、语句流畅。这些文字从表达意义上来看，主要包含对抗阻训练器的介绍，抗阻组合训练种类的描述，每种抗阻组合训练的练习目的、练习方法、注意事项。在课件制作之前，将这些文字按照一定的顺序，一一列出，把一个主题的内容整理到一起，在课件制作时，方便取材。

　　文字对学习者产生的影响是间接的。而以图片的形式传达信息，要更为直观、具体和形象一些。图片是本多媒体课件不可或缺的素材，主要包括两个方面：一类是关于抗阻训练组合动作的图片；另一类是为加强多媒体课件效果而选取的背景图片。由于拍摄出的图片像素较高，占用空间较大，不适合直接应用在课件中，因此，我们利用格式工厂来将图片转换为存储空间较小的格式，当然，也可以利用比较流行的Photoshop 来改变图片的大小，对于图片格式的转换，我们选用的工具是格式工厂。对于点缀页面的背景图片，我们使用 photoshop 进行裁剪、合成。

　　视频丰富的画面，能够有效的帮助学习者记忆、理解和思考。比单纯的文字表达更有助于学习者记忆、掌握。尤其对于体育方面的动作方法，视频显得更加重要。多媒体课件中放置的视频，同文字描述一样，需要简洁精练。在视频录制过程中，难免会录制上多余的信息，因此，需要我们对视频进行剪辑，一方面是去掉录制时产生的无效信息，另一方面可以制作一些视频特效，使视频更具有吸引力和表达力，第三方面是将整段的长视频剪切成各个分段，以便放置到课件中特定的位置。

　　多媒体视频的格式有很多，例如 AVI、MPEG、MPEG2、MP4、WMV、FLV、RM、RMVB等格式。不同格式的视频在占用内容和视频质量上有一定的差别，我们在选择格式时要在性能和质量上做一个权衡，选取最合适的视频格式。3GP 格式占用内存小，但视频不是很清晰，AVI 和 MP4 占用空间大但视频比较清晰，3GP 格式占用空间最小，但在电脑上播放，清晰度也会大打折扣。综合分析，占用空间小同时格式又清晰的有RMVB、RM 格式，其次是 WMV 格式。因此，我们利用格式工厂，一种视频格式转换的软件工具将录制的视频转换成 RMVB 格式。然后利用会声会影进行视频的剪辑及效果编辑。

　　素材处理的难点在于技术实现上。首先我们要明确图片、视频要处理成什么样子，上面已经介绍过了，即既要关注资源所占空间大小，又要关注图片、视频的质量问题，这些答案是本人通过和相关专业人员咨询以及查阅相关资料得知。其次，要了解哪些工具对我们有帮助，并且下载、安装并学习这些软件的使用方法。现在，相似功能的软件非常多，例如：视频转换工具就有格式工厂、狸窝全能视频转换器、艾奇全能视频转换器、暴风转码等多款软件，图片处理软件也是如此，在这种情况下，本人选择的是排行榜中点击率最高的一款软件。最后是运用这些工具将素材处理成本课件需要的素材，本课件制作过程中使用的处理方式是，通过 Photoshop 对图片进行美化和大小的转换，通过格式工厂软件将视频转换成占用空间小且质量相对较高的视频格式。

　　3.5.3 课件合成

　　经过整体结构设计、具体页面详细设计、素材收集以及素材处理，接下来我们需要编写脚本，将准备好的素材按照原定设想进行课件合成。

　　3.5.3.1 开发工具的选取

　　选取一款适合的 IDE 工具。常用的网页制作软件有 Macromedia、Dreamweaver、webstorm、SharePoint Designer 等等。Dreamweaver 网页制作软件，已经成为专业级网页制作程序，支持 HTML、css、php、jsp 以及 asp 等众多脚本语言的语法着色显示，同时提供了模板套用功能，支持一键式生成网页框架功能。WebStorm 是 jetbrains公司旗下一款 JavaScript 开发工具，被广大中国 js 开发者誉为“web 前段开发神器”、“最强大的 HTML5 编辑器”、“最智能的 JavaScript IDE”等，另外，还具有批量代码分析、编码语言混合或内混、拼写检查、重复代码检查、代码智能提示功能。由于 WebStrorm 占用空间较小，并且功能强大，完全能够支持我们多媒体课件制作，因此，经过权衡，本网络课件选择的开发工具是 WebStorm 9.

　　3.5.3.1 代码结构设计

　　在代码开始编写之前，要设计代码结构，分别建立不同的目录，将同类素材组织到一起，目的在于建立清晰的代码结构，提高可读性和可维护性。

　　Css 目录用来放置样式信息，javascript 目录用来放置 js 脚本，jquery 目录放置引入的 jquery 库，resource 用来放置课件制作过程中用到的图片、视频等资源，样式、js、jquery、resource 元数据，这些都是必不可少的元素，关于每个抗阻训练的动作，要求单独建立一个文件夹，例如图 7 中的 xlj,表示抗阻训练器结合小栏架练习，xlj 目录中存放所有关于小栏架组合动作的页面。

　　3.5.3.3 主页面制作

　　代码编写时，首先从主页面开始。主页面是学习者最先看到的页面，因此，主页面承担着非常重要的角色，本课件要求页面尊重浏览者的浏览习惯，排版上使用尽可能简单的列表，不使用两列三列混排的方式，在视觉上要符合课件主题的定位，在情感上与浏览者拉近距离，在内容上要写出强有力的语句，让读者有理由逗留。总之，主页面要做到趣味盎然，引人入胜。

　　首页分为三部分，顶部 logo,左侧菜单栏，底部说明，右侧内容介绍。其中，顶部 logo、左侧菜单、底部说明不仅仅是首页的一部分，也是整个课件的公共部分。

　　也就是说，无论学习者跳转到任何一个链接，变化的只是内容区域，顶部、左侧导航、底部说明都是始终不变的。因此，我们将这些公共板块放到一个 html 页面中，而内容区域通过 html 语言中的 iframe 技术实现动态嵌入不同子页面，也就是说，被嵌入的页面，只包含其特定的内容，不必再重新复制头部、左侧导航、底部的脚本代码。

　　实现最大程度的解耦合，使代码更加清晰、灵活。在实现技术上，本课件运用 iframe和 javascript 动态脚本共同实现。有了 javascript 脚本，便可以只写一段 iframe相关代码，通过 javascript 中的变量找到具体对应的子页面。

　　3.5.3.4 头部制作

　　头部区域，以首都体育学院背景图片为 logo,并且在图片右侧空白区域加入本课件主题内容，抗阻组合练习。页面头部在一个 div 内，并设置其高度为固定高度100px,宽为相对宽度 100%,在这个 div 内通过 img 属性加入背景图片，设置图片的宽和高分别为 100%,这样，整个图片就会改变之前原有大小，而完全的符合 div 的大小，不会出现整体布局的错乱。这样，在一个背景图片上面添加文字，在查阅资料后，也是比较容易实现的，完全由 css 样式控制，不需要任何动态脚本来控制3.5.3.5 导航栏及详细页面制作

　　左侧导航栏，是浏览者学习所有内容的一个快速入口，需要涵盖所有内容，并且还不能给人臃肿的感觉。颜色布局上，需要比头部稍微醒目一点的颜色，并且，要通过 javascript 脚本设置鼠标滑过效果、当前点击效果。

　　由于抗阻组合训练内容比较多，每一个大的分类里又有不同的小分类，因此，左侧导航栏显示全部大分类，在点击每个导航栏链接的内容页是，把其对应的各小类依次展示，给每个小分类添加链接，进入该分类的详情介绍。下面以抗阻训练器结合走步练习为例展示具体的实现过程。

　　图 9、图 10、图 11 这三张图片是一个连贯的操作，点击左侧菜单栏的走步练习，出现抗阻训练器结合走步练习的多种动作，高抬腿走、垫步高抬腿走、侧向滑步走、侧向前交叉步走……点击任何一个动作类型，就会进入第三张图片展示的效果，例如点击高抬腿走，进入第三张图片展示的效果，出现高抬腿走的练习方法、注意事项、训练目的、视频等。而点击第二张图片中的任何一个动作之后，同样也是进入这个详情页面。图 9 和图 10 的切换由右上角的横屏、竖屏切换按钮来实现，这个是通过jquery 来动态控制 css 样式及页面跳转，在代码中需要引入 jquery 库。其实，这两个页面的主要内容是一样的，但是，之所以做成两种效果，是为了给页面增加活泼性，去除一种重复页面的单调乏味感。

　　其余动作组合和上面的设计相似，下面的一组图片（如图 12、图 13）演示的是抗阻训练器结合田径基本步伐的动作练习。首先，点击左侧导航栏的结合田径基本步伐，出现横屏显示的各种田径动作的组合（如图 12）。

　　在页面的右上角，有一个全屏显示和竖屏显示的切换按钮，点击竖屏后，每个田径动作类型按竖屏显示（如图 13）。

　　由于有些模块的动作高达几十种，因此，这里采用了分页的方式，每个页面只显示部分分类，在页面底部增加分页的 button 按钮。这样，避免了页面过长且单一的现象，对于课件制作者本人来说，仅仅是增加几个页面，增加几个页数的链接而已，.

　　而且这样做确实能够带来更好的用户体验性，符合现在软件的常用设计方法，也满足了用户的浏览习惯。

　　无论是横屏显示还是竖屏显示，每个动作类型上都加了超链接，点击进入即可看到对应组合的详细介绍（如图 14）。

　　3.5.3.6 横向导航制作

　　左侧导航栏是用来帮助读者快速浏览并定位课件主要内容的，横向导航栏（如图15）是提示读者当前浏览内容属于哪个分类。要注意和纵向导航栏相结合使用，从整体到细节上都给读者全方位的提示。例如：当浏览者打开田径基本步伐中的小步跑时，横向导航条的位置提示由之前的“您的位置：首页>结合田径基本步伐及起跑加速练习”改变为“您的位置：首页>结合田径基本步伐及起跑加速练习>小步跑”.这样设计的好处在于，一方面使页面排版看起来更加协调，一方面使浏览者能够明确定位自己当前所浏览信息的主题。（如图 15、16）

　　3.5.3.7 实现技巧

　　由于该课件动作类型很多，每一个动作类型都要有一个页面，而这些页面的头部、底部、左侧区域是固定不变的，区别只是内容的不同，但是，从脚本代码的可维护性考虑，我们将每个动作类型所在的页面作为子页面嵌入到主页面中，只在主页面中编写一次头部、尾部、左侧的代码即可。使用的 iframe 实现技术如图 17、图 18 所示：

　　代码中有超链接的地方，都通过一个 javascript 函数进行跳转，其中的参数控制具体跳转到哪个页面。然后，链接到的那个页面显示在 iframe 所控制的区域内。（图略）