《網(wǎng)頁設(shè)計與制作（第2版）》第11章 網(wǎng)頁交互和特效

第11章網(wǎng)頁交互和特效網(wǎng)頁設(shè)計與制作（第2版）2023/1/3第11章網(wǎng)頁交互與特效111.1網(wǎng)頁的交互行為11.2Spry框架2023/1/3第11章網(wǎng)頁交互與特效211.1網(wǎng)頁的交互行為行為是被用來動態(tài)響應用戶操作，改變當前頁面效果或是執(zhí)行特定任務的一種方法。行為是由一個事件所觸發(fā)的動作的表現(xiàn)。而事件是訪問者對網(wǎng)頁所做的事情，例如，單擊某個圖像，鼠標經(jīng)過指定的元素等。動作就是完成某個動作的Javascript代碼。

2023/1/3第11章網(wǎng)頁交互與特效311.1.1拖動AP元素AP（AbsolutePosition）元素是指絕對定位的元素，拖動AP元素行為可以讓訪問者拖動絕對定位的AP元素。即在瀏覽頁面中，可以將AP元素，如圖片等拖移到一個新的位置。（1）單擊“插入”面板“布局”類的“繪制APDiv”按鈕，如圖11-1所示。拖動“繪制APDiv”至文檔頁面窗口中，松鼠標后則繪制一個div層，如圖11-2所示。

2023/1/3第11章網(wǎng)頁交互與特效411.1.1拖動AP元素AP（AbsolutePosition）元素是指絕對定位的元素，拖動AP元素行為可以讓訪問者拖動絕對定位的AP元素。即在瀏覽頁面中，可以將AP元素，如圖片等拖移到一個新的位置。（1）單擊“插入”面板“布局”類的“繪制APDiv”按鈕，如圖11-1所示。拖動“繪制APDiv”至文檔頁面窗口中，松鼠標后則繪制一個div層，如圖11-2所示。

2023/1/3第11章網(wǎng)頁交互與特效511.1.1拖動AP元素

2023/1/3第11章網(wǎng)頁交互與特效6（2）在網(wǎng)頁的“設(shè)計”視圖中拖動鼠標繪制AP元素，然后在AP元素內(nèi)部插入圖像或輸入文本內(nèi)容等，如圖11-3所示。但此時AP元素與圖像大小不一致，最好將兩者調(diào)整為一樣的大小，否則在瀏覽窗口拖移圖像時只有當鼠標在AP元素所對應的圖像區(qū)域內(nèi)時才能拖動圖像的移動。

2023/1/3第11章網(wǎng)頁交互與特效711.1.1拖動AP元素

2023/1/3第11章網(wǎng)頁交互與特效8（3）在調(diào)整AP元素與圖像大小相適應之后，在其兩者之外的空白區(qū)域單擊鼠標，即取消對AP元素或圖像的選擇。單擊圖11-3中的是對AP元素的選擇，而單擊圖像是只是對圖像的選擇。如圖11-4所示，即包含兩種選擇。（4）單擊“行為”面板中的按鈕，出現(xiàn)如圖11-4所示的菜單。

2023/1/3第11章網(wǎng)頁交互與特效9

2023/1/3第11章網(wǎng)頁交互與特效10（4）在菜單中選擇“拖動AP元素”命令，即可打開“拖動AP元素”對話框，如圖11-5所示。單擊“確定”按鈕，得到如圖11-6所示。

2023/1/3第11章網(wǎng)頁交互與特效11（4）在瀏覽器中初始效果如圖11-7（a）所示，在瀏覽狀態(tài)下用鼠標拖動圖片，釋放鼠標后，該圖像將停留在新位置上，如圖11-7（b）所示。此功能可用來制作拼圖游戲等。

2023/1/3第11章網(wǎng)頁交互與特效12

