在看到Aican把他的Blog改頭換面後,害我也開始覺得不改很手癢。事實上當初選擇Blogger的原因,就是因為非常懶,不想自己架平台、不想自己裝佈景、不想自己裝外掛,所以隨便選了個預設版面,就一直沿用至今。但是看到愈來愈多不像Blogger的Blogger Blog,開始思考著用個和別人不一樣的版面似乎也不錯。
在早些年前,約末還在讀初中的時候,當時對於出道不久的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,因為之前只聽過它的大名,卻還沒動手玩過,趁著這次的改造,有機會深入研究一下。
細節該怎麼做?我也還在摸索,或許有了些進度再來寫個教學…
訂閱:
張貼留言 (Atom)
-
▼
2008
(241)
-
▼
8月
(55)
- Big Bang! 軟體開發的黑箱作業
- PHP存取MS SQL Server的新方法
- 研究生必備之Firefox論文工具
- Hot, Flat, and Crowded
- 成功專案管理的四要素
- 別再去想複雜難題
- Commands for cracking BPFTP Server
- 換一部新的無線基地台
- TOSHIBA Satellite M300
- Power up Twitter with Firefox
- 天瓏訂書單 20080825
- Beginning Groovy and Grails: From Novice to Profes...
- 溫伯格的軟體管理學-第一級評量 (第二卷)
- 解決 vmware-server 無法啟動問題
- 程式設計與真實人生
- Wiimote DIY互動式電子白板
- 開放源碼的市場
- Eee PC 變身 Tablet PC
- Sakai 2.5.2 課程資料同步
- Sakai的ContentHostingService問題
- 網站分享, 免費資源網路社群
- Yahoo! Open Hack Day 2008
- 好貴的CCNA認證費用
- 周盟桂的電視採訪剪輯
- 知識工作之鑰
- iPod Touch firmware 2.0 支援手寫
- 回歸寫Blog的初衷
- 拋棄式Groovy - CSV資料轉PHP陣列
- 部落格交換連結
- soapUI; the Web Services Testing tool
- YUI 3.0 Preview Release 1
- Tweak Network 讓Firefox跑得更快
- 程序員! 教你工作更輕鬆
- Blogger大改造 Action One
- The Productive Programmer
- PLEAC - Programming Language Examples Alike Cookbook
- 一個提供IT電子書網站
- 專業的.伏立挺身網站
- Scripting Language快速修改的好處
- Access mdb files in Linux
- "我是好野人" iPhone App
- Linux下的超棒MSN Client - Galaxium
- 適合單車環島的車款
- 讓部落格告訴你自己有多宅!
- Wordpress MU入侵事件*續1
- Wordpress MU入侵事件
- Groovy入門123 - 檔案列表篇
- J2EE RIA i18n&l10n solutions
- Picasa FileSystem 相簿變硬碟 Linux篇
- Nagios, open source host/server/network monitoring...
- Tricks of Groovy - Copy File
- Extjs的簡體中文電子書
- Groovy對程式設計學習的幫助
- Groovy入門123 - 安裝篇
- ST3640323AS 640GB硬碟低價高效能
-
▼
8月
(55)
快快~~~期待泥的大作唷…哈!
回覆刪除ps. 泥把我的網址打錯了啦…ccc
還要玩上好一陣子咧
回覆刪除Blogger的樣板用XML寫程式..光看CODE眼睛就花了..更別說寫CODE ~.~
網址修正了
不過aican.info沒連結有點可惜
真厲害…一下子就改出簡潔、漂亮的版型…水啦!!!
回覆刪除阿,,,是你不棄嫌啦!!!
回覆刪除阿,,,是你不棄嫌啦!!!
回覆刪除