1、<p><b>　　本科畢業(yè)論文</b></p><p><b>　　（20 屆）</b></p><p>　　機械類實驗管理中心平臺設(shè)計</p><p><b>　　誠信聲明</b></p><p>　　本人鄭重聲明：本論文及其研究工作是本人在指導(dǎo)教師的指導(dǎo)下獨立

2、完成的，在完成論文時所利用的一切資料均已在參考文獻中列出。</p><p>　　本人簽名： 年 月 日</p><p><b>　　畢業(yè)設(shè)計任務(wù)書</b></p><p>　　設(shè)計題目： 機械類實驗管理中心平臺設(shè)計

3、 </p><p><b>　　1．課題意義及目標</b></p><p>　　當(dāng)前，學(xué)校學(xué)生人數(shù)不斷增加，實驗室基礎(chǔ)設(shè)施的建設(shè)不斷擴大，實驗室教學(xué)規(guī)模不斷擴大，為了更好的進行信息的統(tǒng)計和處理，更好的為實驗教學(xué)和科研服務(wù)，建設(shè)一個信息化平臺的實驗管理平臺是很有必要的。</p><p>　　設(shè)計并建立一

4、個機械類實驗管理中心平臺，對信息進行更好的統(tǒng)計和處理，方便數(shù)據(jù)的管理，提高實驗室管理的工作效率，更好的為學(xué)生的成才及教師的發(fā)展提供更好的服務(wù)。</p><p><b>　　2．主要任務(wù)</b></p><p>　　(1)收集相關(guān)材料,請教老師，學(xué)習(xí)DREAMWEAVER的使用方法，并熟悉掌握。</p><p>　　(2)運用DREAMWEAVE

5、R設(shè)計網(wǎng)站，實現(xiàn)對機械實驗樓實驗的管理。</p><p>　　(3)對建立的網(wǎng)頁進行實驗</p><p><b>　　3．主要參考資料</b></p><p>　　[1] 朱世坤. 開放性實驗教學(xué)模式的探索與實踐[J]. 大學(xué)物理實驗, 2007</p><p>　　[2] 李俊杰. 高校實驗建設(shè)的實踐探索[J]. 襄樊

6、職業(yè)技術(shù)學(xué)院報, 2006</p><p>　　[3] 董國強. 高校開放性實驗室建設(shè)探討[J]. 實驗技術(shù)與管理, 2007</p><p><b>　　4．進度安排</b></p><p>　　審核人： 年 月 日</p><p>　　機械類實驗管理中心平臺設(shè)計<

7、;/p><p>　　摘 要：當(dāng)今時代是一個信息化的時代，傳統(tǒng)的手工記錄已經(jīng)被計算機的數(shù)據(jù)處理所取代，所以使實驗室管理中心網(wǎng)頁化已成為必然趨勢。首先運用Photoshop軟件設(shè)計制作了網(wǎng)站所用圖片，詳細說明了圖片的制作過程。而后對Dreamweaver軟件進行了簡要的說明，并使用Dreamweaver軟件對實驗管理中心的平臺進行了設(shè)計制作，實現(xiàn)了網(wǎng)站功能。通過對整個網(wǎng)站的設(shè)計，熟悉的掌握了一些HTML相關(guān)的知識和制作

8、網(wǎng)頁的技巧。</p><p>　　關(guān)鍵詞：圖片處理，網(wǎng)頁制作，實驗管理</p><p>　　Design of central platform for mechanical experiment management</p><p>　　Abstract: Today is an age of information technology, the traditi

9、onal manual records have been replaced by computer data processing.So make laboratory management center website has become an inevitable trend.Firstly, the paper design pictures of the site by Photoshop software and desc

10、ribe the production process of the pictures detailedly. Use Dreamweaver software that is introduced briefly to design and create experimental management center of the platform and achieve the site function.Through th<

11、/p><p>　　Keywords: Image Processing，Web production，Experiment Management</p><p><b>　　目 錄</b></p><p><b>　　1 緒論1</b></p><p>　　1.1 課題的背景及其意義1<

12、/p><p>　　1.2 實驗管理信息系統(tǒng)發(fā)展概述1</p><p>　　1.3 國內(nèi)外發(fā)展概述2</p><p>　　1.3.1 國內(nèi)發(fā)展概述2</p><p>　　1.3.2 國外發(fā)展概述3</p><p>　　1.4 太原工業(yè)學(xué)院實驗管理中心現(xiàn)狀4</p><p>　　2 實驗管理系

13、統(tǒng)開發(fā)技術(shù)5</p><p>　　2.1 網(wǎng)頁設(shè)計工具Dreamweaver軟件5</p><p>　　2.1.1 Dreamweaver界面介紹6</p><p>　　2.2 網(wǎng)頁圖片設(shè)計工具Photoshop軟件8</p><p>　　2.2.1Photoshop軟件界面介紹8</p><p>　　2.3

14、 相關(guān)術(shù)語解釋8</p><p>　　3 實驗管理系統(tǒng)的設(shè)計開發(fā)9</p><p>　　3.1 實驗管理系統(tǒng)功能分析9</p><p>　　3.2 主頁的設(shè)計14</p><p>　　3.2.1 導(dǎo)航欄14</p><p>　　3.2.2 主體部分15</p><p>　　3.2.3

15、 網(wǎng)頁信息欄16</p><p>　　3.2.4 站點的規(guī)劃16</p><p>　　3.3 網(wǎng)頁的制作過程17</p><p>　　3.4 運用CSS+div對網(wǎng)頁進行管理的優(yōu)勢23</p><p>　　4 使用Dreamweaver處理圖片25</p><p><b>　　5 結(jié)論31<

16、/b></p><p><b>　　參考文獻32</b></p><p><b>　　致 謝33</b></p><p><b>　　1 緒論</b></p><p>　　1.1 課題的背景及其意義</p><p>　　當(dāng)今時代是一個信息

