注意:CSS 樣式表尚未載入。 跳到主內容 | 跳到側邊列

2007/09/29

[小聊]無名無名不知所云

日前有學妹到我的B板上PO文,詢問97大考計時器怎麼放在無名。我就去幫忙解決,這時才注意我八月寫的無名語法已經全不適用於現在了…。 = =+

於是我當晚都在忙著理解無名網誌的架構,還要更新語法說明書,寫得很囉嗦還不是無名害的,UI寫那麼爛。而在我勘查架構時,無意發現了無名不愧為「丁丁」代名詞的其中一項鐵證:

無名網誌所創「資料夾」概念,允許使用者建立一個以上資料夾,然後資料夾內再放連結語法。因為「資料夾」是複數,所以它的 div 容器應該用 class="boxFolder" 標示吧,可是丁丁用 id="boxFolder" 標示耶!我看是工程師自己也搞到傻傻分不清楚了...。

為什麼應該用 class 而非 id ,CSS 都能 work,有差嗎?因為 ID (Identification)顧名思義是用在單一獨特(unique)的元件上,而相對來講 class 是可重複使用的概念。節錄網站製作學習誌的文章「CSS 的 ID 和 CLASS 有什麼不同?」所講:

class 指的是「同一類型的元素」,像是 Blog 首頁每篇文章,其內容樣式都要一樣,所以我們就可以指定 class="blogbody" 來表示這些內容是同類型的。

id 則是元素唯一的名稱,就像每個人的身份證號碼一樣不能有重覆 (雖然大多數瀏覽器允許) ,這樣我們才能透過標準的 JavaScript (ECMAScript) 及 DOM 來取得這個元素。例如:<div id="container">,意思就是整個頁面裡只會有一個名為 container 的主要 div 容器。

而 class 和 id 的命名儘可能反應這些元素所代表的意義,而非以它們會呈現的樣式來命名。例如說 class="blogbody" 比 class="bgBlue" 來得好,因為我們可能會更換樣式。如果以樣式呈現的方式命名,那麼一旦更換樣式,且呈現方式變化過大的話,這樣的名稱就相當難以維護了。

無名小站顯然是沒有這番前瞻性,據我所知他只是一直修正小地方,然後網誌的CSS三不五時就被扭曲。

...(繼續閱讀)

2007/09/01

[作品]九十七年大學學測、指考倒數計時器桌面版


上文,本計時器以 Google gadget 格式製成,有另一個好處就是能夠用在 Google 桌面(Google Desktop),成為你桌面的一部分。
Windows Vista 桌面右側的「資訊看板」就是同於 Google Desktop 的新功能「側欄」,提供使用者自由新增想要的小工具(gadget)。Windows XP 也能安裝的 Google Desktop 提供這項功能,你不可不試,以下是簡單的步驟:

  1. 下載並安裝 Google 桌面(即 Google Desktop 中文版)。
  2. 安裝完成後,在桌面側欄點選「+新增小工具」鈕,並在搜尋欄填入以下網址:

  3. http://hugojay.com/98thChallenge/99thChallenge.xml

  4. 找到你了,按下「加入」。再來你可以用滑鼠把它從側欄拉出來(拖曳)。
如果你不喜歡側欄,可以從功能表選擇「浮動桌面列」。還有更多技巧,歡迎你自己去挖掘。
後記:Windows 資訊看板的 gadget 也不是很難寫啦,不過考慮到 Vista 的市佔率,還是讓我懶惰一下好了。XD


20071226更新


倒數計數器改版,加入自訂倒數功能。請一樣依上文步驟加入 Google 桌面後,記得要設定倒數日期喔!(當然,你也可以不設定)
  1. 在倒數計時器小工具的右上角按下「選單」鈕(倒三角形)。
  2. 點選「選項」。
  3. 輸入自訂倒數日期之年、月、日及名稱。
  4. 記得按下「確定」才會生效!

...(繼續閱讀)

bottom