《新編網(wǎng)頁制作三劍客培訓教程》課件第4章

第4章建立網(wǎng)頁鏈接4.1網(wǎng)頁鏈接概述4.2創(chuàng)建文字鏈接4.3創(chuàng)建跳轉(zhuǎn)菜單鏈接4.4創(chuàng)建Spry導航菜單4.5創(chuàng)建圖片鏈接4.6上機實訓4.1網(wǎng)頁鏈接概述4.1.1鏈接起點4.1.2鏈接路徑4.1.3鏈接目標文件4.1.1鏈接起點

鏈接起點指插入到網(wǎng)頁中的一個元素，是用戶點擊的部位，其可以是文字、圖片、圖片熱區(qū)或按鈕等多種形式。也就是，當用戶點擊加了鏈接的文字、圖片、圖片熱區(qū)或按鈕等部位時，瀏覽器會自動跳轉(zhuǎn)到所鏈接的目標。其中最常使用的是文字，也稱文字鏈接。默認情況下如果文字中添加了鏈接，在瀏覽狀態(tài)下就會出現(xiàn)下劃線，使用CSS層疊樣式表(詳見“第5章使用層疊樣式表控制網(wǎng)頁效果”)可以使其具有某些按鈕的效果。4.1.2鏈接路徑1.絕對路徑

所謂絕對路徑，指的是每個網(wǎng)頁在網(wǎng)絡(包括：Internet、廣域網(wǎng)、城域網(wǎng)或局域網(wǎng))中完整的、唯一的訪問地址，又稱為“URL”地址。也就是用戶訪問網(wǎng)絡資源時瀏覽器地址欄中顯示的內(nèi)容。網(wǎng)絡中的每個網(wǎng)頁或其他資源均有一個唯一的地址，這樣才可以被用戶訪問而不會發(fā)生錯誤。

4.1.2鏈接路徑2.文檔相對路徑文檔相對路徑是指相對于鏈接起點所在網(wǎng)頁來描述鏈接目標文件的路徑。比如：在網(wǎng)頁“ch2/2-1.html”中有一個鏈接要打開網(wǎng)頁“ch1/1-1.html”，那么其相對于網(wǎng)頁“2-1.html”的路徑就是“../ch1/1-1.html”，如圖4-1所示，這就屬于文檔相對路徑。也就是，鏈接起點為“2-1.html”，鏈接目標為“1-1.html”，那么文檔相對路徑就是“../ch1/1-1.html”。圖4-1文檔相對路徑4.1.2鏈接路徑3.站點根目錄相對路徑站點根目錄相對路徑也屬于相對路徑，是相對于站點根目錄的鏈接路徑。與文檔相對路徑不同的是相對的起點不同。文檔相對路徑的起點是鏈接起點所在的網(wǎng)頁，而站點根目錄相對路徑的起點為站點根目錄。4.1.3鏈接目標文件1.文件鏈接文件鏈接是指與其他文檔或文件(如圖形、影片、PDF或聲音文件)的鏈接。鏈接目標文件一般可分為瀏覽器可解釋的文件和瀏覽器不可解釋的文件兩類。瀏覽器可解釋的文件當鏈接執(zhí)行(用戶點擊)以后瀏覽器可解釋的文件將直接顯示在瀏覽器窗口中，這些目標文件一般是各種格式的網(wǎng)頁文件和圖片動畫文件。瀏覽器不可解釋的文件當鏈接執(zhí)行(用戶點擊)以后，如果遇到的是瀏覽器不能解釋的文件，那么站點將會彈出【下載】對話框，提醒用戶是【保存】還是【打開】文件。如果單擊【保存】按鈕，目標文件將被保存到用戶指定的目錄中；如果單擊【打開】按鈕，目標文件將被首先自動保存到瀏覽器的緩存文件夾中，然后再選擇用戶計算機默認的程序打開文件。這類文件一般是瀏覽器不能直接解釋的各種媒體文件、各種打包文件以及各種程序文件。4.1.3鏈接目標文件2.錨記鏈接錨記(也叫錨點)鏈接是指首先打開目標網(wǎng)頁并自動跳轉(zhuǎn)至網(wǎng)頁中命名了錨記的特定位置。要求所鏈接的目標網(wǎng)頁必須首先命名了錨記才行。3.電子郵件鏈接電子郵件鏈接是指鏈接的路徑為一個郵件地址，執(zhí)行時將新建一個已填好收件人地址的空白電子郵件。4.2創(chuàng)建文字鏈接4.2.1鏈接到文件4.2.2鏈接到錨記4.2.3鏈接到電子郵件4.2.1鏈接到文件1.鏈接到本地文件執(zhí)行下列操作之一，可以創(chuàng)建文字鏈接到本地文件。在【屬性】面板中單擊【瀏覽文件】按鈕創(chuàng)建鏈接。選擇要創(chuàng)建鏈接的文字，單擊【屬性】面板右上角【鏈接】下拉列表框右側(cè)的【瀏覽文件】按鈕，彈出【選擇文件】對話框，如圖4-2所示。在【相對于】下拉列表框中選擇【文檔】選項，再在“ch3”文件夾的列表框中選擇一個本地文件“3-1.html”，單擊【確定】按鈕。這時【屬性】面板的【鏈接】下拉列表框中就會自動形成文檔相對路徑“../ch3/3-1.html”。圖4-2【選擇文件】對話框4.2.1鏈接到文件