2023/1/3第11章網(wǎng)頁交互與特效1311.1.2顯示隱藏元素（1）新建或打開一個已建的網(wǎng)頁。（2）在網(wǎng)頁中插入一張圖片（也可以是別元素），選上該圖片，并在其窗口下方的屬性面板“鏈接”的文本框中輸入“#”，其作用是將圖片設(shè)置為空鏈接。（3）單擊“插入”面板“布局”類的“繪制APDiv”按鈕，如圖11-1所示。拖動“繪制APDiv”至文檔頁面窗口中，松鼠標后則繪制一個div層，然后在第一個div層中再以同樣的方式繪制嵌套的div子層，并在子層中輸入元素，例如，文字信息。如圖11-8所示。

2023/1/3第11章網(wǎng)頁交互與特效1411.1.2顯示隱藏元素

2023/1/3第11章網(wǎng)頁交互與特效15（4）通過面板的“AP元素”將包含圖片說明信息的AP元素子層的可見性設(shè)為“打開時隱藏”即顯示“”圖標設(shè)為隱藏（通過單擊圖標）“”。如圖11-9所示中apDiv5對應的就是子層。

2023/1/3第11章網(wǎng)頁交互與特效16（5）選中文檔頁面中的圖像，在“行為”面板中單擊“添加行為”按鈕，從彈出式菜單中選擇“顯示-隱藏元素”菜單，彈出“顯示-隱藏元素”對話框，選擇“div"apDiv5"”，單擊“顯示”則在div"apDiv5"后增加“（顯示）”。如圖11-10所示。

2023/1/3第11章網(wǎng)頁交互與特效17（6）單擊圖11－7“確定”得到如圖11-11所示。同理在圖11－10選擇“div"apDiv4"”即第一層，并單擊“隱藏”，確定后得到如圖11-12所示。

2023/1/3第11章網(wǎng)頁交互與特效18（7）保存頁面文檔，按F12或瀏覽器，在瀏覽窗口當鼠標移動到圖片上時就會顯示對圖片的文字信息說明。如圖11-13所示的運行效果。

2023/1/3第11章網(wǎng)頁交互與特效1911.2Spry框架11.2.1Spry效果(1)選中某個元素,例如圖片，單擊“行為”面板中的按鈕，在彈出的快捷菜單中選擇“效果”命令，彈出下級子菜單。

2023/1/3第11章網(wǎng)頁交互與特效2011.2Spry框架11.2.1Spry效果（2）單擊某一個效果，例如，“增大/收縮”，彈出相應的對話框，如圖11-15所示。設(shè)置完成后單擊“確定”按鈕。

2023/1/3第11章網(wǎng)頁交互與特效2111.2Spry框架11.2.2Spry菜單欄。

1．插入菜單欄構(gòu)件（1）在網(wǎng)頁中單擊“插入”面板“布局”分類中的“Spry菜單欄”按鈕，如圖11-1所示。（2）在彈出的“Spry菜單欄”對話框中選擇“水平”或“垂直”，如圖11-18所示，單擊“確定”按鈕。

2023/1/3第11章網(wǎng)頁交互與特效2211.2Spry框架11.2.2Spry菜單欄。

1．插入菜單欄構(gòu)件（3）在網(wǎng)頁“設(shè)計”視圖中顯示了插入的菜單欄構(gòu)件，如圖11-19所示。

2023/1/3第11章網(wǎng)頁交互與特效2311.2Spry框架11.2.2Spry菜單欄。

2．添加菜單項

（1）在“屬性”面板中單擊第1列（主菜單項）上方的（添加菜單項）按鈕，即可添加一個新的菜單項，“文本”與所選的菜單層級相對應，選擇某一層級“菜單”后，在最右側(cè)的“文本”文本框中可以重命名該菜單項，在“鏈接”文本框中可輸入或選擇要鏈接到的頁面。選中第1列某個主菜單項名稱（如項目1），單擊第2列上方的按鈕，即可向該主菜單項中添加一個子菜單項。在右側(cè)的“文本”文本框中可以重命名該子菜單項，在“鏈接”文本框中可輸入或選擇要鏈接到的頁面。使用同樣的方法，可以在第3列中添加子菜單的下一級菜單項。如圖11-20所示。

