網站改版搬家

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

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

Drop Down Menu

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

觀看範例

原始碼

Dreamweaver CS3 無法啟動

工作到一半 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

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

作品發想與進化過程

發個牢騷

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

來介紹一下基本的，首先，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 圓角框製作

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