如何向網(wǎng)頁中插入圖片？

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

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

1. 將網(wǎng)頁背景更換為圖片

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

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

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

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

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

2. 為網(wǎng)頁添加鼠標經(jīng)過圖片

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

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

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

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

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

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

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

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

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

3. 小結(jié)

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

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

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