3.21.2009

網站改版搬家

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

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

12.16.2008

Drop Down Menu


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

觀看範例

原始碼

12.03.2008

Dreamweaver CS3 無法啟動

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

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

解決方法,執行 "Regedit" 啟動機碼:

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

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

11.20.2008

USB Logo design

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

作品發想與進化過程

11.19.2008

發個牢騷

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

來介紹一下基本的,首先,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 時必開的應用程式共有九個,其中有四個是瀏覽器..。

發個牢騷才不會悶壞。

11.05.2008

CSS 圓角框製作

如果大家都用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 問題。