Tad 教材網 - 線上書籍

:::

XOOPS 新版佈景設計
============

### 一、 HTML5基本概念

1. 廣義論及HTML5時，實際指的是HTML、CSS 和 JavaScript 在內的技術組合
2. 先在硬碟建立一個資料夾，因為一個XOOPS佈景就是一個資料夾。
3. 新增一個名為 theme.html 的檔案，因為XOOPS的主要佈景名稱就是 theme.html。
4. HTML的檔案為純文字檔，副檔名為.html，瀏覽器即可讀取HTML檔。
5. 請用文字編輯器開啟 theme.html，並輸入或貼上以下內容： ```
  <pre class="brush:xml;">
  
  <html lang="zh-tw">
    <head>
      <meta charset="utf-8">
      <title>網頁標題</title>
    </head>
    <body>
      網頁內容
    </body>
  </html>
  ```
6. 開發佈景、寫程式，都會用到HTML，因此，不建議依賴所見即所得軟體。
7. 非程式，只是一種寬鬆的標籤語法，寫錯也不會怎樣，為網頁的最基礎。 
  1. 簡潔的DOCTYPE：HTML5 只有一個簡單的文檔類型：<!DOCTYPE html>
  2. 簡單易記的語言標籤：<html lang="zh-tw">，<html lang="zh-tw"></html>代表一整個HTML頁面
  3. <head></head>通常裡面會有meta標籤，及<title></title>來設定頁面名稱
  4. 簡單易記的編碼類型：<meta charset="utf-8">
  5. <body></body> 主要內容區。其屬性有alink（點擊連結顏色）、background（背景圖）、bgcolor（背景色）、link（連結顏色）、text（內文顏 色）、vlink（已連結顏色），但這些屬性是被棄用的（建議用CSS取代）。 ```
      <pre class="brush:xml;">
      
      <body bgcolor="#B2ADA4">
      
      <body background="images/templatemo_main_bg.jpg">
      
      <body bgcolor="#B2ADA4" background="images/templatemo_main_bg.jpg">
      ```
  6. HTML標籤通常是一對的，如：<p>內容</p>或<div>文字</div>
  7. HTML 標籤也有單一的，如：<img src=”a.jpg”>或<br>，HTML4通常針對這種單一的標籤會寫成<img src=”a.jpg” /> 或 <br />，但HTML5 不需要閉合標籤，也就是說，直接寫成 <br> 即可。
  8. HTML標籤及屬性是不分大小寫的：<IMG>和<img>一樣，但建議採用小寫。
  9. 標籤裡有屬性，例如：<a href=”a.html”>連結</a>，其中href即為屬性。
8. 各瀏覽器HTML5支援：<http://www.findmebyip.com/litmus/> 或 <http://html5test.com>
9. 英文手冊：[http://www.w3schools.com/html/html5\_intro.asp](http://www.w3schools.com/html/html5_intro.asp)
10. 中文手冊：<http://www.w3school.com.cn/tags/index.asp>
11. 台南場的研習的頁面內容可以從這裡擷取： [http://163.26.2.28/sch\_data/default.aspx](http://163.26.2.28/sch_data/default.aspx)
 
### 二、 HTML基本標籤

1. 標題：<h1></h1>（1~6）除了作為標題外，一般也拿來當作網站的架構或大綱。
2. 段落：<p></p>，align 屬性值有left、right、center、justify
3. 換行：<br>，註釋標籤：，水平線：<hr>。
4. 區塊容器：<div></div>；行內容器：<span></span>
5. 輸出標籤：<pre></pre>
 
### 三、 HTML的表格<table></table>

1. 早期表格常常會被拿來做排版用，在那個CSS不普及的年代，這是很常見的用法，但現今，其實並不建議。 ```
  <pre class="brush:xml;">
  <table bgcolor="#FFFFFF" width="960" align="center">
    <tr>
      <td>
        <h1>龍崎國小</h1>
      </td>
    </tr>
  </table>
  ```
2. <table>表格屬性 
  - 對齊 align（left,center,right）、背景色 bgcolor、邊框border、內邊距cellpadding、欄間距cellspacing、表格摘要summary、寬度width
3. 橫列標籤（必要）：<tr></tr> 
  - 屬性：對齊 align（left, center, right, justify）、背景色 bgcolor、垂直對齊valign（top, middle, bottom, baseline）
4. 真正放內容的地方：儲存格標題<th></th>、儲存格內容<td></td> 
  - 屬性：水平合併colspan、垂直合併 rowspan、對齊align（left, right, center, justify）、背景色 bgcolor、高度 height、不斷行 nowrap、垂直對齊valign（top, middle, bottom,baseline）、寬度 width
5. 表格標題<caption></caption> 
  - 屬性：對齊 align（left, right, top, bottom）
 
### 四、圖片<img src="圖片" alt="說明">

1. 屬性：對齊 align（top, bottom, middle, left, right）、邊框 border、高度height、高度height、水平間距 hspace、垂直間距 vspace、寬度width
2. 網頁圖片支援三種規格jpg（全彩、壓縮、相片）、png（全彩、透明）、gif（256色、透明背景、動畫）
3. 相對路徑（相對於自身html檔）較常用，絕對路徑通常為：http://網址/圖檔.jpg
4. 臨時沒繪圖軟體，可以試試 <http://pixlr.com/editor/?loc=zh-tw>
5. 或者直接用以下logo產生器網站： 
  1. 書法字體產生器（可用來製作 logo）：<http://www.eainc.jp/dekamoji/>
  2. 進擊的巨人標題產生器：<http://sngk.net>
  3. 友少標題產生器：<http://hgn.ai/>
  4. logo產生器：<http://www.logomaker.com/>
  5. 支援中文的標題產生器：<http://cooltext.com/>
  6. 支援中文的標題產生器：<http://textanim.com/>
 
### 五、連結標籤<a href="連結位置">顯示文字</a>

1. 連結位置可以是網頁、圖片、網站、文件、檔案、FTP站、Email...等。
2. 屬性：連結位置href、錨點名稱name、框架位置target（\_blank開新視窗, \_parent上個框架, \_self原視窗, \_top跳出框架）。
3. 錨點名稱用法 
  - (1) 先命名：<a name="top">某元素</a>
  - (2) 連結寫法：<a href="#top">回頂端</a>或<a href="index.html#top">回頂端</a>
4. Email連結：<a href="mailto:主信箱?cc=副本&bcc=密件副本&subject=主題&body=內容">連結呈現文字</a>，若非得加入空白不可，請用「%20」取代之。
 
### 六、 項目符號或清單列表：

1. 有序列表：<ol><li>項目1</li><li>項目2</li></ol>，屬性：起始編號start 、編號類型type（1, A, a, I, i ）
2. 無序列表：<ul><li>項目1</li><li>項目2</li></ul>，屬性：項目類型type（disc, square, circle ）
3. 定義列表：<dl><dt>項目名稱</dt><dd>項目說明</dd></dl>
 
### 七、 HTML的顏色碼

1. HTML顏色是用十六進位（00~FF）的紅、綠、藍（RGB）之組合而成的。 例如：#FF0000為紅色，#808080為灰色，#000000為黑色，#FFFFFF為白色
2. 也可以直接寫顏色名，例如：red、gray、black、white等
 
### 八、 HTML長度單位

1. 長度不用寫單位，一般預設就是px（像素）。例如 <table width="640">
2. 也可以用百分比表示，例如：<table width="100%">
 
### 九、 讓IE支援HTML5的作法（加在<head></head>中）

```
<pre class="brush:xml;">

```

</body></html>

:::