i-design blog

網站改版搬家

underfire9@gmail.com (underfire) — Sat, 21 Mar 2009 06:35:00 +0000

決定架了WordPress，一方面方便管理，一方面順便練功，設計WordPress Themem以及熟悉其系統。

新站網址不變 http://i.design.tw

Drop Down Menu

underfire9@gmail.com (underfire) — Tue, 16 Dec 2008 14:25:00 +0000

Drop Down Menu 重點在於絕對位置的利用，首先將第二層選單<ul>使用極大負數隱藏到瀏覽器可視範圍之外，當第一層選單滑鼠 hover 時，再將第二層的<ul>拉回來。

觀看範例

原始碼

Dreamweaver CS3 無法啟動

underfire9@gmail.com (underfire) — Wed, 03 Dec 2008 05:09:00 +0000

工作到一半 Dreamweaver 突然自動關閉，在開啟中途又會自動關閉，等於宣告死刑，記得自己上次重灌電腦就是因為這個原因，這次工作滿檔，可沒時間重灌，只好乖乖花了進一個小時做 Dreamweaver 的修復動作，無效，再花三個小時移除 Adobe Design Premium CS3 並重灌，還是無效。沒輒了，只好回頭灌 Dreamweaver 8，但又實在不甘心，Google 一下竟然發現救命文，前後只花了兩分鐘就搞定..

這件事告訴了我，凡事先 google 一下準沒錯。

解決方法，執行 "Regedit" 啟動機碼：

[HKEY_CURRENT_USER\Software\Adobe\Common\9\Sites]
把底下的Site設定值皆刪除掉，保留-Summary即可

其原因為 Dreamweaver 紀錄的網站暫存記憶讀取錯誤，導致開啟中途失敗，也就是說，網站資料內網頁與相關檔案過多導致讀取錯亂。四、五十個算多？

USB Logo design

underfire9@gmail.com (underfire) — Wed, 19 Nov 2008 20:03:00 +0000

User Story Baker 為公司準備開發的一個新案子，LOGO 設計緣由是“Baker”這個單字而來，印象中麵包(糕點)師傅都會帶著一頂帽子，因此透過網路中搜尋到的一些圖片而設計出這個 LOGO。如果 hlb 找圖片的時間不算，其實從開啟 Photoshop 到完工只花了 20 分鐘，承蒙頭頭 hlb 的不嫌棄，所以讓這個 LOGO 的設計過程成了最近最愉快的結果。

作品發想與進化過程

發個牢騷

underfire9@gmail.com (underfire) — Wed, 19 Nov 2008 10:23:00 +0000

雖然說長久以來已經習慣了這樣的電腦工作環境，但偶而意識到時仍會忍不住咒罵幾聲，並納悶這到底是不是每位網頁設計師的標準工作環境。靠電腦吃飯的職業中不知道是否有更誇張的，看到工作列上滿滿的執行程式那種無奈實在難以言喻。

來介紹一下基本的，首先，Adobe Photoshop 當然少不了，切圖抓色什麼的都得靠它。然後 Dreamweaver，對於非 MAC 族群 (or Programer) 的工作者而言，寫 html/css 還是首選。再來，瀏覽器，這是最大的傷痛，IE7 不能少，IE6 得支援的，Firefox 是標準，所以每次開始寫 html/css 時這三個是必開的，當然也可以在標準的 Firefox 底下寫完再回過頭 fix ie，但又實在不想一次面對那麼多的 bug，所謂躲的了一時，躲不了一輩子，挺起胸膛才是正道。

再來的選項其實幾乎都必開，Opera(內建IRC) 公司溝通都靠它；MSN 談事情；Skype 是公司開會時的工具；Winamp 聽音樂舒發情緒排遣寂寞；Dr.eye 還是得翻譯一下；TortoiseSVN 公司案子用它來上傳管理；AWicons Pro 製作 favicon.ico。所以偶而開一下的 AWicons Pro、TortoiseSVN、Skype 不算，每當 html/css 時必開的應用程式共有九個，其中有四個是瀏覽器..。

發個牢騷才不會悶壞。

CSS 圓角框製作

underfire9@gmail.com (underfire) — Tue, 04 Nov 2008 19:07:00 +0000

