软件工程专业毕业论文教学示范文档-招生宣传、课程中心、学习中心子系统功能需求

1、蓝 梦 在 线 网 络 教 学 平 台（蓝梦 ELearning）招生宣传、课程中心、学习中心子系统功能需求蓝梦教育集团信息系统开发中心版权所有不得复制二零一七年二月二十三日文档属性文档属性文件状态： 草稿 正式发布正在修改文件标识：蓝梦-ELearning-PM-01当前版本：1.0 文件密级： 普通 秘密 绝密变更记录日期作者版本变更内容审阅者目 录 TOC o 1-3 h z u HYPERLINK l _Toc475340769 1Web页面设计的总体要求 PAGEREF _Toc475340769 h 5 HYPERLINK l _Toc475340770 Web页面UI设计要求 P

2、AGEREF _Toc475340770 h 5 HYPERLINK l _Toc475340771 Web页面简洁性 PAGEREF _Toc475340771 h 5 HYPERLINK l _Toc475340772 页面风格保持一致性 PAGEREF _Toc475340772 h 5 HYPERLINK l _Toc475340773 好的对比度 PAGEREF _Toc475340773 h 5 HYPERLINK l _Toc475340774 页面的具体要求 PAGEREF _Toc475340774 h 5 HYPERLINK l _Toc475340775 浏览器的兼容性

3、PAGEREF _Toc475340775 h 6 HYPERLINK l _Toc475340776 应用HTML5+CSS3+JS相关技术 PAGEREF _Toc475340776 h 6 HYPERLINK l _Toc475340777 Web浏览器的兼容性要求 PAGEREF _Toc475340777 h 7 HYPERLINK l _Toc475340778 统一HTML5页面的表现形式 PAGEREF _Toc475340778 h 7 HYPERLINK l _Toc475340779 手持设备客户端浏览器的兼容性要求 PAGEREF _Toc475340779 h 7 H

4、YPERLINK l _Toc475340780 易用性的要求 PAGEREF _Toc475340780 h 7 HYPERLINK l _Toc475340781 系统平台的可用性具体的指标 PAGEREF _Toc475340781 h 7 HYPERLINK l _Toc475340782 提供用户在线帮助 PAGEREF _Toc475340782 h 8 HYPERLINK l _Toc475340783 提供常见问题解答 PAGEREF _Toc475340783 h 8 HYPERLINK l _Toc475340784 2系统页面结构设计要求 PAGEREF _Toc4753

5、40784 h 8 HYPERLINK l _Toc475340785 系统首页面结构设计要求 PAGEREF _Toc475340785 h 8 HYPERLINK l _Toc475340786 系统首页面结构设计要求 PAGEREF _Toc475340786 h 8 HYPERLINK l _Toc475340787 系统首页面中的内容要求 PAGEREF _Toc475340787 h 9 HYPERLINK l _Toc475340788 注册报名和系统登录页面结构 PAGEREF _Toc475340788 h 17 HYPERLINK l _Toc475340789 注册报名页

6、面结构设计要求 PAGEREF _Toc475340789 h 17 HYPERLINK l _Toc475340790 系统登录页面结构设计要求 PAGEREF _Toc475340790 h 19 HYPERLINK l _Toc475340791 忘记密码页面结构设计要求 PAGEREF _Toc475340791 h 22 HYPERLINK l _Toc475340792 联系我们和帮助中心页面结构 PAGEREF _Toc475340792 h 23 HYPERLINK l _Toc475340793 联系我们页面结构设计要求 PAGEREF _Toc475340793 h 23

7、HYPERLINK l _Toc475340794 帮助中心页面结构设计要求 PAGEREF _Toc475340794 h 23 HYPERLINK l _Toc475340795 切换帐户和注销退出页面结构 PAGEREF _Toc475340795 h 24 HYPERLINK l _Toc475340796 切换帐户页面结构设计要求 PAGEREF _Toc475340796 h 24 HYPERLINK l _Toc475340797 注销退出页面结构设计要求 PAGEREF _Toc475340797 h 25 HYPERLINK l _Toc475340798 3登录成功后的各个

