從 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 檔案:
閱讀全文 »