CSS 部屬經驗-表格樣式

為了 IE6 的相容這裡我不會用太新穎的選擇器，希望有一天 IE6 的使用群可以消失，這樣在排版時可以不去顧慮 IE6 的問題。

主旨：

1. 如何規劃一個表格樣式
2. HTML 結構
3. CSS 設定

如何規劃一個表格樣式
網路上其實已經有很多表格樣式可以參考了，但除了表格樣式外，欄位的屬性很重要。

利用 class 去作欄位定義，讓每一欄都有不一樣的成員名稱，就算有些欄位根本不需要定義樣式，但建議最好還是保留名稱的設定，也許有一天會去用到，這樣之後要作欄位調整時才不用大興土木，去為每個樣版裡改表格樣式。

在 HTML 的規劃上最好用一個 <div></div> 包起來，再處理邊界上的設定時才不會因為瀏覽器的差異造成問題。

這裡我用到 hover 的方式去處理滑鼠滑過的效果，對於 IE6 的處理方式請看利用 JavaScript 讓 IE6 支援 CSS 2.0 hover 的方法。

對於表格在之前有遇過一個奇怪的狀況，就是在設有 white-space:nowrap; 的欄位上寬度只能用 ％ 去定義，在 (IE6) white-space 在表格中怪問題 有說明。




HTML 結構

原始碼

1. <div class="TableList"> 
2.  <table cellspacing="0" cellpadding="0"> 
3.    <tr> 
4.      <th class="Image">Picture</th> 
5.      <th class="Title">Title</th> 
6.      <th class="Date">Date</th> 
7.    </tr> 
8.  
9.    <tr class="Odd"> 
10.      <td class="Image"><!--圖片--></td> 
11.      <td class="Title"><!--文字--></td> 
12.      <td class="Date"><!--日期--></td> 
13.    </tr> 
14.    <tr class="Even"> 
15.      <td class="Image"><!--圖片--></td> 
16.      <td class="Title"><!--文字--></td> 
17.      <td class="Date"><!--日期--></td> 
18.    </tr> 
19.    <tr class="Odd"> 
20.      <td class="Image"><!--圖片--></td> 
21.      <td class="Title"><!--文字--></td> 
22.      <td class="Date"><!--日期--></td> 
23.    </tr> 
24.    <tr class="Even"> 
25.      <td class="Image"><!--圖片--></td> 
26.      <td class="Title"><!--文字--></td> 
27.      <td class="Date"><!--日期--></td> 
28.    </tr> 
29.  </table> 
30. </div> 

<div class="TableList">
  <table cellspacing="0" cellpadding="0">
    <tr>
      <th class="Image">Picture</th>
      <th class="Title">Title</th>
      <th class="Date">Date</th>
    </tr>

    <tr class="Odd">
      <td class="Image"><!--圖片--></td>
      <td class="Title"><!--文字--></td>
      <td class="Date"><!--日期--></td>
    </tr>
    <tr class="Even">
      <td class="Image"><!--圖片--></td>
      <td class="Title"><!--文字--></td>
      <td class="Date"><!--日期--></td>
    </tr>
    <tr class="Odd">
      <td class="Image"><!--圖片--></td>
      <td class="Title"><!--文字--></td>
      <td class="Date"><!--日期--></td>
    </tr>
    <tr class="Even">
      <td class="Image"><!--圖片--></td>
      <td class="Title"><!--文字--></td>
      <td class="Date"><!--日期--></td>
    </tr>
  </table>
</div>

CSS 設定

原始碼

