Download
slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
網站內容建置實務 PowerPoint Presentation
Download Presentation
網站內容建置實務

網站內容建置實務

181 Views Download Presentation
Download Presentation

網站內容建置實務

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. 網站內容建置實務 報告人:電資官鄒堡旬少校 

  2. 網站內容建置實務(一) • 網站建置的元素、架構、運作 • 網站類型及演進 • 網站內容應用 • 網站的規劃設計 • 案例

  3. 網站建置的元素、架構、運作

  4. 網站建置的元素、架構、運作 A:我要建一個網站 B: … 主機(網站空間) 網頁(美工、程式) 內容(資料(訊)、資料庫) 管理 其他(網址、IP...)

  5. 網站類型及演進

  6. 網站類型及演進 • Text-Based Site • 圖文網站 • 搜尋 • 多媒體網站 • Flash,Media … • 內容應用等專業網站 • Portal • Web 2.0

  7. 網站內容應用 • 由網頁集合而成 • 網頁可分靜態及動態 • 靜態 : 內容異動性低,不需程式 由HTML語言構成提交User 。 • 動態 :內容異動性高,由程式處理資料, 產生HTML語言提交User ,資料可儲存於檔案或資料庫。

  8. 網站內容應用 • EC (電子商務) • Portal (組織 及 個人) • 社群網站 • eLearn • 論壇網站 • 單位組織之網站

  9. 網站的規劃設計 • 版型 • 十一條規範 • metadata • 相關法規

  10. 網站的規劃設計--版型 國內政府網站版型、內容 研考會-政府網站版型與內容管理規範 網站的設計、內容選擇和分類方式以使用者為中心 目前現象 內容架構不一 重圖像表現 內容管理不完善 範例網站

  11. 網站的規劃設計--十一條規範 • 1.使用者的呈現裝置 • 2.網頁組成要素 • 3.導覽 • 4.首頁設計 • 5.文字樣式與連結 • 6.圖片與多媒體 • 7.表單 • 8.搜尋 • 9.內容提供 • 10.內容撰寫 • 11.內容管理

  12. 網站的規劃設計--網頁組成要素 • 網站名稱與識別標誌(Logo)左上 • 點選後可連結至首頁。 • 網站地圖(Sitemap)右上 • 呈現網站資訊的階層架構。 • 回首頁(Home)右上 • 意見信箱(Feedback)右上 • 應以表單為填寫介面。 • 系統自動回覆訊息 進度查詢

  13. 網站的規劃設計--網頁組成要素 • 常見問答(FAQs)右上 • 資料甚多,可提供分類或關鍵字查詢 • 語言版本切換按鈕 (Languages)右上 • 建置雙語網站 • 切換至英文版的按鈕命名為「English」,切換至中文版的按鈕命名為「中文版」 • PDA版切換按鈕 右上 • 注意版面寬度不超過240像素 • Ex: 教育部交通部民航局

  14. 網站的規劃設計--網頁組成要素 • 全站搜尋(Search) • 雙語詞彙(Bilingual Glossary) • RSS訂閱按鈕 • 資料內容更新頻率高的單元 • 內容重要、可主動告知訂閱者 • 資料日期(Date) • 日期格式遵循(YYYY-MM-DD) • 區分各筆資料的更新日期與網頁的更新日期

  15. 網站的規劃設計--網頁組成要素 • 留言版/討論區/論壇(Message Board /Discussion Forum/ Forum) • 留言者身分認證機制 • 留言後自動過濾不當詞彙 • 經管理者審核通過後才公佈 • 會員專區 (Member Login) • 具身分稽核的會員專區更多元的服務 • 便民服務 (Online Service) • 現行服務流程,適切轉置於網站上者

  16. 網站的規劃設計--網頁組成要素 • 無障礙或其他政府標章 • 聯絡電話(Phone Number)下方 • 加上縣市區碼,如(089)318855 • 英文版應加上國碼,如(+886) • 聯絡地址(Address)下方 • 應加上五碼郵遞區號 • 英文版則加上國名 • 地址英譯需依台灣郵政的建議格式 • 可加上「交通位置圖」連結

  17. 網站的規劃設計--網頁組成要素 • 隱私權政策(Privacy Policy)下方 • 84年制定的「電腦處理個人資料保護法」 • 網站安全政策(Security Policy)下方 • 應與各機關實際的資安政策一致 • 「我的E政府」標誌 (The E-government Entry Point)下方 • 連結網址http://www.gov.tw/

  18. 網站的規劃設計--導覽 • 導覽列以一致的風格與位置貫穿全站 • Example1 • Example2 • 導覽按鈕名稱應清楚易懂、符合慣例 圖示旁加上文字 • 使用者的目標、角色和興趣來做導覽分類 • Example3 • 視窗標題 • 告知使用者目前所在的位置 • Example4 • 長頁面加上可點選的目錄 • (錨點 ,到最上面 TOP)

  19. 網站的規劃設計--首頁設計 • 呈現網站最主要的內容與服務 • 首頁不超過2到3個螢幕長 • 連至外站的按鈕 置於右中區塊靠下對齊

  20. 網站的規劃設計--文字樣式與連結 • 運用統一的CSS(串接樣式表) • 文字格式使用一致的字型、顏色與尺寸 • 中文字使用系統預設的字型 • 英文字避免使用中文字型 • 文字大小使用相對尺寸而非固定尺寸 • 相對式單位, 如:% (百分比) 、 em(字體高)、ex(字母高) 避免選擇固定式單位 如:in(吋)、mm (公釐) • 可下載的文件應採用開放性的檔案格式 (如pdf、wdl、html等)並註明檔案格式

  21. 網站的規劃設計--圖片與多媒體 • 網頁圖片兼顧清晰品質與下載時間 • 圖片尺寸適中,再輸出為JPEG或GIF • 始頁為動畫,確保可略過動畫 • 製作起始頁建議以「按鈕」或「文字」連結下一頁,並提供「略過」(skip)功能 • 多媒體網頁可關閉音效 • 背景音樂會干擾身心障礙者使用輔具讀取 • 「音效開啟與關閉」的切換按鈕 • Flash多媒體介面可以鍵盤操作 • 為影像、聲音、與多媒體介面提供文字說明

  22. 網站的規劃設計--表單 • 輸入框旁邊加註填寫限制、格式或提供填寫範例 • 按了「送出」按鈕才被告知 • 必填項目(通常是紅色「*」 • 確保表單的可及性 • 確保輸入框有足夠的空間 • 格式錯誤或未填寫的資料,應告知

  23. 網站的規劃設計--搜尋 • 搜尋結果頁應方便檢閱 • 找不到相符資料時顯示「查無資料」 • 明確告知查詢結果筆數與頁數 • 上ㄧ頁、下一頁、第一頁與最後一頁,並告知目前所在頁數。 • 使用者所輸入關鍵字以粗體紅字表示。 • 檢索結果排序 • 提供進階搜尋

  24. 網站的規劃設計--內容提供 • 提供單位及主管業務介紹 • 提供民眾申辦機關服務的介紹及程序說明 • 提供單位最新消息、公告事項或活動時程等動態資訊 • 提供相關單位網站連結資訊 • 避免商業連結 • 提供影(語)音資訊服務(Audio Clips) • 包含宣導短片、課程錄影、演講錄影等彙整成「影音專區」

  25. 網站的規劃設計--內容撰寫 網站提供內容透過螢幕閱讀,不同於紙張閱讀,故提供網頁內容撰寫方式相關規範 • 標題與重點應明確標示,以利快速瀏覽 • 連結文字與目標內容相符 • 英文版內容要適切 • 研考會已頒有《英文網站翻譯審稿作業參考手冊》

  26. 網站的規劃設計--內容管理 網站經常是由資訊部門主導架設,內容由組織內各單位協助與配合 • 內容管理流程,劃分責任歸屬與職掌,將工作分為審查、上稿、檢視等 • 公正 完備 可信 易讀 通順流暢 清楚明確 符合需求 • 定期更新網站內容,並標示更新日期 • 定期檢視全網站資料 • 無效連結 網頁內容 • 聯絡資訊與機關介紹

  27. 網站的規劃設計--內容管理 • 內容管理系統 參考研考會政府網站版型與內容管理規範P42

  28. 網站的規劃設計-- metadata • 協助搜尋引擎提供精確的資料 • 提供Title、Description、Keywords等詮釋資料 • 幫助身心障礙人士了解網頁概要 • 藉由輔助系統讀取網頁時 • 大多只有使用網頁Title資訊 • W3C標準 (Author , Date )…

  29. 網站的規劃設計-- 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>

  30. 網站的規劃設計--相關法規 • 智慧財產權 • 專利法、商標法、著作權法規資訊等 • 電腦處理個人資料保護法 • 個人資料保護法 • 個資法施行細則 • 網路言論 行為 • 商業行為