北京大學(xué)教師教學(xué)發(fā)展中心網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

楊公義，曾 騰，王肖群，何 山

（北京大學(xué) 教師教學(xué)發(fā)展中心，北京 100871）

北京大學(xué)教師教學(xué)發(fā)展中心網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)

楊公義，曾 騰，王肖群，何 山

（北京大學(xué) 教師教學(xué)發(fā)展中心，北京 100871）

該研究設(shè)計(jì)和實(shí)現(xiàn)了北京大學(xué)教師教學(xué)發(fā)展中心網(wǎng)站。首先，論述了中心網(wǎng)站的系統(tǒng)設(shè)計(jì),包括五類用戶、系統(tǒng)總體用例、功能模塊、操作流程。其次，論述了中心網(wǎng)站的前臺(tái)和后臺(tái)的界面與功能設(shè)計(jì)。最后，利用jQuery+css+div技術(shù)實(shí)現(xiàn)了帶二級(jí)下拉菜單的一級(jí)導(dǎo)航，實(shí)現(xiàn)了前臺(tái)代碼的顯示與實(shí)現(xiàn)的分離，減小了代碼冗余，并完美地解決了瀏覽器兼容性問題。

系統(tǒng)設(shè)計(jì)；系統(tǒng)開發(fā)；jQuery+css+div技術(shù)；下拉菜單

0 引言

北京大學(xué)教師教學(xué)發(fā)展中心（以下簡(jiǎn)稱：教發(fā)中心）2015年成立，主要工作職責(zé)是：教學(xué)支撐服務(wù)、教師教學(xué)能力提高和教育教學(xué)改革發(fā)展研究。中心緊緊圍繞教育教學(xué)改革和提高人才培養(yǎng)質(zhì)量，做好教學(xué)支撐服務(wù)，推進(jìn)教師培訓(xùn)、教學(xué)咨詢、教學(xué)研究等工作的常態(tài)化、制度化，切實(shí)提高教師教學(xué)能力和水平。教發(fā)中心在充分進(jìn)行國際國內(nèi)調(diào)研的基礎(chǔ)上設(shè)計(jì)和開發(fā)了教發(fā)中心網(wǎng)站（網(wǎng)址為 cetl.pku. edu.cn簡(jiǎn)稱：中心網(wǎng)站）。

1 中心網(wǎng)站的系統(tǒng)設(shè)計(jì)

1.1 中心網(wǎng)站的五類用戶

中心網(wǎng)站的用戶有五類[1]：超級(jí)管理員、中心主任級(jí)管理員、科室級(jí)審核員、科室級(jí)操作員、前臺(tái)訪客，這五類用戶的權(quán)限是遞減的。用戶管理用例如圖1所示，超級(jí)管理員管理中心主任級(jí)管理員，中心主任級(jí)管理員管理科室級(jí)審核員和科室級(jí)操作員。用戶管理的功能包括新增用戶、編輯用戶、刪除用戶、查詢用戶、分頁瀏覽用戶。用戶表的字段包括：用戶名、時(shí)間、創(chuàng)建者用戶編號(hào)、創(chuàng)建者院系編號(hào)、角色、真實(shí)姓名、學(xué)期、院系編號(hào)、密碼遺失提示問題、提示問題答案、密碼、創(chuàng)建者院系名稱、聯(lián)系電話、電子郵箱、二級(jí)院系編號(hào)、審核狀態(tài)（待審核、審核通過、審核未過）。

1.2 系統(tǒng)總體用例

系統(tǒng)總體用例如圖 2所示[2]，前臺(tái)訪客只能訪問中心網(wǎng)站中已經(jīng)審核發(fā)布的信息。對(duì)于在中心網(wǎng)站中未經(jīng)審核的信息，只能被登錄用戶訪問。中心網(wǎng)站的登錄用戶可以進(jìn)行的共同操作包括登錄、個(gè)人資料編輯、我的云盤。登錄用例需要輸入用戶名、密碼、驗(yàn)證碼。個(gè)人資料編輯用例需要輸入的元數(shù)據(jù)為：用戶名、真實(shí)姓名、密碼、再次輸入密碼、聯(lián)系電話、電子郵箱。我的云盤為用戶供了一個(gè)存放資源的網(wǎng)上空間，元數(shù)據(jù)包括：標(biāo)題、時(shí)間、內(nèi)容、視頻地址、標(biāo)題URL、點(diǎn)標(biāo)題開什么（下拉項(xiàng)為：內(nèi)容、附件、標(biāo)題URL、視頻下載、視頻播放）、附件。