17、化、網(wǎng)絡(luò)化的時代，人們在傳統(tǒng)意義上的手工記錄和檢索操作已經(jīng)被計算機的數(shù)據(jù)處理所替代，隨著網(wǎng)絡(luò)技術(shù)的高速發(fā)展，使得信息具有了共享性和實時性，計算機網(wǎng)絡(luò)技術(shù)在信息管理上所發(fā)揮的重要作用也被人們越來越清晰的認識到。在網(wǎng)絡(luò)技術(shù)日新月異的今天，對學(xué)生的成才起著至關(guān)重要的作用的高校實驗室成為了高等學(xué)校教學(xué)中的一個重要環(huán)節(jié)，高校實驗室在實驗教學(xué)中的有效性不僅僅取決于實驗室的課程的開設(shè)也取決于實驗室的管理方法。近年來，隨著我們學(xué)校的師生人數(shù)不斷增長，基

18、礎(chǔ)設(shè)施的不斷完善，辦學(xué)規(guī)模的進一步擴大，在開設(shè)實驗課程的時候不僅要應(yīng)對本專業(yè)的學(xué)生，還需要對整個學(xué)院的公選課學(xué)生及跨專業(yè)選課學(xué)生進行開放，實驗室除了對學(xué)生開放外還需要承擔(dān)學(xué)校教師的科研項目，在實驗室大量使用中，實驗室管理教師需要對實驗室使用的設(shè)備儀器進行維護和記錄，需要對實驗室耗材進行申報和管理，需要對實驗室基礎(chǔ)設(shè)備的維修維護進行申請，實驗室辦公室人員需要對教師上報的各種信息進行統(tǒng)計和統(tǒng)一上報處理，現(xiàn)在太原工業(yè)學(xué)院已經(jīng)完成了校園網(wǎng)絡(luò)的基

19、礎(chǔ)建設(shè)，為了更好的進行信息的統(tǒng)計和處理更好的為實驗教學(xué)和科研服務(wù)，建設(shè)一個信息化平臺的“實驗管理信息系</p><p>　　1.2 實驗管理信息系統(tǒng)發(fā)展概述</p><p>　　近幾年來LIMS從功能上來看有以下的變化:</p><p>　　1、信息的處理方面的變化趨勢主要體現(xiàn)在有以下幾個功能：實驗室業(yè)務(wù)流程信息管理功能，實驗室數(shù)據(jù)匯總功能和智能干預(yù)功能，第一個功能

20、主要是針對于實驗室日常工作流程的管理，第二個功能主要是對實驗中數(shù)據(jù)經(jīng)過匯總統(tǒng)計通過表或數(shù)據(jù)層次進行表現(xiàn)，第三個功能是LIMS未來需求發(fā)展趨勢。 </p><p>　　2、實驗設(shè)備的管理的變化主要體現(xiàn)在：傳統(tǒng)的實驗記錄是一種老式的、傳統(tǒng)的、靜態(tài)的需要通過自律來保證數(shù)據(jù)的有效性，而現(xiàn)在使用LIMS管理系統(tǒng)后設(shè)備的預(yù)約、權(quán)限、使用都通過系統(tǒng)來完成對接和統(tǒng)籌可以避免人工管理所帶來的各種誤差，這也是LIMS發(fā)展的一個趨勢。

21、</p><p>　　3、數(shù)據(jù)信息的網(wǎng)絡(luò)化：所有數(shù)據(jù)在網(wǎng)絡(luò)上進行一元化的管理，用戶權(quán)限不同調(diào)用不同的數(shù)據(jù)進行操作，能夠很好的避免數(shù)據(jù)在處理過程中的不一致性。 </p><p>　　4、C/S 向 B/S 系統(tǒng)的轉(zhuǎn)化：B/S 系統(tǒng)是瀏覽器/服務(wù)器系統(tǒng)平臺比起傳統(tǒng)的C/S 具有易部署，易維護，資源集成化高的優(yōu)點。</p><p>　　1.3 國內(nèi)外發(fā)展概述</p&

22、gt;<p>　　1.3.1 國內(nèi)發(fā)展概述</p><p>　　雖然近年來我國計算機網(wǎng)絡(luò)軟件的高度發(fā)展，但就實驗室信息管理系統(tǒng)而言國外發(fā)達國家的在技術(shù)上和應(yīng)用上比國內(nèi)成熟，現(xiàn)在我國的實驗室信息管理系統(tǒng)經(jīng)過的多年發(fā)展體現(xiàn)出了在實驗管理中的便利性使得很多實驗室都認識到了信息化在管理的作用紛紛引入了 LIMS“實驗室信息管理系統(tǒng)（Laboratory Information Management Syst

23、em）是將信息化技術(shù)與實驗室管理需求相結(jié)合的信息化管理工具。以ISO/IEC17025:2005-5-15《檢測和校準實驗室能力的通用要求》（國標為GB 15481）規(guī)范為基礎(chǔ)，結(jié)合網(wǎng)絡(luò)化技術(shù)，將實驗室的業(yè)務(wù)流程和一切資源以及行政管理等以合理方式進行管理。通過 LIMS 系統(tǒng)，配合分析數(shù)據(jù)的自動采集和分析，大大提高了實驗室的檢測效率；降低了實驗室運行成本并且體現(xiàn)了快速溯源和痕跡，使傳統(tǒng)實驗室手工作業(yè)中存在的各種弊端得以順利解決”?，F(xiàn)如今