8、页面结构设计要求 PAGEREF _Toc475340798 h 25 HYPERLINK l _Toc475340799 内容首页面结构设计 PAGEREF _Toc475340799 h 25 HYPERLINK l _Toc475340800 内容首页面结构设计要求 PAGEREF _Toc475340800 h 25 HYPERLINK l _Toc475340801 内容区域的布局及内容设计要求 PAGEREF _Toc475340801 h 26 HYPERLINK l _Toc475340802 课程中心页面结构设计 PAGEREF _Toc475340802 h 28 HYPE

9、RLINK l _Toc475340803 课程中心页面布局及内容设计要求 PAGEREF _Toc475340803 h 28 HYPERLINK l _Toc475340804 精品课程页面布局及内容设计要求 PAGEREF _Toc475340804 h 28 HYPERLINK l _Toc475340805 购买的课程信息页面布局及内容设计要求 PAGEREF _Toc475340805 h 29 HYPERLINK l _Toc475340806 收藏的课程信息页面布局及内容设计要求 PAGEREF _Toc475340806 h 29 HYPERLINK l _Toc475340

10、807 学习中心功能模块相关页面结构设计 PAGEREF _Toc475340807 h 30 HYPERLINK l _Toc475340808 不同状态课程信息显示页面 PAGEREF _Toc475340808 h 30 HYPERLINK l _Toc475340809 某个具体课程信息显示页面 PAGEREF _Toc475340809 h 31 HYPERLINK l _Toc475340810 某个课程的授课教师信息显示页面 PAGEREF _Toc475340810 h 32 HYPERLINK l _Toc475340811 在线学习的页面结构设计 PAGEREF _Toc4

11、75340811 h 33 HYPERLINK l _Toc475340812 课堂笔记的页面结构设计 PAGEREF _Toc475340812 h 34 HYPERLINK l _Toc475340813 课程答疑的页面结构设计 PAGEREF _Toc475340813 h 35 HYPERLINK l _Toc475340814 系统后台管理页面结构设计 PAGEREF _Toc475340814 h 35 HYPERLINK l _Toc475340815 后台管理首页面结构设计要求 PAGEREF _Toc475340815 h 35 HYPERLINK l _Toc4753408

12、16 各个子系统的后台管理首页面统一的结构设计 PAGEREF _Toc475340816 h 36 HYPERLINK l _Toc475340817 招生宣传子系统的后台管理首页面结构设计 PAGEREF _Toc475340817 h 37 HYPERLINK l _Toc475340818 课程中心子系统的后台管理首页面结构设计 PAGEREF _Toc475340818 h 37 HYPERLINK l _Toc475340819 学习中心子系统的后台管理首页面结构设计 PAGEREF _Toc475340819 h 38 HYPERLINK l _Toc475340820 4招生宣

13、传、课程中心、学习中心子系统用例分析 PAGEREF _Toc475340820 h 38 HYPERLINK l _Toc475340821 系统平台中的各个参与者 PAGEREF _Toc475340821 h 38 HYPERLINK l _Toc475340822 各个参与者所对应的用例 PAGEREF _Toc475340822 h 38 HYPERLINK l _Toc475340823 游客参与者所对应的用例 PAGEREF _Toc475340823 h 38 HYPERLINK l _Toc475340824 学习者所对应的用例 PAGEREF _Toc475340824 h

14、 39 HYPERLINK l _Toc475340825 教务人员所对应的用例 PAGEREF _Toc475340825 h 41 HYPERLINK l _Toc475340826 系统管理员所对应的用例 PAGEREF _Toc475340826 h 41Web页面设计的总体要求Web页面UI设计要求“蓝梦在线网络教学平台”在UI界面设计和实现时充分考虑到用户使用的方便性，保证最终的系统平台具有良好的用户体验度。Web页面简洁性简洁首先是为了突出主题，传达主要意图，删减不必要的琐碎细节。但简洁的Web页面并不意味着功能元素的缺少，而是指要确保网页上的每一个元素都应当是必不可少的，都必须