1. /*=( 表格列表樣式 )=*/ 
2. .TableList { 
3.    text-align:center; 
4.    padding:1em; 
5. } 
6. .TableList table{ 
7.    border-collapse:collapse; 
8.    font-size:0.9em; 
9.    width:100%; 
10.    text-align:center; 
11. } 
12.  
13.  
14. /*欄位間距*/ 
15. .TableList th,  
16. .TableList td{ 
17.    padding:.5em; 
18. } 
19.  
20.  
21. /*標題列*/ 
22. .TableList th{ 
23.    border:1px solid #fff; 
24.    white-space:nowrap; 
25.    background:#328aa4 url(tr_bg1.gif) repeat-x; 
26.    color:#fff; 
27. } 
28. .TableList th a{color:#fff;} 
29.  
30.  
31. /*單列底線樣式*/ 
32. .TableList tr{ 
33.    border-bottom:1px solid #fff; 
34.    _behavior: url(ie_hover.htc);/*IE6 hover*/ 
35. } 
36. /*奇數列底色樣式*/ 
37. .TableList tr.Odd {background:#FFF;} 
38. /*偶數列底色樣式*/ 
39. .TableList tr.Even {background:#eee;} 
40.  
41.  
42. /*hover 樣式*/ 
43. .TableList tr.hover td, 
44. .TableList tr:hover td{ 
45.    background:#e5f1f4; 
46. } 
47.  
48.  
49. /*=( 欄位設定 )=*/ 
50. /*圖片*/ 
51. .TableList th.Image, 
52. .TableList td.Image{ 
53.    width:50px; 
54. } 
55. .TableList td.Image img{ 
56.    width:30px; 
57.    height:30px; 
58. } 
59.  
60. /*標題*/ 
61. .TableList td.Title{ 
62.    text-align:left; 
63.    font-size:14px; 
64. } 
65.  
66. /*日期*/ 
67. .TableList td.Date{ 
68.    width:3%; 
69.    white-space:nowrap; 
70. } 

/*=( 表格列表樣式 )=*/
.TableList {
    text-align:center;
    padding:1em;
}
.TableList table{
    border-collapse:collapse;
    font-size:0.9em;
    width:100%;
    text-align:center;
}


/*欄位間距*/
.TableList th, 
.TableList td{
    padding:.5em;
}


/*標題列*/
.TableList th{
    border:1px solid #fff;
    white-space:nowrap;
    background:#328aa4 url(tr_bg1.gif) repeat-x;
    color:#fff;
}
.TableList th a{color:#fff;}


/*單列底線樣式*/
.TableList tr{
    border-bottom:1px solid #fff;
    _behavior: url(ie_hover.htc);/*IE6 hover*/
}
/*奇數列底色樣式*/
.TableList tr.Odd {background:#FFF;}
/*偶數列底色樣式*/
.TableList tr.Even {background:#eee;}


/*hover 樣式*/
.TableList tr.hover td,
.TableList tr:hover td{
    background:#e5f1f4;
}


/*=( 欄位設定 )=*/
/*圖片*/
.TableList th.Image,
.TableList td.Image{
    width:50px;
}
.TableList td.Image img{
    width:30px;
    height:30px;
}

/*標題*/
.TableList td.Title{
    text-align:left;
    font-size:14px;
}

/*日期*/
.TableList td.Date{
    width:3%;
    white-space:nowrap;
}

參考頁面：
Last.fm
Wacanai.com

CSS 部屬經驗-表單樣式

為了 IE6 的相容這裡我不會用太新穎的選擇器，希望有一天 IE6 的使用群可以消失，這樣在排版時可以不去顧慮 IE6 的問題。

主旨：

1. 為什麼要用<table>作表單排版
2. HTML 結構
3. CSS 設定

為什麼要用<table>作表單排版
下面是利用 <table> 的排版方式，雖在排版上我非常不喜歡用 <table>，但在使用很多種排版方式及撰寫 JavaScript 的使用者介面輔助後，將 <table> 用在表單上可以有比較好的樣式結構，而且在 JavaScript 的輔助開發上對版面的操作也比較不會造成跑版問題。

如果有過在表單上做過很複雜的 JavaScript 介面輔助後，你一定會瞭解我在說什麼。


實際頁面 Wacanai.com


HTML 結構

原始碼

1. <table class="FormList" border="0" cellspacing="0" cellpadding="0"> 
2.  <tr class="NotNull"> 
3.    <th><label for="name">欄位名稱</label></th> 
4.    <td> 
5.        <input class="Full" type="text" value="" id="name" name="name"/> 
6.        <small class="Explain">欄位說明</small> 
7.        <div class="Error">錯誤訊息</div> 
8.    </td> 
9.  </tr> 
10.  
11.  <tr class="NotNull"> 
12.    <th><label for="email">欄位名稱</label></th> 
13.    <td> 
14.        <input class="Full" type="text" value="" id="name" name="name"/> 
15.        <span class="Error">錯誤訊息</span> 
16.        <small class="Explain">欄位說明</small> 
17.    </td> 
18.  </tr> 
19. </table> 

<table class="FormList" border="0" cellspacing="0" cellpadding="0">
  <tr class="NotNull">
    <th><label for="name">欄位名稱</label></th>
    <td>
        <input class="Full" type="text" value="" id="name" name="name"/>
        <small class="Explain">欄位說明</small>
        <div class="Error">錯誤訊息</div>
    </td>
  </tr>

  <tr class="NotNull">
    <th><label for="email">欄位名稱</label></th>
    <td>
        <input class="Full" type="text" value="" id="name" name="name"/>
        <span class="Error">錯誤訊息</span>
        <small class="Explain">欄位說明</small>
    </td>
  </tr>
</table>

在結構我設置了 JavaScript 會用到的訊息樣式，在下面的 CSS 設定中會先將這些訊息隱藏，之後在用 JavaScript 去處理顯示的動作，這樣的好處是 JavaScript 可以用很簡單的方法做到很複雜的介面輔助。


CSS 設定

原始碼

1. /*讓表格寬度撐開*/ 
2. table.FormList{ 
3.    width:100%; 
4. } 
5.  
6. /*基本的間距設定*/ 
7. table.FormList th, 
8. table.FormList td{ 
9.    padding:6px 10px 6px 4px; 
10. } 
11. table.FormList th{ 
12.    width:25%; 
13.    text-align: right; 
14.    vertical-align:top; 
15.    font-weight:normal; 
16.    white-space:nowrap; 
17. } 
18.  
19. /* 必填項樣式 */ 
20. table.FormList tr.NotNull th label{ 
21.    padding-left:20px; 
22. } 
23.  
24. /* 欄位寬度設定 */ 
25. table.FormList .Full{ 
26.    width:95%; 
27. } 
28. table.FormList .Verify{ 
29.    width:40px; 
30. } 
31.  
32. /*標示說明文的樣式*/ 
33. table.FormList small.Explain { 
34.    display: block; 
35.    font-size: 0.8em; 
36.    margin: 0 0 5px 0; 
37.    padding: 1px 3px; 
38. } 
39.  
40.  
41. /*錯誤訊息的樣式*/ 
42. table.FormList div.Error , 
43. table.FormList span.Error { 
44.    color: #f00; 
45.    display: none; 
46.    font-size: 1.2em; 
47.    font-weight: bold; 
48. } 
49. /*警示訊息的樣式*/ 
50. table.FormList div.Warning , 
51. table.FormList span.Warning { 
52.    color: #00f; 
53.    display: none; 
54.    font-size: 1.2em; 
55.    font-weight: bold; 
56. } 
57.  
58. /*套用在整列的錯誤樣式*/ 
59. table.FormList tr.Error label{ 
60.    color: #F00; 
61. } 
62. table.FormList tr.Error textarea, 
63. table.FormList tr.Error select, 
64. table.FormList tr.Error input{ 
65.    border: 1px solid #F00; 
66. }     

/*讓表格寬度撐開*/
table.FormList{
    width:100%;
}

/*基本的間距設定*/
table.FormList th,
table.FormList td{
    padding:6px 10px 6px 4px;
}
table.FormList th{
    width:25%;
    text-align: right;
    vertical-align:top;
    font-weight:normal;
    white-space:nowrap;
}

/* 必填項樣式 */
table.FormList tr.NotNull th label{
    padding-left:20px;
}

/* 欄位寬度設定 */
table.FormList .Full{
    width:95%;
}
table.FormList .Verify{
    width:40px;
}

/*標示說明文的樣式*/
table.FormList small.Explain {
    display: block;
    font-size: 0.8em;
    margin: 0 0 5px 0;
    padding: 1px 3px;
}

    
/*錯誤訊息的樣式*/
table.FormList div.Error ,
table.FormList span.Error {
    color: #f00;
    display: none;
    font-size: 1.2em;
    font-weight: bold;
}
/*警示訊息的樣式*/
table.FormList div.Warning ,
table.FormList span.Warning {
    color: #00f;
    display: none;
    font-size: 1.2em;
    font-weight: bold;
}

/*套用在整列的錯誤樣式*/
table.FormList tr.Error label{
    color: #F00;
}
table.FormList tr.Error textarea,
table.FormList tr.Error select,
table.FormList tr.Error input{
    border: 1px solid #F00;
}    

參考頁面：
Last.fm
Wacanai.com

CSS 部屬經驗-按鈕樣式

為了 IE6 的相容這裡我不會用太新穎的選擇器，希望有一天 IE6 的使用群可以消失，這樣在排版時可以不去顧慮 IE6 的問題。

主旨：

1. 用 <a></a> 元素來作按鈕
   
2. 利用原有樣式建立延伸樣式
3. 套用在 <input> 的樣式
   

用 <a></a> 元素來作按鈕
連結元素的優點救是 IE6 有支援 hover 偽類，所以使用連結元素用在按鈕上可以用簡單的 CSS 做出點選效果。

當然在 CSS2 上面還有很多樣式上的選擇器，對於美工或使用者介面都有很方便的 CSS 設定，不用為了一點小東西去寫 JavaScript，總結就是 IE6 趕快消失吧！


利用原有樣式建立延伸樣式



在上面的三個按鈕樣式中可以發現只有底圖上的差異，所以在樣式上的規劃可以利用延伸複寫的方式去建立樣式。

首先我先看看這三個按鈕的 HTML 結構：

原始碼

1. <a class="Button"> 
2.  <span>按鈕文字</span> 
3. </a> 
4.  
5. <a class="Button AddButton"> 
6.  <span>按鈕文字</span> 
7. </a> 
8.  
9. <a class="Button TagButton"> 
10.  <span>按鈕文字</span> 
11. </a> 

<a class="Button">
  <span>按鈕文字</span>
</a>

<a class="Button AddButton">
  <span>按鈕文字</span>
</a>

<a class="Button TagButton">
  <span>按鈕文字</span>
</a>

可以發現在 class 上的套用上是有層級的，藉由樣式複寫的方式去延伸原有的樣式。


現在我們來看看 CSS 的設定：

原始碼

1. /* 按鈕樣式 */ 
2. a.Button { 
3.    /*針對 Mozilla 系列瀏覽器的 inline-block*/ 
4.    display: -moz-inline-box; 
5.  
6.    display: inline-block; 
7.    color: #fff; 
8.    text-decoration: none; 
9.    text-align: right; 
10.    vertical-align: middle; 
11.    cursor: pointer; 
12.    text-shadow: #163551 0 -1px 1px; 
13.  
14.    height: 23px; 
15.    background: #163551 url(button_right.png) no-repeat right top; 
16.    font-size: 11px; 
17.    padding: 0 3px 0 0; 
18. } 
19. a.Button strong, 
20. a.Button span{ 
21.    /*針對 Mozilla 系列瀏覽器的 inline-block*/ 
22.    display: -moz-inline-box; 
23.  
24.    display: inline-block; 
25.    vertical-align: top; 
26.  
27.    height: 19px; 
28.    padding: 2px 5px 2px 8px; 
29.    background: #16517d url(button_left.png) no-repeat left top; 
30.    line-height: 19px; 
31. } 
32.  
33.  
34. /* 按鈕的 hover 效果設定，變換底圖定位及文字顏色 */ 
35. a.Button:hover, 
36. a.Button:hover { 
37.    background-position: right bottom; 
38.    color: #fff; 
39.    text-decoration: none; 
40. } 
41. a.Button:hover span, 
42. a.Button:hover strong { 
43.    background-position: left bottom; 
44.    color: #fff; 
45.    text-decoration: none; 
46. } 
47.  
48.  
49. /* 延伸的按鈕樣式 (AddButton)*/ 
50. a.AddButton span, 
51. a.AddButton strong { 
52.    padding-left:25px; 
53.    color:#003366; 
54.    background: #2a2a2a url(button_add_left.png) no-repeat left top; 
55. } 

/* 按鈕樣式 */
a.Button {
    /*針對 Mozilla 系列瀏覽器的 inline-block*/
    display: -moz-inline-box;
    
    display: inline-block;
    color: #fff;
    text-decoration: none;
    text-align: right;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: #163551 0 -1px 1px;

    height: 23px;
    background: #163551 url(button_right.png) no-repeat right top;
    font-size: 11px;
    padding: 0 3px 0 0;
}
a.Button strong,
a.Button span{
    /*針對 Mozilla 系列瀏覽器的 inline-block*/
    display: -moz-inline-box;
    
    display: inline-block;
    vertical-align: top;

    height: 19px;
    padding: 2px 5px 2px 8px;
    background: #16517d url(button_left.png) no-repeat left top;
    line-height: 19px;
}


/* 按鈕的 hover 效果設定，變換底圖定位及文字顏色 */
a.Button:hover,
a.Button:hover {
    background-position: right bottom;
    color: #fff;
    text-decoration: none;
}
a.Button:hover span,
a.Button:hover strong {
    background-position: left bottom;
    color: #fff;
    text-decoration: none;
}


/* 延伸的按鈕樣式 (AddButton)*/
a.AddButton span,
a.AddButton strong {
    padding-left:25px;
    color:#003366;
    background: #2a2a2a url(button_add_left.png) no-repeat left top;
}

基礎樣式所用到的圖片:

botton_left.png


button_right.png


接著是延伸樣式所用到的圖片：

button_add_left.png


如果還要延伸其他樣式只要改改顏色或圖示就可以了。
上面的 CSS 有用到在 CSS 部屬經驗-樣式命名 提到的限制樣式對象的使用方式，這樣的選擇器設定只能讓樣式套用在連結元素上，這樣的好處是讓樣式與元素有一個關連性。

套用在 <input/> 的樣式
已經為連結元素建立美美的按鈕了，總不能讓 <input/> 這樣醜醜的見人吧！
CSS 樣式：

原始碼

1. input.Button { 
2.    background: #9b9b9b url(button_bg.png) left top repeat-x; 
3.    border: 1px solid #ccc; 
4.    border-color: #999 #858585 #666 #858585; 
5.    color: #fff; 
6.    cursor: pointer; 
7.    cursor:hand; 
8.    font-size: 11px; 
9.    font-weight: bold; 
10.    line-height: 16px; 
11.    padding: 0 4px; 
12.    text-decoration: none; 
13.    text-shadow: #9b9b9b 0 -1px 1px; 
14.    vertical-align: middle; 
15.    vertical-align: baseline; 
16.  
17.    /*各瀏覽器的圓角設定，這裡捨棄對 IE6 的支援*/     
18.    border-radius: 2px; 
19.    -moz-border-radius: 2px; 
20.    -webkit-border-radius: 2px; 
21.    -khtml-border-radius: 2px; 
22. } 

input.Button {
    background: #9b9b9b url(button_bg.png) left top repeat-x;
    border: 1px solid #ccc;
    border-color: #999 #858585 #666 #858585;
    color: #fff;
    cursor: pointer;
    cursor:hand;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    padding: 0 4px;
    text-decoration: none;
    text-shadow: #9b9b9b 0 -1px 1px;
    vertical-align: middle;
    vertical-align: baseline;
    
    /*各瀏覽器的圓角設定，這裡捨棄對 IE6 的支援*/    
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
}

所用到的圖片:

button_bg.png


這裡我也使用相同的 class 名稱，但在限制樣式對象的作用下這兩個樣式是不會互相衝突的。

參考頁面：
Last.fm
Wacanai.com

CSS 部屬經驗-容器樣式

為了 IE6 的相容這裡我不會用太新穎的選擇器，希望有一天 IE6 的使用群可以消失，這樣在排版時可以不去顧慮 IE6 的問題。

主旨：

1. 容器樣式的概念
2. 容器樣式定義
3. 建構一個容器
   

容器樣式的概念


我們會發現在上面這三個樣式裡外匡是一樣的，除了顏色上的差異，而這些外匡的 HTML 結構也是一樣的，我稱這樣的外匡為容器，主要只提供樣式的框架，不處理資料的呈現。

將容器與樣式分離的好處是版面的呈現變靈活了，讓排版就像堆積木一樣，而樣式的重複利用性也會變高，樣式定義的複雜度也會降低。


上面這張圖就是容器的架構概念，在容器裡放入資料呈現的樣式，再將容器加入頁面排版裡。


容器樣式定義
如果已經瞭解什麼是容器了，接著要開始為容器的定義作一些規範：

1. 不處理資料的呈現，例如資料的列表。
2. 容器裡不可以在包含容器，過份的疊加套用會讓整體的架構變的很亂，所以讓容器間的關係保持平等是比較好的。
3. 不要設定太多會繼承的樣式屬性，這樣會讓包在裡面的樣式要額外設定一些複寫的樣式屬性，例如字體顏色、對齊方式等。
4. 不要為容器設定高度與寬度的屬性，高度應該要隨著內容而變動，寬度則應該適應版面的大小，這樣才不容易出現跑版的異常問題。
   

建構一個容器
針對上面的樣式來建構容器的 HTML，當然不一定照著一樣的方式建立，依照容器樣式的需求去建立就行了。

這裡會發現我之前在 CSS 部屬經驗-樣式命名 中提到的樣式成員名稱，這裡我還為每個樣式成員都加上了 "Area" 這個名稱前綴，以避免選擇意外套用到不該套用的元素上。

原始碼

1. <div class="AreaBox_1"> 
2.  <h3 class="AreaTitle">標題文字</h3> 
3.  <div class="AreaContent"> 
4.    <!--  
5.      其他樣式元素...  
6.    --> 
7.  </div> 
8.  <div class="AreaBottom"> 
9.    <div></div> 
10.  </div> 
11. </div> 

<div class="AreaBox_1">
  <h3 class="AreaTitle">標題文字</h3>
  <div class="AreaContent">
    <!-- 
      其他樣式元素... 
    -->
  </div>
  <div class="AreaBottom">
    <div></div>
  </div>
</div>

這裡可以看出 CSS 的選擇器的層級最多只有三層，如果樣式的層級太深以後要接手的人會很難進入狀況，層級太淺樣式又會很沒結構感，造成樣式很零散，兩層到三層之間的選擇器設定是比較好維護的。

關於容器的樣式設定我並沒有設定的很完整，請自由發揮吧！

原始碼

1. .AreaBox_1 { 
2.    /*右上角的底圖*/ 
3.    background:transparent url(../images/xxxx.gif) no-repeat right top; 
4.    /*上下的間距*/ 
5.    margin:5px auto; 
6. } 
7. .AreaBox_1 .AreaTitle{ 
8.    /*左上角的底圖*/ 
9.    background:transparent url(../images/xxxx.gif) no-repeat left top; 
10.    /*標題設定*/ 
11.    color:#585E1A; 
12.    font-size:16px; 
13.    padding:10px 0 14px 35px; 
14. } 
15. .AreaBox_1 .AreaContent{ 
16.    /*中間的底圖*/ 
17.    background:transparent url(../images/xxxx.gif) repeat-y left center; 
18.    padding:0 12px; 
19. } 
20. .AreaBox_1 .AreaBottom{ 
21.    /*右下角的底圖*/ 
22.    background:transparent url(../images/xxxx.gif) repeat-y right top; 
23. } 
24. .AreaBox_1 .AreaBottom div{ 
25.    /*左下角的底圖*/ 
26.    background:transparent url(../images/xxxx.gif) repeat-y left top; 
27.    height:10px; 
28. } 

.AreaBox_1 {
    /*右上角的底圖*/
    background:transparent url(../images/xxxx.gif) no-repeat right top;
    /*上下的間距*/
    margin:5px auto;
}
.AreaBox_1 .AreaTitle{
    /*左上角的底圖*/
    background:transparent url(../images/xxxx.gif) no-repeat left top;
    /*標題設定*/
    color:#585E1A;
    font-size:16px;
    padding:10px 0 14px 35px;
}
.AreaBox_1 .AreaContent{
    /*中間的底圖*/
    background:transparent url(../images/xxxx.gif) repeat-y left center;
    padding:0 12px;
}
.AreaBox_1 .AreaBottom{
    /*右下角的底圖*/
    background:transparent url(../images/xxxx.gif) repeat-y right top;
}
.AreaBox_1 .AreaBottom div{
    /*左下角的底圖*/
    background:transparent url(../images/xxxx.gif) repeat-y left top;
    height:10px;
}

參考頁面：
Last.fm
Wacanai.com

CSS 部屬經驗-頁面排版

為了 IE6 的相容這裡我不會用太新穎的選擇器，希望有一天 IE6 的使用群可以消失，這樣在排版時可以不去顧慮 IE6 的問題。

主旨：

1. 分析版面架構
2. 定義所需要的排版區域
3. 為需要設置寬度的區域增加外匡
   
4. 建立 HTML 架構
5. CSS 排版設定
   

如何分析版面架構
一般網頁架構都差不多，大部分都是由幾個主要的區域建構而成，只是在部屬上有些差異而已。

在下面幾個網頁排版中我們可以發現，除了兩欄或三籃的差異外，基本上整體的頁面部屬是一樣的。

天然の屋


TERRANOVA 朵拉大地


Jamboree購物網


定義所需要的排版區域
根據上面第一個版型，可以分析出以下的版面架構，要部屬這樣的架構其實不難，依照一個很直覺的方式去部屬就可以了。



為需要設置寬度的區域增加外匡
在之前的文章 寬度(width)不要與其他屬性同時設定[CSS] 有提到寬度定義的手則，所以接著要為具有寬度定義的區域增加外匡，然後在外匡上設定寬度的大小。

不管是排版或是樣式定義，除非必要的樣式，其餘請不要設置高度與寬度的樣式屬性，頁面是會隨著內容而變動的，愈是增加不必要的限制，頁面愈容易跑版。




建立 HTML 架構
依照上面的架構圖我們可以建立以下的 HTML 架構。
這裡也是一個很簡單架設觀念，只要把每個方匡都想成是 <div></div>，然後在從外到內一層一層去部屬就可以了。

對於 ContentWrapper 的結構位置建議放置在分欄區域(MainWrapper)的起始位置，這樣可以讓內容資訊有較好的 SEO。

原始碼

1. <div id="ContainerWrapper" class="ClearIt"> 
2. <div id="Container"> 
3.  
4.   <div id="Header" class="ClearIt"> 
5.     Header 
6.   </div> 
7.  
8.   <div id="Banner"> 
9.     Banner 
10.   </div> 
11.  
12.   <div id="MainWrapper" class="ClearIt"> 
13.     <div id="ContentWrapper"> 
14.       <div id="Content"> 
15.         Content 
16.       </div> 
17.     </div> 
18.  
19.     <div id="SidebarWrapper"> 
20.       <div id="Sidebar"> 
21.         Sidebar 
22.       </div> 
23.     </div> 
24.   </div> 
25.  
26. </div> 
27. </div> 
28.  
29. <div id="FooterWrapper"> 
30. <div id="Footer"> 
31.   Footer 
32. </div> 
33. </div> 

<div id="ContainerWrapper" class="ClearIt">
 <div id="Container">

   <div id="Header" class="ClearIt">
     Header
   </div>

   <div id="Banner">
     Banner
   </div>

   <div id="MainWrapper" class="ClearIt">
     <div id="ContentWrapper">
       <div id="Content">
         Content
       </div>
     </div>

     <div id="SidebarWrapper">
       <div id="Sidebar">
         Sidebar
       </div>
     </div>
   </div>

 </div>
</div>

<div id="FooterWrapper">
 <div id="Footer">
   Footer
 </div>
</div>

CSS 排版設定
要設定 CSS 也是一個簡單的事情，先將所有的 id 取出至 CSS 檔建出以下的文件。

原始碼

1. /* 整體頁面區域 */  
2. #ContainerWrapper{} 
3. #Container{} 
4.  
5. /* 頁首區域 */ 
6. #Header{} 
7.  
8. /* 橫幅區域 */ 
9. #Banner{} 
10.  
11. /* 主要內容區域 */ 
12. #MainWrapper{} 
13.  
14. /* 主欄區域 */ 
15. #ContentWrapper{} 
16. #Content{} 
17.  
18. /* 側欄 區域 */ 
19. #SidebarWrapper{} 
20. #Sidebar{} 
21.  
22. /* 頁尾 區域 */ 
23. #FooterWrapper{} 
24. #Footer{} 

/* 整體頁面區域 */ 
#ContainerWrapper{}
#Container{}

/* 頁首區域 */
#Header{}

/* 橫幅區域 */
#Banner{}

/* 主要內容區域 */
#MainWrapper{}

/* 主欄區域 */
#ContentWrapper{}
#Content{}

/* 側欄 區域 */
#SidebarWrapper{}
#Sidebar{}

/* 頁尾 區域 */
#FooterWrapper{}
#Footer{}

接著為版型作位置及寬度上的配置，在設定時會很難察覺區域的情況，建議為每個區域都先設置不同的底色加以區別。

原始碼

1. /*先定義代替 <div style="display:block;"></div> 的樣式設定*/ 
2. .ClearIt:after { 
3.   content: "."; 
4.   display: block; 
5.   height: 0; 
6.   clear: both; 
7.   visibility: hidden; 
8. } 
9. /*針對 IE6 的方式*/ 
10. .ClearIt { 
11.   _zoom: 1; 
12. } 
13.  
14.  
15. /* 整體頁面區域 */ 
16. #ContainerWrapper{ 
17.   /* 設定寬度並整體置中 */ 
18.   width:982px; 
19.   margin:0 auto; 
20. } 
21. #Container{} 
22.  
23.  
24. /* 頁首區域 */ 
25. #Header{} 
26.  
27.  
28. /* 橫幅區域 */ 
29. #Banner{} 
30.  
31.  
32. /* 主要內容區域 */ 
33. #MainWrapper{} 
34.  
35.  
36. /* 主欄區域 */ 
37. #ContentWrapper{ 
38.   /* 設定主欄的位置 */ 
39.   float:right; 
40.  
41.   /* 設定內容溢出的處理方式，這裡建議設置隱藏，避免非預期的跑版出現。 */ 
42.   overflow:hidden; 
43.  
44.   /* 設定主欄的寬度 */ 
45.   width:736px; 
46. } 
47. #Content{ 
48.   /* 這裡建議設定最小高度，當內容高度不足時，不置於讓版面變得很奇怪。 */ 
49.   min-height:500px; 
50.  
51.   /*IE6 最小高的設定*/ 
52.   _height:500px; 
53.   _overflow:visible; 
54. } 
55.  
56.  
57. /* 側欄 區域 */ 
58. #SidebarWrapper{ 
59.   /* 設定側欄的位置 */ 
60.   float:left; 
61.  
62.   /* 設定內容溢出的處理方式，這裡建議設置隱藏，避免非預期的跑版出現。 */ 
63.   overflow:hidden; 
64.  
65.   /* 設定側欄的寬度 */ 
66.   width:202px; 
67. } 
68. #Sidebar{} 
69.  
70.  
71. /* 頁尾 區域 */ 
72. #FooterWrapper{ 
73.   /* 設定寬度並整體置中 */ 
74.   width:982px; 
75.   margin:0 auto; 
76. } 
77. #Footer{} 

/*先定義代替 <div style="display:block;"></div> 的樣式設定*/
.ClearIt:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}
/*針對 IE6 的方式*/
.ClearIt {
   _zoom: 1;
}


