菜单点击要有内容呈现，内容呈现的方式选用的是模态框的呈现方式。模态框的设计方案是点击课程小节，该小节的模态框从上而下弹出，显示在页面上。模态框的设计是为在不翻转网页的基础上，显示更多的内容，这里是为了显示课程章节的知识点。模态框的设计要浮于网页的上传，并且能够关闭，这样可以切换不同的模态框。根据设计思路，模态框的设计如图4-8所示。

图4-8： 模态框设计

该功能需要jQuery的支持，在页面中引入jQuery。js文件代码如下：

<script src="js/jquery-1。12。3。js" type="text/javascript"></script> 

模态框的实现代码，如下：

<p class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

aria-labelledby="myModalLabel"引用的模态框的标题，tabindex的值设为-1表示这个模态框不受键盘的tab键控制。

4。2。3 本书作者模块

这个模块主要介绍本课程教科书的作者。页面采用的静态页面，页面的布局和主页一样，只是作者描述的部分用面板显示。本书作者的模块设计如图4-9所示。

图4-9： 本书作者设计

4。2。4 教学视频模块

在HTML5中新增了<video>标签，通过<video>标签可以直接播放视频，不过，<video>标签目前只支持三种视频格式，分别为Ogg、MPEG、WebM。而浏览器对于<video>标签的支持也不一样，例如，IE8及其更早的版本就不支持<video>标签。以前浏览器采用的是加载flash插件来播放视频，但是flash的稳定性不是太好，用户经常会遇到flash插件崩溃的情况。video的属性主要有autoplay、controls、loop、preload。autoplay表示视频自动播放；controls表示向用户显示控件，比如暂停；loop表示视频播放完在此播放；preload表示视频在加载页面时进行加载，并预备播放[16]。文献综述

现在，越来越多的浏览器已经支持<video>标签，包括微信内置的浏览器。教学视频样式如图4-10所示。

图4-10： 视频播放

在页面中引入视频方式如下：

<video class="embed-responsive-item" src="video/tech。mp4"  controls="controls"></video>

"embed-responsive-item"是表示指定组建内的元素的最终样式与其他属性相匹配，例如，视频播放的页面随屏幕的大小改变而改变。有"controls"属性出现，表示向用户显示控件，比如播放按钮。

4。2。5 作业下载模块

作业下载模块样式如图4-11所示。

图4-11： 作业下载样式

这个模块主要是老师上传的作业供学生去下载。这样，老师不需要担心在课堂上学生不清楚作业的内容。作业的内容是以Word文档的方式存放在服务器上。学生如果需要下载要写的作业，直接点击该文档名，会弹出下载提示框，选择保存文件的路径。这样，就能把作业下载下来。具体实现，代码如下：

    <a href="file/homework2。doc"，download=”homework2”>第二章课后作业</a>

    <a>标签是一个可以添加链接的标签，添加href属性可以链接指向页面的url。download属性是HTML5新添加的属性，规定被下载的超链接目标。它的值为下载目标的文件名。

4。2。6 问题交流模块

在这个模块中，需要MySQL数据库的支持。在新浪云中，它本身带有MySQL数据库，新浪云中MySQL分为独享数据库和共享数据库。需要注意的是，在连接它的数据库时它的域名不是localhost，端口号不是3306。以下是一些和共享MySQL数据库服务相关的预定义常量，你可以直接引用这些参数来连接数据库：