在【屬性】面板中單擊【指向】按鈕創(chuàng)建鏈接。選中要創(chuàng)建鏈接的文字，在【屬性】面板的【指向】按鈕上按住鼠標左鍵不松手，拖動鼠標到目標文件上方后松開鼠標，如圖4-3所示。圖4-3【指向】按鈕操作示意圖4.2.1鏈接到文件2.鏈接到網(wǎng)絡資源鏈接到網(wǎng)絡資源中的某一個文件就不能使用上面剛講過的“鏈接到本地文件”的方法了。比如：要創(chuàng)建鏈接到“百度”網(wǎng)站首頁的鏈接，可以執(zhí)行以下操作。(1)啟動瀏覽器，瀏覽到“百度”網(wǎng)站的首頁，選中【地址】欄中的地址后右擊，在彈出的右鍵快捷菜單中選擇【復制】命令，將其復制到剪貼板中，如圖4-4所示。圖4-4【復制】絕對路徑4.2.1鏈接到文件(2)返回Dreamweaver軟件中，選中要創(chuàng)建鏈接的文字，在【屬性】面板的【鏈接】下拉列表框中右擊，在彈出的右鍵快捷菜單中選擇【粘貼】命令，將網(wǎng)絡資源的絕對路徑粘貼到【鏈接】下拉列表框中，如圖4-5所示。圖4-5【粘貼】絕對路徑4.2.1鏈接到文件3.鏈接目標文件顯示窗口鏈接目標文件顯示窗口是指當執(zhí)行一個鏈接后目標文件所顯示的位置。在創(chuàng)建了鏈接的屬性中均有【目標】屬性，其中在沒有應用框架的情況下，每個鏈接的【目標】下拉列表框中都有如下4個選項。●【_blank】：在新瀏覽器窗口中打開所鏈接的頁面。●【_self】：在同一個瀏覽器窗口中加載所鏈接的頁面，這是默認選項。如果頁面位于框架或框架集中，該頁面將在該框架中加載?！瘛綺parent】：在文檔的直接父框架集中加載所鏈接的文檔。●【_top】：在框架集的頂層窗口中加載所鏈接的頁面。4.2.2鏈接到錨記1.創(chuàng)建命名錨記命名錨記就好像是一個書簽一樣，使網(wǎng)頁用戶可以快速定位到需要的位置，主要應用在當一個網(wǎng)頁文檔的內(nèi)容比較多，需要拖動縱向卷滾條查看網(wǎng)頁中的內(nèi)容。可以執(zhí)行下列操作創(chuàng)建命名錨記。4.2.2鏈接到錨記(1)在【文檔】窗口的【設(shè)計】視圖中，將插入點定位在需要命名錨記的地方。在菜欄中選擇【插入】→【命名錨記】命令，彈出【命名錨記】對話框，如圖4-6所示。(2)在【錨記名稱】文本框中輸入錨記的名稱(錨記名稱不能包含空格)，然后單擊【確定】按鈕，【錨記標記】圖標將出現(xiàn)在插入點。圖4-6【命名錨記】對話框4.2.2鏈接到錨記2.鏈接到命名錨記鏈接到命名錨記的操作步驟如下。(1)在【文檔】窗口的【設(shè)計】視圖中，選擇要創(chuàng)建鏈接的文本或圖像。(2)在【屬性】面板的【鏈接】下拉列表框中，輸入一個符號“#”和錨記名稱。例如，若要鏈接到當前網(wǎng)頁文檔中名為“01”的錨記，就輸入“#01”。若要鏈接到同一文件夾中其他文件(如“4-2.html”文件)中名為“01”的錨記，需輸入“4-2.html#01”。4.2.2鏈接到錨記3.使用拖拽方法鏈接到命名錨記使用拖拽方法鏈接到命名錨記的操作步驟如下。(1)同時打開鏈接起點網(wǎng)頁和包含命名錨記的鏈接目標網(wǎng)頁。(2)選擇網(wǎng)頁文檔右上角【窗口】按鈕中的【向下還原】按鈕(取消最大化)，并適當調(diào)整窗口大小，以同時看到起點網(wǎng)頁的鏈接起點和目標網(wǎng)頁的錨記標記。(3)在【文檔】窗口的【設(shè)計】視圖中，選擇要創(chuàng)建鏈接的文本。(4)執(zhí)行下列操作之一。4.2.2鏈接到錨記