2023/1/3第11章網(wǎng)頁交互與特效2411.2Spry框架11.2.2Spry菜單欄。

2．添加菜單項

2023/1/3第11章網(wǎng)頁交互與特效2511.2Spry框架11.2.2Spry菜單欄。

2．添加菜單項

（2）保存網(wǎng)頁，進行瀏覽，如圖11-21所示。

2023/1/3第11章網(wǎng)頁交互與特效2611.2Spry框架11.2.2Spry菜單欄。

3．刪除菜單項在第1列選擇要刪除的主菜單項或后兩列的子菜單項的名稱，然后單擊（刪除菜單項）按鈕即可。4．排序菜單項在第1列選擇要刪除的主菜單項或后兩列的子菜單項的名稱，然后單擊（上移項）或（下移項）按鈕即可。5．保存構(gòu)件腳本和層疊樣式表按“Ctrl+S”組合鍵保存，將會彈出“復制相關(guān)文件”對話框，里面有擴展名為.css、.js、.gif的文件，單擊“確定”按鈕。這些文件被自動保存在了站點“SpryAssets”文件夾下。

2023/1/3第11章網(wǎng)頁交互與特效2711.2Spry框架11.2.3Spry選項卡式面板。

3．刪除菜單項（1）在網(wǎng)頁中單擊“插入”面板“布局”分類中的“Spry選項卡式面板”按鈕，如圖11-1所示。（2）在網(wǎng)頁“設(shè)計”視圖中顯示了插入的選項卡式構(gòu)件。

2023/1/3第11章網(wǎng)頁交互與特效2811.2Spry框架11.2.3Spry選項卡式面板。

（3）網(wǎng)頁“設(shè)計”視圖中的“標簽1”和“標簽2”代表默認有2個選項卡。在下的“標簽1”和“標簽2”上單擊，即可重命名標簽。每個選項卡中都有“內(nèi)容1”或“內(nèi)容2”等，在“內(nèi)容”區(qū)域中可插入各種HTML標簽。如圖11-23和圖11-24所示。

2023/1/3第11章網(wǎng)頁交互與特效2911.2Spry框架11.2.3Spry選項卡式面板。

2023/1/3第11章網(wǎng)頁交互與特效3011.2.4Spry折疊式（1）在網(wǎng)頁中單擊“插入”面板“布局”分類中的“Spry折疊式”按鈕，如圖11-1所示。（2）在網(wǎng)頁“設(shè)計”視圖中顯示了插入的折疊式面板構(gòu)件。

2023/1/3第11章網(wǎng)頁交互與特效3111.2.4Spry折疊式（3）網(wǎng)頁“設(shè)計”視圖中的“標簽1”和“標簽2”代表默認有2個選項卡。在“標簽1”和“標簽2”上單擊，即可重命名標簽。每個選項卡中都有“內(nèi)容1”或“內(nèi)容2”等，在“內(nèi)容”區(qū)域中可插入各種HTML標簽。（4）單擊圖11-25中“面板”中的“標簽2”，可得如圖的效果。

2023/1/3第11章網(wǎng)頁交互與特效3211.2.5Spry可折疊面板（1）在網(wǎng)頁中單擊“插入”面板“布局”分類中的“Spry可折疊面板”按鈕，如圖11-1所示。（2）在網(wǎng)頁“設(shè)計”視圖中顯示了插入的折疊式面板構(gòu)件。

2023/1/3第11章網(wǎng)頁交互與特效3311.2.5Spry可折疊面板（3）網(wǎng)頁“設(shè)計”視圖中的“標簽”表示面板的名稱，單擊可重命名標簽?！皟?nèi)容”區(qū)域中可插入各種HTML標簽，表示會被隱藏或顯示的內(nèi)容。（4）“屬性”面板中的“顯示”列表框表示在編輯時打開或關(guān)閉面板，“默認狀態(tài)”表示在瀏覽器中瀏覽時默認是打開還是關(guān)閉面板。

