（中職）網(wǎng)頁設(shè)計與制作教程4

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

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

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

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

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

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

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

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

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

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

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

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

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

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