香港中學ICT 舊資源 Powerpoint

1. 基本網頁編寫
20.1 甚麼是網頁編寫？
 網頁編寫
 建立網站的過程。
 當中涉及組織一系列相關的網頁和把它們連結起來。
 主要包括：
 網站結構設計
 網站版面設計
 網頁編寫軟件：
 文本編輯器 — 適合初學者
 記事本
 具整合功能的網頁編寫軟件
 Adobe Dreamweaver
 Microsoft Expression Web
1
基本網頁編寫
20.2 計劃和組織網站
 網站開發
 開發網站的三個階段：
 計劃網站
 建立網站
 發表和測試網站
在網頁內加入我
的照片和日記。
2
利用 HTML 碼來建立網站 測試該網站
計劃一個網站
網站開發的三個階段
基本網頁編寫
20.2 計劃和組織網站
 計劃網站
 明確地識別網站的預期讀者。
 訂立清晰的目的。
 計劃要在網站中展示的資訊，以及這些資訊該如何被展示出來。
3
基本網頁編寫
20.2 計劃和組織網站
 計劃網站
 識別預期讀者
 預期讀者是指預計會瀏覽我們網站的用戶群。
 先識別合適的預期讀者能確保我們的網站，在設計、內容和所要提供
的功能上可以迎合他們的需要。
4
來源： http://www.thinkinenglish.com 來源：http://www.britishcouncil.org/kids.htm
為不同讀者而設的英語學習網站：成人（左）及兒童（右）

2. 基本網頁編寫
20.2 計劃和組織網站
 計劃網站
 識別網站預期讀者的因素：
 職業（例如：學生、電腦專家、家庭主婦等）
 年齡
 性別
 語言
 教育程度
 興趣
 瀏覽習慣
 地理位置
5
基本網頁編寫
20.2 計劃和組織網站
 為網站訂定清晰的目的
 設定了清晰的目的後，我們會對網站該包含哪些內容和它最終能夠
達到的目標有更明確的了解。
 我們不應訂立太多目的，以免訪客感到不知所措。
6
基本網頁編寫
20.2 計劃和組織網站
 設計網站的資訊結構
 一個網站的結構是用來描述站內的資訊該如何組織。
 適用於上述「偉傑中學」網站的資訊結構，它顯示了站內的網頁以
分層結構的形式作連結：
7
基本網頁編寫
20.2 計劃和組織網站
 設計網站的資訊結構
 網站的首頁 (portal)
 一般稱為主頁，是我們到訪一個網站時首先見到的一個頁面。
 主頁是一個網站最頂層的網頁。
 其檔案名稱一般為index.htm 或index.html。
 「主頁」是其他下層網頁的母網頁。
 子網頁
 在一個母網頁下的網頁。
 網頁可以既是母網頁，也是子網頁。
 母網頁之下最少包含一個網頁。
 子網頁則在其上連結至一個母網頁。
8

3. 基本網頁編寫
20.2 計劃和組織網站
 設計網站的資訊結構
 網站的資訊結構：
 線性結構
 分層結構
 循環結構
 網形結構
線性結構
循環結構
9
網形結構
分層結構
不同的網站資訊結構
基本網頁編寫
20.2 計劃和組織網站
 設計網站的資訊結構
 有些網站運用的設計甚至是上述結構的組合。
 組合出來的結構能使相關的資訊有更全面的連結。
 以順序排列的線性結構卻可以清晰簡單地組織資訊。
分層結構和循環結構的組合
10
基本網頁編寫
20.2 計劃和組織網站
 設計網站的資訊結構
 若與網形結構相比，線性結構則更適用於建立一個自學網站。
 分支的線性結構
 訪客便可以從分支中返回主序列內原有的節點。
分支的線性結構
11
基本網頁編寫
20.2 計劃和組織網站
 構思每個網頁的內容和版面
 網站的主頁一般包含概括的資訊，而由此連結至的子網頁則包含
更多詳細的資訊。
 若每個網頁的內容規劃得清晰，訪客便能清楚知道有甚麼資訊或
某項資訊可從那裏獲得。
 可以在網站中建立資料夾或子資料夾，並把相關的檔案或網頁放
在同一資料夾內。
 把網頁放在不同的資料夾內並不會影響早前設定的網站資訊結構。