15、有其存在的必要性。页面风格保持一致性1、各个页面使用相同的页边距，文本，图形之间保持相同的间距。2、主要图形，标题或符号旁边留下相同的空白。3、如果使用图标导航，则要求各个页面应当使用相同的图标导航。 4、页面中的每个元素与整个页面以及站点的色彩和风格上的一致性，所有的图标都应当采用相同的设计风格。5、页面中的文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。好的对比度好的对比度使页面内容更易于辨认和接受，突出关键内容并吸引浏览者。页面的具体要求1、页面宽度目前主流的分辨率为1024*768，在此状态下默认使用910的网页宽度。2、页面展现（1）页面内容和链接的层次不超过3层（2）默认窗口

16、设置下，不应出现水平和滚动条（3）在页面上方放置Logo、主要功能导航链接浏览器的兼容性应用HTML5+CSS3+JS相关技术考虑到系统平台在后期需要支持智能 和平板灯手持设备，要求Web页面应用HTML5+CSS3+JavaScript相关技术实现。其中HTML5定义页面的结构和内容，CSS3定义页面的显示风格，而JavaScript脚本代码实现页面中的动态行为。因此，在页面设计时需要严格遵守W3C的Web标准，将内容、表现和行为等彻底分离。为了能够达到跨平台的Web页面的设计效果，因此应用HTML5开发。IPhone、Ipad、Android等移动设备都可访问一次性开发，版本统一，节约开发

17、及升级成本用户无需下载安装及升级，只需服务器端升级与原生APP一样有华丽的效果及触控操作体验用户随时随地使用 浏览器即可访问结合二维码的使用，客户只要用 扫描网站的二维码图标，就可以访问网站，无需要输网址，简单快捷。Web浏览器的兼容性要求由于所要开发的“蓝梦在线网络教学平台系统”计划采用B/S架构，因此需要考虑到对于不同浏览器的兼容性，也就是要求系统平台在各种主流的浏览器中都能够正确地应用和访问。1、重点兼容于微软IE、FireFox和Google的Chrome由于目前的主流浏览器存在有几种不同的形式，“蓝梦在线网络教学平台系统”在建设时要考虑到前端学习者和教学管理人员所使用的浏览器的兼容性

18、重点兼容于微软IE、FireFox和Google的Chrome三种主流的浏览器。2、统一支持HTML4和HTML5为了方便以后对手持设备的支持，需要应用HTML5技术实现Web页面设计。但考虑到仍然有用户应用不支持HTML5的浏览器，因此Web页面设计需要设计两套，分别针对HTML4和HTML5两套技术设计相关的页面或者采用兼容转换的技术实现。统一HTML5页面的表现形式由于微软IE、FireFox和Google的Chrome三种主流的浏览器对W3c的HTML5标准支持是有差别的，从而导致同一个HTML5的页面在三种不同的浏览器中的显示风格不同。因此，在Web页面的外观显示风格设计方面，需要采

19、取一定的技术措施分别针对不同的浏览器进行设计，最终达到在不同的浏览器中都表现出一致性的显示风格。手持设备客户端浏览器的兼容性要求兼容于IOS和Android两种手持设备客户端系统内的浏览器，但在系统的第1版本中暂时不考虑对手持设备客户端浏览器的支持和兼容性要求。易用性的要求系统平台的可用性具体的指标用户不需要单独进行专业培训，而直接通过系统的在线帮助和相关的操作提示信息就可以熟练使用本系统。90%的用户第1次使用本系统平台时，能够在1个小时之内完全学会使用本系统平台，并能够完成注册报名、选购课件和在线播放课件等功能。提供用户在线帮助在系统平台的全局导航菜单条中提供在线用户操作帮助手册的超链接，

20、提供全中文的帮助支持的文本说明信息和在线Flash演示视频。其中的在线帮助提供系统平台中的每项功能的分布、操作方法以及常见问题的解答。用户在线帮助Web页面的显示风格的具体要求可以参考下面的结构设计要求。提供常见问题解答在系统平台的全局导航菜单条中提供常见问题的解答的超链接，显示用户在使用系统过程中所可能遇到的问题进行“自问自答”。常见问题的解答Web页面的显示风格的具体要求可以参考下面的结构设计要求。系统页面结构设计要求系统首页面结构设计要求系统首页面结构设计要求1、默认的系统首页面结构设计要求所谓默认的系统首页面，也就是用户通过 HYPERLINK :/ xxxxx / 进入后但还没有进行