2023/1/3第11章網(wǎng)頁交互與特效34小結(jié)使用DreamweaverCS6內(nèi)置的行為和Spry構(gòu)件以及AP元素，不用輸入代碼，就可使網(wǎng)頁具有一些動感效果。這些動感效果是在客戶端實現(xiàn)的，DreamweaverCS6插入客戶端行為實際上是DreamweaverCS6自動給網(wǎng)頁添加了一些JavaScript腳本代碼，這些代碼能實現(xiàn)動感網(wǎng)頁效果。要合理運用DreamweaverCS6中的動態(tài)效果，以增強網(wǎng)頁的功能。

2023/1/3第11章網(wǎng)頁交互與特效356.1超鏈接概述根據(jù)超鏈接目標位置的不同劃分內(nèi)部超鏈接：指在同一站點內(nèi)部、不同頁面之間的超鏈接。錨記超鏈接：是網(wǎng)頁內(nèi)部的鏈接。通常情況下，錨記鏈接用于鏈接到網(wǎng)頁內(nèi)部某個特定的位置。外部超鏈接：是站點外部的鏈接，是網(wǎng)頁與因特網(wǎng)中某個目標網(wǎng)頁的鏈接。電子郵件超鏈接：指鏈接到電子郵箱的鏈接。單擊該鏈接可以發(fā)送電子郵件。可執(zhí)行文件超鏈接：通常又稱下載鏈接，單擊該鏈接可以運行可執(zhí)行文件，可以用于下載文件或在線運行可執(zhí)行文件。

2023/1/3第11章網(wǎng)頁交互與特效366.1超鏈接概述2023/1/3第11章網(wǎng)頁交互與特效37超鏈接源與目標路徑6.1超鏈接概述根據(jù)鏈接載體對象的不同劃分文本超鏈接：以文本作為超鏈接載體。圖像超鏈接：以圖像作為超鏈接載體。

2023/1/3第11章網(wǎng)頁交互與特效386.1超鏈接概述根據(jù)鏈接目標對象的不同劃分網(wǎng)頁超鏈接下載超鏈接電子郵件超鏈接空鏈接腳本超鏈接錨記超鏈接

2023/1/3第11章網(wǎng)頁交互與特效396.2關(guān)于鏈接路徑在網(wǎng)頁中，每一個鏈接對應一個鏈接路徑。在網(wǎng)站中，每一個網(wǎng)頁都有一個唯一的地址與之對應，這個地址成為統(tǒng)一資源定位符，即URL(UniformResourceLocator)。

2023/1/3第11章網(wǎng)頁交互與特效406.2關(guān)于鏈接路徑絕對路徑

絕對路徑提供鏈接文檔完整的URL。例如，圖中顯示的瀏覽器地址欄中的網(wǎng)址“/”，就是一個絕對路徑。

2023/1/3第11章網(wǎng)頁交互與特效416.2關(guān)于鏈接路徑相對路徑

相對路徑文檔相對路徑是省略掉了當前文檔和所鏈接的文檔都相同的絕對URL部分，而只提供不同的路徑部分。如圖中的路徑“images/beijing.jpg”。

2023/1/3第11章網(wǎng)頁交互與特效426.2關(guān)于鏈接路徑根路徑

根路徑即從站點的根文件夾到文檔的路徑。

如圖中的“\style\main.css”。

2023/1/3第11章網(wǎng)頁交互與特效436.3創(chuàng)建超鏈接的方法使用“屬性”面板創(chuàng)建超鏈接

在網(wǎng)頁中選擇準備創(chuàng)建鏈接的對象，在菜單欄中選擇“窗口”→“屬性”菜單項，在“屬性”面板“鏈接”后面的文本框中輸入準備鏈接的路徑，即可完成使用“屬性”面板創(chuàng)建鏈接的操作，如下圖所示。

