網(wǎng)絡(luò)技術(shù)基礎(chǔ)——internet和網(wǎng)頁設(shè)計教學(xué)課件作者第二版童欣第108章frontpage

1、10.8 多媒體及動態(tài)網(wǎng)頁的制作,,10.8 多媒體及動態(tài)網(wǎng)頁的制作,網(wǎng)頁之所以能夠吸引人，不僅因?yàn)樗梢蕴幚砦谋緢D像等信息，更為重要的是它還可以處理聲音、動畫等多種媒體，而且FrontPage還可以支持動態(tài)網(wǎng)頁效果，像橫幅廣告，滾動字幕，懸停按鈕等等，由于這些效果，更能將網(wǎng)頁制作得生動、活潑。,1．添加背景音樂添加背景音樂的步驟如下：① 在網(wǎng)頁中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“網(wǎng)頁屬性”命令，打開“網(wǎng)頁屬性”對話框。②

2、 單擊“網(wǎng)頁屬性”對話框中的“常規(guī)”標(biāo)簽，打開該選項(xiàng)卡。③ 在“常規(guī)”選項(xiàng)卡中背景音樂“位置”的輸入框中，輸入要插入的背景音樂文件名，或單擊“瀏覽”按鈕，選擇要插入的背景音樂。④ 如果要循環(huán)播放，選擇“不限次數(shù)”按鈕，否則選擇“循環(huán)次數(shù)”按鈕，并輸入循環(huán)播放的次數(shù)。⑤ 單擊“預(yù)覽”按鈕，即可聽到背景。,10.8.1 添加聲音,2．鏈接聲音文件 與添加背景音樂不同，背景音樂是與網(wǎng)頁一同出現(xiàn)的，而鏈接的聲音是要通過單擊鏈接源，

3、才會播放。建立超鏈接聲音文件與建立超鏈接網(wǎng)頁方法相同，只不過選擇聲音文件作為超鏈接的目標(biāo)文件。,10.8.1 添加聲音,1．插入視頻文件 可以添加Windows Media Player可播放的任何類型的視頻文件。視頻文件是被當(dāng)作圖片插入進(jìn)來的。插入視頻文件的方法如下：① 將鼠標(biāo)定位在要插入視頻的位置。,10.8.2 添加視頻文件,② 單擊“插入”菜單下“圖片”級聯(lián)菜單中的“視頻”選項(xiàng)，彈出“視頻”對話框，選擇要插入

4、的視頻文件，單擊“確定”按鈕，視頻文件就被插入進(jìn)來了，從圖中可以看到，網(wǎng)頁中出現(xiàn)了視頻文件的第一幀畫面。,10.8.2 添加視頻文件,③ 鼠標(biāo)右鍵單擊視頻畫面，在彈出的快捷菜單中選擇“圖片屬性”命令，打開“圖片屬性”對話框，單擊“視頻”標(biāo)簽，切換到“視頻”選項(xiàng)卡。④ “視頻源”給出了視頻文件的URL，如果要循環(huán)播放，選擇“不限次數(shù)”按鈕，否則選擇“循環(huán)次數(shù)”按鈕，并輸入循環(huán)播放的次數(shù)，如圖所示。,10.8.2 添加視頻文件,10.

5、8.2 添加視頻文件,⑤ 選擇播放視頻的方式，如果希望用鼠標(biāo)決定是否播放，選擇“當(dāng)鼠標(biāo)懸停于其上時”，如果選擇“打開文件時”那么在網(wǎng)頁下載的同時，會播放視頻文件。,10.8.2 添加視頻文件,2．鏈接其它媒體文件 網(wǎng)頁中的動畫文件應(yīng)該越小越好，因此鏈接的動畫、視頻媒體常常是經(jīng)過壓縮的，如Real格式。Flash文件也是網(wǎng)頁中經(jīng)常要使用的動畫文件。 建立與Real和Flash等格式文件鏈接的

