北京大学教师教学发展中心网站的设计与实现

2017-11-16杨公义王肖群

软件 2017年10期

关键词：下拉菜单栏目科室

杨公义，曾腾，王肖群，何山

（北京大学教师教学发展中心，北京 100871）

北京大学教师教学发展中心网站的设计与实现

杨公义，曾腾，王肖群，何山

（北京大学教师教学发展中心，北京 100871）

该研究设计和实现了北京大学教师教学发展中心网站。首先，论述了中心网站的系统设计,包括五类用户、系统总体用例、功能模块、操作流程。其次，论述了中心网站的前台和后台的界面与功能设计。最后，利用jQuery+css+div技术实现了带二级下拉菜单的一级导航，实现了前台代码的显示与实现的分离，减小了代码冗余，并完美地解决了浏览器兼容性问题。

系统设计；系统开发；jQuery+css+div技术；下拉菜单

0 引言

北京大学教师教学发展中心（以下简称：教发中心）2015年成立，主要工作职责是：教学支撑服务、教师教学能力提高和教育教学改革发展研究。中心紧紧围绕教育教学改革和提高人才培养质量，做好教学支撑服务，推进教师培训、教学咨询、教学研究等工作的常态化、制度化，切实提高教师教学能力和水平。教发中心在充分进行国际国内调研的基础上设计和开发了教发中心网站（网址为 cetl.pku. edu.cn简称：中心网站）。

1 中心网站的系统设计

1.1 中心网站的五类用户

中心网站的用户有五类[1]：超级管理员、中心主任级管理员、科室级审核员、科室级操作员、前台访客，这五类用户的权限是递减的。用户管理用例如图1所示，超级管理员管理中心主任级管理员，中心主任级管理员管理科室级审核员和科室级操作员。用户管理的功能包括新增用户、编辑用户、删除用户、查询用户、分页浏览用户。用户表的字段包括：用户名、时间、创建者用户编号、创建者院系编号、角色、真实姓名、学期、院系编号、密码遗失提示问题、提示问题答案、密码、创建者院系名称、联系电话、电子邮箱、二级院系编号、审核状态（待审核、审核通过、审核未过）。

1.2 系统总体用例

系统总体用例如图 2所示[2]，前台访客只能访问中心网站中已经审核发布的信息。对于在中心网站中未经审核的信息，只能被登录用户访问。中心网站的登录用户可以进行的共同操作包括登录、个人资料编辑、我的云盘。登录用例需要输入用户名、密码、验证码。个人资料编辑用例需要输入的元数据为：用户名、真实姓名、密码、再次输入密码、联系电话、电子邮箱。我的云盘为用户供了一个存放资源的网上空间，元数据包括：标题、时间、内容、视频地址、标题URL、点标题开什么（下拉项为：内容、附件、标题URL、视频下载、视频播放）、附件。

图1 中心网站用户管理用例Fig.1 Central website user management use case

图2 中心网站系统总体用例Fig.2 Central website system overall use case

中心主任级管理员、科室级审核员、科室级操作员所能进行的共同用例为信息管理，他们所能管理的模块数量不同，他们操作不同模块时有权编辑的属性列不同。信息管理用例的全部的操作包括：新增、编辑、删除、查询、分页浏览、发布审核、推荐某条信息进入首页某个模块、批准某条信息进入首页模块。科室级审核员比科室级操作员增加的权限为：发布审核、推荐某条信息进入首页某个模块。中心主任级管理员比科室级审核员增加的权限为：管理科室级审核员和科室级操作员两类下级账户，批准某条信息进入首页模块、首页的系统配置。

1.3 中心网站的功能模块和操作流程

中心网站的功能模块如图3所示。系统包括首页模块和一级导航模块。

图3 中心网站功能模块Fig.3 Central website function module

一级导航模块包括：教学发展、教学研究、教学支撑、联系我们。教学发展的下拉项包括：服务、项目、资源、政策、活动。这些项目链接进入专题网站。教学支撑的下拉项包括：网络教学平台建设、精品开放课程支持、教学课件研究与应用、教学促进研究与通讯、服务器运维与网络管理、应用系统开发与优化、新技术研究与教学支持、多媒体教室建设、教室运行和管理、有线电视维护、教学资源建设、教学媒体制作、演播室建设运维。

中心网站的操作流程如图4所示。科室级操作员登录系统后，可以新增、编辑、修改、删除栏目信息，这时信息只有登录用户才能查看。科室级审核员登录系统后，对信息进行审核同时可以上下移动调整信息，对于审核通过的信息才能在中心网站的相应栏目中显示，但这里还不能在首页模块中显示。科室级审核员可以推荐某条信息进入首页某个模块，中心主任级管理员登录后批准某条被推荐的信息进入首页某个模块，对于审核通过的信息，会显示在首页的某个模块中。

图4 中心网站信息流程图Fig.4 Central website information flowchart

2 中心网站的前台界面与功能设计

中心网站的前台首页如图5所示。顶部是网站banner和一级导航栏[4]。