2023/1/3第11章網(wǎng)頁交互與特效446.3創(chuàng)建超鏈接的方法使用指向文件圖標創(chuàng)建超鏈接在網(wǎng)頁中選擇準備創(chuàng)建超鏈接的對象，在菜單欄中選擇“窗口”→“屬性”菜單項，在“屬性”面板中單擊“指向文件”按鈕，單擊并拖動到站點窗口的目標文件上，釋放鼠標左鍵，即可完成創(chuàng)建超鏈接的操作。如下圖所示。

2023/1/3第11章網(wǎng)頁交互與特效456.3創(chuàng)建超鏈接的方法2023/1/3第11章網(wǎng)頁交互與特效466.3創(chuàng)建超鏈接的方法使用“屬性”面板創(chuàng)建超鏈接在網(wǎng)頁中選擇準備創(chuàng)建超鏈接的對象，如下圖（a）所示，選擇“插入”→“超鏈接”菜單項，彈出“超鏈接”對話框，在“鏈接”文本框中輸入鏈接的目標，或者單擊“鏈接”文本框，選擇相應的鏈接目標，單擊“確定”按鈕，即可完成使用菜單創(chuàng)建超鏈接的操作，如下圖（b）和下圖（c）所示。

2023/1/3第11章網(wǎng)頁交互與特效476.3創(chuàng)建超鏈接的方法2023/1/3第11章網(wǎng)頁交互與特效486.4各種類型超鏈接的創(chuàng)建創(chuàng)建文本超鏈接用文本做鏈接載體，就是通常所說的文本超鏈接，文本超鏈接是網(wǎng)頁文件中最常用的鏈接，單擊文本鏈接將激發(fā)文本鏈接所連接的文件，使用文本鏈接創(chuàng)建連接的文件對象可以是網(wǎng)頁、圖像等。

2023/1/3第11章網(wǎng)頁交互與特效496.4各種類型超鏈接的創(chuàng)建創(chuàng)建文本超鏈接的步驟：①在網(wǎng)頁中選擇“個人簡歷”文本，如下圖所示。②除了可以通過上節(jié)所講的創(chuàng)建超鏈接方法來實現(xiàn)外，也可以通過操作“插入”面板的方式來實現(xiàn)。

2023/1/3第11章網(wǎng)頁交互與特效506.4各種類型超鏈接的創(chuàng)建2023/1/3第11章網(wǎng)頁交互與特效516.4各種類型超鏈接的創(chuàng)建③選擇“插入”→“常用”→“超鏈接”命令，彈出下圖所示的“超鏈接”對話框。在相應的網(wǎng)站中選擇要鏈接的文件（如網(wǎng)頁），并進行相應的設(shè)置。

2023/1/3第11章網(wǎng)頁交互與特效526.4各種類型超鏈接的創(chuàng)建④按F12鍵運行，查看運行效果，單擊網(wǎng)頁中“個人簡歷”超鏈接，頁面跳轉(zhuǎn)到鏈接的目標頁面，查看相應的內(nèi)容，如圖所示。

2023/1/3第11章網(wǎng)頁交互與特效536.4各種類型超鏈接的創(chuàng)建創(chuàng)建下載文件超鏈接

人們在經(jīng)常會遇到下載文件鏈接，單擊它則會彈出一個下載提示框，下載鏈接在軟件下載網(wǎng)站和源代碼下載網(wǎng)站中應用得比較多，下載鏈接的創(chuàng)建方式和一般的鏈接創(chuàng)建方法基本相同，只是所鏈接的內(nèi)容是一個軟件文件或者壓縮文件，而不是圖像或者網(wǎng)頁。

2023/1/3第11章網(wǎng)頁交互與特效546.4各種類型超鏈接的創(chuàng)建在網(wǎng)站中創(chuàng)建下載鏈接的方法如下：①打開或新建一個網(wǎng)頁，在網(wǎng)頁中輸入并選中要創(chuàng)建鏈接的文本，如圖所示。

2023/1/3第11章網(wǎng)頁交互與特效556.4各種類型超鏈接的創(chuàng)建②在“屬性”面板中單擊“指向文件”按鈕，并拖動至“本地文件”中所要下載的文件上，當釋放后，就會創(chuàng)建文本與下載文件之間的鏈接，如圖6-25所示。在“屬性”面板的“鏈接”文本框中會出現(xiàn)鏈接文件名，同時鏈接文本的顏色會發(fā)生變化。