單擊【屬性】面板【鏈接】下拉列表框右側(cè)的【指向】按鈕，然后將它拖到要鏈接到的錨記上?？梢允峭晃臋n中的錨記，也可以是其他打開的文檔中的錨記，如圖4-7所示。在【文檔】窗口中，按<Shift>鍵拖動鼠標，從所選文本拖動到要鏈接到的錨記。圖4-7拖拽指向目標4.2.3鏈接到電子郵件

創(chuàng)建電子郵件鏈接要求用戶計算機安裝Outlook軟件，其方法如下。(1)將插入點定位在要創(chuàng)建到電子郵件鏈接的位置。(2)在菜單欄中選擇【插入記錄】→【電子郵件鏈接】命令，彈出【電子郵件鏈接】對話框，如圖4-8所示。圖3-3在【屬性】面板中修改水平線的屬性圖4-8【電子郵件鏈接】對話框4.3創(chuàng)建跳轉(zhuǎn)菜單鏈接4.3.1插入跳轉(zhuǎn)菜單4.3.2修改跳轉(zhuǎn)菜單4.3.1插入跳轉(zhuǎn)菜單

打開一個文檔，然后將插入點定位在網(wǎng)頁【文檔】窗口中。

(1)在菜單欄中選擇【插入】→【表單】→【跳轉(zhuǎn)菜單】命令，彈出【插入跳轉(zhuǎn)菜單】對話框，如圖4-9所示。

(2)完成【插入跳轉(zhuǎn)菜單】對話框中的各項設(shè)置后，單擊【確定】按鈕。圖3-3在【屬性】面板中修改水平線的屬性圖4-9【插入跳轉(zhuǎn)菜單】對話框4.3.2修改跳轉(zhuǎn)菜單插入跳轉(zhuǎn)菜單以后可以更改菜單項的順序或菜單項所鏈接到的文件，也可以添加、刪除或重命名菜單項。(1)在【文檔】窗口的【設(shè)計】視圖中，單擊跳轉(zhuǎn)菜單對象以選中對象。(2)在【屬性】面板中，單擊【列表值】按鈕，彈出【列表值】對話框，如圖4-10所示。(3)使用【列表值】對話框更改菜單項，再單擊【確定】按鈕。

