2008年9月12日

Blogger CSS Design Ⅱ | 阿默新版面設計



有一天晚上,心情有點燥悶
打開自己的blog,本來是想小幅度的改一下
結果莫名的從小小改變,到後來變成大幅度的改變
整個網站的CSS樣板都把他重寫了

我想呈現出來的,就只是最簡單最單純的配置
可是好像每次設計完以後,都不是很滿足現況...
這一次的改版,是我第四次的改版,也是花最多心思的一次

以前把兩欄式的BLOG改成單欄式,為了簡單的呈現文章
之前又把單欄式改成了一般BLOG常用的的兩欄式,原因是想放置 blogger's Gadget

這次突然冒出的想法,決定延續之前的單欄式為樣板設計下去
我的目標是,單欄文章本體下面切割成三欄的Gadget,再加一行單欄的Gadget
聽起來是非常複雜的CSS版面設計,事實上也是
做出來後的版面配置,如下圖



每一個區塊的Gadget組件都可以自由配置
讓主體部份簡單,組件又很有收納的感覺
這就是我這次要達到的目標

做好版面的CSS以後,面臨到一個問題
就是上面的標題要怎麼設計
一開始我的想法是跟以前一樣,作一個很特別的Flash banner
將攝影作品,喜歡的音樂,和圖像與文字連結都放進裡面,看起來很炫又有設計質感

本來我是這樣想得,事實上也朝這方面前進
等做了一半後發現,這樣不對阿,我為了追求特別的質感,又把他複雜化了
有時候做事為了求好,會有不小心本末倒置的傾向,於是我又開始重新思索...

最後決定只要放置一張底圖營造網頁氣氛
和設計一種特別的按鈕讓重要的連結呈現出來
這樣應該就夠了!

底圖當然是用我的攝影作品,這沒啥話說得
至於按鈕,我第一個想到的當然是Mac Dock,就是Apple放大縮小的Dock

我用的這CSS Dock Menu的設計,是由1支CSS描述檔和2支javascript組成
因為教學文章較少,所以裝得過程花了點時間和吃了一些苦頭
不過當Dock Icon順利動起來,心裡真是超級高興的,值得!

以下是對我很有用的教學連結,提供給有興趣的人

01. CSS Dock Menu
02. 結合發表文章的日曆模組 (Feed Calendar)
03. Blogger「最新回應」模組 (Recent Comments)
04. Blogger 最新文章模組
05. 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)
06. 加入相關文章功能 (Related Post)
07. Google Custom Search Engine

感謝他們無私的奉獻,我才能做出心中理想的Blog,謝謝你們.
在此我也提供這網頁的原始樣板的CSS下載,希望你們玩得愉快

CSS Download(請按右鍵另存新檔)
Related Posts Plugin for WordPress, Blogger...