2023/1/3第11章網(wǎng)頁交互與特效566.4各種類型超鏈接的創(chuàng)建2023/1/3第11章網(wǎng)頁交互與特效576.4各種類型超鏈接的創(chuàng)建③保存網(wǎng)頁后，按F12鍵運行網(wǎng)頁，如下圖(a)。④單擊“單擊此處”鏈接，彈出“文件下載”對話框,如下圖(b)。⑤最后將文件“本地下載”到相應的存儲器中。

2023/1/3第11章網(wǎng)頁交互與特效58（a）（b）6.4各種類型超鏈接的創(chuàng)建創(chuàng)建電子郵件超鏈接電子郵件超鏈接是網(wǎng)頁中經(jīng)常用到的一種方法，單擊電子郵件超鏈接對象，會自動啟動計算機上默認的電子郵件收發(fā)客戶端，例如常見的OutlookExpress等。

2023/1/3第11章網(wǎng)頁交互與特效596.4各種類型超鏈接的創(chuàng)建創(chuàng)建電子郵件超鏈接的步驟①打開需要創(chuàng)建電子郵件超鏈接的文檔，如下圖

所示。將光標置于文檔窗口中要顯示電子郵件超鏈接的地方，選定即將顯示為電子郵件超鏈接的文本或圖像。

2023/1/3第11章網(wǎng)頁交互與特效606.4各種類型超鏈接的創(chuàng)建

2023/1/3第11章網(wǎng)頁交互與特效616.4各種類型超鏈接的創(chuàng)建②選中網(wǎng)頁中的文本，選擇“插入”→“電子郵件鏈接”命令，彈出下圖所示的“電子郵件鏈接”對話框。③在“電子郵件”文本框中填寫電子郵件的地址。

2023/1/3第11章網(wǎng)頁交互與特效626.4各種類型超鏈接的創(chuàng)建④保存網(wǎng)頁，并在瀏覽器中運行，效果如下圖所示。⑤單擊瀏覽頁面中的“請單擊此處”，將出現(xiàn)郵件發(fā)送界面，輸入相應信息即可發(fā)送郵件。

2023/1/3第11章網(wǎng)頁交互與特效636.4各種類型超鏈接的創(chuàng)建創(chuàng)建圖像超鏈接在瀏覽網(wǎng)頁時，網(wǎng)頁上經(jīng)常會有以圖像方式來實現(xiàn)的鏈接，尤其是在廣告或產(chǎn)品介紹中應用最為廣泛，比如在購物網(wǎng)站上，其產(chǎn)品往往是以圖片的方式顯示的，當單擊該圖片時，就會彈出相應介紹或購買的網(wǎng)頁。

2023/1/3第11章網(wǎng)頁交互與特效646.4各種類型超鏈接的創(chuàng)建創(chuàng)建圖像超鏈接的步驟①打開頁面，如圖所示。

2023/1/3第11章網(wǎng)頁交互與特效656.4各種類型超鏈接的創(chuàng)建②選中網(wǎng)頁中的圖像，使用“屬性”面板中的“鏈接”選項以如前所講的相似方式設(shè)置鏈接文件，同時可對圖像本身進行相應處理。③保存網(wǎng)頁后，按F12鍵運行，并單擊鏈接圖像，效果如下圖所示。

2023/1/3第11章網(wǎng)頁交互與特效666.4各種類型超鏈接的創(chuàng)建2023/1/3第11章網(wǎng)頁交互與特效676.4各種類型超鏈接的創(chuàng)建鼠標經(jīng)過圖像鏈接的步驟①在所建立的網(wǎng)站中準備好兩幅大小相等的圖像。②在網(wǎng)站中新建一個網(wǎng)頁，并進行相應的菜單操作，如下圖所示。

