《網(wǎng)頁設(shè)計(jì)與制作》教案-第5講圖像的操作(一)

1、 第 5 講 圖像的操作（一）教學(xué)目標(biāo)：知識(shí)目標(biāo)認(rèn)識(shí)圖像，掌握在頁面中插入圖像的方法掌握?qǐng)D像各屬性的作用和交換圖像的設(shè)置。技能目標(biāo)能夠根據(jù)頁面顯示效果在適當(dāng)位置插入圖像元素。品質(zhì)目標(biāo)培養(yǎng)學(xué)生認(rèn)真細(xì)致、踏實(shí)進(jìn)取的精神1.2 教學(xué)重點(diǎn)：掌握?qǐng)D像各屬性的作用和交換圖像的設(shè)置。教學(xué)難點(diǎn)交換圖像的設(shè)置。教學(xué)方法：講練結(jié)合，任務(wù)驅(qū)動(dòng)、分子任務(wù)操練課時(shí)安排：2課時(shí)教學(xué)對(duì)象分析：這個(gè)班學(xué)生具有基本專業(yè)技能，不僅僅是要教會(huì)他們方法，最重要的是教會(huì)他們的規(guī)范的動(dòng)手能力與各種事件多方法的靈活處理能力，在保證全班同學(xué)教學(xué)進(jìn)度一致的情況上，培養(yǎng)學(xué)生較好的專業(yè)基礎(chǔ)與創(chuàng)新創(chuàng)作意識(shí)。教學(xué)過程：一、激趣導(dǎo)入，揭示課題前一章節(jié)把

2、Dreamweaver MX 的工作環(huán)境做了一個(gè)詳細(xì)介紹， 相信同學(xué)們對(duì)網(wǎng)頁制作軟件的界面有了一個(gè)清晰的認(rèn)識(shí)，萬事開頭難，一個(gè)好的站點(diǎn)不僅有全局規(guī)劃，而且一個(gè)功能強(qiáng)大的網(wǎng)站，需要多方面知識(shí)的積累，首先找一個(gè)已經(jīng)做得比較好的網(wǎng)站，把整個(gè)鏈接過程演示給學(xué)生，讓他們感受到網(wǎng)站其實(shí)做起來也不難，只要用心就可以，關(guān)鍵是主線要清晰。二、使用圖像圖像和文字是網(wǎng)頁中最重要的兩個(gè)元素。一個(gè)高質(zhì)量的網(wǎng)頁是離不開圖像的。制作精良的圖像可以大大增強(qiáng)網(wǎng)頁的美觀性，令網(wǎng)頁更加生動(dòng)多彩。在頁面中如何用漂亮的圖像來吸引人們的視線是每個(gè)網(wǎng)站都需要面對(duì)的問題。一幅好的圖片，勝過千言萬語，反映在網(wǎng)頁上也是如此。在這里“好的”這個(gè)詞

3、包含了三方面的含義：一是指合適的，用一幅毫不相干的圖像只會(huì)起到畫蛇添足的作用；二是指正確的，用一個(gè)文件量很大的圖像或者格式錯(cuò)誤的圖像，只會(huì)讓瀏覽者對(duì)你的網(wǎng)頁火冒三丈；三是指漂亮的。0.1 認(rèn)識(shí)圖像要在文檔中正確使用圖像，首先要了解一些Internet 相關(guān)的圖像知識(shí)。由于圖像在磁盤中的壓縮方式和存儲(chǔ)方式的不同，加上許多圖像處理軟件又有自己專門的格式，所以圖像的標(biāo)準(zhǔn)有很多種。目前在 Internet 上最為常見的圖像包括JPG、 JPEG、 GIF和PNG等幾種，在網(wǎng)頁上使用的圖像一般有JPEG、GIF、PNG等。像BMP、PSD等格式的圖像因?yàn)槲募?，影響網(wǎng)絡(luò)的傳輸速度，因此幾乎不在網(wǎng)絡(luò)中使

