12.1 網頁的工作間 12.2 固定頁寬與可變頁寬 12.3 草擬和設計網頁 12.4 導覽列與框架 12.5 使用框架

Presentation on theme: "12.1 網頁的工作間 12.2 固定頁寬與可變頁寬 12.3 草擬和設計網頁 12.4 導覽列與框架 12.5 使用框架"— Presentation transcript:

1 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 方便列印

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

30 完