24、我國的LIMS有很多專業(yè)公司和高校進行研究，針對不同的實驗環(huán)境進行開發(fā)和應(yīng)用，有高校實驗室，也有公司政府部門如（石油化工，疾病監(jiān)控、環(huán)境監(jiān)測、水資源監(jiān)測）等實驗室，通過對不同實驗室的不同需求對其進行分層次設(shè)計以滿足客戶的需</p><p>　　1.3.2 國外發(fā)展概述 </p><p>　　國外是最先進行 LIMS 系統(tǒng)的研究和應(yīng)用至今為止發(fā)展了三個階段，第一階段為 80 年代，第二階段為

25、 90 年代中期，第三階段為現(xiàn)在現(xiàn)階段；其技術(shù)基本采用 B/S 模式的三層結(jié)構(gòu),通過服務(wù)器瀏覽器用戶之間的交互進行數(shù)據(jù)的管理和交換 。目前來看 LIMS 系統(tǒng)已經(jīng)打破了傳統(tǒng)的實驗室單獨運行模式，實現(xiàn)了遠程的信息的交換訪問、登錄，與企業(yè)的信息系統(tǒng)進行集成，通過儀器接口直接采集實驗儀器數(shù)據(jù)避免了人工輸入和干預(yù)實驗數(shù)據(jù)，使用 LIMS軟件對實驗室形成了全方位的管理。 國外 LIMS 軟件在設(shè)計方面對某一實驗室的工作進行總結(jié)抽象化，然后將其變成

26、語言。但是在 LIMS 系統(tǒng)中沒有涉及到國外實驗室的管理水平，只是通過軟件描述其管理模式，主要側(cè)重于工作的管理，而國外實驗室管理的內(nèi)容和幅度都不大，而我們國內(nèi)的實驗室管理的內(nèi)容多幅度大，層次復(fù)雜，很難用語言來描述，所以說不能照搬國外的LIMS軟件進行開發(fā)和管理。 現(xiàn)在從全球范圍來看，目前 LIMS 在歐美日澳等發(fā)達國家的實驗室廣泛的應(yīng)用，安裝實驗室管理系統(tǒng)的部門已經(jīng)超過上萬家，每年的產(chǎn)值為幾億美元，而這個速度以每年13%的速度增加。&l

27、t;/p><p>　　1.4 太原工業(yè)學(xué)院實驗管理中心現(xiàn)狀</p><p>　　太原工業(yè)學(xué)院機械工程實驗中心是我院省級實驗教學(xué)示范中心，中心主要面向全校機械類及近機類專業(yè)學(xué)生開展實驗、實踐教學(xué)、科研和社會服務(wù)工作。中心下設(shè)機械基太原工業(yè)學(xué)院機械工程實驗中心是我院省級實驗教學(xué)示范中心，中心主要面向全校機械類及近機類專業(yè)學(xué)生開展實驗、實踐教學(xué)、科研和社會服務(wù)工作。</p><p

28、>　　由于學(xué)校的實驗室資源緊張，在實驗室安排的過程中常常會出現(xiàn)不同的系爭搶實驗室的情況，為了將有限的資源進行合理的分配而成立了太原工業(yè)學(xué)院機械實驗管理中心，在實驗管理中心中心下設(shè)機械基礎(chǔ)實驗室、技術(shù)測量實驗室、機電工程實驗室、數(shù)控技術(shù)實驗室、工藝工裝實驗室、材料分析實驗室、材料成型實驗室和力學(xué)性能實驗室8個實驗室，中心面積約2500平米，實驗儀器、設(shè)備1800多臺（套），資產(chǎn)價值約1400萬元。實驗中心目前從事實驗教學(xué)的專職、兼職

29、教師12人，可開設(shè)機械類、近機類的基礎(chǔ)實驗、專業(yè)實驗、各種綜合實驗和實踐教學(xué)等，課內(nèi)實驗開出率100%。在如此多的實驗室中，常常有實驗室人員的調(diào)動，物資的請購，設(shè)備維護，實驗運行記錄，藥品的管理，設(shè)備的借用，儀器損壞記錄，值班管理等諸多的管理和信息記載和查詢，現(xiàn)在通過人工的方式發(fā)現(xiàn)工作量大，信息冗余大，記錄不規(guī)范，信息準確度差等諸多缺點。所以急需一個實驗室管理軟進行管理和統(tǒng)一的部署。</p><p>　　實驗管理

30、信息系統(tǒng)是一個對太原學(xué)院實驗與教學(xué)管理中心進行業(yè)務(wù)流程管理的一個系統(tǒng)，它通過對業(yè)務(wù)流程進行數(shù)據(jù)化的管理能更好的提高各部門間的協(xié)作，提高實驗室運行數(shù)據(jù)的規(guī)范性和準確性，對統(tǒng)計的數(shù)據(jù)起到一個準確直觀的展示和分析基于太原工業(yè)學(xué)院實驗與資源管理中心對實驗管理信息系統(tǒng)的要求，通過用Dreamweaver編寫管理系統(tǒng)并將系統(tǒng)部署在網(wǎng)絡(luò)上的正常運行，在系統(tǒng)的使用中能減少實驗管理教師的工作量，防止收集的數(shù)據(jù)出現(xiàn)錯誤。 在此系統(tǒng)中本人主要負責(zé)系統(tǒng)整體模塊

31、和框架的編寫和設(shè)計開發(fā)，設(shè)計并制作出管理系統(tǒng)的主體網(wǎng)頁并實現(xiàn)其基本功能，在開發(fā)好之后對系統(tǒng)進行測試及在日常的維護中對系統(tǒng)的功能進行升級并修改使用過程中存在的BUG。</p><p>　　2 實驗管理系統(tǒng)開發(fā)技術(shù)</p><p>　　實驗管理系統(tǒng)的開發(fā)主要通過一些制作網(wǎng)頁的軟件進行網(wǎng)頁的軟件進行設(shè)計開發(fā)，構(gòu)建出機械管理中心平臺，實現(xiàn)基本模塊的功能。目前制作網(wǎng)頁一般使用的軟件主要有Dreamw