4、用。GIF圖像GIF （Graphics Interchange Format圖形交換格式）是一種索引顏色格式，文件最多只支持 256種顏色，色彩比較簡單，但文件比較小，是網(wǎng)頁上常用的圖像格式。GIF圖像在網(wǎng)絡(luò)上流行的另一個(gè)原因是它支持透明背景，所以它在網(wǎng)頁中經(jīng)常被用做項(xiàng)目符號(hào)和按鈕等希望不遮擋背景的元素。但是，由于 GIF動(dòng)畫最高只支持 256色，所以它的缺 點(diǎn)也很明顯，不能很好的表現(xiàn)更豐富的色彩效果。JPEG圖像JPEG （Joint Photographic Expert Group聯(lián)合圖像專家組標(biāo)準(zhǔn)） 格式是一種有損壓縮的格式， 由于它具有很高的壓縮比，從瀏覽的角度看圖像質(zhì)量受到損失不

5、大，大大方便了網(wǎng)上傳輸和 用磁盤交換圖像。JPEG格式是用于攝影或連續(xù)色調(diào)圖像的高級(jí)格式，這是因?yàn)镴PEG文件可以包含數(shù)百萬種顏色。隨著 JPEG文件品質(zhì)的提高，文件的大小和下載時(shí)間也會(huì)隨之增加。 通常可以通過壓縮 JPEG文件在圖像品質(zhì)和文件大小之間達(dá)到良好的平衡。PNG圖像PNG （Portable Network Graphic可移植網(wǎng)絡(luò)圖形）文件格式是一種替代GIF格式的無專利權(quán)限制的格式，它包括對(duì)索引色、灰度、真彩色圖像以及alpha通道透明的支持。PNG是Macromedia Fireworks固有的文件格式。PNG文件可保留所有原始層、矢量、顏色和效果信 息（例如陰影），并且在任

6、何時(shí)候所有元素都是可以完全編輯的。文件必須具有.png文件擴(kuò)展名才能被 Dreamweaver識(shí)別為PNG文件。目前，GIF和JPEG文件格式的支持情況最好，大多數(shù)瀏覽器都可以查看它們。0.2插入圖像插入圖像是一個(gè)簡單的操作，只需要用一個(gè)命令或者一個(gè)按鈕就可以實(shí)現(xiàn)。然而，想正 確地插入圖像需要了解很多知識(shí)。除了前面介紹過的圖像格式外，圖像的位置也是很重要的， 在插入圖像時(shí)要明確采用的是絕對(duì)位置還是相對(duì)位置。還需要對(duì)圖像屬性的了解，包括對(duì)齊 方式和留白大小等。要在頁面中插入圖像，可執(zhí)行下列操作：1）在設(shè)計(jì)視圖下，將光標(biāo)放置到文檔中需要插入圖像的地方。2）執(zhí)行“插入/圖像”命令，或者單擊對(duì)象面板常

7、用對(duì)象組上的圖像按鈕國，如圖2-37所示。此時(shí)會(huì)出現(xiàn)如圖2-38所示對(duì)話框，用戶可以從磁盤上選擇圖像文件。臼息|園園J矽園即國國圖2-37插入圖像ImI 1EF舊wJd伴名自 病支杵系與站再和事務(wù)器r初酎上; 1s-Hiicffi 9 口 73-中 國 彳 m，EEL -Lt 皿 EG 力 J 3江杵言型|柳*洋伸備f *“.川中jj1J?1|file /fl l/fint/iiijf.rfsrJflii jp*干； 格 jax, Im.唐l!t目聚下在耳目錄d .S疝r(nóng)iti之T.圖/拉達(dá)返回甘頁15. L hi,岬 y圖2-38插入圖像對(duì)話框3）選擇需要插入的圖片，在該對(duì)話框的URL文本框

8、中，會(huì)顯示當(dāng)前選中文件的URL地址。4）在“相對(duì)于”選項(xiàng)后的文本框下拉列表中，可以選擇文件URL地址的類型。選擇文檔，則使用相對(duì)地址；選擇站點(diǎn)根目錄，則使用基于根目錄的地址。選擇預(yù)覽圖像復(fù)選框，則可以在對(duì)話框右邊預(yù)覽圖像。5）選定圖像文件后，單擊確定按鈕，即可將圖像插入到頁面中。如果選擇的圖像沒有在本地站點(diǎn)的目錄中，則會(huì)出現(xiàn)如圖2-39所示對(duì)話框，詢問是否要將該圖像文件復(fù)制到你的本地站點(diǎn)中。單擊“是”，則圖像被復(fù)制到站點(diǎn)目錄中，同時(shí)會(huì)出現(xiàn)一個(gè)對(duì)話框，提示從站點(diǎn)中選擇目錄。圖2-39詢問是否將圖像復(fù)制到本地站點(diǎn)將圖像復(fù)制到站點(diǎn)中后，頁面中引用的是位于站點(diǎn)中的圖像文件，如果不希望復(fù)制圖像 文件，則

