網頁

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
Blogger 架構圖

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

沒有留言:

張貼留言

1. 文章如有錯誤,歡迎指正。
2. 請勿打廣告,違者一律刪。
3. 歡迎您提供寶貴的意見。