/* 整體頁面區域 */
#ContainerWrapper{
   /* 設定寬度並整體置中 */
   width:982px;
   margin:0 auto;
}
#Container{}


/* 頁首區域 */
#Header{}
    
    
/* 橫幅區域 */
#Banner{}
    
    
/* 主要內容區域 */
#MainWrapper{}


/* 主欄區域 */
#ContentWrapper{
   /* 設定主欄的位置 */
   float:right;

   /* 設定內容溢出的處理方式，這裡建議設置隱藏，避免非預期的跑版出現。 */
   overflow:hidden;

   /* 設定主欄的寬度 */
   width:736px;
}
#Content{
   /* 這裡建議設定最小高度，當內容高度不足時，不置於讓版面變得很奇怪。 */
   min-height:500px;

   /*IE6 最小高的設定*/
   _height:500px;
   _overflow:visible;
}

    
/* 側欄 區域 */
#SidebarWrapper{
   /* 設定側欄的位置 */
   float:left;

   /* 設定內容溢出的處理方式，這裡建議設置隱藏，避免非預期的跑版出現。 */
   overflow:hidden;

   /* 設定側欄的寬度 */
   width:202px;
}
#Sidebar{}


/* 頁尾 區域 */
#FooterWrapper{
   /* 設定寬度並整體置中 */
   width:982px;
   margin:0 auto;
}
#Footer{}

