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

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

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

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

1.1 知識背景

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

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

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

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

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

下面是我們的一個操作步驟：

第一步：我們新建一個網(wǎng)頁文件，比如HTML文件，新建文件的操作在這里就不做過多的贅述了。因為我們在之前的章節(jié)中有詳細講解過。通過多個小節(jié)的練習，想必對于大家已經(jīng)不是什么問題了。

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

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

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

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

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

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

2. 用 CSS 美化頁面

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

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

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

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

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

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

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

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

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

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