小小柯碎碎唸 for 2008-01-25

  • 小偷篇 #
  • 有一天從娘家回來,我發現蔡頭的包包裡,有一顆柳丁。 #
  • 我問小小柯:「是你從阿媽家拿的嗎?」他說:「對~」由於前兩天也有拿過,所以我不以為意。 #
  • 過沒多久,家裡來了一通電話,蔡頭接的,聽完掛斷後,蔡頭質問小小柯:「你拿柳丁有跟阿媽說嗎?」 #
  • 原來,是蔡頭的媽媽打電話來,因為她發現柳丁少了一顆,柳丁不值什麼錢,但小孩沒有經過同意就拿東西,需要講一聲。 #
  • 我接著又問:「你是不是沒有跟阿媽說,就偷拿柳丁呢?」小小柯急忙回說:「我有說...」蔡頭問:「你跟誰說?」 #
  • 小小柯回說:「我有跟阿媽說...」我又問:「真的嗎?是阿公還是阿媽?」小小柯回說:「是阿公...」阿公還在工作沒回家 #
  • 蔡媽媽的來電及小小柯的吱唔其詞,讓蔡頭認定小小柯沒經過同意,就拿了柳丁。 #
  • 「你這樣沒經過阿媽同意就拿東西,是小偷哦!」我說。「我不是小偷...我不是...」小小柯哭了起來 #
  • 「你要學 Dora 裡面的討厭鬼偷別人的東西嗎?」蔡頭幫腔。「我不要...我不要當小偷」小小柯邊哭邊搖頭 #
  • 「伸出手!」我拿了小棍子要處罰,小時偷摘瓠,長大偷牽牛。「我不要...」小小柯想躲,但還是被我重重打了一下 #
  • 「以後不可以這樣,知不知道!」蔡頭訓誡。「知道...嗚...」小小柯哭得亂七八糟 #
  • 過沒多久,又來了一通電話,又是蔡頭接的,蔡頭聽完掛斷,心虛偷偷地跟我說... #
  • 「我媽又想了一遍,她有印象小小柯有跟她說要拿橘子回家,但沒有說拿柳丁...」話說完,我們慚愧地望著淚眼汪汪的小小柯... #
  • 隔天晚上回娘家吃飯,蔡媽媽得知小小柯被處罰,連忙跟小小柯說:「對不起,阿媽錯了...」小小柯回說:「什麼?」真是小人有大量啊~ (汗) #

Powered by Twitter Tools.

CSS 學習筆記

今天,我終於把專案規劃的頁面全部從 png 轉成 html + css 了!

翻了翻我的 work log...

  • 我花了 10 天,把規劃的頁面內容,做成 html
  • 我花了 45 天,把規劃的頁面設計,做成 html + css

「天」是指時間歷程,而非工作天,無業 & 在家工作的我,有時會卯起來熬夜做,有時兩三天都不想做,有時帶蔡頭去採買民生物品,有時帶小小柯去買零食解饞。公事很忙、私事很茫...

原本在離職前,就有打算要花時間學學 css。離職後,會翻翻之前買來的 css 教學書,內容都看得懂,但要怎麼做,似乎有些模糊,也不知道怎麼上手。

自己想搞的案子,因為找不到合適的 Web Developer 來支援,索性自己打鴨子上架,硬著頭皮開始邊學邊寫 css。就這樣,還是搞不懂網頁開發及理論基礎的我,頁面被我兜出來了,學了一些皮毛、多了一些經驗,心裡也有一些感觸...

ui
取自 Nate Koechley 的投影片 (英文)

語意化的 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 排版的…

矛盾

「小小柯!快一點吃~」小小柯吃飯慢吞吞

「小小柯!吃慢一點~」小小小柯狼吞虎嚥

「小小柯!吃大口一點~」小小柯不甘不願吃著

「小小柯!吃小口一點~」小小柯貪心大口咬

小小柯對食物的愛恨,影響他進食的快、慢、大、小,而這矛盾的戲碼,每天都在上演。

※ 攝於永和下港魯肉飯

《蟲蟲危機》蔡頭版

文/蔡頭

2007年10月底的一個晚上...

「蔡頭~蔡頭~」小柯呼叫著我
「怎麼啦?」我剛從浴室出來,疑惑地問道
「快來廚房看看!」小柯揮著手叫我過去

啊... 看到一排螞蟻沿著廚房窗戶邊,由上往下陸續爬進來,我當下全身起了雞皮疙瘩,心也涼了半截。心中暗罵:「我家在11樓耶!為什麼螞蟻還爬得上來?」

驅離牠們!

我和小柯商量後,決定先用香茅油噴灑在螞蟻的路徑上,再徒手將四處竄逃的螞蟻趕盡殺絕。當晚,就不見螞蟻的蹤跡,我緊繃的神經,才稍稍放鬆。

不料,兩天後的早上...

「小柯~ 快來啊!」我在廚房大喊
「怎麼啦?」循聲趕來的小柯,以為有蟑螂

「螞蟻又出現了!」而且比上次還多
「我猜之前是探路的先鋒部隊,現在大軍來襲了...」小柯也無奈

立即到量販店買了誘蟻劑,想要來個一勞永逸。我們買的是「威滅螞蟻藥」,黑色圓形塑膠外盒,一盒六入,餌劑背面還附有雙面膠。照說明書上的使用方法,只要將餌劑放在螞蟻會行經的路徑上就行了,其原理是螞蟻將餌劑帶回巢穴分食,藉此消滅螞蟻。

「小柯~~」放好餌劑的我又在廚房大喊
「又怎麼啦?」小柯從書房走出來

「螞蟻都不進去吃耶~」
「這樣啊...」

