第5章 使用圖像和多媒體創(chuàng)建豐富多彩的網(wǎng)頁

1、第5 5章使用圖像和多媒體創(chuàng)建豐富多彩的網(wǎng)頁在網(wǎng)絡(luò)上隨意瀏覽一個頁面，都會發(fā)現(xiàn)除了文字以外還有各種各樣的其他元素，如圖像、動畫和聲音。了解網(wǎng)頁中圖像的使用常識掌握在網(wǎng)頁中使用圖像掌握插入其他網(wǎng)頁圖像掌握添加Flash影片掌握使用代碼提示添加背景音樂掌握創(chuàng)建鼠標(biāo)經(jīng)過圖像導(dǎo)航欄掌握創(chuàng)建圖文混合網(wǎng)頁5.1 5.1 網(wǎng)頁中圖像的使用常識網(wǎng)頁中圖像的格式通常有3種，即GIF、JPEG和PNG。目前GIF和JPEG 文件格式的支持情況最好，大多數(shù)瀏覽器都可以查看它們。5.2 5.2 在網(wǎng)頁中使用圖像在網(wǎng)頁制作中，還有一個很重要的元素，那就是圖像。正是由于圖像的存在，才使得網(wǎng)頁內(nèi)容變得豐富多彩。5.2.1

2、插入圖像在網(wǎng)頁中插入圖像的方法非常簡單，具體操作步驟如下。5.2.2 設(shè)置圖像屬性插入圖像后，如果圖像的大小和位置并不合適，還需要對圖像的屬性進(jìn)行具體的調(diào)整，如大小、位置和對齊方式等。設(shè)置圖像屬性的效果如圖5.4所示，具體操作步驟如下。Dreamweaver CS6中提供了直接在文檔中裁剪圖像的功能，不再需要在其他圖像編輯軟件中進(jìn)行操作。5.2.3 5.2.3 裁剪圖像裁剪圖像調(diào)整圖像的亮度和對比度的具體操作步驟如下。5.2.4調(diào)整圖像的亮度和對比度銳化圖像的具體操作步驟如下。5.2.6 銳化圖像下面講述在網(wǎng)頁中其他圖像的使用，如設(shè)置背景圖像，插入鼠標(biāo)經(jīng)過圖像。5.3.1 背景圖像在網(wǎng)頁中，可

3、以把圖像設(shè)置為網(wǎng)頁的背景，這個圖像就是背景圖。設(shè)置背景圖像的效果如圖5.16所示。5.3.2 創(chuàng)建鼠標(biāo)經(jīng)過圖像鼠標(biāo)經(jīng)過圖像就是當(dāng)鼠標(biāo)經(jīng)過圖像時，原圖像會變成另外一張圖像。鼠標(biāo)經(jīng)過圖像其實(shí)是由兩張圖像組成的：原始圖像和鼠標(biāo)經(jīng)過圖像。Flash是一個非常成功的產(chǎn)品，在以前的Web頁面中所有的動態(tài)視頻元素不是視頻就是GIF動畫，現(xiàn)在已經(jīng)慢慢轉(zhuǎn)化為使用Flash動畫了。所以Flash影片在頁面中的置入是非常重要的。5.4 5.4 添加添加FlashFlash影片影片5.55.5使用代碼提示添加背景音樂使用代碼提示添加背景音樂通過代碼提示，可以在【代碼】視圖中插入代碼，在輸入某些字符時，將顯示一個列表，列出完成條目所需要的選項，下面通過代碼提示講述插入背景音樂的效果，如圖5.32所示。5.6 5.6 實(shí)戰(zhàn)演練實(shí)戰(zhàn)演練以上主要講述了圖像的基本操作、添加Flash影片、插入視頻文件和插入其他媒體對象。下面通過兩個例子進(jìn)一步鞏固所學(xué)知識。5.7.1 實(shí)例1創(chuàng)建鼠標(biāo)經(jīng)過圖像導(dǎo)航欄創(chuàng)建鼠標(biāo)經(jīng)過圖像最常用的是在網(wǎng)站的導(dǎo)航欄中，鼠標(biāo)經(jīng)過圖像導(dǎo)航欄前如圖5.40所示，鼠標(biāo)經(jīng)過圖像導(dǎo)航欄時如圖5.41所示。5.7.2 實(shí)例2創(chuàng)建圖文混和網(wǎng)頁文字和圖像是網(wǎng)頁中最基