2023/1/3第11章網(wǎng)頁交互與特效686.4各種類型超鏈接的創(chuàng)建2023/1/3第11章網(wǎng)頁交互與特效696.4各種類型超鏈接的創(chuàng)建③在彈出的對話框中，分別單擊“原始圖像”“鼠標經(jīng)過圖像”文本框后的“瀏覽”按鈕，選擇相對應的圖像文件。

2023/1/3第11章網(wǎng)頁交互與特效706.4各種類型超鏈接的創(chuàng)建④單擊“確定”按鈕后，會在頁面中出現(xiàn)類似于運行瀏覽的效果，如圖所示。

2023/1/3第11章網(wǎng)頁交互與特效716.4各種類型超鏈接的創(chuàng)建⑤在瀏覽狀態(tài)下，當鼠標移動到圖像時，就會變成下圖所示的效果。

2023/1/3第11章網(wǎng)頁交互與特效726.4各種類型超鏈接的創(chuàng)建創(chuàng)建錨記超鏈接

創(chuàng)建命名錨記（簡稱錨點）就是在文檔中設(shè)置位置標簽，并給該位置設(shè)置一個名稱，以便引用。通過創(chuàng)建錨點，可以使鏈接指向當前文檔或者不同文檔中的指定位置。

2023/1/3第11章網(wǎng)頁交互與特效736.4各種類型超鏈接的創(chuàng)建創(chuàng)建錨記超鏈接的步驟①打開或建立一個網(wǎng)頁。如圖所示，將鼠標定位在網(wǎng)頁中正文第一行文本的起始位置，選擇“插入”→“命名錨記”命令。

2023/1/3第11章網(wǎng)頁交互與特效746.4各種類型超鏈接的創(chuàng)建②在下圖所示的“命名錨記”對話框的“錨記名稱”文本框中輸入“錨記”名稱。

2023/1/3第11章網(wǎng)頁交互與特效756.4各種類型超鏈接的創(chuàng)建③在輸入名稱并單擊“確定”按鈕后，在網(wǎng)頁鼠標定位位置將出現(xiàn)下圖所示的錨記標志。

2023/1/3第11章網(wǎng)頁交互與特效766.4各種類型超鏈接的創(chuàng)建④選擇下圖所示網(wǎng)頁中的文本，如“返回頂部”，并在“屬性”面板的“鏈接”文本框中輸入“#（英文半角下輸入）錨記”后，按回車鍵即可設(shè)置鏈接。

2023/1/3第11章網(wǎng)頁交互與特效776.4各種類型超鏈接的創(chuàng)建⑤保存網(wǎng)頁后，按F12鍵，在瀏覽頁面中單擊“返回頂部”，網(wǎng)頁中內(nèi)容會自動移動到錨記標志所定位的行，如本網(wǎng)頁中的第一行，如圖所示。

2023/1/3第11章網(wǎng)頁交互與特效786.4各種類型超鏈接的創(chuàng)建創(chuàng)建空鏈接所謂空鏈接，就是指未指定對象的鏈接，用來向頁面中的對象或文本附加行為，可用來設(shè)置空鏈接的對象包括文本、圖像、熱點鏈接等。

2023/1/3第11章網(wǎng)頁交互與特效796.4各種類型超鏈接的創(chuàng)建創(chuàng)建空鏈接的步驟①打開或創(chuàng)建一個網(wǎng)頁，如圖所示。

2023/1/3第11章網(wǎng)頁交互與特效806.4各種類型超鏈接的創(chuàng)建②在“屬性”面板的“鏈接”文本框中輸入“#”，然后按回車鍵。③保存頁面文件后，按F12鍵運行，在瀏覽的頁面中單擊鏈接文本，不發(fā)生任何跳轉(zhuǎn)行為。

2023/1/3第11章網(wǎng)頁交互與特效816.4各種類型超鏈接的創(chuàng)建創(chuàng)建腳本超鏈接

一般腳本超鏈接可用來執(zhí)行計算、表單驗證和其他處理。

