1、1,網站內容管理,教師：XXX XX年X月XX日,2,大綱,網路環境與網路使用者的特性 網站架構常見錯誤 網頁版面呈現的限制 瀏覽解析度 色彩呈現 字型呈現 網站架構規劃 網站架設步驟 網站架構規劃 網頁標準樣版 文字排版 網站設計原則,3,網路環境與網路使用者的特性,4,網路連線速度用戶概況,截至2002年12月底為止，我國 電話撥接用戶數 為 490萬戶， xDSL用戶數 為 182萬戶，Cable Modem用戶數 為 28萬戶， 其他連線用戶數 為 346.6萬戶 （其他連線：固接專線用戶數為1.6萬戶，ISDN用戶數為1萬戶，衛星用戶數約900戶， 學術網路(TANet)用戶數為34
2、4萬人。）將上述各個連線方式用戶數經過加權運算，並扣除低用度用戶、一人多帳號與多人一帳號等重複值後，估算2002年底我國上網人口達859萬人，網際網路連網應用普及率為38% 資料來源：XXXXXXX,5,網站使用者的特性,缺乏耐性 難以忍受尚在建構中或其他錯誤訊息 掃瞄的閱讀方式 容易迷失方向 懷疑資訊的可靠性 螢幕閱讀的忍耐時間短 文字不比影像吸引讀者 繪圖不如照片 搜尋引擎幫助有限 偏好互動模式,6,網站內容與讀者閱讀時間,7,網站建構之常見錯誤,8,網站設計者,HTML及相關程式撰寫經驗不足 路徑錯誤、程式錯誤 由視覺外觀為導向來製作網站 不斷的旋轉和彈跳，使用者需花費許多時間下載 由技
3、術面為導向製作網站 大量使用最新程式，使用者需使用最新版的瀏覽器,9,網頁設計常見錯誤 (1/7),視窗分割 常因操作或設計不當造成多重視窗 瀏覽器上的網址不一定是目前顯現網頁的精確網址 無法儲存正確的網頁書籤 列印的困擾,10,網頁設計常見錯誤 (2/7),濫用尖端的新科技 不可避免的必須強迫使用者下載、安裝與學習新的介面互動方式 冗長的下載檔案與等待時間 新科技往往不夠穩定，常會降低使用者電腦的速度或造成當機 複雜的網址（中文的網址） 不易記憶、不易傳播,11,網頁設計常見錯誤 (3/7),孤離的網頁、沒有導覽連結的網頁 使用者無法藉由此頁連結至其他頁面，且不易得知此頁之所屬主題或機關 欠
4、缺網站導覽 缺乏Site map、回首頁、網站主從主題結構提示 大型網站（超過100頁面）應提供站內搜尋引擎,12,網頁設計常見錯誤 (4/7),明顯的錯誤或過時的資訊 使用者對於網站中資訊的信任感普遍低於對傳統媒體的觀感 錯誤或過時的資訊會明顯降低使用者對此網站（機構）的信心與其競爭力 舊檔案線上保存的不足 跑馬燈式(閃爍)的文字及不斷重複的動畫 過多的跑馬燈文字或閃爍，不但無法造成吸引的效果，反而造成視覺上的混淆,13,網頁設計常見錯誤 (5/7),冗長的捲動型網頁 設計者必須盡量讓主要的網頁內容和重要的連結，在不需要下拉捲軸的範圍內完整呈現 超連結顏色使用的不一致 當有必要使文字超連結與
5、瀏覽器預設值不同時，也應遵循網站整體一致性的原則 上一頁按鈕無法使用 開新視窗 即時轉接網址 阻止快取記憶（Cache）的瀏覽,除非必要，否則應盡量避免！,14,網頁設計常見錯誤 (6/7),網頁介面符號的不一致 易造成使用者瀏覽上的困擾，且造成此單位不專業的印象,15,網頁設計常見錯誤 (7/7),未提供人物或著作出處的註明 應註明網站經營者的背景資料 著作及研究報告應註明出處及作者資訊網頁中提及特定人物時，勿只以電子信箱做連結，因為使用者非有特定需要，不會主動聯繫作者本人 不達意的標題或按鈕文字 以組織之部門作為標題連結 設計者個人的喜好詞彙,增加網站的可信度！,16,網頁版面呈現的限制,
6、瀏覽解析度限制 色彩呈現 字型呈現,17,640*480像素,800*600像素,1024*768像素,瀏覽器解析度的顯示差異,18,網頁排版安全區域,19,色彩呈現 - 黑白色系,20,色彩呈現 - 256色,21,色彩呈現 - True Color,22,GIF 檔案,Advantages of GIF Files All graphic Web viewers support the GIF format for inlined images. GIFs of diagrammatic images look better than JPEGs. GIF supports transpa
7、rency and interlacing.,23,JPEG 檔案,Advantages of JPEG Images Huge compression ratios are possible, for faster download speeds. Gives excellent results in most photographs and medical images. Supports full-color images (24-bit “true color“ images).,24,網頁字型及段落呈現,建議字型 新細明體、標楷體 Times New Roman、Arial 字體大小
8、 內文10 pt. 或 12 pt.，標題 14 pt. 或 16 pt. 建議段落 120 使用額外加入電腦系統之字型，易造成網頁顯示上的誤差。,25,網站架構規劃,好的網站是實用性(utility)與可用性(usability)的組合！網站架設步驟 網站架構規劃 網頁標準樣版 文字排版,26,網站的架構步驟,27,過於水平的網站架構,28,過深的網站架構,29,平衡的網站架構,首頁,目次,內容,30,網站架構示意,http:/ http:/ 文字連結會在網頁底部重複 在比較長的網頁上會使用一個連結回到頂端 在大量列印的網頁上會使用友善列印頁面 可以按的項目是藍色的，並且畫底線 次要的導覽元
9、素，例如網站地圖、搜尋等，與區域導覽分開呈現,33,網頁排版結構,34,網頁文字應用策略（1/3）,簡潔 使用者瀏覽網頁時，不傾向閱讀長篇幅文字。,35,網頁文字應用策略（2/3）,資訊分層 設計者應有計畫的將文字內容系統化的分成多層不同的段落，而後提供超連結讓使用者自由選讀。,幾個國內網站研究都一 致指出，不論在政府機關或 私人企業，多數的管理者都 開始注意網站的管理，因此 許多電子商務顧問公司應運 而生。,網站管理相關研究 1998 十大入口網站研究 1999 天下雜誌最佳商業網站選拔 2000 中央政府部會網站評估,台灣的電子商務顧問公司 哈哈 e 顧問 網路顧問,36,網頁文字應用策
10、略（3/3）,適合視覺掃瞄 凸顯關鍵字 以項目符號排列 應用具吸引力的文字內容 標題簡明清晰 應用淺顯易懂的文字 以次標題輔助說明 避免標新立異 避免故弄玄虛 圖示應加註解,37,網站設計原則,38,1. 要有清楚的結構,樹狀結構圖 網站地圖 組織性 顏色管理：以顏色作為使用者認識網站架構之線索 版面編排一致 當站內網頁超過100頁，需加上站內搜尋機制,39,2. 網站聯絡資訊明確,每頁盡量有logo、站名、URL、網頁建立日期、聯絡e-mail或電話地址 Logo和相關識別資訊固定在每頁的同一位置 提供人物或著作出處的註明,40,3. 網頁標題明確,每個網頁都應有標題 瀏覽器怎麼顯示網頁？
11、搜尋引擎怎麼找到網頁？ 搜尋引擎怎麼呈現找到的網頁？ Microsoft FrontPage 的 Newpage1、新網頁 網頁標題應有層屬關係，母項 - 子項,41,善用標題,標題可以抓住使用者的注意力 將標題獨立出來，能使網頁結構更清楚,42,4. 網頁圖文架構清晰,網頁架構和版面安排，應能幫助使用者掃瞄和篩選資訊，並能忽略不相關的大段文字 內容也應有適當簡潔的大小標題，以增加內容的可讀性 再有價值的內容，版面編排不好，使用者也很難耐心觀看，點閱率和回閱率都不會提高 圖檔提供文字說明,43,網頁編排效果比較,44,捲動捲軸依然清晰明確,45,重要資訊呈現,由於螢幕只能顯示網頁的一小部分，故
12、重要資訊要讓使用者一進來就可以看到！,800*600 screen area,46,5. 善用超連結,不要超連結到本頁（自己連自己） 與其將有關某一主題的資料全部編成一個超長的網頁，倒不如善用目次結構及超連結來建構內容 超連結能夠幫助使用者跳過不相關的資訊，以節省時間,47,6. 汲取成功網站經驗,上網看看大受好評的網站是怎麼設計的 若90 % 以上的網站都是這麼設計，這就是實務標準，請依樣畫葫蘆 若60-90 % 的網站都這麼設計，這是慣例，可以採用 若60 % 以下的網站這麼設計，則還沒取得共識，可以自由發揮,48,7. 網站開張前的測試,以真正的使用者做可用性測試 人都有盲點，都會有奇怪的理所當然 簡單的網站評估 網站目標、網站定位 內容 速度 瀏覽器支援 網站結構 視覺外觀與版面配置 導覽功能 搜尋機制,49,設計網站資訊架構的挑戰,以使用者的行為模式為核心，盡量遵循網站使用介面 (GUI) 的設計原則 易學、易記、少錯誤、高效率設計網站資訊架構的挑戰 個人詮釋角度的不同 內容的多樣性,50,致謝： XXXX製作本投影片,