12

4. 基本網頁編寫
20.2 計劃和組織網站
 構思每個網頁的內容和版面
 在構思各網頁的內容後，我們可設計網站的版面。
13
常見的網頁版面設計
基本網頁編寫
20.2 計劃和組織網站
 構思每個網頁的內容和版面
 頁首
 頂部的區域。
 一般包含一個標誌或一面橫額。
 導覽按鈕
 包含連接至子網頁的連結。
 那些連結能以文本或圖像的形式建立。
 當連結被點擊，相關的網頁會被載入在內容區域內。
 每個子網頁都須載有連接至網站主頁的連結。
14
基本網頁編寫
20.2 計劃和組織網站
 為網頁預備材料
 來源
 書籍
 雜誌
 互聯網
 多媒體元素
 文本資訊
 圖像
 音頻
 視像
 電腦動畫
15
基本網頁編寫
20.2 計劃和組織網站
 為網頁預備材料
動畫 音頻和
視像
圖像
16
文本
來源：http://www.natgeotv.com包
含不同多媒體元素的網頁

5. 基本網頁編寫
20.2 計劃和組織網站
 為網頁預備材料
 使用過多多媒體元素卻可能使網站運作變得緩慢、網頁變得累贅
和不切實際。
 應要確保所提供的資訊是正確、合法和最新的。
 若果我們要在網站內加入任何受版權保護的材料，我們需獲得作
者或版權持有人的書面允許。
17
基本網頁編寫
20.2 計劃和組織網站
 建立網站
 建立既吸引又富可讀性的網站的指引：
 運用整合網頁編寫工具
 與文本編輯器相比，具整合功能的網頁編寫工具是建立網站的
較佳選擇。
 提供用戶友好的界面。
 設有大量有用的工具可供我們建立和維護不同規模的網站。
 這使網頁編輯更為容易。
18
基本網頁編寫
20.2 計劃和組織網站
Adobe Dreamweaver CS3
Microsoft Expression Web
為開發和管理網站而設的網頁編寫工具
19
基本網頁編寫
20.2 計劃和組織網站
 建立網站
 建立既吸引又富可讀性的網站的指引：
 把內容分類
 確保早前定下的網站資訊結構已把站內所有的內容作仔細的分類。
 網站的內容可按分類被轉換為一系列的網頁。
 緊記要以超連結把這些網頁連繫穩妥。
 建立既吸引又富可讀性的網站的指引：
 提供恰當的多媒體元素
 在網頁上適當的位置加入不同的多媒體元素。
 但若果它們不恰當地出現，就可能會分散訪客閱讀網頁主要內容的專注。
20

6. 基本網頁編寫
20.2 計劃和組織網站
 建立網站
 建立既吸引又富可讀性的網站的指引：
 避免網頁過長
 網頁的內容應只集中於一至兩個主題。
 過長的網頁一般都不大受歡迎。
 若果我們需要展示一些關於某個複雜主題的資料，我們可以把那些數據
分類為較小的部分。
 然後為每個分類建立獨立的網頁。
 保持一致的設計
 網站內的網頁都應該共用同一個設計。
 一致的設計能令網站給人一個統一的感覺。
21
基本網頁編寫
20.2 計劃和組織網站
 建立網站
 建立既吸引又富可讀性的網站的指引：
 建立超連結以供網站導覽
 當所有網頁已被開發，可按先前所設定的資訊結構來把網頁以超連結連
接起來。
 建議在每個網頁上都加入導覽列。
 這樣訪客就可以隨時透過超連結跳至主頁及網站的其他主要部分。
22
基本網頁編寫
20.2 計劃和組織網站
導覽列
超連結
23
來 源 ：
http://www.wikipedia.org
包含導覽列和超連結的網站
基本網頁編寫
20.2 計劃和組織網站
 建立網站
 建立既吸引又富可讀性的網站的指引：
 在合理的時間內開啟一個網頁
 用以開啟一個網頁或從網站下載一個檔案所需的時間必須合理。
 若果時間過久，訪客或會放棄瀏覽這個網站。
 建立既吸引又富可讀性的網站的指引：
 保持更新你的網站
 網站的內容必須保持更新。
 可使訪客定期瀏覽你的網站。
24

