第四章超鏈接_第1頁
第四章超鏈接_第2頁
第四章超鏈接_第3頁
第四章超鏈接_第4頁
第四章超鏈接_第5頁
已閱讀5頁,還剩11頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、第4章 超鏈接重點(diǎn)和難點(diǎn)1、鏈接的檢查與測試2、絕對路徑3、相對路徑4、創(chuàng)建超鏈接5、錨點(diǎn)的建立1項(xiàng)目一:超鏈接基礎(chǔ)知識 超鏈接就是一種超媒體鏈接技術(shù), 超鏈接是指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系,這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置,還可以是一個(gè)圖片,一個(gè)電子郵件地址,一個(gè)文件,甚至是一個(gè)應(yīng)用程序。1、超鏈接中的路徑(1)絕對路徑絕對路徑是指被鏈接對象的完整路徑,是一個(gè)完整URL地址。 (2)根目錄相對路徑 根目錄相對路徑是指從站點(diǎn)根文件夾到被鏈接對象經(jīng)過的路徑。站點(diǎn)上所有公開的文件都存放在站點(diǎn)的根目錄下。根目錄相對路徑以一個(gè)正斜杠“/”開始,該正斜杠表示站點(diǎn)根文件夾。 (

2、3)文檔目錄相對路徑 文檔目錄相對路徑是指以當(dāng)前文檔所在位置為起點(diǎn)到被鏈接對象經(jīng)由的路徑,使用相對路徑可以省去當(dāng)前文檔與被鏈接對象的絕對路徑或根目錄相對路徑中相同的部分,保留不同的部分。文檔目錄相對路徑適合于網(wǎng)站的內(nèi)部鏈接。22、 超級鏈接的類型 超級鏈接分為內(nèi)部鏈接和外部鏈接。內(nèi)部鏈接又稱為本地鏈接,是指同一網(wǎng)站文件之間的鏈接。外部鏈接是指不同網(wǎng)站文件之間的鏈接。(1)文檔鏈接:指向其他文檔或文件的鏈接。例如,圖像、影片或聲音文件的鏈接。 (2)命名錨記鏈接:又稱為書簽鏈接,這種鏈接將轉(zhuǎn)到文檔中的一個(gè)指定位置。(3)電子郵件鏈接:這種鏈接將創(chuàng)建一個(gè)新的空白電子郵件,其中收件人地址已經(jīng)填入。(

3、4)空鏈接:這種鏈接不會跳轉(zhuǎn)到任何位置,對于附加Dreamweaver行為有特殊用處。(5)腳本鏈接:創(chuàng)建執(zhí)行JavaScript代碼的鏈接。33、 創(chuàng)建本地鏈接的幾種方法(1) 使用站點(diǎn)地圖中的“指向文件”圖標(biāo)創(chuàng)建鏈接-操作步驟:在“站點(diǎn)”窗口,單擊“站點(diǎn)地圖”圖標(biāo)并選擇“地圖和文件”選項(xiàng),同時(shí)顯示站點(diǎn)地圖和本地文件。在站點(diǎn)地圖中,選中一個(gè)HTML文件,“指向文件”圖標(biāo)自動顯示在文件右側(cè)。拖動“指向文件”圖標(biāo),使其指向站點(diǎn)地圖中的另一個(gè)文件;或拖動“指向文件”圖標(biāo),使其指向“本地文件”視圖中的某個(gè)文件。釋放鼠標(biāo)。所鏈接文件的名稱與路徑顯示在狀態(tài)欄。 (2)使用屬性面板中的“指向文件”圖標(biāo)創(chuàng)建

