0與1的邂逅

雖然我不是專業的視覺設計人員，但是我能想像「配色」的工作在這個領域裡所佔的地位是多麼的重要。因為人類的眼睛對顏色是敏感的，不同的顏色會讓人產生不同的心理感受（也就是視覺），所以在一個視覺設計的作品當中，顏色的搭配是可以傳答出各種不同的訊息給欣賞的人們。

就拿網頁設計來說，網頁配色的好壞能影響造訪者對這個網頁的觀感，甚至還能起到是否願意留下來繼續瀏覽網頁的關鍵作用。但是在成千上萬的顏色裡，如何選出合適的搭配並不是一件簡單的事。就好像畫家會在調色盤上面嘗試各種顏色的組合，在電腦世界裡，也有所謂的調色、配色工具幫助視覺設計人員完成配色的工作。

在製作網頁的時候，如果不想讓背景太過單調的話，會選擇一些背景圖片來搭配。不過，背景素材除了在網路上找現成的，或是從無到有自己畫之外，還有什麼辦法可以做出來？

背景素材不只在網頁設計時才用得到，像簡報、繪圖、平面設計、或是現在很多網站都允許會員上傳個性化圖像，都可以將背景圖片應用在這些地方。

Repper 是一個既有趣又實用的線上「圖案」、「圖樣」、「重覆背景」產生器，它會先擷取圖片中某個固定的範圍，再將該範圍的圖案水平、垂直地複製開來，如此就會變成一個炫目的背景。Repper 網站本身已經提供一些圖片讓我們產生圖樣，不過我們可以自己上傳要製作圖樣（pattern）的圖片（image），這樣就能做出一個獨一無二的背景圖了。

ColourLovers 是一個以顏色為主的社群網站。就像書籤網站一樣，網友可以在該網站上新增色盤或是色碼，其他的網友則可以投票給自己喜歡的顏色 (類似推的機制)，藉此機制讓好顏色、美麗的顏色更容易被發掘。
目前 ColourLovers 收藏了無以數計的顏色，其中不乏許多對顏色有著獨到眼光的高手提供的好顏色。除了網友主動提供的顏色之外，網站也會固定整理出現今流行的顏色，像是熱門網站使用的配色或是雜誌封面的色調。例如網方會歸納出 Digg、FeedBurner 這些較熱門的網站用色。我想這對平面設計及網站介面設計的從業人員來說是一項很實用且極有價值的資訊。
至於調色盤方面，ColourLovers 提供許多格式的色盤或是 CSS 及 HTML 色碼檔下載，方便網友取用。

此外，ColourLovers 也擁有群組功能，讓眾多對顏色有著相同直覺的網友有一個聚合的地方。
如果你正在設計一樣作品，不管是平面設計或是網頁設計也好，而正在為配色的問題而苦惱的話，來 ColourLovers 逛逛，想信一定會有所獲的。
網站：http://www.colourlovers.com/

之前有介紹過一個圓角產生器，但它是利用背景圖片再加上 CSS 定位而成，但Spiffy Corners 是一個只使用純 CSS 便能幫助使用者做出圓角效果的網站。
使用時只需輸入背景及前景顏色然後按下 Show Me The Code，下面就會顯示 CSS 及 HTML 碼。
網站：http://www.spiffycorners.com/sc.php

當你在做網頁的時候，是不是會想找一些圖示來裝飾它，但總是找不令你滿意素材？不管是圖示的品質、或是圖示的完整性始終無法滿足你的需求？相信你逛過以下我要介紹的網站之後便會獲得令你滿意的圖示。
WebSiteIcons 目前所提供的圖示雖然不是很多 (目前有 106 組)，但卻有一定的高品質保證。所有圖示的大小皆為 256 x 256，格式則為透明 .png 或 .ico，所以可利用性非常高。
網站裡的每一組圖示都有來自網友對他的評分，所以投票數越高的圖示代表它越受歡迎，藉此可以容易地找到及下載比較熱門的圖示。此外，圖示也都分類的相當清楚，目前有的分類是：文件類、資料夾類、遊戲類、硬體類、電影類、標緻類、軟體類、運動類、小圖示類、卡通類、XP 風格類及綜合類。
網站：http://www.websiteicons.net/

