動態(tài)網(wǎng)頁技術(shù)_第1頁
動態(tài)網(wǎng)頁技術(shù)_第2頁
動態(tài)網(wǎng)頁技術(shù)_第3頁
動態(tài)網(wǎng)頁技術(shù)_第4頁
動態(tài)網(wǎng)頁技術(shù)_第5頁
已閱讀5頁,還剩56頁未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

動態(tài)網(wǎng)頁技術(shù)第一頁,共六十一頁,編輯于2023年,星期五設(shè)置Flash對象的屬性

9.2彈出消息

9.4“行為”簡介9.3添加內(nèi)置的Flash對象

9.1第二頁,共六十一頁,編輯于2023年,星期五轉(zhuǎn)到URL

9.5實踐與練習(xí):打開瀏覽器窗口

9.6實踐與練習(xí):在狀態(tài)欄顯示消息

9.7實踐與練習(xí):交換圖像與恢復(fù)交換圖像

9.8第三頁,共六十一頁,編輯于2023年,星期五實踐與練習(xí):調(diào)用JavaScript9.9小結(jié)

實踐與練習(xí):圖層拖動

9.10第四頁,共六十一頁,編輯于2023年,星期五本章將通過對制作翻滾圖的介紹引入了動態(tài)網(wǎng)頁技術(shù),主要對添加內(nèi)置的Flash交互對象和使用行為進(jìn)行介紹,綜合運(yùn)用了各種動態(tài)網(wǎng)頁制作技術(shù),使讀者能夠?qū)⑺鶎W(xué)知識融會貫通。第五頁,共六十一頁,編輯于2023年,星期五在這一章中,讀者應(yīng)重點理解和掌握Dreamweaver特有的“行為”概念,它是Dreamweaver中最有特色的功能,能大大提高網(wǎng)頁制作的效率。通過本章的學(xué)習(xí),讀者可以掌握幾種動態(tài)網(wǎng)頁技術(shù),制作出有動態(tài)效果的網(wǎng)頁,將單一、死板的樣式變得更加豐富多彩、引人入勝。第六頁,共六十一頁,編輯于2023年,星期五9.1添加內(nèi)置的Flash對象

Macromedia公司開發(fā)(現(xiàn)已被Adobe公司收購)的Flash技術(shù)是當(dāng)前網(wǎng)絡(luò)上傳輸矢量動畫的主要解決方案。在Dreamweaver中使用Flash命令之前,應(yīng)先熟悉下面兩個Flash的不同文件格式。第七頁,共六十一頁,編輯于2023年,星期五

Flash文件(.fla)是Flash程序的源文件。

Flash動畫文件(.swf)是一種壓縮過的Flash文件格式。第八頁,共六十一頁,編輯于2023年,星期五9.1.1使用Flash按鈕對象圖9-1打開“插入Flash按鈕”對話框

第九頁,共六十一頁,編輯于2023年,星期五9.1.2使用Flash文本對象使用Flash文本對象可以創(chuàng)建和插入一個Flash電影,在這個電影中包含了文本動畫效果。第十頁,共六十一頁,編輯于2023年,星期五圖9-3“插入Flash文本”對話框第十一頁,共六十一頁,編輯于2023年,星期五9.2設(shè)置Flash對象的屬性在按照上面介紹的步驟給網(wǎng)頁加入Flash對象以后,還可以通過“屬性”面板設(shè)置FlashSWF文件的所有屬性。選擇菜單欄“窗口→屬性”命令,打開“屬性”面板,如圖9-4所示。第十二頁,共六十一頁,編輯于2023年,星期五圖9-4“屬性”面板第十三頁,共六十一頁,編輯于2023年,星期五9.3“行為”簡介

