定義網(wǎng)頁(yè)結(jié)構(gòu)的方法

這一節(jié)我們將再次講述網(wǎng)頁(yè)設(shè)計(jì)中定義網(wǎng)頁(yè)結(jié)構(gòu)的方法。**我們主要會(huì)講到三個(gè)知識(shí)點(diǎn)：居中布局，圖片邊距和自適應(yīng)布局。**在這三個(gè)知識(shí)點(diǎn)中，有一定的實(shí)踐操作的講解，也有一些是會(huì)復(fù)習(xí)到我們之前講過(guò)的知識(shí)。這一節(jié)的實(shí)操性是有的，理論性也是有的。同學(xué)們學(xué)習(xí)的時(shí)候，注意以練代記，以理解代替想當(dāng)然，在學(xué)習(xí)完畢之后可以自己搜集素材常識(shí)做一個(gè)小 Demo。

具體而言，我們會(huì)在今天的知識(shí)點(diǎn)中學(xué)習(xí)到如何把一個(gè)網(wǎng)頁(yè)元素在網(wǎng)頁(yè)展示中給它居中。然后我們會(huì)學(xué)習(xí)如何在 Dreamweaver CC 2018 中設(shè)置網(wǎng)頁(yè)中圖片的邊距。最后我們將為大家介紹當(dāng)今應(yīng)用很廣泛的自適應(yīng)布局的理念。希望大家在學(xué)習(xí)的過(guò)程中能緊跟老師的操作，爭(zhēng)取在初次掌握知識(shí)的同時(shí)把知識(shí)記牢，記準(zhǔn)！下面就讓我們開始今天的學(xué)習(xí)吧！

1. 居中頁(yè)面中的元素

1.1 網(wǎng)頁(yè)元素居中的意義

眾所周知，無(wú)論你是編輯過(guò) word 文檔的同學(xué)，還是寫過(guò)論文的同學(xué)都應(yīng)該知道，居中是一個(gè)很好用的工具，它會(huì)讓你的整個(gè)文檔中的內(nèi)容看起來(lái)特別順眼。

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

1.2 在 Dreamweaver CC 2018 中操作居中頁(yè)面元素

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

我們新建一個(gè)DIV元素，點(diǎn)擊插入，點(diǎn)擊DIV，這里可能有同學(xué)會(huì)問(wèn)到，為什么老師每次都是拿 DIV 元素作為講解？在這里統(tǒng)一給大家做一個(gè)解答：首先，因?yàn)?DIV 作為一個(gè)常見(jiàn)元素，同學(xué)們都很熟悉，為了介紹知識(shí)的連貫性，盡量采用了同學(xué)們熟悉的元素來(lái)使用，從而達(dá)到為大家講解知識(shí)的目的。其次，DIV 本身就是一個(gè)容器元素，因?yàn)樗饶軉为?dú)作為一個(gè)元素來(lái)使用，又可以容納其他元素（子元素）。因此，基于上述兩點(diǎn)考慮，我們?cè)诟嗲闆r下采用 DIV 來(lái)講解方便大家后續(xù)自己選擇元素的時(shí)候能夠更好的兼容。

插入完 DIV 后，我們?cè)谄渲刑钊胍欢挝淖?，這里填入文字的目的，是為了更好地讓大家識(shí)別到這個(gè) DIV 的位置，出于同樣的目的，還為這個(gè)元素添加了背景顏色，如圖所示，我給文字添加了一個(gè)綠色的背景色。

那么如何才能達(dá)到上述圖片，讓元素居中的效果呢？我們接下來(lái)在 CSS 設(shè)計(jì)器中源中點(diǎn)擊加號(hào)，然后選擇在頁(yè)面中定義，然后在選擇器中點(diǎn)擊加號(hào)，關(guān)聯(lián)我們剛剛新建的 DIV 元素。選擇器準(zhǔn)備好后，我們點(diǎn)擊選擇器，如圖所示的 #moocwiki ，在彈出的屬性面板中，我們找到 position 屬性。改變屬性的默認(rèn)設(shè)置，達(dá)到居中的效果。

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

2. 設(shè)置網(wǎng)頁(yè)中圖片的邊距

2.1 網(wǎng)頁(yè)中的邊距和盒模型

細(xì)心的同學(xué)可能早已發(fā)現(xiàn)，我們?cè)趧?chuàng)建多個(gè)元素的時(shí)候，元素和元素多數(shù)情況下都不是緊密挨著的。這是為什么呢？

這里就要說(shuō)到元素的邊距的概念了。同時(shí)也為大家介紹前端工程師不得不懂的 CSS 盒模型。其實(shí)一個(gè)常規(guī)的網(wǎng)頁(yè)頁(yè)面元素，都是同時(shí)具備邊框，內(nèi)邊距（上下左右各一個(gè)），外邊距（上下左右各一個(gè)）的。因?yàn)檫@些邊框或者邊距默認(rèn)是無(wú)色的，所以我們看不到。

2.2 盒模型

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

盒模型，指的是以盒子的外觀屬性為類比，對(duì)照網(wǎng)頁(yè)設(shè)計(jì)中元素具備的 CSS 屬性，如內(nèi)容，內(nèi)邊距，邊框，外邊距等屬性，進(jìn)而構(gòu)成的一種 CSS 思維模型。

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

了解了內(nèi)邊距，想必聰明的同學(xué)已經(jīng)猜到外邊距的含義了。沒(méi)錯(cuò)，外邊距就是在元素所占網(wǎng)頁(yè)空間的最終外邊界到網(wǎng)頁(yè)邊框的距離。這就是盒模型與內(nèi)容，內(nèi)邊距，外邊距，邊框的關(guān)聯(lián)。同學(xué)們可以試著在瀏覽器中點(diǎn)擊 F12，然后在 Dom 視圖下可以參考盒模型具體信息。