7. 基本網頁編寫
20.2 計劃和組織網站
 網站發表
 要在互聯網上發表一個網站，我們須要把所需的網頁和多媒體檔案
上載至網伺服器。
 網伺服器
 長期連接至互聯網的網頁寄存電腦。
 上載網頁可以透過
 網頁瀏覽器
 檔案傳輸協定（FTP）軟件
 網頁寄存公司所提供的用戶界面。
 部分網頁編寫軟件亦有提供用以直接上載檔案至網伺服器的工具。
25
基本網頁編寫
20.2 計劃和組織網站
 網站發表
Adobe Dreamweaver CS3（左）和 FTP 軟件（右）內的檔案上載設定
26
基本網頁編寫
20.2 計劃和組織網站
 網站發表
 免費的網頁寄存服務的例子：
 Google Page Creator
 Yahoo! GeoCities
 這些免費的服務往往都會在貯存空間和通訊速度上有所限制。
 商業的網頁寄存服務：
 提供較大的貯存容量。
 較快和較可靠的通訊連結。
27
基本網頁編寫
20.2 計劃和組織網站
 網站發表
來源：http://pages.google.com 來源：http://geocities.yahoo.com/home/
免費的網頁寄存服務 — Google Page Creator（左）和Yahoo! GeoCities（右）
28

8. 基本網頁編寫
20.2 計劃和組織網站
 網站測試
 應在上載網站至互聯網後，重新測試網站內的各個部分。
 在測試網站時可能會出現的問題：
 包含失效的超連結
 導致失效超連結的原因
 檔案被放置在錯誤的資料夾內
 檔案名稱被更改或檔案在上載後不能被正確辨識
 在上載過程中遺失檔案或檔案遭受破壞
 超連結包含絕對路徑
29
基本網頁編寫
20.2 計劃和組織網站
 網站測試
 在測試網站時可能會出現的問題：
 遺漏超連結
 當網頁遺漏一個或多個超連結時，訪客或許便會未能返回上一頁或更高
層階的網頁。
 在測試網站時可能會出現的問題：
 包含過時的檔案
 當部分剛更新或剛建立的檔案被放置在錯誤的資料夾。
 包含過時資訊的舊檔案或仍會存在於網站之中。
 有機會造成檔案資料上的混亂。
30
基本網頁編寫
20.2 計劃和組織網站
 網站測試
 在測試網站時可能會出現的問題：
 需要較長時間來下載一個檔案
 應測試下載網頁及多媒體檔案所需的時間。
若果檔案太大，用戶或需要較長時間來下載。
31
基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 Adobe Dreamweaver
 一個專業的網頁編寫工具，用以設計網頁和管理網站。
 具備一個整合開發環境（IDE），當中包括：
 編碼器
 圖形用戶界面編輯器
 所提供的用戶友好界面能便利網站的建立，省卻使用文本編輯器
的煩瑣。
32

9. 基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 網站定義
 在建立網頁之前，我們須要先透過設定網站的名稱和本機根資料
夾來定義網站。
 Dreamweaver 內「網站定義」的過程：
1. 選取「網站」 →「 新增網站」來建立一個新網站。
33
基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 網站定義
2. 為新網站輸入名稱和 HTTP 網址（
URL）。若你現在還未知道其 URL，
3. 選擇你是否要使用HTML 以外的伺服
器技術來建立網站。
34
你可暫時把它留空。
基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 網站定義
4. 設定電腦上的某處作為本機主機。 5. 設定連接至遠程主機的連接方法，例如
FTP。
35
基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 網站定義
7. 完成「網站定義」。
36
6. 選擇是否要啟動「存回和取出」，以確
保同一時間只有一人可以編輯同一檔案。

10. 基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 網站定義
 若果你其後想更改在「網站定義」中所作的設定：
 在功能表列上選取「網站」「管理網站」「編輯」。
37
基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 網站管理
 「檔案」面板可用來設定一個網站的結構。
網站選單：選擇要管理的
網站或磁碟機。
連線至遠端主機
下載檔案：從網伺服器下載
檔案。
上傳檔案：把檔案上載至網
伺服器。
重新整理：更新檔案窗格
中所列的檔案清單。
檢視選單：切換至不同的檢
視，例如：本機檢視、遠端
檢視等。
檔案窗格：顯示檔案和資料
夾的目錄。
展開以顯示本機和遠端網站
同步：合併本機主機和遠
程主機內的檔案。
38
基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 網站管理
 「檔案」面板可用來：
 管理在本機及遠程主機內的檔案，當中包括移動、加入及刪除檔案及
