第7章 創(chuàng)建鏈接

1、LOGO第第5、6章主要內(nèi)容章主要內(nèi)容（1）普通圖像和特殊圖像元素插入的方法）普通圖像和特殊圖像元素插入的方法（2）圖像屬性的設置）圖像屬性的設置（3）圖像地圖的創(chuàng)建）圖像地圖的創(chuàng)建（4）Flash元素、音頻、視頻等多媒體元素的插入方法及屬性設置元素、音頻、視頻等多媒體元素的插入方法及屬性設置LOGOLOGO本章主要內(nèi)容本章主要內(nèi)容l 超鏈接概述超鏈接概述l 鏈接路徑鏈接路徑l 創(chuàng)建超鏈接創(chuàng)建超鏈接l 創(chuàng)建網(wǎng)站導航創(chuàng)建網(wǎng)站導航LOGO7.1 超鏈接概述超鏈接概述 超鏈接超鏈接是指從一個網(wǎng)頁指向一個目標的連接關系。這個網(wǎng)頁又是指從一個網(wǎng)頁指向一個目標的連接關系。這個網(wǎng)頁又稱為稱為源端點源端點，目

2、標稱為，目標稱為目標端點目標端點，超鏈接就是將源端點與目標端，超鏈接就是將源端點與目標端點連接起來，源端點是被鏈接的對象，目標端點是鏈接的對象。點連接起來，源端點是被鏈接的對象，目標端點是鏈接的對象。 一個網(wǎng)頁中用來創(chuàng)建超鏈接的對象，可以是文本、圖像或其一個網(wǎng)頁中用來創(chuàng)建超鏈接的對象，可以是文本、圖像或其他網(wǎng)頁元素。而目標端點可以是任何網(wǎng)絡資源，如一個網(wǎng)頁、相他網(wǎng)頁元素。而目標端點可以是任何網(wǎng)絡資源，如一個網(wǎng)頁、相同網(wǎng)頁上的不同位置、一張圖片、一個電子郵件地址、多媒體文同網(wǎng)頁上的不同位置、一張圖片、一個電子郵件地址、多媒體文件，甚至是一個應用程序等。當瀏覽者將鼠標指針移至有超鏈接件，甚至是一個

3、應用程序等。當瀏覽者將鼠標指針移至有超鏈接的網(wǎng)頁元素上時，指針會變?yōu)槭中?，在狀態(tài)欄中將顯示連接目標的網(wǎng)頁元素上時，指針會變?yōu)槭中?，在狀態(tài)欄中將顯示連接目標的地址，單擊鏈接后，鏈接目標將顯示在瀏覽器上，并根據(jù)目標的地址，單擊鏈接后，鏈接目標將顯示在瀏覽器上，并根據(jù)目標的類型來打開或運行。的類型來打開或運行。LOGO7.2 鏈接路徑鏈接路徑 路徑是指從源端點指向目標端點的一種途徑。路徑是指從源端點指向目標端點的一種途徑。鏈接路徑可以分為鏈接路徑可以分為3種種形式：形式：（1）絕對路徑）絕對路徑：是指被鏈接文件的完整：是指被鏈接文件的完整URL，包括所使用的協(xié)議，如：，包括所使用的協(xié)議，如： c:/

4、website/web/index.htm鏈接到鏈接到 http:/ 和和 c:/website/img/photo.jpgl采用絕對地址的好處是，它同鏈接的源端點無關，只要網(wǎng)站的地址不采用絕對地址的好處是，它同鏈接的源端點無關，只要網(wǎng)站的地址不變，無論文件在站點中如何移動，都可以正常實現(xiàn)跳轉(zhuǎn)，如果希望鏈接變，無論文件在站點中如何移動，都可以正常實現(xiàn)跳轉(zhuǎn)，如果希望鏈接其他站點上的內(nèi)容，即在創(chuàng)建外部鏈接時必須需使用絕對路徑其他站點上的內(nèi)容，即在創(chuàng)建外部鏈接時必須需使用絕對路徑l絕對路徑也會出現(xiàn)在尚未保存的網(wǎng)頁上，如果在沒有保存的網(wǎng)頁上插絕對路徑也會出現(xiàn)在尚未保存的網(wǎng)頁上，如果在沒有保存的網(wǎng)頁上插