圖1 中心網(wǎng)站用戶管理用例Fig.1 Central website user management use case

圖2 中心網(wǎng)站系統(tǒng)總體用例Fig.2 Central website system overall use case

中心主任級(jí)管理員、科室級(jí)審核員、科室級(jí)操作員所能進(jìn)行的共同用例為信息管理，他們所能管理的模塊數(shù)量不同，他們操作不同模塊時(shí)有權(quán)編輯的屬性列不同。信息管理用例的全部的操作包括：新增、編輯、刪除、查詢、分頁瀏覽、發(fā)布審核、推薦某條信息進(jìn)入首頁某個(gè)模塊、批準(zhǔn)某條信息進(jìn)入首頁模塊?？剖壹?jí)審核員比科室級(jí)操作員增加的權(quán)限為：發(fā)布審核、推薦某條信息進(jìn)入首頁某個(gè)模塊。中心主任級(jí)管理員比科室級(jí)審核員增加的權(quán)限為：管理科室級(jí)審核員和科室級(jí)操作員兩類下級(jí)賬戶，批準(zhǔn)某條信息進(jìn)入首頁模塊、首頁的系統(tǒng)配置。

1.3 中心網(wǎng)站的功能模塊和操作流程

中心網(wǎng)站的功能模塊如圖3所示。系統(tǒng)包括首頁模塊和一級(jí)導(dǎo)航模塊。

圖3 中心網(wǎng)站功能模塊Fig.3 Central website function module

首頁模塊[3]包括重點(diǎn)項(xiàng)目、新聞、公告、關(guān)于我們、版權(quán)所有、方形首頁slideshow。重點(diǎn)項(xiàng)目包括：教學(xué)網(wǎng)、助教培訓(xùn)、青年教師教學(xué)培訓(xùn)、MOOC、東西部高校課程共享聯(lián)盟、北大公開課、網(wǎng)絡(luò)課程與微課大賽、北大講座網(wǎng)、教室運(yùn)行、教學(xué)沙龍。關(guān)于我們包括：中心簡(jiǎn)介、地址、常用電話。

一級(jí)導(dǎo)航模塊包括：教學(xué)發(fā)展、教學(xué)研究、教學(xué)支撐、聯(lián)系我們。教學(xué)發(fā)展的下拉項(xiàng)包括：服務(wù)、項(xiàng)目、資源、政策、活動(dòng)。這些項(xiàng)目鏈接進(jìn)入專題網(wǎng)站。教學(xué)支撐的下拉項(xiàng)包括：網(wǎng)絡(luò)教學(xué)平臺(tái)建設(shè)、精品開放課程支持、教學(xué)課件研究與應(yīng)用、教學(xué)促進(jìn)研究與通訊、服務(wù)器運(yùn)維與網(wǎng)絡(luò)管理、應(yīng)用系統(tǒng)開發(fā)與優(yōu)化、新技術(shù)研究與教學(xué)支持、多媒體教室建設(shè)、教室運(yùn)行和管理、有線電視維護(hù)、教學(xué)資源建設(shè)、教學(xué)媒體制作、演播室建設(shè)運(yùn)維。

中心網(wǎng)站的操作流程如圖4所示?？剖壹?jí)操作員登錄系統(tǒng)后，可以新增、編輯、修改、刪除欄目信息，這時(shí)信息只有登錄用戶才能查看?？剖壹?jí)審核員登錄系統(tǒng)后，對(duì)信息進(jìn)行審核同時(shí)可以上下移動(dòng)調(diào)整信息，對(duì)于審核通過的信息才能在中心網(wǎng)站的相應(yīng)欄目中顯示，但這里還不能在首頁模塊中顯示。科室級(jí)審核員可以推薦某條信息進(jìn)入首頁某個(gè)模塊，中心主任級(jí)管理員登錄后批準(zhǔn)某條被推薦的信息進(jìn)入首頁某個(gè)模塊，對(duì)于審核通過的信息，會(huì)顯示在首頁的某個(gè)模塊中。

