校園失物招領管理網頁的開發

張 瑾 馬 皎 史伶麗 丁學翠 董莉霞

（甘肅農業大學信息科學技術學院，甘肅蘭州730070）

0 引言

在大學校園內，丟失物品現象非常普遍，同學們經常會遺失課本、鑰匙、準考證、優盤、雨傘以及錢包等物品。失主丟失物品后往往苦于尋找，而現有失物招領處工作繁瑣且效率低，拾主撿到物品若希望歸還也很麻煩。所以，在學校的公共場所經常會有一些張貼尋物啟事的公告，一則影響校容，助長了亂張貼小廣告的風氣；二則效果不明顯，同時寫尋物啟事也會耗費失主的精力和財力。以上種種，給同學們的生活造成了極大的不便。

1 設計網頁風格

網頁主頁是一個網站的門面，是訪問者第一印象的來源，必然希望盡量給人留下好的印象。一般來說，好的網站應該給人這樣的感覺：干凈整潔、條理清楚、專業水準、引人入勝。另外，在網頁設計時要有明確的主題。因此，主題鮮明是網頁設計的前提，不同的主題應有不同的設計風格，不同的設計風格，給人以不同的視覺效果。網頁設計屬視覺設計領域，它的最終目的是使網頁內容清晰、具有條理性，并達到最佳的視覺效果[1]。其設計不但要單純、簡練、清晰和準確，而且在強調藝術性的同時，更應注重通過獨特的風格和強烈的視覺沖擊力，來鮮明地突出設計主題，同時要使網頁從形式上給人良好的印象。鮮明的突出主題可以通過對網頁的空間層次、主從關系、視覺秩序及彼此間邏輯關系的把握運用來實現，合理布局、調整主次的位置關系、突出主題，能讓瀏覽者在短時間內過目不忘、回味無窮。

2 設計首頁菜單

設計失物招領管理網頁，首先要設計好首頁的菜單。在網頁設計中，首頁菜單的設計應便于用戶在瀏覽網站時一目了然，方便地使用網站。本站的首頁菜單采用了常見的導航條導航形式，即采用了Spry選項卡式面板導航，瀏覽者可以通過單擊面板上需要訪問的選項卡來顯示相應內容。將插入點定位于網頁要插入Spry選項卡式面板的位置，插入Spry選項卡式面板，選擇水平布局。點擊Spry菜單欄左上角的藍色選擇區域，就出現了相關屬性。根據需要，我們把項目1、項目2、項目3、項目4、項目5和項目6文本框中內容分別修改為“首頁”“失物信息”“招領啟事”“登記失物”“登記招領”和“關于我們”。最終本網頁包括六個模塊，結構如圖1所示。

圖1 網頁模塊結構圖

3 二級欄目網頁和內容網頁的制作

3.1 制作二級欄目頁面模板

打開Dreamweaver軟件，選擇“新建”—“空模板”—“HTML模板”，布局選擇<無>，點擊“創建”。然后根據普通網頁的制作方法來創建模板。模板做好以后還要確定模板的可編輯區域，即在以后的網頁制作中利用該模板時可以編輯的內容。選中想要編輯的各個表格，“插入”中選擇“模板”—“可編輯區域”，把名稱改為“EditRegion1”“EditRegion2”“EditRegion3”等等，點擊“確定”。在以后套用此模板時這些可編輯區域是可以進行更改的，而其他區域不可更改。點擊“保存”[2]。

3.2 利用模板制作各個二級欄目頁面

模板制作好以后，我們在本模板的基礎上來制作具體的二級欄目網頁。選擇菜單欄當中的“文件”，選擇“新建”—“空白頁”，頁面類型選擇“HTML模板”，布局選擇<無>，點擊“創建”。接著在菜單欄中選擇“修改”，選擇最后一個“模板”選項，最后在其二級菜單欄選項中選擇“應用模板到頁”，然后在可編輯區域添加想添加的內容，最后保存為后綴為“.html”的文件[3]。

4 安裝WampServer并配置

WampServer是指Windows下的Apache+Mysql+PHP，就是在Windows下將Apache+PHP+MySQL集成，可以快速安裝配置環境，操作簡單、界面友好。WampServer中PHP是一種高效的動態腳本編程語言，具有跨平臺、強大的數據庫支持等優點；MySQL是一個免費、快速、支持多線程/多用戶的數據庫服務器，并且PHP內置了對MySQL很好的支持，同時PHP與MySQL都是免費的，是動態網站開發的最佳組合。WAMP的安裝過程：

（1）從任意搜索引擎上下載到程序安裝包，雙擊下載，當前版本WampServer集成了Apache、PHP、MySQL、Phpmyadmin、SqlBuddy、XDebug。

