分類
css

CSS分享-骨架篇

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

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

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

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

分類
css

IE6就是這麼的可怕

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

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

真是難以啟齒。

分類
css

Styleneat – 讓CSS更有組織架構

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

如下圖:

使用Styleneat,變成

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