講義ch04 創新數位教材 銀髮族e化健康管理概論

銀髮族E化健康管理概論-CH4銀髮族E化健康管理系統(2/3)-網頁設計

 網頁設計概論  網頁功能  參考資料

銀髮族 E 化健康管理系統(2/3)-網頁設計

A-網頁設計概論 想要建構一個畫面漂漂、內容豐富的網頁，常用的方式可大概分為下列兩類：

一、幕後法─使用 HTML 語言來定義 早期的網頁設計者都是利用一般的文書編輯軟體來編寫 HTML 檔案，其優 點是適合於各種瀏覽器，可是缺點是一般新手在邊寫時較無法知道實際所編排出 來的效果如何，如果對 HTML 語言不太熟悉的話，效果落差很大，需要花些時 間技術才能熟練。 二、幕前法─採用網頁編輯軟體 由於使用 HTML 語言來定義方法，對於不太熟練時所編出來的網頁可能和理 想中的效果落差很大，慢慢地，強調所視即所得「WYSIWYG」(What You See Is What You Get)的網頁編輯器也紛紛出籠，使用這種方式的好處是不需要了解 HTML 語法，因此網頁設計不再是設計人員的專利，只要對編輯軟體有基本的認 識的人都可以快速完成。目前較常用的網頁編製軟體有 FrontPage 98、FrontPage Express 與 word97 等。 

FrontPage： FrontPage 是一套非常簡單易學的網頁編輯軟體，它的好處在 於不太需要了解 HTML 的原始碼，就可以用直覺的方式，只要選選功能 表，設定一下參數，一頁 HomePage 編排版的工作即可完成。



Dreamweaver： 網 頁 設 計 所 需 要 的 文 字 、 圖 片 、 聲 音 、 動 畫 、 互 動式設計都可以互相整合支援，創造出令人印象深刻、眩惑動 感、互動性強的作品，是許多專業網站設計師的最愛。



Word：如果您只會使用 Word 而且不想再學習其他網頁製作軟體或 HTML 語法，也可以利用 word 編製網頁內容存成.html 格式後，以後透過瀏覽 器也可以，不過 word 畢竟不是一套專業的網頁設計軟體，用它所設計出 的作品，經過瀏覽器後的效果可能會出現莫名奇怪的結果，因此建議還是 花點時間學習一套專業的網頁設計軟體較為保險。

至於設計網頁時應注意哪些事項呢？根據專家們的經驗大概有下列幾點： 一、畫面部份 目前 PC 所使用的螢幕大都採用 VGA 顯示卡，而標準的 VGA 卡的螢幕解析 度為 640×480，所以使用 640×480 的畫面設計大致能讓最多人能正確無誤的觀看， 而不需要拉動捲軸。 二、版面風格應統一 為了讓觀賞者有一致性的感覺，且順利迅速瀏覽其他網頁，設計時應注意版 面風格上的統一， 例如使用同樣背景顏色、標題文字的字型大小風格統一、瀏 覽的方式相同......等。 三、文字應巧妙且恰到好處 如果能善用變換字體大小、字距、行距、字體、顏色等技巧，可讓版面看起 來顯得更生動，但是也應恰到好處，不宜過份花俏、也不要用太多的特殊字形， 並且最好不要使用閃爍文字，雖然閃爍文字可以引人矚目，但也容易令人眼花撩 亂。 四、圖片不要太大且有文字說明 圖片雖有強化視覺效果，營造網頁氣氛、活潑版面效果，但是圖片卻也有其 致命缺點，因為圖片的檔案容量相當驚人，非常不力於傳輸，因此使用圖片時務 必考慮「圖片資料量的大小」和「檔案格式的普遍化」，格式最好採用 GIF 和 JPEG，原則上一頁網頁的資料量不宜超過 100K，並且每張圖最好能加上文字說 明。 五、注意連結緊密與順暢 盡量將連結的文字融合在文章當中，避免文章看起來很突兀，同時每一網頁 的下方提供連結以便引導參觀者回到上一層或再連結到下一層以及首頁，千萬不 要發生連結失敗〝Not Found〞，那是非常令人掃興的。