32、eaver，F(xiàn)ireworks，F(xiàn)lash，俗稱網(wǎng)頁制作三劍客。Dreamweaver 是一個“所見即所得”的可視化網(wǎng)站開發(fā)工具，主要用于動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁的開發(fā)；Fireworks主要是用于對網(wǎng)頁上常用的jpg、gif的制作和處理，也可用于制作網(wǎng)頁布局；Flash主要用來制作動畫，現(xiàn)推出Flash平臺，可預(yù)見有極好的前景。所以我本次設(shè)計主要選用Dreamweaver cs6結(jié)合Photoshop cs6處理圖片</p>

33、<p>　　2.1 網(wǎng)頁設(shè)計工具Dreamweaver軟件</p><p>　　Dreamwraver軟件是Adobe 公司推出的一套擁有可視化編輯界面，用于制作并編輯網(wǎng)站和移動應(yīng)用程序的網(wǎng)頁設(shè)計軟件。它將可視化布局工具，應(yīng)用程序開發(fā)功能和代碼編輯支持組合為一個功能強大的工具系統(tǒng)，使每個級別的開發(fā)人員和設(shè)計人員都可以利用它快速地創(chuàng)建網(wǎng)頁界面。</p><p>　　該軟件在目前的最

34、新版是Dreamweaver CS6，它支持代碼拆分設(shè)計實時視圖等多種方式來創(chuàng)建編寫和修改網(wǎng)頁。對于初級人員來說，可以無須編寫任何代碼救恩那個快速創(chuàng)建Web頁面，而其成熟的代碼編輯工具更適合于Web開發(fā)高級人員的創(chuàng)作。新版本還使用了自適應(yīng)網(wǎng)格版面創(chuàng)建頁面，在發(fā)布前使用多屏幕預(yù)覽審閱設(shè)計，可以大大提高工作效率。改善FTP性能，可更高效地傳輸大型文件。實時視圖和多屏幕預(yù)覽面板可呈現(xiàn)HTML5代碼，幫助用戶方便地檢查所做工作。</p&g

35、t;<p>　　Dreamweaver和同類的其它軟件相比而言，主要有以下得一些優(yōu)點：</p><p>　　1、可視化的網(wǎng)頁編輯器。Dreamweaver會把用戶的操作自動轉(zhuǎn)化成HTML的代碼，不會生成生澀難懂的代碼。Dreamweaver的代碼簡單精煉，不會生成生澀難懂的代碼，避免了許多不必要的勞動。</p><p>　　2、便捷的編輯代碼。</p><

36、p>　　3、強大的動態(tài)頁面。即使用戶不懂java script，也可以使用Dreamweaver的Behavior功能，在網(wǎng)頁里添加各種的動態(tài)效果,能夠設(shè)計完成華麗的動態(tài)層效果。</p><p>　　4、操作簡單。Dreamweaver里有歷史面板、html樣式、模版、庫等功能，可以通過歷史面板、html樣式、模版、庫等的使用，使用戶不用重復(fù)的勞動。</p><p>　　2.1.1

37、Dreamweaver界面介紹</p><p>　　打開Dreamweaver cs6軟件，操作界面如圖2.1所示：</p><p>　　圖2.1 Dreamweaver cs6操作界面</p><p>　　操作界面的上部菜單欄分別是“文件”、“編輯”、“查看”、“插入”、“修改”、“格式”、“命令”、“站點”、“窗口”和“幫助”菜單?！拔募辈藛沃械拿钪饕轻?/p>

38、對文件和素材的一些基本操作，如新建文檔、打開文檔和保存文檔等?！熬庉嫛辈藛沃邪恍┏Ｓ玫木庉嬅?，比如復(fù)制剪切粘貼查找替換撤銷重做等。“查看”菜單中的命令主要幫助用戶查看文檔的各種視圖，切換成代碼視圖或設(shè)計視圖，并且可以顯示和隱藏不同類型的頁面元素及各種工具?！安迦搿辈藛斡脕聿迦敫鞣N元素，例如圖片、表格、框架、多媒體組件等?！靶薷摹辈藛慰梢杂脕韺撁嬖剡M行修改，例如修改頁面屬性、表格、框架等?！案袷健辈藛沃械拿钪饕獮榱朔奖阌脩粼O(shè)置

39、網(wǎng)頁的文本格式?！懊睢辈藛沃械拿钪饕脕硖峁Ω鞣N命令的訪問。</p><p>　　“站點”菜單中的命令主要用于創(chuàng)建、打開和編輯站點，以及用于管理當(dāng)前站點中的文件?！按翱凇辈藛翁峁reamweaver CS6中所有面板檢查器和和窗口的訪問?！皫椭辈藛翁峁reamweaver CS6中文件的訪問，包括如何使用Dreamweaver CS6，如何使用Business Catalyst，并且包括各種代碼的

40、參考材料。</p><p>　　新建一個空白文件，如圖2.2所示：</p><p>　　圖2.2 空白文件</p><p>　　在設(shè)計網(wǎng)頁時，先在“代碼”頁面輸入代碼，然后再到“設(shè)計”中查看，點擊“實時視圖”，查看實時效果。</p><p>　　2.2 網(wǎng)頁圖片設(shè)計工具Photoshop軟件</p><p>　　Ph

41、otoshop是世界頂尖級的圖像設(shè)計與制作工具軟件。圖像處理是對已有的位圖圖像進行編輯加工處理以及運用一些特殊效果，其重點在于對圖像的處理加工。在表現(xiàn)圖像中的陰影和色彩的細微變化方面或者進行一些特殊效果處理時，使用位圖形式是最佳的選擇，它在這方面的優(yōu)點是矢量圖無法比擬的。我所使用的版本為Photoshop cs6，和以前版本相比有以下優(yōu)點：1、復(fù)雜更加簡單，使用新的細化工具自動改變選區(qū)邊緣并改進蒙版。 2、內(nèi)容感知型填充3、出眾的 HD