如果大家都用Firefox自然就沒有這篇教學啦，"-moz-border-radius" 就可以搞定一切，不過很可惜，目前 IE 仍舊是佔有率最高的瀏覽器，所以只好想辦法用多數倍的手續來達到圓角的效果。

利用背景圖做圓角有很多方法，在未知高度、寬度確定的情況下，最簡易的方案是 Sliding Doors，也就是將原圖切成上下兩張，一張給<div>，一張給DIV底下的<bd>。這裡教的方式是在寬度未知，或是同樣背景可能會應用在多種寬度的情況下，這時不可能再切多種寬度的背景，太麻煩了，改用現在的“定位”方案將可大量減少圖片量以及CSS Code。

首先畫出要的圓角圖，並將該圖整個切出。圖片大小可自己掌握，只切出一個圓都可以，只要到時處理 CSS 時能抓到圓的半徑寬度即可。

Html 按照一般方式給標籤與內容，特別的地方是要再多給四個div來處理四個圓角：


<div class="tab">
<h5>IE6 1px gap on absolute elements</h5>
<p class="content">I get a number of requests for help with rounded corners each week and the common problem is that ie is one pixel out on the bottom corners and on the right corners.</p>
<div class="round top-left"></div>
<div class="round top-right"></div>
<div class="round bottom-left"></div>
<div class="round bottom-right"></div>
</div>

CSS 部分最外層的 div 給相對位置，將四個角相同屬性的部份拉出來(.round)給寬、高、背景圖以及絕對位置，然後再針對四個角給背景圖的位置：


