基于Dreamweaver MX 2004科室網站設計和制作

穆飛航李秋俐張 帆王烈明閆 濤張 麟

基于Dreamweaver MX 2004科室網站設計和制作

穆飛航①李秋俐①張 帆①王烈明①閆 濤①張 麟①

運用Dreamweaver MX開發第二炮兵總醫院醫學工程科網站，著重介紹如何利用Dreamweaver MX 2004實現醫學工程科的宣傳介紹、網上下載以及展示相關教學視頻等。

Dreamweaver MX 2004；網站設計

利用我院局域網環境，基于Dreamweaver MX軟件設計醫學工程科網站，從網絡途徑宣傳科室相關業務工作、開展實施下載、展示相關教學視頻，從而可以方便臨床科室對醫學工程科各類業務的了解，最終達到及時服務臨床的目的。本文闡述借助軟件Dreamweaver MX 2004開發制作網站的體會。

l 網站總體設計

根據臨床科室的需求、本科室的業務特點以及醫技服務臨床的理念。圍繞本網站要實現的功能，將網站內容進行整體設計。共分為五大欄目：首頁、科室簡介、科室職責、文件下載、教學視頻，各大欄目再繼續細分。整體結構圖如圖l所示。

首頁模塊：包括了有關醫學工程科動態消息、服務流程、院長查房等內容。以方便臨床科室了解醫療設備的維修、計量、驗收、采購、供應等內容。

科室簡介模塊：該模塊包括了醫學工程科總體介紹以及各室簡介。

科室職責模塊：向臨床科室介紹計量室、維修室、采購室以及檔案室等應履行的職責。

文件下載模塊：給臨床科室提供相關文件的下載，以方便臨床科室查閱相關資料和獲取相關申請表。如月耗材計劃表、醫工庫常用耗材目錄等。

教學視頻模塊：主要方便實習生進行教學視頻下載。

圖1

2 網站的制作

根據總體規劃，就可以利用Dreamweaver MX 2004制作科室網站，總的工作流程包括：在Fireworks 2004中依次做出效果圖一切圖一打開Dreamweaver MX 2004一新建站點一站點命名一定義頁面屬性一定義頁大小一轉換到頁面布局示圖一添加內容一插入導航條一轉換到標準視圖工作一添加鏈接一添加動態交互一鏈接站點各個頁面。還要應用到Dreamweaver MX 2004的層技術、模板功能和使用框架。下面把制作要點分述如下：

2.l 網站文件目錄結構和鏈接結構的設計

根據網站內容的需要規劃網站目錄結構和鏈接結構的好壞，決定了網頁的瀏覽速度的大小，同時對網站的管理和維護，如上傳、信息更新、擴充和移植都有著重要的影晌。合理安排網站的文件目錄，按攔目內容建立子目錄，利用Dreamweaver MX 2004的site功能定義網站的目錄，目錄層次分3層，首頁與一級網頁之間采用星狀連接結構，一級網頁與二級網頁之間采用樹狀連接結構。這樣設計的目的是以最少的層次提供最清晰簡便的訪問結構。

2.2 首頁的設計和制作

首先利用平面設計軟件Fireworks MX 2004設計個性化的背景和標題。建立一張760×600像素的空白圖，再按布局需要劃上大小不一的方框，把醫院住院部大樓的照片稍做處理后插入并修飾。選取切片工具，按方框結構進行切割，分割成小圖片。用Save for web來存成一個html文件和一個在images文件夾下的切割完成的圖片，images保存在根目錄中。接著，在Dreamweaver MX 2004中插入文字，運用層疊樣式表單技術加入樣式修飾網頁內容的外觀，如字體類型、顏色、大小、行距、背景、鏈接的方式等；導航菜單的內容較多，我們用層技術制作彈出式菜單，建立主菜單欄目，分別賦予對應的鏈接指向，然后在每個鏈接下面放置一個圖層對象，再把相應彈出菜單的內容放到隱藏圖層里。當瀏覽者的鼠標移到導航攔目時即顯示該層，當鼠標移開時隱藏該層。在網頁中使用彈出式菜單可以極大地節省網頁空間．并能夠使內容的分類顯示更具條理性。

2.3 二級三級網頁的制作

