- 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所示。