北京大學教師教學發(fā)展中心網站的設計與實現(xiàn)

2017-11-16 02:04楊公義王肖群

軟件 2017年10期

關鍵詞：下拉菜單欄目科室

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

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

北京大學教師教學發(fā)展中心網站的設計與實現(xiàn)

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

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

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

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

0 引言

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

1 中心網站的系統(tǒng)設計

1.1 中心網站的五類用戶

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

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

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

圖1 中心網站用戶管理用例Fig.1 Central website user management use case

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

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

1.3 中心網站的功能模塊和操作流程

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

圖3 中心網站功能模塊Fig.3 Central website function module

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

中心網站的操作流程如圖4所示?？剖壹壊僮鲉T登錄系統(tǒng)后，可以新增、編輯、修改、刪除欄目信息，這時信息只有登錄用戶才能查看。科室級審核員登錄系統(tǒng)后，對信息進行審核同時可以上下移動調整信息，對于審核通過的信息才能在中心網站的相應欄目中顯示，但這里還不能在首頁模塊中顯示?？剖壹墝徍藛T可以推薦某條信息進入首頁某個模塊，中心主任級管理員登錄后批準某條被推薦的信息進入首頁某個模塊，對于審核通過的信息，會顯示在首頁的某個模塊中。

圖4 中心網站信息流程圖Fig.4 Central website information flowchart

2 中心網站的前臺界面與功能設計

中心網站的前臺首頁如圖5所示。頂部是網站banner和一級導航欄[4]。

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

圖5 中心網站前臺首頁Fig.5 Central website home page

重點項目的下方是關于我們，包括模塊 logo、中心簡介、地址、常用電話。

圖6 中心網站前臺非首頁模塊瀏覽頁Fig.6 Central website front non home module's browsing page

在圖6右側列表頁面中單擊某一行信息進入圖7內容頁。在圖 7中顯示了某個條信息的標題、瀏覽次數、更新時間、內容等。一級導航項或一級導航項的某個下拉菜單項，如果內容是單頁單擊后也會進入圖7所示。

鼠標放在一級欄目“教學支撐”上會出現(xiàn)13個下拉菜單項作為二級欄目，如圖8所示。在圖8的左側每個二級欄目會有多個三級欄目。圖8是在一級導航中單擊“教學支撐”下的二級導航“網絡教學平臺建設”，再單擊三級導航“北大教學網”之后的效果。

3 中心網站的后臺界面與功能設計

中心網站信息管理的后臺信息瀏覽頁如圖9所示[5]，圖 9是在左側單擊某個“通知公告”欄目后

在圖5中單擊某個首頁模塊的“更多”進入圖6所示的瀏覽頁。圖 6是在首頁中單擊“新聞”的“更多”進入的頁面。在圖6中左側的二級導航中“中心新聞”的底色變?yōu)樯睢Ｔ趫D6右側的列表頁中有功能全面的分頁功能。單擊某個一級欄目或一級欄目的某個下拉菜單項，可能進入圖6瀏覽頁或圖7內容頁。的效果，在瀏覽頁中可以新增、編輯、刪除、審核、預覽、上移下移、分頁瀏覽信息，分頁功能包括設置頁面大小、跳轉到某頁、第一頁、下頁、上頁、末頁。在圖9中單擊某條信息右側的“編輯”按鈕進入信息編輯頁如圖10所示。圖10以縱向視圖編輯各個字段。圖9是簡要顯示幾個最常用的元數據，圖10中顯示該模塊的全部元數據。模塊之間的元數據大同小異，比如“通知公告”包括的元數據為：標題、時間、內容、創(chuàng)建者用戶編號、摘要、關鍵詞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

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

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

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

片斷之中。這不利于代碼顯示和實現(xiàn)的分離，并且 JavaScript代碼的會有瀏覽器的兼容性問題。jQuery是一個優(yōu)秀的JavaScript代碼庫，利用它能實現(xiàn)寫更少的代碼，做更多的事情，并完美地解決了瀏覽器兼容性問題。

如圖5所示，一級導航條中共有5個一級欄目，其中“教學發(fā)展”和“教學支撐”兩個一級欄目實現(xiàn)技術類似，他們均帶有下拉菜單?！爸行氖醉摗?、“教學研究”、“聯(lián)系我們”三個一級欄目沒有下拉菜單，實現(xiàn)技術類似。因篇幅有限，下述關鍵代碼只給出了“中心首頁”和“教學發(fā)展”及下拉菜單的實現(xiàn)機制，并省略了中href=和target="_blank"的內容。