剩下的就是去調整其他區域的底圖、padding 及 margin，那些網頁美工的設定。


參考頁面：
Last.fm
Wacanai.com

CSS 部屬經驗-樣式命名

為了 IE6 的相容這裡我不會用太新穎的選擇器，希望有一天 IE6 的使用群可以消失，這樣在排版時可以不去顧慮 IE6 的問題。

主旨：

1. 定義樣式的命名方式，區分 CSS 與 JavaScript 的使用
2. id , class , tag 等選擇器得使用時機
   

為什麼要定義定義樣式的命名方式？
CSS 在選擇器的宣告上十分自由，但為了讓其他人也能順利的閱讀自己寫的樣式，定義一個有規則的命名方式，可以減少不必要的誤會跟問題。

這裡我自己作了命名的定義：

• CSS 命名規則：
  
  1. 單字開頭大寫，不使用底線（_）間隔，除最後的數字代號前（.Style_1）
  2. 除特定版型架構命名，不得以 id 方式宣告樣式，唯一樣式才可以使用 id 命名（#SidebarWrapperLeft）
  3. 所有可沿用的樣式都才採用 class 方式宣告
     
  
  
• JS 命名規則：
  
  1. 所有單字小寫，使用底線（_）間隔（action_bt）
  2. 與 JS 元素獲取相關命名均不可帶有樣式屬性
     