21、系统登录所浏览的首页面因此，本系统的首页面分为两种不同状态：默认的系统首页面和成功登录后的内容首页面。其中两种形式的系统首页面的显示风格都可以参考能力天空（ HYPERLINK :/ ablesky / ）系统的首页面的布局结构，该系统的页面也是采用HTML5+CSS3+JS相关技术实现。2、系统首页面的色彩搭配、图标等设计要求但页面的色彩搭配、图标等需要改变为我们自己的风格。推荐采用ZLMS学习管理系统的色彩搭配蓝白明亮色系。ZLMS学习管理系统是上海微兴信息技术（）提供的目前国内唯一可商业化使用的免费E-Learning平台。系统首页面中的内容要求1、顶端的工具条布局风格基本套用“能力天空

22、”网的，但需要修改其中的部分超链接的文字和色彩搭配为我们自己的色彩搭配，并且需要提供两种不同形式的顶端的工具条未登录状态和已经登录状态。（1）未登录状态时的顶端的工具条由于用户没有登录系统，因此无权访问系统中的许多功能，此时在顶端的工具条中只显示出如下的状态信息及相关的超链接。并将左边的链接的文字改变为“移动客户端”、“注册报名”、“系统登录”。（2）学生身份登录成功后的顶端的工具条当用户成功登录系统后，将根据登录者的身份不同在顶端的工具条中分别显示出不同内容的导航超链接。因此，要求顶端工具条中文字及超链接为动态可变的，但界面显示风格保持同一个显示效果。下面的说明及截图为“学生”身份的用户登录

23、系统后的顶端的工具条中的导航超链接的基本要求：需要将其中的“能力工具”下拉菜单中的“能力工具”文字改变为“共享工具”；“共享工具”下拉菜单中的子菜单项目目前不用考虑最终的文字，只需要用测试文字代替（如XXX工具）；添加“帮助中心”的导航超链接“学生”身份的用户登录系统后的顶端的工具条的超链接文字的显示效果如下截图所示。将未登录状态时的顶端的工具条左边的“移动客户端”（下载移动客户端相关的系统程序）、“注册报名”、“系统登录”除掉，并添加“切换帐户”和“注销退出”、“修改密码”三个超链接。（3）教师身份登录成功后的顶端工具条切换帐户注销退出修改密码首页（4）教务工作人员身份登录成功后的顶端工具条

24、切换帐户注销退出修改密码首页（5）系统管理员登录成功后的顶端工具条切换帐户注销退出修改密码首页2、Logo条将Logo条中的的Logo图标改变为自己的图标。3、导航条只需要将其中的“校园专区”文字改变为“学生天地”，其它的文字不变或者添加其它的超链接（具体文字及链接以后再最终决定）。访问者点击导航条中的“网校名师”的超链接后，将显示出系统中的各个教师的列表信息页面，再点击其中的某个教师的超链接，则可以显示出该教师的个人简介信息页面显示要求参考后面的教师信息显示要求。4、默认首页面中的课程内容区域的布局及内容要求（1）内容区域的布局要求动态图片或者Flash右边的分栏导航条，主要包括如下四个子模

25、块：新闻动态、学习动态、最新课程、学员心声。左边的课程分类导航条分栏的课程简介信息区及详细信息的超链接底部状态条区域（2）左边的课程分类导航条树形课程分类导航条的显示风格设计可以参考 HYPERLINK :/ tcict / 网中的左边的课程分类导航条的显示效果，但需要支持两级课程分类显示要求。对于第2级课程项目，可以采用向右展开的方式显示，如上图的“能力天空”网的显示实现风格。（3）课程简介信息区内容区中主要显示各个课程的名称信息，每个课程名称为一个导航超链接。采用分栏显示的风格，当访问者点击切换左边的课程分类导航条中的某个类型的课程超链接后，右边的内容区中显示相关分的课程信息。显示风格类似

