定义网页结构的方法

这一节我们将再次讲述网页设计中定义网页结构的方法。**我们主要会讲到三个知识点：居中布局，图片边距和自适应布局。**在这三个知识点中，有一定的实践操作的讲解，也有一些是会复习到我们之前讲过的知识。这一节的实操性是有的，理论性也是有的。同学们学习的时候，注意以练代记，以理解代替想当然，在学习完毕之后可以自己搜集素材常识做一个小 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 学习基础理论的时候，不忘赶上时髦，掌握到最新讯息。理解响应式布局是本节为大家介绍该知识的出发点。不要求大家能做到制作或是去准确适配响应式布局。从目前的学习进程来看，只要大家能理解响应式布局是什么意思就很不错了。

本节的重点是：学会居中网页中的页面元素
本节的难点是：关联现有生活中所见，回忆并理解响应式布局存在的意义