5、入圖像或添加鏈接，入圖像或添加鏈接，Dreamweaver會暫時使用絕對路徑，網(wǎng)頁保存后，會暫時使用絕對路徑，網(wǎng)頁保存后，Dreamweaver會自動將絕對路徑轉(zhuǎn)換為相對路徑。如：會自動將絕對路徑轉(zhuǎn)換為相對路徑。如： file:/D|/chapter7/示例文件示例文件/images/doudou.gifLOGO7.2 鏈接路徑鏈接路徑（2）相對路徑相對路徑：是指以當前文件所在位置為起點到被鏈接文件經(jīng)由的：是指以當前文件所在位置為起點到被鏈接文件經(jīng)由的路徑。當把當前文件與處于同一文件夾的另一文件鏈接，或者把同一網(wǎng)路徑。當把當前文件與處于同一文件夾的另一文件鏈接，或者把同一網(wǎng)站下不同文件夾中的文

6、件相互鏈接時，可使用相對路徑。站下不同文件夾中的文件相互鏈接時，可使用相對路徑。l鏈接到同一目錄下，只需輸入鏈接文檔的名稱鏈接到同一目錄下，只需輸入鏈接文檔的名稱：如：如從從“第第7章章”文件夾中的文件夾中的7-1.html鏈接到鏈接到7-2.html：l鏈接到下一級目錄，需先輸入目錄名，然后加鏈接到下一級目錄，需先輸入目錄名，然后加”/”，再輸入文件名再輸入文件名：從：從“第第7章章”文件夾中的文件夾中的7-1.html鏈鏈接到該文件夾下接到該文件夾下images文件夾中的某個文件：文件夾中的某個文件：l鏈接到上一級目錄中的文件，先輸入鏈接到上一級目錄中的文件，先輸入“./”，再輸入，再輸入

7、目錄名、文件名目錄名、文件名：將：將“第第7章章”文件夾下文件夾下images文件文件夾中的文件夾中的文件page1.html鏈接到鏈接到“第第7章章”文件夾中的文件夾中的page2.html：LOGO7.2 鏈接路徑鏈接路徑（3）根路徑根路徑：是指從站點根文件夾到被指文件經(jīng)由的路徑。在這種路：是指從站點根文件夾到被指文件經(jīng)由的路徑。在這種路徑表達式中，所有的路徑都是從站點根目錄開始的，同源端點的位置無徑表達式中，所有的路徑都是從站點根目錄開始的，同源端點的位置無關。根路徑由斜杠關。根路徑由斜杠“/”開頭，代表站點根文件夾。在網(wǎng)站內(nèi)鏈接文件時開頭，代表站點根文件夾。在網(wǎng)站內(nèi)鏈接文件時一般使用根

8、路徑的方法。一般使用根路徑的方法。LOGO7.3 創(chuàng)建超鏈接創(chuàng)建超鏈接1.創(chuàng)建文本鏈接：即以文本作為媒介的鏈接，是網(wǎng)頁中最常被使用的鏈接方式，創(chuàng)建文本鏈接：即以文本作為媒介的鏈接，是網(wǎng)頁中最常被使用的鏈接方式，具有文件小、制作簡單和便于維護的特點。其創(chuàng)建方法：具有文件小、制作簡單和便于維護的特點。其創(chuàng)建方法：（1）打開需要編輯的網(wǎng)頁文件，在設計視圖中選擇要創(chuàng)建鏈接的文本。）打開需要編輯的網(wǎng)頁文件，在設計視圖中選擇要創(chuàng)建鏈接的文本。（2）使用）使用【屬性屬性】面板創(chuàng)建超鏈接：在面板創(chuàng)建超鏈接：在【屬性屬性】面板中激活面板中激活HTML按鈕，按鈕，如果知道目標端點網(wǎng)頁文檔的確切路徑，可以直接在如果

