多媒體與網(wǎng)特效_第1頁
多媒體與網(wǎng)特效_第2頁
多媒體與網(wǎng)特效_第3頁
多媒體與網(wǎng)特效_第4頁
多媒體與網(wǎng)特效_第5頁
已閱讀5頁，還剩56頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

第13章多媒體與網(wǎng)頁特效

本章的主要內(nèi)容如下：

13-1在網(wǎng)頁中插入多媒體對象

13-2行為

13-3時間軸

13-4制作彈出菜單13.1在網(wǎng)頁中插入多媒體對象

13.1.1插入flash動畫13.1.2插入聲音13.1.3插入視頻13.1.1插入flash動畫

網(wǎng)頁中除了文本與圖像表述網(wǎng)頁內(nèi)容以外，還離不開網(wǎng)頁多媒體，如：Flash動畫、聲音、視頻等，這些多媒體元素的加入，使得網(wǎng)頁表現(xiàn)更豐富多彩，在文本和圖像的基礎上，多媒體的加入更是錦上添花。在學習本章內(nèi)容之前請先建立站點。1.插入Flash插入在網(wǎng)頁中的Flash格式為swf，F(xiàn)lash源文件格式為Fla，源文件不能直接插入到網(wǎng)頁中，但可以在Flash軟件中修改源文件?！緦嵗?3.1】制作煙花效果的網(wǎng)頁制作過程：（1）打開【插入】面板，單擊【常用】選項卡中的【媒體：Flash】按鈕（2）彈出【選擇文件】對話框，選擇Flash文件13-1.swf.（3）單擊【確定】按鈕后彈出【對象標簽輔助功能屬性】對話框，在輸入標題后單擊【確定】按鈕即可將Flash文件插入到網(wǎng)頁中，插入的Flash動畫并不會在文檔窗口中顯示內(nèi)容，而是以一個帶有字母F的灰色框來表示。（4）在文檔窗口單擊這個Flash文件，就可以在屬性面板中設置它的屬性了，如圖13-1所示。（5）將Flash的背景透明，使得Flash內(nèi)容與Flash下方的圖像達到合二為一的效果。在【屬性】面板中單擊【參數(shù)】按鈕，彈出【參數(shù)】對框，作如圖13-2所示的設置：（6）選擇“循環(huán)”復選框時影片將連續(xù)播放，否則影片在播放一次后自動停止。通過選擇“自動播放”復選框后，可以設定Flash文件是否在頁面加載時就播放。在“品質”下拉列表中可以選擇Flash影片的畫質，以最佳狀態(tài)顯示，就選擇“高品質”。如圖13-3所示即是保存了網(wǎng)頁后按【F12】鍵在瀏覽器中預覽網(wǎng)頁的效果。

