定義網頁結構的方法

這一節我們將再次講述網頁設計中定義網頁結構的方法。**我們主要會講到三個知識點：居中布局，圖片邊距和自適應布局。**在這三個知識點中，有一定的實踐操作的講解，也有一些是會復習到我們之前講過的知識。這一節的實操性是有的，理論性也是有的。同學們學習的時候，注意以練代記，以理解代替想當然，在學習完畢之后可以自己搜集素材常識做一個小 Demo。

具體而言，我們會在今天的知識點中學習到如何把一個網頁元素在網頁展示中給它居中。然后我們會學習如何在 Dreamweaver CC 2018 中設置網頁中圖片的邊距。最后我們將為大家介紹當今應用很廣泛的自適應布局的理念。希望大家在學習的過程中能緊跟老師的操作，爭取在初次掌握知識的同時把知識記牢，記準！下面就讓我們開始今天的學習吧！

1. 居中頁面中的元素

1.1 網頁元素居中的意義

眾所周知，無論你是編輯過 word 文檔的同學，還是寫過論文的同學都應該知道，居中是一個很好用的工具，它會讓你的整個文檔中的內容看起來特別順眼。

一樣地，我們網頁設計中讓我們的網頁元素能夠居中，也是為了用戶在訪問我們的網站的時候，能夠更加清楚地識別到我們想要表達的信息。試想一下，如果網頁中的文字或者圖片擺放的左左右右，十分奇怪，又指望哪些人能喜歡我們制作的網頁呢？

1.2 在 Dreamweaver CC 2018 中操作居中頁面元素

首先我們還是新建一個空白的 HTML 文檔。如圖：（具體步驟這里同樣不做贅述，同學們可以翻閱之前的慕課 WIKI 章節來自行學習。）

我們新建一個DIV元素，點擊插入，點擊DIV，這里可能有同學會問到，為什么老師每次都是拿 DIV 元素作為講解？在這里統一給大家做一個解答：首先，因為 DIV 作為一個常見元素，同學們都很熟悉，為了介紹知識的連貫性，盡量采用了同學們熟悉的元素來使用，從而達到為大家講解知識的目的。其次，DIV 本身就是一個容器元素，因為它既能單獨作為一個元素來使用，又可以容納其他元素（子元素）。因此，基于上述兩點考慮，我們在更多情況下采用 DIV 來講解方便大家后續自己選擇元素的時候能夠更好的兼容。

插入完 DIV 后，我們在其中填入一段文字，這里填入文字的目的，是為了更好地讓大家識別到這個 DIV 的位置，出于同樣的目的，還為這個元素添加了背景顏色，如圖所示，我給文字添加了一個綠色的背景色。

那么如何才能達到上述圖片，讓元素居中的效果呢？我們接下來在 CSS 設計器中源中點擊加號，然后選擇在頁面中定義，然后在選擇器中點擊加號，關聯我們剛剛新建的 DIV 元素。選擇器準備好后，我們點擊選擇器，如圖所示的 #moocwiki ，在彈出的屬性面板中，我們找到 position 屬性。改變屬性的默認設置，達到居中的效果。

到此，我們就完成了元素居中的設置，應用類似方法，我們可以設置幾乎所有的 HTML 頁面元素。

2. 設置網頁中圖片的邊距

2.1 網頁中的邊距和盒模型

細心的同學可能早已發現，我們在創建多個元素的時候，元素和元素多數情況下都不是緊密挨著的。這是為什么呢？

這里就要說到元素的邊距的概念了。同時也為大家介紹前端工程師不得不懂的 CSS 盒模型。其實一個常規的網頁頁面元素，都是同時具備邊框，內邊距（上下左右各一個），外邊距（上下左右各一個）的。因為這些邊框或者邊距默認是無色的，所以我們看不到。

2.2 盒模型

在這里給大家介紹一下盒模型的概念：

盒模型，指的是以盒子的外觀屬性為類比，對照網頁設計中元素具備的 CSS 屬性，如內容，內邊距，邊框，外邊距等屬性，進而構成的一種 CSS 思維模型。

可能這樣講有點官方，但我們不妨想象一下：首先，一個元素里面肯定有它的內容，這個我們就稱為一個元素的內容（ content ）。然后按照盒模型的要求，內容外面一圈應該有一個邊框，這個邊框并不是僅僅貼在內容邊緣的，而是上下左右距離內容都有一定距離。這個上下左右都相同的距離我們稱之為內邊距。

了解了內邊距，想必聰明的同學已經猜到外邊距的含義了。沒錯，外邊距就是在元素所占網頁空間的最終外邊界到網頁邊框的距離。這就是盒模型與內容，內邊距，外邊距，邊框的關聯。同學們可以試著在瀏覽器中點擊 F12，然后在 Dom 視圖下可以參考盒模型具體信息。

2.3 盒模型的分類