42、R成像4、最新的原始圖像處理5、出眾的繪圖效果6、操控變形。</p><p>　　2.2.1Photoshop軟件界面介紹</p><p>　　打開Photoshop軟件，操作界面如圖2.3所示：：</p><p>　　圖2.3 Photoshop操作界面</p><p>　　菜單欄位于界面最上方，包含了用于圖像處理的各類命令，共有11個菜

43、單，每個菜單下又有若干個子菜單，選擇子菜單中的命令可以執(zhí)行相應(yīng)的操作。標題欄位于工具選項欄下方，顯示了文檔名稱、文件格式、窗口縮放比例和顏色模式等信息。工具箱的默認位置位于界面左側(cè)，通過單擊工具箱上部的雙箭頭，可以在單例和雙列間進行轉(zhuǎn)換。調(diào)版區(qū)的默認位置位于界面右側(cè)，主要用于存放Photoshop cs5提供的功能調(diào)板。</p><p>　　2.3 相關(guān)術(shù)語解釋</p><p>　　HTM

44、L是超文本標記語言英文（Hyper Text Markup Language）的縮寫。</p><p>　　CSS是Cascading Style Sheets的簡稱，也成為“層疊樣式表”。</p><p>　　DIV是層疊樣式表中的定位技術(shù)，全稱Division，即為劃分。</p><p>　　3 實驗管理系統(tǒng)的設(shè)計開發(fā)</p><p>　

45、　3.1 實驗管理系統(tǒng)功能分析</p><p>　　實驗管理中心是我們學(xué)校的對外展示自身形象的名片，每一個網(wǎng)頁都有自己的特色，每一個網(wǎng)頁都有自己的個性。根據(jù)學(xué)校的特點、內(nèi)容形式的不同，規(guī)劃建設(shè)不同的網(wǎng)頁表達方式，在設(shè)計和創(chuàng)意方面既體現(xiàn)學(xué)校的特色，又兼顧其展的方向。做到既量身定做、又兼容并蓄。</p><p>　　從設(shè)計風(fēng)格上分析，由于網(wǎng)站屬性為專業(yè)性網(wǎng)站，設(shè)計風(fēng)格總體上應(yīng)為清新、簡約風(fēng)格（

46、藍色為主），應(yīng)有一個統(tǒng)一的logo圖案。</p><p>　　從網(wǎng)頁的信息布局分析，學(xué)校網(wǎng)站的主體信息結(jié)構(gòu)及布局，它是總體網(wǎng)站的框架，所有的內(nèi)容信息都會以此為依據(jù)進行布局，清晰明了的布局會使瀏覽者能方便快捷地取得所需信息，主體為總分結(jié)構(gòu)，頂端為導(dǎo)航，以實現(xiàn)清晰明了的信息布局。</p><p>　　如圖3.1和3.2所示，為北京大學(xué)實驗室與設(shè)備管理部首頁，最上面為北京大學(xué)?；?，基本色為藍色、

47、紅色，導(dǎo)航欄里有“網(wǎng)站首頁”、“機構(gòu)設(shè)置”、“規(guī)章制度”、“服務(wù)指南”、“實驗室管理”、“設(shè)備查詢共享”、“設(shè)備查詢共享”、“安全環(huán)?！?、“下載專區(qū)”。整體為國字型布局，左側(cè)為“快速導(dǎo)航”和“相關(guān)鏈接”，右側(cè)為實驗管理系統(tǒng)等的登錄入口和下載專區(qū)，中間為工作動態(tài)和通知公告。</p><p>　　圖3.1 北京大學(xué)實驗室與設(shè)備管理部首頁</p><p>　　最下面為版權(quán)信息和聯(lián)系方式。<

48、;/p><p>　　圖3.2 版權(quán)信息和聯(lián)系方式</p><p>　　如圖3.3所示，為上海交通大學(xué)實驗室與設(shè)備處首頁，最上面為上海交通大學(xué)?；?，基本色為藍色，導(dǎo)航欄里有“首頁”、“機構(gòu)設(shè)置”、“規(guī)章制度”、“辦事指南”、“文檔下載”、“實驗室建設(shè)”、“簡報”、“院系風(fēng)采”、“黨務(wù)之窗”、“院系園地”。整體為列式型布局，背景為一張圖片，左側(cè)為實驗管理系統(tǒng)等的登錄入口，中間為簡訊、通知和院系風(fēng)

