CSS 美化網(wǎng)頁進(jìn)階

在之前的學(xué)習(xí)中，我們大致掌握了 CSS 的幾種使用方式，以及結(jié)合 Dreamweaver CC 2018 如何使用 CSS。那么今天這一節(jié)呢，我們的學(xué)習(xí)目的是為了讓大家更為熟練的在網(wǎng)頁中添加自己的想要的 CSS 樣式。在這一節(jié)中我們其中一個(gè)核心的知識點(diǎn)，就是熟練掌握在一個(gè)新建的頁面下，添加各種我們想要添加的各種元素，包括但不限于 DIV。

通過這一節(jié)的學(xué)習(xí)，同學(xué)們應(yīng)該可以熟練的掌握在 Dreamweaver CC 2018 中使用其自帶的插入功能完成對頁面的添彩。當(dāng)然，除此之外，我們這節(jié)知識點(diǎn)中，還將教會大家設(shè)置用于裝飾美化網(wǎng)頁的小技能。比如：設(shè)置網(wǎng)頁的背景顏色，設(shè)置網(wǎng)頁的背景圖片等等。下面就請大家跟隨慕課 Wiki 的腳步，一起來完成本節(jié)內(nèi)容的學(xué)習(xí)吧！

1. 使用背景為頁面增添色彩

1.1 知識背景

在現(xiàn)在的網(wǎng)頁中，我們經(jīng)常能看到的網(wǎng)頁往往都不是白色背景的網(wǎng)頁。它們當(dāng)中有的是圖片，有的是純色，甚至還有一些是漸變顏色。采用顏色的色彩飽滿，采用背景圖案的更是充滿了視覺沖擊力。網(wǎng)頁的背景設(shè)置，在網(wǎng)頁設(shè)計(jì)中其實(shí)已經(jīng)有了很深厚的歷史。以至于今天大家見到的各種網(wǎng)頁，幾乎都有著經(jīng)過平面設(shè)計(jì)師或者 PS 老師專門設(shè)計(jì)制作的網(wǎng)頁背景。

那么如何在網(wǎng)頁中設(shè)置背景顏色，就是我們今天要著重解決的疑惑。當(dāng)然，我們的學(xué)習(xí)，必須圍繞著 Dreamweaver CC 2018 的操作與使用。不然就容易本末倒置失去我們學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的初衷。而且，這也是我們這門課程最想帶給大家的學(xué)習(xí)體驗(yàn)。

1.2 在 Dreamweaver CC 2018 中設(shè)置背景顏色

首先，基于我們之前熟悉的 Dreamweaver CC 2018 操作可以知道，要改變網(wǎng)頁元素的屬性，基本上都是通過 CSS 設(shè)計(jì)器來完成的。因?yàn)?CSS 設(shè)計(jì)器中提供了豐富的屬性，而且可以非常輕松地展現(xiàn)在我們面前。并且交互方式十分直接，直接去屬性的名字上雙擊就可以編輯或者更改相關(guān)的屬性。

同理地，背景也是一種頁面元素的屬性。我們可以十分輕松地通過 Dreamweaver CC 2018 的相關(guān)操作，對其進(jìn)行設(shè)置。

下面是我們的一個(gè)操作步驟：

第一步：我們新建一個(gè)網(wǎng)頁文件，比如HTML文件，新建文件的操作在這里就不做過多的贅述了。因?yàn)槲覀冊谥暗恼鹿?jié)中有詳細(xì)講解過。通過多個(gè)小節(jié)的練習(xí)，想必對于大家已經(jīng)不是什么問題了。

第二步：我們創(chuàng)建一個(gè)DIV，具體操作和上一節(jié)知識點(diǎn)中的類似操作一致。首先我們在 CSS 設(shè)計(jì)器左側(cè)的插入選項(xiàng)中選擇 DIV 。然后我們設(shè)置 DIV 的 id 或者 class 屬性值。設(shè)置二者的目的只有一個(gè)：就是為了讓 CSS 選擇器能夠找到這個(gè)元素。只有 CSS 選擇器能夠通過我們設(shè)置的標(biāo)志找到頁面元素，才有可能對其元素屬性進(jìn)行編輯或者更改。比如可以給新建立的元素的 ID 設(shè)置為 wikitest 。如圖所示：

第三步：我們在 CSS 設(shè)計(jì)器中找到我們剛剛創(chuàng)建的這個(gè)元素。在選擇器面板中點(diǎn)擊這個(gè)元素的名字 wikitest 。我們可以看到屬性面板很自然的就彈了出來。在屬性面板中，我們滑動(dòng)鼠標(biāo)的滾輪，一直往下滑。你會看到一個(gè)背景的漢字。在它的的下面是一個(gè)英文單詞–background-color，這個(gè)就是網(wǎng)頁的背景顏色設(shè)置屬性。我們通過點(diǎn)擊其后面的小正方形，就可以以可視的方式來選擇你想要設(shè)置的網(wǎng)頁背景顏色。

1.3 在 Dreamweaver CC 2018 中設(shè)置網(wǎng)頁背景圖片