圖4 中心網(wǎng)站信息流程圖Fig.4 Central website information flowchart

2 中心網(wǎng)站的前臺(tái)界面與功能設(shè)計(jì)

中心網(wǎng)站的前臺(tái)首頁如圖5所示。頂部是網(wǎng)站banner和一級(jí)導(dǎo)航欄[4]。

一級(jí)導(dǎo)航欄中有4個(gè)一級(jí)欄目。一級(jí)欄目教學(xué)發(fā)展有5個(gè)下拉項(xiàng)。一級(jí)欄目教學(xué)支撐有13個(gè)下拉菜單項(xiàng)，下拉菜單項(xiàng)的內(nèi)容當(dāng)鼠標(biāo)放到這兩個(gè)帶有下拉箭頭的一級(jí)欄目上會(huì)出現(xiàn)下拉菜單項(xiàng)，下拉菜單項(xiàng)的內(nèi)容如圖3所示。一級(jí)導(dǎo)航下面是方形首頁slideshow，這里顯示6條信息，每條信息顯示了附件圖片、日期、標(biāo)題、摘要。方形首頁slideshow的右側(cè)顯示了2條新聞和3條公告，每條新聞顯示了日期、標(biāo)題、摘要。每條公告顯示了日期和標(biāo)題。重點(diǎn)項(xiàng)目欄目中有10個(gè)重點(diǎn)項(xiàng)目，項(xiàng)目名稱如圖3所示。鼠標(biāo)放在每個(gè)重點(diǎn)項(xiàng)目的圖片上會(huì)出現(xiàn)一個(gè)鼠標(biāo)滑過切換圖片的動(dòng)畫，交換后的圖片顯示了該重點(diǎn)項(xiàng)目的簡(jiǎn)介，單擊之后進(jìn)入相應(yīng)重點(diǎn)項(xiàng)目專題。

圖5 中心網(wǎng)站前臺(tái)首頁Fig.5 Central website home page

重點(diǎn)項(xiàng)目的下方是關(guān)于我們，包括模塊 logo、中心簡(jiǎn)介、地址、常用電話。

圖6 中心網(wǎng)站前臺(tái)非首頁模塊瀏覽頁Fig.6 Central website front non home module's browsing page

在圖6右側(cè)列表頁面中單擊某一行信息進(jìn)入圖7內(nèi)容頁。在圖 7中顯示了某個(gè)條信息的標(biāo)題、瀏覽次數(shù)、更新時(shí)間、內(nèi)容等。一級(jí)導(dǎo)航項(xiàng)或一級(jí)導(dǎo)航項(xiàng)的某個(gè)下拉菜單項(xiàng)，如果內(nèi)容是單頁單擊后也會(huì)進(jìn)入圖7所示。

鼠標(biāo)放在一級(jí)欄目“教學(xué)支撐”上會(huì)出現(xiàn)13個(gè)下拉菜單項(xiàng)作為二級(jí)欄目，如圖8所示。在圖8的左側(cè)每個(gè)二級(jí)欄目會(huì)有多個(gè)三級(jí)欄目。圖8是在一級(jí)導(dǎo)航中單擊“教學(xué)支撐”下的二級(jí)導(dǎo)航“網(wǎng)絡(luò)教學(xué)平臺(tái)建設(shè)”，再單擊三級(jí)導(dǎo)航“北大教學(xué)網(wǎng)”之后的效果。

3 中心網(wǎng)站的后臺(tái)界面與功能設(shè)計(jì)

中心網(wǎng)站信息管理的后臺(tái)信息瀏覽頁如圖9所示[5]，圖 9是在左側(cè)單擊某個(gè)“通知公告”欄目后

圖5頁面最下方是電教樓的縮略圖、版權(quán)所有和5個(gè)相關(guān)鏈接。

