1 / 30

網站內容建置實務

網站內容建置實務. 報告人：電資官鄒堡旬少校　. 網站內容建置實務 ( 一 ). 網站建置的元素、架構、運作 網站類型及演進 網站內容應用 網站的規劃設計 案例. 網站建置的元素、架構、運作. 網站建置的元素、架構、運作. A: 我要建一個網站 B: … 主機 ( 網站空間 ) 網頁 ( 美工、程式 ) 內容 ( 資料 ( 訊 ) 、資料庫 ) 管理 其他 ( 網址、 IP...). 網站類型及演進. 網站類型及演進. Text-Based Site 圖文網站 搜尋 多媒體網站 Flash,Media … 內容應用等專業網站 Portal

chase
Download Presentation

網站內容建置實務

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related