一级导航栏中有4个一级栏目。一级栏目教学发展有5个下拉项。一级栏目教学支撑有13个下拉菜单项，下拉菜单项的内容当鼠标放到这两个带有下拉箭头的一级栏目上会出现下拉菜单项，下拉菜单项的内容如图3所示。一级导航下面是方形首页slideshow，这里显示6条信息，每条信息显示了附件图片、日期、标题、摘要。方形首页slideshow的右侧显示了2条新闻和3条公告，每条新闻显示了日期、标题、摘要。每条公告显示了日期和标题。重点项目栏目中有10个重点项目，项目名称如图3所示。鼠标放在每个重点项目的图片上会出现一个鼠标滑过切换图片的动画，交换后的图片显示了该重点项目的简介，单击之后进入相应重点项目专题。

图5 中心网站前台首页Fig.5 Central website home page

重点项目的下方是关于我们，包括模块 logo、中心简介、地址、常用电话。

图6 中心网站前台非首页模块浏览页Fig.6 Central website front non home module's browsing page

在图6右侧列表页面中单击某一行信息进入图7内容页。在图 7中显示了某个条信息的标题、浏览次数、更新时间、内容等。一级导航项或一级导航项的某个下拉菜单项，如果内容是单页单击后也会进入图7所示。

鼠标放在一级栏目“教学支撑”上会出现13个下拉菜单项作为二级栏目，如图8所示。在图8的左侧每个二级栏目会有多个三级栏目。图8是在一级导航中单击“教学支撑”下的二级导航“网络教学平台建设”，再单击三级导航“北大教学网”之后的效果。

3 中心网站的后台界面与功能设计

中心网站信息管理的后台信息浏览页如图9所示[5]，图 9是在左侧单击某个“通知公告”栏目后

在图5中单击某个首页模块的“更多”进入图6所示的浏览页。图 6是在首页中单击“新闻”的“更多”进入的页面。在图6中左侧的二级导航中“中心新闻”的底色变为深。在图6右侧的列表页中有功能全面的分页功能。单击某个一级栏目或一级栏目的某个下拉菜单项，可能进入图6浏览页或图7内容页。的效果，在浏览页中可以新增、编辑、删除、审核、预览、上移下移、分页浏览信息，分页功能包括设置页面大小、跳转到某页、第一页、下页、上页、末页。在图9中单击某条信息右侧的“编辑”按钮进入信息编辑页如图10所示。图10以纵向视图编辑各个字段。图9是简要显示几个最常用的元数据，图10中显示该模块的全部元数据。模块之间的元数据大同小异，比如“通知公告”包括的元数据为：标题、时间、内容、创建者用户编号、摘要、关键词1、关键词2、审核、审核意见建议、置顶等、首页模块、点标题开什么、批准上主页、附图。

图7 中心网站前台三级内容页Fig.7 Central website third level content page

图8 中心网站教学支撑下拉菜单及内容页Fig.8 Central website teaching support drop-down menu and content page

图9 中心网站后台信息浏览页Fig.9 Central website backstage information browsing page

图10 中心网站后台信息编辑页Fig.10 Central website backstage information edit page

所有模块的显示风格和操作模式是相同的，只是每个模块的字段不同，字段的不同可能是因为模块的不同，也可能是登录用户的权限不同。模块之间的元数据大同小异，大部分模块包括的元数据为：标题、时间、内容、创建者用户编号、摘要、关键词1、关键词2、审核、审核意见建议、首页模块、点标题开什么、批准上主页、附图。这些元数据中有几个需要说明如下，审核下拉选项为：待审核、审核通过、审核未过。当下拉框中选择审核未过时，需要在审核意见建议元数据中输入理由。首页模块下拉框用于推荐本条信息到首页的某个模块中。批准上主页下拉框中，可以允许所推荐的信息在首页的某个模块中显示。点标题开什么下拉框的内容为：内容、附件、标题 URL；各下拉项的含义为：“内容”表示点击标题时显示的网页中的内容来自上述内容元数据，“附件”表示点击标题时超级链接到所上传的附件，“标题 URL”表示点击标题时超级链接到一个用户输入的URL。

4 利用jQuery+css+div技术实现了带二级下拉菜单的一级导航

传统的带二级下拉菜单的一级导航需要编写大量的JavaScript代码，并且JavaScript代码需要嵌入在 html的

片断之中。这不利于代码显示和实现的分离，并且 JavaScript代码的会有浏览器的兼容性问题。jQuery是一个优秀的JavaScript代码库，利用它能实现写更少的代码，做更多的事情，并完美地解决了浏览器兼容性问题。

如图5所示，一级导航条中共有5个一级栏目，其中“教学发展”和“教学支撑”两个一级栏目实现技术类似，他们均带有下拉菜单。“中心首页”、“教学研究”、“联系我们”三个一级栏目没有下拉菜单，实现技术类似。因篇幅有限，下述关键代码只给出了“中心首页”和“教学发展”及下拉菜单的实现机制，并省略了中href=和target="_blank"的内容。