Blogger 基本架構介紹

[ 前言 ]

相信有不少人因為看不懂 Blogger 的架構和語法，想修改版面卻不知從何下手，因而放棄 Blogger，真的很可惜，所以小K就先大概介紹一下 Blogger 的架構，讓新加入 Blogger 或是想更了解 Blogger 的人能有進一步的認識。

[ Blogger 基本架構 ]

如圖1所示，小K使用了不同顏色的框線來劃分出各自的區域，它們各自的 id 定義如下。

<div id="outer-wrapper">
   紫色
   <div id="header-wrapper">
      紅色
   </div>
   <div id="content-wrapper">
      黃色
      <div id="main-wrapper">
         深藍色
      </div>
      <div id="sidebar-wrapper">
         綠色
      </div>
   </div>
   <div id="footer-wrapper">
      藍色
   </div>
</div>

圖1

首先最外面的紫色框 (outer-wrapper) 是整篇網頁的大容器，這個大容器又包含三個容器，分別為上方的紅色框 (header-wrapper) 是網頁的標頭，中間的黃色框 (content-wrapper) 是網頁的主體，底下的藍色框 (footer-wrapper) 是網頁的頁尾，其中黃色框 (content-wrapper) 又包含兩個容器，一個是深藍色框 (main-wrapper) ，它是文章顯示的地方，另一個是綠色框 (sidebar-wrapper) ，它是網頁的側欄，用來放一些小工具，例如標籤分類、網站連結等等，經過以上介紹，相信各位讀者對 Blogger 的架構已有些許的概念。