B-網頁功能 1 程式預覽 首先，我們將先來介紹一下程式大致的功能。

1.1 會員管理機制 要讓一個程式可以給多人來使用，就必須要有一套會員管理機制，而會員管 理機制主要包含三個功能：註冊、認證、帳號管理。 1.1.1 註冊機制

圖 2-1 註冊功能 註冊最重要的一件事就是設定帳號密碼，也就是說，到時候要看健康檢查的 資料，得先用帳號密碼來登入才可以，如此，也可以避免任意甲乙丙丁的路人隨 意觀看健康檢查資料。

1.1.2 認證機制

圖 2-2 認證機制 既然需要登入，那就得有一個認證的機制，好判斷使用者的帳號密碼是否正確。 1.1.3 帳號管理機制

圖 2-3 帳號管理機制

既然有註冊的功能，那麼也會提供資料修改的功能，例如修改密碼，或者修 改 Email…等。

1.2 醫療資訊建置管理系統主功能 1.2.1 新增、修改健康檢查資料

圖 2-4 新增與修改 提供使用者新增和修改健康檢查資料的功能，這兩個功能會共用一個表單， 所以，如何讓表單知道現在到底是要新增還是修改是很重要的。

1.2.2 可能症狀判斷

圖 2-5 症狀診斷 將輸入的健康檢查資料，傳入資料庫中，並判定可能的症狀輸出，並且包涵 將症狀列印的功能。

2 程式規劃 在動手寫之前，先規劃好一些基本的作法，讓開發時有所依循，免得到時後 又要重改整個架構。

2.1 程式基本架構 在 index.php 中，利用 switch 來控制整個功能及流程，也就是說，所有的功 能都只要執行 index.php 檔就行了，利用不同變數讓程式去判斷，以便執行不同 的動作。 將所有的功能寫成一個一個的 function，然後統一放在 function.php 中，這 樣 index.php 看起來會比較清爽，維護也比較輕鬆。 至於外觀，我們利用 CSS 來控制，也就是另外做一個 style.css 的檔案來定 義一些外觀樣式。 而會員的註冊資料以及健康檢查資料將放在我們所建立的 data 目錄中，至 於資料檔的格式，利用 csv 檔來儲存。 所以，index.php 等於是中控中心，他會先引入 setup.php 設定檔，好讓這些 設定可以在程式中使用。接著會引入 function.php 以便隨時取用裡面的函數，同 時，也會引入 style.css 以便使用裡頭的樣式定義來控制外觀。 整理一下架構：  data 目錄：用來存放會員註冊資料以及健康檢查資料  index.php：主要執行的檔案  function.php：把所有的功能寫成函數並放在此檔中  setup.php：設定檔  style.css：用來定義外觀的 CSS 檔

C-參考網站

1-中華民國網頁設計丙級檢定教學影片 電腦技能檢定網站將提供電腦軟體應用丙級、網頁設計丙級、電腦軟體應 用乙級、電腦硬體裝修丙級、電腦軟體設計丙級、網路架設丙級、電腦立 體製圖丙級、微軟 MOS 國際認證等檢定科目，教學影片(含下載教學檔) 解題

2-網站架設網頁設計教學課程 Top Website Design teaching 你不用每星期跑補習班，趕著時間跟老師上課！百分之百的上課實際操作 錄製的教學影片 ... 從現在開始 , 您可以完全靠自己 ! 網站架設網頁設 計教學課程【手到擒來】同時還有技術諮詢服務 ! 不論您是學生、電腦 使用者、美工、店家

3-撇步王 - 線上影片教學： (2 人在瀏覽線上影片教學) 會員: 0 訪客: 13 尚有... 健康小語 選擇滑鼠 時要注意大小 Size，要配合您的手大小！ 搜尋其他教學 ... 總目錄 » 網 頁設計 相關 : DreamWeaver MX 網頁設計完整學習 : ←Back ‧贊助連 結 ...