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

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

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

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

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

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

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

點(diǎn)擊頁面屬性后我們可以看到下面圖片所示的頁面屬性設(shè)置界面：

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

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

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

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

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

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

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

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

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

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

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

3. 小結(jié)

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

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

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