第4章網頁超鏈接2013

第4章網頁超鏈接4.1編織網站鏈接—足球新聞4.2

超鏈接構成及類別4.3管理超鏈接4.1編織網站鏈接—足球新聞1案例綜述“足球新聞”網頁中的超鏈接到網站內頁面的超鏈接―內部鏈接；………外………………―外部鏈接；電子郵件形式的超鏈接―E-mail鏈接；(聯系我們熱點)到網頁某一特定位置的超鏈接―錨點鏈接；下載鏈接。

4.1編織網站鏈接—足球新聞2實現步驟1）準備網頁內容將素材文件夾中的相關文檔復制到站點文件夾下。2）創(chuàng)建超鏈接

步驟1選中頁面中的文字或圖像，

步驟2在屬性面板中單擊“鏈接”文本框右側的文件夾圖標，以通過瀏覽方式選擇一個文件（內部鏈接）?；蛘咧苯釉凇版溄印蔽谋究蜉斎刖W址（外部鏈接）。

步驟3從“目標”下拉菜單中，選擇文檔的打開位置。_blank:新打開的空窗口（每次新建空窗口）_parent：如果是嵌套的框架，則在父框架中打開。_self：會在當前網頁所在的窗口或框架中打開(默認)。_top：會在完整的瀏覽器窗口中打開。new：在名稱為“new”的窗口中，可取別的名字。框架名：3)錨點鏈接指同一個頁面中的某位置，或其他頁面中的某位置。分為兩步：4.1編織網站鏈接—足球新聞創(chuàng)建命名錨記(用錨點標記位置)將光標定位在要設置錨點的位置，插入欄｜命名錨記｜輸入錨點名稱（注意：區(qū)分大小寫）創(chuàng)建到錨點的鏈接選擇要創(chuàng)建鏈接的文本或圖像在屬性面板的鏈接文本框中，鍵入＃號和錨點名稱或在瀏覽對話框中，選中要鏈接的文件后加＃和錨記名稱。4）E－mail鏈接當瀏覽者單擊電子郵件鏈接時，可即時打開瀏覽器默認的電子郵件程序處理程序。步驟：選中文本和圖像插入欄｜常用｜電子郵件鏈接｜輸入郵件地址或在屬性面板的鏈接欄中直接輸入

4.1編織網站鏈接—足球新聞mailto:郵件地址5)下載鏈接當被鏈接的文件是exe文件或rar文件等瀏覽器不支持的類型時，這些文件會被下載，這就是網頁上下載文件的方法。創(chuàng)建方法和鏈接到網頁的方法完全一樣。4.1編織網站鏈接—足球新聞6）空鏈接----占位符作用選中要制作空鏈接的對象，在鏈接文本框中直接輸入＃。一般在站點首頁的導航欄中的首頁鏈接，就可以是一個空鏈接。7)圖像分區(qū)鏈接在圖像上畫出一個或多個區(qū)域（熱點），在每個區(qū)域上建立鏈接。操作：選中圖像在圖像屬性面板中，使用分區(qū)工具（矩形、橢圓、多邊形）在圖像上劃分區(qū)域。為區(qū)域設置鏈接8）跳轉菜單彈出式菜單，每一菜單項上有一鏈接。DreamWeaver內置組件：下拉式列表框+JavaScript代碼操作方法：插入欄｜表單｜跳轉菜單在“插入跳轉菜單”對話框中，單擊＋號添加菜單項4.1編織網站鏈接—足球新聞在“選擇時。轉到URL”文本框中，輸入該文件的路徑。超鏈接源鏈接資源熱點(文本、圖片、圖片分區(qū))1)網頁(含路徑)2)網頁中的書簽(錨點)#錨點，#top,網頁#錨點3)腳本程序,javascript:代碼javascript:window.close();javascript:alert('警告');4)空#，javascript:;5)

電子郵件mailto:zhou_xr@126.com6)媒體文件x.jpg,y.swf7)瀏覽器不能識別的文件

x.docy.rarz.exe資源顯示位置<a

href=“鏈接資源”target=“資源顯示位置”>

超鏈接源</a>鏈接類別1)按熱點不同文本鏈接,圖片……，圖片熱點…,2)按鏈接資源不同普通網頁鏈接,錨點鏈接，腳本代碼連接，空連接，郵件連接，媒體文件鏈接，下載連接4.2超鏈接構成及類別(某窗口,框架)跳轉菜單（表單+下拉列表框+javascript代碼）4.2超鏈接構成及類別網頁路徑（與圖片路徑表示方法相同）1）絕對路徑：在鏈接中使用完整的URL地址。<ahref=“/index.htm”>中南大學</a>