在圖5中單擊某個(gè)首頁模塊的“更多”進(jìn)入圖6所示的瀏覽頁。圖 6是在首頁中單擊“新聞”的“更多”進(jìn)入的頁面。在圖6中左側(cè)的二級(jí)導(dǎo)航中“中心新聞”的底色變?yōu)樯?。在圖6右側(cè)的列表頁中有功能全面的分頁功能。單擊某個(gè)一級(jí)欄目或一級(jí)欄目的某個(gè)下拉菜單項(xiàng)，可能進(jìn)入圖6瀏覽頁或圖7內(nèi)容頁。的效果，在瀏覽頁中可以新增、編輯、刪除、審核、預(yù)覽、上移下移、分頁瀏覽信息，分頁功能包括設(shè)置頁面大小、跳轉(zhuǎn)到某頁、第一頁、下頁、上頁、末頁。在圖9中單擊某條信息右側(cè)的“編輯”按鈕進(jìn)入信息編輯頁如圖10所示。圖10以縱向視圖編輯各個(gè)字段。圖9是簡(jiǎn)要顯示幾個(gè)最常用的元數(shù)據(jù)，圖10中顯示該模塊的全部元數(shù)據(jù)。模塊之間的元數(shù)據(jù)大同小異，比如“通知公告”包括的元數(shù)據(jù)為：標(biāo)題、時(shí)間、內(nèi)容、創(chuàng)建者用戶編號(hào)、摘要、關(guān)鍵詞1、關(guān)鍵詞2、審核、審核意見建議、置頂?shù)取⑹醉撃K、點(diǎn)標(biāo)題開什么、批準(zhǔn)上主頁、附圖。

圖7 中心網(wǎng)站前臺(tái)三級(jí)內(nèi)容頁Fig.7 Central website third level content page

圖8 中心網(wǎng)站教學(xué)支撐下拉菜單及內(nèi)容頁Fig.8 Central website teaching support drop-down menu and content page

圖9 中心網(wǎng)站后臺(tái)信息瀏覽頁Fig.9 Central website backstage information browsing page

圖10 中心網(wǎng)站后臺(tái)信息編輯頁Fig.10 Central website backstage information edit page

所有模塊的顯示風(fēng)格和操作模式是相同的，只是每個(gè)模塊的字段不同，字段的不同可能是因?yàn)槟K的不同，也可能是登錄用戶的權(quán)限不同。模塊之間的元數(shù)據(jù)大同小異，大部分模塊包括的元數(shù)據(jù)為：標(biāo)題、時(shí)間、內(nèi)容、創(chuàng)建者用戶編號(hào)、摘要、關(guān)鍵詞1、關(guān)鍵詞2、審核、審核意見建議、首頁模塊、點(diǎn)標(biāo)題開什么、批準(zhǔn)上主頁、附圖。這些元數(shù)據(jù)中有幾個(gè)需要說明如下，審核下拉選項(xiàng)為：待審核、審核通過、審核未過。當(dāng)下拉框中選擇審核未過時(shí)，需要在審核意見建議元數(shù)據(jù)中輸入理由。首頁模塊下拉框用于推薦本條信息到首頁的某個(gè)模塊中。批準(zhǔn)上主頁下拉框中，可以允許所推薦的信息在首頁的某個(gè)模塊中顯示。點(diǎn)標(biāo)題開什么下拉框的內(nèi)容為：內(nèi)容、附件、標(biāo)題 URL；各下拉項(xiàng)的含義為：“內(nèi)容”表示點(diǎn)擊標(biāo)題時(shí)顯示的網(wǎng)頁中的內(nèi)容來自上述內(nèi)容元數(shù)據(jù)，“附件”表示點(diǎn)擊標(biāo)題時(shí)超級(jí)鏈接到所上傳的附件，“標(biāo)題 URL”表示點(diǎn)擊標(biāo)題時(shí)超級(jí)鏈接到一個(gè)用戶輸入的URL。

4 利用jQuery+css+div技術(shù)實(shí)現(xiàn)了帶二級(jí)下拉菜單的一級(jí)導(dǎo)航

傳統(tǒng)的帶二級(jí)下拉菜單的一級(jí)導(dǎo)航需要編寫大量的JavaScript代碼，并且JavaScript代碼需要嵌入在 html的