授課老師：黃祥倫 E-mail:ns5927@gmail.com 第四章認識超連結授課老師：黃祥倫 E-mail:ns5927@gmail.com.

授課老師：黃祥倫 E-mail:ns5927@gmail.com
第四章認識超連結授課老師：黃祥倫

4-1 文字超連結-站內連結開啟上回"首頁"並增兩串文字，反白一段文字按"鏈結" 1 3 2 ※記得新增另一個網頁當被連結的網頁使用

4-1 文字超連結-站內連結按"選取檔案"，選擇要連結的網頁後按開啟 2 1 3

4-1 文字超連結-站內連結 "目標"先不選擇，接著按"確定"後將網頁"儲存" 1 ※"目標"不選擇時，網頁即在本頁開啟 2

4-1 文字超連結-站內連結按"連結一"即可連接至另一張網頁 1 2 ※狀態列:顯示連結位子

4-2 文字超連結-站外連結反白另一段文字後按"鏈結" 2 1

4-2 文字超連結-站外連結輸入欲連結網址，並修改目標後按"確定"並儲存網頁 1 2
4-2 文字超連結-站外連結輸入欲連結網址，並修改目標後按"確定"並儲存網頁 1 2 ※"目標"選擇"新視窗"即不在同一視窗開啟，而用另一個新視窗開啟 3

4-2 文字超連結-站外連結按"連結二"即用另一個新視窗開啟網頁 1 2 ※狀態列:顯示連結位子

4-2 補充教學我們先將網頁切到原始碼並觀察目標開啟方式所對應的程式碼原視窗開啟新視窗開啟 1

4-3 利用圖片作超連結先於網頁中加入一張圖片並按"鏈結" 2 1

4-3 利用圖片作超連結可以輸入欲連接的網址、本地檔案路徑或位址等另可選擇連結圖片是否加外框，最後按"確定"儲存網頁 1 2

4-4 錨點的應用(1) 錨點是針對在同一頁選擇瀏覽區時所應用的功能
4-4 錨點的應用(1) 錨點是針對在同一頁選擇瀏覽區時所應用的功能當我們瀏覽網頁通常會往下拉，當我們要往上拉的時候，除了透過拉桿往上拉外，還可以透過錨點透過點一下就來到最上面了範例網頁:

4-4 錨點的應用(1) 在網頁的最上方新增一個"錨點"，再來給予"錨點名稱"後按"確定" 2 3 4 1 最上方

4-4 錨點的應用(1) 在網頁的最下方新增"回到最上面"並反白按"鏈結"，選擇鏈結到："#top"後按"確定"並儲存 2 3 1 最下方
4-4 錨點的應用(1) 在網頁的最下方新增"回到最上面"並反白按"鏈結"，選擇鏈結到："#top"後按"確定"並儲存 2 3 1 最下方 4

4-4 錨點的應用(1)

4-4 錨點的應用(2) 除了回到最上面外，錨點也可以移到我們想要到達的標題位子
4-4 錨點的應用(2) 除了回到最上面外，錨點也可以移到我們想要到達的標題位子範例網頁:

4-4 錨點的應用(2) 在網頁欲移動到的標題新增一個"錨點"，再來給予"錨點名稱"後按"確定" 2 3 4 1

4-4 錨點的應用(2) 反白欲連結到"錨點"的標題後按"鏈結"，選擇鏈結到："#可自取"後按"確定"並儲存 2 3 1 4

4-5 檔案下載的使用先將一檔案放入本機網站資料夾中，並反白欲加入下載檔案的文字後按鏈結再點"選取檔案" 2 3 1

4-5 檔案下載的使用 "檔案類型"選擇所有檔案，再點選欲下載的檔案後按開啟 2 3 1

4-5 檔案下載的使用按確定並儲存網頁 1 2

4-5 檔案下載的使用這時按"請點我下載"，即會跳出"’檔案下載"視窗讓我們可以下載檔案

4-6 電子信箱的應用反白欲加入的文字並按"鏈結" 輸入後，勾選"上面是位址" 2 3 1

4-6 電子信箱的應用當點此連結即會開啟一寄信視窗(例如:Outlook)

資料來源：教育部校園自由軟體應用諮詢中心- KompoZer KompoZer自由學網頁自由學習網 - 線上書籍系統

Presentation on theme: "授課老師：黃祥倫 E-mail:ns5927@gmail.com 第四章認識超連結授課老師：黃祥倫 E-mail:ns5927@gmail.com."— Presentation transcript: