（中職）網頁設計與制作教程4

1、YCF正版可修改PPT（中職）網頁設計與制作教程4項目活動四化妝品網站設計:超級鏈接的應用任務一絕對 URL、相對 URL及常見的超級鏈接類型任務二各種超級鏈接的創(chuàng)建方法任務三化妝品網站建設返回任務一絕對、相對 及常見的超級鏈接類型. 的基本概念統(tǒng)一資源定位符 ( 的縮寫)， 也被稱為網頁地址， 是因特網上標準的資源地址。 通常包括 個部分: 協議類型、主機名和路徑及文件名。協議應表明使用何種方法獲得所需的信息， 常用的協議包括 ( ， 超文本傳輸協議)、 ( ， 文件傳輸協議)、 (電子郵件協議)、 ( 新聞組協議)、 (遠程登錄協議) 等。對于 協議， 應在協議后放置一個冒號， 然后跟 地

2、址，而對于常用的 和 等協議， 則是在冒號后加兩個斜杠， 斜杠之后是相關信息的主機地址。下一頁返回任務一絕對、相對 及常見的超級鏈接類型當用戶在 上瀏覽或定位資源時， 常?？梢允÷运L問信息的詳細地址和文件名， 因為服務器會按照默認設置為訪問者定位資源。 例如， 如果在瀏覽器的地址欄中輸入: / / . (協議名通常不區(qū)分大小寫， 因此 與 的含義相同)， 實際上是訪問“: / / ./ .” 或其他由服務器設置為主頁的文件。.絕對路徑與相對路徑在指定 資源時， 既可以使用絕對， 也可以使用相對。() 絕對 是指 上資源的完整地址， 其形式通常如下:協議: / / 主機名 / 路徑/ 資源文

3、件名上一頁下一頁返回任務一絕對、相對 及常見的超級鏈接類型() 相對 是指 上的資源相對于當前頁面的地址， 它包含從當前頁面指向目的頁面位置的路徑。.超級鏈接的類型超級鏈接的主要作用是將物理上無序的內容組成一個有機的統(tǒng)一體。 常見的超級鏈接有文本超級鏈接、下載文件鏈接、電子郵件鏈接、圖像鏈接、空鏈接、熱點鏈接與命名錨記鏈接等。() 文本超級鏈接是以文本為鏈接對象的一種常用的鏈接方式。 作為鏈接對象的文本帶有標志性， 它標志著鏈接網頁的主要內容或主題。() 下載文件鏈接是指鏈接對象在瀏覽器中不能直接打開， 需要下載保存到本地主機上并利用相關的軟件及工具打開。() 圖像鏈接就是以圖像為鏈接對象的超

4、級鏈接， 當用戶單擊該圖像時打開鏈接網頁或文檔。上一頁下一頁返回任務一絕對、相對 及常見的超級鏈接類型() 電子郵件超級鏈接就是讓瀏覽者給網站發(fā)， 當瀏覽者單擊包含電子郵件超級鏈接的網頁對象時， 就會打開郵件出來工具(如微軟的 )， 并且自動將收信人地址設為網站建設者的郵箱地址， 方便瀏覽者給網站反饋信息。() 空鏈接是未指派的鏈接。 空鏈接一般用于向頁面上的對象或文本附加行為。() 熱點鏈接就是在一個圖片上設定多個鏈接。 在因特網上瀏覽網頁時， 可以看到一個圖像的各個部分鏈接到不同關聯網頁的情況。 通過設定熱點鏈接， 在單擊圖像的一部分時可以跳轉到所鏈接的網頁文檔或網站。() 錨記也叫書簽，

5、 顧名思義， 也就是網頁中的標記。 每當要在網頁中查找特定主題的內容時， 只需快速定位到相應的標記(錨點) 處即可， 這就是命名錨記鏈接。 命名錨記鏈接一般用于內容比較多的網頁。上一頁返回任務二各種超級鏈接的創(chuàng)建方法一、文本超級鏈接的創(chuàng)建文本超級鏈接有兩種， 一種是內部鏈接， 一種是外部鏈接。 下面將分別介紹文本超級鏈接的創(chuàng)建方法。.內部鏈接選中要創(chuàng)建超級鏈接的文本對象， 在如圖 所示的屬性面板中， 將光標定位到“鏈接” 編輯欄中輸入要鏈接的網頁名稱或單擊后面的“瀏覽文件” 按鈕 ， 打開“選擇文件” 對話框， 如圖 所示， 選擇文件， 單擊“確定” 按鈕。 或選中要創(chuàng)建鏈接的文本對象， 右鍵

6、單擊鼠標選擇“創(chuàng)建鏈接” 命令， 也可以打開“選擇文件” 對話框。 還有一種方法就是選中文字對象， 按住 鍵拖動到文件面板上要鏈接的頁面上即可。下一頁返回任務二各種超級鏈接的創(chuàng)建方法鏈接一旦創(chuàng)建， 屬性面板中的“目標” 項就有效， 單擊“目標” 下拉菜單有四種狀態(tài)， 表示打開鏈接文件的方法， 其中各選項的含義如下:“ ”: 表示在保留當前窗口的狀態(tài)下， 在新窗口中顯示被打開的鏈接網頁?！?”: 表示在當前窗口中顯示被打開的鏈接網頁，如果是框架網頁， 則在副框架中顯示被打開的鏈接網頁?！?”: 表示在當前窗口中顯示被打開的鏈接網頁，如果是框架網頁， 則在當前框架中顯示被打開的鏈接網頁?！?”:

7、表示在當前窗口中顯示被打開的鏈接網頁，如果是框架網頁， 則刪除所有框架， 顯示當前網頁。上一頁下一頁返回任務二各種超級鏈接的創(chuàng)建方法.外部鏈接選中要創(chuàng)建超級鏈接的文本對象， 在屬性面板的“鏈接” 編輯欄中輸入絕對地址即可。 如果要給文本對象創(chuàng)建外部鏈接到“百度” 網站， 在“鏈接” 編輯欄中輸入“: / / .” 網址即可。二、下載文件鏈接的創(chuàng)建瀏覽網站的目的往往是查找并下載資料， 下載文件可利用下載文件鏈接來實現。 下載文件鏈接的創(chuàng)建方法和文本超級鏈接的相似， 只是鏈接的對象不能在網頁中直接打開， 單擊此下載鏈接就會彈出如圖 所示的對話框。上一頁下一頁返回任務二各種超級鏈接的創(chuàng)建方法三、電子

8、郵件鏈接的創(chuàng)建.利用“屬性” 面板創(chuàng)建電子郵件鏈接() 在文檔中， 選擇要創(chuàng)建電子郵件鏈接的對象， 一般是文字對象， 如“聯系我們”。() 在“屬性” 面板的“鏈接” 編輯欄中輸入“: 電子郵件地址”。 .利用“電子郵件鏈接” 對話框建立電子郵件鏈接() 在文檔中， 選擇要創(chuàng)建電子郵件鏈接的對象。() 單擊“插入” 工具欄的“常用” 選項卡， 單擊“插入電子郵件鏈接” 按鈕， 彈出“電子郵件鏈接” 對話框。 在該對話框中輸入 地址， 如圖 所示。上一頁下一頁返回任務二各種超級鏈接的創(chuàng)建方法四、圖像鏈接與空鏈接的創(chuàng)建) 圖像鏈接就是為圖像創(chuàng)建鏈接， 創(chuàng)建方法如下:在文檔中， 選擇圖像， 在如圖

9、所示的圖像“屬性” 面板的“鏈接” 編輯欄中輸入文檔名稱或單擊“瀏覽文件” 按鈕 ， 打開“選擇文件” 對話框， 選擇相應文件， 單擊“確定” 按鈕， 即為圖像創(chuàng)建了鏈接。) 創(chuàng)建空鏈接， 在文檔中， 選擇創(chuàng)建空鏈接的對象， 在“屬性” 面板的“鏈接” 編輯欄中輸入“”， 即可創(chuàng)建空鏈接。上一頁下一頁返回任務二各種超級鏈接的創(chuàng)建方法五、熱點鏈接的創(chuàng)建為圖像創(chuàng)建熱點鏈接， 需要使用四個工具， 分別為指針熱點工具、矩形熱點工具、橢圓熱點工具及多邊形熱點工具。 指針熱點工具主要用來選擇并移動熱點區(qū)域， 其他三個工具則用于創(chuàng)建不同形狀的熱點區(qū)域。熱點鏈接的創(chuàng)建方法如下:) 選擇文檔中的圖像， 如圖 所

10、示， 現在要為該圖像上的“首頁” “產品介紹”“精彩活動” “下載專區(qū)” “互動論壇” “訂購產品” 及“聯系我們” 創(chuàng)建鏈接。) 在如圖 所示的“屬性” 面板的左下角有四個工具， 分別為指針熱點工具、矩形熱點工具、橢圓熱點工具及多邊形熱點工具。上一頁下一頁返回任務二各種超級鏈接的創(chuàng)建方法) 選擇矩形熱點工具 ， 鼠標變成“十” 字形， 在如圖 所示的“產品介紹”上拖動， 即可創(chuàng)建熱點區(qū)域。) 刪除“熱點” 屬性面板的“鏈接” 編輯欄中的“”， 輸入要鏈接的文檔名稱或直接單擊“瀏覽文件” 按鈕 ， 打開“選擇文件” 對話框， 選擇相應文件， 即可創(chuàng)建熱點鏈接。 創(chuàng)建熱點鏈接完成的效果圖如圖 所

11、示。六、命名錨記鏈接的創(chuàng)建在瀏覽網頁時， 經常會遇到這種情況， 由于網頁的內容較多， 瀏覽器的滾動條變得很長， 而使得瀏覽者無法快速找到所要查看的內容。 為了解決這種問題， 我們可以通過創(chuàng)建命名錨記鏈接來為網頁添加位于網頁內部的超級鏈接， 單擊該超級鏈接， 就可以跳轉到網頁指定位置上一頁下一頁返回任務二各種超級鏈接的創(chuàng)建方法要創(chuàng)建命名錨記鏈接， 首先要插入命名錨記， 然后創(chuàng)建跳轉到該命名錨記的鏈接， 具體創(chuàng)建方法如下:) 將光標定位到命名錨記的插入點， 單擊“插入” 工具欄中“常用” 選項卡中的“命名錨記” 圖標 ， 如圖 所示， 打開“命名錨記” 對話框， 輸入錨記名稱， 如圖 所示。) 單

12、擊“確定” 按鈕， 插入命名錨記。) 選擇要創(chuàng)建命名錨記鏈接的對象， 在“屬性” 面板的“鏈接” 編輯欄中輸入“”，如圖 所示， 即可創(chuàng)建命名錨記鏈接。上一頁返回任務三化妝品網站建設) 創(chuàng)建本地站點， 將 中的化妝品文件夾下的所有文件復制到本地根文件夾下，打開.。 為標題圖像創(chuàng)建鏈接， 鏈接至玉蘭油中國官方網站去瀏覽該網站信息，網址是“: / / .”。) 選中標題圖像， 在“ 屬性” 面板的“ 鏈接” 編輯欄中輸入網址“ : / /.”， 為標題圖像創(chuàng)建外網鏈接， “屬性” 面板如圖 所示。) 為導航條中的“產品介紹” 圖像， 創(chuàng)建內部鏈接， 鏈接至網站中的. 頁面。) 選擇“產品介紹” 圖

13、像， 單擊“屬性” 面板中的“指向文件” 圖標， 拖動到文件面板中的. 上， 即可為“產品介紹” 圖像創(chuàng)建內部鏈接， 如圖 所示。下一頁返回任務三化妝品網站建設) 為導航條中的“聯系我們” 圖像， 創(chuàng)建電子郵件鏈接， 地址為“.”。) 選擇“聯系我們” 圖像， 在“屬性” 面板的“鏈接” 編輯欄中輸入“:.”， 即可為圖像創(chuàng)建電子郵件鏈接。) 為導航條下面的圖像的左側產品部分創(chuàng)建多邊形熱點鏈接， 鏈接至. 頁面。) 選擇圖像， 在“屬性” 面板中， 單擊多邊形熱點工具， 在 圖像的左側繪制熱點區(qū)域， 如圖 所示。) 在“熱點” 屬性面板的“鏈接” 編輯欄右側， 單擊“瀏覽文件” 圖標， 選擇要

14、鏈接的文件。上一頁下一頁返回任務三化妝品網站建設) 為該文檔底部的文字“版權所有 千百度化妝品有限公司” 創(chuàng)建命名錨記鏈接“”， 返回至頂部。) 將光標定位到標題圖像前， 具體定位方法如下: 選擇標題圖像， 按鍵盤上的左箭頭， 可以將光標定位到該圖像的前面。) 執(zhí)行菜單“插入” “命名錨記” 命令， 彈出如圖 所示的“命名錨記”對話框， 在該對話框中輸入錨記名稱“”， 單擊“確定” 按鈕， 插入命名錨記。) 選擇文檔底部的文字“版權所有 千百度化妝品有限公司”， 在“屬性” 面板中的“鏈接” 編輯欄中輸入“”， 即可為“版權所有 千百度化妝品銷售公司” 文字創(chuàng)建命名錨記鏈接。 單擊該文字即可返回至頂部。) 保存文檔， 瀏覽頁面效果， 效果圖如圖 所示。上一頁返回圖 創(chuàng)建文本超