分類
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的設計師來說,讚!

分類
Themes

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

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

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



的下方加入以下的代碼

好了之後,在打開 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;
}

這樣就可以有單篇文章分頁的功能了,之後只要在要分頁的地方加上 <!–nextpage–> 就可以分頁囉!

效果:

分類
胡搞瞎搞

IE Only 的網頁要怎麼寫?

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

狀況:

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

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

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

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

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

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

分類
Web 2.0

Tab Generator 按鈕生成器

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

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

分類
AJAX Web 2.0

七款 Mac Dock Style Menu

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

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

分類
AJAX Web 2.0

導覽列換成 Mac Dock 模式

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

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

CSS DOCK MENU

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

分類
WordPress 艾德分享

WordPress 架設後的思考

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

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

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

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

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

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

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

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

分類
艾德分享

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

最近在設計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/https://edblog.net/