4、鏈接-操作步驟:在文檔窗口的“設(shè)計(jì)”視圖中選取文本或圖像(例如圖4-31所示的左文檔)。將屬性面板中的“鏈接”框右側(cè)的“指向文件”圖標(biāo)拖動到另外打開的文檔上(例如圖4-31所示的右文檔)。釋放鼠標(biāo),創(chuàng)建結(jié)束。4(3)使用打開文檔之間的指向創(chuàng)建鏈接-操作步驟:在文檔窗口的“設(shè)計(jì)”視圖中選取文本。按住Shift鍵并拖動被選中的文本,指向另一個(gè)打開的文檔,或指向站點(diǎn)窗口中的某個(gè)文件。釋放鼠標(biāo),創(chuàng)建結(jié)束。(4) 使用菜單創(chuàng)建鏈接-操作步驟:在文檔窗口的“設(shè)計(jì)”視圖中選取文本或圖像。選擇“修改”菜單中的“創(chuàng)建鏈接”選項(xiàng),選取鏈接所指向的文件。(5)使用快捷菜單創(chuàng)建鏈接-操作步驟:在文檔窗口的“設(shè)計(jì)”視圖

5、中選取文本或圖像。在選取的文本或圖像上單擊鼠標(biāo)右鍵,從快捷菜單中選擇“創(chuàng)建鏈接”選項(xiàng),然后選取鏈接所指向的文件。(6)創(chuàng)建外部鏈接-操作步驟:選中需要創(chuàng)建外部鏈接的文字或圖像。例如,“搜狐網(wǎng)”。在屬性面板的“鏈接”框中輸入該鏈接的外部網(wǎng)站地址“”。 5項(xiàng)目二:超鏈接實(shí)驗(yàn)(書上典型剖析:信息導(dǎo)航列表)任務(wù)一:項(xiàng)目說明(1)在“Mystuhome”下建立文件夾“超鏈接”,在 “超鏈接”文件夾下建立網(wǎng)頁“index.html”和文件夾“image”(2)在網(wǎng)頁中創(chuàng)建鏈接。(3)在網(wǎng)頁中創(chuàng)建E-mail鏈接。(4)在網(wǎng)頁中制作圖像映射,設(shè)置圖像熱點(diǎn)的超鏈接。任務(wù)二:新建網(wǎng)頁(1)在“Mystuhome

6、”下建立文件夾“超鏈接”,在 “超鏈接”文件夾下建立文件夾“image”和網(wǎng)頁“index.html”,保存網(wǎng)頁文檔,如圖4-1所示。(2)按圖4-1所示編輯網(wǎng)頁,過程這里不在詳敘。演示講解6任務(wù)三:創(chuàng)建內(nèi)部鏈接 為網(wǎng)頁中的文本“我的相冊”建立內(nèi)部鏈接,操作過程如下。(1)選中要設(shè)置超接接的元素,這里是選中文本“我的相冊”。(2)在屬性面板的“鏈接”文本框中直接輸入鏈接路徑或單擊“鏈接”文本框右邊的【瀏覽文件】按鈕,在彈出的“選擇文件”框中選擇一個(gè)鏈接目標(biāo)對象。這里,選擇同一個(gè)文件夾下“MyAlbum.html”。也可以在屬性面板中拖動“鏈接”文本框右側(cè)的【指向文件】按鈕到“文件”面板中相應(yīng)的

7、鏈接目標(biāo)對象,則鏈接將指向該對象。拖動時(shí)會出現(xiàn)一條帶箭頭的線,指示要拖動到的位置,指向?qū)ο蠛笾恍栳尫攀髽?biāo),即可自動生成鏈接。 (3) 鏈接文本框設(shè)置完成后,屬性面板中的“目標(biāo)”下來列表框就自動變?yōu)榭蛇x狀態(tài),用于設(shè)置目標(biāo)對象打開的窗口,共有_blank,_parent, _self,_top四個(gè)選項(xiàng)可供選擇。_blank :表示重新打開一個(gè)新的瀏覽器窗口顯示網(wǎng)頁。_parent :表示在本框架的上一級框架或?yàn)g覽器窗口顯示網(wǎng)頁。_self :表示在自身的框架或?yàn)g覽器窗口內(nèi)顯示,這個(gè)目標(biāo)選項(xiàng)是默認(rèn)的沒有指定時(shí)就會被采用。_top :在瀏覽器窗口打開鏈接的網(wǎng)頁。這里選擇“_blank”。(4) 一個(gè)內(nèi)

