一、準備設計網頁

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設定圖片的透明色彩(使用圖片工具列的設定透明色彩工具)

3-8跑馬燈的文字輸入、移動方向、大小、方式、顏色與對齊(插入\元件)

實作:在首頁設計一個跑馬燈,用來介紹此網站,例如:歡迎光臨源源的家,本網站有內容非常豐富,希望您會喜歡,敬請批評指教。

四、通往全世界的超連結

單元內容:匯入現成的網頁、各式超連結(內部網頁、外部網頁、圖形、音樂、影片、電子郵件、書籤)、超連結到新視窗、文字的超連結效果

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在上方插入4╳4的表格,再將各個笑話名稱搬移至表格內,最後再將表格框線大小設0。

六、美化與管理網站

6-1發佈自己的網站(檔案\發送Web)

6-2上傳更新後的網站(檔案\發送Web\選項\只發送變更的網頁)

6-3檢視檔案報告(檢視\報告)

6-4查看網站資料夾內容(檢視\資料夾)

七、網路資源

Yahoo!奇摩:www.kimo.com.tw                            Openfindwww.openfind.com.tw

PC Homewww.pchome.com.tw                            Googlewww.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                    首頁製作百寶箱:www.dob.com.tw

趨勢防毒:www.trend.com.tw                               麻辣圖庫:library.taconet.com.tw

Maggy圖庫:210.243.4.5/maggy/                          MIDI2000www.cc.chu.edu.tw/~marcus/sound

Midi音樂廳:home.pchome.com.tw/life/alamusic

阿芳圖庫:home.pchome.com.tw/good/fang600213/

線上字典:www.justtalk.com.tw/dict/lookupdic.asp