9、知道目標端點網(wǎng)頁文檔的確切路徑，可以直接在【鏈接鏈接】文本框中輸文本框中輸入該文檔的路徑，如果要創(chuàng)建站點外部的鏈接，則必須輸入絕對路徑。如入該文檔的路徑，如果要創(chuàng)建站點外部的鏈接，則必須輸入絕對路徑。如果創(chuàng)建站點內(nèi)部鏈接，也可單擊果創(chuàng)建站點內(nèi)部鏈接，也可單擊【鏈接鏈接】文本框右側(cè)的文本框右側(cè)的【鏈接文件鏈接文件】按鈕，按鈕，打開打開【選擇文件選擇文件】對話框，從本地站點中選擇要創(chuàng)建的目標文檔，單擊對話框，從本地站點中選擇要創(chuàng)建的目標文檔，單擊【確定確定】按鈕，即可創(chuàng)建鏈接；或者，使用按鈕，即可創(chuàng)建鏈接；或者，使用【鏈接鏈接】文本框右側(cè)的文本框右側(cè)的【指向指向文件文件】圖標按鈕創(chuàng)建鏈接，此時，在

10、圖標按鈕創(chuàng)建鏈接，此時，在【連接連接】文本框中將顯示鏈接地址。文本框中將顯示鏈接地址。LOGO7.3 創(chuàng)建超鏈接創(chuàng)建超鏈接l【目標目標】下拉列表：用來設置鏈接的打開方式下拉列表：用來設置鏈接的打開方式_blank：在一個新的未命名的瀏覽器窗口中打開鏈接的頁面：在一個新的未命名的瀏覽器窗口中打開鏈接的頁面_new：與：與_blank類似，將鏈接的頁面用一個新的瀏覽器窗口打開類似，將鏈接的頁面用一個新的瀏覽器窗口打開_parent：如果是嵌套的框架，鏈接會在父框或窗口中打開，如果：如果是嵌套的框架，鏈接會在父框或窗口中打開，如果不是嵌套的框架，則等同于不是嵌套的框架，則等同于_top，鏈接會在整個

11、瀏覽器窗口中顯示，鏈接會在整個瀏覽器窗口中顯示_self：默認值，在當前網(wǎng)頁所在窗口或框架中打開鏈接的網(wǎng)頁：默認值，在當前網(wǎng)頁所在窗口或框架中打開鏈接的網(wǎng)頁_top：會在完整的瀏覽器窗口中打開網(wǎng)頁：會在完整的瀏覽器窗口中打開網(wǎng)頁LOGO7.3 創(chuàng)建超鏈接創(chuàng)建超鏈接（3）使用）使用【超級鏈接超級鏈接】對話框創(chuàng)建超鏈接：單擊對話框創(chuàng)建超鏈接：單擊【插入插入】面板上的面板上的【常常用用】選項卡中的選項卡中的【超級鏈接超級鏈接】按鈕，或者選擇按鈕，或者選擇【插入插入】菜單菜單|【超級鏈接超級鏈接】菜單項，打開菜單項，打開【超級鏈接超級鏈接】對話框。對話框。用于輸入或顯示創(chuàng)建用于輸入或顯示創(chuàng)建超鏈接的文