圖3-3在【屬性】面板中修改水平線的屬性圖4-10【列表值】對話框4.4創(chuàng)建Spry導航菜單4.4.1添加Spry導航菜單4.4.2修改Spry導航菜單圖3-3在【屬性】面板中修改水平線的屬性4.4.1添加Spry導航菜單進行如下操作可以插入Spry導航菜單。(1)將插入點定位到需要插入導航菜單的位置。(2)在菜單欄中選擇【插入】→【Spry】→【Spry菜單欄】命令，彈出【Spry菜單欄】對話框，如圖4-11所示。圖3-3在【屬性】面板中修改水平線的屬性圖4-11【Spry菜單欄】對話框4.4.1添加Spry導航菜單(3)點選【水平】或【垂直】單選鈕，再單擊【確定】按鈕。若網(wǎng)頁在瀏覽狀態(tài)下，如果點選【水平】單選鈕，菜單效果為橫向?qū)Ш讲藛?，如圖4-12所示。圖4-12橫向?qū)Ш讲藛螆D4-12橫向?qū)Ш讲藛?.4.1添加Spry導航菜單(4)在【設(shè)計】視圖中選擇【Spry菜單欄：MenuBar2】命令，如圖4-14所示。在【屬性】面板中選擇【項目1】選項，在【文本】文本框中將【項目1】修改為“第1章”，如圖4-15所示。圖4-15在【屬性】面板中將【項目1】選項修改為“第1章”4.4.1添加Spry導航菜單(5)重復步驟(4)，分別將【項目2】改為“第2章”、【項目3】改為“第3章”。(6)在【屬性】面板中選擇【項目4】，單擊其上方的【刪除】按鈕將其刪除。(7)在【屬性】面板中選擇“第1章”，將【項目1.1】改為“第1節(jié)”，單擊【鏈接】右側(cè)的【瀏覽文件】按鈕查找到目標網(wǎng)頁“ch1/1-1.html”；將【項目1.2】和【項目1.3】刪除，如圖4-16所示。圖4-16在【屬性】面板中將【項目1.1】選項修改為“第1節(jié)”4.4.1添加Spry導航菜單(8)在【屬性】面板中選擇“第2章”，并單擊【屬性】面板中間列表上方的【增項】按鈕，添加3個2級菜單，分別為“第1節(jié)”、“第2節(jié)”和“第3節(jié)”，并分別指向“ch2”文件夾中的“2-1.html”、“2-2.html”和“2-3.html”網(wǎng)頁，如圖4-17所示。圖4-17在【屬性】面板中修改“第2章”的2級菜單4.4.1添加Spry導航菜單(9)在【屬性】面板中選擇“第3章”選項，分別將2級菜單名改為“第1節(jié)”、“第2節(jié)”和“第3節(jié)”，并分別指向“ch3”文件夾中的“3-1.html”、“3-2.html”和“3-3.html”網(wǎng)頁，刪除“第1節(jié)”下的3級子菜單。完成后，編輯狀態(tài)下最終效果如圖4-18所示。圖4-18編輯狀態(tài)下最終效果4.4.2修改Spry導航菜單1.指定菜單項的目標屬性目標屬性是指要在何處打開所鏈接的目標頁面。例如，可以為菜單項分配一個目標屬性，以便在站點用戶單擊鏈接時，在新瀏覽器窗口中打開所鏈接的頁面。如果使用的是框架集，則還可以指定要在其中打開所鏈接頁面的框架的名稱。關(guān)于框架集詳見“第6章使用框架布局網(wǎng)頁”。進行如下操作可以指定菜單項的目標屬性。(1)在【文檔】窗口中選擇一個Spry導航菜單。(2)在【屬性】面板中，選擇要分配目標屬性的菜單項名稱。(3)在【目標】下拉列表框中選擇以下4個選項之一。4.4.2修改Spry導航菜單2.其他修改要修改Spry導航菜單的一些內(nèi)容，一般可在其【屬性】面板中實現(xiàn)。在【設(shè)計】視圖中選擇Spry菜單標題，打開其【屬性】面板進行修改，如圖4-20所示。圖4-20【屬性】面板

4.5創(chuàng)建圖片鏈接

4.5.1創(chuàng)建圖片整體鏈接4.5.2創(chuàng)建圖片局部熱點鏈接4.5.1創(chuàng)建圖片整體鏈接(1)首先將一幅圖片插入到頁面中，并將各個圖片的寬度和高度在【屬性】面板中調(diào)整為一致(這樣有利于美觀)，如圖4-21所示。圖4-21插入頁面中的圖片4.5.1創(chuàng)建圖片整體鏈接(2)在【設(shè)計】視圖中，選擇插入到頁面的圖片，在【屬性】面板中，單擊【鏈接】下拉列表框右側(cè)的【指向】按鈕，拖動鼠標至【文件】面板對應的圖片文件上松開鼠標，如圖4-22所示。圖4-22為圖片添加鏈接4.5.1創(chuàng)建圖片整體鏈接(3)在【設(shè)計】視圖中選擇添加了鏈接的圖片，并且在【屬性】面板的【目標】下拉列表框中選擇【_blank】選項，如圖4-23所示，使其目標圖片在新彈出的窗口中顯示。圖4-23【屬性】面板的【目標】下拉列表框4.5.2創(chuàng)建圖片局部熱點鏈接(1)首先將一幅圖片(河北地圖)插入到頁面中，選中圖片后在【屬性】面板中單擊【多邊形熱點工具】按鈕，如圖4-24所示。圖4-24在【屬性】面板中單擊【多邊形熱點工具】按鈕4.5.2創(chuàng)建圖片局部熱點鏈接(2)將光標定位到【設(shè)計】視圖窗口中，鼠標指針變?yōu)椤笆中巍保匦枰L制圖形的邊緣(比如：承德市)不斷單擊直至閉合，最后雙擊結(jié)束繪制。繪制的不規(guī)則熱區(qū)如圖4-25所示。圖4-25繪制的不規(guī)則熱區(qū)4.5.2創(chuàng)建圖片局部熱點鏈接(3)選擇熱區(qū)(出現(xiàn)控制點)，在【屬性】面板中為其添加“chengde.jpg”圖片文件(承德地圖)的鏈接，在【目標】下拉列表框中選擇【_blank】選項，【替換】文本框中輸入“承德地圖”用于文字提示，如圖4-26所示。圖4-26為熱區(qū)添加鏈接4.5.2創(chuàng)建圖片局部熱點鏈接(4)按<F12>鍵預覽本頁，當光標指向熱區(qū)時，將變?yōu)槭中喂鈽?，光標右下角出現(xiàn)“承德地圖”文字提示條，如圖4-27所示。圖4-27預覽狀態(tài)4.6上機實訓