2.3 盒模型的分類

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

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

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

• W3C 盒模型認(rèn)為元素的 width 屬性和 height 屬性僅僅是 content 區(qū)域。也就是說(shuō)不包括內(nèi)外邊距和邊框區(qū)域。

• 而 IE 盒模型認(rèn)為，元素的 width 和 height 屬性由 content 區(qū)域和內(nèi)邊距加上邊框區(qū)域共同組成。這就要求大家在適配網(wǎng)頁(yè)的時(shí)候考慮到為 IE 做一定的適配工作。

而在瀏覽器方面，我們說(shuō)的 IE 盒模型，一般指的是 IE5.5，IE6 以后的 IE 瀏覽器，而其他大多數(shù)瀏覽器默認(rèn)情況下均為 W3C 盒模型，有時(shí)也叫做標(biāo)準(zhǔn)盒模型。

2.2 使用 Dreamweaver CC 2018 設(shè)置網(wǎng)頁(yè)中的圖片邊距

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

然后我們點(diǎn)擊插入，選擇圖像/圖片，插入一張我們事先準(zhǔn)備好的圖片。然后我們可以看到圖片出現(xiàn)在了網(wǎng)頁(yè)中，但是并沒(méi)有什么格式。同學(xué)們這個(gè)時(shí)候就可以按照本節(jié)我們學(xué)習(xí)的設(shè)置網(wǎng)頁(yè)頁(yè)面元素居中的辦法，把這個(gè)圖片的位置先給它調(diào)整到一個(gè)自己喜歡的位置。然后我們?cè)僬f(shuō)設(shè)置邊距的事情。

在大家調(diào)整完圖片的位置后，我們還是調(diào)出相關(guān) CSS 選擇器的屬性面板，我們可以看到屬性面板中的布局兩個(gè)字，沒(méi)錯(cuò)，布局中有 border，margin，padding 幾個(gè)選項(xiàng)的設(shè)置：

• border：邊框；
• margin：外邊距；
• padding：內(nèi)邊距。

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

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

其實(shí)總結(jié)來(lái)看，設(shè)置圖片邊距的前幾步，和設(shè)置圖片的 position 異曲同工。只要稍微觸類旁通，就可以無(wú)師自通了。

3. 響應(yīng)式布局

下面老師將為大家簡(jiǎn)單普及一下響應(yīng)式布局的概念。

在前端領(lǐng)域，這個(gè)概念出現(xiàn)的相對(duì)比較晚了，大概是在 2010 年才提出來(lái)。簡(jiǎn)單地解釋就是：一個(gè)網(wǎng)站能夠在多個(gè)不同平臺(tái)的設(shè)備上以合適的方式展示。

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

而在如今的移動(dòng)互聯(lián)網(wǎng)時(shí)代，出現(xiàn)了各種支持響應(yīng)式布局的前端框架，漸漸地幾乎現(xiàn)在主流的商業(yè)網(wǎng)站都支持響應(yīng)式布局，這在開發(fā)界是一種不成文的約定。大家今天在這里只需要理解：不同的網(wǎng)頁(yè)要在不同的設(shè)備，不同的操作系統(tǒng)（平臺(tái)）上都能合理的展示即可。這里的合理，不是原樣復(fù)制！因?yàn)槭謾C(jī)有適合手機(jī)的頁(yè)面交互邏輯，電腦有電腦的操作邏輯，如果它們的網(wǎng)頁(yè)都可以完全復(fù)制的話，那么也就沒(méi)必要手機(jī)電腦操作系統(tǒng)分開來(lái)做了。

雖然目前有 Google Funchsia，HUAWEI Harmony 以及 Apple Mac OS BigSur 這樣的操作系統(tǒng)在朝著這個(gè)方向發(fā)展，但未來(lái)畢竟是未來(lái)，我們還是要活在當(dāng)下，做好今日的適配。

4. 小結(jié)

在本節(jié)慕課 WIKI 知識(shí)點(diǎn)中，老師為大家講述了如何在網(wǎng)頁(yè)中居中一個(gè) HTML 元素，以及如何設(shè)置網(wǎng)頁(yè)中圖片的邊距。操作性很強(qiáng)，功能很常用也很實(shí)用。

這對(duì)于我們更好地掌握網(wǎng)頁(yè)布局，網(wǎng)頁(yè)設(shè)計(jì)理論邁出了關(guān)鍵的一步。而且在本節(jié)的最后，老師還為大家介紹了當(dāng)今火熱的響應(yīng)式布局，讓大家在 WIKI 學(xué)習(xí)基礎(chǔ)理論的時(shí)候，不忘趕上時(shí)髦，掌握到最新訊息。理解響應(yīng)式布局是本節(jié)為大家介紹該知識(shí)的出發(fā)點(diǎn)。不要求大家能做到制作或是去準(zhǔn)確適配響應(yīng)式布局。從目前的學(xué)習(xí)進(jìn)程來(lái)看，只要大家能理解響應(yīng)式布局是什么意思就很不錯(cuò)了。

本節(jié)的重點(diǎn)是：學(xué)會(huì)居中網(wǎng)頁(yè)中的頁(yè)面元素
本節(jié)的難點(diǎn)是：關(guān)聯(lián)現(xiàn)有生活中所見(jiàn)，回憶并理解響應(yīng)式布局存在的意義