雖然有 CSS , JS 及 HTML 樣版可以將程式與美工的部分分離，但在 HTML 架構的規劃上仍需要協同開發，為區分樣式與 JS 的程式操作最好是將命名規則分開。


如何去決定選擇器的使用？

• id 選擇器：
  在 id 的使用上我分成[頁面排版]及[例外樣式]
  
  1. 頁面排版：排版是不會重複的樣式定義，而且必須擁有不容易被複寫的特性，使用 id 選擇器去定義樣式是在好不過的。
     
     常用的命名詞彙：
     

     Outer	外匡
     Container	容器
     Status	狀態
     Header	頁首
     Banner	頁面橫幅
     Nav/Navigation	領航
     Navbar	領航列
     Content/Container	內容
     Main	頁面主體
     Sidebar	側欄
     Footer	頁尾
     Wrapper	具有寬度定義的區塊

     
     
     
  2. 例外樣式：在頁面中具有特別需要美工修飾的樣式時，利用 id 選擇器去強制複寫原有樣式。
     這是為了特殊樣式而保留的彈性，但不建議經常性的使用，這樣就違反 CSS 樣式統一的特性，未來維護時只會帶來更多的不便。
     
     
  
  
• class 選擇器 ：
  在 class 的使用上我分成[樣式定義]及[元素類型]
  
  1. 樣式定義：樣式規劃上最主要的用途定義，去規劃所有可重複利用的樣式，例如：按鈕、列表、表單等區塊性的樣式。
     
     常用的命名詞彙：
     

     Summary	摘要
     Widget	工具集
     Toolbar	工具列
     Navbar	領航列
     Menu	項目單
     TextLink	文字連結列
     PageLink	頁面連結列
     Tab	頁籤
     Search	搜尋
     Form	表單
     List	列表
     TextList	文字列表
     ImageList	圖片列表
     Button	按鈕
     AreaBox	區塊匡
     InfoBox	資訊匡
     PageInfo	頁面資訊
     DropMenu	下拉選單
     heading/Title	標題
     SecDivide	區段標題

     
     
     
  2. 樣式成員名稱：在樣式編排時為了補 tag 不足(樣式成員)，利用 class 去定義內層的原件樣式。
     命名時可依據區塊在樣式裡的角色去取名。
     
     常用的命名詞彙：
     

     Title	標題
     Date	日期
     Buttons	按鈕群
     Bottom	底部
     Logo	網站標誌
     Image	圖片
     Action	動作
     status	狀態
     Content	內容
     Even	偶數
     Odd	奇數
     First	最前的
     List	最後的

     
     
  
  
• tag (HTML 標籤)選擇器：
  在 tag 的使用上我分成[限制樣式對象]及[樣式成員]
  
  1. 限制樣式對象：在樣式選擇器前加入可使用此樣式的tag(HTML 標籤)，去區別可使用此樣式的元素。
     
     
  2. 樣式成員：在樣式定義結構中所使用到的 tag，別太依賴 tag 去定義樣式，在 HTML 中的 tag 是有限的，適時的用 class 去區別樣式成員。
     判斷方式，當子節點超過 2 層或同類 tag 超過一個以上時，最好使用樣式成員名稱的 class 命名去增加樣式成員

在這些定義中可能還是很模糊，在之後的文章中會介紹如何去規劃樣式，在那些範例中會使用到上面的規則，應該會比較容易瞭解。

參考頁面：
Last.fm
Wacanai.com

(轉載) CSS hack 區分IE6,IE7,IE8,Firefox,Opera,Google,PCManCB

今天 Cara 問了一個我沒用過的 CSS hack 方法
最後在 英創達網路有限公司 找到詳細的差異比較表
這個表清楚的各版本 CSS 的區分方法

	IE6	IE7	IE8	Firefox	Opera	Google	PCManCB	範例
