CSS 文章列表

.flickr-photo { border: solid 2px #000000; } .flickr-yourcomment { } .flickr-frame { text-align: left; padding: 3px; } .flickr-caption { font-size: 0.8em; margin-top: 0px; } CSS Nuked Day, 2008, XXC@Blog, originally uploaded by XXC. 差點忘了今天是CSS Naked Day..... To know more about why styles are disabled on this website visit the

在四月24日 A List Apart (ALA)(註) ，這個網頁設計者的必讀網站，進行了網頁設計調查研究。這個問卷對象主要是製作網站的人。我離開職場回到學校唸書已經3年了，也許現在網站設計環境已經跟當年有些改變。但是如果就我以前的認識，從職稱，能力與教育背景的問項可以看到一些有意思的東西。 那些算是「製作網站的人」呢？在這份問卷中的第四個問項中，詢問填答者的職稱，項目包括了： 設計師(Designer) 開發師(Developer) 介面設計師(Interface Designer, UI Designer) 網頁設計師(Web Designer) 專案經理(Project Manager) 資訊架構師(Information Architect) 使用性/優使性專家/顧問(Usability Expert/Consultant/Lead) 可及性專家/顧問(Accessibility Expert/Consultant/Lead) 文案/編輯(Writer/editor) 創意總監/藝術總監(Creative Director, Art Director) 網頁(站)總監(Web Director) 網頁(站)製作人(Web Producer) 站長(Webmaster, Web Master) 那麼，這些琳琅滿目的職稱背後，需要哪些專業能力呢？第五題列出了以下選項： 圖像設計/視覺設計 (Graphic design) 頁面編排，介面設計 (Page layout, Interface Design) 資訊架構，頁面框架，網站組織 (Information Architecture, Wireframing, Sitemapping)

從網路暴民Jacky處看到：CSS Naked Day 2007 根據活動網站上的說明，舉辦這個裸體日的目的是為了推廣網頁設計的標準。的確，沒有比把視覺設計的部份脫光光這種作法，更能夠強調出把語意(Semantic)與視覺表徵(Visual Representation)區分出來的設計原則了。 今天才看到，是有點晚啦。不過還可以脫光個大半天吧。一脫下來就知道我整個網站的語意結構還要再加強才是。 拍照留念：

CSSplay | Experiments with cascading style sheets | Stu Nicholls Stu Nicholls 建立的這個CSSplay網站有許多的CSS效果示範。特別是許多不需要javascript的CSS ":hover" 效果：如選單、按鈕、相簿、影像地圖等等。 (tags: CSS WebDesignTool)

Learn CSS Positioning in Ten Steps: position static relative absolute float 十個步驟學會CSS定位 (tags: CSS tutorial) A Guide to CSS Support in Email 在email 中使用 CSS 語法的相容性比較。完整的測試了Web-base (Gmail, Hotmail, Yahoo! Mail, Windows Live Mail), PC與Mac 的電子郵件軟體 (PC: Outlook 2003/OE, AOL 9, Lotus Notes, Thunderbird. Mac: Mac Mail, Entourage, Eudora) (tags:

似乎有點武俠小說的感覺。在CSS Insider處，看到這篇 Friendly Bit » Levels of CSS knowledge。文中區分一般人對CSS的理解程度，頗有趣，簡單翻譯如下(每層的解釋我沒有照翻，有興趣者請自行至原文處。而與原文解釋不同的部分，如有錯誤，文責完全在我)： 問題：「你會用CSS嗎？」 第0層的回答：「CSS？ 是新出的線上遊戲嗎?」 第1層的回答：「喔，我知道啊。我會用CSS來去掉超連結下面的底線。」 第2層的回答：「沒有，我不喜歡用DIV；TABLE比較好用。」 第3層的回答：「有啊，那很優喔，但是我沒用，因為......」 第4層的回答：「CSS？喔，當然。我所有的頁面都是用DIV來排的。」 第5層的回答：「我用CSS來設計網頁，CSS比TABLE好，因為......」 第6層的回答：「那一版的CSS？...喔，有啊，你有讀過我寫的那本書......」

前言 最近市面上出現了幾本CSS教學的書，如《The Zen of CSS－網頁視覺設計的王道》，《Eric Meyer再談CSS網頁排版設計》、《Web CSS網頁樣式設計學》、《CSS網頁設計師手札－101個您一定會遇到的問題與解答》等等。同學也買了後兩本來自修CSS。我翻了一下，發現有關於版面編排(layout)的問題分別是放在第七章與第八章來說明的，前面的章節都在教讀者如何修改字型與顏色等等。當然，一開始初步如何呼叫使用CSS是最基本的，但是我自己認為，應該先對CSS 編排有最基本的概念，才能往下學習各種修飾語法。其中一本竟然還教讀者使用表格(table)來編排頁面，真是越教越回去了。 我才想起我以前(2004)有翻譯了幾篇A List Apart關於CSS觀念的入門文章，我以為我早就放在網路上了，沒想到今天在學校上網既然遍尋不到。回家一看，原來還壓在一堆檔案裡面。我已經忘了當初是什麼原因沒有放上來，好像是翻譯授權的關係。我今天又上A list apart 看，發現翻譯是可以免費取得授權的，只要註明原文來源，與不要任意更動文句，與不從事販賣等商業行為就可以了。 這篇文章是由Jeffrey Zeldman在2001年寫好的，說明了從以往網頁設計演進到使用CSS設計的過程，許多環境因素已經與當時大不相同，A list apart的網站也早已改版多次，文中所說的三欄或兩欄式的CSS編排也早就是大部分主流blog的用法。但是，對大部分已經會作網頁，但是還不瞭解CSS編排的精神的，這是一篇值得參考的文章；另一方面，我們也可以瞭解到，當初費盡心思發展出CSS三欄編排所為何來。文章中最主要說明的是，網頁標準的精神在於： 內容與視覺樣式分開；將資料結構化；讓CSS控制所有的視覺編排工作。 這三點才是應用CSS網頁設計最主要的重點。文章是2004年四月翻譯的，那時候翻的不好，當然現在也沒長進就是了。

因為IE跟Mozilla支援的CSS不盡相同，所以為了讓兩種瀏覽器看起來一樣，總要動點手腳。 如果用CSS來作的話，基本上原則是要利用某些語法只有其中一種支援，加上越後面設定的CSS指令較優先執行，或是越具體的CSS指令越優先執行的特點，所作出來的。 首先是Box Model Hack-- 利用 IE不認得斜線的缺點，但是對於IE6來說，這種Hack有時候不怎麼有效......還搞不清楚為什麼 voice-family: "\"}\""; voice-family: inherit; A quick and dirty CSS hack: PNG backgrounds : evolt.org, Visual Design-- 用 IE不認得 child selectors (「大於」符號)的缺點 div.hack { color:#fff;} body > * div.hack { color:#ff0; } CSS hack for IE6 and NN6 利用IE會自動修正註解，而Mozilla不會的特點 pre { color: blue; anyword:

最近為了一堂CSS的課程，翻譯了WDG的Guide to Cascading Style Sheets，作為課程的基本教材資料。 雖然我還是不清楚三個小時的CSS可以教到什麼，想了各種可能，問了很多朋友，結果還是沒個準。我想，就先認識CSS可以做什麼，然後實作基本的CSS，也許在看看未來可能的發展方向吧。 不過這分教材，請大家參考看看吧。 授權部分，版權部分是根據WDG採用的OPL，我也附上了原作的網址與作者了。 根據OPL的條文，翻譯跟更改文件需要： The modified version must be labeled as such. / 更改的版本必須與同原作標題。 The person making the modifications must be identified and the modifications dated. / 更動者必須標明更改的時間 Acknowledgement of the original author and publisher if applicable must be retained according to normal academic citation

新完成一個MT CSS樣版, 作給Natasha用的，不過自己覺得還不錯，也就公開出來吧~~~ 檔案在此 安裝： 解開zip檔，內有css與三個圖檔， 圖檔預設放在css 相同的目錄，當然你可以自己改路徑