（2）運行安裝包：①彈出安裝向導。點擊next進行下一步即可；②安裝協議，選擇I accept the agreement，繼續點擊next，進行下一步；③選擇安裝目錄，默認是c:wamp，也根據自己需要設置在其他盤；④詢問是否在快速啟動欄和桌面創建快捷方式，選好之后繼續點擊next進行下一步；⑤確認設置是否正確，點擊install開始安裝；⑥安裝中……；⑦選擇WampServer的默認文本編輯器（程序默認的是notepad文本編輯器），一直點擊next，直至完成安裝。安裝完畢，點擊Finish完成安裝。

（3）安裝完畢之后，右下角的任務欄會多出一個WAMP的小圖標，本次安裝的WAMP版本為WAMP5 1.7.4，成功啟動后鼠標右鍵點擊系統右下角的扇形小圖標，依次選擇Language-chinese，即可設置為簡體中文[4]。

（4）在瀏覽器里輸入http://localhost或http://127.0.0.1，按回車測試是否安裝成功。

（5）配置PHP、MySQL和Apache。

安裝好WAMP之后并不能馬上使用，還要配置PHP、MySQL和Apache，需分別點擊localhost和phpmyadmin等進行相應設置。其中MySQL數據庫用戶的密碼需要修改（安裝完默認沒有密碼），可使用root用戶（數據庫默認用戶）登錄phpmyadmin數據管理器修改用戶密碼。最后點擊重新啟動所有服務，配置完成。

5 基于PHP和MySQL技術制作失物招領網頁

5.1 如何使用數據庫管理

根據MySQL技術的數據庫管理功能的使用方法，應該針對網站數據的存放和應用特點，確保數據庫的準確性、融合性、有效性等，采取適當措施使數據庫檢索技術更加優良，并使檢索數據的效率變得更高，網站構建的整體質量取決于數據庫設計結構是否合理。在數據庫系統中把各種各樣不一樣類型的數據資源依照一定的類別進行分類處理和儲放，同時將各種文檔的信息加注相應的日期、作者、預覽內容等信息，主要的數據操作功能有編輯、錄入、存儲、刪除、復制等等。還有，應該保證數據庫的完好性和應時性，網站管理人員應該及時對數據進行更新和存儲，要嚴格遵守相應的規則，為了提高系統的可用性和災難可恢復性，應當在特定時期進行數據備份，以防數據丟失，數據庫的管理權限一般為網站管理人員[5-6]。

5.2 如何使用資源共享功能

資源共享分為兩個部分，分別是站內資源共享和站外資源共享。站內資源共享包括管理人員錄入的資源數據庫和上傳的相關資料等，站外資源是選擇專門的參考網站，要注意的是，應按照所需內容進行選擇。在資源共享功能的使用中，資源使用效率這一問題不容忽視，應著重提高使用效率，利用站內搜索技術和互聯網搜索引擎技術提供優質、完善的資源環境。

6 網頁的測試與內容的發布

6.1 網頁的測試

網頁制作完成以后，需要經過反復的測試、審核、修改，直到確認無誤后才可正式發布。

（1）檢查瀏覽器兼容性。Dreamweaver CS6提供的“瀏覽器兼容性檢查”功能可以幫助設計者在瀏覽器中查找有問題的HTML和CSS部分，并提示設計者哪些標簽屬性在瀏覽器中可能出現問題，以便對文檔進行修改。以下是操作流程：把Dreamweaver CS6打開，選擇菜單欄當中的窗口“菜單”，選擇“結果”，在二級菜單中選擇“瀏覽器兼容性”，這時點擊右下角屬性面板中的綠色按鈕，選擇“檢查瀏覽器兼容性”。

（2）對鏈接的測試。為避免出現無效鏈接的尷尬，樹立良好的網站形象，無論是發布前的本地測試，還是發布后的遠程測試，都應該認真檢查是否存在失效鏈接，以便及時修改。操作流程同樣是選擇菜單欄當中的窗口“菜單”和“結果”，然后在二級菜單中選擇“鏈接檢查器”，檢查鏈接。

6.2 站點的上傳

網站制作完成后，需要上傳至遠端服務器，才能讓用戶瀏覽。另外在站點上傳之前，需在網上注冊域名，并申請虛擬空間，最后再借助軟件將網站上傳。站點上傳就是將通過測試后的網頁復制到遠程Web服務器。上傳站點時，通過Dreamweaver的站點管理器進行。

7 結語

綜上所述，本文介紹了基于PHP和MySQL技術的校園失物招領管理網頁的設計與實現。此項目實施的前提是保證項目的公益化而非商業化，此項目運行后，希望同學們丟了東西之后不用耗費自己的精力張貼各種尋物啟事，而是登上我們的網頁動一動手指，依靠全校學生的力量就能夠很快地找到所失之物，從而減少經濟及精神損失，規范學校的校風校貌，有利于創建一個“無遺”的和諧校園。