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

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

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

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