RoundedCornr 是一個能幫助使用者，經過幾步簡單的設定後就可以產生圓角圖形或是含有圓角邊框的內容盒 (rounded corner box) 的網站。
圓角一直是很多網站喜歡使用的設計元素之一，尤其近來所謂的 Web 2.0 網站越來越多，其中許多網站就採用了大量的圓角做為版面的設置，就像 Web 2.0 網站的 logo 通常都有倒影一樣。
RoundedCornr 可以產生以下幾種的圓角：

Basic RoundedCornr: 單色的圓角背景
RoundedCornr with Gradient: 漸層色的圓角背景
RoundedCornr with Border: 含有圓角邊框的內容盒
Single RoundedCornr Image: 單純的圓角圖案，例如按鈕。可在圖案上面打文字。

圓角產生完畢之後，RoundedCornr 會秀出 HTML 及 CSS 原始碼，還有圖案的連結，只要將圖案下載到自己的電腦，然後將原始碼貼到網頁編輯器就可以開始動手打造有圓角的網頁了。
網站：http://www.roundedcornr.com/

不管是網頁設計師或是自己想設計一張網頁、一個網站，而設計的創意又遇到瓶頸時，通常會到網路上找其他的人的作品來參考。其實在網路上不乏免費的網頁模板，像之前我介紹過的「美觀、免費的 CSS 模板」便是一例。
這些模板都是由許多熱愛設計的高手所創作，而這些創作都有一個特點，就是精美。所以就算是不懂網頁設計的人也可以很容易的套用模板然後做出一張美美的網頁。
前言述完，今天要介紹同樣是提供網頁模板免費下載的網站：Open Source Web Design (簡稱 OSWD)，不同的是他提供的模板數量之多，如果要細看的話大概一天也看不完。目前 OSWD 共擁有 2080 個模板，數量還在增加當中。也因為設計作品多到目不暇給，所以他們從中選出一些最喜歡的模板 Our Favorite Designs，讓訪客直接找到網站中的精華。
只有要機會接觸網頁設計的人，OSWD 是一個非常值得收藏的網站，在此推薦給大家。
網站：http://www.oswd.org/

Free Icons Web 提供了許多高品質的圖示，有適用於各種作業系統的 (Windows Vista, Windows XP, Mac OS X, Linux)、網頁設計的，各種軟體、3C 器材、辦公室用具的圖示，乃至於交通工具的圖示也一應俱全。而且這些圖示並不是只有小小的 16X16，有的圖示大小到達 512X512 甚至更大，真的是如網站所說的 high quality。格式大都是透明 PNG。
Free Icons Web 所提供的圖示屬於免費性質，有一部份圖示的著作權屬於原設計者或是 Free Icons Web 網站所有，如果要使用於商業性質創作的話需向原設計者購買版權。
對於做網頁設計、軟體設計或是視覺創作的人來說，Free Icons Web 是個找圖示的好去處。
網站：http://www.freeiconsweb.com/index.html

不管是設計網頁或是裝飾部落格也好，常會用到一些指示性質的小圖示。一般來說如果不是自己設計圖示的話就是到網路上找，但在網路上抓別人做的圖示總會有盜用的疑慮，免費的圖示又不好找，而且太過零散。
由 famfamfam 提供，1000 個精美的 16 x 16 png 格式的小圖示，裡面包含個種用途的圖示，更重要的是他們都是免費的，以後需要圖示的時候不怕沒有得用。
圖示預覽網頁：請按我。
除了這些圖示之外，該網站也提供了 274 個國家的國旗圖示，有興趣的網友可以下載。
下載國旗圖示：請按我。