.tab {position: relative;padding: 40px;width: 600px;background: #333;color: #fff;}
.tab .round {width: 12px;height: 12px;background: url(round-bg.gif) no-repeat;position: absolute;}
.tab .top-left {top: 0px;left: 0px;background-position: top left;}
.tab .top-right {top: 0px;right: 0px;background-position: top right;}
.tab .bottom-left {bottom: 0px;left: 0px;background-position: bottom left;_margin-bottom: -1px;}
.tab .bottom-right {bottom: 0px;right: 0px;background-position: bottom right;_margin-bottom: -1px;}

至於 _margin-bottom: -1px 這東西是針對 IE6 的 Hack，原因是 IE6 對於寬、高單位為單數時會自作聰明的自行多加 1pix，詳情請參考 IE 1px discrepancy。

完整範例請參考這裡。

筆者還在皮毛階段，針對這方法可延伸出更多進階技巧，另一個基本方案是將背景圖片放大(例如：1000 x 4000)，這種方式就可以使用邊框，也可避免 IE6 多出來的那 1px 問題。

IE7-JS

underfire9@gmail.com (underfire) — Thu, 30 Oct 2008 17:14:00 +0000

看來似乎是個針對 IE 瀏覽器種種問題一勞永逸的方案。IE7-JS 是個 JavaScript library，主要功能是修正 IE (主要針對IE5+) 行為，讓 IE 看起來就像個支援網頁標準的瀏覽器，其中幾個重點是讓 IE6 支援 PNG、支援 max-(width、height), min-(width、height)、支援:hover..等等，詳細列表可參考官方文件。

使用方法只需將js載入即可


<!--[if lt IE 7]>
  <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

或是針對IE5-7


<!--[if lt IE 8]>  
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>  
<![endif]-->

當然也可以下載至本地使用。

比較美中不足的地方，是要使用 PNG 效果的話，圖檔名稱後方必須加 *-trans.png，另外在頁面載入時仍會出現短暫的"原始面貌"。

設計兩三事

underfire9@gmail.com (underfire) — Thu, 23 Oct 2008 12:36:00 +0000

看到先前為某建設公司設計的BOT宿舍網站上線了，只能用慘不忍睹來形容。

這個專案流程是這樣的，建設公司企劃出網站內容，找上我合作的程式開發公司，然後程式開發找我進行視覺設計，我設計出符合企劃的網站視覺，同時經過建設公司確認後切成樣板給程式開發套程式，整個流程聽起來應該沒問題才是，但偏偏上線後完全走樣。

這個案例跟視覺或程式都無關，問題癥結出在企劃。企劃當初無法確認掌握該網站實際結構內容，草草丟出來就要視覺開始設計切版，結果完成品出來後東改西改，一再推翻原有的企劃與設計。我很想做一個負責任的 designer，但畢竟容忍度有限，加上程式心地善良也不好意思再找我改東西，因此網站上線，爛成一團。

很為負責的那位程式抱屈，但更不爽的是該建設公司以及底下那位不負責的專案企劃，為什麼可以企劃出最後完全被推翻的網站企劃？

Javascript in Modern Web Design

underfire9@gmail.com (underfire) — Wed, 01 Oct 2008 06:49:00 +0000

Web Designer Wall一次介紹多款目前最流行的Javascript的相關應用，Dojo、jQuery、MooTools、Prototype..等，實際應用範圍從照片展示、Tooltips到Switcher等應有盡有，可以好一段時間都不用再Google半天還找不到心目中想要的效果了。

Javascript in Modern Web Design

Vodafone Mayfly Screensaver

underfire9@gmail.com (underfire) — Tue, 30 Sep 2008 13:14:00 +0000

當然，三年前逛到Vodafone : Live 24 Hours時就非常喜歡它的風格，桌布也用了好一段時間。今天心血來潮重溫舊夢，發現網站還提供了螢幕保護(screensaver)。猶記得上一次裝螢幕保護是駭客任務那個著名的日文與字母混合的母體解碼畫面，再來就是一些效果很糟或經驗很差的，不過這次的姑且一次卻讓我愛上了這個螢幕保護，也讓我擺脫了晃來晃去的Windows XP Logo。

和多繽紛樂

underfire9@gmail.com (underfire) — Mon, 22 Sep 2008 05:21:00 +0000

服務公司和多參加了Yahoo 2008 Open Hack Day，昨天在台北市青少年育樂中心順利結束。敝舍的和多繽紛樂在一優勝、二佳作三個總獎項之中取得佳作，算不算好成績搞視覺的實在難以進入狀況，不過就第一次參加這類活動的我來說，雖然沒能全程在現場參與過程，不過第一天在現場的感覺是不錯的，飲料、啤酒、零食、無名美少女(沒看到Orz)，那種氣氛還挺特別的。

關於和多繽紛樂的介紹請參考同事 Xdite 所寫的這裡，與 Boss hlb 所寫的這裡，畫面展示在這裡，完成品在這裡，有興趣找敝舍接案子、談合作的請點這裡。

在視覺設計方面，這次比較特別的經驗是因為完全不用考慮ie6，所以圖檔幾乎全使用PNG，PNG圖檔的透明特性輕易的實現了許多視覺效果，套句hlb的話

寫 CSS 完全不考慮 IE，真是一件愉快無比的事情

。

CSS技巧欄位自動互相適應高度

underfire9@gmail.com (underfire) — Thu, 21 Aug 2008 11:05:00 +0000

網頁設計版面中的欄位當有運用到背景圖時，為了整體視覺效果，常會遇到需要能夠互相適應高度（視覺上）的問題，而這對於 CSS 的確是個麻煩，當然這可以利用 JavaScript 去處理，但若不想靠程式時，只好利用一些小技巧去達到這個目的。

不同的需求通常有不同的解決方案，在這筆者以最近設計的 Opmsg 為例子（參考畫面），在這三欄的設計中，需求是中間欄位能夠自動適應左欄的高度，當中間欄位內容高度少於左欄時，其背景仍能高於左欄（參考畫面）。

首先把中、左兩欄合併定義成為一個欄位取名 #column-1 並 "float: left"，最右欄取名 #column-2 並 "float: right"，右欄由於打算讓它完全依內容決定高度，因此接下來依一般方式處理即可。

回過頭來，剛剛的 #column-1 先放置中間欄位的背景圖上半部，並將圖片靠上靠右，#column-1 底下再放置一個 div 取名 #bd，然後將中間欄位下半部的背景圖切大張（高度）一點，放置在 #column-1 #bd 靠下靠右，這時中間欄位雖然還沒切，但背景已經出來。

#column-1 #bd 底下再切出兩個欄位分別為 #left（float: left）與 #right（float: right），而這裡的 #right 其實就等於擁有背景圖的中間欄位了。#left 左欄依前面 #column-1 的方式將背景圖放上基本上就大功告成。

在這個案例中，中間欄位的背景圖片放在最外層，因此在裡頭的左欄可以實際控制著中間欄位在視覺上的最小高度，雖然並非真的讓欄位互相適應高度，但還是可以滿足實際的視覺需求，有點像是在變把戲（trick）XD。

當然 opmsg 的 CSS 實際上要複雜一些，不過基本上就是這個原理。

Stylish, Gmail themes

underfire9@gmail.com (underfire) — Wed, 23 Jul 2008 20:52:00 +0000

Stylish 是 Firefox 的擴充套件，專門用來為任何網頁自訂 CSS 樣式，而這個 Gmail themes 就是透過 Stylish 所訂定。看膩 Gmail 傳統介面？試試這個吧。

安裝 Stylish

Gmail themes CSS下載及安裝方式

Stylish 介紹 (mozilla Taiwan)

IE, input button double padding

underfire9@gmail.com (underfire) — Wed, 23 Jul 2008 20:05:00 +0000

IE 下的又一個 bug。padding double 是IE著名的bug，一般針對這個問題的解決方案是將上層 box 設為 display: inline-block，不過這個方法在 input 中不適用，在 hlb 的協助下，經過一番折騰，終於找到針對 input 中的解決方案：


input button {
  width: auto;
  overflow: visible;
}

Drag and Drop World

underfire9@gmail.com (underfire) — Mon, 21 Jul 2008 17:11:00 +0000

表格變色問題

underfire9@gmail.com (underfire) — Sun, 15 Jun 2008 12:34:00 +0000

Mouseover這個小技巧以前當然用過，不過這兩天因新案子需要，出現IE上不管怎麼試就是沒有背景的怪事，Firefox上想當然耳的完全正常，在想破腦袋兩天後，突然想起最近開始使用的reset.css:


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

拿掉果然問題解決。

什麼原因已經無力深究，有興趣的先進們可以查查。

Free Icon Download

underfire9@gmail.com (underfire) — Sun, 15 Jun 2008 09:41:00 +0000

Outlaw Design Blog 從網路中收集的免費Icon，應該都是今年所釋出的作品。

這些免費Icon直接拿來使用的機率不大，不過卻可以提供不少設計的靈感與方向。

101 Free Icon Sets that Kick Ass

CSS 背景透明效果

underfire9@gmail.com (underfire) — Thu, 12 Jun 2008 16:14:00 +0000

看了幾篇教學發現都被誤導了，一般網站教學的寫法是：


filter:alpha(opacity=50);   /* IE */
-moz-opacity:0.5;          /* Moz + FF */
opacity:0.5;               /* CSS3 */

反覆測試發現都無法在IE底下正常顯示，另外這些教學還針對table用了另外一種寫法：


filter:Alpha(Opacity=80, FinishOpacity=80, Style=2);

結果用來套在div或span果然都可以正常出現半透明效果，因此正確的用法應該是：


filter:Alpha(Opacity=80, FinishOpacity=80, Style=2);  /* IE */
-moz-opacity:0.5;  /* Moz + FF */
opacity:0.5;  /* CSS3 */

要視覺性還是親和力

underfire9@gmail.com (underfire) — Fri, 06 Jun 2008 06:43:00 +0000

網頁視覺設計究竟應該設計什麼樣的網站才是好的，這種念頭一直不時跳出來讓我思考，重親和力？重視覺？重效果？重資訊？

Smashing Magazine最新一篇文章Style Switchers Are Back: Ideas, Examples and a Contest介紹了多種效果切換的示範，文字大小、字型、顏色、版面佈局、網站主題等等，當然這個主題對我來說並不陌生，自己的網站就用了theme change，當初也是為了讓文字能更跳一點而針對original版做的改進，為視覺，也為親和力。

但話說回來，不可能每個網站設計都能面面俱到，也不可能每個網站都有那樣的成本與時間去做這樣的安排，因此，當沒得選擇只能取其一時，究竟該取哪一樣？

原本網頁設計對我來說有一個重要的概念是，看網站面向的是什麼族群，那就以那個族群為出發點去做視覺上的安排，例如當初設計遊戲網站起家，因此視覺效果就佔了絕對大的因素，強烈的用色、有趣的佈局、漸層、陰影等等，來符合遊戲族群的喜好。但這種概念不能囊括弱勢族群，種種視覺障礙者對於我那時期的設計肯定無法接受。

那簡潔清楚的設計方式呢？視覺障礙者雖能夠清楚了解網站所要釋出的訊息，但卻有可能妨礙視覺發揮的可能性，尤其Flash的應用豈不是更成了大忌？

看來看去似乎只能仰賴CSS的開發能擴大它的功能與範圍，又或者開始學習JavaScript，透過JavaScript來達到更多可能性？積極一點的態度是，針對各個可能性都儘可能的去嘗試，並逐一修正。被動一點的，看業主的需求，滿足業主需求才是首要之道，但走到這步就太悲哀了。

sudomake online!

underfire9@gmail.com (underfire) — Thu, 29 May 2008 11:48:00 +0000

到新公司完成的第一個案子上線了。設計這種類型的網站視覺還是第一次，這種模式的工作方式也是第一次，整個過程算順利，有一些可以加強改進的地方，從中學到許多，也嘗試自己不曾做過的東西。

關於sudomake介紹請參考和多部落格% sudo make 上線，想找和多為您開發新專案，請至Handlino contact，網站需要視覺設計，請參考我的聯絡方式。

網頁視覺與平面視覺

underfire9@gmail.com (underfire) — Sun, 25 May 2008 06:27:00 +0000

目前還在進行中的AV'網站視覺設計突然遇到了這樣的問題，也讓我思考了一下平面與網頁視覺的差異處。

簡單來說，網站視覺設計所要面對的限制就是將之化為網頁格式，無論初期用的是Photoshop、Illustrator、還是其他類型繪圖軟體，在設計之初，就必須先考慮到如何切版、如何運用CSS將之呈現、如何在index之外還能呈現同一風格、如何盡量讓同一元素盡可能重複運用、...，平面設計除了主題與畫框大小之外，其餘的是天馬行空任由發揮。

當然，平面設計出來的東西還是可以運用在網頁視覺，但目前的途徑只有Flash可以做到完整呈現平面設計概念的東西，但相對的成本與時間也就不會是一般網頁設計能夠cover，而且那已經屬於多媒體領域，已經超出網頁設計標準的範圍。

因此，當我收到廣告公司出的index畫面，就發現為什麼廣告平面會是廣告平面，網頁視覺會是網頁視覺，而這兩種屬性通常只會是網頁視覺包含廣告平面，廣告平面卻無法同時做到網頁視覺，因為廣告平面缺少了網站整體概念，model不存在於廣告平面中，廣告平面的天馬行空完全限制了可重複運用這在網頁視覺中的大原則，多了網頁視覺的限制，廣告平面不會再是廣告平面，但是廣告平面稍加導引，卻會是Flash這種多媒體格式的好人選，當然前提之下是得先學會Flash與Action Script。

加入Handlino

underfire9@gmail.com (underfire) — Fri, 09 May 2008 09:06:00 +0000

加入新團隊，和多(Handlino)位於新竹，是一家網站設計開發公司，如有相關需求請至Handlino網站利用Contact與老闆們連絡，如果只有視覺設計部分需求的話，歡迎與本人聯絡。

btw，搭高鐵台北到新竹還真是快。

Best Of April 2008

underfire9@gmail.com (underfire) — Mon, 05 May 2008 06:13:00 +0000

挖寶嚐鮮的時間又到了，Smashing Magazine 這次收錄的內容依舊包羅萬象，從影像處理到程式運用再到免費資源介紹。不看落伍，看了又心癢。

Best Of April 2008

Free XHTML/CSS Templates

underfire9@gmail.com (underfire) — Wed, 30 Apr 2008 10:22:00 +0000

免費 XHTML/CSS 網頁樣板下載。除非是為該“樣板”量身定做的網站，否則實際拿來使用的可能性並不大(何況提供下載的頁面只有首頁)，不過對於網頁設計方向、整體排版、配色運用、甚至 CSS 使用方式都是不錯的參考範本。

Template World
Free XHTML/CSS Templates For Web Design

Free Credit Card Icons For Online-Shops

underfire9@gmail.com (underfire) — Mon, 28 Apr 2008 19:13:00 +0000

Smashing Magazine 收集的免費信用卡相關ICON下載。基本上只要是免費的資源都可以多多收集，因為永遠不知道哪天會用的上。

Free Credit Card Icons For Online-Shops