添加網(wǎng)頁特效_第1頁
添加網(wǎng)頁特效_第2頁
添加網(wǎng)頁特效_第3頁
添加網(wǎng)頁特效_第4頁
添加網(wǎng)頁特效_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

添加網(wǎng)頁特效本章內容在網(wǎng)站設計中的地位本章主要講述如何在網(wǎng)頁中添加網(wǎng)頁特效，增加網(wǎng)頁觀賞性和互動性。使用網(wǎng)頁特效，其目的在于使網(wǎng)站更加新穎、美觀，提高網(wǎng)站友好度，增加網(wǎng)站訪問量。DreamweaverCS3為用戶提供了方便的特效插入方法——行為，使用戶不必學習枯燥的代碼就可以創(chuàng)建豐富多彩的網(wǎng)頁特效。本章要點滾動圖文的制作；多媒體元素的插入；行為的三要素；行為面板的使用；彈出窗口的設計；使用交換圖像美化導航欄。教學目標通過本章的案例學習，要求用戶掌握滾動文本的制作方法；掌握多媒體元素的插入方法；了解行為的作用原理，掌握行為的添加方法；在網(wǎng)頁中靈活使用行為，創(chuàng)建符合頁面特點的特效。8.1.1<marquee>標簽的使用1．<marquee>標簽<marquee>標簽通常用于設置單元格中文本或圖像的滾動效果，以達到醒目、個性的顯示效果，同時，使用<marquee>標簽創(chuàng)建滾動字幕公告，可以提高網(wǎng)頁顯示區(qū)域的利用率，即用較小的空間顯示盡可能多的信息。

2．標簽屬性屬性名含義direction表示滾動的方向，值可以是left、right、up、down，默認為leftbehavior表示滾動的方式，值可以是scroll(連續(xù)滾動)、slide(滑動一次)、alternate(來回滾動)loop表示循環(huán)的次數(shù)，值是正整數(shù)，默認為無限循環(huán)scrollamount表示運動速度，值是正整數(shù)，默認為6scrolldelay表示停頓時間，值是正整數(shù)，默認為0，單位是msalign表示元素的垂直對齊方式，值可以是top、middle、bottom，默認為middlebgcolor表示運動區(qū)域的背景色，值是十六進制的RGB顏色，默認為白色height、width表示運動區(qū)域的高度和寬度，值是正整數(shù)(單位是像素)或百分數(shù)，默認width=100%；height為標簽內元素的高度hspace、vspace表示元素到區(qū)域邊界的水平距離和垂直距離，值是正整數(shù)，單位是像素onmouseover=this.stop()onmouseout=this.start()表示當鼠標以上區(qū)域的時候滾動停止，當鼠標移開的時候又繼續(xù)滾動3．語法<marquee>是一個雙標簽，在使用時，需要指定其實用的區(qū)塊。如：<marquee>這是一段滾動文本。</marquee>但在實際應用中，<marquee>標簽通常需要搭配其屬性使用，以調整滾動速度、頻率、滾動范圍大小，否則，預覽后的滾動效果既快又不連貫。

“滾動公告”網(wǎng)頁案例在本案例中，我們實現(xiàn)公告的步驟如下。(1)切換工作區(qū)到“拆分視圖”，將光標定位到“公告欄”下方單元格。(2)寫入公告文本，調整文本字號為12px。(3)在上方代碼視圖中，在公告文本兩端寫入如下代碼：<marqueedirection="up"scrollamount="1"width="90%"height="150"onmouseover="this.stop()"onmouseout="this.start()">公告欄中的文本內容：</marquee>(4)按F12鍵預覽頁面。通常使用scrollamount和scrolldelay兩個屬性調整文本的滾動效果。默認情況下，scrollamount值為6，scrolldelay值為0。本案例中為了使?jié)L動文本更平滑，調整scrollamount屬性值為1，使?jié)L動速度變慢。8.2.1常用的音頻格式聲音能極好地烘托網(wǎng)頁頁面的氛圍，網(wǎng)頁中常見的聲音格式有WAV、MP3、MIDI、WMA、RM等。

