官术网_书友最值得收藏!

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

主站蜘蛛池模板: 嘉善县| 德令哈市| 炉霍县| 厦门市| 锡林浩特市| 崇义县| 松溪县| 遵化市| 同德县| 邵东县| 玛纳斯县| 眉山市| 潮州市| 全南县| 吐鲁番市| 微山县| 庆城县| 台前县| 洛扎县| 兰西县| 宜春市| 博湖县| 庐江县| 秭归县| 平昌县| 社旗县| 廉江市| 雷山县| 蒙自县| 夏河县| 交城县| 明光市| 安庆市| 吕梁市| 江孜县| 沅陵县| 桂东县| 无为县| 左云县| 察隅县| 桃园县|