2.插入Flash文本打開【插入】面板，單擊【常用】選項卡中的【媒體：Flash】按鈕，彈出【插入Flash文本】對話框，如圖13-4所示：字體隨意，大小22px，顏色設置為#F5E458，轉滾顏色為#54C994，文本為“圖片素材”，背景顏色#6DCFF6，選擇自己需要的路徑鏈接。同樣方法我們可以使用該功能，諸如制作“代碼素材”、“Flash動漫”、“精美壁紙”和“音頻視頻”等Flash文本來制作一個導航欄。3、插入Flash按鈕Flash按鈕的存在使得網(wǎng)頁的樣式更加生動。在Dreamweaver中插入Flash按鈕不需要用戶設計，這些按鈕是由Dreamweaver自動生成，并且有多種按鈕樣式可供用戶選擇。打開【插入】面板，單擊【常用】選項卡中的【媒體：Flash】按鈕，在列表中選擇Flash按鈕，彈出【插入Flash按鈕】對話框，如圖13-5所示：【樣式】用來選擇按鈕的外觀，【按鈕文本】用來輸入按鈕上的文字，【字體】和【大小】用于設置按鈕上文字的字體和大小，字號變大，按鈕并不會跟著改變。【鏈接】用于輸入按鈕的鏈接，可以是外部鏈接，也可以是內(nèi)部鏈接?！灸繕恕坑脕碓O置打開的鏈接窗口。4.插入Flash視頻FlashVideo即Flash視頻，它的后綴名為：.flv，是目前廣泛流行的一種視頻文件格式。一般的視頻文件：asf、wmv、rm等都需要專門的播放器來支持視頻文件的播放，否則根本無法收看，并且這類文件容量過大，下載慢，查看也不很流暢。為了解決播放器和容量的問題，可以將各類視頻文件轉換成Flash視頻文件，即Flv格式。經(jīng)過編碼后的音頻和視頻數(shù)據(jù)，通過FlashPlayer傳送。制作流程：（1）打開【插入】面板，單擊【常用】選項卡中的【媒體：Flash】按鈕，彈出【插入Flash視頻】對話框，如圖13-6所示：（2）在【URL】文本框中中，指定定.flv文件的相相對路徑徑，方法法是單擊擊【瀏覽】按鈕，選選擇該FLV文件。（3）從【外觀】彈出式菜菜單中選選擇一一種外觀觀皮膚。。所選外外觀的預預覽會出出現(xiàn)在“外觀”彈出式菜菜單下方方?！就庥^】選項指定定將包含含F(xiàn)lash視頻內(nèi)容容的Flash視頻組件件的外觀觀。（4）分別在在【寬度】文本框與與【高度】文本框中中設置該該視頻的的寬度與與高度，，然后單單擊【確定】按鈕。插入聲音音雖然向Web頁添加的的聲音文文件可以以有多種種不同類類型格式式，但并并不是所所有的聲聲音格式式都適合合在網(wǎng)頁頁中應用用。在確確定采用用哪一格格式和方方法添加加聲音前前，需要要考慮添添加聲音音的目的的、觀眾眾、文件件大小、、聲音品品質和不不同瀏覽覽器的差差異等因因素。在在網(wǎng)頁中中常用的的格式有有.wav、.midi、.rm和.mp3等。另外外，用戶戶在訪問問插入音音頻的頁頁面時，，只有在在他的客客戶端瀏瀏覽器具具有可播播放所選選聲音文文件的適適當插件件，聲音音才可以以播放出出來。網(wǎng)頁中插插入聲音音的常用用方法有有如下兩兩種：其其一為超超級鏈接接到聲音音文件，，其二為為嵌入聲聲音文件件到網(wǎng)頁頁中。1.超級鏈接接到聲音音文件現(xiàn)在Internet上大量的的在線音音樂就是是采用超超級鏈接接鏈接到到聲音文文件。下下面通過過一個實實例來說說明。（1）準備好好一個音音樂文件件。選擇擇作為超超級鏈接接載體的的文本或或圖像，，如圖13-7所示的實實例中選選擇的是是文本“在線下載載”。（2）在屬性性面板的的【鏈接】文本框中中鍵入聲聲音文件件所在的的路徑和和名稱，，或者單單擊后面面的文件件夾圖標標直接選選擇聲音音文件。。實例中中選擇的的是“莫扎特小小夜曲.mp3”，如圖13-8所示。（3）保存文文件，按按F12鍵預覽該該網(wǎng)頁。。當鼠標標移動到到“在線線下載””上時鼠鼠標呈現(xiàn)現(xiàn)小手的的形狀，，單擊將將播放音音樂，如如圖13-9所示。或或者單擊擊鼠標右右鍵，在在彈出菜菜單中選選擇“目目標另存存為”將將該音樂樂文件下下載到本本地。2.將聲音嵌嵌入網(wǎng)頁頁如果希望望插入聲聲音的同同時，在在網(wǎng)頁上上還可以以顯示播播放器的的外觀，，包括播播放、暫暫停、停停止、音音量調(diào)整整等控制制面板，，需要使使用嵌入入聲音文文件到網(wǎng)網(wǎng)頁中的的方法。。（1）準備好好一個音音樂文件件，在頁頁面添加加文字“2、月滿西西樓”。（2）打開【插入】面板，單單擊【常用】選項卡中中的【媒體】，在下拉拉菜單中中單擊【插件】按鈕，彈彈出【選擇文件件】對話框，，選擇一一個準備備好的音音樂文件件，本實實例為“月滿西樓樓.wma”，如圖13-10所示。調(diào)調(diào)整播放放插件的的大小外外觀。（3）如果用用戶的計計算機中中沒有安安裝相關關音樂文文件的播播放插件件，在屬屬性面板板的“插件URL”中輸入該該插件的的地址，，供用戶戶鏈接并并下載該該插件。。（4）保存文文件，按按F12鍵預覽該該網(wǎng)頁，，效果如如圖13-11所示。3.添加背景景音樂在網(wǎng)頁中中可以嵌嵌入背景景音樂。。這種音音樂多以以MP3，MIDI文件為主主。添加加背景音音樂有兩兩種方法法，一種種是通過過手寫代代碼實現(xiàn)現(xiàn)，還有有一種是是通過添添加行為為來實現(xiàn)現(xiàn)。在代碼視視圖中，，通過<bgsound>標記可以以將網(wǎng)頁頁設置上上背景音音樂，具具體步驟驟是：（1）準備好好一個音音樂文件件，打開開需要添添加背景景音樂的的網(wǎng)頁（（網(wǎng)頁和和聲音最最好使用用相對路路徑）。。（2）選擇“代碼視圖圖”，將光標標定位到到<body>之后，輸輸入下面面的代碼碼：<body><bgsoundsrc="莫扎特小小夜曲.mp3">插入背景景音樂……</body>（3）如果希希望循環(huán)環(huán)播放音音樂，將將在代碼碼中添加加一個loop屬性即可可：<bgsoundsrc＝"莫扎特小小夜曲.mp3"loop="true">（4）保存文文件，按按F12鍵預覽該該網(wǎng)頁，，即可聽聽見背景景音樂。。插入視頻頻和插入入聲音的的方法類類似，也也有兩種種情況，，其一為為超級鏈鏈接到視視頻文件件，其二二為嵌入入視頻文文件到網(wǎng)網(wǎng)頁中。。1.超級鏈接接到視頻頻文件用戶瀏覽覽器端必必須擁有有輔助應應用程序序才能查查看常見見的視頻頻格式，，如RealOnePlayer、QuickTime和WindowsMediaPlayer等。（1）準備好好一個視視頻文件件，在網(wǎng)網(wǎng)頁中選選擇指向向視頻文文件的鏈鏈接載體體（文本本或圖像像）。（2）在屬性性面板的的“鏈接”文本框中中輸入視視頻文件件的路徑徑名稱，，或者單單擊后面面的文件件夾圖標標選擇文文件，如如圖13-12所示。插入視頻頻（3）設置完完畢，保保存文件件。按F12鍵預覽該該網(wǎng)頁，，如果正正確安裝裝了播放放程序，，那么點點擊鏈接接載體，，可彈出出MediaPlayer等輔助程程序，并并播放該該視頻文文件。2.嵌入視頻頻文件到到網(wǎng)頁中中如果希望望添加視視頻文件件并在網(wǎng)網(wǎng)頁上顯顯示播放放器的外外觀，請請選擇嵌嵌入視頻頻文件到到網(wǎng)頁中中的方法法。（1）準備好好一個視視頻文件件，將光光標置于于需要嵌嵌入視頻頻文件的的位置。。（2）打開【插入】面板，單單擊【常用】選項卡中中的【媒體】，在下拉拉菜單中中單擊【插件】按鈕，彈彈出【選擇文件件】對話框，，選擇其其中的視視頻文件件，將其其添加到到網(wǎng)頁中中，如圖圖13-13所示。適適當調(diào)節(jié)節(jié)“插件”占位符的的大小及及位置。。（3）如果用用戶的計計算機中中沒有安安裝相關關視頻文文件的播播放插件件，在屬屬性面板板的“插件URL”中輸入該該插件的的地址，，供用戶戶鏈接并并下載該該插件。。（4）設置完完畢，保保存文件件。按F12鍵預覽網(wǎng)網(wǎng)頁，網(wǎng)網(wǎng)頁將顯顯示相關關播放插插件并播播放。如如圖13-14所示。13.2行為行為基礎礎知識顯示-隱藏層設置狀態(tài)態(tài)條文本本設置層文文本設置彈出出信息行為基礎礎知識一般說來來，動態(tài)態(tài)網(wǎng)頁是是通過編編寫腳本本代碼來來實現(xiàn)用用戶與頁頁面的簡簡單交互互的。但但是編寫寫腳本既既復雜又又專業(yè)需需要專門門學習，，而Dreamweaver提供的““行為””的機制制，雖然然行為也也是基于于JaveScript來實現(xiàn)動動態(tài)網(wǎng)頁頁和交互互的，但但卻不需需書寫任任何代碼碼。在可可視化環(huán)環(huán)境中按按幾個按按鈕，填填幾個選選項就可可以實現(xiàn)現(xiàn)豐富的的動態(tài)頁頁面效果果，實現(xiàn)現(xiàn)人與頁頁面的簡簡單交互互。行為是事事件與動動作的彼彼此結合合。例如如，當鼠鼠標移動動到網(wǎng)頁頁的圖片片上方時時，圖片片高亮顯顯示，此此時的鼠鼠標移動動稱為時時間，圖圖片的變變化稱為為動作，，一般的的行為都都是要有有事件來來激活動動作。動動作時由由預先寫寫好的能能夠執(zhí)行行某種任任務的JavaScript代碼組成成，而事事件是由由瀏覽器器前用戶戶的操作作相關，，如單擊擊鼠標、、鼠標上上滾等。。1.了解行行為“行為”可以創(chuàng)創(chuàng)建網(wǎng)網(wǎng)頁動動態(tài)效效果，，實現(xiàn)現(xiàn)用戶戶與頁頁面的的交互互。行行為是是由事事件和和動作作組成成的，，例如如：將將鼠標標移到到一幅幅圖像像上產(chǎn)產(chǎn)生了了一個個事件件，如如果圖圖像發(fā)發(fā)生變變化(前面介介紹過過的輪輪替圖圖像)，就導導致發(fā)發(fā)生了了一個個動作作。與與行為為相關關的有有三個個重要要的部部分——對象、、事件件和動動作。。（1）對對象(Object)對象是是產(chǎn)生生行為為的主主體，，很多多網(wǎng)頁頁元素素都可可以成成為對對象，，如圖圖片、、文字字、多多媒體體文件件等，，甚至至是整整個頁頁面。。（2）事事件(Event)事件是是觸發(fā)發(fā)動態(tài)態(tài)效果果的原原因，，它可可以被被附加加到各各種頁頁面元元素上上，也也可以以被附附加到到HTML標記中中。一一個事事件總總是針針對頁頁面元元素或或標記記而言言的，，例如如：將將鼠標標移到到圖片片上、、把鼠鼠標放放在圖圖片之之外、、單擊擊鼠標標，是是與鼠鼠標有有關的的三個個最常常見的的事件件(onMouseOver、onMouseOut、onClick)。不同同的瀏瀏覽器器支持持的事事件種種類和和多少少是不不一樣樣的，，通常常高版版本的的瀏覽覽器支支持更更多的的事件件。（3）動動作(Action)行為通通過動動作來來完成成動態(tài)態(tài)效果果，如如：圖圖片翻翻轉、、打開開瀏覽覽器、、播放放聲音音都是是動作作。動動作通通常是是一段段JaveScript代碼，，在Dreamweaver中使用用Dreamweaver內(nèi)置的的行為為往頁頁面中中添加加JaveScript代碼，，就不不必自自己編編寫。。（4）事事件與與動作作將事件件和動動作組組合起起來就就構成成了行行為，，例如如，將將onClick行為事事件與與一段段JaveScript代碼相相關聯(lián)聯(lián)，單單擊鼠鼠標時時就可可以執(zhí)執(zhí)行相相應的的JaveScript代碼(動作)。一個個事件件可以以同多多個動動作相相關聯(lián)聯(lián)(1：n)，即發(fā)發(fā)生事事件時時可以以執(zhí)行行多個個動作作。為為了實實現(xiàn)需需要的的效果果，我我們還還可以以指定定和修修改動動作發(fā)發(fā)生的的順序序。2.應用行行為在Dreamwaever中，對對行為為的添添加和和控制制主要要通過過【行為】面板來來實現(xiàn)現(xiàn)。執(zhí)執(zhí)行“窗口”→“行為”菜單命命令，，打開開行為為面板板，如如圖13-15所示。。在行為為面板板上可可以進進行如如下操操作：：（1）單擊擊【+】】按鈕，，打開開動作作菜單單，添添加行行為；；單擊擊【-】】按鈕，，刪除除行為為。添添加行行為時時，從從動作作菜單單中選選擇一一個行行為項項。（2）單擊擊事件件列右右方的的三角角，打打開事事件菜菜單，，可以以選擇擇事件件。（3）單擊擊向上上箭頭頭或向向下箭箭頭，，可將將動作作項向向前移移或向向后移移，改改變動動作執(zhí)執(zhí)行的的順序序。3.創(chuàng)建行行為一般創(chuàng)創(chuàng)建行行為有有三個個步驟驟：選選擇對對象、、添加加動作作、調(diào)調(diào)整事事件。。我們通通過一一個“打開瀏瀏覽器器窗口口”實例說說明如如何創(chuàng)創(chuàng)建行行為。。我們們需要要的效效果是是，在在網(wǎng)頁頁上單單擊一一幅小小圖像像，打打開一一個新新窗口口顯示示放大大的圖圖像。。（1）打開開13-4.html，選中中圖片片。（2）單擊擊行為為面板板上的的"+"按鈕，，打開開動作作菜單單。從從動作作菜單單中選選擇“打開瀏瀏覽器器”命令，，在彈彈出的的對話話框中中設置置參數(shù)數(shù)。在“要顯示示的URL”文本框框中，，單擊擊“瀏覽按按鈕”選擇在在新窗窗口中中載入入的目目標的的URL地址(可以是是網(wǎng)頁頁也可可以是是圖像像)。窗口口寬度度設為為900px，窗口口高度度設為為900px。窗口口名稱稱為“放大圖圖片”。(3）當我我們添添加行行為時時，系系統(tǒng)自自動為為我們們選擇擇了事事件onClick(單擊鼠鼠標)，現(xiàn)在在，我我們單單擊行行為面面板上上的事事件菜菜單按按鈕，，打開開事件件菜單單，重重新選選擇一一個觸觸發(fā)行行為的的事件件。把把onClick(單擊鼠鼠標)的事件件改為為onMouseOver(鼠標滑滑過)，如圖圖13-16所示：顯示-隱藏層層行為是是實現(xiàn)現(xiàn)網(wǎng)頁頁上交交互的的一種種捷徑徑，行行為將將javascript代碼放放置在在文檔檔中，，以允允許訪訪問者者與Web頁進行行交互互，從從而以以多種種方式式更改改頁面面動作作或執(zhí)執(zhí)行某某些任任務。。行為為是事事件和和由該該事件件觸發(fā)發(fā)的動動作的的組合合?！緦嵗俊抗鈽艘埔频綀D圖片上上面。。在它它的右右側即即顯示示一段段其它它內(nèi)容容（動動畫））。這是兩兩個行行為：：行為為一：：移入入+顯示；；行為為二：：移出出+隱藏。。事件是是：鼠鼠標移移入和和移出出。動動作是是：顯顯示和和隱藏藏。具體操操作如如下：：1.在頁面面中插插入一一張圖圖片，，本例例為蘭蘭花圖圖片。。2.在頁面面中插插入一一個層層，貼貼入幾幾個動動畫。。具體體操作作是：：打開開【插入】面板單單擊【布局】選項卡卡中的的【繪制層層】按鈕，，在蘭蘭花圖圖片右右邊繪繪制層層，并并在層層里面面插入入幾個個動畫畫，如如圖13-17所示：：3.在層面面板中中，將將該層層設置置成為為隱藏藏。打打開頁頁面的的時候候不顯顯示層層面板板狀態(tài)態(tài)，具具體操操作是是：執(zhí)執(zhí)行“窗口”→“層”菜單命命令，，打開開層面面板，，在layer1左邊的的眼鏡鏡關閉閉，如如圖13-18所示：：4.單擊圖圖片，，打開開行為為面板板（執(zhí)執(zhí)行“窗口”→“行為”菜單命命令））。在在行為為面板板按“+”號，在在彈出出菜單單中選選中顯顯示-隱藏層層，系系統(tǒng)彈彈出“顯示－－隱藏藏層”對話框框。單單擊該該層，，然后后單擊擊“隱藏”按鈕。。確定定。如如圖13-19所示：：5、打開開“行行為””面板板，我我們可可以在在面板板中看看到事事件和和行為為。需需進一一步對對事件件進行行設置置。單單擊““onLoad”，在下拉菜菜單中選擇擇“onMouseOut”，如圖13-20所示6、上述方法法是鼠標移移出事件行行為的設置置，重復以以上4-5的方法再對對鼠標移上上事件行為為進行設置置，把顯示示－隱藏層層設為（顯顯示），如如圖13-21所示：7.行為事件設設置，單擊擊“onLoad”，在下拉菜菜單中選擇擇“onMouseOver”，設置后的的“行為””面板最終終結果，如如圖13-22所示：保存頁面，，預覽網(wǎng)頁頁?？梢钥纯吹焦鈽艘埔苿拥教m花花圖片上就就出現(xiàn)右側側的內(nèi)容。。設置狀態(tài)欄欄文本網(wǎng)頁瀏覽器器的狀態(tài)欄欄位于瀏覽覽器的下方方，可以通通過瀏覽器器菜單欄上上“查看”→“狀態(tài)欄”選項將其打打開或關閉閉。網(wǎng)頁的的狀態(tài)欄顧顧名思義就就是顯示網(wǎng)網(wǎng)頁的狀態(tài)態(tài)信息?！緦嵗?3.2.3】在網(wǎng)頁狀態(tài)態(tài)欄里顯示示自定義的的一行文字字信息。操作步驟（1）新建空空白網(wǎng)頁13-6.hmtl，在設計視視圖中輸入入文本“顯示狀態(tài)欄欄文本”。（2）執(zhí)行“窗口”→“行為”菜單命令，，打開行為為面板，選選擇文本“顯示狀態(tài)欄欄文本”單擊行為面面板中【+】按鈕，在彈彈出的菜單單中執(zhí)行“設置文本”→“設置狀態(tài)欄欄文本”菜單命令，，彈出“設置狀態(tài)欄欄文本”對話框，如如圖13-23所示。在消消息中輸入入“我在下面呢呢！”后單擊【確定】按鈕。（3）選擇行行為面板的的事件為“onClick”事件，最終終的行為面面板的界面面如圖13-24所示：（4）按快捷捷鍵F12，就可以預預覽到如圖圖13-25所示的狀態(tài)態(tài)欄文字效效果了。設置層文本本“設置層文本本”動作用您指指定的內(nèi)容容替換頁上上現(xiàn)有層的的內(nèi)容和格格式設置。。該內(nèi)容可可以包括任任何有效的的HTML源代碼。通通過在“設置層文本本”對話框的“新建HTML”文本框中包包括HTML標簽，可對對內(nèi)容進行行格式設置置?！緦嵗?3.2.4】設置層文本本。（1）新建空空白網(wǎng)頁13-7.hmtl，打開【插入】面板單擊【布局】選項卡中的的【繪制層】按鈕，在設設計視圖中中繪制層，，在層中輸輸入文本信信息。（2）執(zhí)行“窗口”→“行為”菜單命令，，打開行為為面板，選選擇設計視視圖中的層層，單擊行行為面板中中【+】按鈕，在彈彈出的菜單單中執(zhí)行“設置文本”→“設置層文本本”菜單命令，，彈出“設置層文本本”對話框，如如圖13-26所示。在消消息中輸入入文本信息息后單擊【確定】按鈕。（3）選擇行行為面板的的事件為““onClick”事件，最終終的行為面面板的界面面如圖13-27所示：（4）按快捷捷鍵F12，就可以預預覽到如圖圖13-28所示的設置置層效果了了。設置彈出信信息如果希望別別人進入你你的網(wǎng)站首首頁的時候候可以看見見一個彈出出的消息框框來顯示一一些內(nèi)容，，則可以通通過設置彈彈出信息的的方法實現(xiàn)現(xiàn)?！緦嵗?3.2.5】設置彈出信信息（1）新建空空白網(wǎng)頁13-8.hmtl。（2）執(zhí)行“窗口”→“行為”菜單命令，，打開行為為面板，選選擇設計視視圖中的層層，單擊行行為面板中中【+】按鈕，在彈彈出的菜單單中執(zhí)行“彈出信息”菜單命令，，彈出“彈出信息”對話框，如如圖13-29所示。在消消息中輸入入文本信息息后單擊【確定】按鈕。（3）添加好好提示文字字之后，控控制面板中中就多出一一個名為“彈出信息”的行為，此此時還要點點擊左部的的下拉菜單單，并且從從中選擇“onLoad”一項項，，這這樣樣當當別別人人進進入入頁頁面面之之后后就就會會自自動動執(zhí)執(zhí)行行設設置置的的行行為為，，自自然然也也就就能能夠夠看看見見彈彈出出的的消消息息框框了了。。（4）按按快快捷捷鍵鍵F12，就就可可以以預預覽覽到到如如圖圖13-30所示示的的設設置置層層效效果果了了。。13.3時間間軸軸時間間軸軸的的概概念念制作作一一個個簡簡單單的的時時間間軸軸動動畫畫制作作動動態(tài)態(tài)文文字字制作作飄飄動動廣廣告告時間間軸軸的的概概念念時間間軸軸通通過過隨隨時時間間的的變變化化改改變變層層的的位位置置、、大大小小、、可可見見性性和和疊疊放放順順序序來來創(chuàng)創(chuàng)建建動動畫畫。。這這就就是是動動態(tài)態(tài)HTML的表表達達方方式式，，也也是是Dreamweaver強于于其其它它網(wǎng)網(wǎng)頁頁編編輯輯器器的的地地方方。。時時間間軸軸只只能能移移動動層層，，因因此此想想讓讓圖圖象象或或文文本本對對象象移移動動，，就就須須先先創(chuàng)創(chuàng)建建層層，，然然后后在在層層中中插插入入對對象象。。1.在Dreamweaver中顯顯示示時時間間軸軸時間間軸軸描描述述了了層層和和圖圖像像的的屬屬性性隨隨時時間間變變化化的的情情況況。。執(zhí)執(zhí)行行“窗口口”→“時間間軸軸”打開開時時間間軸軸控控制制器器，，如如圖圖13-31所示示。。2.圖13-31中時時間間軸軸的的各各項項功功能能（1）時時間間軸軸彈彈出出菜菜單單：：表表示示當當前前的的時時間間軸軸名名稱稱。。（2）時時間間軸軸指指針針：：在在界界面面上上顯顯示示當當前前位位置置的的幀幀。。（3）不不管管時時間間軸軸在在哪哪個個位位置置，，一一直直移移動動到到第第一一幀幀。。（4）表表示示時時間間指指針針的的當當前前位位置置。。（5）表表示示每每秒秒顯顯示示的的幀幀數(shù)數(shù)。。默默認認值值時時15幀。。增增加加幀幀數(shù)數(shù)值值，，則則動動畫畫播播放放的的速速度度將將加加快快。。（6）自自動動不不放放：：選選中中該該項項，，則則網(wǎng)網(wǎng)頁頁文文檔檔中中應應用用動動畫畫后后自自動動運運行行。。（7）LOOP（循循環(huán)環(huán)））：：選選中中該該項項，，則則繼繼續(xù)續(xù)反反復復時時間間軸軸上上的的動動畫畫。。（8）行行為為通通道道：：在在指指定定幀幀中中選選選選擇擇要要運運行行的的行行為為。。（9）關關鍵鍵幀幀：：可可以以變變化化的的幀幀。。（10）圖圖層層條條：：意意味味著著插插入入了了“層”等對對象象。。（11）圖圖層層通通道道：：它它是是用用于于編編輯輯圖圖層層的的空空間間。?？梢砸钥纯闯龀?，，Dreamweaver里面面的的時時間間軸軸的的運運用用是是和和Flash非常常相相似似的的，，功功能能雖雖說說沒沒有有Flash的強強大大，，但但使使用用方方法法簡簡單單，，因因為為沒沒有有了了諸諸如如影影片片剪剪輯輯，，庫庫，，組組件件的的使使用用。。相相信信讀讀者者朋朋友友們們很很容容易易就就能能上上手手。。制作一個簡單單的時間軸動動畫【實例13.3.2】制作一個簡單單的時間軸動動畫操作步驟：（1）新建空白白網(wǎng)頁13-9.hmtl，打開【插入】面板單擊【布局】選項卡中的【繪制層】按鈕，在設計計視圖中繪制制層，在層插插入gif圖片“004d.gif”。如圖13-32所示：（2）鼠標右鍵鍵單擊層對象象，在彈出的的菜單中選擇擇“添加到時間軸軸”菜單命令，這這時會在“屬性”面板的下面出出現(xiàn)時間軸控控制器，如圖圖13-33所示：（3）在時間軸軸上，鼠標單單擊第15幀，選中層對對象，將層對對象拖動到右右上方。如圖圖13-34所示，將在視視圖中出現(xiàn)一一條軌跡線。。（4）單擊時間間軸上的【自動播放】按鈕，并保存存該頁面，按按F12健預覽即看到到，馬從頁面面的左方跑向向頁面的右方方。制作動態(tài)文字字【實例13.3.3】制作動態(tài)文字字制作步驟：（1）新建一個個頁面13-10.html，把光標放到到頁面左上方方的位置，打打開【插入】面板單擊【布局】選項卡中的【繪制層】按鈕，創(chuàng)建5個層。分別輸輸入文字“三”、“思”、“而”、“后”、“行”，將圖圖層排排列在在適當當?shù)奈晃恢?。。?）執(zhí)執(zhí)行“窗口”→“時間軸軸”菜單命命令，，打開開時間間軸控控制器器。選選擇層層對象象Layer1，拖動動該對對象到到時間間軸的的第一一行上上。（3）用用同樣樣的方方法，，把包包含有有其它它文字字的層層對象象也根根據(jù)文文字的的順序序拖動動到時時間軸軸的第第2-6行上。。如圖圖13-35所示：：（4）為了了減慢慢文字字移動動的速速度，，把時時間軸軸中的的15幀全部部擴展展為25幀。如如圖13-36所示：：（5）在在時間間軸中中選擇擇層對對象Layer1的第一一幀，，在屬屬性面面板的的頂端端坐標標值（（T）中輸輸入（（－50），這這樣，，可以以把文文字放放置到到上側側。（6）用用同樣樣的方方法選選擇其其余層層的第第一幀幀后，，把坐坐對齊齊坐標標值（（L）統(tǒng)一一設定定為-50，如圖圖13-37所示。。（7）為為了每每隔一一段時時間從從左方方向右右飄移移一個個文字字，從從第二二個動動畫條條開始始向后后移動動5幀。勾勾選“自動播播放選選項”。如圖圖13-38所示。。（8）保保存該該頁面面，按按F12瀏覽效效果。。可以以看到到五個個字分分別從從左向向右動動態(tài)移移動。。制作飄飄動廣廣告【實例】】利用時時間軸軸制作作飄動動廣告告制作步步驟：：（1）新新建一一個頁頁面命命名為為13-11.html。，打打開【插入】面板單單擊【布局】選項卡卡中的的【繪制層層】按鈕，，繪制制一個個層對對象Layer1，將光光標點點到空空白層層內(nèi)，，執(zhí)行行“插入”→“圖像對對象”→“鼠標經(jīng)經(jīng)過圖圖像”菜單命命令，，插入入一個個鼠標標經(jīng)過過圖像像，調(diào)調(diào)整層層大小小，使使層盡盡可能能與圖圖片大大小相相近。。（2）執(zhí)執(zhí)行“窗口”→“時間軸軸”菜單命命令，，打開開時間間軸控控制器器，鼠鼠標單單擊選選擇層層對象象Layer1，拖動動該對對象到到時間間軸的的第一一行上上。如如圖13-39所示。。（3）拖拖動時時間軸軸面板板中最最右側側的關關鍵幀幀至75幀。鼠鼠標單單擊第第75幀，選選擇層層對象象，將將層對對象向向右拖拖動一一段距距離。。（4）鼠鼠標單單擊時時間軸軸上第第10真所在在位置置，單單擊鼠鼠標右右鍵，，在彈彈出的的菜單單中選選擇“增加關關鍵幀幀”菜單命命令。。單擊擊時間間軸上上的第第10幀，拖拖動頁頁面中中的層層對象象到一一個位位置。。（5）同同樣的的方法法在第第20幀、第第30幀、第第40幀、第第50幀和第第60幀所在在位置置出增增加關關鍵幀幀，分分別在在各個個幀位位置出出，拖拖動層層對象象到不不同的的地方方。最最后生生成的的移動動路徑徑與時時間軸軸如圖圖所示示13.4制作彈彈出菜菜單【實例13.4】】使用行行為面面板制制作彈彈出菜菜單。。（1）新新建一一個頁頁面命命名為為13-12.html，在頁頁面中中輸入入一行行文字字“這里是是彈出出菜單單”。（2）選選擇文文本“這里是是彈出出菜單單”，在屬屬性面面板中中的“鏈接”輸入框框中輸輸入“#”，代表表的是是空鏈鏈接，，這時時可以以看到到文本本“這里是是彈出出菜單單”具有超超級鏈鏈接的的模式式。（3）執(zhí)執(zhí)行“窗口”→“行為”菜單命命令，，打開開行為為面板板。（4）選擇擇文本本“這里是是彈出出菜單單”，單擊擊按鈕鈕【+】】，在彈彈出的的菜單單中選選擇“顯示彈彈出式式菜單單”，這時時彈出出“顯示彈彈出式式菜單單”對話框框。如如圖13-41。（5）單單擊【繼續(xù)】按鈕，，彈出出如圖圖13-42所示的的對話話框，，該對對話框框用來來設置置彈出出式的的菜單單。（6）選選擇“內(nèi)容”選項卡卡，在在文本本一欄欄中的的“新建項項目”改為“菜單1”。在目目標一一欄中中選擇擇“_blank“，設置置鏈接接的值值為”#“。如圖圖13-43。（7）單單擊“菜單”欄的【+】】按鈕，，用上上面的的方法法設置置“菜單2”、“菜單3”。（8）為為“菜單2”建立一一個子子菜單單，操操作方方法為為：鼠鼠標單單擊對對話框框下方方的“菜單2”，單擊擊“菜單”欄的【+】】按鈕，，在文文本一一欄中中的“新建項項目”改為“子菜單單”。在目目標一一欄中中選擇擇“_blank“，設置置鏈接接的值值為“#”。單擊擊【縮進項項】按鈕，，這樣樣“菜單2”就具有有一個個子菜菜單，，如圖圖13-44所示。。建立多多個子子菜單單方法法相同同，若若要建建立二二級子子菜單單，請請讀者者自己己思考考。按按鈕【-】】是用來來刪除除菜單單，【左縮縮進進項項】按鈕鈕用用來來撤撤銷銷子子菜菜單單的的建建立立。。其他他的的選選項項卡卡如如“外觀觀”、“高級級”和“位置置”的用用法法，，讀讀者者朋朋友友們們可可以以自自行行動動手手練練習習。。（9）單單擊擊【確定定】按鈕鈕。。可可以以看看到到行行為為面面板板為為如如圖圖13-55所示示：：（10）保保存存該該頁頁面面，，進進行行預預覽覽，，結結果果如如圖圖13-46所示示：：謝謝謝1月-2320:36:2220:3620:361月-231月-2320:3620:3620:36:221月月-231月月-2320:36:222023/1/520:36:229、靜靜夜夜四四無無鄰鄰，，荒荒居居舊舊業(yè)業(yè)貧貧。。。。1月月-231月月-23Thursday,January5,202310、雨中中黃葉葉樹，，燈下下白頭頭人。。。20:36:2320:36:2320:361/5/20238:36:23PM11、以我獨沈久久，愧君相見見頻。。1月-2320:36:2320:36Jan-2305-Jan-2312、故人人江海海別，，幾度度隔山山川。。。20:36:2320:36:2320:36Thursday,January5,202313、乍見翻疑夢夢，相悲各問問年。。1月-231月-2320:36:2320:36:23January5,202314、他鄉(xiāng)生生白發(fā)，，舊國見見青山。。。05一一月20238:36:23下午午20:3

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論