26、于下面的效果：其中的“搜索”输入框，允许访问者以课程名称、授课教师姓名等信息进行搜索；每个课程简介的信息项目的显示风格可以参考上面的示例，但课程的简介的信息是动态获得的；其中的“课程名称”、“课程讲师”、“课程类别”等信息都是超链接，点击这些超链接后，系统将显示出相关的信息；提供分页状态切换信息条如果某类课程下有比较多的课程，则要采用分页显示。每页显示10个课程简介信息；每门课程信息前面都有一个“进入课程”超链接，点击可以免费试视听该课程的一段视频（4）右边的分栏导航条在右边的分栏导航条中主要显示如下四个子模块：新闻动态、学习动态、最新课程、考试评估。参考“能力天空”网的显示实现风格，当每一类

27、的信息比较多时，需要采用定时上下滚动显示可以参考“能力天空”网的实现效果。 在“学习动态”栏目中也可以显示课程考试相关的信息。点击其中的“新闻动态”超链接，可以显示出系统中的各个新闻信息列表。如果再进一步点击某个新闻列表的标题，可以显示出某个具体的新闻信息。在“学员心声”栏中以滚动的方式显示各个学员参加培训课程的学习后的“心得体会”的信息列表，显示效果如下图所示：其中的学员姓名为超链接，点击学员姓名可以显示该学员的基本介绍信息。5、底部状态条区域风格和布局基本类似于“能力天空”网的状态条，其中将友情链接以后改变为我们自己推荐的各个链接网站，图标页替换为我们自己的图标或者除掉该图标，颜色也改变为

28、我们自己的色彩。在底部的状态条中至少要提供有如下的几个导航超链接。（1）网络教育平台显示蓝梦在线网络教学平台的技术及功能等介绍方面的信息，可以采用文字、图片及Flash动画等多种形式展现天博网络教育平台的特性。该页面的显示风格可以参考“能力天空”网的“网络教育平台”的显示风格。（2）视频体验点击“网络教育平台”超链接后，系统将显示出一段视频，让访问者了解本系统在线学习的状况。（3）常见问题显示蓝梦在线网络教学平台在使用过程中的可能的相关问题，页面内的信息其实为一个在线Q&A帮助。该页面的显示风格可以参考“能力天空”网的“常见问题”的显示风格。（4）关于我们显示蓝梦在线网络教学平台的所属的企业及

29、性质等文字介绍信息，点击“关于我们”超链接后，系统将跳转到“关于我们”的页面。该页面的显示风格可以参考“能力天空”网的“关于我们”的显示风格。在该页面中需要提供两种形式的导航条水平和竖直两种形式，如下图所示的显示效果。其中水平导航条为全局总导航条，而竖直导航条属于二级子类型的导航条当访问者选择水平导航条中的某个菜单超链接后，在该内容内部根据内容的层次关系再决定对应的竖直导航条内的超链接内容。（5）隐私保护（6）版权声明（7）京ICP证号信息 2013 Ablesky, Inc. All Rights Reserved. 版权所有, 中科天博计算机技术 京ICP备XXXXXXX号-1 京ICP证

30、XXXXXX号 京公网安备XXXXXX号。注册报名和系统登录页面结构注册报名页面结构设计要求1、注册报名页面布局结构可以参考“能力天空”网的“院校学生注册入口”的页面布局结构设计的效果，但其中的表单内的数据项目需要改变。能否将“报名注册”采用“浮动层”的显示风格实现？在该“浮动层”中显示出报名注册的表单类似于下面的系统登录表单的实现。2、注册报名表单中的数据项目学习者可以通过本功能进行注册报名，系统提供注册表单，并要求注册者按照表单中的提示提供相关的数据，系统收集并保存注册者所提供的数据，确认注册成功。下面为目前所需要的基本数据后期可能会调整，但表单的显示风格不变。确认密码：设置密码：录名称：

