英文版 CS4 已經上市，中文版也將於12月登台，Fireworks 大進化的功能之一，就是能將設計稿直接匯出，變成使用 div+CSS 架構的標準 html 文件檔案！你的設計稿可以是 psd，也可以是 png，Fireworks CS4 將完整開啟這些檔案並轉換，即使是使用 Photoshop 製作的設計稿！
那麼，實際上該如何設計一份 Fireworks 讀的懂，然後完全按照設計者的想法匯出成為一個 html 文件呢？以下我就自己實際製作的心得整理幾個方向給大家參考。
開始設計
先在腦子裡規劃好網站的基本版型，例如：一般會有放識別 logo 的top 或是 header，側邊欄位的 sidebar，放置主要內容的 content，還有最後版權宣告、聯絡資訊的 footer。然後在 Fireworks 裡面開啟一個圖層資料夾，取名為「div元素」，將上述各區塊，按照版型排列，使用「矩形工具」繪製於版面上。並將每個繪製出來的區塊元素打上名字，請務必以英文命名，因為這些名字在匯出成 html 之後，會成為元素的 id，而這些矩形區塊則是支撐整個網站架構的 div 配置！
設計
在「div元素」資料夾之上，新增所需的圖層資料夾，將你的創意與設計繪製在這些圖層上。當然，已經繪製好的「div元素」也可以改變形狀，除了方正矩形之外，你也能改成具有4邊圓角的矩形，只要在之後使用「分割工具」切圖注意幾個要點即可。這部份待後文介紹。
當需要放置「表單」元素的時候，例如：會員登入欄位、核取方塊等，必須打開「視窗」>「通用元件庫」，找到「HTML」分類，開啟後拖拉使用裡面的元件來製作。Fireworks 將自動識別這類元件，匯出成為具有<form>標籤的表單元素。
另外，html裡面標題元素：<h1>~<h6>等，也能使用「通用元件庫」裡的「標題1」~「標題6」來對應。需要針對上述元件設定詳細屬性，則開啟「視窗」>「元件屬性」來設定。字型、字級、顏色、行高，將會轉成CSS樣式。
分割切圖
這個部份必須注意幾點。首先，我們不需要整個網站切滿分割區域才能匯出，只需要針對元素、屬性製作分割區域即可。例如：要變成背景「圖片」的部份，只需要切一塊小方塊，在「分割屬性」的部份選擇「背景影像」，設定是某重複，或是沿著 x 軸 repeat，這樣 Fireworks 自動會將 CSS 的 background 屬性指向這張小圖片。
另外，文字的部份，除非是具有特殊字型與效果的字體，可以圖片形式匯出之外，其餘會以「電腦字」型態出現的文字，都不需要「分割」！在Fireworks 設定的字體屬性將會自動轉成 CSS。
在「設計」部份，如有使用元件庫製作「表單元件」，也不需要作分割。如上所述，Fireworks 將自動判定，匯出成為具有 form 標籤的表單。
如果需要製作自動依照內文延伸的圓角區塊，切圖的時候必須將區塊分為「上」、「中」、「下」3個部份，並且將「中」區塊的圖片設定為「背景影像」。例如：一個 id 為 sidebar 的圓角矩形，上方左右2個圓角為一張圖片，下方左右則為另一張圖片，中間則另外輸出成背景影像，一個具有圓角的div 區塊就完成了！
匯出
文件完成之後，選擇「檔案」>「匯出」，類型選擇「CSS 和影像(.htm)」，也可以指定圖片存放的資料夾，然後按下「儲存」，一個具有標準html 與 CSS 的網頁就完成了！
附上 Adobe 官方教學影片，可以更加清楚整個過程唷！
Read More...
Summary only...
最近比較忙，好久沒寫文章，這次來分享一下使用 Photoshop 色彩描述檔的心得吧！
話說有在做平面印刷的人一定都知道色彩描述檔這種東西，不過沒有接觸過的人可能就很難了解他的作用。可以把他看作是圖稿的顏色識別證，基本上掛上相同的識別證之後，作品在兩台電腦之間是不會有太大的差異的。
不同的色彩描述檔，有著不同的色域。色域越廣的描述檔所呈現出來的圖稿越鮮艷、漂亮！所以，如果我們想要讓自己的照片在經過 Photoshop 調整之後還能更加閃亮動人，我們就不能不認識這個了不起的功能了！
以下我們來作個小實驗，順便也能了解在 Photoshop 底下，如何將圖片色彩描述檔轉換成較廣色域的描述檔！
Step 1
首先，我們先將 Photoshop 內建 RGB 描述檔改為 Adobe RGB (1998)，這是目前色域最廣的描述檔。方法為：選擇「編輯」>「顏色設定」，開啟設定視窗。「使用中色域」的地方下拉選取 Adobe RGB (1998) 然後按下「確定」。
Step 2
然後準備一張圖片，並在 Photoshop 裡面開啟他。
Step 3
接下來，我們要用 2 種不同的方法來另存這張圖片：
A. 「檔案」>「另存新檔」，檔名任意，最好與原來有所區別。JPEG 儲存對話視窗中「品質」選擇最大，按下「確定」儲存。
B. 「檔案」>「儲存為網頁與裝置用」，開啟對話視窗，檔案類型選擇 JPEG，品質最大 100 ，然後記得勾選「ICC 描述檔」選項，按下「儲存」，檔名最好與原圖片與上面 A 方法有所區別。
Step 4
用 Photoshop 以外的軟體分別開啟剛剛 A、B 方法儲存的 2 張圖片（或是直接拖曳到瀏覽器開啟）。試著比較看看！是不是差很多呢？哪一張比較鮮艷？
很神奇吧！起初我以為只要 Photoshop 顏色設定就好，「另存新檔」之後描述檔也會跟著存出，但事實上並非如此。在「另存新檔」中即使勾選（預設）了「ICC 描述檔」儲存圖片，使用其他軟體或是裝置開啟之後，圖片依然呈現較少色域的顯示狀態。相反地，利用「儲存為網頁與裝置用」來存出，卻能正確表現圖片的鮮艷與色彩！
為什麼會這樣，詳細原理其實我也不是很清楚，不過至少我們知道，下一次把照片透過 Photoshop 修的美美之後，記得別只是按下「另存新檔」，使用「儲存為網頁與裝置用」將 ICC描述檔讀入，才能讓你的照片保留完美的顏色紀錄唷！
Read More...
Summary only...
這是之前格友 Queen 提過的問題，稍微整理一下方法跟原理吧！
使用國內的「無名」、「Pixnet」等 BSP 的朋友，部落格的選單連結已經是 html 寫死的狀態，也就是說，如果不刻意去控制的話，預設的選單就是「相簿、部落格、留言、名片」這樣的連結文字，加上 Windows 作業系統對中文字型先天上支援不足，幾個大拉拉的電腦字就杵在那裡。雖無大礙，但是若能替換自訂的圖片，增加裝飾性與主體整體性的話，視覺就更棒了！
由於各家 BSP 結構不盡相同，各主題之間樣式差異頗大，在此需先做一個模型，我以「Pixnet」的架構為例子，樣式則假設為橫式選單。
html架構原始碼如下：
<ul id="navigation">
<li id="link-album"><a href="/album/">相簿</a></li>
<li id="link-blog"><a href="/blog/">部落格</a></li>
<li id="link-guestbook"><a href="/guestbook/">留言</a></li>
<li id="link-profile"><a href="/profile/">名片</a></li>
</ul>
CSS 樣式表如下：
#navigation {
background-image:url(bg.jpg);
background-repeat:repeat-x;
position:absolute;
width:400px;
height:35px;
left:200px;
top:200px;
overflow:hidden;
}
#navigation li {
float:left;
margin:0;
}
#navigation a {
color:#fff;
display:block;
width:90px;
height:25px;
text-align:center;
padding:5px;
}
顯示結果：
Step 1 替換自訂圖片
準備好自訂的背景圖片。最簡單的作法就是直接製作一整張底圖。以這個例子來說，就是製作一張寬：400px，高：35px的圖片，上面有設計好的與整體部落格風格搭配的背景，連結的文字也一併使用非電腦字的字體設計。上傳之後，修正 CSS 如下紅字：
#navigation {
background-image:url(新自訂圖片.jpg);
background-repeat:no-repeat;
position:absolute;
width:400px;
height:35px;
left:200px;
top:200px;
overflow:hidden;
}
#navigation li {
float:left;
margin:0;
}
#navigation a {
color:#fff;
display:block;
width:90px;
height:25px;
text-align:center;
padding:5px;
}
顯示結果：
Step 2 隱藏連結文字
上面可以看到預設的連結文字與我們自訂圖片上得文字產生重疊，只要想辦法把文字隱藏起來就可以了！修正 CSS 如下紅字：
#navigation {
background-image:url(新自訂圖片.jpg);
background-repeat:no-repeat;
position:absolute;
width:400px;
height:35px;
left:200px;
top:200px;
overflow:hidden;
}
#navigation li {
float:left;
margin:0;
}
#navigation a {
color:#fff;
display:block;
width:90px;
height:25px;
text-align:center;
padding:5px;
font-size:0;
*text-indent:-9999px;
}
顯示結果：
完成！！很簡單吧！
事實上，在 FireFox 底下，只要下「font-size:0;」屬性，文字就會被隱藏起來了，但 IE 不認這個屬性，所以我們必須在加上 only for IE 的屬性 「*text-indent:-9999px;」，這樣 IE6、IE7 都能正確的顯示出自定圖片之後的選單了！
另外一個重點在於 <a> 這個元素一定要給予高度「height」的屬性！如此才能確保當連結文字被隱藏之後，使用者還能正確點選連結！高度值最好與背景圖片設定相同。
進階
如果想要花俏一點，製作出滑鼠指向效果，也就是當使用者把滑鼠移到選單上面後會產生變化，我們該怎麼做呢？
Step 1 準備自訂圖片加上效果圖片
以上面的樣式為例，我希望平時選單為黑底白字，滑鼠指向選單上面的時候，才出現霓虹的效果。除了將「自訂圖片」改為白色的字之外，還必須為各各連結(這裡是4個)準備不同的效果圖片。
Step 2 CSS樣式修改
依照上面的 CSS 為基礎，再分別新增下列屬性：
#link-album a:hover,#link-album a:active{
background-image:url(01_over.jpg);
background-repeat:no-repeat;
}
#link-blog a:hover,#link-blog a:active{
background-image:url(02_over.jpg);
background-repeat:no-repeat;
}
#link-guestbook a:hover,#link-guestbook a:active{
background-image:url(03_over.jpg);
background-repeat:no-repeat;
}
#link-profile a:hover,#link-profile a:active{
background-image:url(04_over.jpg);
background-repeat:no-repeat;
}
其中「#link-album」代表「相簿」按鈕，「#link-blog」則是「部落格」，「#link-guestbook」則為「留言」，最後「#link-profile」則是「名片」。而 01_over.jpg~04_over.jpg 代表各單元按鈕的效果圖片。「#」後面的名稱，各家 BSP 結構不相同，可以開啟網頁原始碼來得知，FireFox 使用者則可以利用 FireBug 套件來觀察元素。通常結構都會是<li id="xxxxx">，這裡 id 名稱 xxxxx，在CSS裡面就是 「#xxxxx」。
顯示結果：
Read More...
Summary only...
項目清單(list)在網頁編寫上是很常用到的元素，常見的項目符號除了「1、2、3」數字之外，大多使用圓點或是方塊來標注個個清單，區分條列。CSS語法裡面也能選擇清單樣式的宣告，像是「list-style-type」屬性，雖然這樣的符號相當容易使用，但是卻有著無法彈性修正位置以及自訂樣式的缺點。另外一種屬性，「list-style-image」也許可以讓你替換自訂的樣式圖片，卻在各瀏覽器上存在著不一致的情況，在位置上的調整上也具有難以異動的缺點！那麼，想要製作清單圖示 最好的選擇 是什麼呢？就是利用背景「background」元素來宣告！
以下就來分享一下如何使用背景圖片來製作清單圖示吧！
Step 1 建立基本的項目清單
HTML
<ul>
<li>清單項目一</li>
<li>清單項目二</li>
<li>清單項目三</li>
</ul>
Step 2 清除預設的項目符號（以及元素內外間距）
CSS
*{
padding:0;
margin:0;
}
ul{
list-style-type:none;
}
清除預設的項目符號只要加上「list-style-type:none;」語法即可。這裡有另外一個重點，在於清除瀏覽器預設的內外間距。我的習慣會在編寫CSS之前下一個 *{margin:0; padding:0;} 的語法，意思是宣告整個網站「所有」元素內外間距皆為 0 ，而 * 指的就是「所有元素」。
為什麼要清除所有預設的屬性呢？原因無他，就是為了清除各瀏覽器之間的差異！以項目清單的「縮排」為例子，在 FireFox 底下預設是使用 padding 來呈現，而在 IE 則是 margin 。將所有瀏覽器基準同於一線的時候，再去作調整，則每個瀏覽器之間的差異就不會太大了！
Step 3 自訂縮排間距
CSS
ul{
list-style-type:none;
margin-left:20px;
}
清除了預設的縮排之後，我們就可以隨心所欲將項目清單位置作調整。這裡我使用 margin-left: 20px 。可依情況改變。
Step 4 加上自訂的背景圖片
CSS
ul{
list-style-type:none;
margin-left:20px;
}
li {
background-image:url(images/icon01.gif);
background-repeat:no-repeat;
}
針對 li 下背景圖片的屬性，我們還必須增加一個 no-repeat 屬性，免得背景圖片一直重複，以致整個 li 被圖片淹沒。
Step 5 調整背景圖片位置
CSS
ul{
list-style-type:none;
margin-left:20px;
}
li {
background-image:url(images/icon01.gif);
background-repeat:no-repeat;
background-position:0 0.4em;
}
在上一步，背景圖片的預設位置，將會對齊元素的 left 與 top ，也就是左上方，這在每個瀏覽器中都是相同的。使用背景代項目符號的優點，就是能調整符號的位置！在這裡，「background-position:0 0.4em;」語法後面的2個數字分別代表：靠左 0px ，靠上 0.4em。0.4em 圖片正好垂直置中於文字的行高。
背景定位的數值可以自行調整，數值大小將取決於網站字級、行高等因素而有不同。編寫的時候，可以嘗試不同的值，以達到自己滿意的效果。
Step 6 調整項目位置
CSS
ul{
list-style-type:none;
margin-left:20px;
}
li {
background-image:url(images/icon01.gif);
background-repeat:no-repeat;
background-position:0 0.4em;
padding-left:12px;
}
最後，針對每個項目做靠左的定位，這裡必須使用內距 padding-left:12px; 的屬性，來讓項目定位在正確的位置上。數值可以依據符號圖片的寬度做調整，儘量不要靠圖片太近。使用圖片寬度較大的，就必須將數值調整更大了！
完成！
一個具有調整彈性，又能兼容各瀏覽器的「背景圖片製作的項目符號」就完成了！如果覺得項目與項目之間的行距不夠高，也能針對 li 下 margin-bottom:8px; 拉大與下面項目的距離。
Read More...
Summary only...
對於大部分的電腦使用者來說，並不是很清楚RSS是什麼，也不會使用閱讀器來訂閱新聞與部落格文章。事實上，一些mail服務商都有提供RSS訂閱以及新聞閱讀的服務，不過我想並不是很多人有興趣去了解。
FeedMyInbox 這樣的免費服務，正好提供簡單的介面以及步驟，讓你輕鬆掌握最新消息，並且訂閱喜愛的部落格文章！真的很簡單，他的網站甚至只有2欄表單加一個按鈕，你完全不用了解RSS，也不需要去找尋RSS來源，你只要知道兩件事情：
第一：你所喜愛的網站網址。
第二：你自己的 Email 地址。
然後，你只要每天打開你的信箱，就能掌握並閱讀你想要的所有資訊！夠Easy 吧！以下，就訂閱方法作簡單圖解吧！
1. 在網站一開始的畫面，分別輸入「網站連結」以及「Email位置」。然後按下「Submit」送出按鈕。
2. 出現以下畫面之後：
到剛剛所輸入的信箱裡，會出現確認信件，點下並啟動確認連結。
3. 完成！開始使用Email訂閱新聞與文章囉！
Read More...
Summary only...
Remember the milk看字面就知道，「記得買牛奶！」，是一個相當好用、功能強大的 to-do list 線上服務，支援中文。他有相當完善的整合，可以放到Gmail，可以用Twitter提醒你，也可以放到任何可以嵌入語法的服務裡或是網頁面，讓你想忘記事情都忘不掉！
現在我們就來將他放到我們的Netvibes裡面吧！
首先，直接到Remember The Milk的Service頁面：
很簡單吧！這樣一來RTM就會出現在你的小宇宙囉！
Read More...
Summary only...
之前介紹過「將iGoogle小工具匯入Netvibes」的方法。不過似乎在Google Calendar小工具部份，會出現「抱歉！ 無法在 IFrame 中轉換需要內置的小工具。」這樣無法匯入的狀況。不過沒關係，我們還是可以直接使用Google Calendar提供的其他嵌入方法！
以下就來說明一下：
Read More...
Summary only...
使用iGoogle已經蠻長一段時間，主要是用了很多Google的服務，自然而然在整合方面還是自家的最好！最近同事胡廣傳了一個服務給我，就是 Netvibes！說是比Google Reader還要花俏的RSS閱讀器，很適合我。使用了一下，他比較像iGoogle這樣的個人化首頁服務吧！
記得「異塵行者」在他的部落格裡一篇「做自己的funP新聞通，用 Netvibes小宇宙打造電腦玩物資訊通」文章就有提過Netvibes，只是那時候太忙了，沒有時間研究。今天就給他好好使用一番！
基本上iGoogle的小工具大部分都能放到 Netvibes 裡面，底下就來整理一些方法吧！
將iGoogle小工具放到Netvibes：
Read More...
Summary only...
之前寫過「使用CSS+Div佈局網站」，透過float與clear屬性搭配，完成網頁佈局，也一直都是我在實務經驗上使用的方法。這幾天發現國外有人提出「No div, no float, no clear, no hack*, no joke!」這樣的訴求，目的是少用float屬性，以減少IE上的bug！沒有Div、沒有Float與Clear，還真是別開玩笑啊！（no joke！）
其實，我使用float與clear到現在，IE for Win倒是沒出現什麼問題，至少在網頁佈局上是這樣的。
到底如何「No div, No float, No clear」來製作網頁佈局呢？原理是使用列表項目來達成這個目的！也就是使用<ol><li></li></ol>，並配合dispaly:table這樣的屬性。
我自己這裡試過一下，是真的可行！不過仍然需要一些CSS hack！
Html代碼如下，像這樣佈局：
<ol id="main-wrap">
<li id="tw">Head</li>
<li id="cw">
<ol id="content">
<li class="left">section left</li>
<li class="center">section center</li>
<li class="right">section right</li>
</ol>
</li>
<li id="fw">Footer</li>
</ol>
然後加上CSS：
#main-wrap{
list-style:none;
width:900px;
border:3px double #ccc;
margin:15px auto;
padding:2px;
}
#tw,#fw{
font-size:18px;
font-weight:bold;
text-align:center;
padding:15px;
background-color:#33CCCC;
overflow:hidden;
margin-bottom:5px;
}
#cw{
display:table;
table-layout:fixed;
margin-bottom:5px;
}
#content{
display:table-row;
list-style:none;
*margin-top:-17px;
}
.left, .right, .center{
display:table-cell;
*display:inline;
*zoom:1;
vertical-align:top;
padding:5px;
color:#333;
}
.left{
width:190px;
background-color:#CCCCCC;
}
.right{
width:240px;
background-color:#CCCC99;
}
.center{
width:440px;
background-color:#99CCCC;
}
紅字部份則是重點。透過將『.left, .right, .center』等元素加入『display:table-cell』屬性，在FireFox底下就已經完成佈局了！但是為了IE，還必須加上CSS hack，『*display:inline; *zoom:1; vertical-align:top;』原理其實很簡單！
可是這樣一來還沒開始填裡面的東西，html原始碼與CSS就已經一大串了！純屬創意之作吧！感覺不是很實用。不過也提供另一種思考模式，可以不用老是只想到Div了！
這裡有更詳細的說明唷！
Read More...
Summary only...
軟體名稱：資料備份精靈Ver 2.05專業版
性質：Freeware
下載：Download
功能簡介：
- 可以自動每分鍾、每小時、每天、每週、每月定時備份檔案。
- 完整的區域網路備份。
- 內建「檔案壓縮」功能，備份檔案格式為 7-ZIP 壓縮格式。
- 詳細的備份日誌檢視功能，可知道到底備份多少檔案。
- 支援 Jazz 及 Zip、USB 行動碟、USB 硬碟等外接裝置的備份。
- 程式不用安裝，所有程式不超過 400K，解壓縮後就可以使用，無須擾人的 OCX 元件。
相當好用的備份軟體，可以自訂時間間自動備份，也可連結區域網路。
小巧簡單，不用安裝！
簡單使用教學
Read More...
Summary only...
現業界大部分還是以傳統table作為網頁佈局的主流，也就是在一個大大的table裡面，填上內容、選單等網頁資料。事實上，這不僅增加程式碼的複雜度，讓程式人員困擾之外，也讓網站的效能大大降低！又，設計人員若需要維護修改，也會相當麻煩。
使用DIV佈局，可以使程式碼簡單化，讓程式人員輕易套用各種功能。
內容內容內容內容內容內容內容內容
如上面的前台顯示為例，若使用table呈現，程式碼為：
<table border="1" cellpadding="0" cellspacing="0" width="300">
<tbody>
<tr><td>內容內容內容內容內容內容內容內容</td></tr>
</tbody>
</table>
相同樣子，若改以Div呈現，程式碼為：
<div style="width:300px;">
內容內容內容內容內容內容內容內容
</div>
光是這樣簡單的前台顯示，就有如此大的差別，何況一個結構複雜的網站，一大堆table結構更是令人昏頭轉向。所以利用CSS，配合Div佈局網頁，將是一個重要的課題！
該如何使用CSS+Div製作網頁佈局呢？
Div若不加任何style，會依照html程式碼的順序排列，也就是說寫在越前面的Div，就會在越上面顯示。若像下方這樣的html：
<div>
內容內容內容內容內容內容內容內容
</div>
<div>
內容內容內容內容內容內容內容內容
</div>
<div>
內容內容內容內容內容內容內容內容
</div>
前台顯示出來的就會是像這樣子：
內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容
但是一般網站結構，大概分為上方形象區、左側子選單、右側主內容、以及下方版權宣告，如下方顯示：
TOP上方形象選單區
LEFT左側子選單區
RIGHT右側主內容區
FOOTER下方版權宣告區
要製作如此的網站結構，其實相當簡單！
html程式碼部份，只要像下面這樣寫：
<div id="mainwrap">
<div id="top" >TOP上方形象選單區</div>
<div id="left" >LEFT左側子選單區</div>
<div id="right" >RIGHT右側主內容區</div>
<div id="footer" >FOOTER下方版權宣告區</div>
</div>
沒錯！html部份就是這樣簡單！當然這樣還沒完成，我們必須增加樣式給每個Div，讓他們能照我們的想法，排進每個位置去！
增加一個CSS檔案，將路徑指到這個html，在CSS樣式裡面增加下面的語法
#mainwrap{
margin: 0pt auto;
padding: 5px;
width: 400px;
font-size: 15px;
font-weight: bold;
border:1px solid #ccc;
}
#top{
padding: 5px;
background-color: rgb(0, 204, 204);
text-align: center;
color: rgb(0, 51, 102);
}
#left{
padding: 5px;
background-color: rgb(255, 204, 51);
width: 90px;
height: 100px;
float: left;
color: rgb(255, 102, 0);
}
#right{
padding: 5px;
background-color: rgb(243, 238, 218);
width: 290px;
height: 150px;
float: left;
color: rgb(204, 153, 102);
}
#footer{
padding: 5px;
clear: both;
background-color: rgb(204, 51, 0);
text-align: center;
color: rgb(255, 255, 255);
}
我們使用float:left的語法，讓左右兩塊Div能夠並行，而不會垂直排列，再者，我們在footer部份增加clear:both的語法，將上述float:left語法的效果清除，讓footer得以依照left以及right兩塊Div的長度作正確的定位！
現在可以看看你的前台顯示，是不是一個簡單的網頁架構就已經完成了呢！
這樣的作法，由於html與樣式是拆開的2個檔案，當設計人員必須針對部份樣式修改的時候，程式人員完全不會感到困擾，因為設計人員只要針對CSS檔案作修正，html則是完全不會改動，效率是不是增加許多呢！再者，這樣的html簡潔、有效，還能增加搜尋引擎最佳化！
left下方空白的部份，我們可以依照需求，在mainwrap增加與left相同的背景顏色屬性，這樣網站看起來就更完整了！
Read More...
Summary only...
最近比較忙，好久沒寫文章，這次來分享一下使用 Photoshop 色彩描述檔的心得吧！
這是之前格友 
項目清單(list)在網頁編寫上是很常用到的元素，常見的項目符號除了「1、2、3」數字之外，大多使用圓點或是方塊來標注個個清單，區分條列。CSS語法裡面也能選擇清單樣式的宣告，像是「list-style-type」屬性，雖然這樣的符號相當容易使用，但是卻有著無法彈性修正位置以及自訂樣式的缺點。另外一種屬性，「list-style-image」也許可以讓你替換自訂的樣式圖片，卻在各瀏覽器上存在著不一致的情況，在位置上的調整上也具有難以異動的缺點！那麼，想要製作清單圖示 最好的選擇 是什麼呢？就是利用背景「background」元素來宣告！
發表文章