這就解釋了為什么有的時候你創建的相鄰元素間時而緊密時而稀疏。在這里要提醒大家：盒模型也是分為兩種的。但普遍上我們所說的盒模型指的是 IE 盒模型和 W3C 盒模型。假如同學們只去兼容一種盒模型的話，就有概率出現在某些瀏覽器中，元素的位置出現失調。

在這里給大家解釋一下為什么會出現兩種盒模型，這主要是微軟公司和 W3C 組織針對各自希望支持的標準有不同的意見導致的。就像 HTML 標準也有很多版本一樣，好在兩種盒模型區別并不是很難掌握。那么具體有什么區別呢？

主要是元素的 width 屬性和 height 屬性不同。

• W3C 盒模型認為元素的 width 屬性和 height 屬性僅僅是 content 區域。也就是說不包括內外邊距和邊框區域。

• 而 IE 盒模型認為，元素的 width 和 height 屬性由 content 區域和內邊距加上邊框區域共同組成。這就要求大家在適配網頁的時候考慮到為 IE 做一定的適配工作。

而在瀏覽器方面，我們說的 IE 盒模型，一般指的是 IE5.5，IE6 以后的 IE 瀏覽器，而其他大多數瀏覽器默認情況下均為 W3C 盒模型，有時也叫做標準盒模型。

2.2 使用 Dreamweaver CC 2018 設置網頁中的圖片邊距

首先，要在 Dreamweaver CC 2018 種設置圖片邊距，我們要先新建一個空白 HTML 文檔。（在此不做贅述，有需求的同學們請查閱之前的慕課 WIKI 章節）

然后我們點擊插入，選擇圖像/圖片，插入一張我們事先準備好的圖片。然后我們可以看到圖片出現在了網頁中，但是并沒有什么格式。同學們這個時候就可以按照本節我們學習的設置網頁頁面元素居中的辦法，把這個圖片的位置先給它調整到一個自己喜歡的位置。然后我們再說設置邊距的事情。

在大家調整完圖片的位置后，我們還是調出相關 CSS 選擇器的屬性面板，我們可以看到屬性面板中的布局兩個字，沒錯，布局中有 border，margin，padding 幾個選項的設置：

• border：邊框；
• margin：外邊距；
• padding：內邊距。

我們只要根據 Dreamweaver CC 2018 屬性面板中的操作方式在上下左右分別設置 margin 和 padding 的值，就可以為這個圖片設置好各個方向的邊距。是不是很輕松很熟悉？

這里需要截圖展示如何進行操作。并且要有一個效果的對比：一個元素設置了 20px 的內邊距或者外邊距會有什么樣的效果，設置了邊框之后呢？來看下下面的截圖：

其實總結來看，設置圖片邊距的前幾步，和設置圖片的 position 異曲同工。只要稍微觸類旁通，就可以無師自通了。

3. 響應式布局

下面老師將為大家簡單普及一下響應式布局的概念。

在前端領域，這個概念出現的相對比較晚了，大概是在 2010 年才提出來。簡單地解釋就是：一個網站能夠在多個不同平臺的設備上以合適的方式展示。

在早期的前端領域，響應式布局尚未興起的年代，一個網站的前端頁面可能要做好幾個版本，分別兼容 Android，IOS，Windows 以及 OS X 上不同的瀏覽器，這樣就大大增加了開發的復雜性。也給中小微公司開發網站帶來了巨大的痛苦和成本。

而在如今的移動互聯網時代，出現了各種支持響應式布局的前端框架，漸漸地幾乎現在主流的商業網站都支持響應式布局，這在開發界是一種不成文的約定。大家今天在這里只需要理解：不同的網頁要在不同的設備，不同的操作系統（平臺）上都能合理的展示即可。這里的合理，不是原樣復制！因為手機有適合手機的頁面交互邏輯，電腦有電腦的操作邏輯，如果它們的網頁都可以完全復制的話，那么也就沒必要手機電腦操作系統分開來做了。

雖然目前有 Google Funchsia，HUAWEI Harmony 以及 Apple Mac OS BigSur 這樣的操作系統在朝著這個方向發展，但未來畢竟是未來，我們還是要活在當下，做好今日的適配。

4. 小結

在本節慕課 WIKI 知識點中，老師為大家講述了如何在網頁中居中一個 HTML 元素，以及如何設置網頁中圖片的邊距。操作性很強，功能很常用也很實用。

這對于我們更好地掌握網頁布局，網頁設計理論邁出了關鍵的一步。而且在本節的最后，老師還為大家介紹了當今火熱的響應式布局，讓大家在 WIKI 學習基礎理論的時候，不忘趕上時髦，掌握到最新訊息。理解響應式布局是本節為大家介紹該知識的出發點。不要求大家能做到制作或是去準確適配響應式布局。從目前的學習進程來看，只要大家能理解響應式布局是什么意思就很不錯了。

本節的重點是：學會居中網頁中的頁面元素
本節的難點是：關聯現有生活中所見，回憶并理解響應式布局存在的意義