RSS 訂閱
文章
迴響

CSS / 網頁設計 分類下的文章

miniajax.com (by joaoko)

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)

  1. Eurovision Song Contest - Helsinki 2007
  2. - VG DESIGN -
  3. Internet Dreams web site design
  4. 13 strides
  5. Alex Buga - Graphic Designer
  6. 更多的設計…

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

  1. SteveLeggat.com
  2. Emotionslive.co.uk
  3. Dinis91.com
  4. WeCreateThings.com
  5. Joyent.com
  6. 更多的設計…

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

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

標題取的有點怪,不過我想不出更好的 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/)

CSS 檔案的編碼

剛才在弄 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 也轉成 Unicode
2. 改用英文名稱的字型,例如:Verdana

小小經驗,記錄下來。避免重導覆轍。

引述內容:「

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

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

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

Top 10 CSS Tutorials

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

« 上一頁

訪客的足跡.感謝你們的到訪