CSS 美化網頁進階

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

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

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

1.1 知識背景

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

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

1.2 在 Dreamweaver CC 2018 中設置背景顏色

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

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

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

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

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

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

1.3 在 Dreamweaver CC 2018 中設置網頁背景圖片

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

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

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

2. 用 CSS 美化頁面

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

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

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

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

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

3. 本節小結

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

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

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

本小節知識點中，重點是 進一步熟練和鞏固用 CSS 美化網頁。網頁的背景色的設置。
本小節的難點是，設置好網頁的背景圖片。