2）相對路徑：相對于網頁文件（位于當前目錄）的位置當前目錄的文件引用方式：href=“*.*”…………的下級目錄：href=“下級目錄名/*.*”…………的上一級目錄：href=“../當前文件夾名/*.*”3）基于站點根目錄的路徑：以站點的根目錄為參考點，用一個斜線“/”表示根目錄。(要在web服務器上運行)根目錄的文件引用方式：href=“/*.*”…………的下級目錄：href=“/下級目錄名/*.*”

4.2超鏈接構成及類別1自動更新鏈接設置在首選參數對話框中設置自動更新。選擇“編輯”|“首選參數”命令，打開“首選參數”對話框，在“移動文件時更新鏈接”選項的下拉列表中進行選擇。總是——每當移動或重命名選定文檔時，Dreamweaver將自動更新其他文檔中指向該文檔的所有鏈接。提示——將顯示一個提示對話框，列出更改影響到的所有文件，以進行進一步選擇，系統(tǒng)默認的選項是“提示”。

4.3管理超鏈接

4.3管理超鏈接

2更改鏈接1）移動、更名文檔時更新鏈接如果對站點中的文檔要進行移動、更名操作，DreamweaverCS5會彈出“更新文件”對話框，點擊“更新”按鈕，則會修改文本框中文件的鏈接；點擊“不更新”按鈕，則不會修改文本框中文件的鏈接。b.htm……<ahref=“c.htm">……</a>……a.htm……<ahref=“c.htm">……</a>……c.htm………………ddd4.3管理超鏈接2)改變鏈接直接修改超鏈接（在編輯源文件的窗口）使用菜單命令更改超鏈接在“文件”面板中選擇一個文件，如果更改電子郵件鏈接、FTP鏈接、空鏈接則不需要選擇文件。選擇“站點”|“改變站點范圍內鏈接”命令，出現“更改整個站點鏈接”對話框，單擊“確定”按鈕，會出現“更新文件”對話框，其中列出了需要更新的鏈接文件，單擊“更新”按鈕。3刪除鏈接1)使用菜單命令刪除超鏈接點擊“修改”菜單，選擇“移除鏈接”命令，或者按Ctrl+Shift+L組合鍵即可刪除或者取消一個超鏈接。2)使用快捷菜單刪除超鏈接點擊鼠標右鍵，在彈出的子菜單上選擇“刪除標簽<a>”命令即可刪除超鏈接。3)使用屬性面板刪除超鏈接單擊屬性面板中的“鏈接”下拉列表框，使之呈現為選擇狀態(tài)，按Delete鍵刪除原來的鏈接地址即可。4.3管理超鏈接

4檢查鏈接1)

檢查當前文檔中的鏈接①在“文件”面板中，從“當前站點”彈出菜單中選擇一個站點。②在“本地”視圖中，選擇要檢查的文件或文件夾。③選擇“文件”｜“檢查頁”｜“鏈接”命令，或右鍵單擊一個選定的文件，然后從上下文菜單中選擇“檢查鏈接”｜“選定的文件/文件夾”。④“斷開的鏈接”報告出現在“鏈接檢查器”面板中.⑤在“鏈接檢查器”面板中，從“顯示”彈出菜單中選擇“檢查站點中所選文件的鏈接”以查看其結果報告.4.3管理超鏈接

2)檢查整個站點中的鏈接①在“文件”面板中，從“當前站點”彈出菜單中選擇一個站點。②選擇“站點”|“檢查站點范圍的鏈接”。③“斷開的鏈接”報告出現在“鏈接檢查器”面板中。④在“鏈接檢查器”面板中，從“顯示”彈出菜單中選擇“檢查整個站點中的鏈接”，可查看其它報告。

5修復斷開的鏈接

1)在鏈接檢查器面板中修復鏈接①運行鏈接檢查報告。②在“鏈接檢查器”面板（在“結果”面板組中）中的“斷開的鏈接”列（而不是“文件”列），選擇該斷開的鏈接。③

單擊斷開的鏈接旁邊的文件夾圖標，以瀏覽到正確文件，或者鍵入正確的路徑和文件名。④如果還有對同一文件的其它斷開引用，會提示修復其它文件中的這些引用。單擊“是”，Dreamweaver將更新列表中引用此文件的所有文檔。如果單擊“否”，Dreamweaver將只更新當前引用。4.3管理超鏈接

2)在屬性檢查器中修復鏈接①運行鏈接檢查報告。②在“鏈接檢查器”面板中（在“結果”面板組中），雙擊“文件”列中的某個條目。③

Dreamweaver打開該文檔，選擇斷開的圖像或鏈接，并在屬性檢查器中高亮顯示路徑和文件名。④可在屬性檢查器中設置新路徑和文件名，