Free CSS Templates 這個網站目前設計並提供 100 多個免費的 CSS 模板，使用 CC 姓名標示 2.5 授權使用。每個模板都別具特色，完全不使用表格 (純 CSS 及 XHTML 打造) 及符合 W3C 的 XHTML 標準。就算不直接下載套用的話，拿來參考別人的 CSS 怎麼寫也很受用。

AJAX 技術的應用在這一陣子大行其道，一個網站如果適時地加入 AJAX 的話可以提高網站的實用性，但如果只是為了讓網站看起來更"炫"，而加入過多 AJAX 的話，不僅不會提高網站的實用性反而可能會因為大量的 Javascript 而延長網頁的載入時間，甚至出現整個很"卡"的感覺。
如果是以前者為出發點的話，這裡倒是有一個不錯的網站，讓網站開發者及網頁設計師可以找到他們想要使用以 AJAX 開發的功能。
一進入 MiniAjax.com 看到的標題便是 "A showroom of nice looking simple downloadable DHTML and AJAX scripts"。正如標題的描述，MiniAjax.com 目前蒐集了 60 幾個以 AJAX 開發的功能，每個功能都小巧實用，其中像是線上寄信、內容分頁、連結提示、可拖放的 RSS 方塊、AJAX 投票、幻燈片、檔案上傳進度條、圖片倒影等等各式各樣的 AJAX 應用，連到開發作者的網站，都詳細記載著安裝、使用方法，然後提供打包後的 zip 檔下載連結。
AJAX 好用雖好用，但總是有一些失敗的例子，像是新版的 Yahoo! Mail，我不知道為什麼它能夠"卡"成這樣 (我的電腦雖然不高級，但好歹也有 Athlon XP 3200+ 和 1GB 的記憶體)，相較之下，舊版的好像還比較親合一點。最近又聽說要整合 RSS 閱讀器和即時通的功能到 Yahoo! Mail 裡，光是閱讀一個信件都已經快受不了了，如果再整合上述的兩項功能後，我覺得想使用 Yahoo! Mail 的人需要具備超乎常人的耐性才行。

人類是有感官的動物，所以總是喜歡看漂亮的東西。在網路上亦是如此，一個外觀設計出色的網站會比設計平凡、簡陋的網站較容易吸引人的注意。而視覺所帶來的感受也會影響情緒的變化，一個設計整齊又漂亮的網站會讓人的心情趨於穩定，進而使人願意花更多的時間瀏覽網站；相反的，如果一個人的心情原本已經夠差了，然後又看到一個設計雜亂無章、一點美感也沒有的網站，我想那人一定會恨不得把網站給轟了吧。
我不懂什麼設計之道，只是把自己的一點感覺講出來。下面這些精彩的網站設計是在 Smashing Magazine 看到的，每個都很有特色，那麼就請隨我一起來享受這道豐富的視覺饗宴吧 :)
45 個鮮豔、簡潔及容易給人留下深刻印象的網站設計:(45 Fresh, Clean and Impressive Designs)

Eurovision Song Contest - Helsinki 2007
- VG DESIGN -
Internet Dreams web site design
13 strides
Alex Buga - Graphic Designer
更多的設計…

50 個漂亮的以 CSS 為基礎的網站設計(50 Beautiful CSS-Based Web-Designs in 2006)

SteveLeggat.com
Emotionslive.co.uk
Dinis91.com
WeCreateThings.com
Joyent.com
更多的設計…

30 個你不可不看的暗色系設計(30 Dark Designs You Should’ve Seen)

Justin Shattuck
John Dahlbäck
Ronemedia.com, Site/Portfolio de Gilk
SATO Krefeld
Torneo de Empresas VLP 2006
更多的設計…