12、字內(nèi)容超鏈接的文字內(nèi)容輸入或選擇指定的鏈輸入或選擇指定的鏈接地址接地址設置超鏈接打開的方式設置超鏈接打開的方式輸入超鏈接的標題輸入超鏈接的標題用于在瀏覽器中選擇該鏈用于在瀏覽器中選擇該鏈接的等效鍵盤鍵接的等效鍵盤鍵輸入輸入Tab順序編號順序編號LOGO7.3 創(chuàng)建超鏈接創(chuàng)建超鏈接（4）保存文件，按）保存文件，按F12鍵在瀏覽器中預覽，默認的瀏覽器瀏覽方式下，鍵在瀏覽器中預覽，默認的瀏覽器瀏覽方式下，超鏈接的文字統(tǒng)一為藍色并且具有下劃線，使用過的下劃線則為紫色并超鏈接的文字統(tǒng)一為藍色并且具有下劃線，使用過的下劃線則為紫色并且具有下劃線。且具有下劃線。LOGO7.3 創(chuàng)建超鏈接創(chuàng)建超鏈接（5）CS

13、S設置超鏈接的各種屬性：選擇設置超鏈接的各種屬性：選擇【修改修改】|【頁面屬性頁面屬性】命令，或命令，或按按Ctrl+J快捷鍵，在打開的快捷鍵，在打開的【頁面屬性頁面屬性】對話框中選擇對話框中選擇【鏈接（鏈接（CSS）】選項，設置鏈接屬性。選項，設置鏈接屬性。未被訪問的超文本顏色已被訪問的超文本顏色將鼠標指針移至超文本上的顏色在超鏈接上單擊時的超文本顏色LOGO CSS提供了提供了4個偽類（指對同一個個偽類（指對同一個HTML元素在不同的狀態(tài)下的一元素在不同的狀態(tài)下的一種定義方式），用于控制鏈接進行樣式控制，每個偽類用于控制鏈接種定義方式），用于控制鏈接進行樣式控制，每個偽類用于控制鏈接在一種

14、狀態(tài)下的樣式。在一種狀態(tài)下的樣式。7.3 創(chuàng)建超鏈接創(chuàng)建超鏈接LOGO7.3 創(chuàng)建超鏈接創(chuàng)建超鏈接2.創(chuàng)建圖像鏈接：即以圖像作為媒介的鏈接，其創(chuàng)建方法：創(chuàng)建圖像鏈接：即以圖像作為媒介的鏈接，其創(chuàng)建方法：（1）打開需要編輯的網(wǎng)頁文件，在設計視圖中選擇要創(chuàng)建鏈接的圖像。）打開需要編輯的網(wǎng)頁文件，在設計視圖中選擇要創(chuàng)建鏈接的圖像。（2）在）在【屬性屬性】面板上的面板上的【鏈接鏈接】文本框中輸入鏈接的文件地址，也可文本框中輸入鏈接的文件地址，也可使用使用【指向文件指向文件】或或【瀏覽文件瀏覽文件】按鈕，選擇鏈接的文件。按鈕，選擇鏈接的文件。（3）保存文件，預覽頁面。）保存文件，預覽頁面。LOGO7.3

15、 創(chuàng)建超鏈接創(chuàng)建超鏈接3.創(chuàng)建錨記鏈接：如果一個頁面的內(nèi)容較多，則頁面會較長，用戶需要拖創(chuàng)建錨記鏈接：如果一個頁面的內(nèi)容較多，則頁面會較長，用戶需要拖動滾動條才能看到頁面下面的內(nèi)容。這時，為了方便用戶瀏覽網(wǎng)頁，在動滾動條才能看到頁面下面的內(nèi)容。這時，為了方便用戶瀏覽網(wǎng)頁，在Dreamweaver CS5中，可以創(chuàng)建一種指向文檔中特定位置的鏈接，單擊中，可以創(chuàng)建一種指向文檔中特定位置的鏈接，單擊該鏈接，可以快速跳轉(zhuǎn)到同一頁面中或同一文件夾內(nèi)其他文檔中的指定該鏈接，可以快速跳轉(zhuǎn)到同一頁面中或同一文件夾內(nèi)其他文檔中的指定位置，這種鏈接就稱為錨記鏈接。創(chuàng)建這種鏈接時，需要先插入命名錨位置，這種鏈接就稱

