在早些年前,約末還在讀初中的時候,當時對於出道不久的DHTML技術,也就是DOM/CSS / JavaScript,我也曾經算是個技術狂熱份子,每天放學回家就是做網頁,廢寢忘食也荒費學業,市面上一有出現DHTML的中文書,立刻就跑去買回家,微軟的IE(不好意思當時還沒出現Mozilla/Firefox,而Netscape正在走下坡…)支援了什麼新語法,就想辦法加在自己的Homepage(當時譯作烘焙雞)中,加到最後就是一堆程式控制飛來飛去的動畫,沒有夠快的電腦開網頁時可能會當機。
從前寫CSS/JavaScript是超級無敵麻煩的,幾乎是需要為不同瀏覽器寫不同程式片段,甚至不同瀏覽器的版本也會需要多一些判斷來彌補差異之處。近幾年來,Web已經不再是從前的那個麻煩Web,DOM/CSS2讓各家主流的瀏覽器有較一致的呈現效果,加上jQuery、scriptaculous、ExtJs…有了這些讓Web 2.0更容易實作的Library,又有Firefox這樣好用的瀏覽器(藉由它超強除錯、網頁開發輔助功能),想把網站改造成什麼樣子其實都不是難事。
雖然不像以前一樣沉迷設計網頁,但這幾年來並沒有間斷在網頁技術上的研究,只是一直都是用在工作的專案上,對於新技術必須幾天、幾小時去了解後就開始導入實作開發,技術本身不再是重點之後,我就不敢說自己懂任何一項技術了,畢竟對一個資管人來講,聽過足夠多的技術、知道什麼時候需要派什麼上場,在工作上就已經足夠。
這次的Blogger改造行動,圖片暫時不打算自製,找到一個還滿意的Wordpress Theme Hello :D,拿它的圖片和配色當素材,開始Blogger版面的徒手改造。
為了方便寫CSS、JavaScript,我先將Blogger版面HTML源碼中的CSS設定區給去除,改以link的方式嵌入另一台主機上的.css/.js檔案,如此一來就能夠輕鬆地用vim或其他文字編輯器直接修改,不用再透過Blogger那並不好用的HTML編輯功能儲存修改。
Blogger本身輸出的HTML品質是很不錯的,該有id或class屬性設定的地方,幾乎一個也不少,所以大到整個畫面、小到一個標籤連結,都能夠輕鬆地透過CSS去改變外觀。有id的設定對於進階的修改很重要,例如在文章區塊中,我們並不能夠直接透過改HTML去決定組成元素的順序,或是顯示的文字,但是有了id屬性,利用JavaScript的DOM控制,就能夠做到幾乎是隨心所欲的變化。
許多JavaScript是必須等到畫面載入完,包含所有圖片、Script等等,才能夠開始動作,這樣很容易造成畫面顯示的不流暢,這部份其實不要用onLoad,改用DOM的Ready Event就能克服。首先加入一個功能齊全的JS Lib,我選擇的是jQuery,因為之前只聽過它的大名,卻還沒動手玩過,趁著這次的改造,有機會深入研究一下。
細節該怎麼做?我也還在摸索,或許有了些進度再來寫個教學…
快快~~~期待泥的大作唷…哈!
回覆刪除ps. 泥把我的網址打錯了啦…ccc
還要玩上好一陣子咧
回覆刪除Blogger的樣板用XML寫程式..光看CODE眼睛就花了..更別說寫CODE ~.~
網址修正了
不過aican.info沒連結有點可惜
真厲害…一下子就改出簡潔、漂亮的版型…水啦!!!
回覆刪除阿,,,是你不棄嫌啦!!!
回覆刪除阿,,,是你不棄嫌啦!!!
回覆刪除