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

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

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

3、包含了三方面的含義：一是指合適的，用一幅毫不相干的圖像只會起到畫蛇添足的作用；二是指正確的，用一個文件量很大的圖像或者格式錯誤的圖像，只會讓瀏覽者對你的網(wǎng)頁火冒三丈；三是指漂亮的。0.1 認(rèn)識圖像要在文檔中正確使用圖像，首先要了解一些Internet 相關(guān)的圖像知識。由于圖像在磁盤中的壓縮方式和存儲方式的不同，加上許多圖像處理軟件又有自己專門的格式，所以圖像的標(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ò)上流行的另一個原因是它支持透明背景，所以它在網(wǎng)頁中經(jīng)常被用做項(xiàng)目符號和按鈕等希望不遮擋背景的元素。但是，由于 GIF動畫最高只支持 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)圖像的高級格式，這是因?yàn)镴PEG文件可以包含數(shù)百萬種顏色。隨著 JPEG文件品質(zhì)的提高，文件的大小和下載時間也會隨之增加。 通?？梢酝ㄟ^壓縮 JPEG文件在圖像品質(zhì)和文件大小之間達(dá)到良好的平衡。PNG圖像PNG （Portable Network Graphic可移植網(wǎng)絡(luò)圖形）文件格式是一種替代GIF格式的無專利權(quán)限制的格式，它包括對索引色、灰度、真彩色圖像以及alpha通道透明的支持。PNG是Macromedia Fireworks固有的文件格式。PNG文件可保留所有原始層、矢量、顏色和效果信 息（例如陰影），并且在任

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

7、用對象組上的圖像按鈕國，如圖2-37所示。此時會出現(xiàn)如圖2-38所示對話框，用戶可以從磁盤上選擇圖像文件。臼息|園園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插入圖像對話框3）選擇需要插入的圖片，在該對話框的URL文本框

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

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

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

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

12、本框中輸入圖像的文本說明。圖像替代文本起到了兩個作用。一是當(dāng)鼠標(biāo)移動到這些圖像上時，如果這個圖像加上了 替代文本，瀏覽器可以在鼠標(biāo)指針右下方彈出一個黃底的說明框，為瀏覽者提供提示。二是 當(dāng)瀏覽器禁止顯示圖片時，如果給圖像加上了替代文本，可以在圖像位置顯示出這些文本。.為圖像定義樣式單擊屬性檢查器中“類”后面的下拉列表可以從已定義的樣式中選擇為圖像定義的樣式。.編輯圖像在屬性檢查器中編輯這里集合了一些常用的圖片編輯工具，其實(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)化請參考 Fireworks相關(guān)書籍，這里不詳述）國裁切圖像：使用內(nèi)置的裁切工具進(jìn)行圖像的裁切。修剪圖像的大小，從所選圖像中刪除不需要的區(qū)域。圖2-41裁切圖像留 重新取樣：單擊此按鈕后，如果把圖像寬度和高度變小后，可以重新采樣，使圖像本身文件尺寸變小。如圖2-42所示圖2-42圖像重新采樣前后1調(diào)整亮度和對比度：單擊此按鈕，或執(zhí)行“修改/圖像/亮度/對比度”命令，彈出如圖2-4

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

15、前后的效果.為圖像創(chuàng)建鏈接熱區(qū)2-46所示，則一個矩在圖像屬性檢查器中“地圖”后面的文本框中輸入圖像映像的名稱，用巨型、圓形、多 邊形工具可以在一幅圖像上創(chuàng)建多個鏈接熱區(qū)。例如選擇地圖右下角的矩形工具，在圖像上 繪制一個矩形熱區(qū)，在屬性檢查器中鏈接文本框后輸入鏈接地址，如圖形鏈接熱區(qū)創(chuàng)建完成，預(yù)覽時，單擊該熱區(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將鏈接的文件載入一個未命名的新瀏覽器窗口中。_parent將鏈接的文件載入含有該鏈接的框架的父框架集或父窗口中。如果包含鏈接的框 架不是嵌套的，則鏈接文件加載到整個瀏覽器窗口中。_self將鏈接的文件載入該鏈接所在的同一框架或窗口中。此目標(biāo)是默認(rèn)的，所以通常不需要指定它。_top將鏈接的文件載入整個瀏覽器窗口中，因而會刪除所有框架。.設(shè)置低分辨率圖像用圖像處理工具制作兩個圖像，其中一個是瀏覽器最終顯示的圖像，另一個是它是低分 辨率圖像或者是灰

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

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

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í)行“插入/圖像對象/鼠標(biāo)經(jīng)過圖像”命 令，彈出如圖2-47所示 插入鼠標(biāo)經(jīng)過圖像”對話框，依次填寫過程。圖2-47插入鼠標(biāo)經(jīng)過圖像對話框4）設(shè)置完畢，按下確定按鈕，確認(rèn)操作，即可在文檔中插入鼠標(biāo)經(jīng)過圖像效果。5）預(yù)覽鼠標(biāo)經(jīng)過效果。在文檔窗口是不能看到鼠標(biāo)經(jīng)過圖像的效果的。要看效果可以執(zhí)行“文件/在瀏覽器中預(yù)覽”命令，或按 F12鍵，啟動瀏覽器，在瀏覽器中，將鼠 標(biāo)指針移過原始圖像，顯示應(yīng)切換到鼠標(biāo)經(jīng)過圖像。如圖 2-48所示。利用行為創(chuàng)建交換圖像交換圖像”動