1、1,第7章 網(wǎng)頁交互應(yīng)用,隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，網(wǎng)頁借助各種先進(jìn)的前臺腳本技術(shù)，可以實(shí)現(xiàn)豐富的用戶交互應(yīng)用。幾乎所有的瀏覽器都支持用戶通過JavaScript等腳本語言編寫各種交互式應(yīng)用程序，以響應(yīng)網(wǎng)頁瀏覽者的各種即時(shí)操作。,本章學(xué)習(xí)要點(diǎn)：,2,創(chuàng)建AP Div元素 自定義AP Div元素 添加網(wǎng)頁行為 設(shè)置網(wǎng)頁行為屬性 應(yīng)用Spry框架,7.1 AP Div元素創(chuàng)建與應(yīng)用,3,AP Div元素又簡稱AP元素，是Dreamweaver獨(dú)有的一種布局元素，是帶有特殊屬性的DIV標(biāo)簽。在Dreamweaver中，用戶可以方便地設(shè)置AP Div元素的位置、尺寸和層疊順序等屬性，從而實(shí)現(xiàn)靈活的布局，或

2、將各種網(wǎng)頁對象放置在頁面的任意位置?；诖颂攸c(diǎn)，網(wǎng)頁行為大多與AP Div元素有關(guān)。,7.1.1 DIV標(biāo)簽,4,在介紹AP Div元素時(shí)，首先應(yīng)了解DIV標(biāo)簽的作用。Div標(biāo)簽是最基本的XHTML布局標(biāo)簽。幾乎所有的Web標(biāo)準(zhǔn)化網(wǎng)頁都使用了Div標(biāo)簽，來實(shí)現(xiàn)各種樣式的網(wǎng)頁布局。在DIV標(biāo)簽中，用戶可以插入各種圖像、文本或多媒體內(nèi)容。AP Div元素正是DIV標(biāo)簽的一種特殊實(shí)例。,插入DIV標(biāo)簽的各種屬性,7.1.2 創(chuàng)建AP Div元素,在了解了DIV標(biāo)簽之后，即可開始學(xué)習(xí)特殊的DIV標(biāo)簽AP Div元素的創(chuàng)建方法。為了幫助用戶更便捷的創(chuàng)建AP Div元素，Dreamweaver允許用戶以繪

3、制的方式創(chuàng)建AP Div元素，同時(shí)允許用戶以拖拽的方式定義AP Div元素的尺寸和位置。,5,6,1插入AP Div元素,在Dreamweaver中，用戶可以直接在【插入】面板中選擇【布局】的列表項(xiàng)目，然后單擊【繪制AP Div】按鈕，拖動(dòng)鼠標(biāo)，為網(wǎng)頁繪制AP Div元素。,7,2嵌套AP Div元素,嵌套AP Div元素，首先需要為網(wǎng)頁文檔繪制第一個(gè)AP Div元素，然后，將鼠標(biāo)光標(biāo)置于該AP Div元素中，執(zhí)行【插入】|【布局對象】|【AP Div】命令，即可將第二個(gè)AP Div元素嵌套進(jìn)之前的AP Div元素中。,7.1.3 AP Div元素基本操作,作為一種重要的布局元素，Dreamw

4、eaver CS4提供了一個(gè)專門的【AP元素】面板以控制和操作各種AP Div元素，包括選擇AP元素、設(shè)置其顯示/隱藏、設(shè)置AP元素的重疊等。,8,9,1選擇AP Div元素,在網(wǎng)頁設(shè)計(jì)中，用戶經(jīng)常需要選擇位于網(wǎng)頁中的各種AP Div元素，包括被其他AP Div元素覆蓋的以及隱藏的AP Div元素等。,10,2顯示/隱藏AP Div元素,在【AP元素】面板中，用戶可以通過簡單的操作，設(shè)置AP Div元素的顯示或隱藏屬性。,11,3防止AP Div元素重疊,由于AP Div元素是一種可以自由分布在網(wǎng)頁任意位置的布局元素，因此在為網(wǎng)頁文檔添加AP Div元素時(shí)，可能需要防止多個(gè)AP Div元素之間