49、采。右側(cè)為版權(quán)信息和聯(lián)系方式。</p><p>　　圖3.3上海交通大學(xué)實驗室與設(shè)備處首頁</p><p>　　如圖3.4、3.5和3.6所示，為吉首大學(xué)實驗室與設(shè)備管理中心首頁，最上面為吉首大學(xué)的?；栈旧珵樗{色。網(wǎng)頁的布局從上到下，分為四塊，最上面為導(dǎo)航欄，下面為主體部分，再下面為一個儀器設(shè)備展示區(qū)，最下面為網(wǎng)頁信息欄。導(dǎo)航欄里有“首頁”、“機構(gòu)設(shè)置”、“信息公告”、“規(guī)章制度”、“服

50、務(wù)指南”、“實驗室一覽”、“設(shè)備一覽”、“三大中心”、“下載專區(qū)”。主題部分分左右兩塊，左側(cè)分四小塊，從上而下分別為快速導(dǎo)航、常用系統(tǒng)、友情鏈接和聯(lián)系方式；右側(cè)也分四小塊，從上而下分別為實驗室展示區(qū)、新聞動態(tài)、通知公告及服務(wù)指南和一張裝飾網(wǎng)頁用的圖片。儀器設(shè)備展示區(qū)里放了一些圖片，從右向左循環(huán)移動。最下面的網(wǎng)頁信息欄主要內(nèi)容有版權(quán)信息、地址、郵編、聯(lián)系方式等。</p><p>　　圖3.4 吉首大學(xué)實驗室與設(shè)備

51、管理中心首頁</p><p>　　圖3.5 主題部分</p><p>　　圖3.6 網(wǎng)頁信息欄</p><p><b>　　3.2 主頁的設(shè)計</b></p><p>　　通過借鑒其他學(xué)校的實驗設(shè)備管理中心主網(wǎng)頁，我的設(shè)計為上中下三層布局，最上層為導(dǎo)航欄，中間層為主體部分，最下層為網(wǎng)頁信息欄，如圖3.7所示：<

52、/p><p>　　圖3.7 主頁設(shè)計圖</p><p><b>　　3.2.1 導(dǎo)航欄</b></p><p>　　導(dǎo)航欄分為上中下三層，如圖3.8所示，從上而下分別為時間日期欄、首頁的logo和主要功能模塊。時間日期欄左邊寫有“歡迎訪問機械實驗中心！”，右邊為具體日期，劃分的塊定義為top-top。首頁的logo是一張寬為1002像素，高為10

53、0像素的圖片，通過Photoshop軟件制作而成（第四節(jié)會具體介紹），在事先劃分好的區(qū)域，通過插入圖片的代碼完成。最下面的功能模塊主要劃分兩塊，左邊分七塊，分別為首頁、教學(xué)動態(tài)、實驗室一覽、設(shè)備一覽、社會服務(wù)、規(guī)章制度和資料下載，每個上面都添加超級鏈接，點擊可以轉(zhuǎn)到子網(wǎng)頁里面；右邊為站內(nèi)搜索和中英版本切換的功能。 </p><p><b>　　圖3.8導(dǎo)航欄</b></p>

54、<p>　　3.2.2 主體部分</p><p>　　主體部分主要分為左、右兩塊，如圖3.9所示，左邊又分為上、下兩塊，上面這塊劃分為圖片展示區(qū)域，主要展示圖片，由切換圖片的腳本控制；下面的左塊為教學(xué)動態(tài)欄，用來放一些教學(xué)過程的新聞、動態(tài)、通知等內(nèi)容，下右塊為實驗室簡介欄，主要介紹了實驗管理中心的一些簡單介紹。右邊為從上而下的結(jié)構(gòu)。最上邊為快速導(dǎo)航，可以直接鏈接到實驗室管理、實驗室建設(shè)、實驗設(shè)備管理、實

55、驗室安全、大學(xué)生創(chuàng)新訓(xùn)練中心等網(wǎng)頁的頁面；快速導(dǎo)航下面放著一張寬為295像素，長為113像素的圖片，用來裝飾網(wǎng)頁，使網(wǎng)頁不顯得枯燥、單調(diào)；圖片的下面為學(xué)生實驗信息查詢系統(tǒng)的入口，由一張圖片和一個一行三列的表格，輸入班級信息進行查詢；學(xué)生實驗信息查詢系統(tǒng)的下面放另一張寬為295像素，長為120像素的圖片，用來裝飾網(wǎng)頁；最下邊為友情連接模塊，可以方便的鏈接到比較常用的一些網(wǎng)站。</p><p>　　圖3.9 主體部

56、分</p><p>　　3.2.3 網(wǎng)頁信息欄</p><p>　　網(wǎng)頁信息欄分為左右兩塊，如圖3.10所示，左邊里為地址欄和郵政編碼；右邊為聯(lián)系電話、電子郵箱和互聯(lián)網(wǎng)準入證、備案號等。</p><p>　　圖3.10 網(wǎng)頁信息欄</p><p>　　3.2.4 站點的規(guī)劃</p><p>　　在創(chuàng)建站點之前，一定要

57、對站點進行合理的規(guī)劃，這樣能使站點中的文檔管理起來更輕松，也能提高工作效率。一般來說，在規(guī)劃站點結(jié)構(gòu)時，應(yīng)遵循以下一些規(guī)則。 </p><p>　　1.文件分類保存。如果是一個復(fù)雜的站點，它包含的文件會很多，而且各類型的文件內(nèi)容也不盡相同。為了能更合理地管理文件，就要將文件分門別類地存放在相應(yīng)的文件夾中。如果將一切網(wǎng)頁文件都存放在一個文件夾中，當(dāng)站點的規(guī)模越來越大時，管理起來就會很不容易。用文件夾來合理構(gòu)建文檔的

58、結(jié)構(gòu)時，應(yīng)先為站點在本地磁盤上創(chuàng)建一個根文件夾，然后再根文件夾中分別創(chuàng)建多個子文件夾，比如網(wǎng)頁文件夾、媒體文件夾、圖像文件夾等，接著將相應(yīng)的文件放在相應(yīng)的文件夾中。站點中的一些特殊文件，比如模版、庫等最好存放在系統(tǒng)默認創(chuàng)建的文件夾中。</p><p>　　2. 合理命名文件。為了方便管理，文件夾和文件的名稱最好要有具體的含義。這點非常重要，特別是在網(wǎng)站的規(guī)模變得很大時，若文件名容易理解，人們一看就明白網(wǎng)頁描述的內(nèi)

59、容。否則，最著站點中文件的增多，不易理解的文件名會影響工作效率。還有，應(yīng)該盡量避免使用中文文件名，因為很多的Internet服務(wù)器使用的是英文操作系統(tǒng)，不能對中文文件名提供很好的支持，但可以使用漢語拼音。</p><p>　　圖3.11所示為本設(shè)計中文件夾的設(shè)置:</p><p>　　圖3.11 文件夾設(shè)置</p><p>　　3.3 網(wǎng)頁的制作過程</p&

60、gt;<p>　　1.打開Dreamweaver軟件，選擇“站點”命令中的“新建站點”命令如圖3.12所示建立站點。</p><p>　　圖3.12 建立站點</p><p>　　2.創(chuàng)建index.html文件和css.css文件。在index文件中劃分區(qū)域，如圖3.13所示。</p><p>　　圖3.13 創(chuàng)建index.html文件<

61、/p><p>　　3.如圖3.14所示，在css文件中定義塊的大小、顏色、字體、背景、間隙、邊距和相對位置等。</p><p>　　圖3.14 創(chuàng)建css文件</p><p>　　4.如圖3.15所示，點擊“設(shè)計”按鈕，查看設(shè)計效果。</p><p>　　圖3.15 設(shè)計效果</p><p>　　5.如圖3.16所示，

62、在空白處點擊插入按鈕，選擇“圖象”按鈕，插入要插的圖片。</p><p>　　圖3.16 插入圖片</p><p>　　6.如圖3.17所示，在需要添加超級鏈接的地方，選中“插入”按鈕，選擇“超級鏈接”，然后填入文本名稱，最后確定。</p><p>　　圖3.17 創(chuàng)建超鏈接</p><p>　　7.如圖3.18所示，添加超級鏈接后，在鼠

63、標點擊到后，屬性面板里的HTML面板里會在鏈接的里面顯示已經(jīng)添加的鏈接。</p><p>　　圖3.18 顯示超鏈接添加</p><p>　　8.如圖3.19所示，在需要添加表格的地方，選中“插入”按鈕，選擇“表格”，選擇好行數(shù)列數(shù)等數(shù)據(jù)，然后確認。</p><p>　　圖3.19 添加表格</p><p>　　9.如圖3.20所示，將鼠

64、標懸浮在表格的邊框上，可以對表格進行拉伸壓縮等動作，改變表格的長度和寬度。</p><p>　　圖3.20 改變表格長度與寬度</p><p>　　10. 如圖3.21所示為完成后的網(wǎng)頁。</p><p>　　圖3.21 設(shè)計完成的網(wǎng)頁</p><p>　　3.4 運用CSS+div對網(wǎng)頁進行管理的優(yōu)勢</p><p&

65、gt;　　在本設(shè)計中，運用了CSS+div布局對網(wǎng)站進行了優(yōu)化，鏈接如圖3.22所示，運用CSS+div對代碼進行優(yōu)化的好處。</p><p>　　圖3.22 CSS+div布局連接</p><p>　　一.精簡代碼，降低重構(gòu)難度。</p><p>　　將CSS+div布局使用到網(wǎng)頁后，會使代碼變得很精簡，在網(wǎng)頁的任何一個頁面都可以對css文件進行調(diào)用。若是使用c

66、ss+div布局修改部分頁面只需修改css文件中的一個代碼即可。若是用其他布局，則需手動改很多頁面，顯得很麻煩。</p><p><b>　　二.網(wǎng)頁訪問速度</b></p><p>　　使用了CSS+div布局的網(wǎng)頁，精簡了許多頁面的代碼，從而提升了網(wǎng)頁的訪問速度，也自然而然的提升了網(wǎng)站的用戶體驗度。</p><p><b>　　三

67、.SEO優(yōu)化</b></p><p>　　采用CSS+div布局的網(wǎng)站對于搜索引擎很是友好的，因此其避免了Table嵌套層次過多而無法被搜索引擎抓取的問題，而且簡潔、結(jié)構(gòu)化的代碼更加有利于突出重點和適合搜索引擎抓取。</p><p>　　在本次設(shè)計中，完成的主頁部分源代碼僅為256行，如圖3.23所示，而一般同類網(wǎng)頁一般在1000行以上。</p><p>

68、;　　圖3.23 源代碼</p><p>　　4 使用Dreamweaver處理圖片</p><p>　　1.如圖4.1和圖4.2所示，新建文件，打開藍天白云素材，選擇裁剪工具，寬度選擇1002像素，高度選擇100像素，按比例裁剪。</p><p>　　圖4.1 新建文件</p><p><b>　　圖4.2 素材</b&

69、gt;</p><p>　　2.將裁剪過后的圖像拖動到空白文件里，如圖4.3和4.4所示：</p><p>　　圖4.3 裁剪圖像</p><p>　　圖4.4 拖動裁剪圖像</p><p>　　3.如圖4.5和圖4.6所示，選擇鴿子的素材圖片，用魔棒工具選區(qū)，將選區(qū)拖動到文件中，對選區(qū)進行調(diào)整大小。</p><p>

70、;　　圖4.5 選擇鴿子素材</p><p>　　圖4.6 調(diào)整選區(qū)大小</p><p>　　4.如圖4.7所示，選擇院徽素材，由于背景是透明的，所以不用魔棒工具，直接將其拖到文件中，并調(diào)整圖片的大小和位置。</p><p>　　圖4.7 選擇院徽素材</p><p>　　4.如圖4.8所示，調(diào)整院徽在圖片中的大小和位置。</p&

71、gt;<p>　　圖4.8 調(diào)整院徽在圖片中的大小和位置</p><p>　　6.如圖4.9和圖4.10所示，選擇文本工具，輸入“機械工程實驗中心”，修改字體的大小，選擇長城魏碑字體。</p><p>　　圖4.9 輸入“機械工程實驗中心”</p><p>　　圖4.10 修改字體</p><p>　　7.由于ps中的圖片格式

72、為psd格式，而網(wǎng)頁中一般用到的圖片格式為jpg格式或gif格式，將做好的圖片儲存為gif格式，如圖4.11所示。</p><p>　　圖4.11 圖片儲存為gif格式</p><p><b>　　5 結(jié)論</b></p><p>　　通過本畢業(yè)設(shè)計經(jīng)過幾個月的查資料、整理材料、學(xué)習(xí)軟件、設(shè)計網(wǎng)頁到寫作論文，今天終于可以順利的完成論文，終于讓學(xué)

73、生在大學(xué)的生活，得以劃下了完美的句點。 畢業(yè)設(shè)計是對我們大學(xué)生活四年來教學(xué)的一個總結(jié)性考察，里面包含了我們學(xué)過的很多方面的知識，平時的學(xué)習(xí)都是自己聽老師講解，或者就是做練習(xí)之類，缺少了自己的獨立思考，通過這次的畢業(yè)設(shè)計，讓自己清楚了解了自己，提升了自我學(xué)習(xí)思考的能力。從第一眼看到資料的那種眼花繚亂的感覺，到最后看到自己做出的設(shè)計論文的成功，體驗了一次從茫然到無助，最后的那種成功的欣慰，真的讓自己受益匪淺，也使自己明白了，無論今后做什么

74、事情，都要堅持不懈的努力，多從問題的關(guān)鍵出發(fā)，分析不同的思路，多做總結(jié)與比較，從而得到最佳的結(jié)果。這次的論文設(shè)計讓我重新了解了很多在學(xué)校所學(xué)不到的東西，也借此回顧了一下我大學(xué)所學(xué)的知識。它讓我掌握了很多HTML的知識，讓我對我所學(xué)過的知識有所鞏固和提高。在整個過程中，我學(xué)到了新知識，擴大了知識面。也讓我認識到了學(xué)海無涯的真正含義，我將會不斷的學(xué)習(xí)新的知識，讓自己的能力得到進一不的提升。在論文的設(shè)計中它不僅培養(yǎng)了我嚴謹?shù)乃季S方法，更造就了