16、為錨記鏈接。創(chuàng)建這種鏈接時，需要先插入命名錨記，以便在文檔中設置標記，然后再創(chuàng)建鏈接。記，以便在文檔中設置標記，然后再創(chuàng)建鏈接。LOGO7.3 創(chuàng)建超鏈接創(chuàng)建超鏈接（1）打開需要編輯的網(wǎng)頁文件，將光標置于命名錨記插入處，在）打開需要編輯的網(wǎng)頁文件，將光標置于命名錨記插入處，在【插入插入】面板的面板的【常用常用】分類中單擊分類中單擊【命名錨記命名錨記】按鈕或者選擇按鈕或者選擇【插入插入】|【命名錨命名錨記記】命令，彈出命令，彈出【命名錨記命名錨記】對話框，輸入錨記名稱，單擊對話框，輸入錨記名稱，單擊【確定確定】按鈕，按鈕，則在光標處插入了錨記標記。則在光標處插入了錨記標記。LOGO7.3 創(chuàng)建超

17、鏈接創(chuàng)建超鏈接（2）添加錨記鏈接，在網(wǎng)頁文檔中選中需要建立錨記鏈接的文本或其他）添加錨記鏈接，在網(wǎng)頁文檔中選中需要建立錨記鏈接的文本或其他網(wǎng)頁元素，在網(wǎng)頁元素，在【屬性屬性】面板的面板的【鏈接鏈接】文本框中輸入需要鏈接的錨記名稱，文本框中輸入需要鏈接的錨記名稱，該名稱前必須加上符號該名稱前必須加上符號“#”。（3）保存文件，按）保存文件，按F12鍵進行預覽，單擊設置錨記的元素，頁面將自動跳鍵進行預覽，單擊設置錨記的元素，頁面將自動跳轉(zhuǎn)到該錨記名稱的位置。轉(zhuǎn)到該錨記名稱的位置。LOGO7.3 創(chuàng)建超鏈接創(chuàng)建超鏈接4.創(chuàng)建電子郵件鏈接：其操作步驟為：創(chuàng)建電子郵件鏈接：其操作步驟為：（1）在文檔窗口

18、中，將光標定位在要創(chuàng)建電子郵件鏈接的位置處。）在文檔窗口中，將光標定位在要創(chuàng)建電子郵件鏈接的位置處。（2）在）在【插入插入】面板中單擊面板中單擊【電子郵件鏈接電子郵件鏈接】按鈕，或者選擇按鈕，或者選擇【插入插入】|【電子郵件鏈接電子郵件鏈接】菜單命令，彈出菜單命令，彈出【電子郵件鏈接電子郵件鏈接】對話框。對話框?！疚谋疚谋尽课谋究蛑休斎胗糜趧?chuàng)建鏈接的文本，文本框中輸入用于創(chuàng)建鏈接的文本，【電子郵件電子郵件】文本框中輸入鏈接的文本框中輸入鏈接的電子郵件地址，單擊電子郵件地址，單擊【確定確定】按鈕，即可創(chuàng)建電子郵件鏈接。按鈕，即可創(chuàng)建電子郵件鏈接。LOGO7.3 創(chuàng)建超鏈接創(chuàng)建超鏈接 也可以在文檔

19、窗口中選擇要創(chuàng)建電子郵件鏈接的文本或圖像，然后在也可以在文檔窗口中選擇要創(chuàng)建電子郵件鏈接的文本或圖像，然后在【屬性屬性】面板的面板的【鏈接鏈接】文本框中輸入文本框中輸入“mailto：電子郵箱地址：電子郵箱地址”。（3）保存文件，按）保存文件，按F12鍵在瀏覽器中預覽，當用戶單擊超連接時，將自鍵在瀏覽器中預覽，當用戶單擊超連接時，將自動打開默認的電子郵件應用程序動打開默認的電子郵件應用程序Outlook Express創(chuàng)建新郵件，新郵件書創(chuàng)建新郵件，新郵件書寫完畢后，單擊寫完畢后，單擊【發(fā)送發(fā)送】按鈕即可發(fā)送。按鈕即可發(fā)送。LOGO7.3 創(chuàng)建超鏈接創(chuàng)建超鏈接5.創(chuàng)建腳本鏈接：當單擊鏈接時引發(fā)

