艾德的部落格天空 » css

CSS分享-骨架篇

Eduardo — Wed, 03 Feb 2010 06:19:26 +0000

CSS一直都是很奇妙的技術，我相信現在還有許多網頁設計師不知道CSS是有多麼的美妙、美味。table排版是早期的做法，由於table是以巢狀的方式包覆，如果一層一層的table包來包去，包到最後可能連設計師自己都不知道再包啥鬼的。小弟艾德我就看過table包table又包table，然後裡面還有tabl(泣)，包了不知道幾層，也不知道如何去改，最後我砍掉重做頁面反而還更快。

為什麼table切版不太好？如果主機及使用者的電腦都不錯，頻寬流量也夠大，可能感覺不到table包來包去的可怕性；若使用者頻寬小、電腦效能差，那麼流覽網站可能就囧大了，開個幾十秒才開得出網頁，耐心可能早已被空白畫面給耗光了。因為表格必須讀取到之後才會顯示，所以巢狀包覆越多越雜，頁面loading時間則越久，對於使用者端負擔更大。曾經看過某政府機關的資料報表，是以網頁table方是一直重複呈現，看看html原始碼大概有一萬多行以上，使用IE開啟的時間約3分多鐘，真是太可怕了！

雖然說用CSS+DIV的方式來寫網頁對於網站絕對是有益的，但是花費的時間相對也較多；如果是製作活動頁這類型的網頁，那麼倒是覺得Photoshop切一切後輸出成網頁反而比較省時省工，因為活動結束後網頁就撤掉了，也沒用。

以蓋房子的方式來看，HTML就是網站的骨架，每一吋骨架都需要細膩的打造，穩固的根基可以讓網站每次改版都可以降低花費的時間。骨架不能寫死，所以需要透過CSS來設定骨架的大小、骨架外皮的顏色及樣式。一個網站的架構如果做得好，透過更換CSS則可以將網站的整個風格更換，特別是全球一整年有許多節慶，像是中華文化的農曆過年、情人節、萬聖節及聖誕節等重要節慶，如果有這樣的需求，CSS更顯得重要。(請愛用CSS)

IE6就是這麼的可怕

Eduardo — Mon, 12 Oct 2009 10:12:11 +0000

前一陣子，某天晚上到客戶那邊接洽新的Case，準備要製作網站，所以跟客戶聊了一些，這時候流覽一些網站，才發現OOXX哩，IE6怎麼這麼可怕。客戶的電腦螢幕是1024×768，瀏覽器是IE6，客戶開始說明他們想要的網站樣式，以及相關的規格。期間也流覽了一些網站，發現IE6還普遍存在，這對於網頁設計師來說是很可怕的一件事情。有許多網站還是IE Only，更可怕的是還IE 6 Only，實在無法想像倘若某一天IE 6已死，那麼這些網站要怎麼辦？

難道要跟客戶說IE6已死，請用IE8或者火狐嗎 Q_Q

真是難以啟齒。

Styleneat – 讓CSS更有組織架構

Eduardo — Wed, 15 Apr 2009 04:17:47 +0000

以往在寫CSS的時候常常直接寫下去，有時候寫一行，有時候寫成好幾行。有時候忽然想加個屬性進去，就直接加在最底部，所以常常找不到要修改的資料。(雖然Ctrl + F很方便XD)假設都寫成同一行，然後也沒有分層級，組織架構變得很零散，不易修改。

如下圖：

使用Styleneat，變成

重新整理CSS的組織架構，讓每個屬性可以更明確的顯示出來，Styleneat是很棒的一個工具，目前提供三種方式，複製貼上、檔案上傳、遠端讀取，要呈現一行或者多行都可以自行設定，對於撰寫CSS的設計師來說，讚！