31、真实姓名：登录名称：选择学历：身份证号：名称：本人性别：男 女 号码：公司部门：目前岗位：邮政编码：电子邮件：本人年龄：通信地址：验证码：注：（1）其中的“登录名称”要求为数字、字母和下划线的组合，最短5个字符，最长为20个字符。（2）对于密码要求输入两次，并且“确认密码”要与“设置密码”保持一致性（3）填入身份证号码有助于实名制管理学习者，并且为后续的结业证书的管理作为第一考虑凭证。（4）电子邮件要求使用真实邮箱，找回密码时做为考虑凭证！（5）其中的“选择学历”下拉框中的学历列表主要为：高中、大专、本科、硕士、博士；（6）验证码采用动态图片实现（由后台服务器创建并发送到浏览器客户端）。3、实

32、时检查所输入的信息是否正确用户在注册表单中输入相关的信息后，系统需要应用AJAX技术实时地检查所输入的信息是否正确，分别以不同的方式显示正确或者错误的状态。注册报名表单中的数据出现错误的显示风格注册报名表单中的数据正确的显示风格4、报名注册的帐号需要在用户的邮件中进行激活系统登录页面结构设计要求1、系统登录页面布局结构点击“系统登录”超链接后，将弹出一个登录的“浮动层”，在该“浮动层”中显示出系统登录的表单。如下图所示的显示风格和内容：2、系统登录表单中的数据项目系统提供统一的登录界面，面向E-Learning学生、教师和教务工作人员、系统管理者的统一登陆界面进入，而未登录的用户统一定义为匿名

33、访客（一般指允许浏览信息）。因此，登录表单内的数据项目的要求如下：密码：登录名称：验证码：身份类型：注：其中的“身份类型”下拉框中的学历列表主要为：E-Learning学生、教师、教务人员、系统管理员。3、登录信息错误时的显示风格要求4、可以采用其它第3方系统的帐户登录本系统系统目前支持上图所示的几种第3方的帐户，下面为用户点击“新浪微博”图标后，所出现的页面截图。输入“新浪微博”所对应的帐号和密码后，并点击“登录”按钮后出现的页面。忘记密码页面结构设计要求1、忘记密码页面布局结构当用户在登录表单中点击“忘记密码”链接后，系统将出现下面的表单页面。2、错误的显示风格要求当用户所输入的电子邮件出

34、现错误时的错误页面显示风格要求如下，在页面表单指定的位置处显示出相关的错误信息文字。联系我们和帮助中心页面结构联系我们页面结构设计要求1、动态显示相关的联系信息可以参考“能力天空”网的“联系我们”的显示风格和实现效果访问者用鼠标指向顶端导航工具条中的“联系我们”超链接后，将动态地显示出客户服务相关的 号码和电子邮件等信息，并可以进行在线客服沟通（链接到TQ通）。2、弹出一个浮动层在弹出的浮动层中显示出客户服务相关的 号码和电子邮件等信息，效果类似于“能力天空”网的“联系我们”的显示风格和实现效果。帮助中心页面结构设计要求1、帮助中心页面布局结构可以参考“能力天空”网的“帮助中心”的显示风格和实

35、现效果，在帮助中心的页面中的左边显示树形折叠菜单，树形折叠菜单中的每个菜单项目为一个帮助信息单元；而在页面的右边显示出相关的在线帮助信息内容。2、帮助中心页面内容显示效果系统显示整个系统的使用相关的在线帮助信息，并配合Flash动态显示整个系统的使用方法的文字、图片及Flash动画。切换帐户和注销退出页面结构切换帐户页面结构设计要求当相关身份的用户成功登录系统后，可以点击顶端的导航工具条中的“切换帐户”超链接，系统将退出当前的帐号操作状态，并弹出登录表单允许操作者切换登录帐户重新登录系统。此时的登录表单不再采用弹出浮动层的显示风格，而是跳转到一个登录页面中。1、切换帐户系统登录页面结构设计要求

