雲橙雨林: 7月 2012

2012年7月31日星期二

Html 基本說明（18） - 讓表格加入細邊框

依照Html 基本說明（17），我們再來讓表格漂亮一點，橙子再將程式列表一次

<!doctype html>
<html>
<head>
<metacharset="utf-8">
<title>魚和橙的結合</title>

</head>

<body>
<table border="1">
  <caption>
  各國獎牌數
  </caption>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Gold</th>
      <th>Sliver</th>
      <th>Copper</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>chinese taipei</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>american</td>
      <td>30</td>
      <td>15</td>
      <td>20</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>sum</td>
      <td>32</td>
      <td>17</td>
      <td>22</td>
    </tr>
  </tfoot>
</table>
</body>
</html>

和前個例字不同的，當我們將<table> 改成 <table border="1">，也就是將表格將入邊框，再來看結果如何：

結果可發現邊框已出現，但~~很醜，其實當你這樣這定邊框時，程式是內外各畫1px的邊框，就造成了這樣的結果了

當我們想要word那表格的形式，就必須加入css，當你加入後，就可以變細邊框了！

<style type="text/css">
table {
    border-collapse: collapse;
}
</style>

其實很容易的，只要將table 標籤中，加入border-collapse:collapse;就會將邊框合併，合成一個邊框，就會得到以下的結果了！

容易吧！你也可試試看喔！

2012年7月30日星期一

Html 基本說明（17） - 加入表格

網頁就像文書，須要許多的表格來清楚表示文章的意思，利用表格來描素數據是再好不過的事了！

以下就來說明表格的寫法，我們先來寫個3x4的表格吧！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>

<body>
<table>
  <caption>
  各國獎牌數
  </caption>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Gold</th>
      <th>Sliver</th>
      <th>Copper</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>chinese taipei</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>american</td>
      <td>30</td>
      <td>15</td>
      <td>20</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>sum</td>
      <td>32</td>
      <td>17</td>
      <td>22</td>
    </tr>
  </tfoot>
</table>
</body>
</html>

table:表格，所有表格最外層的標籤，所有表格標籤全寫在裡面。

caption:表格標題，說明表格內容。

thead:表格表頭，放表格表頭的地方

tbody:表格內容主題，表示除表格標題，內容說明主題

tfoot:表格底層，表示內容結束，結尾地方，通常如果用在數據統計上，就是合計的地方

th:表格標題儲存格，放標題的地方

tr:表格列

td:表格欄

輸出結果如下：

看起來不像是個表格，再來就來利用css 來修飾一下吧！

加入css

<style type="text/css">
table {
    width: 500px;
    border: 1px solid #CCC;    
}
caption {
    color: red;
    font-size: 24px;
}

thead {
    background-color: #FF0;
}
tbody {
    background-color: #9F3;
}
th {
    font-weight: bold;
}

tfoot {
    background-color: #3CF;
}
</style>

先來看結果，再說明

我先設table 寬度為500 px，設置灰色#ccc的外框

再設caption 字體顏色為紅色，字體大小為24px;

設thead區塊背景為黃色

設thbody區塊背景為綠色

設tfoot區塊背景為藍色

設th 標題為粗體

結果就完上述圖面的結果了，在裡面並未設到td 和tr 的部份，其實如果你要對其中td改變，也可以再新增td 就可以改變了

之後，下一篇再來說明邊框的問題！

2012年7月27日星期五

Html 基本說明（16）- 如何改變列表清單圖案或數字

我們再來說明如何改變列表的圖案，一樣用上個程式式來說明

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>

<body>
<h1>How to use LIST 2 -魚和橙的結合</h1>
<h2>Use (ul)</h2>
<ul>
  <li>Round Round Round</li>
  <li>Square Square Square</li>
  <li>Triangle Triangle Triangle</li>
  <li>Diamond Diamond Diamond</li>
</ul>
<h2>Use (ol)</h2>
<ol>
  <li>one one one</li>
  <li>two two two</li>
  <li>three three three</li>
  <li>four four four</li>
</ol>
</body>
</html>

結果如下：

我們再來加入CSS來修改,將UL的部份改成圓空心，OL的部份改成英文字

<style type="text/css">
ul {
    list-style-type: circle;
}

ol {
    list-style-type: upper-alpha;
}
</style>

輸出結果：

改完執行，就可發現列表頭改變，以後如果想改，僅須改CSS 即可！

如果想把ol的數字，照你想要的數字當起始的數字，要如何用呢？假設我想從10開始，那程式碼要改成如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>
<body>
<h1>How to use LIST 3-魚和橙的結合</h1>
<h2>Use (ol)</h2>
<ol start="10">
  <li>one one one</li>
  <li>two two two</li>
  <li>three three three</li>
  <li>four four four</li>
</ol>
</body>
</html>

照上序程式在<ol>加入 start="10"，就可以改變成10開始的數值了！

輸出結果：

那如果想定義個別的號碼，那又可以改值，加入value即可：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>
<body>
<h1>How to use LIST 4-魚和橙的結合</h1>
<h2>Use (ol)</h2>
<ol start="10">
  <li value="23">one one one</li>
  <li value="14">two two two</li>
  <li value="31">three three three</li>
  <li value="11">four four four</li>
</ol>
</body>
</html>

輸出結果：

照程式改，就可以照你的方式設定數值了！

結論：