9、單擊“否”按鈕，如果圖像位于站點(diǎn)目錄之外，可能會(huì)造成網(wǎng)頁無法正常瀏覽。在文檔窗口中插入圖像后，就會(huì)將該圖像的原始大小顯示出來。如圖 2-40所示。圖2-40在頁面中插入圖片0.3設(shè)置圖像屬性僅僅將圖像插入網(wǎng)頁，并不能達(dá)到正確使用圖像的目的。只有了解了圖像的屬性以及如 何設(shè)置修改這些屬性，才能創(chuàng)建出圖文并茂的網(wǎng)頁。插入圖像以后在屬性面板中可以查看圖像的所有屬性，并對(duì)其進(jìn)行修改。在文檔窗口選 擇一幅圖像，此時(shí)屬性檢查器顯示該圖像的基本屬性。如圖 2-41所示。圖2-41圖像屬性面板若要設(shè)置圖像屬性，則在選擇圖像后，執(zhí)行以下操作：.給圖像命名在屬性面板的左上角顯示當(dāng)前圖像的縮略圖，使用縮略圖下面的文

10、本框設(shè)置圖像名稱，以便在使用 Dreamweaver行為（例如 交換圖像”）或腳本撰寫語言（例如 JavaScript或 VBScript ）時(shí)可以引用該圖像。.改變圖像大小寬”和 高”以像素為單位指定圖像的寬度和高度。在頁中插入圖像時(shí)，Dreamweaver自動(dòng)用圖像的原始尺寸更新這些文本框。這里我們更改是圖像顯示的寬度和高度，圖像文件的真正大小是不變，只是它在頁面中 的顯示被進(jìn)行了縮放。所以這不會(huì)縮短下載時(shí)間，因?yàn)闉g覽器在縮放圖像前會(huì)下載所有圖像 數(shù)據(jù)。若要縮短下載時(shí)間并確保所有圖像實(shí)例以相同大小顯示，請(qǐng)使用圖像編輯應(yīng)用程序縮 放圖像。.改換圖像在屬性檢查器中 源文件”可以指定圖像資源的

11、URL路徑。若需要替換圖片，可以單擊右 邊的文件夾圖標(biāo)打開一個(gè)對(duì)話框，然后從磁盤上選擇文件，或者直接鍵入圖像的路徑。.圖像超鏈接鏈接”指定圖像的超鏈接。在文本框中輸入圖像超鏈接的URL地址，此時(shí)圖像被設(shè)置為一個(gè)超級(jí)鏈接。在瀏覽器中，單擊該圖像，即可跳轉(zhuǎn)到相應(yīng)的位置上。同樣，通過單擊右邊 的文件夾圖標(biāo)，可以打開一個(gè)對(duì)話框，從磁盤上選擇要鏈接是對(duì)象；通過拖動(dòng)該文本框右邊 的指向文件”圖標(biāo)可，也可以提取相應(yīng)的 URL鏈接路徑。（有關(guān)創(chuàng)建鏈接的信息將在后面的章節(jié)中詳細(xì)敘述）.給圖像加上替代文本替代”指定只顯示文本的瀏覽器或已設(shè)置為手動(dòng)下載圖像的瀏覽器中代替圖像顯示的替 代文本。在屬性檢查器中“替代”文

12、本框中輸入圖像的文本說明。圖像替代文本起到了兩個(gè)作用。一是當(dāng)鼠標(biāo)移動(dòng)到這些圖像上時(shí)，如果這個(gè)圖像加上了 替代文本，瀏覽器可以在鼠標(biāo)指針右下方彈出一個(gè)黃底的說明框，為瀏覽者提供提示。二是 當(dāng)瀏覽器禁止顯示圖片時(shí)，如果給圖像加上了替代文本，可以在圖像位置顯示出這些文本。.為圖像定義樣式單擊屬性檢查器中“類”后面的下拉列表可以從已定義的樣式中選擇為圖像定義的樣式。.編輯圖像在屬性檢查器中編輯這里集合了一些常用的圖片編輯工具，其實(shí)是調(diào)用了Fireworks的圖片編輯功能，這是 Dreamweaver MX 2004新增的功能。如圖 2-42所示。編輯回望回6圖2-42圖片編輯按鈕其中，按鈕從左至右依次