小柯決定使出殺手鐧。只見他撬開其中一盒螞蟻藥,將裡頭的誘餌挖出,倒在免洗碗內,再摻入一點蜂蜜、一些水,將之拌勻後倒在螞蟻路徑上。

「甜蜜的毒藥,妳看!螞蟻在吃了...」小柯得意洋洋
「哇~真的耶!」號稱生活白癡的老公也不算太笨

這招的確有用,蜂蜜餌擺放個兩天後,螞蟻就不見蹤影了。只是,一個星期後的早上...

「小小柯,快點到椅子上坐好...」我拉出小小柯的兒童椅
「媽媽要喝ㄋㄟㄋㄟ了嗎?」小小柯邊爬上椅子邊問

正當我要幫小小柯泡牛奶之際,竟在放置奶粉的櫃子上發現螞蟻的蹤跡!我趕緊循線找出螞蟻入侵的路徑,原來這次螞蟻捨廚房改由餐廳的窗戶縫鑽出。

雖然換了出沒地點,但是實際上廚房和餐廳只隔了一道牆,如果不是有兩處以上的螞蟻窩,就是上次沒有完全消滅乾淨,導致螞蟻再次外出覓食。我照著小柯上次的處理模式,將摻了蜂蜜的餌食倒在路徑上,希望螞蟻趕快死光光。

隔天,螞蟻明顯減少,但還是陸續有少許螞蟻出沒,我找小柯商量,想要進行「封窗的動作。

「小柯,我們去買矽膠將窗戶旁的小隙縫封起來好不好?」我央求
「但是螞蟻還沒死光耶...」小柯不解

「我快被螞蟻搞瘋了,何不乾脆封住牠們的路算了?」我真的受不了了
「好吧...」小柯無奈

持反對意見的小柯,最後還是被我硬坳同意封窗。當天下午,趁小小柯午睡時,通力合作將廚房、餐廳、客廳的窗戶隙縫統統用防水矽膠封起來。工程結束之後,我心頭頓時輕鬆不少,螞蟻不要再來了!

不料,兩天後的早上...

「媽媽,地上有蟲蟲...」小小柯指著客廳的地板
「真的嗎?拿給媽媽看。」小小柯總是將棉絮當成蟲,來個機會教育也好。

「看!這個就是蟲蟲...」小小柯拿到我面前
「咦!?」這不是棉絮,是一隻差點被小小柯捏死的螞蟻!

我趴在地板上四處偵察,這次螞蟻是從一處漏封的隙縫鑽出,當下的我真的是欲哭無淚。

「大禹治水的故事聽過吧?光是用圍堵的方式,根本不行...」小柯聳聳肩
「我也知道這樣是治標不治本,可是我真的受不了嘛!」我快瘋了

可是又能如何?再度使用放毒餌的老方法來進行除蟻...

一天後...

「小柯...」我蹲在餐廳牆角
「怎麼啦?」小柯和兒子在客廳玩著小車車

「螞蟻越來越多了...」我哭喪著臉
「不會吧!?」

經實驗證明,「威滅螞蟻藥」對我們家的螞蟻無效,而且螞蟻再也不碰摻了蜂蜜的餌食。只見一整排的螞蟻接踵而來地穿梭,我真的已經被牠們搞得快歇斯底里了。小柯雙手一攤投降,自力救濟的我,決定上網查詢看看有無滅蟻秘方。

上了知識+ 查資料,大部分的方案都是我們用過無效的招數。幾近絕望的我,到拍賣看看有沒有人在賣除蟻特效藥,最後讓我發現一項有趣的產品。

照賣家的說法,這個叫「滅蟻清」產品,並非傳統的「螞蟻有吃餌才會死,沒吃不會死」的餌劑,而是以染病方式散播病原,只要有少許螞蟻吃了餌劑,2~3天後就會互相傳染以致全巢死亡。

彷彿如獲至寶的我,詳看產品說明,注意其成份、毒性,確認對人體無害後,再查看賣方評價及買方經驗分享。最後詢問小柯的意見後,隨即下標購買,因為這樣的產品正合我目前的需求。

兩天後的中午,東西終於寄達,當天下午我就將「滅蟻清」灑在螞蟻路徑上。看著忙碌的螞蟻搬運誘餌,我的心裡既高興又怕受傷害,高興的是螞蟻肯吃,只要有吃就有機會消滅牠們,怕的則是萬一連這個餌劑都沒用,那...我是不是要搬家啊... T_T

隔天一早...神奇的事情發生了。折騰我近半個月的螞蟻大軍,統統不見了!當然還是看得到零星的幾隻螞蟻在四處游走,但是99%的螞蟻真的消失無蹤了!興奮不已的我還是無法置信,接連到廚房、餐廳、客廳的窗戶旁來回查看,確認真的再也看不到螞蟻大軍的蹤跡,緊繃的神經才真的鬆懈下來。

事發至今已過了近三個月,惱人的螞蟻沒再出現。現在回想起當時的我,就小柯的說法是:「歇斯底里得讓人覺得恐怖」。或許我真的是太過介意,但只要一想到溫暖的家被蟻輩入侵,就讓我全身不自在。

除了儲物不易外,烹調、料理都有可能會被螞蟻污染(那時常喝到摻有螞蟻浮屍的水),而且細皮嫩肉的小小柯也可能會被螞蟻叮咬,這叫身為主婦的我,如何忍受呢?

這次的《蟲蟲危機》,本來想叫小柯寫下來,但偏偏感受最深的人卻是我,所以當時心中暗自決定有空一定要寫下來。斷斷續續寫了許久,直至今天終於完成。

雖然這是每個家庭都可能會發生的小事件,卻是讓我如坐針氈的難忘經驗。