列表常用於文章列表，不過橙子卻在常用於選單的方式來用，不過寫的方式，到時還會寫到！

2012年7月26日星期四

Html 基本說明（15）- Html 5 新的佈局標籤

這些為HTML 5新的佈局標籤，主要用於佈局用，而不僅僅只是用DIV 的 ID 來表示，在之前的文章中，就有所介紹，在我認為也可將以下標籤都認為是有標準名字的容器，在這僅將之列表出來：

l <article>—標籤定義獨立的內容：

主要用於文章、論壇文章、用戶評論用。

l <aside>—主要顯示網頁內容的相關資訊：

通常用於側邊欄來顯示新聞、資訊…等等資料。

l <figcaption>—圖形的標題

用於圖形上方或下方標題，可緊靠圖形。

l <figure>—標籤規定獨立的流內容（圖像、圖表、照片、代碼等等）。

l <footer>—標籤定義 section 或 document 的頁腳

通常用於網頁的最底層，一般用於版權宣告、網頁頁腳等用處。

l <header>—標籤定義文檔的頁眉（介紹信息）。

網頁的抬頭部份，通常用廣告、選單、商標LOGO區

l <hgroup>—標籤用於對網頁或區段（section）的標題進行組合。.

l <nav>—簽定義導航連結的部分。

常用於選單用

l <section>—標籤定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。

資料來源網站：http://www.w3school.com.cn/h.asp

以上，其實以HTML4 的寫法，都是用ID 的方式編名，而在HTML5 規範了此項規則，亦是讓網路機器人更能在你的網頁中，分類你的網頁內容及辨識你的網頁的資料，提高搜尋結果！

Html 基本說明（14）-善用你網頁的中的h1標籤

在網頁設計中，我們都會用到<h1>~<h6>的標籤，這個標籤皆是應用於標題的位置，而<h1>標籤代表了整的網頁中，最為重要的標題！

所以，在網頁設置中，h1的設定就特別的重要了。

先寫一段程式：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>

<body>
    <article class="topArticle">
        <h1>為什要做設計網頁工程師</h1>
        <p>因為他是一件很累的工作，一天到晚都坐在電腦前面，bara bara...</p>
        <h2>網頁設計的好處</h2>
        <ul>
            <li>1.好處</li>
            <li>2.好處</li>
        </ul>
    </article>
</body>
</html>

其實<h1>和<h2>差別在於，當電腦搜尋機器人在查尋時，機器會認為"為什要做設計網頁工程師"是本網頁的重要主題，而"網頁設計的好處"為次要主題，此時機器人可能只有提取第一個當為關鍵字的主要依據，此時對於搜尋內容就有很大的關係了！

許多人在這樣的基礎之下，就想說放入更多的<h1>來增加搜尋量，但是反而遭到搜尋器的排斥，因為這些搜尋公司早就知道這樣的技兩，所以，搜尋機器人只接受單一網頁，只有單一個h1，如果搜尋機器人發現單一網頁有多個 h1，機器人可能會將你的網頁排斥在搜尋列之外，反而適得其反。

所以，在設計網頁時，勿忘了<h1>的標籤，建議通常用來當作網頁的主題，是很棒的方式，也讓整體的網頁更加完善。

2012年7月24日星期二

Html 基本說明（13） - 如何使用列表清單，讓文章更有條理

文章中，總是要列出一些要點、清單，讓文章使人更能表達作者要表達的大綱，所以橙子要來說明有3個列表清單方式供大家使用！

列表清單包含有3種：

1.無序清單-ul:意思為沒有序號別，前面是圓形（預設）、方形、菱形...等，各種形狀做分別

2.有序編號清單-ol:以序列碼分別之。

3.定義清單-dl：前無序號或圖形，是以自動縮排分別排列。

子項目標籤有

1.清單項目-li

2.定義項目-dt

3.定義說明-dd

來寫個程式說明吧！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>魚和橙的結合</title>
</head>

<body>
<h1>How to use list -魚和橙的結合</h1>
<h2>Use (ul)</h2>
<ul>
  <li>Round Round Round</li>
  <li>Square Square Square</li>
  <li>Triangle Triangle Triangle</li>
  <li>Diamond Diamond Diamond</li>
</ul>
<h2>Use (ol)</h2>
<ol>
  <li>one one one</li>
  <li>two two two</li>
  <li>three three three</li>
  <li>four four four</li>
</ol>
<h2>Use (dl)</h2>
<dl>
  <dt>Round Round Round</dt>
  <dd>one one one</dd>
  <dt>Square Square Square</dt>
  <dd>two two two</dd>
  <dt>Triangle Triangle Triangle</dt>
  <dd>three three three</dd>
  <dt>Diamond Diamond Diamond</dt>
  <dd>four four four</dd>
</dl>
</body>
</html>

執行結果：

各位可以照著程式的寫法，就可以得以上的結果，就可以了解使用的方法，還有ul的圓形要如何改呢？其實就要利用css來更動就可以！

由下次來說明如何改動吧！另外再說明如何改變ol 的號碼順序。

結果，可以利用以上的方式，就可以讓你的文字、文章更有分類更清楚了！

訂閱：文章 (Atom)

2012年7月31日 星期二

2012年7月30日 星期一

2012年7月27日 星期五

2012年7月26日 星期四

2012年7月24日 星期二

2012年7月31日星期二

2012年7月30日星期一

2012年7月27日星期五

2012年7月26日星期四

2012年7月24日星期二