75、我積極樂觀</p><p>　　又不失創(chuàng)新，開朗但不浮躁，興趣廣泛，思路開闊，辦事沉穩(wěn)，團結(jié)合作的精神?？傊谶@次畢業(yè)設(shè)計中，我們學(xué)會了許多的知識，是大學(xué)四年來所學(xué)知識的綜合運用，切實感受到設(shè)計的苦與樂。在這里希望各位老師提出意見和建議，我們定會努力學(xué)習(xí)改進，爭取作出更大的進步 。</p><p><b>　　參考文獻</b></p><p>

76、;　　[1] 龔海燕.淺析高校實驗室建設(shè)與管理龔海燕[J] .科技風(fēng),2009.</p><p>　　[2] 李志.高職院校建立實驗室信息管理平臺的分析工會博覽[J].理論研究,2011.</p><p>　　[3] 楊仲瑋.淺議實驗室管理系統(tǒng)（LIMS）在環(huán)境監(jiān)測中的應(yīng)用[J].甘肅科技,2012</p><p>　　[4] 吳寶鎖. 關(guān)于開放性實驗室教育的探討[

77、J]. 市場周刊（研究版）, 2005</p><p>　　[5] 周昕.基于MVC框架的實驗室信息管理系統(tǒng)的設(shè)計和實現(xiàn)[J].計算機技術(shù)，2009</p><p>　　[6] 王洪義.基于web的高校開放實驗室管理系統(tǒng)的研究與設(shè)計[J].軟件工程，2009</p><p>　　[7] 蔡曉君.精品實驗課程需要精品實驗教材[J].實驗室研究與探索，2011</

