網(wǎng)頁(yè)設(shè)計(jì)第3章

1、第3課 為網(wǎng)頁(yè)添加圖像 課堂講解 上機(jī)實(shí)戰(zhàn) 課堂講解 3.1網(wǎng)頁(yè)圖像的格式及來(lái)源3.2插入圖像 3.3設(shè)置圖像屬性 3.4圖像高級(jí)設(shè)置 3.1網(wǎng)頁(yè)圖像的格式及來(lái)源3.1.1GIF格式 3.1.2JPEG格式 3.1.3PNG格式 3.1.4網(wǎng)頁(yè)圖像來(lái)源 3.1.1 GIF格式 GIF全稱(chēng)為“Graphics Interchange Format”，意為可交換圖像格式，它是第一個(gè)支持網(wǎng)頁(yè)的圖像格式，在PC機(jī)和蘋(píng)果機(jī)上都能被正確識(shí)別。它最多支持256種顏色，可以使圖像變得容量相當(dāng)小。GIF圖像可以在網(wǎng)頁(yè)中以透明方式顯示，還可以包含動(dòng)態(tài)信息，即GIF動(dòng)畫(huà)。 3.1.2 JPEG格式 JPEG全稱(chēng)為“

2、Joint Photographic Experts Group”，意為聯(lián)合圖像專(zhuān)家組，它可以高效地壓縮圖片，丟失人眼不易察覺(jué)的部分圖像，使文件容量在變小的同時(shí)基本不失真，通常用來(lái)顯示顏色豐富的精美圖像。 3.1.3 PNG格式 PNG全稱(chēng)為“Portable Network Graphics”，意為便攜網(wǎng)絡(luò)圖像，它是逐漸流行的網(wǎng)絡(luò)圖像格式。PNG格式既融合了GIF能透明顯示的特點(diǎn)，又具有JPEG處理精美圖像的優(yōu)勢(shì)，且可以包含圖層等信息，常常用于制作網(wǎng)頁(yè)效果圖。 3.1.4 網(wǎng)頁(yè)圖像來(lái)源 網(wǎng)頁(yè)圖像的素材有很多來(lái)源，如可以使用圖形處理軟件（如Photoshop、Fireworks和FreeHan

3、d等軟件）制作；可以購(gòu)買(mǎi)網(wǎng)頁(yè)素材光盤(pán)；可以從網(wǎng)絡(luò)上下載等。 3.2插入圖像 3.2.1直接插入 3.2.2占位符插入 3.2.3圖像的放大顯示 3.2.1直接插入 選擇插入圖像菜單命令。單擊插入欄的“常用”選項(xiàng)卡中的按鈕。按【Ctrl+Alt+I】鍵。 3.2.2占位符插入 制作網(wǎng)頁(yè)時(shí)還未選定需插入的圖像，但確定了圖像大小的時(shí)候，可以使用占位符來(lái)代替圖像的方式插入到文檔中。 將圖像確定后雙擊占位符，在打開(kāi)的對(duì)話(huà)框中設(shè)置后插入即可。 3.2.3圖像的放大顯示 Dreamweaver 8新增的放大鏡功能可以讓用戶(hù)更方便地進(jìn)行對(duì)齊圖像、選擇較小的對(duì)象以及查看較小的文本、動(dòng)畫(huà)或網(wǎng)頁(yè)元素等操作。 設(shè)置圖

4、像屬性 在網(wǎng)頁(yè)中插入圖像后可通過(guò)屬性面板對(duì)其屬性進(jìn)行修改等設(shè)置。 圖像命名 圖像大小 編輯圖片 源文件設(shè)置 文本說(shuō)明 圖像與文本的對(duì)齊 圖像邊距 圖像邊框 圖像命名 為了在使用Dreamweaver行為（如交換圖像）或腳本撰寫(xiě)語(yǔ)言（如JavaScript或VBScript）時(shí)可以引用該圖像，可在屬性面板的“圖像”文本框中為圖像命名。 圖像大小 在Dreamweaver 8中插入圖像后系統(tǒng)會(huì)自動(dòng)將圖像的原始大小顯示在“寬”和“高”文本框（以像素為單位）中。 編輯圖片 在網(wǎng)頁(yè)中選擇圖像之后，單擊屬性面板中的 按鈕，打開(kāi)圖像處理軟件，對(duì)圖像進(jìn)行處理。如果安裝了Fireworks，那么Firework

5、s將被默認(rèn)為圖像處理軟件。如果沒(méi)有安裝，用戶(hù)也可自己設(shè)置使用其他軟件中處理圖像。 源文件設(shè)置 在屬性面板的“源文件”文本框中顯示了圖像的保存路徑，如果要重新插入一幅新圖像，可以在選取圖像后的屬性面板中的“源文件”文本框中重新輸入要插入圖像的地址，或單擊右側(cè)后的 按鈕，在打開(kāi)的“選擇圖像源文件”對(duì)話(huà)框中重新選擇需要的圖像。 文本說(shuō)明 在選取圖像后的屬性面板的“替換”下拉列表框中可以輸入圖像的文本說(shuō)明。 圖像與文本的對(duì)齊 選取圖像后，在屬性面板的“對(duì)齊”下拉列表框中可設(shè)置處于同一行上的圖像與文本的對(duì)齊方式。 圖像邊距 選取圖像在屬性面板的“垂直邊距”和“水平邊距”文本框中可以設(shè)置圖像與頁(yè)面上方和左側(cè)之間的距離，也可以設(shè)置圖像與其他網(wǎng)頁(yè)元素之間的距離。 圖像邊框 選取圖像后，在屬性面板的“邊框”文本框中可以設(shè)置圖像邊框的寬度，單位為像素，“0”表示無(wú)邊框。 3.4圖像高級(jí)設(shè)置 3.4.1鼠標(biāo)經(jīng)過(guò)圖像設(shè)置 3.4.2插入Fireworks HTML對(duì)象 3.4.1鼠標(biāo)經(jīng)過(guò)圖像設(shè)置 鼠標(biāo)經(jīng)過(guò)圖像是一種在瀏覽器中查看網(wǎng)頁(yè)時(shí)，鼠標(biāo)光標(biāo)經(jīng)過(guò)該圖像時(shí)，圖像發(fā)生變化的動(dòng)態(tài)圖像。 3.4.2插入Fireworks HT