36、可以参考“能力天空”网的“登录”页面及表单的显示风格和实现效果，但其中的登录表单中的数据项目要改变为我们自己的登录表单参考前面的浮动层登录表单的数据项目要求。2、系统登录表单中的数据项目参考前面的浮动层登录表单的数据项目要求，并保持登录表单数据项目的一致性。注销退出页面结构设计要求当相关身份的用户成功登录系统后，可以点击顶端的导航工具条中的“注销退出”超链接，系统首先弹出一个用JS实现的警告的提示信息对话框。当点击其中的“确认”按钮后，将退出系统不再进行任何的操作行为，系统将自动地关闭当前的浏览器窗口；而如果点击警告提示信息对话框中的“取消”按钮后，系统将不进行退出的行为处理，而是继续保持当前

37、的操作状态。登录成功后的各个页面结构设计要求内容首页面结构设计内容首页面结构设计要求不同身份的人员成功登录本系统后的内容首页面结构设计保持一致性，与前面的默认的系统首页面采用相同的结构设计效果，但顶端的导航工具条和中间的全局导航条中的超链接项目及文字需要改变针对不同身份的用户需要显示出不同内容超链接的导航条。1、顶端的工具条“学生”身份的用户登录系统后的顶端的工具条的超链接文字的显示效果如下截图所示。2、Logo条继续保持与前面的默认系统首页面中的“Logo条”一致。3、中间导航条显示风格与前面的默认系统首页面中的“导航条”一致，但导航条中的导航超链接需要改变为动态显示不同身份的用户登录系统后

38、的导航条中的导航超链接显示出不同的内容，内容以后再最终确定。下面为学习者登录成功后的“中间导航条”的推荐显示风格和文字超链接截图：其它身份的用户登录系统后的“中间导航条”显示风格一致，只是其中的超链接的文字改变为与身份相匹配的超链接。4、内容首页面中的内容区域的布局及内容要求结构设计和具体的内容需要与登录者的身份保持一致性，也就是不同的用户登录系统后在内容区域中显示出不同的内容。具体的要求参考下面的章节中的说明。5、底部状态条区域与前面的默认系统首页面中的“底部状态条区域”的内容和显示风格保持一致性。内容区域的布局及内容设计要求由于本系统支持多种不同身份的用户，不同身份的用户登录系统后的功能行

39、为是不同的比如，学习者登录系统后则主要的行为是课程查询、购买和学习等；而教务人员登录系统后，则主要是进行教学管理；系统管理员登录系统后，则是进行系统的管理方面的功能行为。因此，“内容区域”在结构设计和具体的内容等方面都需要与登录者的身份保持一致性，最终达到不同身份进入到不同的功能区域中。下面分别说明不同身份的用户在登录系统后，内容区域的布局及内容设计要求。1、学习者与前面的默认系统首页面中的内容区域的布局设计保持相同的显示风格，但课程简介信息及显示状态要进行调整在每个课程条目信息的右边添加几个功能图标，如下图所示：上面的截图的显示效果，也是访问者点击工具条中的“课程大全”超链接后显示的课程信息

40、页面。其中的功能图标的含义如下，分别为“分享课程到”、“立即学习”、“直接购买课程”，显示效果如下截图所示： 为本系统增加社会化分享按钮，是有效提高本系统知名度的一种方法。当然，最终的分享的目标SNS可以选择在国内最著名的系统。2、教师具体参考“教师”国内模块的需求。3、教务人员具体参考“教务人员”国内模块的需求。4、系统管理员系统管理员登录系统后，将显示出系统的后台管理的页面。课程中心页面结构设计课程中心页面布局及内容设计要求当学习者登录成功后将在页面的导航条中显示有“课程中心”的超链接，点击“课程中心”超链接后将进入课程中心的信息显示页面该页面也是学习者登录系统后的默认内容区域中显示的内容

41、，以课程分类的形式显示出系统中所有的课程信息。因此，课程中心页面布局及内容设计要求的要求如下图所示：精品课程页面布局及内容设计要求为了方便学习者选择课程，系统向学习者推荐相关的课程，这些课程将构成为精品课程，在精品课程页面中显示输出。每个精品课程以大图片或者特别排版的区域显示，在其中显示出该课程的简要信息。如果精品课程数量比较多，则需要分页显示。另外，在每门课程的信息中，除了需要添加“咨询”、“购买”超链接之外，还需要提供一个“试听”超链接。购买的课程信息页面布局及内容设计要求在此页面中主要显示学习者所购买的各个课程相关的信息，从而形成“我的课程”信息页面，页面中的各个信息都动态地来自于后台的