幾種音頻格式的特點音頻格式主要特點.WAVWaveAudioFiles(波形聲音文件)是微軟公司開發(fā)的一種聲音文件格式，是最早的數(shù)字音頻格式。可以從麥克風、CD、磁帶等輸入設備錄制WAV文件。該文件具有較好的聲音品質，但文件體積較大(1min約占10MB左右)，不便于網(wǎng)絡交流與傳播。有時用于網(wǎng)頁中較短的聲音特效.MP3MPEG-AudioLayer-3是采用國際標準MPEG中的第三層音頻壓縮模式對聲音信號進行壓縮的一種聲音格式。優(yōu)點：壓縮比高(1minMP3格式文件只有1MB左右)、音質較好.MIDI或.MIDMusicalInstrumentDigitalInterface(數(shù)字接口電子樂器)使用電子合成器制作出來的音樂，采用數(shù)字方式對樂器的聲音進行記錄，播放時再對這些記錄進行合成。優(yōu)點：文件非常小，適用于網(wǎng)頁背景音樂、游戲軟件或手機鈴聲。網(wǎng)絡上各種流行的播放器都支持播放.WMAWindowsMediaAudio是微軟開發(fā)的音頻格式。WMA格式具有比MP3更高的壓縮比(生成的文件大小只有相應MP3文件的一半)并支持流媒體技術，可以一邊下載一邊播放，適合于網(wǎng)絡上使用。安裝Windowsmediaplayer播放器即可播放.RM或.RAMRealMedia是RealNetworks公司開發(fā)的網(wǎng)絡流媒體格式，具有比MP3、WMA格式更高的壓縮比，支持“流式”播放，可以根據(jù)網(wǎng)絡傳輸速率制作出不同的壓縮比率，從而實現(xiàn)在低速率的網(wǎng)絡上進行音頻數(shù)據(jù)的實時傳送和播放。安裝RealPlayer播放器可以實現(xiàn)在線播放插入音頻1．使用<bgsound>標簽嵌入背景音樂在網(wǎng)頁中添加背景音樂可以使用<bgsound>標簽具體步驟如下。(1)打開需要添加背景音樂的頁面，切換到代碼視圖。(2)在<head>和</head>之間輸入“<”，在彈出的代碼提示框中選擇“bgsound”，插入背景音樂代碼。(3)用鼠標右鍵單擊bgsound，在彈出的快捷菜單中選擇“編輯標簽”，彈出“標簽編輯器-bgsound”對話框，如圖。其中各參數(shù)的含義如下。①“源”：設置音樂文件的路徑，單擊“瀏覽”按鈕選擇背景音樂文件。②“循環(huán)”：設置音樂循環(huán)的次數(shù)，“-1”為無限次循環(huán)。③“平衡”：音樂的左右平衡。④“音量”：音樂的音量設置，取值范圍0～100。⑤“延遲”：音樂播放時的延遲。(4)設置完畢后單擊“確定”按鈕，<bgsound>標簽嵌入的背景音樂在頁面上并不顯示。各參數(shù)的含義如下。①“源”：設置音樂文件的路徑，單擊“瀏覽”按鈕選擇背景音樂文件。②“循環(huán)”：設置音樂循環(huán)的次數(shù)，“-1”為無限次循環(huán)。③“平衡”：音樂的左右平衡。④“音量”：音樂的音量設置，取值范圍0～100。⑤“延遲”：音樂播放時的延遲。(4)設置完畢后單擊“確定”按鈕，<bgsound>標簽嵌入的背景音樂在頁面上并不顯示。2．使用<embed>標簽嵌入多媒體文件embed標簽可以用來插入各種多媒體文件，可以是音頻、視頻或.swf格式等，其中的參數(shù)因不同的文件格式而異。使用<embed>標簽插入聲音文件的步驟如下。(1)打開需要插入聲音文件的頁面，切換到代碼視圖。(2)輸入“<”，在彈出的代碼提示框中選擇embed。(3)用鼠標右鍵單擊embed，在彈出的快捷菜單中選擇“編輯標簽”，彈出“標簽編輯器-embed”對話框。(4)設置完畢后單擊“確定”按鈕。3．使用添加插件插入聲音文件若對html語言中的標簽不是很熟悉的用戶，也可以使用添加插件的方法插入多媒體文件。使用添加插件插入聲音文件的步驟如下。(1)打開需要插入聲音文件的頁面，將鼠標置于插入點處。(2)選擇“插入記錄”→“媒體”→“插件”或者單擊“插入”面板“常用”類別中“媒體”按鈕旁的小箭頭，從彈出的菜單中選擇“插件”。(3)在彈出的“選擇文件”對話框中選擇要插入的聲音文件，單擊“確定”按鈕。(4)選中插入的插件圖標，在“屬性”面板中進一步設置相關參數(shù)。“播放音樂”網(wǎng)頁案例以下為案例實現(xiàn)步驟。(1)打開dboen.htm，將光標定位到章節(jié)內容下方的單元格。(2)單擊“插入”面板“常用”類別中“媒體”按鈕旁的小箭頭，從彈出的菜單中選擇“插件。(3)在“選擇文件”對話框中選擇要使用的音樂文件“bg1.mp3”，單擊“確定”按鈕。(4)選中插入的插件圖標，在屬性中把寬度和高度刪除。(5)從代碼視圖中找到<embed>標簽對，并在兩端添加<DIV>，使播放器居中對齊，最終代碼如下：<divalign="center"><embedsrc="music/bg1.mp3"></embed></div>8.3.1行為概述Dreamweaver提供了一種稱為“行為”的機制，幫助用戶構建頁面中的交互行為。行為，就是在網(wǎng)頁中進行一系列動作，通過這些動作實現(xiàn)用戶與頁面的交互，是一個帶有面向對象設計思想的工具。行為有3個重要的組成部分：對象、事件和行為。對象是產(chǎn)生行為的主體，許多網(wǎng)頁元素都可以成為對象，如圖片、文字、多媒體文件等。事件是觸發(fā)動態(tài)效果的條件，它可以被添加到各種頁面元素上，也可以被添加到HTML標記中。8.3.2預定義行為1．交換圖像交換圖像動作可以實現(xiàn)用戶執(zhí)行某個動作后改變頁面上顯示的圖像的效果，要注意改變的是圖像的源路經(jīng)，而原來設置的圖像大小不變，最好交換圖像的兩張圖片大小相同，以免圖像變形。創(chuàng)建交換圖像行為的操作步驟如下。(1)選中要添加行為的對象，通常是圖像對象。(2)在“行為”面板中單擊按鈕打開“動作”菜單，從中選擇“交換圖像”。(3)在打開的“交換圖像”對話框中設置各選項.“交換圖像”對話框中各參數(shù)含義如下。①“圖像”：在列表中顯示了頁面中所有的圖像對象，選擇要添加行為的圖像。②“設定原始檔為”：設置替換圖像的路徑，可以單擊“瀏覽”按鈕從磁盤上選擇。③“預先載入圖像”：選擇該選項，則無論圖像是否顯示，都會被下載。④“鼠標滑開時恢復圖像”：選擇該選項，則鼠標離開設定行為的圖像對象時，恢復顯示原始圖像。(4)設置完畢后單擊“確定”按鈕，回到“行為”面板中選擇相應的事件。2．彈出信息彈出信息動作可以在用戶執(zhí)行某個動作后，顯示一個信息對話框，起提示信息的作用。創(chuàng)建彈出信息效果的具體操作步驟如下。(1)選中要添加行為的對象。(2)在“行為”面板中單擊按鈕打開“動作”菜單，從中選擇“彈出信息”。(3)在“彈出信息”對話框中的輸入要顯示的內容。在消息文本框中可以輸入文字，也可以使用JavaScript語句。(4)設置完畢后單擊“確定”按鈕?；氐健靶袨椤泵姘逯羞x擇相應的事件。3．顯示-隱藏層顯示-隱藏層動作可以控制層在網(wǎng)頁中的可見性。例如，網(wǎng)頁中可以將對某個對象的說明性文字放在一個層內，通過添加顯示-隱藏層動作，實現(xiàn)當鼠標移到對象上時顯示文字，而當鼠標移開對象時隱藏文字。顯示-隱藏層的操作步驟如下。(1)選中要添加行為的對象。(2)在“行為”面板中單擊按鈕打開“動作”菜單，從中選擇“顯示-隱藏元素”。(3)在“顯示-隱藏元素”對話框中，列出了頁面中所有的層。選擇要設置的層，單擊“顯示”按鈕則執(zhí)行顯示層的動作，單擊“隱藏”則執(zhí)行隱藏層的動作，單擊“默認”則恢復層默認的可見性狀態(tài)。(4)設置完畢后單擊“確定”按鈕，回到“行為”面板中選擇相應的事件。4．打開瀏覽器窗口打開瀏覽器窗口動作可以在一個新的瀏覽器窗口中載入指定URL地址的文檔。打開瀏覽器窗口的具體操作步驟如下。(1)選中要添加行為的對象。(2)在“行為”面板中單擊按鈕打開“動作”菜單，從中選擇“打開瀏覽器窗口”。(3)設置“打開瀏覽器窗口”對話框中各參數(shù)。(4)設置完畢后單擊“確定”按鈕，回到“行為”面板中選擇相應的事件。5．效果在DreamweaverCS3中增加了一項“效果”動作，其中包括7種視覺效果，如圖8.24所示。例如，制作圖像縮放效果的具體步驟如下。(1)選中要添加行為的圖像對象。(2)在“行為”面板中單擊按鈕打開“動作”菜單，選擇“效果”中的“增大/收縮”。(3)設置“增大/收縮”對話框中各參數(shù)?！霸龃?收縮”對話框中各參數(shù)含義如下。①“目標元素”：從下拉菜單中選擇某個對象的ID。如果已經(jīng)選擇了一個對象，則選擇“<當前選定內容>”。②“效果持續(xù)時間”：定義出現(xiàn)此效果所需的時間，用ms表示。③“效果”：選擇要應用的效果：“增大”或“收縮”。④“收縮自”或“增大自”：定義對象在效果開始時的大小，以百分比或像素為單位。⑤“收縮到”或“增大到”：定義對象在效果結束時的大小，以百分比或像素為單位。若選擇以像素為單位，“寬/高”域將被激活。⑥“收縮到”：設置元素增大或收縮到頁面的左上角還是頁面的中心。⑦“切換效果”：選擇此選項則該效果是可逆的(連續(xù)單擊即可增大或收縮)。(4)設置完畢后單擊“確定”按鈕，回到“行為”面板中選擇相應的事件。網(wǎng)站導航欄制作案例對圖片添加“交換圖像”行為，使得鼠標移到圖片上時文字發(fā)光。導航欄的實現(xiàn)方

溫馨提示

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

評論

0/150

提交評論