資料夾
 建立及以圖像顯示網站的資訊結構
 追蹤任何的檔案更新或檔案之間的失效連結
 在有需要時，更正超連結的 URL
39
基本網頁編寫
3. Adobe Dreamweaver CS3 在網站開
發中的基本操作
 網站管理
Dreamweaver 建議任
何需要的更改，以避免令
網頁 出現失效的連結。
檔案被移至（拖曳）至新
的位
置。
40
受影響的網頁能正確地顯示
那些
圖像。

11. 基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 使用 Adobe Dreamweaver CS3 作網站建立的基本操
作
 Dreamweaver 備有不少有用的面板。
 可利用當中不同類別的功能來建立網站。
Adobe Dreamweaver CS3
中的工作區
41
基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 使用Adobe Dreamweaver CS3 作網站建立的基本操作
 文件工具列
 位於 Dreamweaver 工作區內左邊窗格的上方。
程式碼檢視 設計檢視 視覺輔助
分割檢視 文件標題
在瀏覽器中預覽/ 除錯
檔案管理
文件工具列上的按鈕
42
基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 使用Adobe Dreamweaver CS3 作網站建立的基本操作
 文件工具列
按 鈕 描 述
程式碼檢視
程式碼檢視只顯示 HTML 碼。
設計檢視
• 只顯示網頁的外觀。
• 網頁設計員通常在「設計檢視」中建構網頁的版面。
分割檢視
• 網頁的外觀和相應的 HTML 碼都會顯示出來。
• 網頁設計員通常在「分割檢視」中微調網頁。
在文件工具列上不同按鈕的描述
43
基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 使用Adobe Dreamweaver CS3 作網站建立的基本操作
 文件工具列
按 鈕 描 述
文件標題 每個網頁的標題可明確地輸入在這個文字框內。
檔案管理
利用這個按鈕，檔案可在本機和網伺服器間傳送、上載
或下載
在瀏覽器中預覽 / 除錯
在任何已安裝的網頁瀏覽器上檢視那個網頁真實顯示出
來的外觀。
在文件工具列上不同按鈕的描述
44

12. 基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 使用Adobe Dreamweaver CS3 作網站建立的基本操作
 文件工具列
按 鈕 描 述
視覺輔助
• 在「設計檢視」中提供「視覺輔助」，以協助網頁設計員
建立包含框線或具尺寸的物件，如框、表格、圖像等。
• 例如你可以選擇為一個無框線的表格加入虛擬框線，以助
你識別表格內的每個儲存格。
• 所加入的視覺輔助不會被顯示在網頁瀏覽器上。你可隨時
利用這個按鈕來選擇開啟或關閉所提供的不同選項。
在文件工具列上不同按鈕的描述
45
基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 使用 Adobe Dreamweaver CS3 作網站建立的基本操作
 插入工具列
表格 媒體
超連結
電子郵件連結
命名錨點 影像 日期 註解
「常用」插入工具列上的按鈕
 「版面」插入工具列
 加入框和表格等。
 「文字」插入工具列
 把不同文本格式套用到所選取的文本。
46
基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 使用 Adobe Dreamweaver CS3 作網站建立的基本操作
 屬性檢測器
 一個位於 Dreamweaver 工作區下方的面板。
 用以顯示所選取元素的特性或屬性。
 可編輯元素的屬性。
 立刻在「設計檢視」或「程式碼檢視」中看到相應的改變。
用於文本的屬性
檢測
器
47
用於圖像的屬性檢測器
基本網頁編寫
20.3 Adobe Dreamweaver CS3 在網站開
發中的基本操作
 使用 Adobe Dreamweaver CS3 作網站建立的基本操作
 面板
 通常出現在 Dreamweaver 工作區的右方。
 除已被開啟的面板外，可在功能表列上的「視窗」選單下開啟其他面
板。
 專題研習
 在本專題研習中，你需要應用和實踐你先前所學的有關網站開發
的知識。
 計劃、設計和建立一個網站。
 把網站上載到一個網頁寄存空間和測試網頁上的內容。
48