4.6.1制作“奧運吉祥物”網(wǎng)站4.6.2制作地圖網(wǎng)站4.6.1制作“奧運吉祥物”網(wǎng)站

使用“站點實例”素材文件夾(WebDemo\AY_Media\jixiangwu)提供的圖片和文本素材制作“奧運之旅”網(wǎng)站的子欄目網(wǎng)站“奧運吉祥物”。1.實訓目的4.6.1制作“奧運吉祥物”網(wǎng)站2.實訓分析(1)在3.6.2節(jié)中制作的“奧運之旅”網(wǎng)頁(3.6.2x.html)的基礎(chǔ)上進行修改。(2)文字部分按文本文件(WebDemo\AY_Media\jixiangwu\奧運吉祥物.txt)提供的資料修改。(3)圖片部分文件名不帶“X”的(如：20.jpg)為大圖，用在各個主題頁上，帶“X”的(如：20x.jpg)為縮略圖，用在欄目主頁上。4.6.1制作“奧運吉祥物”網(wǎng)站3.實訓步驟(1)啟動Dreamweaver軟件，打開“3.6.2”節(jié)中制作的“奧運之旅”主頁(WebDemo\ch3\3.6.2x.html)，將其另存為“WebDemo\ch4\4.6.1-1.html”，網(wǎng)頁下部需要修改的部分如圖4-29所示。圖4-29網(wǎng)頁下部需要修改的部分4.6.1制作“奧運吉祥物”網(wǎng)站3.實訓步驟(2)通過鼠標拖拽選中左側(cè)文字鏈接部分的最下面3行。按<Delete>鍵將其刪除。(3)打開“奧運吉祥物.txt”文件，按其內(nèi)容將其余10行分別改為如圖4-31所示的“奧運吉祥物”目錄。圖4-31“奧運吉祥物”目錄4.6.1制作“奧運吉祥物”網(wǎng)站3.實訓步驟(4)將如圖4-29所示右側(cè)上部文字通過復制、粘貼將其內(nèi)容改為“1972年的慕尼黑奧運會(小獵狗)”相關(guān)內(nèi)容。(5)將如圖4-29所示右側(cè)中間文字內(nèi)容刪除，插入一個表格(1行，1列，寬45像素，單元格間距為4，邊框為1)。選擇剛插入的表格，按<→右>方向鍵將光標定位到其所在的單元格中，在【屬性】面板的【水平】下拉列表框中選擇【居中對齊】選項，以使表格在單元格中水平居中。4.6.1制作“奧運吉祥物”網(wǎng)站3.實訓步驟(6)在【文件】面板中將“20.jpg”圖片文件通過鼠標拖拽到表格中，如圖4-32所示。完成“4.6.1-1.html”網(wǎng)頁修改的最終效果如圖4-33所示。圖4-32通過拖拽插入圖片4.6.1制作“奧運吉祥物”網(wǎng)站3.實訓步驟(7)將“4.6.1-1.html”另存為“4.6.1-2.html”，將右側(cè)文字部分按提供的文字資料改為“1976年蒙特利爾奧運會(海貍)”相關(guān)內(nèi)容，將圖片改為“