網(wǎng)頁設計第3章

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

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

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

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

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