[CSS Hack] Google chrome CSS hack 快速修正所有瀏覽器技巧

從上一次壞掉的印表機用一個class的css hack搞定所有瀏覽器之後，這次問題又來了，這次遇到了Googl chrome瀏覽器跟其他瀏覽器的畫面有所差異，懶得改架構，那就再來用css hack解決吧，查遍網路上面的文章都沒有用一個class搞定的，這可真是棘手，早期壞掉的印表機用兩個class來設定的作法，不管是在檔案大小上面，或者是css的維護上面都非常的不方便，再怎麼樣都盡量用一個class的css hack技巧來修正，我想這會是比較好又快速的作法，現在就來看看怎麼設定吧～
.className {

font-size:12px; \*這一行所有瀏覽器都看得懂，所以是給Firefox套用的*\
font-size:14px\9; \*這一行則是所有的ie都看得懂*\
[;font-size:16px;] \*這一行專門給Chrome跟Safari用，不過IE6跟7也看得懂喔*\
＊font-size:18px; \*這一行給ie7*\
_font-size:20px; \*這一行給ie6*\
}
上面的設定中，壞掉的印表機提醒各位要注意到順序的問題，給Google Chrome跟Apple Safari使用的css hack一定要寫在ie8的設定後面，若是沒有依照此種順序，將會造成後續ie6與ie7的css hack設定無效，切記切記阿～此文章由壞掉的印表機-設計、生活、態度發表
此外～倘若許多的css設定中，只有ie8需要修正的話，也可以利用ie8才看的懂的css hack來解決，這樣可以省下至少兩行的css設定。以下設定是只有ie8會看的懂，其他版本的ie或其他家的瀏覽器都看不懂
font-size:14px\0;   \*這一行只有ie8看得懂*\
雖然有許多人對於 css hack 是厭惡到了極點，但是就實務上面來說，壞掉的印表機認為，畢竟瀏覽器的缺點不是我們能控制的，標準的制定也是看各家瀏覽器要不要遵守，如果估計沒有錯的話，所有的瀏覽器勢必演化到最後，必然是都會盡量符合網頁標準的，所以在一個專案的經費與時間都有壓力的情況下，快速的利用css hack來解決個瀏覽器之間的問題，我想是符合經濟效益的，此外，以正規的作法與觀念來說，盡量少用css hack是正確的，但是倘若為了少用css hack而增加div的層次或多餘的原始碼的話，我想這樣的網頁設計不見得會比較好阿～
祝各位使用愉快啦～此文章由壞掉的印表機-設計、生活、態度發表

[技巧]微軟正黑體的BUG

今天非常不小心的發現到，微軟正黑體的某些字體只要設定為粗體字，不管是採用CSS設定粗體或是用HTML的STRONG標籤設定為粗體，就會出現下面這種狀況

就是這麼奇怪，碧字的右邊竟然多出了一個字寬!!且這種狀況只會出現在字體設定為粗體情況下

於是思考最簡單的解決之道就是不要將字體設定使用"微軟正黑體"，或者是不要使用粗體設定，可是假如我想要網頁採用的是像微軟正黑體這樣的黑體字並加粗的話該怎麼辦? 按照理論來看，我們可以將字體設定成sans-serif這種無襯線字體，讓系統自動去抓取預設的無襯線字體才對，但是設定後，沒想到系統卻是抓新細明體來用，變成下面這樣

 

這是甚麼狀況阿!?!?!?! 微軟竟然連自家的無襯線的中文字都不會抓?! 會不會太遜了阿!!! 於是再改成使用Arial字體看看，結果依舊沒有改善，最後面只好以殘念收場，放棄使用粗體或放棄使用微軟正黑體，等到有新的解決方案再來使用吧~

就目前利用假文產生器所產生的假文來測試，只發現碧這個字有出現這種情況，其他文字還尚未發現到，恩~這種情況大概就只能說是我太帶賽了~偏偏遇上了~哈，下次如果還有這樣不小心的狀況，就能知道問題點了

[影片]專業的定義

甚麼叫做專業!? 這問題很簡單~也很單純，請各位澳洲客戶們~仔細瞧瞧~甚麼叫做專業~好嗎? 不要再講一些有的沒的啦~

[技巧]利用清單製作成表格外觀的CSS