20、的一個定義的動作腳本。其操作步驟創(chuàng)建腳本鏈接：當單擊鏈接時引發(fā)的一個定義的動作腳本。其操作步驟為：為：（1）在文檔窗口中，選擇要創(chuàng)建腳本鏈接的文本或圖像。）在文檔窗口中，選擇要創(chuàng)建腳本鏈接的文本或圖像。（2）在）在【屬性屬性】面板的面板的【鏈接鏈接】文本框中輸入文本框中輸入javascript:，并在其后輸，并在其后輸入入Javascript代碼或函數(shù)調(diào)用，例如：代碼或函數(shù)調(diào)用，例如：window.close();,即關閉窗口。即關閉窗口。（3）保存文件，按）保存文件，按F12鍵在瀏覽器中預覽，當用戶單擊超連接時會觸發(fā)鍵在瀏覽器中預覽，當用戶單擊超連接時會觸發(fā)動作。動作。LOGO7.3 創(chuàng)建鏈

21、接創(chuàng)建鏈接6.創(chuàng)建空鏈接：沒有目標端點的鏈接，利用空鏈接，可以激活文件中創(chuàng)建空鏈接：沒有目標端點的鏈接，利用空鏈接，可以激活文件中的鏈接對應的對象和文本，當文本或?qū)ο蟊患せ詈?，可以為其添加行的鏈接對應的對象和文本，當文本或?qū)ο蟊患せ詈?，可以為其添加行為，如當鼠標?jīng)過后變換圖片等。其操作步驟為：為，如當鼠標經(jīng)過后變換圖片等。其操作步驟為：（1）在文檔窗口中，選擇要創(chuàng)建空鏈接的文本或圖像。）在文檔窗口中，選擇要創(chuàng)建空鏈接的文本或圖像。（2）在）在【屬性屬性】面板的面板的【鏈接鏈接】文本框中輸入空鏈接文本框中輸入空鏈接#。LOGO7.3 創(chuàng)建鏈接創(chuàng)建鏈接7.創(chuàng)建文件下載鏈接：當被鏈接的文件是創(chuàng)建文件

22、下載鏈接：當被鏈接的文件是exe文件或文件或zip文件等瀏覽器不支文件等瀏覽器不支持的類型時，這些文件會被下載，這就是網(wǎng)上下載的方法。其操作步驟持的類型時，這些文件會被下載，這就是網(wǎng)上下載的方法。其操作步驟為：為：（1）在文檔窗口中，選擇要創(chuàng)建下載鏈接的文本或圖像，單擊右鍵。）在文檔窗口中，選擇要創(chuàng)建下載鏈接的文本或圖像，單擊右鍵。（2）在快捷菜單中選擇）在快捷菜單中選擇【創(chuàng)建鏈接創(chuàng)建鏈接】命令，打開命令，打開【選擇文件選擇文件】對話框，對話框，進行目標文件選擇即可，單擊進行目標文件選擇即可，單擊“確定確定”按鈕，在按鈕，在【屬性屬性】面板的面板的【鏈接鏈接】文本框中顯示了所要鏈接下載的文件名