Dreamweaver中的“行為”實際上是一些JavaScript的程序,它由事件和動作兩部分組成。動作是特定的JavaScript程序,在某個特定的事件發(fā)生(如頁面加載或者鼠標(biāo)單擊)后,相應(yīng)的程序就會自動運(yùn)行。在這一節(jié)中,將講解行為的基本概念,并以幾種常用的行為為例,進(jìn)行詳細(xì)的說明。第十四頁,共六十一頁,編輯于2023年,星期五行為是Dreamweaver中最有特色的功能,通過使用它,用戶可以不用編寫JavaScript代碼,就能制作出需要由數(shù)百行代碼才能完成的功能。行為的關(guān)鍵在于Dreamweaver提供了許多標(biāo)準(zhǔn)的JavaScript程序,這些程序被稱為動作。第十五頁,共六十一頁,編輯于2023年,星期五每個動作都可以完成特定的任務(wù),這樣如果所需要的功能在這些動作中,就不必編寫JavaScript程序了。另外Dreamweaver使用了開放結(jié)構(gòu),即任何人都可以開發(fā)出外掛插件。第十六頁,共六十一頁,編輯于2023年,星期五9.3.1“行為”的本質(zhì)行為是一系列使用JavaScript程序預(yù)定義的頁面特效工具,是JavaScript在Dreamweaver中內(nèi)置的程序庫。使用程序庫中的腳本或程序,通常鑒于以下兩種目的:第十七頁,共六十一頁,編輯于2023年,星期五(1)通過與服務(wù)器的交互執(zhí)行復(fù)雜的數(shù)據(jù)處理,這通常需要執(zhí)行服務(wù)器端的腳本或程序。(2)實現(xiàn)簡單頁面中的交互控制,這就要使用客戶端的腳本或程序。第十八頁,共六十一頁,編輯于2023年,星期五

Dreamweaver既有客戶端的“行為”,也有服務(wù)器端的“行為”,但是由于本書面向的是網(wǎng)頁設(shè)計人員,而非后臺的程序開發(fā)人員,因此本書重點介紹客戶端的“行為”功能,在后面再簡要介紹服務(wù)器端行為。通過行為,可以為頁面制作出各種各樣的動態(tài)交互效果,如交換圖像、彈出信息和拖動層等效果。第十九頁,共六十一頁,編輯于2023年,星期五9.3.2“行為”的構(gòu)成一般來說,一個“行為”由一個“事件”和一個“動作”所組成。1.動作“動作”通常是一段JavaScript程序,利用這段程序可以完成相應(yīng)的任務(wù),比如彈出信息、播放聲音和檢查瀏覽器等。第二十頁,共六十一頁,編輯于2023年,星期五2.事件“事件”通常由瀏覽器所定義,它可以被附加到各種頁面元素對象上,也可以被附加到HTML標(biāo)簽中,比如附加到“<body>”標(biāo)簽。第二十一頁,共六十一頁,編輯于2023年,星期五3.事件和動作的組合將事件和動作結(jié)合起來,就構(gòu)成了“行為”。第二十二頁,共六十一頁,編輯于2023年,星期五9.4彈出消息有時希望訪問者一進(jìn)入首頁就看到一些最新消息,可以彈出一個消息框,或顯示一些文本,如圖9-5所示。第二十三頁,共六十一頁,編輯于2023年,星期五圖9-5IE中彈出的消息框

第二十四頁,共六十一頁,編輯于2023年,星期五圖9-6設(shè)定彈出的消息框中的文本

第二十五頁,共六十一頁,編輯于2023年,星期五圖9-7加入動作后的“行為”面板

第二十六頁,共六十一頁,編輯于2023年,星期五圖9-8IE中彈出的消息框

第二十七頁,共六十一頁,編輯于2023年,星期五9.5轉(zhuǎn)到URL這個行為可以使瀏覽器裝載新頁面,而不必等訪問者單擊了鏈接時才跳轉(zhuǎn)。例如當(dāng)網(wǎng)站更換了地址,就可以把原地址的首頁制作成如圖9-9所示的樣子,當(dāng)訪問者瀏覽此頁面時就會從這個頁面跳轉(zhuǎn)到新地址。如果訪問者用的瀏覽器不支持這項功能,就可以根據(jù)提示單擊鏈接,手動進(jìn)入新地址。目前絕大多數(shù)實際用戶都使用支持該功能的瀏覽器,都可以實現(xiàn)自動跳轉(zhuǎn)。第二十八頁,共六十一頁,編輯于2023年,星期五圖9-9自動跳轉(zhuǎn)到其他地址第二十九頁,共六十一頁,編輯于2023年,星期五圖9-10設(shè)定跳轉(zhuǎn)到的目標(biāo)URL

第三十頁,共六十一頁,編輯于2023年,星期五圖9-11“行為”面板

