重新設計本站 WordPress Theme 版面

我在約一年半前從 b2evolution 轉移到 wordpress 平台時,採用的版面是屬於「三欄式」,左邊為內容區 (content)、右邊兩側為 sidebar 側邊欄。而且,左邊的內容區寬度可以隨 browser 水平寬度的調整而變動。

當時頗以為這樣很富有彈性,尤其在 20" 以上的螢幕上觀看瀏覽內容區的視覺效果覺得不錯。但是沒想到當我在外教課從外連回 Blog,透過筆電連接投影機投射出來時的效果才發現到甚差,因為投機影一般最多僅到 1024x768,還有一些是 800x600 的尺寸,結果導致內容區的寬度變得極為狹窄,甚至貼在其內的影像圖片無法完全顯示出來。

這次就不想變甚麼花樣了,乖乖地採用固定式的版面,以 1024x768 為基準,並將其置中。側邊攔 (sidebar)改回一個置於右側,儘量不要放上太過花俏的側邊資訊;左側則是主要內容,構成比較常見的兩欄式版面。

CSS 樣式完全自己來、重新再寫過。不過在整個版面設計的期間,我起碼參考過 10數個以 wordpress 架站的部落格的版面設計。然後又委請 Cathy 的專任美工幫我設計了一個網站 Banner,除了表達出綠意清新的感覺之外,還特別放上一隻以前我網站名字 (矇矇的秘密基地)的黃金鼠卡通主角。

這次整個版面的色調期能表達以 "禪 (Zen)" 的意境為主,背景色以乳白色為底、框線則以土金黃色為線條。儘量能表達出整個網站的簡單、素雅為主。在此也貼個 screenshot 作為紀念。

kenming_wordpress_blog_screenshot_20100727

※ 延伸參考
 o Kenming's 三欄式版面 css template

Kenming’s 三欄式版面 css template

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

版面 Style 大變更~

嗯,總算掌握了 CSS 設計的竅門了...

簡單的類別(Class)觀念,帶著丁點物件導向的味道,讓 Layout 與 Content 很容易的分離。所以只要專注在 “Style-site.css” 的 CSS layout 設計,就可以很容易的設計出美觀的版面。

CSS 的編輯器(Editor),以 TopStyle 最為便利了。Lite 版並且是免費的,夠用了!
另,這裡有「CSS教學」,極盡完整的中文說明,根本就不用買書,太棒了:-()

軟體思維顧問

專職軟體輔導與教育訓練的獨立顧問。輔導企業資訊單位如何有效組織系統開發與維護;輔導開發人員達成有效的專業分工。傳授如何把軟體作軟 (Keeping Software Soft)的技能,得以提昇系統的彈性/延展,並進而創造系統的再利用價值。

Personal