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

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

GIF格式

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

11.1.2

JPEG格式

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

11.1.3

PNG格式

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

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

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

11.2.2設(shè)置圖像屬性

如果需要對(duì)圖像進(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兩種圖像元素。下面主要向大家介紹如何在頁(yè)面中插入其他兩種圖像元素。11.3.1鼠標(biāo)經(jīng)過圖像鼠標(biāo)經(jīng)過圖像是一種在瀏覽器中查看并使用鼠標(biāo)指針經(jīng)過它時(shí)發(fā)生變化的圖像。鼠標(biāo)經(jīng)過圖像實(shí)際上由兩個(gè)圖像組成：主圖像（當(dāng)首次載入頁(yè)面時(shí)顯示的圖像）和次圖像（當(dāng)鼠標(biāo)指針經(jīng)過主圖像時(shí)顯示的圖像）。鼠標(biāo)經(jīng)過圖像中的這兩幅圖像應(yīng)該大小相等；如果這兩幅圖像大小不同，Dreamweaver將自動(dòng)調(diào)整第2幅圖像的大小匹配第1幅圖像的屬性。下面向大家介紹一下插入鼠標(biāo)經(jīng)過圖像的相關(guān)屬性。動(dòng)手實(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)頁(yè)中自動(dòng)繪制出一些常見的圖形，例如矩形和橢圓形等，并且能夠添加一些圖像。11.4.1

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

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

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

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