從 b2evolution 轉移到 wordpress 的過程，吃足最大苦頭的不是轉檔 (migrate)，而是版面的 CSS 設計。
這一次我對版面的需求一開始就打算使用三欄式的 Layout 了，原因是我打算提供更多樣化的一些額外附屬資訊，同時現在是流行大螢幕尺寸，1024*768 以上的瀏覽畫面，已經佔絕大部分使用者的比例了。 我的版面構思是右邊兩側為 Sidebar 列，一個稍寬、另一個稍窄 (均可調整寬度)，左側就是內容 (content) 主頁了。 然後 Sidebars 是設成固定寬度 (fixed-width)，而內容區則可以視瀏覽器寬度的大小而變動 (Liquid-layout)。
當然一開始是透過諸多提供 wordpress 佈景主題 (theme)網站來找尋，結果花了一整天的時間，瀏覽了數百個佈景主題，就是找不到我心中所想的，絕大部分的 CSS Layout 均是採用固定式寬度的設計；再則，我似乎有一些 "潔癖"，看到 style.css 編輯得很凌亂，就挺不舒服的。 後來決定了，自己重寫 css layout！ 我甚至不是 copy 自 default 的 css 當成樣板，而是僅把它當成參考，然後逐漸地邊嘗試、邊摸索，一點一滴試到可以接受為止。
事實上，我發現到，如果 sidebar 與 content 都是可變動的比例式或為固定寬度，那麼 layout 就挺好設計的。 但是像我這樣的需求，反而比想像得還要困難。 更重要的是，我其實不太會 CSS，我是在這一次為了達成我理想中的版面，才去瞭解一些基礎觀念。 版面 CSS 的設計，最基本的就是對所謂的 "Box Model" 要能有清楚的理解才行。起碼你總要知道 margin 與 padding 的差異、float 與 position 的浮動調整，以及還要注意的是 IE 與 Firefox 兩者瀏覽器(及其版本) 的支援程度才行。 這裡我強烈推薦 網站製作學習誌 這個網站， 版主在其一篇：CSS 排版觀念—Box Model ，寫得非常清楚，是一篇相當棒的教學文。
仍然又是透過我的好朋友 Google，查詢到了能達成我理想中版面的 CSS 解法，起碼有三種方式可以達成。 我這裡也不想去比較各種方式的優劣與否，大致上就是作個整理，有興趣的網友們可以去行參考。
反覆嘗試，我是採用了最後這一個，"The 'Blog Style' 3 column Liquid Layout (Pixel-widths)" 。 這個版面的 CSS Layout 設計可以說是相當古怪 ( 簡單的說，它利用一個 200% 的 parent 區塊再折成只有右側 100% 來包含 content 區塊。)、也最複雜，但相對也是最具彈性，無論你用 IE or Firefox or 其它各類瀏覽器，無論你怎麼伸縮，版面真的是不會跑掉 (如側邊欄掉下問題)。
不過，我有做了一些調整。 如果三欄式的兩個 Sidebar 是放在同一側，那麼，我就把它視為是一個 "大" 的 Sidebar (parent)，其內在包兩個左右 "小" 的 Sidebar (child)。 如此我是覺得無論這個大的 sidebar 內部怎麼變化，都是它自己的事，所以也可以任意調整內部甚而再加上 "上與下" 的 sidebar 列了。
怎麼實現最好呢？ 就是把 html 與 css 都寫在同一個 html 檔內，然後打開 IE 與 Firefox，同時去測試比較寫出來後的效果。 對了，我強烈建議，一定要安裝 Firefox 的 Plugin: Firebug， 真是太好用了！ 如此要能追蹤除錯，相當地方便。
我這裡也列出我原先所寫得這一個 css layout template 檔案：
閱讀全文 »