多年前，幫國貿局全球資訊網撰寫網頁的CSS時，因為原本的網站導覽頁面內容是用表格排版，但是我們通常都是使用清單來呈現網站導覽的結構，不過其實清單的巢狀結構也頗符合表格的的架構，所以嘗試用清單來寫成表格的外觀，當時為了思考這個CSS的寫法~還想到晚上睡不著，用了兩天才寫出來~雖然累~卻也非常的開心阿~哈哈，有興趣的人可以去看看這個頁面的HTML結構跟CSS喔^^，

國貿局網站導覽頁面網址 http://cweb.trade.gov.tw/sitemap.asp?mp=1

畫面呈現如下，看起來是表格，但原始碼卻是清單喔^^

[網站]Flash網站親和性

網站親和性(web accessibility)其實是很重要的一件事，只是有許多網頁設計嫌麻煩而不去理會他，而Flash從早期的網站親和性特差到現在~已經有了許多的改進，若是有興趣了解FLASH如何在製作中改善網站親和性，勢必不能不去看看這個網站囉。

Adobe Flash Professional accessibility

[影片]2010世足主題曲(超爆笑山寨版)

2010南非世足熱騰騰展開~主題曲超好聽~讓我們一起看看熱情的網友高超的剪輯技巧吧~XDDD

[網站]色彩理論網站

對於學設計的朋友來說

這網站有講到一點色彩心理學

在設計上面可以說是不錯的參考喔~

http://www.situatedresearch.com/blog/2010/02/color-theory-for-web-design-the-meaning-of-color/

要看中文翻譯點這裡

[資源] 六款網站草圖設計工具

上次介紹了10款網站草圖設計工具，可是還是不過癮，又不小心挖了6款不同的網站草圖設計工具出來，有興趣研究的人，可以去玩玩看喔~有幾款的介面，個人還頗喜歡的呢^^

WireframeSketcher

justinmind

pidoco

pidoco 是一個線上付費的網站原型製作程式，筆者頗喜歡這款的介面。

ForeUI

FlairBuilder

Gliffy

[影片]Say Love

這部動動的歌曲剛好是裕隆Tube的主題曲，相同的歌曲，相同的動畫風格~非常值額一看喔~(不過我還是比較喜歡郭采潔的娃娃音跟漫畫造型~超Q^^)

 

裕隆Tube 郭采潔一刀未剪版本

好可愛阿~(羞)

[轉貼] 設計師這位朋友

朋友開飯店，你吃飯他收錢，大家覺得理所當然。
朋友開文具店，買文具他收錢，大家覺得理所當然。
朋友 開服裝店，買衣服他收錢，大家覺得理所當然。
朋友做設計，收錢，大家會覺得“這個朋友怎麼那麼吝嗇”
飯店打折，大家說：“這個朋友真好”
文具打折，大家說：“這個朋友真大方”
服裝打折，大家說：“這個是真夠朋 友”
設計打折，大家會覺得“這個朋友有點小氣”
飯店說： “以後來我這吃飯，全免費！”大家說：“不行！你是做生意 的”
文具說：“以後來我這買文具，隨便拿！”大家說：“不行！不 合情理 的”
服裝說：“以後來我服裝店，全部任穿！”大家說：“不行！哪 好意思啊”
設計師：“以後有什麼設計就找我 幫手！”大家說：“好的，謝謝啦！”
大家看到物質，看到飯菜，看到文具，看到服裝，認為這些都 是要錢購買的。
但有一種行業，大家都看不到它的物質與勞動，就是設計。
當大家看到一張紙，印 著一個LOGO時，便認為這只是一張有圖案的紙。
其實，設計師的那張紙，就是飯菜，就是文具，就是服裝，就是 生存的手段。
飯店靠飯菜為生。
文具店靠文具為生。
服裝店靠服裝為生。
同樣，設計師就是靠設計為生。
當 大家吃了飯，買的東西，穿了衣服時，便大大方方的付款。
當大家讓朋友做設計的時候，卻只是說“很簡單的，隨便弄一下 就行了，很快 的”
我不想告訴你們，設計師們已經聽了上萬個朋友說同樣的這句 話。
現實上，設計師的這“隨便弄一下”，卻是 更比那碟飯菜，那支筆，那件衣服，
來的更苦更累。出賣的不是那幾元的成本，而是是精力，是健 康，是體力，
是 腦力，是消耗生命。只是設計師都躲在深夜的房間裡付出，大 家都看不到，
到大家看到的時候，就成了大家認為的幾個色塊而已。
設 計師很善良，不敢跟大家說“不”，因為說了“不”，就成了 吝嗇的人。
設計師很善良，幾秒鐘的“沒問題”，換來識幾個晝夜的通宵生 命 消耗。
設計師很善良，什麼都答應大家，因為你們是我們的好朋友。
所以，希望你們也要尊重我們的勞動成果。

 

