阿嬷都看得懂的切版在干嘛

今天，让我们一起拿出童年回忆－－贴纸簿。

如果你不是阿嬷而是乖孙，那我解释一下，贴纸簿是一种黄色胶质的纸所制作的笔记本。把贴纸贴上去後，可以轻易撕下来重贴，不会弄坏贴纸，也不会弄坏笔记本。在我们童年时代，父母和老师们很喜欢发贴纸当作奖赏，所以我们就可以用贴纸簿蒐集起来。

因为这些贴纸可以撕下来重贴，所以我们可以轻易地改变配置。那麽，假使你要告诉小刘，这些贴纸怎麽放在贴纸簿上，你会怎麽作呢？我们先来看第一张好了。

呃嗯，我可能会告诉小刘，这张贴纸的边边，距离贴纸簿纸页的左侧边边与上方边边多少公分。

那第二张呢？这时候，我应该会告诉小刘：

1. 这张贴纸是放在前一张贴纸的右边还是下面，以及
2. 这张贴纸的边边，距离前一张贴纸的边边多少公分。第三张、第四张以此类推。

有发现吗？我们决定每张贴纸位置的方式，是

1. 这些贴纸和其他贴纸的位置关系，以及
2. 这些贴纸的边边和包含它的纸页的边边距离多远，或这些贴纸的边边和其他贴纸的边边距离多远。

如果我们把每张贴纸当成区块元素，会怎麽决定

1. 这个元素和其他元素的位置关系，以及
2. 这个元素和其他元素的实际距离
   呢？

没错，就是设定

1. display：想放在右侧，值就是 inline-block，放在下面就是 block；以及
2. 昨天介绍的 margin。

例如，我们可以想一想，如果我们要把这些贴纸变成下面这样，会怎麽处理呢？

等等，在开始切这个贴纸簿页面以前，你应该会问：为什麽今天突然开始做贴纸簿了？这种丑不啦叽的网页，根本不会有人想看啊！

没错，在现实生活中，不会有任何网站长成这种色块的样子。但是，只要我们把这些贴纸美化，或者加上内容以後，就会是我们平常在用的网站罗。如果不相信，让我们看看几个案例。

1. CNN：
   
   什麽，你说看起来完全不像？人家的网页漂亮多了!? 没关系，那如果是这样呢？
   
   有没有觉得 87% 像了呢？
2. 虾皮购物：
   
   怎麽样？有看出来这和我们的贴纸簿相似的地方吗？这次是不是比较明显了呢？没错，就是这麽像：
   
3. Nike：
   
   没这麽像，但是还是很像对吧？
   

没错，其实我们可以把各种绚丽的网站，都看做古早时代的贴纸簿。当我们在制作网页的时候，会先把这些大张的贴纸，这些大的区块元素先写出来，把整个画面切割成几个主要区域，然後再把图片与文字这些内容填进去。

这个把整个版面切成各个区块的任务，我们就叫作「切版」。我们通常会先抓出几个主要区域，例如上面的大色块。切完主要区域以後，我们会再把每个主要区域切成更细的区块，例如图片的区块、文字的区块、或按钮的区块。

我们上面看见的贴纸簿页面，可以说是最经典的版面配置。粉红贴纸区块我们称作「页首」 (header)，中间橘色贴纸的区块称作「主要区域」 (main)，而最後的绿色贴纸区块称作「页尾」(footer)。有些网页可能会有侧边的区块，我们称作「侧栏」(sidebar)。这些区域各自有些约定俗成的功能。

1. 页首：这个区域通常有企业的 Logo，点击後会回到首页，也有可以通往各个主要功能的页签。由於页首非常重要，许多时候也会持续悬浮在视窗顶部，无论使用者往下卷动到网页的哪个部分。
2. 主要区域：主要内容的呈现区块，通常会再切分成更多区块，以利呈现内容。
3. 页尾：通常会放上企业的联络方式，以及社群网站的连结。许多时候，也会放上整个网站的纲要，以利使用者快速前往使用任何功能。
4. 侧栏：现在的网站比较少出现侧栏，不过在没有页尾的网页中，通常会用来放上较为次要的功能连结。让我们看看脸书网页版的版面配置：
   
   可以看见左右侧栏主要用作次要功能、捷径、广告、与即时通讯。

所以，这个贴纸簿的练习，实际上就是未来我们切版的起手式。当我们能够把每个区块都放在正确的位置上以後，才有办法开始让浏览器精确地绘制出整个网页的全貌。