6、方法與創(chuàng)建普通超鏈接的方式相同。但需要注意的是，要事先安裝相應(yīng)的軟件的播放插件，否則無法播放這些動畫。,FrontPage 提供的動態(tài)網(wǎng)頁元素包括：懸停按鈕、網(wǎng)站計數(shù)器、滾動字幕、橫幅廣告等等。,10.8.3 動態(tài)網(wǎng)頁元素,10.8.3.1交互式按鈕 交互式按鈕又稱懸停按鈕，是可以變化的按鈕，比如當(dāng)鼠標(biāo)移到它上面時，它能顯示不同的顏色或樣式等，而當(dāng)鼠標(biāo)移開時，按鈕又恢復(fù)原來的形狀。 1．創(chuàng)建懸停按鈕

7、 創(chuàng)建懸停按鈕方法是將鼠標(biāo)定位在要制作懸停按鈕的位置，單擊“插入”菜單下“交互式按鈕”命令，彈出“交互式按鈕”對話框,10.8.3 動態(tài)網(wǎng)頁元素,10.8.3 動態(tài)網(wǎng)頁元素,“按鈕”選項(xiàng)卡，如圖所示，用來設(shè)置按鈕的樣式、文本和超鏈接等。,①在“按鈕”下拉列表中選擇一種按鈕樣式，如選擇“發(fā)光矩形2”樣式。②在“文本”輸入框中輸入按鈕的名稱，如“返回”。③在“鏈接”中輸入要鏈接到網(wǎng)頁的URL?！白煮w”選項(xiàng)卡，如圖文本的字體、字號、

8、顏色和對齊方式等。,10.8.3 動態(tài)網(wǎng)頁元素,④ 例如：設(shè)置文本的顏色為黑色，鼠標(biāo)移上時為褐紫紅色，鼠標(biāo)按下時橄欖色，水平和垂直對齊方式均為居中。“圖像”選項(xiàng)卡，如圖所示，用來設(shè)置按鈕的尺寸，或按鈕圖像。⑤輸入按鈕的“寬度”尺寸和“高度”尺寸。,10.8.3 動態(tài)網(wǎng)頁元素,⑥選中“創(chuàng)建懸停圖像”、“創(chuàng)建按下時圖像”和“預(yù)載按鈕圖像”，使設(shè)置的懸停效果有效，懸停按鈕設(shè)置好后，單擊“確定”按鈕完成操作。注意：保存文件時，系統(tǒng)會生

9、成3張按鈕圖片，并提示是否保存，如圖所示，一定要將圖片保存在網(wǎng)站內(nèi)相應(yīng)的文件夾中。,10.8.3 動態(tài)網(wǎng)頁元素,⑦ 在“網(wǎng)頁”視圖下，單擊“預(yù)覽”標(biāo)簽，可看到當(dāng)鼠標(biāo)移到按鈕上時懸停的效果，如圖所示。,10.8.3 動態(tài)網(wǎng)頁元素,2．修改懸停按鈕 如果要修改創(chuàng)建好的懸停按鈕，可以用鼠標(biāo)右鍵單擊懸停按鈕，在彈出的快捷菜單中選擇“按鈕屬性”命令，就會“交互式按鈕”對話框，對懸停按鈕進(jìn)行修改。,10.8.3 動態(tài)網(wǎng)頁元素,1

10、0.8.3.2 滾動字幕 瀏覽網(wǎng)頁時經(jīng)常會看到，有的網(wǎng)頁帶有顯示并統(tǒng)計點(diǎn)擊網(wǎng)頁次數(shù)的功能，這就是計數(shù)器。計數(shù)器通常被放在站點(diǎn)的主頁中。1．添加計數(shù)器添加計數(shù)器的方法如下：,10.8.3 動態(tài)網(wǎng)頁元素,①將鼠標(biāo)定位在要制作計數(shù)器的位置，單擊“插入”菜單下“Web組件”命令，在“插入Web組件”對話框中的組件類型下拉列表中，選擇“計數(shù)器”，在“選擇計數(shù)器樣式”中，選擇一種計數(shù)器的樣式，單擊“完成”，彈出如圖的“計數(shù)器屬

