今天，我終於把專案規劃的頁面全部從 png 轉成 html + css 了！
翻了翻我的 work log…
* 我花了 10 天，把規劃的頁面內容，做成 html
* 我花了 45 天，把規劃的頁面設計，做成 html + css
「天」是指時間歷程，而非工作天，無業 & 在家工作的我，有時會卯起來熬夜做，有時兩三天都不想做，有時帶蔡頭去採買民生物品，有時帶小小柯去買零食解饞。工事很忙、家事很茫…
原本在離職前，就有打算要花時間學學 css。離職後，會翻翻之前買來的 css 教學書，內容都看得懂，但要怎麼做，似乎有些模糊，也不知道怎麼上手。
自己想搞的案子，因為找不到合適的 Web Developer 來支援，索性自己打鴨子上架，硬著頭皮開始邊學邊寫 css。就這樣，還是搞不懂網頁開發及理論基礎的我，頁面被我兜出來了，學了一些皮毛、多了一些經驗，心裡也有一些感觸…
■ 語意化的 HTML
說到網頁設計，以前就只會用 Dreamweaver 來 table 包 table。聽過一些 SEO、語意化網頁內容的演講，但還是不明瞭「做一個有語義的 html 頁面」是多麼重要。
約莫在一年多前，我和同事發現不論在 google 或 yahoo 搜尋資料，香港的知識+ 幾乎都會排在台灣的知識+ 前面。
「明明是香港移植台灣的相同平台，為什麼他們會排在前面？」我寫了信請教香港知識+ 的製作人，他回信說明他們做了一些 SEO 優化，我這才明瞭，一個有語意化的 HTML 頁面，在網路搜尋的時代，是如此的重要。
誤打誤撞買了一本「超越式 CSS」，原以為它是教怎麼寫 css 的，衝著博客來 66 折的機會，將它買回家之後，才發現並非我所想的那樣。
不過，我反而從這本書的前兩章學到頁面結構的基本觀念，以及如何編寫一個具有語意基礎的 (X)HTML 頁面。
■ YUI CSS 的基礎
去年的11月，搭捷運來到 T 工程師位在汐止的家，因為 J 工程師要講解如何使用 YUI 來做 css 頁面。
[摘錄] “認識 YUI”:http://tw.myblog.yahoo.com/jw!zgAORkqRHBbKX66LclW6Tzshow–/article?mid=23 @ 小正正教室
YUI 是 Yahoo! User Interface 的縮寫，這是由 Yahoo! 所開發出來的工具庫，包含了多種程式工具、函數庫和網頁操作介面，能夠更快速的開發互動性高、豐富的網站應用程式，尤其是那些使用到 DOM、DHTML 和 Ajax 的網頁。YUI 全部都是使用 Javascript 寫出來的（其中也包含了一些 CSS ），而且是公開給大家免費使用的 Open Source 軟體。
YUI 這個「東西」，我常從工程師那邊聽到，但專搞服務製作的我，就是不知道它能做什麼。J 工程師細心的講解，還出了一個習題實做。咦~ 版面那麼簡單就可以搞定了哦？真是神奇~
原來，藉由 YUI 的 CSS 工具，可以輕易的建構一個頁面的版面框架及元素，讓開發工作可以更得心應手、操控自如。
■ 用 CSS 規劃版面
上完課之後的某一天，我拿出當時抄寫的筆記，開啟 ppt 投影片，準備開始規劃第一個頁面。看著看著，有一些困惑的地方，線上跟 T 工程師請教，他聽完我的問題後，發現我似乎走錯了路。
走錯路？不會吧…我這是遵照 J 工程師教我的啊！
他丟了一個網址給我，然後要我照著版面需求去設定。下拉選來選去，按個鈕，哇~ 自動產生 YUI 的版面框架的原始碼，這…太神奇了吧？
原來，他從我的問題中，得知我照著 YUI CSS 所定義的規格在做版面，但這樣做實在太苦了，也…太蠢了。他說 J 工程師教的是 YUI CSS 的基礎，只要大略搞懂就行了，至於實際應用，就直接使用 YUI 所提供的 CSS Grid Builder，輕鬆簡單搞定！
■ 編寫 CSS 的工具
寫 CSS 就好像在寫程式碼一樣，沒看到結果的呈現，無法知道寫得是對是錯。好久前就知道 TopStyle 是一套用來編寫 CSS 的好工具，但玩沒兩下，覺得沒趣，就解除安裝。
這回，我又將 TopStyle 安裝起來，努力去搞懂裡面每個表單/功能，再將我先前做的 html 頁面讀入預覽視窗，再套上目前編寫的 css ，哦~ 我會用了。
TopStyle 的優點，主要在於一邊寫 css 碼，同時可以看頁面呈現的效果，另外就是 css 碼的自動提示功能，打了一個字母，下方就會出現這個字母起頭的屬性；在屬性之後，則會自動顯示跟這個屬性相關的設定值。對我這種初學者來說，是非常有幫助的一個利器。
而它的最大缺點，就在於對 UTF-8 的支援，轉成 UTF-8 的 html 檔案讀入，中文都變一堆亂碼。而且，一截字就變成半型的亂碼，非常頭痛。
於是，我變成雙槍俠，用 TopStyle 寫 CSS，用 EditPlus 寫 HTML。
■ 建立 CSS 套用的規則/模組
我不知道該用什麼正確的名詞來描述這個經驗…
在寫完第一頁之後，我得意洋洋，但寫到第四頁之後，我已經眼茫茫又心慌慌了。眼茫茫是因為我要死盯著螢幕一遍又一遍調整頁面元素的位置。心慌慌是因為我發現我的 CSS 碼愈寫愈亂，只求當下頁面的呈現，但沒有留意要去建立 CSS 套用的規則/模組。
如果我沒有建立起 CSS 套用的規則及模組來用，那接下來的十多個頁面，我必須為每個相同 or 類似的區塊，重複撰寫完全相同/大同小異的 CSS 碼。一來，浪費時間，二來，CSS 將會變得又大又肥。
接下來的兩天，我打掉原先寫好的 CSS 碼，開始試著建立 CSS 套用的規則/模組。當下寫得很幹，但我知道這可以讓後續工作更有效率。
由於能力不佳，經驗也不足，之後每寫了一個階段，我就得重新審視這個階段的 CSS，甚至做到最後幾個頁面，還把先前的 html / css 叫出來重改。我並不是在追求完美，而是我知道如果沒有趁這個機會累積一些經驗，以後可能沒機會了，也可能用壞習慣亂做一通。
任何事情，淺嚐是有趣的，一直吃是會想吐的。做漫畫是如此、做網站是如此，寫 CSS 也是如此。
■ 非結論
說結論還太早，畢竟我只是沾到 CSS 的皮毛而已。
學習 CSS 這樣來回走一遭，我覺得初學還算簡單，但進階就有難度了，尤其要做好一整個網站的 CSS 樣式，並不是一件簡單的事。還要加上跨平台/跨瀏覽器的支援，一些奇技淫巧的效果呈現，怎麼學都學不完。
Web Developer (WD) 這個工作真的不是普通人做得來的，除了 CSS，還要會 Javascript, AJAX…etc。啊~ 曾經被我荼毒過的 WD 同事們，在此向您們說聲：「您們真偉大，辛苦了！」
最後，謝謝 T & J 兩位工程師的耐心指導~
接下來，要開始切 HTML 頁面囉！
■ 相關閱讀
* The YUI CSS Foundation
** 影片 (英文)：主講者是 Y! 資深的 YUI 工程師 Nate Koechley
** 投影片 (英文)：搭配影片一同觀看。
* J 工程師介紹 YUI 影片 (中文)
* “Reset CSS – 取消 Html 原有樣式”:http://plog.longwin.com.tw/my_note-programming/2006/06/18/reset_css_2006
* “HTML 預設 CSS Style 設定(反 CSS Reset)”:http://plog.longwin.com.tw/my_note-programming/2007/06/10/html_default_css_style_2007
* “CSS 使用 px 和 em 的差異”:http://plog.longwin.com.tw/news-technology/2007/12/07/css_px_em_difference_2007
* “台灣 YDN 的首次研討會”:http://josephjiang.com/entry.php?id=23
* “YUI @ 台灣”:http://tw.developer.yahoo.com/yui.html
* “YUI @ 美國”:http://developer.yahoo.com/yui/
* 原來 iGoogle 是用 YUI 排版的…
近期留言