清早醒來看到某位先生的來信，睡眼還惺忪，大略看了一下，以為是詢問如何將文帖分成數列。我當時還理所當然地想著「既然寫過變成兩列的，數列不就照本宣科嗎？」後來去洗把臉出來一瞧，哎呀！原來是讓我剖析如何把網誌弄成某個網站的模樣。

　　當然了，讓我把手把腳的教是不可能，那樣還不如付錢去請網頁設計師來弄，我也只能用說的紙上談兵啦──因為我懶（被毆）本來想著私信大略跟他說一說就好了，但是他問我「分享」，那就順道寫成一篇唄！

　　避免版權問題，所以我臨時用PS弄出一張簡易的架構圖來用。
　　網站結構如左◄，分成四大部份。

　➊固定式貼頭橫幅

　　CSS關鍵在位置控制項（position）上，區塊（div）1要設成固定（position: fix; ），這樣才會不受捲軸移動影響位置。 網站圖樣、搜尋列和下拉式選單則是設定大小和定位 float: left or right的問題了。至於如何做出下拉式選單（這個滿奇怪的，字面理解我認為滑出式較貼切，但要找資料的話打下拉式比較多。），原理為當游標滑上去的時候顯示（bar:hover{ display: block;}），平時設定不顯示（display: none;）
　　不想花費時間研究的話直接參閱：WFU - Blogger 多層下拉選單實作

　➋圖片輪播選單

　　常見於各大網路媒體網站首頁，近年來工作室、部落格亦風行。
　　因為我嫌佔空間很礙眼，沒用就沒去研究，所以只能給答案無法說為什麼。請參閱：WFU - 最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包　　

　➌格狀/便利貼式文帖

　　原理和我寫的這篇實作探討將首頁單欄文章變成多欄大同小異，假設你一排要放四個，總共要放兩排，一面共八個文帖，在後台設定一面顯示八，包覆文帖的區塊則設定文帖寬度×4加上間隔（margin、padding）。因為只是設定在首頁和分頁顯示，所以條件式記得先下，詳細作法一樣參見本段第一行的連結。
　　另外，想讓各個文帖內顯示【圖】＋【說明】＋【繼續閱讀】的話，【圖】的部份有兩種作法，一種比較佔資源，即每一篇都要製作一張縮圖，然後點進內頁時隱藏；另一種則是內頁圖片大小一致，下首頁條件式，在式中設定圖片在首頁/分頁格狀文帖中縮小。如果圖片大小不一，首頁縮小的大小也就不一，看起來會很凌亂。
　　至於【說明】沒什麼，避開圖片設內外距的情形，段落自然會貼在圖下，至於顯示多少中斷，看【繼續閱讀】插在哪裡。當然了，也可以用另一種作法，先給這段文字區塊命個名，在首頁條件式中指定它的寬高，我覺得前者比較省事。
　　在網誌首頁【繼續閱讀】雖然很方便，但Google blogger 的此項功能卻讓我嫌不方便，點進去是從中而不是從頭往下讀，我比較習慣點進去從頭看起。要固定【繼續閱讀】在首頁/分頁格狀文帖的位置，利用位置控制項（position），設成雖然位置固定但會受捲軸影響，跟著自然捲動的效果（position: absolute; ）。

　➍置底清單

　　這個好像沒什麼好說。

以上，就是這樣，俺出門了。

PS.（摸下巴）沒有惡意的提醒：如果要做和商業掛勾的網誌，千萬別用別人的圖，涉及牟利即違法。