23、稱。文本框中顯示了所要鏈接下載的文件名稱。 （3）保存頁面，按）保存頁面，按F12鍵預覽，單擊頁面中的鏈接，彈出鍵預覽，單擊頁面中的鏈接，彈出“文件下載文件下載”對話框，單擊對話框，單擊“保存保存”按鈕，彈出按鈕，彈出“另存為另存為”對話框，選擇保存在本地對話框，選擇保存在本地計算機的目錄，單擊計算機的目錄，單擊“保存保存”，所鏈接的下載文件即可保存在該位置。，所鏈接的下載文件即可保存在該位置。LOGO7.3 創(chuàng)建鏈接創(chuàng)建鏈接8.在在HTML源代碼中創(chuàng)建鏈接：源代碼中創(chuàng)建鏈接：l使用使用標記，結(jié)合標記，結(jié)合href屬性創(chuàng)建文本鏈接。屬性創(chuàng)建文本鏈接。l使用使用標記，結(jié)合標記，結(jié)合href屬性，

24、以及屬性，以及標記和標記和src屬性創(chuàng)建圖像屬性創(chuàng)建圖像鏈接。鏈接。LOGO7.4 創(chuàng)建導航鏈接創(chuàng)建導航鏈接 網(wǎng)頁導航相當于一個網(wǎng)站的目錄，用來告訴訪問者網(wǎng)站所包含的的網(wǎng)頁導航相當于一個網(wǎng)站的目錄，用來告訴訪問者網(wǎng)站所包含的的內(nèi)容，引導用戶快速找到自己感興趣的內(nèi)容。內(nèi)容，引導用戶快速找到自己感興趣的內(nèi)容。 網(wǎng)頁導航是整個網(wǎng)站中所有主要網(wǎng)頁的鏈接所在地，無論用戶當前網(wǎng)頁導航是整個網(wǎng)站中所有主要網(wǎng)頁的鏈接所在地，無論用戶當前瀏覽到何處，只要單擊相應的鏈接就可以進入所鏈接的頁面，實現(xiàn)網(wǎng)上瀏覽到何處，只要單擊相應的鏈接就可以進入所鏈接的頁面，實現(xiàn)網(wǎng)上沖浪的感覺。同時，網(wǎng)頁導航作為網(wǎng)頁設計的主要組成部分

25、，一定要放沖浪的感覺。同時，網(wǎng)頁導航作為網(wǎng)頁設計的主要組成部分，一定要放置在網(wǎng)頁最明顯的位置，這樣，瀏覽者可以在第一時間看到它，同時做置在網(wǎng)頁最明顯的位置，這樣，瀏覽者可以在第一時間看到它，同時做出判斷，進入他們想要瀏覽的信息欄目。出判斷，進入他們想要瀏覽的信息欄目。LOGO7.4 創(chuàng)建導航鏈接創(chuàng)建導航鏈接導航的方向：指導航按鈕的排列方式導航的方向：指導航按鈕的排列方式LOGO7.4 創(chuàng)建導航鏈接創(chuàng)建導航鏈接1.傳統(tǒng)傳統(tǒng)Table布局創(chuàng)建導航：布局創(chuàng)建導航： 確定導航欄目及方向，選擇確定導航欄目及方向，選擇【插入插入】|【表格表格】命令，打開命令，打開【表格表格】對對話框，設置行列數(shù)、表格寬度

26、，把邊框、邊距設為話框，設置行列數(shù)、表格寬度，把邊框、邊距設為0以隱藏表格線，單擊以隱藏表格線，單擊【確定確定】按鈕，即在網(wǎng)頁文檔中插入了一個表格。按鈕，即在網(wǎng)頁文檔中插入了一個表格。在每個單元格中插入導航文字，并使文字居中顯示。在每個單元格中插入導航文字，并使文字居中顯示。LOGO7.4 創(chuàng)建導航鏈接創(chuàng)建導航鏈接2.CSS設計網(wǎng)站導航設計網(wǎng)站導航 導航實際上也是一種列表，可以理解為導航列表，導航中的每個欄目導航實際上也是一種列表，可以理解為導航列表，導航中的每個欄目就是一個列表項，因此，使用就是一個列表項，因此，使用CSS布局的形式制作導航，主要是使用無序布局的形式制作導航，主要是使用無序列