8、部鏈接創(chuàng)建完成,設(shè)置完成后如圖所示。單擊【保存】按鈕,按 F12按鈕預(yù)覽網(wǎng)頁。7任務(wù)四:為網(wǎng)頁中的文本“我的家鄉(xiāng)”建立外部鏈接,操作過程如下。(1)選中要設(shè)置超接接的元素,這里是選中文本“我的家鄉(xiāng)”。(2)在屬性面板的“鏈接”文本框中直接輸入外部鏈接的絕對路徑,這里是。 (3)在屬性面板中的“目標(biāo)”下來列表框中設(shè)置目標(biāo)對象打開的窗口,這里選擇“_blank”。(4) 一個(gè)外部鏈接創(chuàng)建完成,單節(jié)【保存】按鈕,按 F12按鈕預(yù)覽網(wǎng)頁。8任務(wù)五:創(chuàng)建E-mail鏈接為方便獲取網(wǎng)頁用戶的意見和建議,通常需要在網(wǎng)頁中建立E-mail鏈接。E-mail鏈接被點(diǎn)擊后會調(diào)用系統(tǒng)中設(shè)置的默認(rèn)郵件程序,打開一個(gè)郵

9、件發(fā)送窗口,用戶可以直接點(diǎn)擊E-mail鏈接發(fā)送郵件。為網(wǎng)頁中文本“我的郵箱”建立E-mail鏈接,操作過程如下。(1)選中要設(shè)置超接接的元素,這里是選中文本“我的郵箱”。(2)在Dreamweaver CS4主窗口中,單擊菜單【插入】【電子郵件鏈接】彈出如圖4-3所示的電子郵件鏈接對話框。(3) 對話框中“文本”指在網(wǎng)頁上顯示的文本,“ E-mail”指需要鏈接到的郵箱地址,這里輸入“” ,單擊【確定】按鈕完成E-mail鏈接的設(shè)置。也可以在屬性面板的“鏈接”文本框中輸入“mailto:”和郵箱地址,這里是“mailto: ”。(4) 一個(gè)E-mail鏈接創(chuàng)建完成,單擊【保存】按鈕,按 F1

10、2按鈕預(yù)覽網(wǎng)頁。9任務(wù)六:創(chuàng)建錨鏈接 超鏈接除了可以鏈接到文件外,還可以鏈接到本頁中的任意位置,這種鏈接方式稱為“錨鏈接”。當(dāng)一個(gè)網(wǎng)頁的主題或文字較多時(shí),為了方便用戶瀏覽,可以在網(wǎng)頁內(nèi)的某些分項(xiàng)內(nèi)容上建立多個(gè)標(biāo)記點(diǎn),將超鏈接指定到這些標(biāo)記點(diǎn)上,使用戶能快速找到要閱讀的內(nèi)容。我們將這些標(biāo)記點(diǎn)稱為錨點(diǎn)(Anchor) 對于一篇包含大量文本信息的、很長的網(wǎng)頁來說,組織按標(biāo)題“索引”,能夠“跳躍”式閱覽是十分必要的。利用書簽錨記可以完成上述的需求。 創(chuàng)建書簽鏈接包含兩個(gè)步驟: 首先創(chuàng)建命名錨記,然后再創(chuàng)建指向該命名錨記的鏈接。 101、創(chuàng)建命名錨記-操作步驟:在文檔窗口的設(shè)計(jì)視圖中,單擊需要創(chuàng)建命名錨