以上內容轉貼自Chen Ying Wang

[網站] 查詢你網站中哪幾個關鍵字排在前100名

 

KeyRow是一個關鍵字查詢網站，您只要輸入網址就可以查詢道你網站中有哪幾個關鍵字會在搜尋引擎中排在前100名內，此外，還有前10名及第1名等排名。

像是壞掉的印表機的部落格，就有六組關鍵字排在前30名內(真是太弱了~哀)

 

有興趣的人可以到此 http://www.keyrow.com/ 網址試試看

[網站] 查詢關鍵字與您網站的排名

 

其實設計網站不外乎就是希望能增加自己的曝光度，另外跟曝光有關的當然就是網站排名了，這個網站可以查詢某一個關鍵字與您網站用此關鍵字查詢後的排名狀況。

例如我今天想找找看 "壞掉的印表機" 這個關鍵字在Y搜尋及G大神中，我網站的排名狀況，就給他輸入我的網址，以及我想查詢的關鍵字，就可以在右邊看到我網站的PR質以及兩搜尋引擎中的排名狀況了，建議大家可以多多用不同的關鍵字來試試看，也可以當作是針對SEO改進方式的一種資訊參考喔。

想玩的人就到這裡來吧 http://dir.twseo.org/keywordrank.php

備註：此網站搜尋出來的結果，只是您網站在繁體中文中的排名結果喔，倘若排名超出一百名以外，他的數值就會直接呈現0，這一點請各位注意囉。

[測試]Photoshop CS5 3D 地平面陰影捕捉功能

 

Photoshop cs5版本對於3D真是增加了許多便利的功能項目，其中一項就是"地平面陰影捕捉"，這功能讓你可以"非常輕鬆"的在影像中做到擬真的陰影，上圖就是利用此功能建立的，不過會使用3D軟體的人可能會笑笑的說：『這效果對3D軟體真是...簡單到爆，這樣也敢拿出來講!!』，是的! 對3D軟體來說，這效果或許簡單，但是當我們把它套用在實際影像當中的時候，就不簡單了，畢竟我不需要切換兩套軟體就能做到，此外，對於不會使用3D軟體的平面設計師來說，這更是一個福音(雖然頗耗效能的^^)，這次是用測試版本玩的，不知道正式版的時候軟體效能是否有提升，就拭目以待吧~^^

以下是軟體操作畫面

[資源]10套好用的網站草圖繪製軟體

說到網站草圖，一般人不外乎就是用visio、powerpoint、word來製作，不過用那些難用的軟體來繪製網站草圖是正確的嗎? 我想應該是因為大家倍微軟荼毒太久了的結果吧，以下介紹10款收費與免費但又超好用的網站草圖繪製軟體，保證能讓您未來事半功倍喔!~

 Axure

Axure使應用設計人員能夠創建線框，流程圖，網站原型和規格的應用程序和網站。它可以讓你使用現成的組件包括按鈕，表單，形狀和動態元素，你可以在熟悉的環境編輯。你也可以創建自己的組件庫(widget)，台灣目前有代理商以及教育訓練的公司悠識數位顧問公司，有興趣者可以到這裡看看介紹，授課講師是業界具多年專業實務經驗的資訊架構設計師，筆者本身上過該軟體課程，可謂受益匪淺阿!!

Pencil Project

Pencil 是一個免費的插件用於 Firefox 之中。一些關鍵的功能包括：內置的模型，多頁文件的支援，以及多種輸出選項，介面淺顯易懂，不過只有英文介面，筆者還蠻喜歡其中一些模型的圖像^^，功能嘛~因為是免費的，所以不用想太多，堪用就好，要是跟Axure比較的話~就相形見拙拙拙拙拙拙拙拙許多了。

