最近這兩三天一直覺得該去書店看看，說不定會有什麼網頁設計的書冒出來，結果一直到今天才去光華晃了一下，果然，出現了一本意想不到的書，The Zen of CSS Design的中文版，售價高達780，不過版面大小和印刷都是照原版的，全彩，用紙也不錯。看的出來上奇對這本書似乎期望不小，本來有衝動購物的慾望，不過今天已經花了不少錢，所以決定過幾天在說，就和上一本書的情況一樣XD。
我還稍微翻了一下，這本書的內容很明顯是放在設計這部分，想學CSS的人可能不適合這本書，但是對CSS已有一定認識，想更進階研究的人應該會蠻適合的。
昨天半夜睡不著又躺在床上測了點東西，首先是寬高的計算，依然要進入標準模式才會用標準的算法，這到不是問題，其實我覺得IE用這招來做區分是很不錯的方法，不過一個大問題依然在：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">上面的宣告可以進入標準模式，不過：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">這樣的宣告依然不行。第二點是application/xhtml+xml的MIME type也依然不支援，還是一樣跳出下載視窗。其實好像還有做另外一個測試，不過現在已經想不起來了@_@。
感謝Schee，今天終於完成了這耗時將近兩個半月的交易，然後我入手了這本書，剛剛稍微翻了一下，本來還擔心字體會大小，結果看來擔心是多餘的，字體大小適中（其實偏大），而且每個屬性都講的很詳細，後半部還有各種瀏覽器的相容性列表，雖然裡面的多是舊瀏覽器，但是對我來說實在是剛好阿，因為我最近正在對這裡的Style的向下相容作調整，光是一個IE5/Mac就花了我不少時間，有這張表我就可以比較快的找出問題可能出在那，剛好Eric Meyer On CSS終於要看完了，接下來大概，還是沒時間看這本吧...orz，暑假要把握時間學linux，而且還有more Eric Meyer On CSS在等著我，還是等某大大翻譯的中文版會比較快呢？
今天一早看到說已經有放出了，就到處找找了一早上，終於給我找到了，趕緊裝來測試。
首先，安裝程式會檢查你的Windows是不是合法的（詳見），然後才可以進入安裝，之後還要一次重開機，然後IE6就會被取代成IE7了，不過還可以在新增移除程式裡還原。
這次放出的beta版我覺得主要是功能上的加強，像是支援RSS Feed、分頁瀏覽，CSS支援的加強感覺不太到，不過透明PNG已經支援了（可喜可賀、可喜可賀），希望這部分能多多加強，另外就是也有檔廣告的功能。
其中一個比較有趣的新功能是可以管理附加原件，包括plug-in和ActiveX，這功能我覺得是蠻不錯的，以前總是不知道自己裝了或是被裝了哪些東西，現在這樣一目了然，不要的也可以移掉。
最後來張About的圖。
補充：管理附加原件這功能是IE6SP2時就有的。
2 column + header + footer 樣版是我這裡用的樣版，最近又做了點修改，當初的幾個目標都一樣沒做變更，現在確定支援的有IE5+/Win、Firefox 1.x、Safari 2.0、Opera 7+。我還準備一個範例配合javascript可以讓大家看看到底是怎樣，不過我做這個才發現IE有點問題（動態變更內容長度才會出現的問題），想抓回去的抓另外一個樣版比較乾淨^^。
之前的隱藏不必要的連結的小script更新了，現在支援IE/Win 5.5以後、Firefox、Opera、Safari，出現方式由原來的放大縮小改成上下移動加淡入淡出，不過淡入淡出效果只有Firefox和Safari支援，Opera似乎因為CSS 3還未正式定案所以沒有支援opacity屬性，想測試的可以去測試網頁右上角20px的範圍內停留一下。
想使用的人需要注意的是，因為我使用了SixApart的yDSF，所以要先去抓yDSF要用的兩張圖片和css檔並讓網頁連結它們，然後還要對它的CSS做點修改，避免在safari上產生顯示問題（不在意的就不用改了）。找到以下的CSS：
.ydsf:after {
margin: -10px 0 0 -10px;
background-position: left bottom;
}改成
.ydsf:after {
position: absolute;
left: 0;
bottom: 0;
margin: -10px 0 0 -10px;
background-position: left bottom;
}最後下載我的兩個檔案：CSS、Javascript，一樣讓網頁連結到他們就可以了。
拍了張照片^^。
ATH-EC7這支耳機不知讓我等了多久，終於在上周等到公司貨了，當下衝去音悅買了回來，當初是因為這支很輕，戴起來感覺很輕鬆才決定要買這支的，沒想到一直沒代理（聽說被手機大廠包下），團購又沒跟上，直到前兩個月才有消息說會有代理貨，又一直到上周才真的出現。
這款耳機特別之處是在它雖是耳塞式耳機，但是確有耳掛，實際上戴起來感覺不錯，不過要調整好，沒調整好反而會更不舒服，耳掛部分讓它比一般耳塞式耳機更不容易因為線扯到而掉落，除此之外，他還是很重要的固定點（這時候就覺得摩擦力很神奇），可以讓你調整耳機部分在耳朵內的位置，這也是一般耳塞式耳機做不到的。因為都是出外才有用，所以目前我還只戴了三四次，多戴幾次應該可以調整出更好的角度吧。目前使用還蠻滿意的，不過希望能有機會戴戴看ATH-EM9D，因為我還沒用過這種的，不知道戴起來感覺如何？
其實應該說兩層的block物件可以做什麼，不過用div來代表比較好懂。
首先可以避開IE的box model的寬高問題，範例一中我內層的div標籤只有設定寬高，padding、border、margin的設定則是放在外層的的div，這樣便可以避開IE的問題，或著想要用IE的計算方式也是沒問題的，改成外層設定寬高和margin，內層設定border和padding，這樣現在可以確保兩種計算方法的結果都是一樣的。
再來是可以配合背景圖片（如右側四張）、:before、:after兩個擬組件來做出圓角的效果，如範例二，這個作法的優點是長寬都是可以自由變化的。當然也可以加上邊框，如範例三，不知道要到何時border-radius才會被大量支援，所以現在要用圓角效果大概還是只能靠圖片了。
最後（我現在想到的）則是陰影效果，yDSF就是這樣，或是不想用圖片的話可以直接對內側物件設定relative position，見範例四。
應該是從border的內緣開始貼圖，之前在更新這裡的CSS時發現到IE是從border的外緣開始貼圖（標準模式我沒測試），如果有設定border，背景圖馬上就會被border給切到，然後昨天看到Eric Meyer On CSS的Project 11裡面也剛好講到這問題，他的解決方法是把border加在背景圖上，實際的物件就把border設定為0，所以如果你的排版和背景圖需要到pixel為單位的精準，那就要注意這個問題了。
我想這是學習CSS中最容易搞錯的東西之一，CSS的vertical-align屬性和TH、TD標籤valign屬性是不一樣的兩個東西，valign就是物件內的東西的垂直位置，不過vertical-align不是，事實上他是用在inline物件上的，用來決定一個inline物件的垂直位置（例如：上標、下標），通常是用不太到，比較容易看到影響的是img標籤，img標籤如果沒用CSS指定的話預設就是inline的物件。我找到一個範例很清楚的教學網頁，雖然是日文的，不過光看範例的部分應該沒問題。另外還有一個英文的簡單範例。
那要怎麼讓物件垂直置中呢？如果只是單行文字要置中還簡單，只要讓line-height等於外層物件的height就可以了（舊瀏覽器有些不支援，ex: IE5/Mac），如果是block物件要置中那就麻煩了，比較土法煉鋼的方法是靠外層的padding，要準確一點的話一定會需要增加標籤數，而且很trick，就不介紹了（其實是範例找不到了@_@）。
我想應該是Bug吧，因為我用Safari和Opera都沒這問題，會發現這問題是SixApart的yDSF那裡來的構想，想利用:before和:after兩個物件的背景圖來製造圓角，沒想到在一些狀況下，:after沒辦法貼齊底端，會有±1px的誤差。
上面兩個例子分別是+1px和-1px的狀況，我把出問題的地方放大抓圖下來，Mac版上雖然看不出問題，不過其實也是會發生的，HTML code如下：
<div>
<p>A</p>
</div>
<div>
<p>B</p>
</div>
<div>
<p>C</p>
</div>CSS code如下：
html, body
{
background: #66f;
}
div
{
color: #fff;
background: #000;
border: 1px solid #fff;
margin: 0.5em 0;
}
div:before, div:after
{
display: block;
content: " ";
background: #f99;
height: 10px;
width: 100%;
}
p
{
margin: 0.72em 0;
color: #fff;
font-size: 90%;
}
其實出來好一陣子了，也想裝來玩玩的人可以到BETABLOG抓，當然，裝之前請先做好備份。
3.2版是一個不小的改版，增加了不少的功能，當然資料庫結構也有動到。照以前的話，升級時一定會要去跑一個upgrade的程式，不過這版把他整合在整個系統裡面了，登入後，他會自動判斷你是否需要升級，要的話就會自動導入升級頁面，整個親和力一下就提升不少。
升級完，重新登入後，進入眼中的便是新的3.2版的主目錄，目前最主要的新功能就集中在這頁面右側的系統選單裡，包括BLOG管理、全站文章管理、全帳號管理、迴響和引用的管理...等等，這部分對於我來說是沒什麼用處，不過對付費版有很多帳號很多BLOG的人就有很大幫助了。
另一個改變就是多了Basename這個欄位，我還不能肯定這是什麼（3.2的說明手冊還沒出來），不過我推測是彙整的檔名，以前的話是系統自動生成，現在可以自己設定了，當然不支援中文，不過可以自己為每篇文章取個英文標題也不錯，只是要對舊文章作這種事蠻麻煩的，而且要改不少連結，所以我大概以後也不會動吧。另外這欄位比較特別的是可以所起來避免不小心改到。
還有一個新功能就是commenters，變成可以讓常來的逛的人如果想註冊個帳號也可行，不過因為我還不知道要在哪註冊，所以還不知道裡面到底有什麼功能。其他的一些小改變就是圖示變比較漂亮，用了不少javascript做動態效果，還有一些子頁面變成tab的感覺，整體上來說，操作感覺變好不少。現在正在期待beta2，裡面應該會附上3.2的新版說明文件。
經過了不知道多少天的努力（？），我今天終於把列印用的樣式做好了，其實也只花了一點時間，因為可以調的東西不多，而且一堆東西都會隱藏起來，實際上是很好弄的，我還抓成PDF檔讓大家可以預覽看看，有任何建議歡迎提出。除此之外，有增加了兩個圓角，這兩個加的特別辛苦@_@，因為遇到Firefox的神秘bug，有空的話會測試測試順便回報吧。其實最近覺得Opera和Safari都比Firefox還好，不過Firefox的Extensions實在太好用了，而且我之前寫的:checked應用還是只有Firefox會正確顯示（最近也有人對這東西寫了配合javascript版的，所以可以跨瀏覽器）。
什麼是不必要的連結呢？我的想法是自己才用的到的連結，最常見的就是主控台（admin）的連結，這在blog中更是常見，論壇系統因為帳號制的關係，倒不是什麼問題。會有這種連結通常是因為要手動打網址，或是還要去點選書籤覺得很麻煩，乾脆放一個連結在頁面上，看到一半想進主控台就會變的很方便，不過這連結對其他訪客來說其實是不必要顯示的（當然我想也有人覺得這不是什麼大問題），所以我想到用javascript隱藏起來的方法。
我的想法是把那些連結全部藏起來，透過某個動作他才會顯示出來，迫不及待想知道長怎樣的可以把滑鼠移到網頁最右上角20px範圍內的地方等一秒鐘，不過因為增加事件的方法不一樣，所以現在這版還不支援IE，其他常見的瀏覽器我測試過是都沒問題。
會寫javascript的其實也可以自己實做，還有各種其他方式可以用來達到這個目的，像是鍵盤輸入特定指令（不過這要做到跨瀏覽器比較麻煩），不過有一點可以讓想自己設計的人輕鬆V些的是，做這東西不太需要顧慮到跨瀏覽器的問題，甚至其他瀏覽器不顯示都是OK的，因為這連結是管理人專屬的，其他人只要不要看到錯誤訊息就好了。
不會自己coding的人可以抓我寫好的script去套用，就像一般連結外部js檔案的方式即可，當然要先修改連結位置的設定。IE使用者就要麻煩多等幾天，因為我正打算改成使用yDSF並且支援IE。另外就是要在網頁內加上以下的style設定：
/* hide links */
#hlDiv a
{
color: #000;
font: 12px Verdana;
text-decoration: none;
display: block;
}
#hlDiv a:link
{
color: #000;
}
#hlDiv a:visited
{
color: #000;
}
#hlDiv a:hover
{
color: #00f;
background-color: #fcc;
}這兩天做了點小更動，除了用上Six Apart的yDSF，還自己做了幾個圓角放上，不過左上那個用IE看會被切到，真是怪bug，等一下還要做測試，另外就是持續在做CSS設定的精簡化，感覺很不錯，我果然還是最喜歡做這件事^^，皆下來會先做列印的樣式才會繼續想新的版面配置吧。
Six Apart的yDSF很不錯用（簡單好套用），不過我還在研究它的位置相關的設定，晚點會有篇文章是關於網頁上一些不必給所有人看到的連結該如何隱藏的javascript，有想把他改成yDSF版，所以還要研究研究。
Optimus keyboard這鍵盤真是太帥了，先不多說，來看張圖吧。
看出端倪了嗎？它的每個按鍵上的圖案都是用LED顯示的，而且還是彩色的超漂亮，這樣不但全世界通用，還可以對應不同的應用程式或作業系統作切換，現在似乎在申請專利中，所以還沒有真正的商品，希望未來真的買的到（也希望買的起...orz）。
昨天才介紹的書，今天想一想就決定去買下來，想不到一天的時間就把他看完了，內容精彩自然是不用說，不過我卻覺得不是每個人都適合看這本書，因為他有個對讀者的基本假設，就是讀者都會寫HTML了，而且正想從傳統的網頁轉進到符合標準的網頁，如果是對HTML完全不了解的人來看，一定會覺得很吃力，對於這些人我是建議先去學習一些基本的HTML後在來看這本書，不用很深，一些常見的標籤就可以了。
整本書共有16章，除了第16章是參考資料外，其餘的15章都是各自有一個問題，然後先提出各種方法，再來比較各種方法的優缺點，在一些問題下，會有兩三種方法各有各的優點，而沒有一個最好的方法，這時就看讀者決定要選擇那一種比較符合自己的需求了。以第一章為例，這章是在講解清單（list）該如何表現，一共有列出了四種方法，從使用<br />分項，使用<li />，到完整的清單結構都有。當然，最後最好的方法使用結構完整的清單，不過作者不是只告訴你解答而已，還有把其他方法不好的原因講清楚。而在做出較好的選擇之後，還有一個更多技巧的單元，在這個單元作者便針對清單提出了很多上樣式的方法，像是使用圖片的清單符號，使用<ol />等等，對我來說，這個單元才是真正的寶庫，因為這裡顯示了CSS強大的威力，各種變化讓人目不暇給，我也從中學到不少技巧。
除了清單外（事實上清單有兩個章節在講解），書中還針對標題（headings）、表格、引言、表單、行內標籤（inline elements）、連結（翻為錨點）、還有減少標籤量的小技巧、套用CSS到網頁上的方法...等等，內容真的是很豐富，如果你是對網路標準有興趣的網頁設計師，那這本書一定不能錯過。
Web Standards Solutions的中文版前天在市面上看到了，而且很便宜，才350元，原版好貴，還好還沒買（本來暑假末要和他的新書一起買的），因為還沒買所以先保持觀望態度，不過內容應該不錯，畢竟序還是Jeffrey Zeldman寫的。
雖然還不知道是何時，不過Six Apart上已經開始有一連串的文章在介紹3.2的新功能，陸續推出，預計會有32個主要的新功能，現在還只有7個新功能，想當然，一定是32個功能都介紹完，3.2才會推出，所以其實還要等段時間吧。從現在公開的新功能來看，多了不少跨blog的功能，不過對我這種用免費版只有一個blog的使用者來說是用不太上，但是對商業使用的管理員倒是方便不少。另外還有不少新功能，不過目前還沒看到我最希望的分頁功能，確實，像Movable Type這樣使用靜態頁面的系統，要做分頁實在是不容易，所以我也不強求啦@_@。
這次是官方正式版了，Google Toolbar for Firefox，因為是XUL App，所以跨平台沒問題，我也裝來試過了（以一個Firefox Extension來說，它真是很大），基本上功能都和IE版的一樣，不過我沒在用，所以測試過就隱藏起來了，沒用是因為我喜歡工具列少一點:P。
傳聞蘋果的簡報軟體Keynote的轉場特效很讚，入手iBook後當然要好好來玩玩看，雖然一些是在影像剪接中常見的效果，不過還是很驚豔，於是我輸出了一個Demo，幾乎每種轉場特效都有了（Burn和Flash我的小白沒辦法顯示），只要有Quicktime就可以看了，如果沒裝Quicktime只裝了Quicktime Alternative，那可能要辛苦點，一直暫停播放暫停播放了^^b。按此下載，檔案大小約4MB。
另外要徵求可以在OSX上錄下電腦畫面的軟體，想把Safari的RSS功能錄下來。
因為主機送修，所以臨時就掛了好幾天，這幾天真是痛苦難熬啊，雖然剛入手小白，但是突然上不了自己的blog感覺真是不太好。