艾德的部落格天空 » 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的設計師來說，讚！

[WordPress] 單篇文章分頁模式教學

Eduardo — Thu, 27 Mar 2008 04:11:45 +0000

昨天 Vista 問我怎麼單篇文章不能分頁啊？喔喔？WordPress 本來就有單篇文章分頁的功能，應該可以啊～～艾德之後檢視了自己之前設計的 Theme 發現了問題所在，都把這個基本功能拿掉了 Q_Q ，之前設計的 Theme 共有四個，Hyaline 、 Drop2Splash 、 WiiLike 、 Eduardo M ，每個都沒有單篇文章的分頁功能，囧rz。好吧，要來補救這個小缺點，當然也要控制一下這個分頁的樣式，讓它更好看。

首先，先打開 Single.php 檢查一下有沒有 wp_link_pages() 這個功能如果有的請用下方的代碼取代原有的部份，如果沒有的話，請在

the_content(); ?>

的下方加入以下的代碼

wp_link_pages(array('before' => '

文章分頁： ', 'after' => '

', 'next_or_number' => 'number')); ?>

好了之後，在打開 style.css
在最底部加入底下的 CSS

/* 單篇文章分頁 */
.link_pages {
font: 12px Verdana, Arial, Helvetica, sans-serif;
padding-top: 30px;
padding-bottom: 10px;
margin: 0px;
}

.link_pages a {
padding: 2px 6px;
border: solid 1px #ddd;
background: #fff;
text-decoration: none;
}

.link_pages a:hover {
color: #ffffff;
background: #D1CAAF;
border-color: #D1CAAF;
text-decoration: none;
}

這樣就可以有單篇文章分頁的功能了，之後只要在要分頁的地方加上就可以分頁囉！

效果：

IE Only 的網頁要怎麼寫?

Eduardo — Fri, 07 Mar 2008 23:55:37 +0000

昨天跟網友 lym520 聊了一下，未來中文網頁有可能會有不少的頁面無法閱讀，未來 IE8將改成預設支援標準網頁模式，這下好玩了。現有的中文網頁中不知道有多少是 IE Only ，也就是不標準的網頁模式。說不定當這天來臨時會有可能遇到不少中文頁面無法閱讀，這時就有好笑的事情發生。

狀況：

某天，IE8 正式開放，某間公司的老闆看到網路大幅的報導，於是就跟自己的資訊人員說，「xxx，我是老闆啦，剛剛看新聞說 IE8 已經正式開放了耶，剛剛看我的電腦還是只有 IE6 ，來幫我升級下吧！」

過了約 1x 分鐘，資訊人員跑來跟老闆說，「報告老闆，您的電腦的 IE 瀏覽器已經升級完畢。」老闆說：「喔喔喔，好，晚點來用看看。」
一個小時過去了 …..

老闆喊著：「喂喂，那個誰來幫我處理一下啊，為什麼安裝好的 IE8 瀏覽公司的網頁怎麼跟以前不一樣啊，未免差太多了吧！這樣我們的顧客要怎麼看我們的網頁啊，趕快去給我改好 ˋˊ，下班前我要看到正常的頁面！」

結果就是，老闆狂罵，資訊人員忙著改頁面，加班加到深夜 XD。

艾德相信有很多網頁真的是使用 FrontPage 或者 Word 所製作出來的，這些軟體所產生的程式碼是否為標準模式，真的不知道 ˋˊ。有時候為了快速呈現可看又華麗的網頁，犧牲了一些東西是不值得的，不能因為可以交差了事就這樣，所以為了以後著想，別再製作 IE Only 的網頁了。

至於標題，IE Only 的網頁要怎麼寫？問問微軟吧 XD

Tab Generator 按鈕生成器

Eduardo — Mon, 08 Oct 2007 09:31:40 +0000

設計 Theme 的時候時常要考量到 Menu 的部份，通常艾德都是透過 Photoshop 來製作，如果不熟悉這類型的軟體，可能要另外想辦法。不過現在有網站推出了這樣的服務，只要拉一拉，顏色選一選，漂亮的 Menu 就自動有了。Tab Generator 英文名稱有很清楚的說明，Navigation Tab Menu Generator CSS，就是導覽列選項製作的功能。不管是按鈕的邊框、圓角、寬度、顏色都可以輕鬆搞定，還有漸層色哩。

還在煩惱製作的網友們又多了一項選擇。

七款 Mac Dock Style Menu

Eduardo — Fri, 31 Aug 2007 08:13:42 +0000

CSS Dock Menu

這款是艾德目前用的

A Fisheye for the Prototypejs Community

透過 Prototype.js 做出來的 menu 特效

Fisheye Menu

IconDock En

jQuery 做出的效果

A Mac OS X-style Dock In JavaScript

CornerDock

euDock 2.0

這七種各有特色，當然效果上也有差異，給大家參考一下，應該不錯玩。

導覽列換成 Mac Dock 模式

Eduardo — Thu, 30 Aug 2007 01:51:38 +0000

艾德將部落格上的導覽列換成了 Mac Dock 的模式，蠻好玩的。

主要是透過 js + css 的模式來呈現，這是國外的作品，可以參考

CSS DOCK MENU

如果沒看到效果，可能是 cache 的資料還沒更新，請按 Ctrl + F5 重新整理即可

WordPress 架設後的思考

Eduardo — Fri, 19 Jan 2007 05:57:13 +0000

從MovableType改用WordPress已經一年多了，當然也對WordPress有些心得，分享給正在用WordPress架站跟想要用WordPress架站的網友們。

當WordPress架設完之後，開始就會想到底安裝哪種plugin來輔助我的Blog對我來說是有幫助的呢？當然這種答案是見仁見智，每個人都有每個人的喜好，不過在這邊我個人覺得有幾個基本觀念可以分享給大家。

始用越少的 plugin 越好，減少使用 js 讓頁面讀取更快。
別人使用的 plugin 參考就好，不一定要使用，符合自己的需求才是重點。
基本功能可以達到的到的就不要使用 plugin。
學一點基本的CSS跟HTML對於排版及美化版面會比較有幫助。

關於第一點，js會造成讀取速度降低，一兩個js還好，如果過多頁面讀取變慢，user可能等久了就沒耐心逛你的Blog。

而第二點跟第三點，常看到WordPress留言板的部份要去使用plugin來完成，其實基本的新建網頁就可以當作留言版，實在沒有必要去使用plugin。

最後第四點，當你要修改某些顏色或者距離時，要去修改CSS來做調整，所以了解基本的CSS會很有幫助。

關於 plugin 還有基本功能的加強設定及其他相關的問題，歡迎到WordPress歡樂正體中文交流所來討論，這邊有很多志同道合的網友可以一起討論。

而關於CSS的部份，可以到OECSPACE這個網站，有CSS的教學說明，非常有幫助。

Browsershots.org – 秀出網站在所有瀏覽器的畫面

Eduardo — Thu, 11 Jan 2007 05:53:49 +0000

最近在設計Theme時都會用Firefox跟IE來測測看畫面如何，只是這樣改來改去，測來測去蠻麻煩的，加上還有Mac的 Safari 還有其他瀏覽器，像是Opera 等等。所以要符合這些瀏覽器的標準倒是一個問題，尤其是手邊沒有Mac的人更無法去檢查Safari上的呈現畫面為何。

現在國外有一個網站題供了這樣的服務，Browsershots.org – 可以秀出各個平台上的各種瀏覽器的呈現畫面，也可以比較準確的得知自己設計的網站是否能看，要不然有些時候看到IE呈現畫面正常，而Firefox呈現的畫面是慘不忍賭。

Browsershots.org 提供的服務可以勾選要哪一種作業平台上的瀏覽器，然後按下 Sumbit Jobs 的按鈕就會送出去，不過呢？這項服務並不是即時的，送出之後會回到一個網頁，他會提醒大約要等15分鐘 ~ 30分鐘之後，在將現在的網頁重新讀取一次就會出現所有的圖片出來。而圖片的出現並不是只有縮圖而已，還可以點選看最大張的圖片，這功能真是好啊！

若你選擇 15 分鐘，畫面會出現 Just submitted, to expire in 15 minutes

15分鐘之後重新讀取網頁就會有資料了，對於網頁設計者跟設計Blog的玩家非常有幫助。

本站在各種瀏覽器的畫面: http://browsershots.org/website/http://edblog.net/