>	Y	Y	Y	N	N	N	Y	.type { >color: #F00; }
.	Y	Y	N	N	N	N	Y	.type { .color: #F00; }
*	Y	Y	N	N	N	N	Y	.type { *color: #F00; }
_	Y	N	N	N	N	N	N	.type { _color: #F00; }
!important	N	Y	Y	Y	Y	Y	Y	.type { color: #F00 !important; }
*+	Y	Y	N	N	N	N	Y	.type { *+color: #F00; }

Eclipse 3.4 3.5 連結 MySQL

首先 Eclipse 必須裝有 DataBase Tool 的套件
再來系統要安裝 JDBC for MySQL 的函示庫

這跟 3.3 的需求不同
函示庫必須安裝在 Java 的目錄下
要不然就會得到以下的錯誤訊息
java.lang.ClassNotFoundException: com.mysql.jdbc.Driver

在 Ubuntu 下你可以使用以下指令安裝
sudo apt-get install libmysql-java

或著到 MySQL 官網下載 mysql-connector-java-5.1.8.tar.gz
然後將 jar 解開至 /usr/share/java 下


看圖說故事：

在 Eclipse 中建立新連結


選取資料庫類型
並填寫連線名稱


先建立連結驅動器
之後再填寫這些設定值
要不然也無發測試連線


選取資料庫版本


這裡要先刪除原有的設定
要不然會出現下面的錯誤訊息
Unable to locate JAR/zip in file system as specified by the driver definition: mysql-connector-java-5.1.0-bin.jar

然後再加入新的連結函示庫


函示庫的位址在 /usr/share/java


這樣就可以成功建立連結了
再來就是把剩下的設定填一填就好了

之後開啟 Eclipse 後只要在剛建好的連結上執行連接就可以了

參考來源：
Using Eclipse Dali with Hibernate as Persistence Provider

利用 AlphaImageLoader 解決 IE6 對 png 圖檔的透明問題

之前都利用 JavaScript 的 htc 去解決 png 的透明問題
但是在 JavaScript 作動前 png 是不會正常顯示的
在學會 AlphaImageLoader 的使用後發現效果還蠻好的

但是會有一些奇怪後遺症
就是區域內的連接都失效了
解決的方式就是在利用一個元素放在區域內
然後設有 position:relative; 的屬性
連結修正無法生效在設有 position:absolute; 的區域內

CSS :

原始碼

1. #ContainerWrapper{ 
2.    background: transparent url(/images/border_bg.png) repeat-y; 
3.    width:982px; 
4.    margin:0 auto; 
5.  
6.    /*IE6 PNG 檔透明修正設定*/ 
7.    _background: transparent; 
8.    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/border_bg.png', sizingMethod='scale'); 
9. } 
10.  
11. #ContainerWrapper #Container{ 
12.    /*修正 AlphaImageLoader 造成的連結失效問題*/ 
13.    _position:relative; 
14. } 

#ContainerWrapper{
    background: transparent url(/images/border_bg.png) repeat-y;
    width:982px;
    margin:0 auto;

    /*IE6 PNG 檔透明修正設定*/
    _background: transparent;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/border_bg.png', sizingMethod='scale');
}

#ContainerWrapper #Container{
    /*修正 AlphaImageLoader 造成的連結失效問題*/
    _position:relative;
}

HTML:

原始碼

1. <div id="ContainerWrapper"> 
2.    <div id="Container"> 
3.    </div> 
4. </div> 

<div id="ContainerWrapper">
    <div id="Container">
    </div>
</div>

AlphaImageLoader 的參數值

1. enabled:布林值(Boolean)。是否開啟濾鏡(基本上可以忽略這個設定)
   
   • true:開啟濾鏡(預設值)
   • false:關閉濾鏡
     
     
2. sizingMethod:字串(String)。設定圖片在元素容器裡的顯示方式
   
   • crop:剪切圖片以符合應元素尺寸
   • image:使元素尺寸符合圖片尺寸(預設值)
   • scale:縮放圖片以符合元素尺寸
     
     
3. src :字串(String)。指定圖片的路徑，注意這個路徑是指加載濾鏡的頁面相對於圖片的路徑而不是css文件相對於圖片的路徑。
   建議統一使用以 DocumentRoot 為準的絕對路徑
   

參考來源：
Microsoft.AlphaImageLoader滤镜讲解

InnoDB 匯入時關閉 Foreign Key 檢查 [MySQL]

在設有 Foreign Key 的資料表在寫入時都會檢查資料的正確性
可是再匯入原有資料時會因為表順序而產生錯誤問題
這時候就必須關閉 Foreign Key 檢查

我都會在原始資料的 sql 文件最前面加入這兩行
第一：先關閉 Foreign Key 檢查，避免匯入失敗
第二：確定文件的編碼格式，避免亂碼的問題

原始碼

1. -- 關閉 Foreign Key 檢查, 0 是關閉，1 是開啟 
2. -- 設定只會在這次的連結中生效 
3. SET FOREIGN_KEY_CHECKS = 0; 
4.  
5. -- 指定匯入的編碼方式 
6. SET NAMES 'UTF8'; 

-- 關閉 Foreign Key 檢查, 0 是關閉，1 是開啟
-- 設定只會在這次的連結中生效
SET FOREIGN_KEY_CHECKS = 0;

-- 指定匯入的編碼方式
SET NAMES 'UTF8';

(轉載)mysqldump 5.1 資料備份詳細指令 [MySQL]

轉載自：MySQL 5.1參考手冊

mysqldump - 資料庫備份程式

mysqldump [options] db_name [tables]
mysqldump [options] --database DB1 [DB2 DB3...]
mysqldump [options] --all--database
如果沒有指定任何資料表或使用了---database或--all--database選項，則轉儲整個資料庫。

要想獲得您的版本的mysqldump支援的選項，執行mysqldump ---help。

如果運行mysqldump沒有--quick或--opt選項，mysqldump在轉儲結果前將整個結果集裝入內存。如果轉儲大資料庫可能會出現問題。該選項預設啟用，但可以用--skip-opt禁用。

如果使用最新版本的mysqldump程式生成一個轉儲重裝到很舊版本的MySQL伺服器中，不應使用--opt或-e選項。

選項 OPTIONS

--help，-？

顯示幫助消息並退出。

--add-drop--database

在每個CREATE DATABASE語句前新增DROP DATABASE語句。

--add-drop-tables

在每個CREATE TABLE語句前新增DROP TABLE語句。

--add-locking

用LOCK TABLES和UNLOCK TABLES語句引用每個資料表轉儲。重載轉儲檔案時插入得更快。參見7.2.16節，「INSERT語句的速度」。

--all--database，-A

轉儲所有資料庫中的所有資料表。與使用---database選項相同，在命令行中命名所有資料庫。

--allow-keywords

允許建立關鍵字列名。應在每個列名前面加上資料表名前綴。

---comments[={0|1}]

如果設置為 0，禁止轉儲檔案中的其它訊息，例如程式版本、伺服器版本和主機。--skip—comments與---comments=0的結果相同。 預設值為1，即包括額外訊息。

--compact

產生少量輸出。該選項禁用註釋並啟用--skip-add-drop-tables、--no-set-names、--skip-disable-keys和--skip-add-locking選項。

--compatible=name

產生與其它資料庫系統或舊的MySQL伺服器更兼容的輸出。值可以為ansi、mysql323、mysql40、postgresql、oracle、mssql、db2、maxdb、no_key_options、no_tables_options或者no_field_options。要使用幾個值，用逗號將它們隔開。這些值與設置伺服器SQL模式的相應選項有相同的含義。參見5.3.2節，「SQL伺服器模式」。

該選項不能保證同其它伺服器之間的相容性。它只啟用那些目前能夠使轉儲輸出更兼容的SQL模式值。例如，--compatible=oracle 不映射Oracle類型或使用Oracle註釋語法的數據類型。

--complete-insert，-c

使用包括列名的完整的INSERT語句。

--compress，-C

壓縮在客戶端和伺服器之間發送的所有訊息（如果二者均支援壓縮）。

--create-option

在CREATE TABLE語句中包括所有MySQL資料表選項。

--database，-B

轉儲幾個資料庫。通常情況，mysqldump將命令行中的第1個名字參量看作資料庫名，後面的名看作資料表名。使用該選項，它將所有名字參量看作資料庫名。CREATE DATABASE IF NOT EXISTS db_name和USE db_name語句包含在每個新資料庫前的輸出中。

--debug[=debug_options]，-# [debug_options]

寫調試日誌。debug_options字串通常為'd:t:o,file_name'。

--default-character-set=charset

使用charsetas預設字元編碼。參見5.10.1節，「數據和排序用字元編碼」。如果沒有指定，mysqldump使用utf8。

--delayed-insert

使用INSERT DELAYED語句插入行。

--delete-master-logs

在主複製伺服器上，完成轉儲操作後刪除二進制日誌。該選項自動啟用--master-data。

--disable-keys，-K

對於每個資料表，用/*!40000 ALTER TABLE tbl_name DISABLE KEYS */;和/*!40000 ALTER TABLE tbl_name ENABLE KEYS */;語句引用INSERT語句。這樣可以更快地裝載轉儲檔案，因為在插入所有行後建立索引。該選項只適合MyISAM資料表。

--extended-insert，-e

使用包括幾個VALUES列資料表的多行INSERT語法。這樣使轉儲檔案更小，重載檔案時可以加速插入。

--fields-terminated-by=...

--fields-enclosed-by=...

--fields-optionally-enclosed-by=...

--fields-escaped-by=...

--lines-terminated-by=...

這些選項結合-T選項使用，與LOAD DATA INFILE的相應子句有相同的含義。參見13.2.5節，「LOAD DATA INFILE語法」。

--first-slave，-x

不贊成使用，現在重新命名為--lock-all-tables。

--flush-logs，-F

開始轉儲前刷新MySQL伺服器日誌檔案。該選項要求RELOAD權限。請注意如果結合--all--database(或-A)選項使用該選項，根據每個轉儲的資料庫刷新日誌。

例外情況是當使用--lock-all-tables或--master-data的時候：在這種情況下，日誌只刷新一次，在所有 資料表被鎖定後刷新。如果您想要同時轉儲和刷新日誌，應使用--flush-logs連同--lock-all-tables或--master-data。

--force，-f

在資料表轉儲過程中，即使出現SQL錯誤也繼續。

--host=host_name，-h host_name

從給定主機的MySQL伺服器轉儲數據。預設主機是localhost。

--hex-blob

使用十六進制符號轉儲二進制字串列(例如，'abc' 變為0x616263)。影響到的列有BINARY、VARBINARY、BLOB。

--lock-all-tables，-x

將資料庫中的所有資料表加鎖。在整體轉儲過程中通過全局讀鎖定來實現。該選項自動關閉--single-transaction和--lock-tables。

--lock-tables，-l

開始轉儲前鎖定所有資料表。用READ LOCAL鎖定資料表以允許並行插入MyISAM資料表。對於事務資料表例如InnoDB和BDB，--single-transaction是一個更好的選項，因為它不根本需要鎖定資料表。

請注意當轉儲多個資料庫時，--lock-tables分別為每個資料庫鎖定資料表。因此，該選項不能保證轉儲檔案中的資料表在資料庫之間的邏輯一致性。不同資料庫資料表的轉儲狀態可以完全不同。

--master-data[=value]

該選項將二進制日誌的位置和檔案名寫入到輸出中。該選項要求有RELOAD權限，並且必須啟用二進制日誌。如果該選項值等於1，位置和檔案名被寫入CHANGE MASTER語句形式的轉儲輸出，如果您使用該SQL轉儲主伺服器以設置從伺服器，從伺服器從主伺服器二進制日誌的正確位置開始。如果選項值等於2，CHANGE MASTER語句被寫成SQL註釋。如果value被省略，這是預設動作。

--master-data選項啟用--lock-all-tables，除非還指定--single-transaction(在這種情況下，只在剛開始轉儲時短時間獲得全局讀鎖定。又見--single-transaction。在任何一種情況下，日誌相關動作發生在轉儲時。該選項自動關閉--lock-tables。

--no-create-db，-n

該選項禁用CREATE DATABASE /*!32312 IF NOT EXISTS*/ db_name語句，如果給出---database或--all--database選項，則包含到輸出中。

--no-create-info，-t

不寫重新建立每個轉儲資料表的CREATE TABLE語句。

--no-data，-d

不寫資料表的任何行訊息。如果您只想轉儲資料表的結構這很有用。

--opt

該選項是速記；等同於指定 --add-drop-tables --add-locking --create-option --disable-keys --extended-insert --lock-tables --quick --set-charset。

它可以給出很快的轉儲操作並產生一個可以很快裝入MySQL伺服器的轉儲檔案。該選項預設開啟，但可以用--skip-opt禁用。要想只禁用確信用-opt啟用的選項，使用--skip形式；例如，--skip-add-drop-tables或--skip-quick。

--password[=password]，-p[password]

連接伺服器時使用的密碼。如果您使用短選項形式(-p)，不能在選項和密碼之間有一個空格。如果在命令行中，忽略了--password或-p選項後面的 密碼值，將提示您輸入一個。

--port=port_num，-P port_num

用於連接的TCP/IP端口號。

--protocol={TCP | SOCKET | PIPE | MEMORY}

使用的連接協議。

--quick，-q

該選項用於轉儲大的資料表。它強制mysqldump從伺服器一次一行地檢索資料表中的行而不是檢索所有行並在輸出前將它緩存到內存中。

--quote-names，-Q

用『`』字元引用資料庫、資料表和列名。如果伺服器SQL模式包括ANSI_QUOTES選項，用『"』字元引用名。預設啟用該選項。可以用--skip-quote-names禁用，但該選項應跟在其它選項後面，例如可以啟用--quote-names的--compatible。

--result-file=file，-r file

將輸出轉向給定的檔案。該選項應用在Windows中，因為它禁止將新行『\n』字元轉換為『\r\n』回車、返回/新行序列。

--routines，-R

在轉儲的資料庫中轉儲儲存程式(函數和程式)。使用---routines產生的輸出包含CREATE PROCEDURE和CREATE FUNCTION語句以重新建立子程式。但是，這些語句不包括屬性，例如子程式定義者或建立和修改時間戳。這說明當重載子程式時，對它們進行建立時定義者應設置為重載用戶，時間戳等於重載時間。

如果您需要建立的子程式使用原來的定義者和時間戳屬性，不使用--routines。相反，使用一個具有mysql資料庫相應權限的MySQL帳號直接轉儲和重載mysql.proc資料表的內容。

該選項在MySQL 5.1.2中新增進來。在此之前，儲存程式不轉儲。

--set-charset

將SET NAMES default_character_set加到輸出中。該選項預設啟用。要想禁用SET NAMES語句，使用--skip-set-charset。

--single-transaction

該選項從伺服器轉儲數據之前發出一個BEGIN SQL語句。它只適用於事務資料表，例如InnoDB和BDB，因為然後它將在發出BEGIN而沒有阻塞任何應用程式時轉儲一致的資料庫狀態。

當使用該選項時，應記住只有InnoDB資料表能以一致的狀態被轉儲。例如，使用該選項時任何轉儲的MyISAM或HEAP資料表仍然可以更改狀態。

--single-transaction選項和--lock-tables選項是互斥的，因為LOCK TABLES會使任何掛起的事務隱含提交。

要想轉儲大的資料表，應結合--quick使用該選項。

--socket=path，-S path

當連接localhost(為預設主機)時使用的套接字檔案。

--skip--comments

參見---comments選項的描述。

--tab=path，-T path

產生tab分割的數據檔案。對於每個轉儲的資料表，mysqldump建立一個包含建立資料表的CREATE TABLE語句的tbl_name.sql檔案，和一個包含其數據的tbl_name.txt檔案。選項值為寫入檔案的目錄。

預設情況，.txt數據檔案的格式是在列值和每行後面的新行之間使用tab字元。可以使用--fields-xxx和--行--xxx選項明顯指定格式。

註釋：該選項只適用於mysqldump與mysqld伺服器在同一台機器上運行時。您必須具有FILE權限，並且伺服器必須有在您指定的目錄中有寫檔案的授權。

--tables

覆蓋---database或-B選項。選項後面的所有參量被看作資料表名。

--triggers

為每個轉儲的資料表轉儲觸發器。該選項預設啟用；用--skip-triggers禁用它。

--tz-utc

在轉儲檔案中加入SET TIME_ZONE='+00:00'以便TIMESTAMP列可以在具有不同時區的伺服器之間轉儲和重載。(不使用該選項，TIMESTAMP列在具有本地時區的源伺服器和目的伺服器之間轉儲和重載）。--tz-utc也可以保護由於夏令時帶來的更改。--tz-utc預設啟用。要想禁用它，使用--skip-tz-utc。該選項在MySQL 5.1.2中加入。

--user=user_name，-u user_name

連接伺服器時使用的MySQL帳號。

--verbose，-v

冗長模式。打印出程式操作的詳細訊息。

--version，-V

顯示版本訊息並退出。

--where='where-condition', -w 'where-condition'

只轉儲給定的WHERE條件選擇的記錄。請注意如果條件包含命令解釋符專用空格或字元，一定要將條件引用起來。
例如：
"--where=user='jimf'"

"-wuserid>1"

"-wuserid<1"

--xml，-X

將轉儲輸出寫成XML。

--var_name=value

用來選項設置下面的變數：

max_allowed_packet

客戶端/伺服器之間通信的緩存區的最大大小。最大為1GB。
net_buffer_length

客戶端/伺服器之間通信的緩存區的初始大小。當建立多行插入語句時(如同使用選項--extended-insert或--opt)，mysqldump建立長度達net_buffer_length的行。如果增加該變數，還應確保在MySQL伺服器中的net_buffer_length變數至少這麼大。

還可以使用--set-variable=var_name=value或-O var_name=value語法設置變數。然而，現在不贊成使用該語法。

範例

原始碼

1. # mysqldump最常用於備份一個整個的資料庫： 
2. mysqldump --opt db_name > backup-file.sql 
3.  
4. # 您可以這樣將轉儲檔案讀回到伺服器： 
5. mysql `db_name` < `backup-file.sql` 
6. # 或者為： 
7. mysql -e "source /path-to--backup/backup-file.sql" `db_name` 
8.  
9.  
10.  
11. # mysqldump也可用於從一個MySQL伺服器向另一個伺服器複製數據時裝載資料庫： 
12. mysqldump --opt `db_name` | mysql --host=`remote_host` -C `db_name` 
13.  
14.  
15.  
16. # 可以用一個命令轉儲幾個資料庫： 
17. mysqldump ---database `db_name1` [`db_name2` ...] > `my_databases.sql` 
18.  
19.  
20.  
21. # 如果您想要轉儲所有資料庫，使用--all--database選項： 
22. mysqldump --all-databases > `all_databases.sql` 
23.  
24. # 如果資料表保存在InnoDB儲存引擎中，mysqldump提供了一種聯機備份的途徑(參見下面的命令)。該備份只需要在開始轉儲時對所有資料表進行全局讀鎖定(使用FLUSH TABLES WITH READ LOCK)。獲得鎖定後，讀取二進制日誌的相應內容並將鎖釋放。因此如果並且只有當發出FLUSH...時正執行一個長的更新語句，MySQL伺服器才停止直到長語句結束，然後轉儲則釋放鎖。因此如果MySQL伺服器只接收到短("短執行時間")的更新語句，即使有大量的語句，也不會注意到鎖期間。 
25. mysqldump --all-databases --single-transaction > `all_databases.sql` 
26.  
27.  
28.  
29. # 對於點對點恢復(也稱為「前滾」，當您需要恢復舊的備份並重放該備份以後的更改時)，循環二進制日誌(參見5.11.3節，「二進制日誌」)或至少知道轉儲對應的二進制日誌內容很有用： 
30. mysqldump --all-databases --master-data=2 > `all_databases.sql` 
31. # 或 
32. mysqldump --all-databases --flush-logs --master-data=2 > `all_databases.sql` 
33.  
34. # 如果資料表保存在InnoDB儲存引擎中，同時使用--master-data和--single-transaction提供了一個很方便的方式來進行適合點對點恢復的聯機備份。 
35.  
36.  
37.  
38. # 單純匯出資料，不匯出任何欄位結構 
39. mysqldump -u`username` --opt -c -n -t --skip-triggers `dbname` > `databases.sql` 

# mysqldump最常用於備份一個整個的資料庫：
mysqldump --opt db_name > backup-file.sql

# 您可以這樣將轉儲檔案讀回到伺服器：
mysql `db_name` < `backup-file.sql`
# 或者為：
mysql -e "source /path-to--backup/backup-file.sql" `db_name`



# mysqldump也可用於從一個MySQL伺服器向另一個伺服器複製數據時裝載資料庫：
mysqldump --opt `db_name` | mysql --host=`remote_host` -C `db_name`



# 可以用一個命令轉儲幾個資料庫：
mysqldump ---database `db_name1` [`db_name2` ...] > `my_databases.sql`



# 如果您想要轉儲所有資料庫，使用--all--database選項：
mysqldump --all-databases > `all_databases.sql`

# 如果資料表保存在InnoDB儲存引擎中，mysqldump提供了一種聯機備份的途徑(參見下面的命令)。該備份只需要在開始轉儲時對所有資料表進行全局讀鎖定(使用FLUSH TABLES WITH READ LOCK)。獲得鎖定後，讀取二進制日誌的相應內容並將鎖釋放。因此如果並且只有當發出FLUSH...時正執行一個長的更新語句，MySQL伺服器才停止直到長語句結束，然後轉儲則釋放鎖。因此如果MySQL伺服器只接收到短("短執行時間")的更新語句，即使有大量的語句，也不會注意到鎖期間。
mysqldump --all-databases --single-transaction > `all_databases.sql`



# 對於點對點恢復(也稱為「前滾」，當您需要恢復舊的備份並重放該備份以後的更改時)，循環二進制日誌(參見5.11.3節，「二進制日誌」)或至少知道轉儲對應的二進制日誌內容很有用：
mysqldump --all-databases --master-data=2 > `all_databases.sql`
# 或
mysqldump --all-databases --flush-logs --master-data=2 > `all_databases.sql`

# 如果資料表保存在InnoDB儲存引擎中，同時使用--master-data和--single-transaction提供了一個很方便的方式來進行適合點對點恢復的聯機備份。



# 單純匯出資料，不匯出任何欄位結構
mysqldump -u`username` --opt -c -n -t --skip-triggers `dbname` > `databases.sql`

[PHP] 時區設定(date.timezone)

方法一：更改 php.ini 中的 date.timezone

原始碼

1. [Date] 
2. ; Defines the default timezone used by the date functions 
3. date.timezone = Asia/Taipei 

[Date]
; Defines the default timezone used by the date functions
date.timezone = Asia/Taipei

方法二：利用 set_ini()

原始碼

1. <?php 
2. ini_set('date.timezone','Asia/Taipei'); 
3. //....... 
4. ?> 

<?php
ini_set('date.timezone','Asia/Taipei');
//.......
?>

參考來源：
php 改時區(改為台北時區)
php时区设置

MySQL 加解密函數

原始碼

1. --[單向加密] 
2. -- MD5 演算法 
3. MD5(str)  
4.  
5. -- MySQL 密碼演算法 
6. PASSWORD(str) 
7.  
8. -- Unix crypt 演算法 
9. ENCRYPT(str[,salt]) 
10.  
11. -- 安全散列演算法 
12. SHA1(str) 
13. SHA(str) 
14.  
15.  
16. --[雙向加密] 
17. -- MySQL 中的低階加解密演算法， 
18. DECODE() -- 解密 
19. ENCODE() -- 加密 
20.  
21. -- 以 Advanced Encryption Standard 演算法加解密 
22. AES_DECRYPT(crypt_str,key_str) -- 解密 
23. AES_ENCRYPT(str,key_str)) -- 加密 
24.  
25. -- 以 DES 演算法加解密，需要 SSL 的支援 
26. DES_DECRYPT(crypt_str[,key_str]) -- 解密 
27. DES_ENCRYPT(str[,{key_num|key_str}]) -- 加密  
28.  
29.  
30. --[資料壓縮] 
31. COMPRESS(string_to_compress) -- 壓縮 
32. UNCOMPRESS(string_to_uncompress) -- 解壓縮  
33. UNCOMPRESSED_LENGTH(compressed_string) -- 回傳壓縮前的字串長度  

--[單向加密]
-- MD5 演算法
MD5(str) 

-- MySQL 密碼演算法
PASSWORD(str)

-- Unix crypt 演算法
ENCRYPT(str[,salt])

-- 安全散列演算法
SHA1(str)
SHA(str)


--[雙向加密]
-- MySQL 中的低階加解密演算法，
DECODE() -- 解密
ENCODE() -- 加密

-- 以 Advanced Encryption Standard 演算法加解密
AES_DECRYPT(crypt_str,key_str) -- 解密
AES_ENCRYPT(str,key_str)) -- 加密

-- 以 DES 演算法加解密，需要 SSL 的支援
DES_DECRYPT(crypt_str[,key_str]) -- 解密
DES_ENCRYPT(str[,{key_num|key_str}]) -- 加密 


--[資料壓縮]
COMPRESS(string_to_compress) -- 壓縮
UNCOMPRESS(string_to_uncompress) -- 解壓縮 
UNCOMPRESSED_LENGTH(compressed_string) -- 回傳壓縮前的字串長度 

對於 key_str 的設定建議使用 MySQL 變數處理

原始碼

1. -- 在 MySQL 中設定金鑰變數 
2. SELECT @key:='sfdgsjhgjgsdfsg' 
3.  
4. -- 在查詢資料時可以使用金鑰變數，這樣就可以不用在程式中傳遞金鑰了 
5. -- 在程式撰寫時看起來也比較簡潔 
6. SELECT  
7.    `Id`,  
8.    AES_DECRYPT(`Name`,@key)AS`Name`,  
9.    AES_DECRYPT(`Email`,@key)AS`Email`  
10. FROM `system_uesr`  

-- 在 MySQL 中設定金鑰變數
SELECT @key:='sfdgsjhgjgsdfsg'

-- 在查詢資料時可以使用金鑰變數，這樣就可以不用在程式中傳遞金鑰了
-- 在程式撰寫時看起來也比較簡潔
SELECT 
    `Id`, 
    AES_DECRYPT(`Name`,@key)AS`Name`, 
    AES_DECRYPT(`Email`,@key)AS`Email` 
FROM `system_uesr` 

對於加密過的資料必須存放在二進位( BLOB )的欄位格式中，詳細的型態格式請察看10.5. Data Type Storage Requirements

類型	大小(單位:字節)
TinyBlob	最大 255
Blob	最大 65K
MediumBlob	最大 16M
LongBlob	最大 4G

參考來源：
MySQL 5.1 Reference Manual :: 11.11.2 Encryption and Compression Functions

Eclipse 3.3 , 3.4 and 3.5 中文化語言包

之前為中文化找好久
終於再 JavaWorld@TW 找到下載聯結

先到下載頁面 Babel Language Packs 選擇所對應的版本名稱
Eclipse 3.3 Europa R0.8.0
Eclipse 3.4 Ganymede R0.8.0
Eclipse 3.5 Galileo R0.8.0
Eclipse 3.6 Helios R0.8.0


再來就是找到繁體中文的區段

然後下載所需要的語言包

條目說明：
BabelLanguagePack-eclipse-zh_TW_3.4.0.v20090620043401.zip (97.67%)
eclipse - 主要的語言包，如果有使用 CDT 外掛可以再多下載 tools.cdt 語言包
zh_TW - 語系
3.4.0 - 支援的版本
v20090620043401 - 更新時間
97.67% - 中文化的%

將語言包解壓縮至 Eclipse 的程式目錄裡
然後重新開啟 Eclipse 就可以了

Ubuntu 時間及時區設定 [Linux]

前面要先說一個很基礎的觀念
系統時間與 BIOS 時間是不一樣的
因為系統時間會再加上一個時區設定
而 BIOS 則是以 UTC 時間為準

原始碼

1. # 取得時區設定檔，請選擇你需要的時區 
2. sudo tzselect 
3.  
4. # 更換系統時區檔 
5. sudo ln -sf /usr/share/zoneinfo/Asia/Taipei /etc/localtime 
6.  
7. # 讓核心時間與網路時間伺服器對時 
8. sudo ntpdate pool.ntp.org 
9.  
10. # 更新 BIOS 的時間 
11. sudo hwclock -w 
12.  
13. # 編輯系統排程，再裏面加入下面這行，讓系統排程每日對時一次 
14. sudo crontab -e 
15. @daily /usr/sbin/ntpdate pool.ntp.org > /dev/null 

# 取得時區設定檔，請選擇你需要的時區
sudo tzselect

# 更換系統時區檔
sudo ln -sf /usr/share/zoneinfo/Asia/Taipei /etc/localtime

# 讓核心時間與網路時間伺服器對時
sudo ntpdate pool.ntp.org

# 更新 BIOS 的時間
sudo hwclock -w

# 編輯系統排程，再裏面加入下面這行，讓系統排程每日對時一次
sudo crontab -e
@daily /usr/sbin/ntpdate pool.ntp.org > /dev/null

參考資料：
[Ubuntu]Ubuntu 更改時區
Ntpdate - Ubuntu 正體中文 Wiki