78、p><p>　　[8] 郭龍勝.淺議企業(yè)網(wǎng)站的建設(shè)曾科[J].西昌學(xué)院學(xué)報：自然科學(xué)版 ，2008</p><p>　　[9] 通用技術(shù)課程資料庫的制作[J].哈爾濱師范大學(xué)自然科學(xué)學(xué)報，2008</p><p>　　[10] 宋穎超.淺析學(xué)校網(wǎng)站的設(shè)計與建設(shè)[J].安順師范高等?？茖W(xué)校學(xué)報，2006</p><p>　　[11] 宋丹.《服裝結(jié)

79、構(gòu)設(shè)計》網(wǎng)絡(luò)課件的研究與開發(fā)[J].紡織工程，2004</p><p>　　[12] 張芳.“呼和浩特科技信息網(wǎng)”網(wǎng)站建設(shè)[J].呼和浩特科技，2007</p><p>　　[13] 朱世坤. 開放性實驗教學(xué)模式的探索與實踐[J]. 大學(xué)物理實驗, 2007</p><p>　　[14] 李俊杰. 高校實驗建設(shè)的實踐探索[J]. 襄樊職業(yè)技術(shù)學(xué)院報, 2006<

80、;/p><p>　　[15] 侯大為. 淺談我國機械加工中心的現(xiàn)狀及發(fā)展趨勢[J].科技致富導(dǎo),2010,(08)</p><p><b>　　致 謝</b></p><p>　　經(jīng)過三個多月的時間我的畢業(yè)論文撰寫和網(wǎng)頁制作均順利完成。在此我要特別感謝我的指導(dǎo)老師劉曉老師在此期間給予我的幫助和指導(dǎo)。在設(shè)計期間，多次向劉老師請教，他給予了我們極大的

81、幫助，指引我們的論文的寫作的方向和架構(gòu)，并提供了很多查找資料的方法，讓我們更清晰的了解了設(shè)計的整體規(guī)劃，從而比較容易的著手，也能按時完成，借此真誠地向王老師道聲“謝謝”！設(shè)計的結(jié)束，真的也宣告了我們大學(xué)生涯的終結(jié)，心里雖然充滿了期待，但也有的點不舍，想想自己走過來的一步一步，一點一滴，心中感慨萬千，希望自己帶著那份對未來社會的憧憬和希望，順利走進社會的大家庭，開始自己新的生活，在此感謝長久以來老師和同學(xué)們的幫助，謝謝你們！最后，我要向百