網頁設計與制作 雷偉軍 第10章 網頁交互和特效楊曉

《網頁設計與制作 雷偉軍 第10章 網頁交互和特效楊曉》由會員上傳分享，免費在線閱讀，更多相關內容在教育資源-天天文庫。

1、第10章網頁交互和特效110.1網頁交互行為10.2Spry框架10.3上機練習：制作導航條10.4上機練習：制作可隱藏的產品信息210.1網頁交互行為10.1.1交換圖像10.1.2彈出信息10.1.3打開瀏覽器窗口10.1.4拖動AP元素310.1.1交換圖像交換圖像行為時通過改變標簽的src屬性將一個圖像和另一個圖像進行交換，或者交換多個圖像。如果要添加“交換圖像”行為，首先要在文檔中插入一個圖像，然后選擇該圖像，單擊“標簽檢查器”面板中的“行為”面板，如圖10-1所示，然后單擊“添加行為”按鈕，在彈出

2、的快捷菜單中選擇“交換圖像”命令，如圖10-2所示，在彈出的“交換圖像”對話框中，如圖10-3所示，單擊“瀏覽”按鈕選擇另外一張要交換的圖像。4圖10-1“標簽檢查器”面板中的“行為”圖10-2單擊“”行為“按鈕彈出的快捷菜單5圖10-3“交換圖像“對話框設置完成后在瀏覽器中打開頁面，可以發(fā)現當鼠標指針經過瀏覽器中的源圖像時，該圖像即會轉換為另外一張圖像；當鼠標指針離開圖像時，則又恢復到源圖像。提示：源圖像與交換的圖像應該具有相同的尺寸（高度和寬度），否則，交換的圖像顯示時會被壓縮或擴張，以適應源圖像的尺寸。6在“行為

3、”面板中會顯示已設置的兩個行為，如圖10-4所示。7左邊一列是事件，單擊可以進行選擇其他事件。右邊一列是Dreamweaver內置的行為，如果想編輯某個行為可雙擊右邊一列中的某個行為。圖10-4表示為img標簽的onMouseOut（鼠標移出）事件添加了“恢復交換圖像”行為，為onMouseOver（鼠標滑過）事件添加了“交換圖像”行為，當img標簽這兩個事件被觸發(fā)時，執(zhí)行相應的行為。如果想刪除某個行為，先選中一行，然后單擊“刪除行為”按鈕。在網頁“代碼”視圖中標簽括起來的內容就是Jav

4、aScript腳本語言810.1.2彈出信息彈出信息行為是用于彈出一個顯示預設信息的Javascript警告框，該警告框只有一個“確定”按鈕，所以使用此行為可以為用戶提供信息，但不能提供選擇操作。9選擇文檔中的一個標簽，單擊“行為”面板中的按鈕，在彈出的快捷菜單中選擇“彈出信息”命令，如圖10-2所示，然后在彈出的對話框中輸入文字信息，如圖10-5所示。單擊“確定”按鈕。圖10-5“彈出信息”對話框10設置完成后在瀏覽器中打開頁面，可以發(fā)現當鼠標單擊該標簽，會彈出一個包含輸入內容的對話框。1110.1.3打開瀏覽器窗口

5、打開瀏覽器窗口可以在一個新的窗口中打開頁面。同時，還可以指定該新窗口的屬性、特性和名稱。選擇文檔中的某一標簽，單擊“行為”面板中的按鈕，在彈出的快捷菜單中選擇“打開瀏覽器窗口”命令，如圖10-2所示，然后，在彈出的“打開瀏覽器窗口”對話框，如圖10-6所示。12圖10-6打開瀏覽器窗口在“打開瀏覽器”對話框，包括5個選項，其功能和名稱如表10-1所示。13選項名稱功能要顯示的URL設置彈出瀏覽器窗口的URL地址，可以是相對地址或絕對地址窗口寬度以像素為單位設置彈出瀏覽器窗口的寬度窗口高度以像素為單位設置彈出瀏覽器窗口的

6、高度屬性導航工具欄指定彈出瀏覽器窗口是否顯示前進、后退等導航按鈕菜單條指定彈出瀏覽器窗口是否顯示文件、編輯、查看等菜單條地址工具欄指定彈出瀏覽器窗口是否顯示地址工具欄需要時使用滾動條指定彈出瀏覽器窗口是否使用滾動條狀態(tài)欄指定彈出瀏覽器窗口是否顯示狀態(tài)欄調整大小手柄指定彈出瀏覽器窗口是否允許調整大小窗口名稱設置彈出瀏覽器窗口的標題名稱1410.1.4拖動AP元素AP（AbsolutePosition）元素是指絕對定位的元素（參看第9章的9.5.3節(jié)），拖動AP元素行為可以讓訪問者拖動絕對定位的AP元素。在添加“拖動AP元

7、素”行為之前，首先要在文檔中插入AP元素，單擊“插入”面板“布局”類的“繪制APDIV”按鈕，如圖10-7所示。在網頁的“設計”視圖中拖動鼠標繪制AP元素。然后在AP元素內部插入圖像或輸入文本內容等。15提示：AP元素處于選中狀態(tài)時周圍有藍色的粗線邊框，左上角有個圖標可以通過這個圖標隨意拖動AP元素，調整它在“設計”視圖中的位置，也可通過“屬性”面板設置圖10-7“插入”面板的“布局分類”16在網頁的“設計”視圖中任意位置單擊，使焦點離開AP元素，單擊“行為”面板中的按鈕，在彈出的快捷菜單中選擇“拖動AP元素”命令，如

8、圖10-2所示，即可打開“拖動AP元素”對話框，如圖10-8所示，單擊“確定”按鈕圖10-8“拖動元素”對話框17設置完成后在瀏覽器中瀏覽網頁，單擊并拖動AP元素中的圖像，可以發(fā)現該圖像能夠被移動到任意位置，釋放鼠標后，該圖像將停留在新位置上。此功能可用來制作拼圖游戲等。1810.2Spry框架10.2.1Spry效果10.2.2