如何向網頁中插入圖片？

眾所周知，網頁要想多姿多彩，必須的具備豐富的元素類型。那么我們的網頁中除了可以出現文字這種常見的網頁元素，還可以出現哪些種類的網頁元素呢？這就主要包含圖片，音頻，視頻。在之前的章節里面，老師曾經帶領過大家一同感受過 Audio Vedio 等標簽的特色。

今天這一節知識點中，老師將帶領大家學習網頁中有關圖片的一些知識，方便大家以后能熟練的利用 Dreamweaver CC 2018 在自己設計的網頁中插入圖片這種類型的元素。這一節的學習中，我們將為大家主要從兩個角度去講解圖片的在網頁中的使用。一個是為網頁背景設置圖片，一個是為網頁中添加圖片。這里面尤其是為網頁中添加鼠標經過圖片，是同學們必須要好好掌握的。

1. 將網頁背景更換為圖片

總的來說，將網頁的背景更換為圖片的操作并不復雜，甚至有一些“機靈”的同學可以“無師自通”。下面就讓老師來帶領大家一步一步地操作。

首先打開桌面上的 Dreamweaver CC 2018 程序，第一步，我們先按照老樣子，新建一個空白的 HTML 文檔。這個過程老師就一筆帶過了，這個話題已經是老生常談了。

第二步，我們需要點擊菜單欄中的文件，在彈出的下拉列表中選擇頁面屬性，如下面的圖片所示。

點擊頁面屬性后我們可以看到下面圖片所示的頁面屬性設置界面：

第三步，我們要點擊圖片中的瀏覽按鈕，選擇事先準備好的背景圖片，選擇好之后，點擊確定，觀察頁面效果，就像下面的圖片一樣。

2. 為網頁添加鼠標經過圖片

網頁的世界中，總少不了形形色色的圖片。甚至大部分你看起來不像是的圖片的東西，比如有特效，有動畫的“好似”視頻的網頁元素，其實都用了某種格式的圖片。

而在現代網頁中一種非常常見的網頁圖片元素就是鼠標經過圖像，可能從代碼角度并沒有這個專有名詞，而在 Dreamweaver CC 2018 中就是有這么一種設置，可以輕松的幫助我們設置鼠標經過圖像。那么這個到底是一個什么樣的圖像效果呢？

簡單來說，就是在一張原有的網頁中的圖片的基礎上，當鼠標移動到這張原有的圖片的時候，原有的圖片的位置就顯示第二個圖片了。而當鼠標一旦離開第二個圖片，又會顯示原有的第一張的圖片，這種看似動態的效果，其實在網頁中非常常見，Dreamweaver CC 2018 的操作原理是為我們封裝，打包了一個 function 函數。沒錯，就是使用了 Javascript 。

而我們在使用和設置這個功能的時候，全然不用估計自己寫不寫的出來 Javascript 函數，在這個擦作里，我們大家不會寫 Javascript 函數都完全沒有關系，所以大家不要對這一節的學習有任何的心理負擔，老師不會提，也更不會講解 Javascript 函數的相關知識。我們今天就單單談這個功能在 Dreamweaver CC 2018 中的實現。這就是我們今天這一節要著重給大家講解的東西。

第一步：先打開桌面上的 Dreamweaver CC 2018 。對，沒錯，雙擊 DW！??！

第二步：老生常談的話題，新建一個空白的 HTML 文檔。

第三步：這一步就是我們最關鍵的一步，也是大家要重點記憶和跟著操作的一步。首先我們點擊菜單欄中的插入，在插入菜單彈出的下拉菜單欄中，選擇 HTML 。從下面的圖片中可以看到，選擇 HTML 中，彈出的下一級菜單列表中有一個設置鼠標經過圖像選項?。。?這里就是我們要點擊的，發現這個選項之后，單擊它。

第四步：點開鼠標經過圖像后的彈出界面如下圖所示，我們發現在這個設置界面中，有一個原始圖像選項，有一個鼠標經過圖像選項。分別為這兩個圖片選擇本地的兩張不同的圖片后，就可以完成我們鼠標經過圖像的設置了。具體是什么效果呢？請看下面你的動態圖片。

怎么樣？這種特效是不是在網頁中似曾相識？也許你在較大體積的圖片中不常見，但是比如一些小的按鈕，鼠標一劃過，就由方的變成圓的，或由三角的變成圓形。這種小地方特別容易使用到我們今天講的鼠標經過圖像的控制。

3. 小結

本節為大家介紹了圖片在網頁中使用圖片元素的方法和技巧。說實話，網頁中只有圖片這一種元素真的是不夠，但又不能沒有。萬丈高樓平地起，圖片只是作為我們學習的基礎來學習。后期我們肯定還會涉及到視頻和音頻的更多知識。所以在這里先給大家點信息，不然大家可能會誤會地以為我們今后的網頁都是由文字和圖片構成的。

其次，本節的知識點操作性的東西比較多，大家需要一個一個步驟緊跟老師引導的文字步驟。當然，大家在努力的跟進學習進度的同時，也可以適當的發揮自己的“天賦”。創造一些屬于自己的樣式設置，屬性設置。如果缺乏素材，大家可以去互聯網上下載一些合適的圖片。如果缺乏屬性參考，大家可以去慕課網的其他前段課程中補習更多的知識，給自己充充電。

本屆知識點中，重要的內容很多，幾乎都是必須會的。包括網頁背景圖片的設置，網頁中圖片的插入。
那么難點又是什么呢？本節的難點主要是在網頁中靈活地使用圖片元素。同學們要知道，合適的圖片應該出現在合適的地方。合適的效果要用在符合用戶體驗的地方。因此，鼠標經過圖像的設置和靈活運用是本節的難點。同學們在課下要反復跟著教程中的操作軌跡操作。