1、 課堂講解 上機實戰 第4課 為網頁添加圖像 課堂講解 網頁圖像的格式及來源插入圖像 設置圖像屬性 圖像高級設置 網頁圖像的格式及來源GIF格式 JPEG格式 PNG格式 網頁圖像來源 GIF格式 GIF全稱為“Graphics Interchange Format”，意為可交換圖像格式，它是第一個支持網頁的圖像格式，在PC機和蘋果機上都能被正確識別。它最多支持256種顏色，可以使圖像變得容量相當小。GIF圖像可以在網頁中以透明方式顯示，還可以包含動態信息，即GIF動畫。 JPEG格式 JPEG全稱為“Joint Photographic Experts Group”，意為聯合圖像專家組，它可

2、以高效地壓縮圖片，丟失人眼不易察覺的部分圖像，使文件容量在變小的同時基本不失真，通常用來顯示顏色豐富的精美圖像。 PNG格式 PNG全稱為“Portable Network Graphics”，意為便攜網絡圖像，它是逐漸流行的網絡圖像格式。PNG格式既融合了GIF能透明顯示的特點，又具有JPEG處理精美圖像的優勢，且可以包含圖層等信息，常常用于制作網頁效果圖。 網頁圖像來源 網頁圖像的素材有很多來源，如可以使用圖形處理軟件（如Photoshop、Fireworks和FreeHand等軟件）制作；可以購買網頁素材光盤；可以從網絡上下載等。 插入圖像 直接插入 占位符插入 圖像的放大顯示 直接插入

3、 選擇插入圖像菜單命令。單擊插入欄的“常用”選項卡中的按鈕。按【Ctrl+Alt+I】鍵。 占位符插入 制作網頁時還未選定需插入的圖像，但確定了圖像大小的時候，可以使用占位符來代替圖像的方式插入到文檔中。 將圖像確定后雙擊占位符，在打開的對話框中設置后插入即可。 三、占位符1、插入占位符 （1）插入 單擊【插入】單擊【插入】【圖像對象】【圖像對象】【圖像【圖像占位符】命令占位符】命令 單擊【常用】插入欄中的圖像按鈕的小單擊【常用】插入欄中的圖像按鈕的小三角，在下拉三角，在下拉 菜單中選擇【圖像占位符】命令菜單中選擇【圖像占位符】命令（2）設置對話框）設置對話框 【名稱】：輸入當前圖像占位符的名

4、稱，必【名稱】：輸入當前圖像占位符的名稱，必須輸入字母或數字，但是須輸入字母或數字，但是 【寬度和高度】：輸入當前圖像占位符的寬【寬度和高度】：輸入當前圖像占位符的寬度和高度，單位是像素。度和高度，單位是像素。 【顏色】：選擇當前圖像占位符的顏色?！绢伾浚哼x擇當前圖像占位符的顏色。 【替換文本】：設置當鼠標指向圖像占位符【替換文本】：設置當鼠標指向圖像占位符時提示說明性的文字時提示說明性的文字 【圖像占位符】對話框【圖像占位符】對話框 插入的圖像占位符插入的圖像占位符 2、占位符屬性 選擇該圖像占位符，可以在【屬性】選擇該圖像占位符，可以在【屬性】面板中重新設置其名稱、寬高、鏈接、面板中重新

5、設置其名稱、寬高、鏈接、顏色、替代等內容顏色、替代等內容3、占位符的瀏覽設置圖像占位符的各項屬性參數之后，單擊設置圖像占位符的各項屬性參數之后，單擊【標準】工具欄中的【保存】按鈕（或者按【標準】工具欄中的【保存】按鈕（或者按【Ctrl+S】組合鍵）即可保存當前的網頁文】組合鍵）即可保存當前的網頁文件。然后按【件。然后按【F12】快捷鍵，可以在默認的】快捷鍵，可以在默認的瀏覽器中瀏覽該圖像占位符的效果。瀏覽器中瀏覽該圖像占位符的效果。 4、制作一個占位符名稱為photo，寬高分別為200*160，顏色為#000000，替換文本為“圖像”。5、占位符HTML2、圖像的基本操作（1）選擇圖片（2）復

6、制圖片 選擇圖片，單擊【標準】工具欄中的【復制】按鈕選擇圖片，單擊【標準】工具欄中的【復制】按鈕或或按【按【Ctrl+C】，把光標箭頭移動到新的位置，再單擊【粘】，把光標箭頭移動到新的位置，再單擊【粘貼】按鈕或者按【貼】按鈕或者按【Ctrl+V】即可。】即可。 （3）刪除圖片 單擊選擇圖片，然后單擊【標準】工具欄中的【剪切】單擊選擇圖片，然后單擊【標準】工具欄中的【剪切】按鈕或者按【按鈕或者按【DeI】就可以把選擇的圖片刪除】就可以把選擇的圖片刪除 。設置圖像屬性 在網頁中插入圖像后可通過屬性面板對其屬性進行修改等設置。 圖像命名 圖像大小 編輯圖片 源文件設置 文本說明 圖像與文本的對齊 圖