27、表列表ul。每個。每個表示其中的內(nèi)容為一個列表塊，塊中的每一條列表表示其中的內(nèi)容為一個列表塊，塊中的每一條列表數(shù)據(jù)用數(shù)據(jù)用來描述。其創(chuàng)建方法為：來描述。其創(chuàng)建方法為：（1）在插入點位置輸入各個導航欄目，每一個導航欄目為一個段落，將）在插入點位置輸入各個導航欄目，每一個導航欄目為一個段落，將所有導航欄目選中，在所有導航欄目選中，在【屬性屬性】面板中選擇面板中選擇【項目列表項目列表】按鈕，使導航欄按鈕，使導航欄目稱為一個無序列表，并為每個列表項設置空鏈接。目稱為一個無序列表，并為每個列表項設置空鏈接。LOGO7.4 創(chuàng)建導航鏈接創(chuàng)建導航鏈接（2）創(chuàng)建一個）創(chuàng)建一個CSS樣式規(guī)則，選擇器類型為樣式規(guī)

28、則，選擇器類型為ID，名稱為，名稱為#nav，設置其，設置其CSS基本屬基本屬性，應用于無序列表性，應用于無序列表ul，即，即。如：。如：#nav font-family: 宋體宋體;font-size: 16px;list-style-type: none; 首頁首頁 作品區(qū)作品區(qū) 排行榜排行榜LOGO7.4 創(chuàng)建導航鏈接創(chuàng)建導航鏈接（3）鏈接對象）鏈接對象a的樣式控制：新建一個的樣式控制：新建一個CSS樣式規(guī)則，選擇器類型為復合內(nèi)容，樣式規(guī)則，選擇器類型為復合內(nèi)容，名稱為名稱為#nav li a，即為每個，即為每個li下的每一個下的每一個a鏈接對象設置其鏈接對象設置其CSS樣式。如：樣式。

29、如：#nav li a color: #000;text-decoration: none;background-color: #CCC;text-align: center;height: 22px;width: 97px;margin-left: 3px;padding-top: 4px;display: block;使得使得a a鏈接對象的顯示方式鏈接對象的顯示方式由一段文本改為一個塊狀由一段文本改為一個塊狀對象，從而可以使用對象，從而可以使用CSSCSS的的填充、邊界、邊框等屬性填充、邊界、邊框等屬性給給a a鏈接對象加上一系列的鏈接對象加上一系列的樣式。樣式。LOGO7.4 創(chuàng)建導航

30、鏈接創(chuàng)建導航鏈接（4）豎向?qū)Ш阶優(yōu)闄M向?qū)Ш剑盒陆ㄒ粋€）豎向?qū)Ш阶優(yōu)闄M向?qū)Ш剑盒陆ㄒ粋€CSS樣式規(guī)則，選擇器類型為復合內(nèi)容，樣式規(guī)則，選擇器類型為復合內(nèi)容，名稱為名稱為#nav li，每個，每個li對象設置其對象設置其float屬性為屬性為left，使得其自身向左浮動，從而使，使得其自身向左浮動，從而使下一個對象貼近該對象的右邊，最終所有的下一個對象貼近該對象的右邊，最終所有的li都具有了向左浮動的特性，從而形成都具有了向左浮動的特性，從而形成了橫向的排列方式。代碼如下：了橫向的排列方式。代碼如下：#nav li float: left;LOGO7.4 創(chuàng)建導航鏈接創(chuàng)建導航鏈接（5）交互式導航效果設計：新建一個）交互式導航效果設計：新建一個CSS樣式規(guī)則，選擇器類型為復合內(nèi)容，名樣式規(guī)則，選擇器類型為復合內(nèi)容，名稱為稱為#nav li a:hover，為每個，為每個li下的下的a連接對象設置連接對象設置。代碼如下：代碼如下：#nav li a:hover color: #FFF;backgro