第11章在網(wǎng)頁中插入圖像

11.1網(wǎng)頁圖像的基本知識目前雖然有很多種圖像格式，但是在網(wǎng)站頁面中常用的只有GIF、JPEG、PNG這3種格式，其中PNG文件具有較大的靈活性且文件比較小，所以它對于目前任何類型的Web圖形來說都是最適合的，但是只有較高版本的瀏覽器才支持這種圖像格式，而且也不是對PNG文件的所有特性都能很好地支持。都可以支持。11.1.1

GIF格式

GIF是英文GraphicsInterchangeFormat（圖形交換格式）的縮寫，GIF采用LZW無損壓縮算法，而且最多使用256種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像。另外，GIF圖片支持動畫。GIF動畫的顯示不需要特定的插件，在制作簡單的、只有幾幀圖片交替的動畫時，GIF動畫也有著特定的優(yōu)勢。

11.1.2

JPEG格式

JPEG是英文JointPhotographicExpertsGroup（聯(lián)合圖像專家組）的縮寫，該圖像格式是用于攝影連續(xù)色調(diào)圖像的高級格式，因?yàn)镴PEG文件可以包含數(shù)百萬種顏色。通常JPEG文件需要通過壓縮圖像品質(zhì)和文件大小之間來達(dá)到良好的平衡，因?yàn)殡S著JPEG文件品質(zhì)的提高，文件的大小和下載時間也會隨之增加。

11.1.3

PNG格式

PNG是英文PortableNetworkGraphic（可移植網(wǎng)絡(luò)圖形）的縮寫，該圖像格式是一種替代GIF格式的專利權(quán)限制的格式，它包括對索引色、灰度、真彩色圖像以及Alpha通道透明的支持。PNG是Fireworks固有的文件格式。PNG文件可保留所有的原始圖層、矢量、顏色和效果信息，并且在任何時候都可以完全編輯所有元素。

11.2在網(wǎng)頁中插入圖像在DreamweaverCC中，可以直接插入圖像，也可以將圖像作為頁面的背景。另外，還可以創(chuàng)建出圖像交替的交互效果。想在制作網(wǎng)頁的過程中直接修改圖像，可以調(diào)出外部圖像編輯器。

11.2.1插入圖像在網(wǎng)頁中插入圖像可以有效地提高網(wǎng)頁的觀賞性，并且可以反映出網(wǎng)站的主題，下面我們將向大家介紹一下如何在網(wǎng)頁中插入圖像。動手實(shí)踐——插入圖像

11.2.2設(shè)置圖像屬性

如果需要對圖像進(jìn)行屬性設(shè)置，首先需要在Dreamweaver設(shè)計(jì)視圖中選中需要設(shè)置屬性的圖像，可以看到該圖像的屬性出現(xiàn)在“屬性”面板上。

最終文件：光盤\最終文件\第11章\11-2.html視頻：光盤\視頻\第11章\11-2.swf

11.3插入其他圖像元素Dreamweaver中還提供了一些其他相關(guān)的圖像元素，單擊“插入”面板上的“常用”選項(xiàng)卡中的“圖像”按鈕右側(cè)的下三角形，即可彈出下拉菜單，可以看到“鼠標(biāo)經(jīng)過圖像”和FireworksHTML兩種圖像元素。下面主要向大家介紹如何在頁面中插入其他兩種圖像元素。11.3.1鼠標(biāo)經(jīng)過圖像鼠標(biāo)經(jīng)過圖像是一種在瀏覽器中查看并使用鼠標(biāo)指針經(jīng)過它時發(fā)生變化的圖像。鼠標(biāo)經(jīng)過圖像實(shí)際上由兩個圖像組成：主圖像（當(dāng)首次載入頁面時顯示的圖像）和次圖像（當(dāng)鼠標(biāo)指針經(jīng)過主圖像時顯示的圖像）。鼠標(biāo)經(jīng)過圖像中的這兩幅圖像應(yīng)該大小相等；如果這兩幅圖像大小不同，Dreamweaver將自動調(diào)整第2幅圖像的大小匹配第1幅圖像的屬性。下面向大家介紹一下插入鼠標(biāo)經(jīng)過圖像的相關(guān)屬性。動手實(shí)踐——制作交互導(dǎo)航菜單最終文件：光盤\最終文件\第11章\11-3-1.html視頻：光盤\視頻\第11章\11-3-1.swf

11.3.2插入FireworksHTML在Dreamweaver中整合了很多Fireworks的功能，這里講到的也是其中之一，用戶可以輕松插入Fireworks制作的HTML文檔。

11.4插入HTML5畫布畫布是DreamweaverCC新增的基于HTML5的全新功能，通過該功能可以在網(wǎng)頁中自動繪制出一些常見的圖形，例如矩形和橢圓形等，并且能夠添加一些圖像。11.4.1

插入畫布在網(wǎng)頁中插入畫布，像插入其他網(wǎng)頁對象一樣簡單，然后利用JavaScript腳本調(diào)用繪圖API（接口函數(shù)），在網(wǎng)頁中繪制出各種圖形效果。畫布具有多種繪制路徑、矩形、圓形、字符和添加圖像的方法，還能實(shí)現(xiàn)動畫。11.4.2設(shè)置畫布屬性單擊選中剛剛在網(wǎng)頁中插入的畫布圖標(biāo)，在“屬性”面板中可以對畫布的相關(guān)屬性進(jìn)行設(shè)置。11.4.3如何使用畫布在網(wǎng)頁中繪制圖形畫布元素本身是沒有繪圖能力的，畫布元素提供了一套繪圖API。在開始繪圖之前，先要獲取畫布元素的對象，再獲取一個繪圖上下文，接下來就可以使用繪圖API中豐富的功能了。11.4.4使用HTML5畫布繪制矩形在DreamweaverCC的畫布工具在網(wǎng)頁中繪制矩形需要添加相應(yīng)的腳本代碼，矩形繪制有兩種專用方法：strokeRect()和fillRect()，分別用于繪制矩形的邊框和填充的矩形區(qū)域。動手實(shí)踐——使用HTML5畫布繪制矩形最終文件：光盤\最終文件\第11章\11-4-4.html視頻：光盤\視頻\第11章\11-4-4.swf11.4.5使用HTML5畫布實(shí)現(xiàn)圓形圖片在使用畫布繪圖時還有一種對路徑的處理方法叫做剪裁方法clip()，與圖片的剪裁相似，在畫布中分割一塊區(qū)域來保留圖片的一部分。

11.5制作旅游信息網(wǎng)站頁面圖像可以使網(wǎng)頁充滿生命力和說服力，能夠體現(xiàn)出網(wǎng)頁及其網(wǎng)站獨(dú)有的風(fēng)格。在擁有了華麗視覺效果的同時，也一定要留意圖像的占用的空間大小，在頁面效果和大小之間找到一個合適的交叉點(diǎn)。下面通過一個旅游信息網(wǎng)站頁面的實(shí)例，講解制作圖像頁面的方法。

動手實(shí)踐——使用HTML5畫布實(shí)現(xiàn)圓形圖片動手實(shí)踐——制作旅游信息網(wǎng)站頁面最終文件：光盤\最終文件\第11章\11-4-5.html視頻：光盤\視頻\第11章\11-4-5.swf最終文件：光盤\最終文件\第11章\11-5.html視頻：光盤\視頻\第11章\11-5.swf

11.6本章小結(jié)本章主要講解了圖像元素在