11、性”對話框。 ②在“計數(shù)器屬性”對話框中根據(jù)需要設(shè)置各個選項(xiàng)，單擊“確定”按鈕即可。,10.8.3 動態(tài)網(wǎng)頁元素,“計數(shù)器屬性”對話框中各個選項(xiàng)功能如下：①計數(shù)器樣式： 可以使用FrontPage提供的5種計數(shù)器的樣式。②計數(shù)器重置為： 用來設(shè)置計數(shù)器計數(shù)的初始數(shù)字。通常設(shè)置為“0”。表示從“0”開始計數(shù)。③“設(shè)定數(shù)字位數(shù)”： 用來設(shè)置顯示在計數(shù)器計中最大的數(shù)字位數(shù)。 注意：網(wǎng)

12、頁發(fā)布后，才可在Web瀏覽器中觀察到計數(shù)器正常的工作情況。,10.8.3 動態(tài)網(wǎng)頁元素,10.8.4 網(wǎng)頁的動態(tài)效果,為了豐富網(wǎng)頁，可以將動態(tài)HTML（DHTML）的動畫效果應(yīng)用到網(wǎng)頁中的元素上。如：當(dāng)用鼠標(biāo)單擊一幅圖片或一段文本時，圖片可能會飛走，文本字體可能會發(fā)生變化等等。,10.8.4 網(wǎng)頁的動態(tài)效果,1．為圖片創(chuàng)建動態(tài)效果①選擇“視圖”菜單下中“工具欄”級聯(lián)菜單中的“DHTML效果”命令，打開“DHTML效果”工具欄，如

13、圖所示；,10.8.4 網(wǎng)頁的動態(tài)效果,②選中要創(chuàng)建動態(tài)效果的圖片，③單擊“選擇一種事件”框中右面的下拉箭頭，選擇啟動DHTML效果的方式，系統(tǒng)提供了4種啟動DHTML效的方式。 單擊：當(dāng)鼠標(biāo)單擊網(wǎng)頁元素時啟動DHTML效果。 雙擊：當(dāng)鼠標(biāo)雙擊網(wǎng)頁元素時啟動DHTML效果。 鼠標(biāo)懸停：鼠標(biāo)懸停在網(wǎng)頁元素上時啟動DHTML效果。 網(wǎng)頁加載：當(dāng)網(wǎng)頁被加載時啟動DHTML效果。 例如：選擇“單擊”。

14、,10.8.4 網(wǎng)頁的動態(tài)效果,④單擊“應(yīng)用”框中右面的下拉箭頭，選擇一種DHTML效果。啟動DHTML方式不同，應(yīng)用的DHTML效果類型就可能不同。有兩種類型： 飛出：網(wǎng)頁元素飛出網(wǎng)頁。 格式：改變文本、字體、顏色、字號或應(yīng)用邊框線效果。 例如：選擇“飛出”。⑤單擊“選擇設(shè)置”右面的下拉箭頭，設(shè)置DHTML效果。 例如：選擇“到左上部”。,10.8.4 網(wǎng)頁的動態(tài)效果,⑥ DHTML效果就設(shè)置好了。效果如

15、圖所示。,10.8.4 網(wǎng)頁的動態(tài)效果,2．為文本創(chuàng)建動態(tài)效果① 選中要創(chuàng)建動態(tài)效果的文本。② 在“DHTML效果”工具欄中選擇啟動DHTML效果的方式為“鼠標(biāo)懸?！薄＂?選擇DHTML效果類型為“格式”。,10.8.4 網(wǎng)頁的動態(tài)效果,④在“選擇設(shè)置”中，選擇DHTML效果中的“字體”，設(shè)置字體的動態(tài)效果，如圖所示。然后“選擇邊框”，彈出選擇“邊框與陰影”對話框，設(shè)置邊框與陰影。,10.8.4 網(wǎng)頁的動態(tài)效果,⑥ 文本的字