為使整個站點具有統一的風格，我們采用模板來制作二級、三級網頁。模板是批量生成風格類似的網頁工具。利用的模板，可以從網絡上下載得到，也可以是Dreamweaver MX中自帶的模板，還可以是自行設計的。站點中的網頁可大量快速利用模板制作出來，省時省力，而且方便修改。若固定元素要改變，只要修改模板，就可以修改應用了該模板的所有網頁，而不需要手動修改每一頁。在Dreamweaver MX制作模板更簡單，先編輯好要保存為模板的網頁后，在File菜單中點擊Save Templates，即可生成模板；模板生成之后，要建立可編輯區域，在此區域可填入不同的網頁內容，打開模板，單擊[插入]菜單，在彈出的下拉菜單中選擇[模板對象]，在子菜單中單擊[可編輯區域]出現可編輯區域對話框，輸入可編輯區域的[名稱]，單擊確定按鈕即可。保存后就建立了可編輯區的模板。接著即可批量生成網頁，單擊菜單[File／New]，選擇[Templates]選項，就可以看到建立生成的模板，單擊Create按鈕，模板就開始自動套用在網頁上。這時我們可以看到，原來的模板區域是黃色，其中的元素已經固定，不能編輯，而我們剛指定的可編輯區域是藍色，可以編輯。這樣一來，不但大大簡化了生成相似網頁的工作量，而且有效地保證了網頁風格的一致性。當我們要對所有網頁的公共元素進行改動時，只需修改模板中的元素即可。

3 網站測試、完善和發布

各級網頁制作完成后，試運行網站，需要在瀏覽器中預覽一下，按[F12]鍵測試。系統將自動啟動網絡瀏覽器IE,并在IE中打開當前頁面。利用Dreamweaver MX的鏈接檢查器，修正無效鏈接，接著調試網頁的兼容性，在不同瀏覽器(圖形界面、文本界面)和不同的設置(監視器分辨率、窗口大小、字體等)中能盡量顯示大體一致的信息。對網站進行修改、完善。最后，利用Dreamweaver MX 2004內置的FTP功能，上傳網站，發布出來。

4 結束語

Internet以豐富的信息資源和便捷的交流方式促進了信息社會的進步和經濟的發展，網頁設計制作是一個長期的系統工程，不是簡單的掌握一種編輯軟件就能制作出效果很好的網頁，要求精通圖片處理、排版、文字編輯等軟件，融會貫通，將各類軟件有機的結合在一起，通過頁面的宏觀布局，色彩的合理調配，文字的美工修飾，界面的動靜結合，才能制作出精彩的網頁來。

[1]戴一波.Dreamweaver MX 2004從基礎到實踐[M].北京：電子工業出版社，2005:33-108.

[2]陳斌，鄭偉，超曾斌.網頁制作夢幻三組合[M].上海;上海科學普及出版社，2004:5-66.

[3]陳強,霍繼文,葉兵.網頁制作實用技術FrontPage 2000[M].北京;清華大學出版社,2000:15-58.

[4]劉海疆, 李東博.網頁制作三劍客教程[M].陜西：西安電子科技大學出版社，2004:5-30.

[5]張福成，譚國鵬.制作網頁寶典[M].北京;人民郵電出版社，2000:13-66.

[6]王凱，張家才.跟我學網頁制作 網頁制作技巧與實例[M].北京; 冶金工業出版社,1999:20-47.

Design and making of Medical Engineering Department website based on dreamweaver MX 2004

MU Fei-hang, LI Qiu-li, ZHANG Fan, et al // China Medical Equipment,2011,8(2):24-26.

The software Dreamweaver MX 2004 was used to develop the Medical Engineering Department website of the Second Artillery General Hospital. The main objective of the paper was to realize propaganda, introduce downloading and show relative teaching video of the Medical Engineering Department.

Dreamweaver MX 2004; Website design

1672-8270(2011)02-0024-03

TP 751

A

2010-11-14

穆飛航,男,(1976- ),碩士研究生，工程師。第二炮兵總醫院醫療科，從事醫療設備管理工作。

[First-author's address]Department of Medical Affairs, the Second Artillery General Hospital, Beijing 100088, China.

①第二炮兵總醫院醫療科 北京 100088