5、的重疊現(xiàn)象。,12,4修改AP Div元素層疊順序,在【AP元素】面板中，用戶還可以修改各AP Div元素之間的層疊順序，從而更改其顯示的次序。,7.1.4 設(shè)置AP Div元素屬性,在使用Dreamweaver繪制各種AP Div元素后，用戶還可以方便地通過Dreamweaver CS4的【屬性】檢查器，編輯單個(gè)或多個(gè)AP Div元素的屬性，為網(wǎng)頁進(jìn)行簡單的布局。,13,1編輯AP Div元素,AP Div元素的各種屬性,14,2編輯多個(gè)AP Div元素,Dreamweaver不僅可以編輯獨(dú)立的AP Div元素，還可以同時(shí)編輯多個(gè)AP Div元素的屬性。當(dāng)選擇兩個(gè)或更多AP元素時(shí)，【屬性】面

6、板會顯示文本屬性以及全部AP元素屬性的一個(gè)子集，更改該子集的屬性，可以將這些屬性全部應(yīng)用到AP Div元素中。,7.2 網(wǎng)頁行為,行為是Dreamweaver CS4中一項(xiàng)重要的功能。通過該功能，用戶無須編寫JavaScript腳本代碼，即可通過界面操作選擇相關(guān)類型的行為，并設(shè)置觸發(fā)該行為的事件以及目標(biāo)，實(shí)現(xiàn)網(wǎng)頁的各種交互應(yīng)用。,15,7.2.1 標(biāo)簽檢查器面板與行為,Dreamweaver CS4允許用戶通過內(nèi)置的【標(biāo)簽檢查器】面板，添加或管理Dreamweaver的各種內(nèi)置行為。,編輯網(wǎng)頁行為的按鈕,7.2.2 文本信息行為,文本信息行為是與文本相關(guān)的各種行為，例如設(shè)置容器文本、設(shè)置狀態(tài)欄

7、文本等，通過Dreamweaver CS4內(nèi)置的各種JavaScript腳本，用戶可以方便地添加和更改各種XHTML容器、網(wǎng)頁瀏覽器狀態(tài)欄等內(nèi)部的文本內(nèi)容。,17,1設(shè)置容器文本,2設(shè)置狀態(tài)欄文本,Dreamweaver CS4提供了可視化的方法幫助用戶在狀態(tài)欄添加文本內(nèi)容，以使網(wǎng)頁更加豐富多彩。,在應(yīng)用容器文本的交互行為后，可根據(jù)指定的事件觸發(fā)交互，將容器中已有的內(nèi)容替換為更新的內(nèi)容。,7.2.3 窗口信息行為,窗口交互行為也是一種重要的網(wǎng)頁交互行為，是與瀏覽器窗口、瀏覽器對話框相關(guān)的各種網(wǎng)頁交互行為。在Dreamweaver CS4預(yù)置的行為中，網(wǎng)頁交互行為主要包括彈出信息和打開瀏覽器窗口

8、等兩種窗口交互行為。,18,19,1彈出信息,2打開瀏覽器窗口,【彈出消息】行為的作用是顯示一個(gè)包含指定文本消息的JavaScript警告對話框。,與彈出信息行為類似，打開瀏覽器窗口也是一種重要的網(wǎng)頁行為，其可以在行為觸發(fā)時(shí)為當(dāng)前網(wǎng)頁打開一個(gè)新的網(wǎng)頁窗口，并在窗口中顯示其他網(wǎng)頁文檔的內(nèi)容。,7.2.4 圖像效果行為,圖像是網(wǎng)頁中最明顯且最容易讓用戶理解的內(nèi)容。在Dreamweaver CS4中，提供了一些使圖像更具有動(dòng)感的行為，即Dreamweaver圖像交互行為。在Dreamweaver的圖像交互行為中，主要包括交換圖像行為、導(dǎo)航欄圖像行為等2種。,20,1交換圖像,交換圖像功能是指將某一個(gè)