13、為：-&!使用Fireworks編輯圖像：點(diǎn)擊后可以調(diào)出Fireworks編輯窗口，進(jìn)行圖像編輯。到I在Fireworks中優(yōu)化：打開 Fireworks的優(yōu)化窗口，進(jìn)行圖像的優(yōu)化。 （關(guān)于Fireworks的編輯與優(yōu)化請(qǐng)參考 Fireworks相關(guān)書籍，這里不詳述）國裁切圖像：使用內(nèi)置的裁切工具進(jìn)行圖像的裁切。修剪圖像的大小，從所選圖像中刪除不需要的區(qū)域。圖2-41裁切圖像留 重新取樣：單擊此按鈕后，如果把圖像寬度和高度變小后，可以重新采樣，使圖像本身文件尺寸變小。如圖2-42所示圖2-42圖像重新采樣前后1調(diào)整亮度和對(duì)比度：單擊此按鈕，或執(zhí)行“修改/圖像/亮度/對(duì)比度”命令，彈出如圖2-4

14、3所示亮度對(duì)比度對(duì)話框，分別拖動(dòng)滑塊來調(diào)整圖像的亮度和對(duì)比度。值的范圍從-100100。亮度。寸比度”修改圖像中像素的亮度或?qū)Ρ榷?，這將影響圖像的高亮顯示、陰影和中間色調(diào)。修正過暗或過亮的圖像時(shí)通常使用亮度/對(duì)比度”。圖2-43調(diào)整亮度對(duì)比度Al銳化圖像：銳化將增加對(duì)象邊緣的像素的對(duì)比度，從而增加圖像清晰度或銳度。擊圖像屬性檢查器中的銳化”按鈕Al,或者執(zhí)行“修改/圖像/銳化”命令，將彈出如圖2-44所示對(duì)話框。可以通過拖動(dòng)滑塊控件或在文本框中輸入一個(gè)0到10之間的值，來指定Dreamweaver應(yīng)用于圖像的銳化程度。圖像銳化前后的效果對(duì)比如圖2-45所示。圖2-44銳化圖像圖2-45圖像銳化

15、前后的效果.為圖像創(chuàng)建鏈接熱區(qū)2-46所示，則一個(gè)矩在圖像屬性檢查器中“地圖”后面的文本框中輸入圖像映像的名稱，用巨型、圓形、多 邊形工具可以在一幅圖像上創(chuàng)建多個(gè)鏈接熱區(qū)。例如選擇地圖右下角的矩形工具，在圖像上 繪制一個(gè)矩形熱區(qū)，在屬性檢查器中鏈接文本框后輸入鏈接地址，如圖形鏈接熱區(qū)創(chuàng)建完成，預(yù)覽時(shí)，單擊該熱區(qū)即可跳轉(zhuǎn)到該熱區(qū)所連鏈接的內(nèi)容上去。.設(shè)置圖像邊距選中圖像后，在圖 2-41所示的圖像屬性檢查器上“垂直邊距”和“水平邊距”后的文本 框中輸入合適的參數(shù)可以設(shè)置圖像垂直方向和水平方向的邊距。.設(shè)置圖像超鏈接的目標(biāo)窗口如果為圖像設(shè)置了超鏈接，則在圖像屬性檢查器上“目標(biāo)”后的下拉列表中選擇設(shè)

16、置鏈接目標(biāo)端點(diǎn)文檔的打開位置。目標(biāo)”是指鏈接的頁面載入的框架或窗口。當(dāng)前框架集中所有框架的名稱都顯示在 目標(biāo)”列表中。也可選用下列保留目標(biāo)名：_blank將鏈接的文件載入一個(gè)未命名的新瀏覽器窗口中。_parent將鏈接的文件載入含有該鏈接的框架的父框架集或父窗口中。如果包含鏈接的框 架不是嵌套的，則鏈接文件加載到整個(gè)瀏覽器窗口中。_self將鏈接的文件載入該鏈接所在的同一框架或窗口中。此目標(biāo)是默認(rèn)的，所以通常不需要指定它。_top將鏈接的文件載入整個(gè)瀏覽器窗口中，因而會(huì)刪除所有框架。.設(shè)置低分辨率圖像用圖像處理工具制作兩個(gè)圖像，其中一個(gè)是瀏覽器最終顯示的圖像，另一個(gè)是它是低分 辨率圖像或者是灰

