The Zen of CSS Design 中文版出了

中文版封面,和原文的設計一樣

最近這兩三天一直覺得該去書店看看,說不定會有什麼網頁設計的書冒出來,結果一直到今天才去光華晃了一下,果然,出現了一本意想不到的書,The Zen of CSS Design中文版,售價高達780,不過版面大小和印刷都是照原版的,全彩,用紙也不錯。看的出來上奇對這本書似乎期望不小,本來有衝動購物的慾望,不過今天已經花了不少錢,所以決定過幾天在說,就和上一本書的情況一樣XD。

我還稍微翻了一下,這本書的內容很明顯是放在設計這部分,想學CSS的人可能不適合這本書,但是對CSS已有一定認識,想更進階研究的人應該會蠻適合的。


又測了點IE7 beta 1的東西

昨天半夜睡不著又躺在床上測了點東西,首先是寬高的計算,依然要進入標準模式才會用標準的算法,這到不是問題,其實我覺得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">

這樣的宣告依然不行。第二點是text/html的MIME type也依然不支援,還是一樣跳出下載視窗。其實好像還有做另外一個測試,不過現在已經想不起來了@_@。


新書購入 CSS 2 Programmer's Reference

CSS 2 Programmer's Reference

感謝Schee,今天終於完成了這耗時將近兩個半月的交易,然後我入手了這本書,剛剛稍微翻了一下,本來還擔心字體會大小,結果看來擔心是多餘的,字體大小適中(其實偏大),而且每個屬性都講的很詳細,後半部還有各種瀏覽器的相容性列表,雖然裡面的多是舊瀏覽器,但是對我來說實在是剛好阿,因為我最近正在對這裡的Style的向下相容作調整,光是一個IE5/Mac就花了我不少時間,有這張表我就可以比較快的找出問題可能出在那,剛好Eric Meyer On CSS終於要看完了,接下來大概,還是沒時間看這本吧...orz,暑假要把握時間學linux,而且還有more Eric Meyer On CSS在等著我,還是等某大大翻譯的中文版會比較快呢?



2 column + header + footer 樣版 更新

2 column + header + footer 樣版是我這裡用的樣版,最近又做了點修改,當初的幾個目標都一樣沒做變更,現在確定支援的有IE5+/Win、Firefox 1.x、Safari 2.0、Opera 7+。我還準備一個範例配合javascript可以讓大家看看到底是怎樣,不過我做這個才發現IE有點問題(動態變更內容長度才會出現的問題),想抓回去的抓另外一個樣版比較乾淨^^。




ATH-EC7入手

附耳掛的耳塞式耳機ˇ

ATH-EC7這支耳機不知讓我等了多久,終於在上周等到公司貨了,當下衝去音悅買了回來,當初是因為這支很輕,戴起來感覺很輕鬆才決定要買這支的,沒想到一直沒代理(聽說被手機大廠包下),團購又沒跟上,直到前兩個月才有消息說會有代理貨,又一直到上周才真的出現。

這款耳機特別之處是在它雖是耳塞式耳機,但是確有耳掛,實際上戴起來感覺不錯,不過要調整好,沒調整好反而會更不舒服,耳掛部分讓它比一般耳塞式耳機更不容易因為線扯到而掉落,除此之外,他還是很重要的固定點(這時候就覺得摩擦力很神奇),可以讓你調整耳機部分在耳朵內的位置,這也是一般耳塞式耳機做不到的。因為都是出外才有用,所以目前我還只戴了三四次,多戴幾次應該可以調整出更好的角度吧。目前使用還蠻滿意的,不過希望能有機會戴戴看ATH-EM9D,因為我還沒用過這種的,不知道戴起來感覺如何?


兩層div可以做什麼

其實應該說兩層的block物件可以做什麼,不過用div來代表比較好懂。

首先可以避開IE的box model的寬高問題,範例一中我內層的div標籤只有設定寬高,padding、border、margin的設定則是放在外層的的div,這樣便可以避開IE的問題,或著想要用IE的計算方式也是沒問題的,改成外層設定寬高和margin,內層設定border和padding,這樣現在可以確保兩種計算方法的結果都是一樣的。

Top Left Top Right Bottom Left Bottom Right

再來是可以配合背景圖片(如右側四張)、:before、:after兩個擬組件來做出圓角的效果,如範例二,這個作法的優點是長寬都是可以自由變化的。當然也可以加上邊框,如範例三,不知道要到何時border-radius才會被大量支援,所以現在要用圓角效果大概還是只能靠圖片了。

最後(我現在想到的)則是陰影效果,yDSF就是這樣,或是不想用圖片的話可以直接對內側物件設定relative position,見範例四


背景圖的正確位置

應該是從border的內緣開始貼圖,之前在更新這裡的CSS時發現到IE是從border的外緣開始貼圖(標準模式我沒測試),如果有設定border,背景圖馬上就會被border給切到,然後昨天看到Eric Meyer On CSS的Project 11裡面也剛好講到這問題,他的解決方法是把border加在背景圖上,實際的物件就把border設定為0,所以如果你的排版和背景圖需要到pixel為單位的精準,那就要注意這個問題了。


vertical-align不是valign

我想這是學習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,就不介紹了(其實是範例找不到了@_@)。




列印樣式上線

列印出來的樣子

經過了不知道多少天的努力(?),我今天終於把列印用的樣式做好了,其實也只花了一點時間,因為可以調的東西不多,而且一堆東西都會隱藏起來,實際上是很好弄的,我還抓成PDF讓大家可以預覽看看,有任何建議歡迎提出。除此之外,有增加了兩個圓角,這兩個加的特別辛苦@_@,因為遇到Firefox的神秘bug,有空的話會測試測試順便回報吧。其實最近覺得OperaSafari都比Firefox還好,不過Firefox的Extensions實在太好用了,而且我之前寫的:checked應用還是只有Firefox會正確顯示(最近也有人對這東西寫了配合javascript版的,所以可以跨瀏覽器)。