標題取的有點怪，不過我想不出更好的 XD在 CSS 中，要定義連結的樣式我們通常都會用被稱為"偽類 (pseudo-classes)"像下面的這種東西：
a:link{...}a:visited{...}a:active{...}a:hover{...}
但我是到今天才發現，如果改變順序的話，所呈現的效果也會跟著不一樣。發現的原因是之前側邊欄裡的連結樣式一直怪怪的，明明我是設定當滑鼠停在連結上時，背景是綠色而字是白色的，可實際效果卻是背景跟字都是白色的，結果就一整塊都是白色的。分析了一下之後我發現，沒被點過的連結並不會出現上述的情形。後來我就明白了，原來是樣式的順序所造成的。修改前的順序是：a:link{color: #fff;}a:hover{color: #8cbd2e; background: #fff;}a:visited{color: #fff}
順序修改一下就正常了:a:link{color: #fff;}a:visited{color: #fff;}a:hover{color: #8cbd2e; background: #fff;}
解說：當有點過的連結碰上修改前的順序時，連結符合 a:hover 的條件的話字是綠色而背景是白色的，然後瀏覽器會再繼續往下讀 CSS，剛好又符合 a:visited 的條件，所以就變成字跟背景都變成白色的。
所以以後再寫連結的樣式時就要特別注意了。

現在有許多網站為了符合 W3C 標準而採用 CSS 來設計網站的項目選單，用 CSS 做選單的好處有美觀、原始碼更精簡，維護起來更容易等等…
但是對 CSS 不熟又不想研究，可是卻也想做出一個美美的選單那怎麼辦？在這裡推薦一個軟體：CSS Tab Designer v2，軟體內建了大概有 60 幾個樣式可做選擇。軟體的介面設計為三欄式，左邊第一欄是讓使用者新增、修改、刪除選單內容，中間欄會出現內建的選單樣式供選擇，最右邊那一欄是以 IE 預覽選單的視窗，但是也可以指定使用其他瀏覽器預覽。
有一點需要注意的是，當你的選單內容是中文的時候，得必需自行手動更改 chartset 為 big5 或是 utf-8 才不會出現亂碼的情形。
下載 CSS Tag Designer v2

(圖片來源：http://www.highdots.com/css-list/)

剛才在弄 joaoko.net 首頁的 CSS 時遇到了一個問題，有一個 class 的屬性是：
font-family: "新細明體"font-size: 9pt;color: #999999;

在 Firefox 下瀏覽完全沒問題，但是到了 IE 這個 class 卻沒有發生效果？後來找到問題的所在，因為首頁的編碼是 Unicode，所以 IE 以 Unicode 的模式去讀 CSS (註：我是用 @import url 抓 CSS 的檔案)，而 CSS 檔案的編碼因為是 ASCII，所以碰到中文字就會出錯。解決方法有二：1. 把 CSS 也轉成 Unicode2. 改用英文名稱的字型，例如：Verdana
小小經驗，記錄下來。避免重導覆轍。

引述內容：「
這篇文章是由Jeffrey Zeldman在2001年寫好的，說明了從以往網頁設計演進到使用CSS設計的過程，許多環境因素已經與當時大不相同，A list apart的網站也早已改版多次，文中所說的三欄或兩欄式的CSS編排也早就是大部分主流blog的用法。但是，對大部分已經會作網頁，但是還不瞭解 CSS編排的精神的，這是一篇值得參考的文章；另一方面，我們也可以瞭解到，當初費盡心思發展出CSS三欄編排所為何來。文章中最主要說明的是，網頁標準 的精神在於：

內容與視覺樣式分開；
將資料結構化；
讓CSS控制所有的視覺編排工作。

」
從表格編排技巧到CSS：一個網頁設計者的歷程

當我們想要預覽一段 HTML 或者是 CSS 而又不想開啟網頁 / 文字編輯器，這時網路上有一個好用的工具 - rend。
它允許我們輸入 HTML / XHTML / CSS 並可以在頁面左邊的框框裡即時顯示結果出來。
標準的 Web 2.0 應用！讚！

Top 10 CSS Tutorials 我想叫它為：10個令人嘆為觀止的 CSS 設計。
裡面我最喜歡的就是那個顯示百分比的橫條。
很值得去研空學習。