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

下載本文檔

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

文檔簡介

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

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

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

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

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論