網站內容建置實務 報告人：電資官鄒堡旬少校
網站內容建置實務(一) 網站建置的元素、架構、運作 網站類型及演進 網站內容應用 網站的規劃設計 案例
網站建置的元素、架構、運作
網站建置的元素、架構、運作 主機(網站空間) 網頁(美工、程式) 內容(資料(訊)、資料庫) 管理 其他(網址、IP...) A:我要建一個網站 B: … 主機(網站空間) 網頁(美工、程式) 內容(資料(訊)、資料庫) 管理 其他(網址、IP...)
網站類型及演進 OS 作業系統 Windows XP 7 , 8 , Win Server Unix(Linux) Fedora , ubuntu,… Google …… Web server IIS Apache Tomcat… Tool ASP ASP.Net (C#,VB.Net) PHP ,Perl, CGI… dreamweaver Java, coldfusion… 美工媒體 Silverlight 小畫家… Flash, photoshop, photoimpact Database (資料庫) MS-SQL, Access… Mysql, Sqllite… Oracle…
網站類型及演進 Text-Based Site 圖文網站 搜尋 多媒體網站 Flash,Media … 內容應用等專業網站 Portal Web 2.0
網站內容應用 由網頁集合而成 網頁可分靜態及動態 靜態 : 內容異動性低,不需程式 由HTML語言構成提交User 。 動態 :內容異動性高,由程式處理資料, 產生HTML語言提交User ,資料可儲存於檔案或資料庫。
網站內容應用 EC (電子商務) Portal (組織 及 個人) 社群網站 eLearn 論壇網站 單位組織之網站
網站的規劃設計 版型 十一條規範 metadata 相關法規
網站的規劃設計--版型 國內政府網站版型、內容 研考會-政府網站版型與內容管理規範 網站的設計、內容選擇和分類方式以使用者為中心 目前現象 內容架構不一 重圖像表現 內容管理不完善 範例網站
網站的規劃設計--十一條規範 1.使用者的呈現裝置 2.網頁組成要素 3.導覽 4.首頁設計 5.文字樣式與連結 6.圖片與多媒體 7.表單 8.搜尋 9.內容提供 10.內容撰寫 11.內容管理
網站的規劃設計--網頁組成要素 網站名稱與識別標誌（Logo）左上 網站地圖（Sitemap）右上 回首頁（Home）右上 點選後可連結至首頁。 網站地圖（Sitemap）右上 呈現網站資訊的階層架構。 回首頁（Home）右上 意見信箱（Feedback）右上 應以表單為填寫介面。 系統自動回覆訊息 進度查詢
網站的規劃設計--網頁組成要素 常見問答（FAQs）右上 語言版本切換按鈕 （Languages）右上 PDA版切換按鈕 右上 資料甚多，可提供分類或關鍵字查詢 語言版本切換按鈕 （Languages）右上 建置雙語網站 切換至英文版的按鈕命名為「English」，切換至中文版的按鈕命名為「中文版」 PDA版切換按鈕 右上 注意版面寬度不超過240像素 Ex: 教育部 交通部民航局
網站的規劃設計--網頁組成要素 全站搜尋（Search） 雙語詞彙（Bilingual Glossary） RSS訂閱按鈕 資料內容更新頻率高的單元 內容重要、可主動告知訂閱者 資料日期（Date） 日期格式遵循(YYYY-MM-DD) 區分各筆資料的更新日期與網頁的更新日期
網站的規劃設計--網頁組成要素 留言版/討論區/論壇 (Message Board /Discussion Forum/ Forum) 留言者身分認證機制 留言後自動過濾不當詞彙 經管理者審核通過後才公佈 會員專區 （Member Login） 具身分稽核的會員專區更多元的服務 便民服務 （Online Service） 現行服務流程，適切轉置於網站上者
網站的規劃設計--網頁組成要素 無障礙或其他政府標章 聯絡電話（Phone Number）下方 聯絡地址（Address）下方 加上縣市區碼，如（089）318855 英文版應加上國碼，如（+886） 聯絡地址（Address）下方 應加上五碼郵遞區號 英文版則加上國名 地址英譯需依台灣郵政的建議格式 可加上「交通位置圖」連結
網站的規劃設計--網頁組成要素 隱私權政策（Privacy Policy）下方 網站安全政策（Security Policy）下方 84年制定的「電腦處理個人資料保護法」 網站安全政策（Security Policy）下方 應與各機關實際的資安政策一致 「我的E政府」標誌 （The E-government Entry Point）下方 連結網址http://www.gov.tw/
網站的規劃設計--導覽 導覽列以一致的風格與位置貫穿全站 導覽按鈕名稱應清楚易懂、符合慣例 圖示旁加上文字 Example1 Example2 導覽按鈕名稱應清楚易懂、符合慣例 圖示旁加上文字 使用者的目標、角色和興趣來做導覽分類 Example3 視窗標題 告知使用者目前所在的位置 Example4 長頁面加上可點選的目錄 (錨點 ,到最上面 TOP)
網站的規劃設計--首頁設計 呈現網站最主要的內容與服務 首頁不超過2到3個螢幕長 連至外站的按鈕 置於右中區塊靠下對齊
網站的規劃設計--文字樣式與連結 運用統一的CSS（串接樣式表） 文字格式使用一致的字型、顏色與尺寸 中文字使用系統預設的字型 英文字避免使用中文字型 文字大小使用相對尺寸而非固定尺寸 相對式單位， 如：% (百分比) 、 em(字體高)、ex(字母高) 避免選擇固定式單位 如： in(吋)、mm (公釐) 可下載的文件應採用開放性的檔案格式 (如pdf、wdl、html等)並註明檔案格式
網站的規劃設計--圖片與多媒體 網頁圖片兼顧清晰品質與下載時間 圖片尺寸適中，再輸出為JPEG或GIF 始頁為動畫，確保可略過動畫 製作起始頁建議以「按鈕」或「文字」連結下一頁，並提供「略過」（skip）功能 多媒體網頁可關閉音效 背景音樂會干擾身心障礙者使用輔具讀取 「音效開啟與關閉」的切換按鈕 Flash多媒體介面可以鍵盤操作 為影像、聲音、與多媒體介面提供文字說明
網站的規劃設計--表單 輸入框旁邊加註填寫限制、格式或提供填寫範例 按了「送出」按鈕才被告知 必填項目（通常是紅色「＊」 確保表單的可及性 確保輸入框有足夠的空間 格式錯誤或未填寫的資料，應告知
網站的規劃設計--搜尋 搜尋結果頁應方便檢閱 找不到相符資料時顯示「查無資料」 明確告知查詢結果筆數與頁數 上ㄧ頁、下一頁、第一頁與最後一頁，並告知目前所在頁數。 使用者所輸入關鍵字以粗體紅字表示。 檢索結果排序 提供進階搜尋
網站的規劃設計--內容提供 提供單位及主管業務介紹 提供民眾申辦機關服務的介紹及程序說明 提供單位最新消息、公告事項或活動時程等動態資訊 提供相關單位網站連結資訊 避免商業連結 提供影(語)音資訊服務（Audio Clips） 包含宣導短片、課程錄影、演講錄影等彙整成「影音專區」
網站的規劃設計--內容撰寫 網站提供內容透過螢幕閱讀，不同於紙張閱讀，故提供網頁內容撰寫方式相關規範 標題與重點應明確標示，以利快速瀏覽 連結文字與目標內容相符 英文版內容要適切 研考會已頒有《英文網站翻譯審稿作業參考手冊》
網站的規劃設計--內容管理 網站經常是由資訊部門主導架設，內容由組織內各單位協助與配合 內容管理流程，劃分責任歸屬與職掌，將工作分為審查、上稿、檢視等 公正 完備 可信 易讀 通順流暢 清楚明確 符合需求 定期更新網站內容，並標示更新日期 定期檢視全網站資料 無效連結 網頁內容 聯絡資訊與機關介紹
網站的規劃設計--內容管理 內容管理系統 參考研考會政府網站版型與內容管理規範P42 功能 描述 開放標準 系統可支援大部分的開放式標準，特別是XML或Web Service。 追蹤與審查 可紀錄系統上的編輯動作，並可透過系統審視追蹤。 Web Based（瀏覽器為介面） Web Based（瀏覽器為介面）讓維護人員無需在個人電腦上安裝特別的軟體，打開瀏覽器即可進入，且在任何地點、任何時間，只要能夠經由電腦連上網際網路即可操作。 可編輯網頁詮釋資料 系統可維護網頁詮釋資料（Metadata），如 Title、Description、Keyword等重要的詮釋資料。 人員權限管理 可讓網站管理者控制各單位、各單元維護人員的帳號、密碼與使用權限。 資料回溯能力 管理介面應能依照日期、時間來尋找和追溯歷史資料、下線資料及歷史檔案。 參考研考會政府網站版型與內容管理規範P42
網站的規劃設計-- metadata 協助搜尋引擎提供精確的資料 幫助身心障礙人士了解網頁概要 大多只有使用網頁Title資訊 提供Title、Description、Keywords等詮釋資料 幫助身心障礙人士了解網頁概要 藉由輔助系統讀取網頁時 大多只有使用網頁Title資訊 W3C標準 (Author , Date )…
網站的規劃設計-- metadata <HTML> <HEAD> <Title>網頁標題名稱</Title> <META name="description" content="內容資訊摘要"> <META name="Keyword" content="keyword1,keyword2,…"> <META name="Date" content="2006-11-22 "> <META name=" Author " content="NTTU"> </HEAD> <BODY> </BODY> </HTML>
網站的規劃設計--相關法規 智慧財產權 專利法、商標法、著作權法規資訊等 電腦處理個人資料保護法 個人資料保護法 個資法施行細則 網路言論 行為 商業行為