MockFlow

MockFlow允許你設計和協作使用者界面的版面編排。它還配備了大量的內置組件和圖標，讓你在設計上面方便許多。

Balsamiq Mockups

Balsamiq Mockups可愛的手繪風格，讓你使用Balsamiq編排版面感覺就像你是畫圖一樣，你可以方便地調整和重新安排每個現成的組件，75個預置的控制選擇，讓你可以從一個超級簡單的對話框到一個複雜的應用，或者從一個簡單的網站到一個豐富的網站草圖設計應用。

HotGloo

HotGloo 是完全以網絡為基礎，具有大量的功能，讓你拖放和建置項目很容易。它還支援即時協作功能。

Mockingbird

Mockingbird 另一個 Web應用程序是一個側重於合作。它允許你連接多個版面編排在一起。

Cacoo

Cacoo是一個線上繪圖工具，允許你創建一個不同的圖表，如網站地圖，線框，UML和網絡圖表。

ProtoShare

ProtoShare 是一個易於使用，基於Web的原型工具，重點在合作。團隊成員可以檢討工作，並即時提供反饋，可點擊的意見和建議線框，或創造性的其它內容。

iPlotz

iPlotz允許您快速創建整體版面編排以及線框，作為網站原型製作或應用程式之規劃示意。

OmniGraffle

OmniGraffle是一個在Mac系統上的應用程式，為你提供了大量的工具，創造了驚人的線框，版面編排，但它也非常適合創建多種類型的圖表。

[站務]近期改版作業進行中

為了提供給各位更便利舒適的閱讀畫面，部落格近期改版作業進行中，版面偶爾跑位尚請各位見諒。

[圖片]10 個漂亮的手繪網站原型圖

網站原型其實經常在我筆記本出現，不過隨著越來越多網站原型的設計軟體出現，這些美麗的手繪網站原型可能就越來越看不到了，想當初在某資安公司上班時，還可以見到像是Visible Change History in Sketches這個圖片的作法，但是其他公司就看不到這種作法了，真可惜阿~不管如何，讓我們一起來欣賞這些漂亮的手繪網站原型吧~

Early Ember

圖片出處 在這裡 by playingwithshapes

 

Vimeo Video Browser Module

圖片出處 這裡 by Soxiam

 

Visible Change History in Sketches

原始文章 這裡

 

Vimeo Conversations Page Ideas

圖片出處 這裡 by Soxiam

 

Mega-Drop Down Explorations

圖片出處 這裡 by jvbates

 

Visible Change History in Sketches

圖片來源 在這裡 by ondrejvalka

 

Video Detail Page

圖片來源 在這裡 by jvbates

 

Adaptive Path Sketch Example

圖片來源 在這裡 。 文章來源 在這裡

 

Person Page

圖片來源 這裡 by Jason Robb

 

Things touch

圖片來源 在這裡 。 文章來源 在這裡

[技巧] 如何在網頁上新增一個"分享到Facebook"按鈕

對於有網頁或是部落格的人來說，把網頁內容轉貼到Facebook是一個很便利的做法，且是推廣部落格很不錯的方式，但問題是如何在網頁上面新增一個轉貼的連結?

請到這裡去取得分享的程式碼，接著再把取得的程式碼貼到你的網頁或是部落格範本中，就搞定囉。

[網站]網頁設計時不可或缺的假文產生器

假文產生器，顧名思義就是自動產生一篇不見得有意義的文章，好拿來暫用。

設計網站時，經常會需要先丟個幾段文字進去頁面中以測試實際出來的畫面感覺，以往不是去隨便抓抓個文章或者是新聞，要不就是隨便打幾個中文字再狂按複製貼上，有了假文產生器，你就不用那麼累了，不管你要幾個字都可以自己選擇外，產生的假文還包含正常文章的標點符號及常見段落字數，可說是方便至極阿。

以下精選兩個假文產生器的網站，好好利用吧^^

MORETEXT

這個網站可以直接動態插一段文字到你的內容區域去，待交給程式設計師時再刪掉就好。

 

亂數假文產生器 Chinese Lorem Ipsum

