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

Annual CSS Naked Day website for more information.

那些算是「製作網站的人」呢？在這份問卷中的第四個問項中，詢問填答者的職稱，項目包括了：

1. 設計師(Designer)
2. 開發師(Developer)
3. 介面設計師(Interface Designer, UI Designer)
4. 網頁設計師(Web Designer)
5. 專案經理(Project Manager)
6. 資訊架構師(Information Architect)
7. 使用性/優使性專家/顧問(Usability Expert/Consultant/Lead)
8. 可及性專家/顧問(Accessibility Expert/Consultant/Lead)
9. 文案/編輯(Writer/editor)
10. 創意總監/藝術總監(Creative Director, Art Director)
11. 網頁(站)總監(Web Director)
12. 網頁(站)製作人(Web Producer)
13. 站長(Webmaster, Web Master)

那麼，這些琳琅滿目的職稱背後，需要哪些專業能力呢？第五題列出了以下選項：

1. 圖像設計/視覺設計 (Graphic design)
2. 頁面編排，介面設計 (Page layout, Interface Design)
3. 資訊架構，頁面框架，網站組織 (Information Architecture, Wireframing, Sitemapping)
4. 編寫HTML, XHTML (Markup HTML, XHTML)
5. 編寫CSS (CSS coding)
6. 使用性/優使性測試 (Usability testing/knowledge)
7. 可及性測試 (Accessibility testing/knowledge)
8. 前端程式開發 (Front-end programming, e.g. JavaScript)
9. 後端程式開發 (Back-end development, e.g. PHP, Ruby on Rails, ASP)
10. 圖像編輯處理 (Image editing/production)
11. 文案/編輯 (Writing/Editing)

嘿嘿，對SOHO來說，常常你的客戶都要求你一個人一手包辦吧。我最近看104上面的網站設計類接案快報，開出來的工作項目還都是希望能找一個一人打天下的料呢。這就像棒球投手一樣，大聯盟球隊的投手要分為先發、中繼、救援、左打者專門投手等等，甲子園的投手通常就只能一人投到底。當一個老闆(業主)說，「hey，我們只要甲子園的程度就好，LP擔著好好幹吧」，這還算上道。至少他知道這中間的差距。如果老闆說「那找一個全才不是更好？」的時候，最好他有出得起松阪級薪水的準備，要不然只是徒增雙方痛苦而已。

這麼多專業能力，哪些科系有提供這樣的學科訓練啊？這份問卷的第十題提供了一些線索：

圖書館科學(Library Science)？沒搞錯。我也是現在開始念圖書館資訊研究所以後，才瞭解到這兩種工作上的相關性。圖書館科系的資訊組織課程有助於資訊架構與網站組織的能力，資訊行為研究根本就是使用性與可及性測試的基礎。而這些都是在設計與電腦科系較不擅長的。

雖然這份問卷並不是為了台灣網頁工作者所設計的。特別在第21, 22, 23 關於年度休假與福利的問項上，在51勞動節的今天看起來特別刺眼。不過填過這份問卷，反而可以知道許多事情。(問卷抽獎：研討會入場卷、30G video ipod、T-shirt的部份了)

根據活動網站上的說明，舉辦這個裸體日的目的是為了推廣網頁設計的標準。的確，沒有比把視覺設計的部份脫光光這種作法，更能夠強調出把語意(Semantic)與視覺表徵(Visual Representation)區分出來的設計原則了。

今天才看到，是有點晚啦。不過還可以脫光個大半天吧。一脫下來就知道我整個網站的語意結構還要再加強才是。

拍照留念：

問題：「你會用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控制所有的視覺編排工作。

1. 首先是Box Model Hack--
   利用 IE不認得斜線的缺點，但是對於IE6來說，這種Hack有時候不怎麼有效......還搞不清楚為什麼

voice-family: "\"}\""; voice-family: inherit;

雖然我還是不清楚三個小時的CSS可以教到什麼，想了各種可能，問了很多朋友，結果還是沒個準。我想，就先認識CSS可以做什麼，然後實作基本的CSS，也許在看看未來可能的發展方向吧。

不過這分教材，請大家參考看看吧。

授權部分，版權部分是根據WDG採用的OPL，我也附上了原作的網址與作者了。
根據OPL的條文，翻譯跟更改文件需要：

1. The modified version must be labeled as such. / 更改的版本必須與同原作標題。


2. The person making the modifications must be identified and the modifications dated. / 更動者必須標明更改的時間


3. Acknowledgement of the original author and publisher if applicable must be retained according to normal academic citation practices. / 依照學術引用慣例，必要時需向原作者或出版處知會


4. The location of the original unmodified document must be identified. / 必須標明原作的出處位置


5. The original author's (or authors') name(s) may not be used to assert or imply endorsement of the resulting document without the original author's (or authors') permission. / 不可以在沒有原作者的同意的情況下，將原作者的名字用來當作對於這份文件的擁護或是背書的暗示。

除了注意這幾點，沒有找到國內有什麼「如何使用OPL」的文件，不過反正OPL的作者也轉向支持Creative Commons。

Download file

檔案在此

安裝：
解開zip檔，內有css與三個圖檔，
圖檔預設放在css 相同的目錄，當然你可以自己改路徑