2023/1/3第11章網(wǎng)頁交互與特效826.4各種類型超鏈接的創(chuàng)建創(chuàng)建腳本超鏈接的步驟①打開或創(chuàng)建一個網(wǎng)頁文件，如圖所示，選擇鏈接文本“關(guān)閉”，在“屬性”面板的“鏈接”文本框中輸入“javascript:window.close()”，然后按回車鍵。

2023/1/3第11章網(wǎng)頁交互與特效836.4各種類型超鏈接的創(chuàng)建2023/1/3第11章網(wǎng)頁交互與特效846.4各種類型超鏈接的創(chuàng)建②保存網(wǎng)頁文件后，按F12鍵運行，在瀏覽器中單擊“關(guān)閉”，將會彈出下圖所示的對話框。單擊“是”按鈕，關(guān)閉瀏覽網(wǎng)頁窗口。

2023/1/3第11章網(wǎng)頁交互與特效856.5管理超鏈接自動更新鏈接每當在本地站點內(nèi)移動或重命名文檔時，Dreamweaver都可以更新起自以及指向該文檔的鏈接，在將整個站點或其中完全獨立的一個部分存儲在本地磁盤上時，此項功能最適用，Dreamweaver不更改遠程文件夾中的文件，除非將這些本地文件放在或者存回到遠程服務器上。

2023/1/3第11章網(wǎng)頁交互與特效866.5管理超鏈接在已經(jīng)打開或更新的DreamweaverCS6窗口中選擇“編輯”→“首選參數(shù)”命令，彈出“首選參數(shù)”對話框，如圖所示。

2023/1/3第11章網(wǎng)頁交互與特效876.5管理超鏈接在站點范圍內(nèi)更改鏈接

除了當移動或重命名文件時通過Dreamweaver自動更改鏈接以外，還可以通過手動的方式更改所有鏈接，如電子郵件、FTP、腳本和空鏈接，而使其指向其他位置。

2023/1/3第11章網(wǎng)頁交互與特效886.5管理超鏈接在站點范圍內(nèi)更改鏈接的操作方法①在打開的網(wǎng)頁文件窗口的“文件”面板的“本地文件”區(qū)域選擇一個文件，如圖所示。

2023/1/3第11章網(wǎng)頁交互與特效896.5管理超鏈接②在菜單欄中選擇“站點”→“改變站點范圍的鏈接”命令，如圖所示。

2023/1/3第11章網(wǎng)頁交互與特效906.5管理超鏈接③在彈出的“更改整個站點鏈接”對話框的“變成新鏈接”文本框中輸入或通過瀏覽選擇準備鏈接的文件，如圖所示。

2023/1/3第11章網(wǎng)頁交互與特效916.5管理超鏈接檢查站點中的鏈接錯誤

在DreamweaverCS6中，可以對站點中的鏈接錯誤進行檢查，通過檢查鏈接的錯誤，可以保證網(wǎng)頁設(shè)計的正確性

。

2023/1/3第11章網(wǎng)頁交互與特效926.5管理超鏈接檢查站點中的鏈接錯誤的步驟

①打開或新建一個網(wǎng)頁文件。選擇菜單“站點”→“檢查站點范圍的鏈接”命令，如圖所示。

2023/1/3第11章網(wǎng)頁交互與特效936.5管理超鏈接②在彈出的“鏈接檢查器”面板中，在“顯示”選項中包括斷掉的鏈接、外部鏈接和孤立的文件3個選項，單擊其中任何一項，就可以檢查相應的信息。

2023/1/3第11章網(wǎng)頁交互與特效946.5管理超鏈接③若要關(guān)閉“鏈接檢查器”面板，可單擊按鈕

，在彈出的菜單中選擇“關(guān)閉標簽組”即可，如圖所示。

2023/1/3第11章網(wǎng)頁交互與特效956.6綜合案例：創(chuàng)建“我愛攝影網(wǎng)”

【內(nèi)容】創(chuàng)建一個站點，名稱為“我愛攝影網(wǎng)”，對應的本地