- Dreamweaver+jQuery移動網頁設計從新手到高手
- 張雪玲 劉琳
- 1434字
- 2020-09-18 10:26:15
3.2 在網頁中插入圖像
前面介紹了網頁中常見的3種圖像格式，下面就來學習如何在網頁中插入圖像。在插入圖像前，一定要有目的地選擇圖像，最好運用圖像處理軟件對圖像進行美化，否則插入的圖像可能會不美觀。
3.2.1 插入普通圖像
圖像是網頁構成中最重要的元素之一，美觀的圖像會為網站增添生命力，同時也會加深人們對網站的印象。下面通過如圖3-1所示的實例講述在網頁中插入圖像方法，具體操作步驟如下。
圖3-1
01打開網頁文檔，如圖3-2所示。
圖3-2
02將光標置于要插入圖像的位置，執行“插入”|images命令，彈出“選擇圖像源文件”對話框，在該對話框中選擇圖像tu.jpg，如圖3-3所示。
圖3-3
03單擊“確定”按鈕，插入圖像，如圖3-4所示。
★提示★
如果選中的文件不在本地網站的根目錄下，則彈出如下圖所示的對話框，系統要求用戶復制圖像文件到本地網站的根目錄，單擊“是”按鈕，此時會彈出“拷貝文件為”對話框，讓用戶選擇文件的存放位置，可選擇根目錄或根目錄下的任何文件夾，這里建議新建一個名稱為images的文件夾，今后可以把網站中的所有圖像都放入該文件夾中。
圖3-4
★高手支招★
使用以下方法也可以插入圖像。
· 執行“窗口”|“資源”命令，打開“資源”面板，在該面板中單擊
按鈕，展開圖像文件夾，選定圖像文件，然后拖至網頁中合適的位置。
· 單擊HTML插入欄中的
按鈕，彈出“選擇圖像源文件”對話框，在該對話框中選擇需要的圖像文件。
3.2.2 插入鼠標經過圖像
“鼠標經過圖像”就是，在瀏覽器中查看網頁時，當鼠標指針經過圖像時，該圖像就會變成另外一幅圖像；當鼠標移開時，該圖像又會恢復原來的圖像。這種效果在Dreamweaver中可以非常方便地做出來。
鼠標未經過圖像時的效果如圖3-5所示，當光標經過圖像時的效果如圖3-6所示，具體操作步驟如下。
01打開網頁文檔，如圖3-7所示。
圖3-5
圖3-6
圖3-7
02將光標置于插入鼠標經過圖像的位置，執行“插入”|HTML|“鼠標經過圖像”命令，彈出“插入鼠標經過圖像”對話框，如圖3-8所示。
圖3-8
★知識要點★
“插入鼠標經過圖像”對話框中可以進行如下設置。
· 圖像名稱：設置鼠標經過圖像的名稱。
· 原始圖像：鼠標經過圖像的原始圖像，在其后的文本框中輸入此原始圖像的路徑，或單擊“瀏覽”按鈕，打開“原始圖像”對話框，在該對話框中選擇圖像。
· 鼠標經過圖像：用來設置鼠標經過圖像時，原始圖像替換成的圖像。
· 預載鼠標經過圖像：選中該復選框，網頁打開時就預下載替換圖像到本地硬盤。當鼠標經過圖像時，能迅速切換到替換圖像；如果取消該選項，當鼠標經過該圖像時才會下載替換圖像，效果可能會出現不連貫的現象。
· 替換文本：用來設置圖像的替換文本，當圖像不顯示時，顯示這個替換文本。
· 按下時，前往的URL：用來設置鼠標經過圖像應用的超鏈接。
★提示★
在HTML插入欄的菜單中執行“鼠標經過圖像”命令
，彈出“插入鼠標經過圖像”對話框，也可以插入鼠標經過圖像。
03單擊“原始圖像”文本框右側的“瀏覽”按鈕，在彈出的“原始圖像：”對話框中選擇相應的圖像，如圖3-9所示，單擊“確定”按鈕。
圖3-9
04單擊“鼠標經過圖像”文本框右側的“瀏覽”按鈕，在彈出的“鼠標經過圖像：”對話框中選擇相應的圖像，如圖3-10所示。
05單擊“確定”按鈕，如圖3-11所示。
06單擊“確定”按鈕，插入鼠標經過圖像，如圖3-12所示。
圖3-10
圖3-11
★提示★
在插入鼠標經過圖像時，如果不為該圖像設置鏈接，Dreamweaver將在HTML源代碼中插入一個空鏈接＃，該鏈接上將附加鼠標經過的圖像行為，如果將該鏈接刪除，鼠標經過圖像將不起作用。
圖3-12
07保存文檔，按F12鍵在瀏覽器中預覽，鼠標未經過圖像時的效果如圖3-5所示，鼠標經過圖像時的效果如圖3-6所示。