第三十一頁,共六十一頁,編輯于2023年,星期五9.6實踐與練習(xí):打開瀏覽器窗口很多網(wǎng)站為了吸引用戶的注意,常常在打開首頁的同時彈出一個瀏覽器窗口,用于顯示通知信息和廣告信息等。根據(jù)設(shè)計的不同需要,這些窗口的大小和形態(tài)各異。第三十二頁,共六十一頁,編輯于2023年,星期五這種效果通過Dreamweaver的“行為”功能十分容易實現(xiàn),它用到的是“打開瀏覽器窗口”行為。使用該行為,可以自定義打開文檔的窗口形式,比如自定義窗口的尺寸大小,自定義窗口是否具有菜單欄、標(biāo)準(zhǔn)工具欄和地址欄,自定義是否允許用戶調(diào)整窗口大小等。第三十三頁,共六十一頁,編輯于2023年,星期五圖9-12“打開瀏覽器窗口”對話框第三十四頁,共六十一頁,編輯于2023年,星期五9.7實踐與練習(xí):在狀態(tài)欄顯示消息這個動作與后面的“彈出消息”類似,不同的是如果用消息框顯示文本,訪問者必須單擊消息框中的按鈕,才能繼續(xù)瀏覽;而在狀態(tài)欄顯示文本不會影響訪問者的瀏覽,因此通常用onMouseOver事件與此動作配合。在狀態(tài)欄顯示消息的實例的制作方法如下。第三十五頁,共六十一頁,編輯于2023年,星期五圖9-13設(shè)定狀態(tài)欄消息的文本

第三十六頁,共六十一頁,編輯于2023年,星期五圖9-14加入動作后的“行為”面板

第三十七頁,共六十一頁,編輯于2023年,星期五9.8實踐與練習(xí):交換圖像與恢復(fù)交換圖像圖9-16所示是網(wǎng)頁通常的顯示效果,中間的小鳥圖片色調(diào)很淡,當(dāng)鼠標(biāo)指針移動到小鳥圖片的范圍內(nèi)時,圖片變清晰,如圖9-17所示,這個效果可以經(jīng)常在網(wǎng)頁中見到。第三十八頁,共六十一頁,編輯于2023年,星期五圖9-16交互前的頁面顯示

第三十九頁,共六十一頁,編輯于2023年,星期五圖9-17交互后的頁面顯示第四十頁,共六十一頁,編輯于2023年,星期五圖9-18插入圖像

第四十一頁,共六十一頁,編輯于2023年,星期五圖9-19圖像“屬性”面板第四十二頁,共六十一頁,編輯于2023年,星期五圖9-20“行為”菜單

第四十三頁,共六十一頁,編輯于2023年,星期五圖9-21“交換圖像”對話框

第四十四頁,共六十一頁,編輯于2023年,星期五圖9-22添加“交換圖像”和

“恢復(fù)交換圖像”行為第四十五頁,共六十一頁,編輯于2023年,星期五9.9實踐與練習(xí):調(diào)用JavaScript使用“調(diào)用JavaScript”行為,可以為文檔或者文檔中的元素對象添加一個JavaScript程序段,當(dāng)特定事件發(fā)生時,該JavaScript程序段將會得到執(zhí)行。調(diào)用JavaScript實例的制作方法如下。第四十六頁,共六十一頁,編輯于2023年,星期五圖9-24“調(diào)用JavaScript”對話框

第四十七頁,共六十一頁,編輯于2023年,星期五圖9-25“行為”面板第四十八頁,共六十一頁,編輯于2023年,星期五圖9-26雙擊頁面文本第四十九頁,共六十一頁,編輯于2023年,星期五9.10實踐與練習(xí):圖層拖動層作為一種頁面元素對象的定位工具,與表格相比具有更大的靈活性,它不僅能夠在編輯狀態(tài)下隨意移動和調(diào)整位置,使層內(nèi)被控制的對象能夠在頁面的任一坐標(biāo)位置放置,而且還能夠在頁面被瀏覽器加載執(zhí)行后,被鼠標(biāo)隨意地拖動。當(dāng)然,這不是僅用層就能夠完成的,還需借助于行為。使用層的這種特性,可以制作出很多五彩繽紛的效果,比如拼圖游戲、猜謎游戲和挑選物件游戲等。第五十頁,共六十一頁,編輯于2023年,星期五圖9-27拼圖游戲第五十一頁,共六十一頁,編輯于2023年,星期五圖9-28插入并設(shè)置圖層

第五十二頁,共六十一頁,編輯于2023年,星期五圖9-29在層中插入表格

第五十三頁,共六十一頁,編輯于2023年,星期五圖9-30設(shè)置表格第五十四頁,共六十一頁,編輯于2023年,星期五圖9-31在圖層中插入圖片第五十五頁,共六十一頁,編輯于2023年,星期五圖9-32“拖動層”對話框第五十六頁,共六十一頁,編輯于2023年,星期五圖9-33確定放下目標(biāo)的左坐標(biāo)、上坐標(biāo)及靠齊距離第五十七頁,共六十一頁,編輯于2023年,星期五圖9-34“高級”選項卡第五十八頁,共六十一頁,編輯于2023年,星期五圖9-35

溫馨提示

  • 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)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論