网页制作(HomePage)

我是小蚯蚓，不要 忘記，這個符號 喔!!
八、如何加入超連結？

於新建立的網頁3.htm（網站資源）上， 使用滑鼠左鍵點選兩下，編輯內容。
2
1
編輯內容
八之步驟1

將畫面編輯成如下所示
3
八之步驟2

將選項用滑鼠拖曳[插入][超連結]在URL上輸入連結網址 [確定]
4
5
輸入連結網址]
主要文字內容
決定網頁呈現方式（二）
連結 content.htm
回首頁 行程介紹
首頁 Index.htm
快樂的旅行
連結 1.htm
連結 2.htm 連結 3.htm 連結 list.htm
照片集錦
網路資源
文字內容
首頁內容 content.htm
分割畫面(左邊連結列內容，點選時不會消失）
四、如何更改背景？
網頁結構圖
可利用樹狀圖來協助建置網頁
四個連結 選項
快樂的旅行
首頁index.htm
回首頁 content.htm
行程介紹 1.htm
照片集錦 2.htm
網路資源 3.htm
決定網頁呈現方式（一）


根據網頁架構的主題及內容，來決定網 頁的呈現方式。 例： 回首頁 快樂的旅行
行程介紹
照片集錦
網路資源
8
完成 9
九之步驟4

使用上述之方法，將[照片集錦]連結到 2.htm、[網路資源]連結到 3.htm
完成畫面
完成網頁製作

將編輯過網頁關掉，並存檔
十、預覽網頁


檢查製作好的網頁，連結是否正確 [檔案][用瀏覽器預覽…]
1
2
測試及觀摩




如何測試網頁 .tw/~帳號 http://163.30.18.2/~學員帳號 若要修改網頁，可以在原製作網頁的電 腦上修改好，再用[發佈Web]就可以了。 .tw/~txxx
編輯內容
六資源網] [網頁素材資源]
3 4
5
六之步驟2
1.
2.
選取[GIF動畫] 於任一圖案上按滑鼠右鍵一下[複製]
6
7
六之步驟3
1. 2. 3.
切換在frontpage正在編輯的2.htm檔案內容中 於內容中[編輯][貼上]再存檔。 將一併下載的圖片也存檔。
7 6
8
八之步驟3

9
修改後記得要存檔
[雅虎網站]文字出現連結底線。 用上述方法將底下之[網路家庭]連結到 /
完成
完成畫面
九、如何將網頁連結？
連結 content.htm 連結 1.htm
回首頁 行程介紹 照片集錦
已完成連結
未完成連結
未完成連結
9
10
五、如何從網路上抓取文字？

於新建立的網頁1.htm（行程介紹）上， 使用滑鼠左鍵點選兩下，編輯內容。
編輯內容
五之步驟1


使用瀏覽器，連上奇摩易遊網站 /
1 2
五之步驟2

將行程資料用滑鼠拖曳[編輯][複製] 4
5
3
用滑鼠拖曳
五之步驟3
10 8
9
完成
七、如何插入跑馬燈？

於content.htm（首頁內容）上，使用滑 鼠左鍵點選兩下，編輯內容。
1
七之步驟1

[插入][元件][跑馬燈]
2
3
4
七之步驟2

[文字]輸入:歡迎光臨[確定]
5
6
七之步驟3

[預覽]
完成 記得切換回來網頁 的編輯畫面
7 切換預覽，可以 觀看跑馬燈執行 的畫面
網頁（HomePage）製作流程
構思題材 網頁架構 資料分析
網頁上傳 測試
網頁製作
熟悉工具
構思題材


網站主題？ 網站目的？ 網站特色？ 例如：個人蒐集珍藏、朋友連絡感情、 偶像崇拜、生活札記、商業用途、物流 業…
熟悉網頁製作的工具及技巧


工具：網頁編輯（FrontPage）、 圖片編輯（PhotoImpact） 技巧：超連結（HyperLink）、跑馬燈、 呈現方式（頁框、分割畫面）、表格、 計數器、留言版、討論區、Java…
1.
2.
於[content.htm]上，按滑鼠左鍵兩下。 [格式][背景] 2
1
3
四之步驟1

4
[瀏覽]用滑鼠按[back]兩下選擇背景 [確定]
6
選擇32.gif
5
用滑鼠按兩下
7
完成
更改背景完成畫面


可使用同樣的方法，將list.htm、1.htm、 2.htm、3.htm 背景更改。 記得更改後，儲存檔案。
網頁製作（HomePage）
什麼是WWW?


WWW（World Wide Web）全球資訊網、 W3、環球資訊網、汪汪汪。 起源於數年前歐洲有一群科學家在進行 實驗時，利用網路來傳遞資料及實驗結 果給分隔兩地的科學家，以利分析之用， 但是文字模式無法詳實描述實驗結果， 所以就制定並開發了WWW。
WWW的運作過程？
本 地 電 腦
（瀏覽器）
例如：要求雅虎網頁資料
傳回網頁資料
網 頁 伺 服 器
（程式）
網頁的內容是什麼?


網頁是利用HTML（HyperText Markup Language）語言程式，整合聲音、動畫、 影像、圖片、文字等形態的資料或檔案。 HTML語言因為簡易使用，即可製作網 頁程式，而使用者可瀏覽超媒體 （Hyper-media）形式的內容，近來已被 廣泛使用。
連結 2.htm
連結 3.htm
網路資源
未完成連結
九之步驟1

於建立的網頁index.htm（首頁）上，使 用滑鼠左鍵點選兩下，編輯內容。
2 1
九之步驟2
1. 2.
用滑鼠拖曳選取[行程介紹][插入][超連結] 點選1.htm目標框架
4
3
6
7 5
九之步驟3

於[使用中的框架頁]點選右邊的分割畫面[確 定][確定]
1. 2. 3.
切換到frontpage正在編輯的1.htm檔案內容中 於內容中[編輯][貼上]再存檔。 將一併下載的圖片也存檔。
6
7
8
五之步驟4

9 10
[檔案][關閉檔案][是]。
完成
六、如何插入圖片？

於新建立的網頁2.htm（照片集錦）上， 使用滑鼠左鍵點選兩下，編輯內容。
1 2