12.1 網頁的工作間 12.2 固定頁寬與可變頁寬 12.3 草擬和設計網頁 12.4 導覽列與框架 12.5 使用框架 12.6 顏色的調配 12.7 將資訊編集成表單或 列表 12.8 適當地使用圖形、聲音檔案及動畫 12.9 將詳情放在可下載的檔案或其他頁面 12.10 使用有意義並能真正反映實況的連結 12.11 考慮常見瀏覽器的分別 12.12 在文件上註明日期 12.13 提供回應的渠道 12.14 方便列印

12.1 網頁的工作間 瀏覽器視窗的可視區域 遠小於屏幕的尺寸 瀏覽器視窗包含工具列和捲動軸 © 朗文香港教育

12.1 網頁的工作間 在瀏覽器中善用水平空間 空白邊緣 © 朗文香港教育

12.2 固定頁寬與可變頁寬 可變頁寬 固定頁寬 文字和圖形會因應情況換行或擴大，來適應瀏覽器視窗的寬度 12.2 固定頁寬與可變頁寬 可變頁寬 文字和圖形會因應情況換行或擴大，來適應瀏覽器視窗的寬度 固定頁寬 頁面的編排不會受瀏覽器視窗的尺寸影響 © 朗文香港教育

12.2 固定頁寬與可變頁寬 用了可變頁寬的網頁 用了固定頁寬的網頁 © 朗文香港教育

12.3 草擬和設計網頁 需考慮問題 做法 橫幅和導覽列的位置 使用框架 框架的尺寸 1. 先用鉛筆和白紙草擬網頁的編排 1. 先用鉛筆和白紙草擬網頁的編排 2. 利用網頁編寫軟件進行設計 © 朗文香港教育

12.3 草擬和設計網頁 頁面編排的草稿 最終的頁面編排 橫幅 導覽按鈕 圖片 標題 © 朗文香港教育

12.4 導覽列與框架 導覽系統的目的 導覽系統的內容 建立導覽系統時的注意事項 方便瀏覽人士瀏覽網頁 工具列 按鈕組 下拉功能表 導覽按鈕組應與頁面內容分開 © 朗文香港教育

12.5 使用框架 框架 框架的缺點 把瀏覽器視窗分割為幾部分 而每部分都會顯示不同的HTML文件 12.5 使用框架 框架 把瀏覽器視窗分割為幾部分 而每部分都會顯示不同的HTML文件 導覽列或選單放在獨立框架中，與內容框架分開 框架的缺點 並非所有瀏覽器皆支援有框架的網頁 增加搜尋引擎將網頁內容編入索引的難度 增加了要處理的HTML頁數目 © 朗文香港教育

12.5 使用框架 Topmenu.htm main.htm copyright.htm © 朗文香港教育

12.5 使用框架 分割框架 提供更多框架，使頁面的編排更具彈性 橫幅和導覽按鈕可置於不同的框架內，瀏覽時一直留在瀏覽器視窗內 12.5 使用框架 分割框架 提供更多框架，使頁面的編排更具彈性 橫幅和導覽按鈕可置於不同的框架內，瀏覽時一直留在瀏覽器視窗內 © 朗文香港教育

12.6 顏色的調配 網站的顏色運用 色環 吸引瀏覽人士的重要決定因素 避免不連貫的顏色設定 冷色 近似色 近似色 暖色 互補色 © 朗文香港教育

12.6 顏色的調配 互補色 提供最大的對比 引人注目 © 朗文香港教育

12.6 顏色的調配 近似色 提供最小的對比 營造輕鬆的氣氛 © 朗文香港教育

12.6 顏色的調配 紅色 ─ 超市網站 藍色 ─ IT 網站 綠色 ─ 天然產品網站 © 朗文香港教育

12.6 顏色的調配 冷色 ─ 作悼念用的網站 暖色 ─ 日用品網站 白色 ─ 醫療網站 © 朗文香港教育

12.7 將資訊編集成表單或列表 表單 文字和圖形可於不同的表單儲存格內 用表單顯示資訊 © 朗文香港教育

12.7 將資訊編集成表單或列表 列表 項目符號列表 編號列表 適用於顯示連續項目 適用於顯示相關類型的項目 © 朗文香港教育

12.8 適當地使用圖形、聲音檔案及動畫 盡量縮減網頁內多媒體檔案的大小 在適當的情況下，才可加入圖形、聲音檔案和動畫 © 朗文香港教育

12.9 將詳情放在可下載的檔案或其他 頁面 包含可下載的檔案或頁面連結之網頁 提供詳細的資料說明 讓瀏覽人士決定是否用合適的軟件來開啟 12.9 將詳情放在可下載的檔案或其他 頁面 包含可下載的檔案或頁面連結之網頁 提供詳細的資料說明 讓瀏覽人士決定是否用合適的軟件來開啟 © 朗文香港教育

12.9 將詳情放在可下載的檔案或其他 頁面 © 朗文香港教育

12.10 使用有意義並能真正反映實況的 連結 有意義並能真正反映實況的連結 隱藏冗長而又複雜的URL 提供關於URL的資訊 12.10 使用有意義並能真正反映實況的 連結 有意義並能真正反映實況的連結 隱藏冗長而又複雜的URL 提供關於URL的資訊 © 朗文香港教育

12.11 考慮常見瀏覽器的分別 在編寫網頁時，把重點放在基本的HTML語言 在發表網頁前，應在不同的瀏覽器中測試網頁 12.11 考慮常見瀏覽器的分別 在編寫網頁時，把重點放在基本的HTML語言 在發表網頁前，應在不同的瀏覽器中測試網頁 測試網頁對瀏覽器的兼容性 採用新版本的瀏覽器會支援的新技術 新舊版本與目標瀏覽人士的數量之間來權衡 舊瀏覽器 舊技術 較多的目標用戶 新瀏覽器 新技術 較少的目標用戶 © 朗文香港教育

12.12 在文件上註明日期 網頁註明日期的優點 讓瀏覽人士知道網頁的最後更新日期 © 朗文香港教育

12.13 提供回應的渠道 提供回應的渠道 電郵 留言簿 © 朗文香港教育

12.13 提供回應的渠道 填寫式表格 提供回應的渠道 討論區 © 朗文香港教育

12.13 提供回應的渠道 加入電郵連結 使用互聯網上的免費留言簿服務 使瀏覽人士與網頁管理員之間能直接溝通 簡單快捷的回應渠道 申請留言簿 12.13 提供回應的渠道 加入電郵連結 使瀏覽人士與網頁管理員之間能直接溝通 使用互聯網上的免費留言簿服務 簡單快捷的回應渠道 申請留言簿 帳戶 在網上建立 留言簿 在網頁上 貼上所需的 HTML碼 留言簿已連結 到網頁 © 朗文香港教育

12.14 方便列印 列印版文字應避免以下情況 網頁的寬度超出了列印頁的邊界 與內文無關的內容都被列印出來 12.14 方便列印 列印版文字應避免以下情況 網頁的寬度超出了列印頁的邊界 與內文無關的內容都被列印出來 將較長的內容分成多張HTML頁，增加打印的張數 © 朗文香港教育

12.14 方便列印 © 朗文香港教育

完