機械電子工程畢業(yè)論文-機械類實驗管理中心平臺設計

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

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

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

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

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

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

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

8、網頁的技巧。</p><p>　　關鍵詞：圖片處理，網頁制作，實驗管理</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 實驗管理信息系統發(fā)展概述1</p><p>　　1.3 國內外發(fā)展概述2</p><p>　　1.3.1 國內發(fā)展概述2</p><p>　　1.3.2 國外發(fā)展概述3</p><p>　　1.4 太原工業(yè)學院實驗管理中心現狀4</p><p>　　2 實驗管理系

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

39、網頁的文本格式。“命令”菜單中的命令主要用來提供對各種命令的訪問。</p><p>　　“站點”菜單中的命令主要用于創(chuàng)建、打開和編輯站點，以及用于管理當前站點中的文件?！按翱凇辈藛翁峁reamweaver CS6中所有面板檢查器和和窗口的訪問。“幫助”菜單提供對Dreamweaver CS6中文件的訪問，包括如何使用Dreamweaver CS6，如何使用Business Catalyst，并且包括各種代碼的

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

41、otoshop是世界頂尖級的圖像設計與制作工具軟件。圖像處理是對已有的位圖圖像進行編輯加工處理以及運用一些特殊效果，其重點在于對圖像的處理加工。在表現圖像中的陰影和色彩的細微變化方面或者進行一些特殊效果處理時，使用位圖形式是最佳的選擇，它在這方面的優(yōu)點是矢量圖無法比擬的。我所使用的版本為Photoshop cs6，和以前版本相比有以下優(yōu)點：1、復雜更加簡單，使用新的細化工具自動改變選區(qū)邊緣并改進蒙版。 2、內容感知型填充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í)行相應的操作。標題欄位于工具選項欄下方，顯示了文檔名稱、文件格式、窗口縮放比例和顏色模式等信息。工具箱的默認位置位于界面左側，通過單擊工具箱上部的雙箭頭，可以在單例和雙列間進行轉換。調版區(qū)的默認位置位于界面右側，主要用于存放Photoshop cs5提供的功能調板。</p><p>　　2.3 相關術語解釋</p><p>　　HTM

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

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

46、藍色為主），應有一個統一的logo圖案。</p><p>　　從網頁的信息布局分析，學校網站的主體信息結構及布局，它是總體網站的框架，所有的內容信息都會以此為依據進行布局，清晰明了的布局會使瀏覽者能方便快捷地取得所需信息，主體為總分結構，頂端為導航，以實現清晰明了的信息布局。</p><p>　　如圖3.1和3.2所示，為北京大學實驗室與設備管理部首頁，最上面為北京大學校徽，基本色為藍色、

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

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

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

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

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

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

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

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

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

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

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

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

59、容。否則，最著站點中文件的增多，不易理解的文件名會影響工作效率。還有，應該盡量避免使用中文文件名，因為很多的Internet服務器使用的是英文操作系統，不能對中文文件名提供很好的支持，但可以使用漢語拼音。</p><p>　　圖3.11所示為本設計中文件夾的設置:</p><p>　　圖3.11 文件夾設置</p><p>　　3.3 網頁的制作過程</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所示，點擊“設計”按鈕，查看設計效果。</p><p>　　圖3.15 設計效果</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面板里會在鏈接的里面顯示已經添加的鏈接。</p><p>　　圖3.18 顯示超鏈接添加</p><p>　　8.如圖3.19所示，在需要添加表格的地方，選中“插入”按鈕，選擇“表格”，選擇好行數列數等數據，然后確認。</p><p>　　圖3.19 添加表格</p><p>　　9.如圖3.20所示，將鼠

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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