如果有一支FLASH已經放在做好的網頁裡，但是又想要可以動態的放大或是縮小，那你一定要來試試這一支 swffit ，目前這支使用起來真的是很方便，網站上的說明其實也很清楚，我先把網址放上來做個筆記，有空再來補充一下。
網站：swffit
下載：直接下載...
Read more
[+/-] : 收集大多數的連線字串
寫程式大多都會跟資料庫打交道，要連到資料庫做動作，就必須寫連線字串，告知路徑及連線方式等，但是寫一個專案大概只會ＫＥＹ一次，之後就不需要再ＫＥＹ了，為了這短短一次的動作，而要把字串背下來，根本就是神精病嘛～
但是底下這個網站，他把一些常見常用的連線方式都收下來了，只要上去查一下，然後 Copy & Pase 搞定，就是這麼輕鬆，看看底下那張圖，裡頭連IBM的as/400也有記錄，這是阿公耶～
所以，大家最好把這個網站收起來，以後就查連線字串就輕鬆多了。
PS：有空我會去把它所有的連線字串 Copy 回來，以防它不見了～
網站：http://www.connectionstrings.com/...
Read more
但是底下這個網站，他把一些常見常用的連線方式都收下來了，只要上去查一下，然後 Copy & Pase 搞定，就是這麼輕鬆，看看底下那張圖，裡頭連IBM的as/400也有記錄，這是阿公耶～
所以，大家最好把這個網站收起來，以後就查連線字串就輕鬆多了。
PS：有空我會去把它所有的連線字串 Copy 回來，以防它不見了～
網站：http://www.connectionstrings.com/...
Read more
[+/-] : [CSS] display:inline & display:block; 的意義
display:inline & display:block正確的意義其實很簡單。
display:inline;（行內）簡單的說：任何不會強迫換行，如圖片或是文字都不會強迫換行，就是屬於行內。
display:block;（區塊）簡單的說：任何會強迫換行，如表格是沒有辦法在同一行裡有一個以上的表格（並排），就是屬於區塊。
至於什麼情況要使用，一樣有空再來後補好了～...
Read more
display:inline;（行內）簡單的說：任何不會強迫換行，如圖片或是文字都不會強迫換行，就是屬於行內。
display:block;（區塊）簡單的說：任何會強迫換行，如表格是沒有辦法在同一行裡有一個以上的表格（並排），就是屬於區塊。
至於什麼情況要使用，一樣有空再來後補好了～...
Read more
[+/-] : [jQuery] flot 用 jQuery 畫圖表的 library
又一個利用 jQuery 來做事的library，flot -Attractive Javascript plotting for jQuery ，是一個可以在 Firefox2/Opera9.5/IE6/Safari3/ 以上都可以正確畫出各式圖表的 library 使用上也算是很簡單，先做個筆記，有空再來寫教學吧～
Demo 網址：Examples...
Read more
Demo 網址：Examples...
Read more
[+/-] : 又一個類似 LightBox 的秀圖效果
我先把網站附上來，有空再補篇教學～
不過，像這樣的效果，使用起來都差不多，想使用，可以先參考之前的文章。
網站：http://slideshow.triptracker.net/howto.html...
Read more
不過，像這樣的效果，使用起來都差不多，想使用，可以先參考之前的文章。
網站：http://slideshow.triptracker.net/howto.html...
Read more
[+/-] : 再來一發根據LightBox 所開發的連結效果
再來一發根據 LightBox 所開發的連結效果～
我想 LightBox 真的算是一個無人不知的套件了吧～不知道，你還敢說你有逛過網頁嗎？？
而今天要介紹的 LightWindow 更是好用，他不只能秀圖或是秀影音檔，這支 FrameWork 大概把網頁上能支援的都支援到了吧！
不多說～上去自己看看，有空再把教學補上來～
網站：http://stickmanlabs.com/lightwindow/
下載：lightwindow.zip (v2.0)...
Read more
我想 LightBox 真的算是一個無人不知的套件了吧～不知道，你還敢說你有逛過網頁嗎？？
而今天要介紹的 LightWindow 更是好用，他不只能秀圖或是秀影音檔，這支 FrameWork 大概把網頁上能支援的都支援到了吧！
不多說～上去自己看看，有空再把教學補上來～
網站：http://stickmanlabs.com/lightwindow/
下載：lightwindow.zip (v2.0)...
Read more
[+/-] : 跟LightBox 很像的 VideoBox
VideoBox 是一個可以讓視訊檔在播放時有 LightBox 那樣的效果～
我想 LightBox 應該已經算是一個無人不知的套件了吧～
好用，又不吃資源，VideoBox 也是一個只有 6kb 的輕量級套件，它使用了 mootools 套件，也用了符合 W3C 所定義的＂網頁標準化＂的 swfObject 來插入 Flash 動畫或是影片。
以上有做連結的地方，有的是我之前就有介紹過的，有的是直接連到該網站，大家看看吧～
網站位置：http://videobox-lb.sourceforge.net/
檔案下載： videobox_1.1.zip...
Read more
我想 LightBox 應該已經算是一個無人不知的套件了吧～
好用，又不吃資源，VideoBox 也是一個只有 6kb 的輕量級套件，它使用了 mootools 套件，也用了符合 W3C 所定義的＂網頁標準化＂的 swfObject 來插入 Flash 動畫或是影片。
以上有做連結的地方，有的是我之前就有介紹過的，有的是直接連到該網站，大家看看吧～
網站位置：http://videobox-lb.sourceforge.net/
檔案下載： videobox_1.1.zip...
Read more
[+/-] : 如何插入 Flash 到 DreamWeaver 中
要在網頁中插入做好的 FLASH 動畫檔 SWF 檔，最快也最簡單的方法就是在 Flash 的［檔案］下有個［發佈設定］（如下圖）
按下後就會出現下圖，只要確定第一個選項及第二個選項被打勾，其餘的就自己看著辦吧～
再按下圖中最下方的［發佈］即可。
執行發佈後，它會在你儲存檔案的地方，產生二個檔案，一個是 SWF 檔，另一個就ＨＴＭＬ檔囉，如果還想對網頁內容進行編輯，就再到 DreamWeaver 中繼續編輯吧！
相反的，如果你做的檔案沒有儲存過，或是儲存的地方是不能新增檔案的地方（光碟片上），那這個發佈的按鈕就不能使用囉！
如果你還是想直接到 DreamWeaver 中直接插入 SWF 檔的話，也很簡單，你可以直接在［插入］工具列上找到［媒體］（如下圖左邊數過去第七顆按鈕），按下第一個［ Flash］的按鈕，接下來就會詢問你的檔案放在那，跟它說了以後，就完成囉，很簡單吧！
最後，如果你還想使用更好的方式插入 Flash 檔案，或是你想知道什麼方法才是最符合 W3C 的網頁標準化，你也可以參考這一篇的方式去插入 SWF 檔。
但是這一篇比較適合有 CSS 的基礎以及一些些 JavaScript 的觀念，會比較看得懂哦～...
Read more
按下後就會出現下圖，只要確定第一個選項及第二個選項被打勾，其餘的就自己看著辦吧～
再按下圖中最下方的［發佈］即可。
執行發佈後，它會在你儲存檔案的地方，產生二個檔案，一個是 SWF 檔，另一個就ＨＴＭＬ檔囉，如果還想對網頁內容進行編輯，就再到 DreamWeaver 中繼續編輯吧！
相反的，如果你做的檔案沒有儲存過，或是儲存的地方是不能新增檔案的地方（光碟片上），那這個發佈的按鈕就不能使用囉！
如果你還是想直接到 DreamWeaver 中直接插入 SWF 檔的話，也很簡單，你可以直接在［插入］工具列上找到［媒體］（如下圖左邊數過去第七顆按鈕），按下第一個［ Flash］的按鈕，接下來就會詢問你的檔案放在那，跟它說了以後，就完成囉，很簡單吧！
最後，如果你還想使用更好的方式插入 Flash 檔案，或是你想知道什麼方法才是最符合 W3C 的網頁標準化，你也可以參考這一篇的方式去插入 SWF 檔。
但是這一篇比較適合有 CSS 的基礎以及一些些 JavaScript 的觀念，會比較看得懂哦～...
Read more
[+/-] : [AJAX] 不用寫程式就可以線上動態排序表格！！
網頁上要整理各式的資料，我想大多數的人應該都會使用表格吧！
如果放入的資料想要先經過排序，我想先把資料放入ＷＯＲＤ或是ＥＸＣＥＬ裡都是很好的選擇，經過排序後想要放回ＤＲＥＡＭＷＥＡＶＥＲ也很簡單，只需要使用＂複製＂和＂貼上＂，表格就做好囉！
但是如果你想讓使用者自己可以做排序，是任何一個欄位都能排序，而且是使用者想排就排，哇～不用說，寫程式就對了，要怎麼寫我想頭就大了吧！
今天要介簡的這個好用的 JavaScript 套件，就是針對上述的使用情況來地，下圖是還沒使用時的表格長像。
這張圖就是使用後的長像，它在表格的標題列會上底色，使用者只要在想排序的欄位上按一下，就會出現像第一欄的 Name 一欄的＂三角形＂，三角形向上就是遞減（由大到小）排序，三角形向下就是遞增（由小到大）排序，很方便吧！
這個方式最重要的是，不用寫程式，而且使用很方便哦～
底下就是使用方法，請照著做即可。
官方網站：http://www.kryogenix.org/code/browser/sorttable/
直接下載：http://www.kryogenix.org/code/browser/sorttable/sorttable.js...
Read more
如果放入的資料想要先經過排序，我想先把資料放入ＷＯＲＤ或是ＥＸＣＥＬ裡都是很好的選擇，經過排序後想要放回ＤＲＥＡＭＷＥＡＶＥＲ也很簡單，只需要使用＂複製＂和＂貼上＂，表格就做好囉！
但是如果你想讓使用者自己可以做排序，是任何一個欄位都能排序，而且是使用者想排就排，哇～不用說，寫程式就對了，要怎麼寫我想頭就大了吧！
今天要介簡的這個好用的 JavaScript 套件，就是針對上述的使用情況來地，下圖是還沒使用時的表格長像。
這張圖就是使用後的長像，它在表格的標題列會上底色，使用者只要在想排序的欄位上按一下，就會出現像第一欄的 Name 一欄的＂三角形＂，三角形向上就是遞減（由大到小）排序，三角形向下就是遞增（由小到大）排序，很方便吧！
這個方式最重要的是，不用寫程式，而且使用很方便哦～
底下就是使用方法，請照著做即可。
先將 sorttable.js 檔案下載到網站資料夾下，再把以下的 JavaScript 貼入到 <head> </head> 中即可~
<script src="sorttable.js"></script>
<style type="text/css">
/* Sortable tables */
table.sortable thead
{
background-color:#eee;
color:#666666;
font-weight: bold;
cursor: default;
}
</style>
最後再將你的表格加上一個 Class 的屬性即可，就是把 <table> 標籤，後面加上class="sortable" ，改成 <table class="sortable"> 就可以使用囉～
官方網站：http://www.kryogenix.org/code/browser/sorttable/
直接下載：http://www.kryogenix.org/code/browser/sorttable/sorttable.js...
Read more
[+/-] : 什麼是 <!-- saved from url=(0014)about:internet --> <!-- saved from url=(0022)http://www.example.com -->
如果你有使用 javascript ，又在本機上看網頁，在 IE 上就會顯示一條黃色的寫『為了協助保護您的資訊安全性，Interner Explorer已限制這個網頁執行指令檔或可以存取您電腦的ActiveX控制項』
我想你要是在寫網頁看到這行，會很討厭吧，每次都要按一下，再按確定，真的很煩人耶，我想每個人應該也都知道這是 IE 的安全性問題，自己去改改 IE 設定也行，但是也不可以叫使用者去修改 IE 的安全設定吧！
如果您的網頁需要執行 Active X 或指令檔處理，您可以在 HTML 程式碼中加入網頁的註解標記。 這個 Internet Explorer 功能可讓 HTML 檔案強制進入本機電腦區域以外的區域，如此一來，這些檔案便會根據套用到註解所識別之 URL 的安全性範本，執行指令檔或 ActiveX 程式碼。例如，如果所指定的 URL 是 www.contoso.com，且該 URL 在信任的網站清單中，則網頁會使用信任的網站區域的安全性範本。此設定適用於 Internet Explorer 4 及更新版本。若要將網頁的註解標記插入 HTML 檔案，請新增下列其中一個註解：
<!-- saved from url=(0022)http://www.example.com -->
請在已識別網域的網頁中插入網頁標記時使用此註解，以主控網頁之網際網路或內部網路網域的 URL 來取代 http://www.example.com。請在 URL 之前加上用括弧括住的 URL 長度，以作為網頁標記，例如 (0022)。
如果要將網頁永遠當作網際網路區域的一部分，可以使用下列網頁標記：
<!-- saved from url=(0014)about:internet -->
當您需要插入一般的網頁標記時，請使用這個註解。about:internet 部份會在網際網路區域中放置頁面。
參考資料來源：
- http://technet2.microsoft.com/
- http://www.adobe.com/tw/support/dreamweaver/
...
Read more
我想你要是在寫網頁看到這行，會很討厭吧，每次都要按一下，再按確定，真的很煩人耶，我想每個人應該也都知道這是 IE 的安全性問題，自己去改改 IE 設定也行，但是也不可以叫使用者去修改 IE 的安全設定吧！
如果您的網頁需要執行 Active X 或指令檔處理，您可以在 HTML 程式碼中加入網頁的註解標記。 這個 Internet Explorer 功能可讓 HTML 檔案強制進入本機電腦區域以外的區域，如此一來，這些檔案便會根據套用到註解所識別之 URL 的安全性範本，執行指令檔或 ActiveX 程式碼。例如，如果所指定的 URL 是 www.contoso.com，且該 URL 在信任的網站清單中，則網頁會使用信任的網站區域的安全性範本。此設定適用於 Internet Explorer 4 及更新版本。若要將網頁的註解標記插入 HTML 檔案，請新增下列其中一個註解：
<!-- saved from url=(0022)http://www.example.com -->
請在已識別網域的網頁中插入網頁標記時使用此註解，以主控網頁之網際網路或內部網路網域的 URL 來取代 http://www.example.com。請在 URL 之前加上用括弧括住的 URL 長度，以作為網頁標記，例如 (0022)。
如果要將網頁永遠當作網際網路區域的一部分，可以使用下列網頁標記：
<!-- saved from url=(0014)about:internet -->
當您需要插入一般的網頁標記時，請使用這個註解。about:internet 部份會在網際網路區域中放置頁面。
參考資料來源：
- http://technet2.microsoft.com/
- http://www.adobe.com/tw/support/dreamweaver/
...
Read more
[+/-] : [CSS] 超老牌又好用的ＣＳＳ編輯器 TopStyle V3.5
我在上課時常說，想要熟悉ＣＳＳ除了常用外，當然盡量用手寫是比較快練習的方式之一，但是當你熟悉到一定程度時，還在用手寫，我就覺得也太笨了一點，尤其是除錯或是預覽都不是很方便，這時，編輯器就要上場啦～
有人問，是不是使用 DreamWeaver，原則上也行，只是我覺得如果要更聰明一點的，使用這套 TopStyle 也是不錯的選擇。
這套 TopStyle 簡單的來說，它有幾個好用的功能：
1. 轉換 HTML 成為 XHTML （這個可重要囉，舊的網頁想轉成使用ＣＳＳ，這個是第一步驟）
2. 可以在 Internet Explorer 和 Mozilla 預覽的功能
3. 檢查 CSS 語法錯誤，除了可以檢查錯誤外，還可以檢查在各瀏覽器的相容性哦～
4. 整合 W3C HTML，它的說明文件中有很詳細的 CSS 介紹
5. 它還有自動完成及提示屬性的功能，所以它也很適合初學者哦～
其實還有很多功能，例如即時更新、線上編輯......等，我想這些功能，等我有時間再一一介紹，大家沒事快去找一套來使用看看吧！
貼幾張圖上來看看，以下這張是我使用線上編輯的功能，來改我的ＢＬＯＧ。
底下這張，你看看有總有四張視窗：
最左邊的為我目前的樹狀結構
中間視窗為主要ＣＳＳ碼
右邊視窗為語法及屬性視窗
比較特別也好用的地方，你看看上圖就會知道，我在左邊正在修改的畫面，它在左邊下方的窗視就會即時出現，而且預覽的結果幾乎達到１００％，而中間視窗就會把你正在修改的ＣＳＳ碼用淺黃色的底標示出來，在最左邊的畫面你可以看到這個元素的上下樹狀結構，在最下方當然就是出現站個網頁的預覽情形囉！
說真的，你有用過這一套就會知道，DreamWeaver 的功能真的很陽春哦～
官方網站：http://www.newsgator.com...
Read more
有人問，是不是使用 DreamWeaver，原則上也行，只是我覺得如果要更聰明一點的，使用這套 TopStyle 也是不錯的選擇。
這套 TopStyle 簡單的來說，它有幾個好用的功能：
1. 轉換 HTML 成為 XHTML （這個可重要囉，舊的網頁想轉成使用ＣＳＳ，這個是第一步驟）
2. 可以在 Internet Explorer 和 Mozilla 預覽的功能
3. 檢查 CSS 語法錯誤，除了可以檢查錯誤外，還可以檢查在各瀏覽器的相容性哦～
4. 整合 W3C HTML，它的說明文件中有很詳細的 CSS 介紹
5. 它還有自動完成及提示屬性的功能，所以它也很適合初學者哦～
其實還有很多功能，例如即時更新、線上編輯......等，我想這些功能，等我有時間再一一介紹，大家沒事快去找一套來使用看看吧！
貼幾張圖上來看看，以下這張是我使用線上編輯的功能，來改我的ＢＬＯＧ。
底下這張，你看看有總有四張視窗：
最左邊的為我目前的樹狀結構
中間視窗為主要ＣＳＳ碼
右邊視窗為語法及屬性視窗
比較特別也好用的地方，你看看上圖就會知道，我在左邊正在修改的畫面，它在左邊下方的窗視就會即時出現，而且預覽的結果幾乎達到１００％，而中間視窗就會把你正在修改的ＣＳＳ碼用淺黃色的底標示出來，在最左邊的畫面你可以看到這個元素的上下樹狀結構，在最下方當然就是出現站個網頁的預覽情形囉！
說真的，你有用過這一套就會知道，DreamWeaver 的功能真的很陽春哦～
官方網站：http://www.newsgator.com...
Read more
[+/-] : [平面設計 - 常職篇] 請問網路圖片可以印刷嗎？
我剛才在 Google 上找資料，找著找著，沒想到挖到一篇我早在八百年前寫過的文章，所以我就順手把它轉貼回來，順便做個備份，各位看看，有問題，發問吧！
因為工作需要，常會跟出版業的設計要一些圖片，而常會跟他說我需要多大的尺寸，他會問要多少ＤＰＩ才夠，我說，沒差，只要有１０２４＊７６８以上就夠用，他還會回，那到底要多少ＤＰＩ $%^&*，其實這個簡單的問題，在每天都要跟印刷為伍的出版業，其實也是一大堆設計都搞不清楚，所以我想，應該也還是會有很多人是迷迷糊糊的吧！
好吧 , 雖然這個問題已經是很久以前回答的 , 即然要我說明 , 那我就這個問題好好的說明 , 希望各位先進一起來討論一下 , 希望不要再讓錯誤的觀念一直的流傳下去，好了，開始進入這個問題 ，我想有很多的人都搞不懂，我說解析度不重要，重要的是圖素，是因為解析度指的是 dpi , dpi 就是 dot per inch , 也就是每英吋裡的列印點數 , 即然是每單位裡有多少點 , 那就表示了 , 點才是最重要的 , 而這個點 , 也就是我們一般所說的 ppi , ppi 就是 Pixel per Inch , 也就是每英吋所擷取的像素, 而 dpi 跟 ppi 又有什麼差別呢? 他們就差在一個在紙張上(dpi)另一個在螢幕上(ppi) , 而很多的人在解析度上的解釋大多都會像是
網路的圖都是72dpi
印刷一般使用300~350dpi
網路的圖通常會太小，而且最嚴重的是版權問題
這樣的回答所謂的解釋度 , 其實上面的回答有很大的問題 , 就在於不完全了解何為解析度.
例如這句網路的圖都是72dpi
網路上的圖根本就不需要解析度也就是 dpi , 所以根本就沒有所謂的 72dpi , 因為在網頁或者只要是在螢幕上而做的圖都不需要 dpi , 為什麼呢? 我早就將答案寫在一開始的地方 , 請回頭看看什麼是 解析度也就是 dpi 的解釋 , 因為在全世界的螢幕上根本就沒有所謂的 dpi , 又為什麼在網頁上的圖需要 72 dpi呢? 我用一個最簡單的例子來說好了 , 請到 photoshop 中開一個新檔 , 寬跟高的數值都可以但是寬跟高後面的單位請選擇像素 , 那我以 寬400 x 高300 來說明好了 , 但請記得單位是像素哦 , 那你會看到 photoshop 會算出檔案大小為 351.6k , 再來請到解析度的欄位隨意輸入數值 , 不管你是輸入 72 到 72,000 dpi , 你會發現檔案大小依然為 351.6k , 為什麼呢? 很簡單 , 因為當檔案的單位是像素時 , 根本就不會有所謂的解析度 dpi , 因為算圖的公式為
RGB=24bit
400 x 300 x 24bit = 2,880,000 bit
2,880,000 / 8 = 360,000 byte
360,000 / 1024 = 351.5625 k
檔案算到小數第一位 , 所以檔案大小為 351.6 k
所以在這個公式裡根本就沒有所謂的解析度 dpi , 所以在網路上或是在任何螢幕上要顯示的圖都不需要解析度 dpi , 或是我用下面兩張圖來解釋好了
圖一
圖二
上面有二張圖 , 看起來都是一樣的 , 圖一的寬高是 400 x 300 , 圖二的寬高也是 400 x 300 , 但是如果下載下來後 , 請到 photoshop 裡的 影像尺寸 看看圖一跟圖二的解析度
圖 1-1
圖 2-1
就會發現其實二張圖在螢幕上看起來是一模一樣的 , 不只是看起來一樣大 , 而且檔案的大小也是一樣的 , 但是二張圖的解析度其實是不一樣的 , 請再仔細看看上面兩張圖 , 就會發現一件事 , 解析度影響的是文件尺寸 , 而文件尺寸也就是列印或是印刷出來的大小 , 而不是在螢幕上看起來的大小 , 也就會發現 圖 1 在 72 dpi 時可以印出來的大小為 14.11cm x 10.58cm , 而圖2 在 3000 dpi 時可以印出來的大小為 0.34cm x 0.25cm , 這也就說明了另一個觀念 , 就是到底什麼是解析度 dpi , 請看本文最上面對 dpi 的解釋
哇!!!!
真是落落長 , 打字真是打得累死人了 , 今天就到這吧 , 如果還有其他的問題那我就下次再回答吧!!...
Read more
因為工作需要，常會跟出版業的設計要一些圖片，而常會跟他說我需要多大的尺寸，他會問要多少ＤＰＩ才夠，我說，沒差，只要有１０２４＊７６８以上就夠用，他還會回，那到底要多少ＤＰＩ $%^&*，其實這個簡單的問題，在每天都要跟印刷為伍的出版業，其實也是一大堆設計都搞不清楚，所以我想，應該也還是會有很多人是迷迷糊糊的吧！
好吧 , 雖然這個問題已經是很久以前回答的 , 即然要我說明 , 那我就這個問題好好的說明 , 希望各位先進一起來討論一下 , 希望不要再讓錯誤的觀念一直的流傳下去，好了，開始進入這個問題 ，我想有很多的人都搞不懂，我說解析度不重要，重要的是圖素，是因為解析度指的是 dpi , dpi 就是 dot per inch , 也就是每英吋裡的列印點數 , 即然是每單位裡有多少點 , 那就表示了 , 點才是最重要的 , 而這個點 , 也就是我們一般所說的 ppi , ppi 就是 Pixel per Inch , 也就是每英吋所擷取的像素, 而 dpi 跟 ppi 又有什麼差別呢? 他們就差在一個在紙張上(dpi)另一個在螢幕上(ppi) , 而很多的人在解析度上的解釋大多都會像是
網路的圖都是72dpi
印刷一般使用300~350dpi
網路的圖通常會太小，而且最嚴重的是版權問題
這樣的回答所謂的解釋度 , 其實上面的回答有很大的問題 , 就在於不完全了解何為解析度.
例如這句網路的圖都是72dpi
網路上的圖根本就不需要解析度也就是 dpi , 所以根本就沒有所謂的 72dpi , 因為在網頁或者只要是在螢幕上而做的圖都不需要 dpi , 為什麼呢? 我早就將答案寫在一開始的地方 , 請回頭看看什麼是 解析度也就是 dpi 的解釋 , 因為在全世界的螢幕上根本就沒有所謂的 dpi , 又為什麼在網頁上的圖需要 72 dpi呢? 我用一個最簡單的例子來說好了 , 請到 photoshop 中開一個新檔 , 寬跟高的數值都可以但是寬跟高後面的單位請選擇像素 , 那我以 寬400 x 高300 來說明好了 , 但請記得單位是像素哦 , 那你會看到 photoshop 會算出檔案大小為 351.6k , 再來請到解析度的欄位隨意輸入數值 , 不管你是輸入 72 到 72,000 dpi , 你會發現檔案大小依然為 351.6k , 為什麼呢? 很簡單 , 因為當檔案的單位是像素時 , 根本就不會有所謂的解析度 dpi , 因為算圖的公式為
RGB=24bit
400 x 300 x 24bit = 2,880,000 bit
2,880,000 / 8 = 360,000 byte
360,000 / 1024 = 351.5625 k
檔案算到小數第一位 , 所以檔案大小為 351.6 k
所以在這個公式裡根本就沒有所謂的解析度 dpi , 所以在網路上或是在任何螢幕上要顯示的圖都不需要解析度 dpi , 或是我用下面兩張圖來解釋好了
圖一
圖二
上面有二張圖 , 看起來都是一樣的 , 圖一的寬高是 400 x 300 , 圖二的寬高也是 400 x 300 , 但是如果下載下來後 , 請到 photoshop 裡的 影像尺寸 看看圖一跟圖二的解析度
圖 1-1
圖 2-1
就會發現其實二張圖在螢幕上看起來是一模一樣的 , 不只是看起來一樣大 , 而且檔案的大小也是一樣的 , 但是二張圖的解析度其實是不一樣的 , 請再仔細看看上面兩張圖 , 就會發現一件事 , 解析度影響的是文件尺寸 , 而文件尺寸也就是列印或是印刷出來的大小 , 而不是在螢幕上看起來的大小 , 也就會發現 圖 1 在 72 dpi 時可以印出來的大小為 14.11cm x 10.58cm , 而圖2 在 3000 dpi 時可以印出來的大小為 0.34cm x 0.25cm , 這也就說明了另一個觀念 , 就是到底什麼是解析度 dpi , 請看本文最上面對 dpi 的解釋
哇!!!!
真是落落長 , 打字真是打得累死人了 , 今天就到這吧 , 如果還有其他的問題那我就下次再回答吧!!...
Read more
[+/-] : [DreamWeaver] DreamWeaver 的屬性面版到底有幾個？？
DreamWeaver 的屬性面版到底有幾個？？其實這個問題是來自於，每次上課時，只要遇到 DreamWeaver 預設的屬性列上沒有的屬性，我就會叫同學自己打開［分割］視窗，在原始碼裡ＫＥＹ上我們缺少的屬性，比如說，在 DreamWeaver CS3 裡，有可以加入 iframe 的功能，但是卻沒有可以加上屬性的地方，所以我都會請同學自己ＫＥＹ上想要的屬性！也由於我每次都請同學遇到這種狀況就自己ＫＥＹ，也就會發現，幾乎每次上完課，只要遇到班上有程度比較好，或是好奇心大於別人，都會來信說，為什麼不用在［窗視］＞［標籤檢測器］不就好了，每次都還請我們自己ＫＥＹ半天。
我遇到這種同學，都會請他再找找看，DreamWeaver 裡其實有一個比［標籤檢測器］更好用的隱藏面版哦～
可是大多數的人，都找不到耶，也就很少使用這個面版，那對比較進階的使用者，還真是有點浪費，可是，我將來上課，還是不會講的，因為，我要同學們習慣看原始碼，下次遇到問題，才會解決嘛。
好啦～我們先來看看什麼是［標籤檢測器］，如下圖紅框處，其實你看圖就會發現，它已經把所有的屬性表列在一起，你只需要在上面按一下，就會出現該選項可以選取的屬性了。
［標籤檢測器］看起來好像不錯用，可是我覺得即然要用面版就不要看到那一堆的英文字嘛，如果看不懂那些英文，不就還是搞不懂它是做什麼用的嗎？
底下這個叫［編輯標籤］的面版更好用，要叫出它，有二個方法：
一、在［分割］窗視裡把你要編輯的標籤選取後，再上面按下右鍵，就會看到［編輯標籤］如下圖紅框處。
二、在任何畫面選好你要的物件或標籤後，直接按下快速鍵［Shift］＋［F5］即可。
打開後，就會看到如下圖的對話框，你看看，什麼屬性都寫中文，是不是很順眼啊～
換個標籤試試看，剛才是 iframe ，現在來試試看圖片（下面那個是我兒子啦），再圖片上按左鍵選取後，按下快速鍵［Shift］＋［F5］。
看看，是不是表列的很清楚，而且裡面會出現很多選項，都是在屬性列上找不到的哦～
再看看底下紅框處，你會發現，它會在很多選項後都會提示你，這些屬性在那些瀏覽器或是多少版本以上的才能使用，是不是很方便啊。
好啦～說到底，還是希望各位不要被軟體使用，而是要去使用軟體，所以，有良好的基礎，個人認為比軟體會多少功能還要重要的多。
嗯～最後，老話一句，有問題回來問，有新發現，也要回來哦～...
Read more
我遇到這種同學，都會請他再找找看，DreamWeaver 裡其實有一個比［標籤檢測器］更好用的隱藏面版哦～
可是大多數的人，都找不到耶，也就很少使用這個面版，那對比較進階的使用者，還真是有點浪費，可是，我將來上課，還是不會講的，因為，我要同學們習慣看原始碼，下次遇到問題，才會解決嘛。
好啦～我們先來看看什麼是［標籤檢測器］，如下圖紅框處，其實你看圖就會發現，它已經把所有的屬性表列在一起，你只需要在上面按一下，就會出現該選項可以選取的屬性了。
［標籤檢測器］看起來好像不錯用，可是我覺得即然要用面版就不要看到那一堆的英文字嘛，如果看不懂那些英文，不就還是搞不懂它是做什麼用的嗎？
底下這個叫［編輯標籤］的面版更好用，要叫出它，有二個方法：
一、在［分割］窗視裡把你要編輯的標籤選取後，再上面按下右鍵，就會看到［編輯標籤］如下圖紅框處。
二、在任何畫面選好你要的物件或標籤後，直接按下快速鍵［Shift］＋［F5］即可。
打開後，就會看到如下圖的對話框，你看看，什麼屬性都寫中文，是不是很順眼啊～
換個標籤試試看，剛才是 iframe ，現在來試試看圖片（下面那個是我兒子啦），再圖片上按左鍵選取後，按下快速鍵［Shift］＋［F5］。
看看，是不是表列的很清楚，而且裡面會出現很多選項，都是在屬性列上找不到的哦～
再看看底下紅框處，你會發現，它會在很多選項後都會提示你，這些屬性在那些瀏覽器或是多少版本以上的才能使用，是不是很方便啊。
好啦～說到底，還是希望各位不要被軟體使用，而是要去使用軟體，所以，有良好的基礎，個人認為比軟體會多少功能還要重要的多。
嗯～最後，老話一句，有問題回來問，有新發現，也要回來哦～...
Read more
[+/-] : [IE] IE Developer Toolbar 網頁設計師的好幫手
在 IE 上一直都沒有看到很好的設計除錯工具，要不然就是要收費，所以只慣用 IE 的設計師應該會很羨慕 Firefox 的 Web Developer，今天我發現一個好用的 IE 專用的 Web Toolbar，這是 Microsoft 自己出品的 IE Developer Toolbar 。
它能做些什麼呢？基本上就像 Web Developer 的簡易版，又有點像是 FireBug 能夠檢視網頁裡 DOM的資訊、停用 CSS、JavaScript、檢視 ID & Class 的內容、驗證一些標準、標示元素等。
跟 FireFox Web Developer 相比，雖然很簡陋，但是有總是比沒有好的啦～
希望將來在 IE 上能有更多免費又好用的開發工具。
安裝完後在工具下就會看到下圖的按鈕。
這是安裝完叫出工具列的樣子，它會把畫面切成上下二塊。
目前這個小工具只適用於ＩＥ６＆ＩＥ７，至於ＩＥ８，我看它好像自己就有內建這個功能的樣子，目前我是沒有安裝，所以我把網址附在下面，各位有興趣的自己去看看吧！
- 網站位置
- 直接下載
- IE8.0 說明頁面...
Read more
它能做些什麼呢？基本上就像 Web Developer 的簡易版，又有點像是 FireBug 能夠檢視網頁裡 DOM的資訊、停用 CSS、JavaScript、檢視 ID & Class 的內容、驗證一些標準、標示元素等。
跟 FireFox Web Developer 相比，雖然很簡陋，但是有總是比沒有好的啦～
希望將來在 IE 上能有更多免費又好用的開發工具。
安裝完後在工具下就會看到下圖的按鈕。
這是安裝完叫出工具列的樣子，它會把畫面切成上下二塊。
目前這個小工具只適用於ＩＥ６＆ＩＥ７，至於ＩＥ８，我看它好像自己就有內建這個功能的樣子，目前我是沒有安裝，所以我把網址附在下面，各位有興趣的自己去看看吧！
- 網站位置
- 直接下載
- IE8.0 說明頁面...
Read more
[+/-] : [Hacks] 讓你的 IE 變正常 - PNG 透明 - :hover 效果（2008/5/5更新）
要寫這篇時，光是標題，我就想了好久，一直想不出要怎麼下這個標題，很難用一句話來形容這個爛東西，後來又回到我要介紹這個好用的 JavaScript library 作者的網站，看到他下的標題 A JavaScript library to make MSIE behave like a standards-compliant browser. 我看了後，就覺得＂讓你的 IE 變正常＂應該是這個作者的初衷吧！
IE 是個讓設計師很頭疼的產物，總是可以讓設計師有很多事跟工作做的產物，為了 IE ，一個 CSS 檔必須寫出多種不同 IE 使用的版本或是語法，而明明就是標準的 CSS 也會有一堆的語法在 IE 裡不被支援，而 png 檔，這麼好用的檔案，也不支援，還有一堆罄竹難書的事。
好啦！回到正題，IE 的行為修正檔，我想在網路上一大堆，但是這個作者寫的修正檔是我看過以及使用過最完整，而且目前也還沒發現任何 Bug ，我目前也有搭配 jQuery 的 FrameWorks 一起使用，目前是還沒遇到問題，如果有，我會再回來報告使用情況。
使用方式很簡單，只要將作者寫好的 JavaScript 檔，引用到文件中，就可以生效了，其它什麼動作都不需要，檔案有二個，一個是將所有 IE 修正成為跟 IE7 一樣的行為，另一個是 IE8 ，但是目前 IE8 的瀏覽器也還在 Beta 版的階段，我想應該是不太需要使用，因為使用者還不多，也不會有使用者使用 Beta 版的瀏覽器做為主要上網的工具吧！
步驟一：請先下載 IE7.js or IE8.js
步驟二：再使用下列語法即可（貼入到<head></head>）
IE7.js
將 IE5-6 修正成跟 IE7 相同
IE8.js
將 IE5-7 修正成跟 IE8 相同（記得 IE8.0 還在測試階段，不建議你使用）
你將 js 檔放入你的網站後，再引用上述的語法，就可以開始輕鬆的寫網頁啦，使用這個方法只有一個問題，那就是使用者如果將 JavaScript 的功能關閉，那你的網頁就會破功啦！但是現在沒使用 JavaScript 的人少之又少，這算是最好最偷懶的方式之一囉。
2008/4/22更新
經過 Jason 的提醒，原來這個修正檔還是不能使 png 檔完全正常顯示，我後來不死心，又去找了一些資料，都是一樣，不行就是不行，目前所有的修正檔都是只要背景使用PNG透明格式，那麼背景可以透明，但是就不能重覆，原因是出在 progid:DXImageTransform.Microsoft.AlphaImageLoader 這一支函式的問題，要使用它才能把PNG透明格式轉成透明的GIF格式，但是卻不支援重覆的屬性，所以我看，IE要完整支援PNG大概是沒望了。
還有，如果你有使用修正檔，不管是那一支，大多會有以下的幾個問題：
1. PNG背景圖位置定位失效及重複背景圖不能使用。
2. 超連結不能正常使用（這個會發生在透過修正檔讓PNG圖片背景可以透明時，這時使用PNG為 背景圖的div這個區塊內的超連結都會點不到）。
3. 圖片一定要指定圖檔的寬和高，否則圖檔的顯示會有問題。
4. 有些會要求一定要符合某些檔名規範（使用起來不順手）。
5. 在IE6中圖位置更動時，會造成某些元件的顯示不正常（如這個網站下部份的範例http://clientside.cnet.com/）
6. 我還沒想到，不過應該是還有的啦！
還有IE也不支援 a 以外的屬性使用 hover，這也很爛，還有不支援子選取器.....等，不過可以使用我介紹的這支，它可以修正這些問題，如果單純使用PNG的修正檔，我想大多數都差不多，只差在上述的問題，你比較討厭決解什麼問題，不然我還是推目前這支，即可以修正PNG還可以順便修正其它IE的問題，一兼二顧是吧！
如果只是要修正PNG的話，那除了 IEPNGFix 不錯外，也可以試試這支 jquery.pngFix.js ，這支看名字應該就知道是使用最近很火熱的 jQuery（什麼不知道，快去查查吧！）所開發，也是針對PNG透明問題的修正檔，執行效能也很不錯，使用也很簡單，網站最後面有教你，只要三個步驟，而且不需要特別的檔名，只要是PNG就可以了。
有新的發現，我會再回來補充的，請隨時注意囉！
2008/5/5更新
我今天又發現了一個修正 PNG 透明背景的修正檔，這個檔案跟其它的修正做的事差不多，只是它用的是現在很流行執行效能也很好的 Jquery ，所以我想這個東東應該效能也會不錯吧～
我還沒試，有空再來試試，我一樣會回來補充地。
http://jquery.andreaseberhard.de/pngFix/
- 看不懂上面 [if lt IE 8] 的語法，你可以參考這一篇詳細說明
- 原始網站
- Demo 及測試頁面（原作者做的相當的完整而且易懂，我就不再做範例囉）
- JS 檔直接下載（我將二個JS檔壓縮在一起了）...
Read more
IE 是個讓設計師很頭疼的產物，總是可以讓設計師有很多事跟工作做的產物，為了 IE ，一個 CSS 檔必須寫出多種不同 IE 使用的版本或是語法，而明明就是標準的 CSS 也會有一堆的語法在 IE 裡不被支援，而 png 檔，這麼好用的檔案，也不支援，還有一堆罄竹難書的事。
好啦！回到正題，IE 的行為修正檔，我想在網路上一大堆，但是這個作者寫的修正檔是我看過以及使用過最完整，而且目前也還沒發現任何 Bug ，我目前也有搭配 jQuery 的 FrameWorks 一起使用，目前是還沒遇到問題，如果有，我會再回來報告使用情況。
使用方式很簡單，只要將作者寫好的 JavaScript 檔，引用到文件中，就可以生效了，其它什麼動作都不需要，檔案有二個，一個是將所有 IE 修正成為跟 IE7 一樣的行為，另一個是 IE8 ，但是目前 IE8 的瀏覽器也還在 Beta 版的階段，我想應該是不太需要使用，因為使用者還不多，也不會有使用者使用 Beta 版的瀏覽器做為主要上網的工具吧！
步驟一：請先下載 IE7.js or IE8.js
步驟二：再使用下列語法即可（貼入到<head></head>）
IE7.js
將 IE5-6 修正成跟 IE7 相同
<!--[if lt IE 7]>
<script src="IE7.js" type="text/javascript"></script>
<![endif]-->
IE8.js
將 IE5-7 修正成跟 IE8 相同（記得 IE8.0 還在測試階段，不建議你使用）
<!--[if lt IE 8]>
<script src="IE8.js" type="text/javascript"></script>
<![endif]-->
你將 js 檔放入你的網站後，再引用上述的語法，就可以開始輕鬆的寫網頁啦，使用這個方法只有一個問題，那就是使用者如果將 JavaScript 的功能關閉，那你的網頁就會破功啦！但是現在沒使用 JavaScript 的人少之又少，這算是最好最偷懶的方式之一囉。
2008/4/22更新
經過 Jason 的提醒，原來這個修正檔還是不能使 png 檔完全正常顯示，我後來不死心，又去找了一些資料，都是一樣，不行就是不行，目前所有的修正檔都是只要背景使用PNG透明格式，那麼背景可以透明，但是就不能重覆，原因是出在 progid:DXImageTransform.Microsoft.AlphaImageLoader 這一支函式的問題，要使用它才能把PNG透明格式轉成透明的GIF格式，但是卻不支援重覆的屬性，所以我看，IE要完整支援PNG大概是沒望了。
還有，如果你有使用修正檔，不管是那一支，大多會有以下的幾個問題：
1. PNG背景圖位置定位失效及重複背景圖不能使用。
2. 超連結不能正常使用（這個會發生在透過修正檔讓PNG圖片背景可以透明時，這時使用PNG為 背景圖的div這個區塊內的超連結都會點不到）。
3. 圖片一定要指定圖檔的寬和高，否則圖檔的顯示會有問題。
4. 有些會要求一定要符合某些檔名規範（使用起來不順手）。
5. 在IE6中圖位置更動時，會造成某些元件的顯示不正常（如這個網站下部份的範例http://clientside.cnet.com/）
6. 我還沒想到，不過應該是還有的啦！
還有IE也不支援 a 以外的屬性使用 hover，這也很爛，還有不支援子選取器.....等，不過可以使用我介紹的這支，它可以修正這些問題，如果單純使用PNG的修正檔，我想大多數都差不多，只差在上述的問題，你比較討厭決解什麼問題，不然我還是推目前這支，即可以修正PNG還可以順便修正其它IE的問題，一兼二顧是吧！
如果只是要修正PNG的話，那除了 IEPNGFix 不錯外，也可以試試這支 jquery.pngFix.js ，這支看名字應該就知道是使用最近很火熱的 jQuery（什麼不知道，快去查查吧！）所開發，也是針對PNG透明問題的修正檔，執行效能也很不錯，使用也很簡單，網站最後面有教你，只要三個步驟，而且不需要特別的檔名，只要是PNG就可以了。
有新的發現，我會再回來補充的，請隨時注意囉！
2008/5/5更新
我今天又發現了一個修正 PNG 透明背景的修正檔，這個檔案跟其它的修正做的事差不多，只是它用的是現在很流行執行效能也很好的 Jquery ，所以我想這個東東應該效能也會不錯吧～
我還沒試，有空再來試試，我一樣會回來補充地。
http://jquery.andreaseberhard.de/pngFix/
- 看不懂上面 [if lt IE 8] 的語法，你可以參考這一篇詳細說明
- 原始網站
- Demo 及測試頁面（原作者做的相當的完整而且易懂，我就不再做範例囉）
- JS 檔直接下載（我將二個JS檔壓縮在一起了）...
Read more
[+/-] : [XHTML] XHTML 1.0 基本注意事項
原則上 HTML 與 XHTML 是一模一樣的東西，而為什麼它們會叫不一樣的名字，最大的差別就在於［使用觀念］不同，至於怎麼樣的不同，又有什麼要注意的，就在底下請各位好好的記住吧！
最上層的標籤一定要完整
在 HTML 裡 html、head、body 的標籤都是可以省略的，但是在 XHTML 這些標籤都是一定要存在的。
所有的標籤一定要成雙成對（關閉）
例如在 HTML，以下都是合法的
<p>我是段落
我是段落<p>
<ul><li>項目一<li>項目一<li>項目一</ul>
但是在 XHTML，同樣的語法，一定要符合成雙成對（關閉）的語法才是合法的
<p>我是段落</p>
<p>我是段落</p>
<ul><li>項目一</li><li>項目一</li><li>項目一</li></ul>
有一些標籤是可以使用簡寫的，例如：
<br></br>
因為這個標籤是可以簡寫的，但是還是要符合關閉的特性，因此可以改寫如下：
<br />
所有標籤一定要使用小寫的英文
例如在 HTML 下，這樣寫是合法的：
<A HREF="link.html">一定要小寫</A>
但是在 XHTML 裡一定要改寫成小寫的英文：
<a href="link.html">一定要小寫</a>
在 XHTML 裡 id 和 name 一定都要有
在 HTML 時代裡大多使用 name ，但是在 XHTML 建議使用 id ，為了可以向下相容以及符合 XHTML 的要求，因此，建議在 XHTML 下 id & name 二者都要設定（如果你是使用 DreamWeaver 的話，就不用擔心麻煩了，因為它會自動將二者的名稱設定成一樣）
例如 HTML：
<input type="text" name="textfield" />
但是在 XHTML 下你必須寫成：
<input type="text" name="textfield" id="textfield" />
或是不寫 name 只寫 id 也是合法的
<input type="text" id="textfield" />
MIME Type
在 XHTML 裡，如果是 XHTML 1.1 strict 下，其文件格式一定是要使用 application/xhtml+xml（其實應該要說，只要是使用 XHTML 就要使用），但是有太多的瀏覽器包括ＩＥ６與ＩＥ７都不支援這個新的文件格式，所以呢，我們在一般過渡模式下還是可以繼續使用 text/html 的模式。
大致上就是這些要注意的，但是大多數的人，現在都是使用編輯器來做網頁，如果你是使用 DreamWeaver 的話，原則上這些問題，它都會處理的很好，但是很多時候還是要我們自己去處理原始檔的話，就要注意以上的使用原則哦～...
Read more
最上層的標籤一定要完整
在 HTML 裡 html、head、body 的標籤都是可以省略的，但是在 XHTML 這些標籤都是一定要存在的。
所有的標籤一定要成雙成對（關閉）
例如在 HTML，以下都是合法的
<p>我是段落
我是段落<p>
<ul><li>項目一<li>項目一<li>項目一</ul>
但是在 XHTML，同樣的語法，一定要符合成雙成對（關閉）的語法才是合法的
<p>我是段落</p>
<p>我是段落</p>
<ul><li>項目一</li><li>項目一</li><li>項目一</li></ul>
有一些標籤是可以使用簡寫的，例如：
<br></br>
因為這個標籤是可以簡寫的，但是還是要符合關閉的特性，因此可以改寫如下：
<br />
所有標籤一定要使用小寫的英文
例如在 HTML 下，這樣寫是合法的：
<A HREF="link.html">一定要小寫</A>
但是在 XHTML 裡一定要改寫成小寫的英文：
<a href="link.html">一定要小寫</a>
在 XHTML 裡 id 和 name 一定都要有
在 HTML 時代裡大多使用 name ，但是在 XHTML 建議使用 id ，為了可以向下相容以及符合 XHTML 的要求，因此，建議在 XHTML 下 id & name 二者都要設定（如果你是使用 DreamWeaver 的話，就不用擔心麻煩了，因為它會自動將二者的名稱設定成一樣）
例如 HTML：
<input type="text" name="textfield" />
但是在 XHTML 下你必須寫成：
<input type="text" name="textfield" id="textfield" />
或是不寫 name 只寫 id 也是合法的
<input type="text" id="textfield" />
MIME Type
在 XHTML 裡，如果是 XHTML 1.1 strict 下，其文件格式一定是要使用 application/xhtml+xml（其實應該要說，只要是使用 XHTML 就要使用），但是有太多的瀏覽器包括ＩＥ６與ＩＥ７都不支援這個新的文件格式，所以呢，我們在一般過渡模式下還是可以繼續使用 text/html 的模式。
大致上就是這些要注意的，但是大多數的人，現在都是使用編輯器來做網頁，如果你是使用 DreamWeaver 的話，原則上這些問題，它都會處理的很好，但是很多時候還是要我們自己去處理原始檔的話，就要注意以上的使用原則哦～...
Read more
[+/-] : [HTML] XHTML 的重要性！
我想最近 CSS 的應用越來越多，而大多數的人又都只注意 CSS 怎麼使用，所以大多數的人都乎略了 XHTML 的重要性，因為大多數的人只問 CSS 怎麼使用，卻不知道 HTML 要怎麼安排，不同的安排方式，也會影響 CSS 的寫法，因此如果沒有一個健全的觀念加上結構良好的 XHTML ，那到最後你所要付出的代價可是難以想像，同樣的，一個良好的 XHTML 結構會讓你再製作 CSS 時更為容易與有效率，因此，我想我會再後續的部份裡除了繼續寫 CSS 的文章外，也會整理一些 XHTML 重要的觀念上來，希望大家要先學好了 XHTML 再去使用 CSS 時，才能更全面的發揮 CSS 的功能。...
Read more
Read more
[+/-] : [HTML] XHTML Block Elements（區塊元素）很重要哦！
在 XHTML 裡所謂的 Block Elements（區塊元素）從外觀上你會發現，它在頁面上時是不可以出現在同一行裡，如：表格旁邊不管有沒有空間，當你再插入一個表格時，你會發現，它自動就會到下一行去，無論你怎麼操作，它們一定會放在不同一行裡。
例如以下所有的語法，都不可以放在同一行，嗯～應該說，都不會出現在同一行裡，因為它們都是屬於 Block Elements（區塊元素）所以一定會換行的。
以下所有表列語法皆為 Block Elements（區塊元素）...
Read more
例如以下所有的語法，都不可以放在同一行，嗯～應該說，都不會出現在同一行裡，因為它們都是屬於 Block Elements（區塊元素）所以一定會換行的。
以下所有表列語法皆為 Block Elements（區塊元素）
- address
- blockquote
- center
- dir
- div
- dl
- fieldset
- form
- h1
- h2
- h3
- h4
- h5
- h6
- hr
- isindex
- menu
- noframes
- noscript
- ol
- p
- pre
- table
- ul
Read more
[+/-] : [HTML] XHTML Inline Elements（行內元素）很重要哦！
在 XHTML 裡所謂的 Inline Elements 從外觀上你會發現，它在頁面上時是可以出現在同一行裡，如：超連結的旁邊可以在放一個超連結，或是圖片的旁邊可以放文字或是超連結（其實只要是 Inline 的屬性都可以放在一起，而不會換行）。
例如以下所有的語法，都可以放在同一行而不會換行（除非遇到文件的邊界），所以從外觀上其實可以很容易的分辨，什麼是 Inline Elements （行內元素）。
以下所有表列語法皆為 Inline Elements （行內元素）...
Read more
例如以下所有的語法，都可以放在同一行而不會換行（除非遇到文件的邊界），所以從外觀上其實可以很容易的分辨，什麼是 Inline Elements （行內元素）。
以下所有表列語法皆為 Inline Elements （行內元素）
- a
- abp
- acronym
- b
- basefont
- bdo
- big
- p
- cite
- code
- dfn
- em
- font
- i
- img
- input
- kbd
- label
- q
- s
- samp
- select
- small
- span
- strike
- strong
- sub
- sup
- textarea
- tt
- u
- var
Read more
訂閱：
文章 (Atom)