這網站可以設定你要的字數再產生假文，方便至極的啦^^

 

Lorem Ipsum 外文假文產生器

有了中文，當然不可或缺其他各國語言囉，尤其是多國語言版本的網站，要測試時去哪裡找這些語言阿?! 當然要靠假文產生器最快了~這個網站當你按上方的國旗之後就可以切換不同語言版本的假文，真是超便利的啦^^

[技巧]破解網頁禁止選取方式

這又是一個不入流的網頁設計做法，既然敢丟到網路上還怕被人複製? 對於這種不入流的作法，不給他破解一下就太對不起自己了~老樣子，就請各位隨意把一個網頁加入我的最愛後，在該項目上面點選滑鼠右鍵/內容，接著把以下這一段連結貼到URL欄位中

javascript:(function()%20{%20function%20R(a){ona%20=%20"on"+a;%20if(window.addEventListener)%20window.addEventListener(a,%20function%20(e)%20{%20for(var%20n=e.originalTarget;%20n;%20n=n.parentNode)%20n[ona]=null;%20},%20true);%20window[ona]=null;%20document[ona]=null;%20if(document.body)%20document.body[ona]=null;%20}%20R("click");%20R("mousedown");%20R("mouseup");%20R("selectstart");%20})()

然後切換到"一般"頁籤，把捷徑的名字換掉即可，未來遇到不入流的部落格或是網站的時候，就請給他按下去，你會發現網站內容又可以選取了~呵呵

[軟體]Babylon 超好用免費版翻譯軟體

從多年前用過Babylon之後就一直很喜歡這套軟體，占用資源少速度又快，且不會像眼睛先生一樣搞的畫面被占掉一大半，只是以往都要收錢，現在有免費版了~雖然某些專業的辭典還是要收錢，但目前這樣也夠應付平常使用需求了，有興趣使用的人可以到這裡來下載喔

[網站]幾個不錯的網頁圖樣網站

做網頁不可沒有圖片，沒有圖片的網頁能看嗎?不管你是專業設計師還是一般使用者，網頁加上個背景圖片(樣)，絕對是個必要的工作，以下壞掉的印表機精選幾個不錯的網頁圖樣網站，想必一定能讓你找到滿意的圖樣的。

bgpatterns圖樣編輯器

這個網站可以讓你線上編輯圖樣後，直接套用在該網頁上面讓你看效果，最後在決定是否要下載來使用，且不只可以改圖樣，還能改背景材質、背景顏色、圖樣顏色、圖樣角度、圖樣透明度…等，方便的不得了阿~唯一的缺點是背景材質太少以及圖樣只能使用該網站既有的圖樣。

Stripemania圖樣編輯器

Stripemania是一個線上條紋圖樣編輯的網站，且該網站專門讓你編輯斜條紋的背景圖樣，簡單、易用、效果好~很推薦大家去使用看看喔~

Stripe Generator

Stripe Generator 也是一個線上斜條紋圖樣產生網站，而且比上面那個網站更厲害的是，該網站條紋的角度更多變化一點。

dinpattern

這個網站的圖樣頗適合拿來當作包裝紙的，花紋偏向複雜風格，很美喔~

Squidfingers

Squidfingers 網站目前有一百多個圖樣，有點偏向布紋，想必應該能找到適合你的網站的圖樣。

K10K

K10K這個網站風格頗可愛的，花紋是有點小複雜啦，要仔細找找，可以找到很漂亮的圖樣喔。

noqta

這裡的圖樣不多，不過還頗素雅的，變化不多，可參考看看。

www.tilemachine.com

這裡的風格頗電玩風的，採用16色的設計，有興趣看看的人可以去看看喔~

everydayicons

everydayicons 的圖樣真是超超超可愛的啦~日本風格的可愛圖樣，喜歡可愛圖樣的人不可錯過這個網站喔~

Pattern8

這裡圖樣不少變化，頗新奇的，參考看看喔。

ava7

這個網頁設計得很有趣，尤其是右邊的殺死蒼蠅(有含意的)，快去看看吧。

Pattern Cooler

這網頁厲害了，直接採用SVG來做線上繪圖，所以你可以線上更改圖樣的顏色等資訊，強的勒!! 不過前提是你的瀏覽器要支援SVG才行喔。