11、記的位置,設(shè)置插入點(diǎn)。例如,正文區(qū)的“八達(dá)嶺”之前。執(zhí)行下列操作之一,彈出命名錨記對話框。選擇“插入”菜單中的“命名錨記”選項(xiàng)。 按下快捷鍵“Ctrl + Alt + A”。在“常用”工具欄中,單擊“命名錨記”按鈕,在“錨記名稱”文本框中,輸入錨記名稱。例如,輸入a1。單擊“確定”按鈕。此時(shí),錨記符號(書簽標(biāo)志)將顯示在插入點(diǎn)位置。如果錨記符號沒有顯示在插入點(diǎn)位置,可以在“查看”菜單,選擇“可視化助理”中的“不可見元素”選項(xiàng),以使錨記可見。參照步驟,繼續(xù)創(chuàng)建其他錨記。選中錨記符號,屬性面板將顯示該錨記的屬性。 112、建立錨記鏈接-操作步驟:在文檔窗口的設(shè)計(jì)視圖中,選取要創(chuàng)建鏈接的文本或圖像。

12、執(zhí)行下列操作之一,建立鏈接。在“屬性”面板的“鏈接”中,輸入一個(gè)數(shù)字符號#以及錨記名稱。例如,鏈接到當(dāng)前文檔中名為“a1”的錨記,則輸入“#a1”。單擊“屬性”面板“鏈接”框右側(cè)的“指向文件”圖標(biāo),并將它拖動到需要鏈接的錨記處,無論該錨記是在同一文檔中還是在其他打開的文檔中。按住Shift鍵并拖動被選中的文本到需要鏈接的錨記處,無論該錨記是在同一文檔還是在其他打開的文檔中。參照步驟,為第二行中的其他文本分別設(shè)置錨記鏈接。按快捷鍵Ctrl + S保存網(wǎng)頁。按快捷鍵F12預(yù)覽網(wǎng)頁。 12項(xiàng)目三:超級鏈接的檢查與測試任務(wù)一:檢查指定文檔中的鏈接-操作步驟:打開需要檢查鏈接的站點(diǎn)。在“文件”菜單中選擇

13、“檢查頁”、“檢查鏈接”選項(xiàng),或按快捷鍵“Shift + F8”,顯示“鏈接檢查器”面板。單擊“檢查鏈接按鈕”,選擇如下三個(gè)選項(xiàng)之一開始檢查。檢查當(dāng)前文檔中的鏈接:選擇此項(xiàng)前應(yīng)打開需要檢查鏈接的文檔。為整個(gè)站點(diǎn)檢查鏈接:選擇此項(xiàng)前應(yīng)打開需要檢查鏈接的站點(diǎn)。為站點(diǎn)中的選定文件/文件夾檢查鏈接:選擇此項(xiàng)前應(yīng)在站點(diǎn)窗口選中需要檢查鏈接的文件或文件夾。從“顯示”下拉列表中選取需要顯示的鏈接報(bào)告。三個(gè)選項(xiàng)是:斷掉的鏈接、外部鏈接、孤立文件。13任務(wù)二:鏈接測試 網(wǎng)站發(fā)布之前,應(yīng)該通過瀏覽器對鏈接進(jìn)行測試。在Dreamweaver CS4主窗口中,單擊菜單【文件】【在瀏覽器中預(yù)覽】【IExplore6.0】,或按F12鍵或單擊“在瀏覽器中預(yù)覽”按鈕就可以在瀏覽器中預(yù)覽網(wǎng)頁,進(jìn)行鏈接測試。14課 后 習(xí) 題一、選擇題1. 下列路徑屬于絕對路徑的是( )。 A) B)/stuhome/index.html C)index.html D)stuhome/index.html2. 將超鏈接的目標(biāo)網(wǎng)頁在新窗口中打開的方式是( )。 A)blank B)parent C)top D)self 3. 用于在同一網(wǎng)頁內(nèi)容之間相互跳轉(zhuǎn)的超鏈接是( )。 A)錨點(diǎn)鏈接 B)空鏈接 C)電子郵件鏈接 D)圖像鏈接二、簡答題

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論