9、網(wǎng)頁圖像轉(zhuǎn)換為其他網(wǎng)頁圖像的行為功能。,導(dǎo)航條是網(wǎng)頁中相當(dāng)常見的版塊。使用Dreamweaver CS4的行為功能，可以制作出復(fù)雜的，集成鼠標(biāo)單擊事件的導(dǎo)航條欄目。,2導(dǎo)航欄圖像,7.2.5 效果行為,效果行為的作用是為網(wǎng)頁中的各種圖像、AP Div元素等添加特殊的動(dòng)畫效果，從而使網(wǎng)頁更加具有動(dòng)感。Dreamweaver預(yù)置了7種基本的效果行為，可以對這些網(wǎng)頁元素進(jìn)行各種帶有漸進(jìn)式的屬性修改。,21,22,1增大/收縮行為,增大/收縮效果行為的作用是漸進(jìn)式地動(dòng)態(tài)改變網(wǎng)頁圖像的尺寸，以制作而成特殊的效果動(dòng)畫效果。,2擠壓行為,擠壓特效也是一種針對圖像進(jìn)行縮放的效果。其與【增大/收縮】特效的區(qū)別在

10、于，用戶無法直接設(shè)置收縮圖像的起始尺寸、結(jié)束尺寸以及收縮所花費(fèi)的時(shí)間。在為圖像添加【擠壓】特效后，圖像會在以指定的加速度縮小直至完全消失。,23,3顯示/漸隱行為,4晃動(dòng)行為,【顯示/漸隱】特效與【增大/收縮】特效類似，都可以通過相應(yīng)的對話框進(jìn)行定制，以實(shí)現(xiàn)增加或降低網(wǎng)頁圖像透明度的動(dòng)畫效果。,晃動(dòng)特效的設(shè)置方式與擠壓類似，在這類特效中，用戶都不需要設(shè)置任何相關(guān)的屬性，直接為圖像添加行為即可。,24,5滑動(dòng)行為,6遮簾行為,滑動(dòng)特效也是一種重要的Dreamweaver行為。其可以控制網(wǎng)頁中的圖像從上方墜落到下方，或從下方上升到上方。與之前幾種關(guān)于圖像的效果行為所區(qū)別，滑動(dòng)的特效不能直接應(yīng)用于網(wǎng)

11、頁的圖像，只能應(yīng)用到帶有ID屬性的層中。,遮簾效果的作用是為圖像添加一個(gè)遮罩，從圖像的上方或下方逐漸移動(dòng)，直至將圖像完全遮蓋。與滑動(dòng)的效果類似，遮簾效果也必須應(yīng)用在帶有ID屬性的div標(biāo)簽內(nèi)才能夠起作用。,25,7高亮顏色,高亮顏色效果更改的是元素的背景顏色，一般用于表格與AP元素等可定義背景圖像的網(wǎng)頁容器。在為這些網(wǎng)頁對象使用高亮顏色特效時(shí)，應(yīng)盡量避免在其中插入尺寸較大的圖像或視頻等，以防止其遮罩住高亮顏色特效。,7.3 Spry框架,Spry框架是以JavaScript結(jié)合XHTML和CSS樣式等技術(shù)開發(fā)的一種布局元素，是一種簡單的網(wǎng)頁交互解決方案。使用Spry框架，用戶可以方便地為網(wǎng)頁添

12、加各種菜單、導(dǎo)航以及面板等結(jié)構(gòu)，豐富網(wǎng)頁應(yīng)用。,26,7.3.1 Spry菜單欄構(gòu)件,Spry菜單欄是一組可導(dǎo)航的菜單按鈕，其提供了水平和垂直等兩個(gè)方向的導(dǎo)航菜單樣式，可在有限的網(wǎng)頁頁面中顯示大量可導(dǎo)航的信息。在訪問者將鼠標(biāo)滑過該菜單欄上的按鈕時(shí)，可顯示該按鈕下的子菜單。,27,7.3.2 Spry選項(xiàng)卡式面板構(gòu)件,Spry選項(xiàng)卡式面板構(gòu)件是一組由選項(xiàng)卡組成的面板，用來將大量內(nèi)容存儲到多個(gè)選項(xiàng)卡中，根據(jù)訪問者單擊的選項(xiàng)卡標(biāo)簽，顯示相應(yīng)的選項(xiàng)卡內(nèi)容。使用Spry選項(xiàng)卡式面板構(gòu)件，可以最大限度的節(jié)省顯示這些內(nèi)容所需的頁面空間，提高頁面顯示效率。,28,7.3.3 Spry折疊構(gòu)件,Spry折疊面板構(gòu)件是一種可折疊的面板，其可以將大量內(nèi)容存儲在一個(gè)緊湊的空間中。訪問者可以通過單擊面板上的相應(yīng)選項(xiàng)卡