17、度圖像，把它們都保存在站點(diǎn)文件夾下。在頁面中插入需要的圖像后，在 屬性檢查器上“低解析度源”文本框后的瀏覽文件按鈕，選中低分辨率圖像，確認(rèn)。這樣瀏 覽者在瀏覽網(wǎng)頁時(shí)，低分辨率圖像就最為載入主圖像的縮略圖，它們?cè)谥鲌D像被載入前先被 顯示，因?yàn)樗鼈兊姆直媛实?，所以文件很小，顯示很快，便于瀏覽者快速了解要顯示的圖像 到底是什么樣子的。.增加圖像邊框在圖像屬性檢查器上“邊框”后的文本框內(nèi)輸入邊框的寬度，以象素為單位，可以為圖像增加邊框，不輸入或輸入為0表示沒有邊框。.對(duì)齊圖像可以將圖像與同一行中的文本、另一個(gè)圖像、插件或其它元素對(duì)齊。還可以設(shè)置圖像的 水平對(duì)齊方式。在屬性檢查器中“對(duì)齊”下拉列表中設(shè)置

18、該圖像的對(duì)齊屬性?？梢栽O(shè)置該圖 像相對(duì)于同一段落或行中的其它元素的對(duì)齊方式。0.4設(shè)置交換圖像創(chuàng)建鼠標(biāo)經(jīng)過圖像鼠標(biāo)經(jīng)過圖像是一種在瀏覽器中查看并使用鼠標(biāo)指針移過它時(shí)發(fā)生變化的圖像。我們?yōu)g 覽網(wǎng)站時(shí)經(jīng)?？梢钥吹竭@樣一種情況，當(dāng)鼠標(biāo)移到某一圖像時(shí)，圖像變成了另一幅圖像，當(dāng) 鼠標(biāo)移開時(shí)，又恢復(fù)成原來的圖像。我們把這種圖像為鼠標(biāo)經(jīng)過圖像。若要插入鼠標(biāo)經(jīng)過圖像，必須準(zhǔn)備兩幅圖像：主圖像（當(dāng)首次載入頁時(shí)顯示的圖像）和 次圖像次圖像（當(dāng)鼠標(biāo)指針移過主圖像時(shí)顯示的圖像）。鼠標(biāo)經(jīng)過圖像中的這兩個(gè)圖像應(yīng)大小相等；如果這兩個(gè)圖像大小不同，Dreamweaver將自動(dòng)調(diào)整第二個(gè)圖像的大小以匹配第一個(gè)圖像的屬性。若要在

19、網(wǎng)頁中實(shí)現(xiàn)創(chuàng)建鼠標(biāo)經(jīng)過圖像效果，可以按照如下方法進(jìn)行操作：1）利用處理工具創(chuàng)建兩幅圖像，一幅主圖像，一幅次圖像。2）在 文檔”窗口中，將插入點(diǎn)放置在要顯示鼠標(biāo)經(jīng)過圖像的位置。3）在插入”欄中，選擇 常用”，然后單擊 鼠標(biāo)經(jīng)過圖像”圖標(biāo)仄 或直接將 鼠標(biāo)經(jīng)過圖 像”圖標(biāo)拖到 文檔”窗口中的所需位置，或者執(zhí)行“插入/圖像對(duì)象/鼠標(biāo)經(jīng)過圖像”命 令，彈出如圖2-47所示 插入鼠標(biāo)經(jīng)過圖像”對(duì)話框，依次填寫過程。圖2-47插入鼠標(biāo)經(jīng)過圖像對(duì)話框4）設(shè)置完畢，按下確定按鈕，確認(rèn)操作，即可在文檔中插入鼠標(biāo)經(jīng)過圖像效果。5）預(yù)覽鼠標(biāo)經(jīng)過效果。在文檔窗口是不能看到鼠標(biāo)經(jīng)過圖像的效果的。要看效果可以執(zhí)行“文件/在瀏覽器中預(yù)覽”命令，或按 F12鍵，啟動(dòng)瀏覽器，在瀏覽器中，將鼠 標(biāo)指針移過原始圖像，顯示應(yīng)切換到鼠標(biāo)經(jīng)過圖像。如圖 2-48所示。利用行為創(chuàng)建交換圖像交換圖像”動(dòng)