光有了顏色，可能讓大家覺得自己的網(wǎng)頁距離現(xiàn)代化的商業(yè)網(wǎng)站還是有一定距離。別擔(dān)心，這就把更重要的知識點(diǎn)給同學(xué)們講完。

那么在仿照1.2中第一二步的操作步驟完成后，我們在第三個(gè)步驟中，在背景二字的下面除了–background-color 之外，還會有一個(gè)英文單詞叫–background-image。

英文水平比較好的同學(xué)們應(yīng)該已經(jīng)明白了，此處就是設(shè)置網(wǎng)頁背景圖片的地方。那么接下來，我們可以看到在 background-image 下面，有一個(gè)填寫 url 的地方，同學(xué)們只要在這里選擇你已經(jīng)為這個(gè)網(wǎng)頁準(zhǔn)備好的網(wǎng)頁背景圖片資源，就可以在你的網(wǎng)頁中設(shè)置好背景圖片了。

2. 用 CSS 美化頁面

這個(gè)知識點(diǎn)中的內(nèi)容對于大家來說并不陌生。其操作主要是對新建頁面添加元素并設(shè)置 CSS 屬性。與以往不同的是這次我們要一貫式的完成這個(gè)操作。這一個(gè)知識點(diǎn)是對之前核心知識點(diǎn)的一個(gè)復(fù)習(xí)總結(jié)和強(qiáng)化，對于有足夠基礎(chǔ)的同學(xué)可以跳過這個(gè)知識點(diǎn)，繼續(xù)后續(xù)新的章節(jié)的學(xué)習(xí)。

第一步：我們要新建一個(gè)空白的 HTML 頁面。新建頁面的操作依舊不在此贅述，有遺漏或者遺忘的同學(xué)們，請去我們慕課 Wiki 之前的章節(jié)中去學(xué)習(xí)。

第二步：我們在 CSS 設(shè)計(jì)器左邊的插入選項(xiàng)中，選擇 DIV ，我們可以看到，頁面中多了一個(gè) DIV（無論是代碼視圖，還是設(shè)計(jì)視圖）。

第三步：我們要給這個(gè)這個(gè)新建的元素設(shè)置一個(gè) ID 或者 CLASS 屬性值。這里可能有些同學(xué)的腦子里可能比較蒙。元素有 ID 屬性，CLASS 屬性值。而 ID 選擇器也有各種屬性值。這些屬性的關(guān)系是怎樣的？在這里老師給大家一個(gè)統(tǒng)一的答案：它們原本都是 HTML 元素的屬性。而知識我們平時(shí)在描述或講述的時(shí)候?yàn)榱朔奖銜f成某個(gè) ID 或 CLASS 的屬性。實(shí)際上它們是沒有屬性的，有的只有頁面元素的屬性，在這里大家要懂得區(qū)分。

第四步：我們在 CSS 設(shè)計(jì)器中點(diǎn)擊選擇器面板，在里面找到剛剛命名 ID 或 CLASS 的 CSS 選擇器，在彈出的屬性面板中，設(shè)置DIV的長，寬，最大長度，最大寬度或高度等。根據(jù)我們的對 Dreamweaver CC 2018 的一個(gè)所見即所得的認(rèn)知，在我們修改完屬性之后，屏幕上對應(yīng)的設(shè)計(jì)視圖里，應(yīng)該立即就有一個(gè)相應(yīng)的屬性變化。

3. 本節(jié)小結(jié)

通過本節(jié)的學(xué)習(xí)，大家應(yīng)該可以更加熟練的掌握如何在一個(gè)網(wǎng)頁里從零到一，從無到有的建立一個(gè)頁面元素并用 CSS 美化它們。很簡單，只有每一個(gè)頁面元素的美化做到位了，整個(gè)網(wǎng)頁的美化才能到到我們想要的效果。

大家在今后的學(xué)習(xí)中，積累頁面元素的屬性設(shè)置效果也是很重要的一方面。雖然更多的時(shí)候是查閱社區(qū)或者官方提供的開發(fā)文檔，但作為一個(gè)成熟的網(wǎng)頁設(shè)計(jì)人員，更多時(shí)候要有自己的判斷，這樣無論在效率上還是效果上都會高人一等，快人一步。

網(wǎng)頁背景的設(shè)置要掌握兩個(gè)方面，適合用純色背景的場景應(yīng)用純色背景，而適合使用專用的圖片的情況下，要大膽合理的使用背景圖片。要知道，當(dāng)代的網(wǎng)頁設(shè)計(jì)已經(jīng)很少看到一個(gè)成熟的網(wǎng)頁設(shè)計(jì)作品是以一人之力完成的了，更多的是分工合作。而正在學(xué)習(xí)我們 慕課WIKI 教程的你未來就是我們的網(wǎng)頁建筑師，可能一磚一瓦并不是由我們來建造（資源文件），但我們對 Dreamweaver CC 2018 的熟悉足以讓我們建立起一個(gè)恢弘的網(wǎng)頁帝國。

本小節(jié)知識點(diǎn)中，重點(diǎn)是 進(jìn)一步熟練和鞏固用 CSS 美化網(wǎng)頁。網(wǎng)頁的背景色的設(shè)置。
本小節(jié)的難點(diǎn)是，設(shè)置好網(wǎng)頁的背景圖片。