42、数据库系统，并且采用条目形式的显示方式显示如下图所示的显示风格要求。每个条目显示一个课程相关的各个方面的信息，同样这些信息也来自于后台的数据管理系统。学习者可以点击某个课程信息项目中的“开始学习”超链接可以进入在线学习的状态系统显示在线学习的页面。在“我的课程”信息页面中，还应该增加一个“退选课程”的超链接，允许学习者在满足系统规定的退选课程的条件的情况下（比如，没有真正学习该课程）退选所购买的某个课程。收藏的课程信息页面布局及内容设计要求在此页面中主要显示学习者所收藏但还未正式购买的各个课程相关的信息，并且可以点击某个课程所对应的“购买”链接加入到购物车中购买。学习中心功能模块相关页面结构设

43、计不同状态课程信息显示页面在导航条中提供“学习中心”全局超链接的主要目的是方便学习者能够在登录系统后快速地进入学习状态，在此模块中主要显示某个学习者所选择购买的各个课程信息。但课程的信息需要分为三种不同的状态我正要学习的课程、我已经学完的课程、我已经过期的课程。这些信息的主要差别在“状态”栏中的状态信息不同。1、我正要学习的课程的信息显示要求每个课程信息以行列表格的方式显示，每行主要包括“课程名称”、“所属分类”（属于什么类别）、“学习进度”的百分比、“授课教师”（将上图中的“课程类型”改变为“授课教师” ）、“有效期”、“状态”。其中，要求将“课程名称”、“授课教师”需要设计为超链接，点击可

44、以查看相关的信息系统打开相关的页面。2、我已经学完的课程的信息显示要求3、我已经过期的课程的信息显示要求由于系统对某个课程在购买后必须要在一定的时间段内学习，如果超过该时间段，该课程将自动地过期作废。某个具体课程信息显示页面当用户（学习者）点击某个课程的名称时，系统将显示出该课程的详细信息课程本身的信息、学习状态的信息，并提供相关学习交互的超链接，如课程答疑等，具体的信息显示效果参考下面的截图。如果学习者点击其中的“开始学习课程内容”的超链接，系统将切换到在线学习的页面具体的要求可以参考后面的在线学习页面设计要求。某个课程的授课教师信息显示页面显示教师的工作经历登简介信息，页面显示的风格由美工

45、自己决定，没有什么特殊的要求。下图为一个教师介绍信息的页面截图。在线学习的页面结构设计1、在线学习的页面结构设计要求在此页面中可以播放学习者所选择的某个课程的视频，下图为“能力天空”网的某个课件播放的页面截图。2、在线学习相关的工具条为了方便学习者的课程学习，在此页面中需要提供两类工具条：（1）视频播放控制的工具条播放中的基本控制，如提供“开始”、“暂停”、“停止”、“快进”、“快退”、“重播”、“音量调节”、“全屏切换”等功能。下图为一个推荐的视频播放控制的工具条的显示效果截图。（2）学习及交流工具条课堂笔记、课程讲义、课程公告、课程讨论、课程答疑等功能项目。课堂笔记的页面结构设计学习者在学习过程中可以点击“课堂笔记”超链接，进入课堂笔记的页面。学习者可以新建一个笔记、并将所建立的笔记保存到数据库系统中。课程答疑的页面结构设计学习者可以在线向授课教师发送与正在学习的课程相关的各个问题信息，下图为“提交问题”的页面效果的截图，但最好应用JavaScript技术提供在线文字排版和编辑功能。提交课程答疑的问题页面结构设计可以参考下面的截图。访问者也可以查看历史答疑信息，下图为历史答疑信息显示列表：系统后台管理页面结构设计后台管理首页面结构设计要求1、后台管理首页面结构设计要求由于本系统的子系统比较多，因此相应的后台管理功能菜单项目也比较