一、準備設計網頁
1-1網頁設計流程
規劃：擬訂網站的主題、內容以及整個網站的架構
施工：蒐集並修改文字、圖片、音樂，將這些材料設計成網頁
上傳：申請使用現成的網頁空間、網頁檔案上傳到網站伺服器
維護：定期更新網站內容
1-2規劃網站的內容
例1.學校網站：
例2.主題網站：
例3.個人網站：
請寫出您的網站名稱及內容：
1-3名詞解析：
瀏覽器：用來將網路上豐富的多媒體資料顯示在畫面的軟體，目前最多人用的是微軟的IE
網頁：在瀏覽器所看到的多媒體資料。
網站：多個網頁的集合，通常都必須經過規劃、組織與連結。
首頁：進入網站所看到的第一個網頁，通常檔名為index.htm
網站伺服器：用來存放網頁的電腦，此電腦必需24小時開機且全年無休。
網址：用來表示存放網頁的網站位址，通常由一連串的英文字或數字來表示。
ISP：提供一般民眾連接網際網路使用網路資源服務的公司或單位。
二、網頁的文字編輯
單元內容：文字的格式設定、項目符號及編號、調整段落行距與前後距離
2-1文字的字型、大小、色彩，段落的縮排、對齊、加框線及網底
2-2段落文字加項目符號、項目編號、更改項目符號及編號、插入水平線與調整
實作1：將單元一實作題所設計的網站架構及內容以文字輸入放於首頁檔案index.htm中。
實作2：在主題名稱下方插入水平線、改變文字大小顏色。
2-3存檔、修改網頁檔名、拖曳調整項目段落順序、調整段落行距與前後距離
實作：儲存首頁、練習更改檔名、加入項目編號並調整段落前後距離。
三、有聲有色的網頁
單元內容：背景色、背景圖、背景音樂、插入圖片檔案、插入網路上的圖片、圖片設定(透明色、對齊方式)、跑馬燈
3-1改變網頁的背景色(格式\文件內容\外觀)
實作：請為首頁挑選一個背景色，最好挑選淡一點的顏色。
3-2設定網頁的背景圖片(格式\文件內容\外觀)
實作：請挑選背景圖形檔b01.gif或其它圖形檔做背景圖。
3-3設定當瀏覽此網頁時順便播放的背景音樂(格式\文件內容\樣式)
實作：請在首頁index.htm加入背景音樂，請挑選任意音樂檔案。
3-4網頁中插入圖形檔案(插入\影像\從檔案或從美工圖案)
實作：在首頁index.htm的各個項目名稱前加入t01.gif圖形檔，在適當位置插入歡迎光臨的圖形w01.gif。
3-5插入網路上的圖片(上網找圖形按右鈕\複製，在網頁按貼上)
實作：請至麻辣教室網站挑選喜歡的圖形(圖庫\人物\女學生\第一頁)複製圖形至首頁。
3-6調整圖形與文字的對齊方式(格式\影像內容\樣式，右鈕\影像內容\樣式)
實作：改變首頁中文字與圖形的對齊方式垂直置中。
3-7設定圖片的透明色彩(使用影像工具列的設定透明的顏色工具)
四、通往全世界的超連結
單元內容：匯入現成的網頁、各式超連結(內部網頁、外部網頁、圖形、音樂、影片、電子郵件、書籤)、超連結到新視窗、文字的超連結效果
4-1將現成的網頁檔案匯入到網站中
實作1：匯入網路磁碟機的笑話集(joke.htm)、名言選輯(words.htm)、……..等網頁檔案。
4-2設定文字超連結至內部網站中的網頁(選取文字\選超連結圖示\在檔案清單中挑選檔案)
實作：在首頁index.htm中的每個項目名稱設計超連結至對應的網頁。
4-3設定文字超連結至外部網站的網頁(選取文字\選超連結圖示\在URL欄位輸入網址)
實作1：設計一個”我的學校”之網頁，將此文字設定超連結至學校的網址。
實作2：設計一個”網站連結“之網頁，內有常去的網站名稱及超連結，檔名weblink.htm。
4-4設定圖片的超連結(選取圖片\選超連結圖示\在URL欄位輸入網址)
實作：在任一內部網頁的下方插入圖形h01.gif並設計圖片超連結到首頁index.htm
4-5建立下載檔案超連結(選取文字或圖片\選超連結圖示\挑選檔案)
實作：設計一個”音樂欣賞”的網頁，檔名為midi.htm內有音樂名稱及超連結。
4-6製作歡迎來信的超連結(選取文字\選超連結圖示\選郵件圖示\輸入郵件地址)
實作：在首頁的下方輸入”歡迎來信”並設計您個人的電子郵件超連結。
4-7在長網頁中加入書籤(移至目的地\選插入\書籤\輸入書籤名稱)
實作：開啟笑話集錦網頁joke.htm，選取每一個笑話名稱並插入書籤。
4-8連結到網頁中的書籤(選取文字\選超連結圖示\選書籤名稱)
實作：選取笑話集錦網頁的各個笑話名稱，點選超連結至該笑話的書籤名稱。
4-9移除網頁中的書籤(插入\書籤\選書籤名稱\按清除)
4-10超連結到新的視窗(同之前的超連結方法再加選”目標框架”選”開新視窗”)
實作：將”網站連結“之網頁內所有常去的網站的超連結全部設定為開新視窗。
4-11設定滑鼠移過超連結文字的效果(格式\背景\背景\選啟用超連結強化效果\選強化樣式)
實作：將”網站連結“之網頁內所有常去的網站的文字超連結強化效果改為紅色。
4-12設定超連結色彩(格式\背景\背景\選超連結相關色彩)
五、網頁的表格功能
單元內容：插入表格、調整表格、加入背景圖、合併與分割及合併、表格工具列的使用
5-1建立表格與表格內放圖片與文字(插入表格)
5-2設定表格的水平對齊、寬度、儲存格內墊充、儲存格之間距、框線粗細與色彩、背景色(表格內按右鈕\表格內容)
實作：開啟網頁flower.htm，變更儲存格的間距與表格框線粗細與色彩。
5-3調整欄寬與列高(選儲存格按右鈕\儲存格內容，直接拖曳線條)
5-4刪除列或欄(選取列或欄\在範圍內按右鈕\選刪除儲存格)
5-5合併儲存格(選取儲存格\在範圍內按右鈕\選合併儲存格)
5-6分割儲存格(表格\分割儲存格)
5-7表格內加入背景圖案(表格內按右鈕\表格內容\使用背景圖片)
5-8表格工具列介紹(檢視\工具列\表格)
實作：開啟笑話集joke.htm在上方插入４╳４的表格，再將各個笑話名稱搬移至表格內，最後再將表格框線大小設０。
六、美化與管理網站
6-1發佈自己的網站(檔案\發送Web)
6-2上傳更新後的網站(檔案\發送Web\選項\只發送變更的網頁)
6-3檢視檔案報告(檢視\報告)
6-4查看網站資料夾內容(檢視\資料夾)
七、網路資源
Yahoo!奇摩：www.kimo.com.tw Openfind：www.openfind.com.tw
PC Home：www.pchome.com.tw Google：www.google.com
高雄數位學園：digschool.nknu.edu.tw 學習加油站網址：content.edu.tw
教育部：www.edu.tw 高雄市教育局：wwwedu.kh.edu.tw
國語辭典：www.edu.tw/clc/dict/ 源源的家：teach.kh.edu.tw/yuang
數位典藏計畫：ntudlm.lib.ntu.edu.tw 首頁製作百寶箱：dob.tnc.edu.tw/
趨勢防毒：www.trend.com.tw 麻辣圖庫：library.taconet.com.tw