Tad 教材網 - 線上書籍

:::

\[1031\]XOOPS佈景設計
=================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1031/01.zip)

### 一、 講義直送您的電腦

1. 講義：[http://www.tad0616.net/modules/tad\_book3/index.php?tbsn=32](http://www.tad0616.net/modules/tad_book3/index.php?tbsn=32)
2. 請申請[Dropbox（雲端磁碟機）](http://db.tt/3rsYVB1y)，一旦發布講義，您的電腦會馬上收到。（有帳號的可不用再申請）
3. 您也可以直接連上[https://www.dropbox.com/ ](https://www.dropbox.com/)只要有網路，都可直接下載教材。
4. 未來講義將不再列出實體紙張，講義及相關教材會盡量於星期五送到各位電腦中，同時也會發表到Tad教材網。
 
### 二、 關於本課程

1. 本課程是系列課程中的第二個學程，也是未來幾個學程的基本功夫部份。
2. 上課歡迎卯起來走動，互相交流，有任何不懂之部份，請儘管舉手或開口發問。
3. 課程分為三大主軸：HTML5、CSS3（含影像處理及Bootstrap）、XOOPS佈景設計
 
### 三、 關於編輯器

1. 本次課程使用的預設編輯器為NotePad++（<http://notepad-plus-plus.org/>）或用[Sublime Text](http://www.sublimetext.com/)更好。這兩套都是執行快速，功能強大的免費軟體，而且都具有中文界面。當然您也可以使用自己熟悉的編輯軟體來操作。
 
### 四、 關於瀏覽器

1. 瀏覽器以[FireFox](http://moztw.org/firefox/)為主，建議安裝[web developer](https://addons.mozilla.org/zh-tw/firefox/addon/web-developer/)套件，將對本次課程有相當大之幫助。請從「工具→附加元件」來安裝。
2. Google瀏覽器亦有web developer（請裝中文版）套件，但功能較簡易。請從「工具→擴充功能」來安裝。
 
### 五、 關於伺服器

1. HTML及CSS部份，並不需要任何伺服器，只要有瀏覽器就可以執行。
2. XOOPS架設則需放到網頁伺服器中，同時也需要資料庫伺服器來儲存資料。期中會開帳號給學員，若想在家或離線練習，可安裝[XAMPP](http://www.apachefriends.org/zh_tw/index.html)或[UniForm Server](http://www.uniformserver.com/)來練習。
 
### 六、 關於XOOPS佈景

1. 要設計一個佈景，至少要懂HTML+CSS，有時還需要懂一些jquery，要設計一個可以再各種裝置都可以看的佈景，還需要懂得自適應設計（Responsive Web Design），要設計一個XOOPS佈景，您還得要懂smarty佈景引擎語法。
2. 正常的XOOPS佈景開發大致流程為：先做一個普通的HTML網頁，然後，套上XOOPS專屬的smarty佈景標籤，這樣就成了XOOPS佈景。
3. 可控制的XOOPS佈景則是可以讓使用者透過Tad Themes模組來針對佈景做設定，TadTools已經有內建一些共同樣板，所以，可以選用降低開發難度。
4. 佈景開發重點在於了解XOOPS的樣板結構及原理，因為XOOPS的樣板分成三大部份：主樣板、區塊樣板、模組樣板...等，尤其XOOPS2.5之後又加入了不少新功能，所以，這部份盡可能的去了解它的結構以及作用範圍，如此，日後才能隨心所欲的想改哪裡就改哪裡。
 
### 七、 HTML5基本概念

1. HTML5將於2014年發布正式版
2. 廣義論及HTML5時，實際指的是HTML、CSS和JavaScript在內的技術組合
3. 各瀏覽器HTML5支援：<http://www.findmebyip.com/litmus/> 或 <http://html5test.com>
4. 非程式，只是一種寬鬆的標籤語法，寫錯也不會怎樣，為網頁的最基礎。
5. 開發佈景、寫程式，都會用到HTML，因此，不建議依賴所見即所得軟體。
6. HTML的檔案為純文字檔，副檔名為.html，瀏覽器即可讀取HTML檔。
7. HTML標籤通常是一對的，如：<p>內容</p>或<div>文字</div>
8. HTML標籤也有單一的，如：<img src=”a.jpg”>
9. 標籤裡有屬性，例如：<a href=”a.html”>連結</a>，其中href即為屬性。
10. HTML標籤及屬性是不分大小寫的：<IMG>和<img>一樣，但建議採用小寫。
11. HTML是一種非常寬鬆的語法，寫錯也不會導致瀏覽器掛掉。
12. 英文手冊：[http://www.w3schools.com/html/html5\_intro.asp](http://www.w3schools.com/html/html5_intro.asp)
13. 中文手冊：<http://www.w3school.com.cn/tags/index.asp>
 
### 八、 HTML5和HTML4的差異

1. 簡潔的DOCTYPE：HTML5 只有一個簡單的文檔類型：<!DOCTYPE html>
2. 簡單易記的語言標籤：<html lang="en">
3. 簡單易記的編碼類型：<meta charset="utf-8">
4. 不需要閉合標籤：HTML5 中，空標籤（如：br、img 和input ）並不需要閉合標籤。
5. 廢棄的標籤：<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>和<xmp>。
6. 更加語義化的新增標籤：<article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>和<figcaption>。
7. 表單增強：HTML5 為表單提供了幾個新的屬性、input 類型和標籤。但並非所有瀏覽器都支援，只有Opera對HTML5 有比較好的支持。 
  - (1) 新的INPUT類型：color, email, date, month, week, time, datetime, datetime-local,number,range,search, tel, 和url
  - (2) 新屬性：required, autofocus, pattern, list, autocomplete 和placeholder
  - (3) 新元素：<keygen>, <datalist>, <output>, <meter> 和<progress>
8. 視頻和音頻： 
  - (1) 音頻: ogg (ogg, oga), mp3, wav, AAC
  - (2) 視頻: ogg (ogv), H.264 (mp4), VP8 (webM)
9. 製圖功能：<canvas>
10. 本地端儲存：有點類似cookie，但容量比cookie大，可供JavaScript存取資料
11. 另外還有Web Workers (背景執行)、離線網路應用程式、地理定位、佔位文字 (placeholder)、表單自動對焦 (autofocus)、微資料 (Microdata)...等新功能。
 
### 九、 設計佈景的正確觀念

1. 版型不應該用Table來建立，而是應該用<div>或<span>這類本身不具意義的標籤來規劃版型。用表格會缺乏彈性，而且也不是新一代網站的正確作法，表格就應該拿來當作表格用。
2. HTML用來作為網頁結構的規劃，而非外觀的設計。外觀一律建議使用CSS來控制。
 
### 十、 HTML基本頁面結構標籤

1. <html lang="zh-tw"></html>一整個HTML頁面
2. <head></head>通常裡面會有meta標籤，及<title></title>來設定頁面名稱
3. <body></body>主要內容區。其屬性有alink（點擊連結顏色）、background（背景圖）、bgcolor（背景色）、link（連結顏色）、text（內文顏色）、vlink（已連結顏色），但這些屬性是被棄用的（建議用CSS取代）。
 
### 十一、 HTML基本標籤

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

1. 表格屬性：對齊 align（left,center,right）、背景色 bgcolor、邊框border、內邊距cellpadding、欄間距cellspacing、表格摘要summary、寬度width
2. 橫列標籤：<tr></tr>，屬性：對齊 align（left, center, right, justify）、背景色 bgcolor、垂直對齊valign（top, middle, bottom, baseline）ㄙ
3. 儲存格標題<th></th>、儲存格內容<td></td>，屬性：水平合併colspan、垂直合併rowspan、對齊align（left, right, center, justify）、背景色 bgcolor、高度 height、不斷行 nowrap、垂直對齊valign（top, middle, bottom,baseline）、寬度 width
4. 表格標題<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
 
### 十四、 項目符號或清單列表：

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>
 
### 十五、 連結標籤<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」取代之。
 
### 十六、 HTML表單

1. 文字框：<input type="text" name="名稱" value="預設值" size="大小">
2. 隱藏框：<input type="hidden" name="名稱" value="預設值">
3. 密碼框：<input type="password" name="名稱" size="大小">
4. 上傳框：<input type="file" name="名稱" size="大小">
5. 送出鈕：<input type="submit" value="按鈕文字">
6. 單選框：<input type="radio" name="名稱" value="值 1">選項文字 1 
  - (1) 單選框通常會有好幾個選項，一組選項就要一組<input>，name 都要一樣才行！
  - (2) 若要預設選取，要加上 checked="checked"
  - (3) 可以用<label for="id">選項</label>，以便點選文字就可以勾選該項目。
7. 複選框：<input type="checkbox" name="名稱\[\]" value="值 1">選項文字 1 
  - (1) 複選框通常同時會有好幾個選項，一組選項就要一組<input>
  - (2) name 都要一樣才行！而且因為是複選，所以 name 要加上\[\]，如此會送出陣列。
  - (3) 若要預設選取，要加上 checked="checked"
8. 下拉選單：<select name="名稱" size=1>選項</select> 
  - (1) 選項：<option value="值">選項文字</option> 
      - a. 一組選項，就是一組<option>
      - b. 若要預設選取：要在<option>中加入 selected="selected"
  - (2) 若希望下拉選單可以複選，除了 name 要加上\[\]外，還要加上 multiple 屬性。
9. 大量文字框：<textarea name="名稱" cols="欄寬" rows="列高">預設值</textarea>
 
### 十七、 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%">
 
### 十九、 簡易判斷使用者的瀏覽器是否支援HTML5或CSS3

1. 利用 http://modernizr.com/ 可以用來判斷瀏覽器是否支援HTML5。
 
 ```
<pre class="brush:xml;">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="modernizr.js"></script>
<script type="text/javascript">
  $(function () {
    if (Modernizr.audio)
      $("#result").text("你的瀏覽器支援 Audio");
    else
      $("#result").text("你的瀏覽器不支援 Audio");           
  });
</script>
```

###   
 二十、 讓IE支援HTML5的作法（加在<head></head>中）

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

```

:::