隱藏不必要的連結

HideLinks抓圖

什麼是不必要的連結呢?我的想法是自己才用的到的連結,最常見的就是主控台(admin)的連結,這在blog中更是常見,論壇系統因為帳號制的關係,倒不是什麼問題。會有這種連結通常是因為要手動打網址,或是還要去點選書籤覺得很麻煩,乾脆放一個連結在頁面上,看到一半想進主控台就會變的很方便,不過這連結對其他訪客來說其實是不必要顯示的(當然我想也有人覺得這不是什麼大問題),所以我想到用javascript隱藏起來的方法。

閱讀「隱藏不必要的連結」全文

版面更新

這兩天做了點小更動,除了用上Six ApartyDSF,還自己做了幾個圓角放上,不過左上那個用IE看會被切到,真是怪bug,等一下還要做測試,另外就是持續在做CSS設定的精簡化,感覺很不錯,我果然還是最喜歡做這件事^^,皆下來會先做列印的樣式才會繼續想新的版面配置吧。

Six Apart的yDSF很不錯用(簡單好套用),不過我還在研究它的位置相關的設定,晚點會有篇文章是關於網頁上一些不必給所有人看到的連結該如何隱藏的javascript,有想把他改成yDSF版,所以還要研究研究。


Optimus keyboard

Optimus keyboard這鍵盤真是太帥了,先不多說,來看張圖吧。

Optimus keyboard的功能鍵

看出端倪了嗎?它的每個按鍵上的圖案都是用LED顯示的,而且還是彩色的超漂亮,這樣不但全世界通用,還可以對應不同的應用程式或作業系統作切換,現在似乎在申請專利中,所以還沒有真正的商品,希望未來真的買的到(也希望買的起...orz)。


Web Standards Solutions

昨天才介紹的書,今天想一想就決定去買下來,想不到一天的時間就把他看完了,內容精彩自然是不用說,不過我卻覺得不是每個人都適合看這本書,因為他有個對讀者的基本假設,就是讀者都會寫HTML了,而且正想從傳統的網頁轉進到符合標準的網頁,如果是對HTML完全不了解的人來看,一定會覺得很吃力,對於這些人我是建議先去學習一些基本的HTML後在來看這本書,不用很深,一些常見的標籤就可以了。

整本書共有16章,除了第16章是參考資料外,其餘的15章都是各自有一個問題,然後先提出各種方法,再來比較各種方法的優缺點,在一些問題下,會有兩三種方法各有各的優點,而沒有一個最好的方法,這時就看讀者決定要選擇那一種比較符合自己的需求了。以第一章為例,這章是在講解清單(list)該如何表現,一共有列出了四種方法,從使用<br />分項,使用<li />,到完整的清單結構都有。當然,最後最好的方法使用結構完整的清單,不過作者不是只告訴你解答而已,還有把其他方法不好的原因講清楚。而在做出較好的選擇之後,還有一個更多技巧的單元,在這個單元作者便針對清單提出了很多上樣式的方法,像是使用圖片的清單符號,使用<ol />等等,對我來說,這個單元才是真正的寶庫,因為這裡顯示了CSS強大的威力,各種變化讓人目不暇給,我也從中學到不少技巧。

除了清單外(事實上清單有兩個章節在講解),書中還針對標題(headings)、表格、引言、表單、行內標籤(inline elements)、連結(翻為錨點)、還有減少標籤量的小技巧、套用CSS到網頁上的方法...等等,內容真的是很豐富,如果你是對網路標準有興趣的網頁設計師,那這本書一定不能錯過。



Movable Type 3.2 即將推出

雖然還不知道是何時,不過Six Apart上已經開始有一連串的文章在介紹3.2的新功能,陸續推出,預計會有32個主要的新功能,現在還只有7個新功能,想當然,一定是32個功能都介紹完,3.2才會推出,所以其實還要等段時間吧。從現在公開的新功能來看,多了不少跨blog的功能,不過對我這種用免費版只有一個blog的使用者來說是用不太上,但是對商業使用的管理員倒是方便不少。另外還有不少新功能,不過目前還沒看到我最希望的分頁功能,確實,像Movable Type這樣使用靜態頁面的系統,要做分頁實在是不容易,所以我也不強求啦@_@。


Google Toolbar for Firefox

這次是官方正式版了,Google Toolbar for Firefox,因為是XUL App,所以跨平台沒問題,我也裝來試過了(以一個Firefox Extension來說,它真是很大),基本上功能都和IE版的一樣,不過我沒在用,所以測試過就隱藏起來了,沒用是因為我喜歡工具列少一點:P。


KeyNote轉場特效Demo

KeyNote Demo抓圖

傳聞蘋果的簡報軟體Keynote的轉場特效很讚,入手iBook後當然要好好來玩玩看,雖然一些是在影像剪接中常見的效果,不過還是很驚豔,於是我輸出了一個Demo,幾乎每種轉場特效都有了(Burn和Flash我的小白沒辦法顯示),只要有Quicktime就可以看了,如果沒裝Quicktime只裝了Quicktime Alternative,那可能要辛苦點,一直暫停播放暫停播放了^^b。按此下載,檔案大小約4MB。

另外要徵求可以在OSX上錄下電腦畫面的軟體,想把Safari的RSS功能錄下來。


臨時掛站

因為主機送修,所以臨時就掛了好幾天,這幾天真是痛苦難熬啊,雖然剛入手小白,但是突然上不了自己的blog感覺真是不太好。


更之前的文章