7、像邊距 圖像邊框 圖像命名 為了在使用Dreamweaver行為（如交換圖像）或腳本撰寫語言（如JavaScript或VBScript）時可以引用該圖像，可在屬性面板的“圖像”文本框中為圖像命名。 圖像大小 在Dreamweaver 8中插入圖像后系統會自動將圖像的原始大小顯示在“寬”和“高”文本框（以像素為單位）中。 編輯圖片 在網頁中選擇圖像之后，單擊屬性面板中的按鈕，打開圖像處理軟件，對圖像進行處理。如果安裝了Fireworks，那么Fireworks將被默認為圖像處理軟件。如果沒有安裝，用戶也可自己設置使用其他軟件中處理圖像。 源文件設置 在屬性面板的“源文件”文本框中顯示了圖像的保存

8、路徑，如果要重新插入一幅新圖像，可以在選取圖像后的屬性面板中的“源文件”文本框中重新輸入要插入圖像的地址，或單擊右側后的 按鈕，在打開的“選擇圖像源文件”對話框中重新選擇需要的圖像。 文本說明 在選取圖像后的屬性面板的“替換”下拉列表框中可以輸入圖像的文本說明。 圖像與文本的對齊 選取圖像后，在屬性面板的“對齊”下拉列表框中可設置處于同一行上的圖像與文本的對齊方式。 圖像邊距 選取圖像在屬性面板的“垂直邊距”和“水平邊距”文本框中可以設置圖像與頁面上方和左側之間的距離，也可以設置圖像與其他網頁元素之間的距離。 圖像邊框 選取圖像后，在屬性面板的“邊框”文本框中可以設置圖像邊框的寬度，單位為像素

9、，“0”表示無邊框。 圖像高級設置 鼠標經過圖像設置 插入Fireworks HTML對象 鼠標經過圖像設置 鼠標經過圖像是一種在瀏覽器中查看網頁時，鼠標光標經過該圖像時，圖像發生變化的動態圖像。 鼠標經過圖像 光標定位，【插入】-【圖像對象】-【鼠標經過對象】，打開對話框，設置如下：【圖像名稱】：圖像的名稱?！緢D像名稱】：圖像的名稱。【原始圖像】：正常顯示狀態下的初始圖【原始圖像】：正常顯示狀態下的初始圖像文件。像文件?！臼髽私涍^圖像】：鼠標經過圖像時的圖【鼠標經過圖像】：鼠標經過圖像時的圖像文件。像文件?！绢A載鼠標經過圖像】：提前將第二幅圖【預載鼠標經過圖像】：提前將第二幅圖像下載像下載【

10、替代文本】：當鼠標指向圖像時出現的【替代文本】：當鼠標指向圖像時出現的提示信息內容。提示信息內容?！景聪聲r，前往的【按下時，前往的URL】：當鼠標單擊】：當鼠標單擊該圖像時，會自動打開指定的網址或網該圖像時，會自動打開指定的網址或網頁文件等。頁文件等。注：（注：（1）圖像大?。ǎ﹫D像大小（2）命名）命名插入Fireworks HTML對象 Macromedia公司的圖形處理軟件Fireworks優化后的圖像和HTML文件。使用Dreamweaver可直接插入保存到所需的Dreamweaver站點文件夾中。 4、圖像的高級操作（1）編輯圖像：用fireworks編輯網頁中的圖像（2）優化圖像：點

11、擊屬性面板“使用fireworks優化”，或者執行【命令】-【在fireworks中優化圖像】，從中設置圖像的格式、優化圖像的品質、調整圖像的平滑度。（3）屬性面板中【裁剪】按鈕，可以修改圖像大小（4）屬性面板中【重新取樣】按鈕，可以對已經編輯過的圖像進行保存，關閉后將不能還原。（5）屬性面板中【亮度對比度】按鈕，可以調整圖像的明暗度。（6）屬性面板中【銳化】按鈕，可以對圖像進行銳化處理。圖像HTMLHspace水平邊距 vspace垂直邊距Border邊框 .實例1、制作鼠標經過圖像2、創建網站相冊（1）將在相冊上顯示的所有圖像放置在一個文件夾中（最好是英文名），該文件夾不需要放在站點文件夾

12、下。2、執行【命令】-【創建網站相冊】3、輸入標題與副標題4、通過【瀏覽】按鈕找到目標文件夾5、再通過下一個【瀏覽】按鈕找到站點下的圖像文件夾6、全部設置好后單擊【確定】按鈕單項選擇題在Dreamweaver中，要創建網站相冊在哪個菜單項中:（A）insert(插入)項（B）Modify(修改)項（C）Command(命令)項（D）Site(站點)項單項選擇題在Dreamweaver中，在圖像屬性面板的V Space和H Space欄中是設置什么的:（A）圖象的邊距（B）圖象的大?。–）圖象的顏色（D）以上都不是單項選擇題在Dreamweaver中，下面關于調用Fireworks優化圖像窗口說法錯誤的是：（A）可以選擇圖像格式（B）不可以選擇透明方式（C）可以修改網頁圖像的大?。―）在預覽窗口中可以將網頁圖像放大和縮小顯示，或是使用多窗口顯示多項選擇題在dreamweaver中，用fireworks優化圖像后能保存幾種格式？（A）GIF（B）PNG（C）JPEG（D）BMP多項選擇題在dreamw