Tad 教材網 - 線上書籍

:::

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

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

### 一、 關於本課程

1. 本學期講義位置：<http://www.tad0616.net/42>
2. PDF檔會發布於<https://www.facebook.com/groups/1060860310684951/>
3. 本課程是系列中的第二個學程，屬基礎部份，若有任何聽不懂的：歡迎您隨時隨地的問！
4. 上課歡迎隨時起來走動，互相觀摩交流，盡量別保持安靜，飲食部份則請至走廊食用。
5. 上課時間為週六9:00～12:00及13:30～16:30，共計九次，遇國定連假則往後延期。
6. 上課歡迎拍照、錄音、錄影，能和同學分享更好。
7. 座位基本上沒有強制性，但也不建議每次都換來換去，盡量在三週後就固定住。
8. 本期助教：溫孝文（ikpassat@gmail.com）、李佳玲（tnjaile@gmail.com）
 
### 二、 這學期會學到...

1. HTML5：也就是網頁的最基礎標籤，用來建構網頁外觀架構、表單...等。
2. CSS3：用來美化系統外觀
3. BootStrap3：快速導入自適應框架，讓您的網站在手機跑看起來也一樣美觀。
4. Smarty：PHP官方樣板引擎，開發XOOPS必備。
5. XOOPS樣板機制：熟悉XOOPS佈景開發流程及其相關原理。
 
### 三、 開發工具

1. 瀏覽器部份，上課主要以[Firefox](http://120.115.2.90/modules/tad_uploader/index.php?op=dlfile&cfsn=139&cat_sn=22&name=firefoxportable_52.0_tradchinese.paf.exe)為主，用Chrome亦可，IE建議使用11版以後版本。
2. Firefox建議安裝幾個套件。請從「工具→附加元件」來安裝。 
  - 「web developer」前端開發工具
  - 「colorZilla」顏色選擇器
  - 「uBlock Origin」擋廣告
  - 「Video DownloadHelper」下載影片
  - 「Auto Reload」檔案同步
3. 首推sublime text（[按此下載32位元版](http://120.115.2.90/modules/tad_uploader/index.php?op=dlfile&cfsn=140&cat_sn=18&name=sublime%20text%20build%203126.zip)），其次為Atom或Visual Studio Code、NotePad++，等。
4. 安裝sublime可攜版：<https://www.sublimetext.com/3>
5. 安裝package control：<https://packagecontrol.io/installation>，按「ctrl+`」貼上頁面提供的「Sublime Text 3」語法即可。
6. Preferences→Package Control→Install Package，選擇要安裝的套件即可。 
  - (1) 「ChineseLocalizations」中文化套件
  - (2) 「SideBarEnhancements」強化側邊欄
  - (3) 「Emmet」快速語法生成器
  - (4) 「BracketHighlighter」高亮度括號
  - (5) 「HTML5」自動生成HTML5標籤
  - (6) 「ConvertToUTF8」檔案編碼轉換
  - (7) 「Color Highlighter」將色碼轉為實際顏色
  - (8) 「AutoFileName」自動完成檔名
  - (9) 「Bootstrap 3 Autocomplete」自動生成Bootstrap 3 語法
  - (10)「HTML-CSS-JS Prettify」美化HTML及CSS語法
  - (11)「All Autocomplete」自動完成
  - (12)「LiveReload」自動同步瀏覽器
7. 安裝node.js <https://nodejs.org/en/>
8. 常用快捷鍵 
  1. 開新檔： <kbd>Ctrl </kbd>+ <kbd>N </kbd>
  2. 複製： <kbd>Ctrl </kbd>+ <kbd>C </kbd>
  3. 貼上： <kbd>Ctrl </kbd>+ <kbd>V </kbd>
  4. 全選： <kbd>Ctrl </kbd>+ <kbd>A </kbd>
  5. 儲存： <kbd>Ctrl </kbd>+ <kbd>S </kbd>
  6. 搜尋： <kbd>Ctrl </kbd>+ <kbd>F </kbd>
  7. 取代： <kbd>Ctrl </kbd>+ <kbd>H </kbd>
  8. 向右縮排： <kbd>Tab </kbd>
  9. 向左縮排： <kbd>Shift </kbd>+ <kbd>Tab </kbd>
  10. 排版： <kbd>Ctrl </kbd>+ <kbd>Shift </kbd>+ <kbd>H </kbd>
  11. 垂直選取： <kbd>Shift </kbd>+滑鼠右鍵
  12. 多行選取： <kbd>Ctrl </kbd>+滑鼠左鍵
9. sublime 使用者設定 ```
  <pre class="brush:jscript;gutter:false;">
  {
  "font_size": 15,
  "translate_tabs_to_spaces": true,
  "ignored_packages":
  [
  "Vintage"
  ],
  "tab_size": 2,
  }
  ```
 
### 四、 開發環境

1. HTML、CSS及BootStrap3部份，並不需要任何伺服器，只要有瀏覽器就可以執行。
2. 實際開發XOOPS佈景時就需有網頁伺服器（如：Apache）和資料庫（如：MySQL或MariaDB），因為XOOPS必須安裝在網頁伺服器中，資料則存在資料庫中。
3. 在家中沒有伺服器或者沒有網路的環境，可裝Uniform Server （<http://www.uniformserver.com>）或XAMPP （<https://www.apachefriends.org>），請勿用AppSer這個殘缺的東西！
4. 申請學生練習主機空間（<http://202.39.64.155>） 
  - (1) 學生練習主機為Linux主機，僅社大學員可以申請（FTP及MySQL帳號）。
  - (2) 使用期限為本學期，學期結束後，可能隨時會清除舊資料，故請自行備份。
  - (3) 申請後，您的網站網址為：「http://202.39.64.155/~帳號」
  - (4) 資料庫和FTP帳號、密碼是一樣的！
 
### 五、 關於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時，實際指的是HTML、CSS和JavaScript在內的技術組合
2. HTML非程式，只是一種寬鬆的標籤語法，寫錯也不會怎樣，為網頁的最基礎。
3. 開發佈景、寫程式，都會用到HTML，因此，不建議依賴所見即所得軟體。
4. HTML的檔案內容為純文字，副檔名為.html，瀏覽器即可讀取HTML檔。
5. HTML標籤通常是一對的，如：<p>內容</p>或<div>文字</div>
6. HTML標籤也有單一的，如：<img src=”a.jpg”>
7. 標籤會有多個屬性，如：<a href=”a.html”>連結</a>，其中href即為屬性。
8. HTML標籤及屬性是不分大小寫的：<IMG>和<img>一樣，但建議採用小寫。
9. HTML5手冊：<http://www.runoob.com/html/html5-intro.html>
 
### 七、 HTML5和HTML4的差異

1. 簡潔的DOCTYPE：HTML5 只有一個簡單的文檔類型：<!DOCTYPE html>
2. 簡單易記的語言標籤：<html lang="en">或<html lang="zh-Hant-TW">
3. 簡單易記的編碼類型：<meta charset="utf-8">
4. 不需要閉合標籤：HTML5 中，空標籤（如：br、img 和input ）並不需要閉合標籤。
5. 廢棄部份舊標籤：center、font、frame、 frameset、noframes、s、u...等。
6. 新增更加語義化的標籤：article、section、aside、hgroup、header、footer、 nav、time、mark、figure、figcaption...等。
7. 表單增強：HTML5 為表單提供了幾個新的屬性、input 類型和標籤。但並非所有瀏覽器都支援，各瀏覽器HTML5支援查詢：<http://caniuse.com>
  - (1) 新的input表單類型：color、email、date、month、week、time、 datetime、datetime-local、number、range、search、tel、url
  - (2) 新屬性：required、autofocus、pattern、list、autocomplete、placeholder
  - (3) 新元素：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存取資料。
 
### 八、 設計佈景的正確觀念

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

1. <html></html>一整個HTML頁面
2. <head></head>通常裡面會有meta標籤，及<title></title>來設定頁面名稱
3. <body></body>主要內容區。
 
### 十、 HTML常用基本標籤

1. 完整標籤列表：<http://www.runoob.com/tags/html-reference.html>
2. 可至<http://codepen.io/pen/>做線上練習
3. 常用基本標籤： <table class="table table-condensed table-hover table-responsive table-striped table-bordered table-striped" width="100%"> <colgroup> <col width="22*"></col> <col width="32*"></col> <col width="28*"></col> <col width="49*"></col> <col width="28*"></col> <col width="98*"></col> </colgroup> <tbody> <tr valign="TOP"> <td>標題</td> <td colspan="5"><h1></h1>（1~6）除了作為標題外，一般也拿來當作網站的架構或大綱。</td> </tr> <tr valign="TOP"> <td>段落</td> <td><p></p></td> <td>區塊容器</td> <td><div></div></td> <td>行內容器</td> <td><span></span></td> </tr> <tr valign="TOP"> <td>換行</td> <td><br></td> <td>輸出標籤</td> <td><pre></pre></td> <td>引用</td> <td><blockquote></blockquote></td> </tr> <tr valign="TOP"> <td>水平線</td> <td><hr></td> <td>註釋標籤</td> <td></td> <td> </td> <td> </td> </tr> </tbody> </table>
 
### 十一、 項目符號或清單列表

<table border="1" bordercolor="#000000" cellpadding="4" cellspacing="0" class="table table-condensed table-hover table-responsive table-striped table-bordered table-striped" width="100%"> <colgroup> <col width="85*"></col> <col width="85*"></col> <col width="85*"></col> </colgroup> <tbody> <tr valign="TOP"> <td>有序列表

</td> <td>無序列表

</td> <td>定義列表

</td> </tr> <tr valign="TOP"> <td><ol>

</ol>

</td> <td><ul>

</ul>

</td> <td><dl>

</dl>

</td> </tr> </tbody> </table>

1. 其中有序列表有以下屬性：reversed（倒排）、start（起始編號）、type（編號類型：1、A、a、I、i ）
2. 常被拿來做選單、列表、縮略圖...等用途。
 
### 十二、 表格標籤<table>

</table>

</td> <td>1. <table>屬性：border（框寬度）
2. <th>及<td>屬性：colspan（水平合併）、rowspan（垂直合併）、headers（定義表頭關聯）
3. <th>還支援scope（定義表頭）屬性
 
 </td> </tr> </tbody> </table>

1. 更複雜的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、 <tfoot> 以及 <tbody> 標籤。
 
### 十三、 圖片<img src="圖片" alt="說明">

1. 屬性：src（圖片位置）、alt（取代文字）、width（寬）、height（高）、ismap（地圖對應，需有連結）、usemap（使用圖片地圖，需對應map）
2. 網頁圖片支援三種規格jpg（全彩、壓縮、相片）、png（全彩、透明）、gif（256色、透明背景、動畫）
3. 相對路徑（相對於自身html檔）較常用，絕對路徑通常為：http://網址/圖檔.jpg
 
### 十四、 連結標籤<a href="連結位置">顯示文字</a>

1. 連結位置可以是網頁、圖片、網站、文件、檔案、FTP站、Email...等。
2. 屬性：連結位置href、錨點名稱name、框架位置target（\_blank開新視窗、\_parent上個框架、\_self原視窗、\_top跳出框架）。
3. 錨點名稱用法
4. (1) 先命名：<a name="top">某元素</a>
5. (2) 連結寫法：<a href="#top">回頂端</a>或<a href="index.html#top">回頂端</a>
6. 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標籤

1. <[header](http://www.runoob.com/tags/tag-header.html)></header>：頁首
2. <[hgroup](http://www.runoob.com/tags/tag-hgroup.html)></hgroup>：標題群組
3. <[nav](http://www.runoob.com/tags/tag-nav.html)></nav>：導覽列
4. <[article](http://www.runoob.com/tags/tag-article.html)></article>：文件
5. <[section](http://www.runoob.com/tags/tag-section.html)></section>：小節
6. <[mark](http://www.runoob.com/tags/tag-mark.html)></mark>：畫記
7. <[aside](http://www.runoob.com/tags/tag-aside.html)></aside>：側邊內容
8. <[figure](http://www.runoob.com/tags/tag-figure.html)></figure>：圖表內容
9. <[figcaption](http://www.runoob.com/tags/tag-figcaption.html)></figcaption>：圖說
10. <[menu](http://www.runoob.com/tags/tag-menu.html) type="context" id="mymenu"></menu>：定義一組選單
11. <menuitem label="編輯"></menuitem>：選單項目
12. <[footer](http://www.runoob.com/tags/tag-footer.html)></footer>：頁尾
13. <[video ](http://www.runoob.com/tags/tag-video.html)src="影片.mp4"></video>：影片播放
 
### 十九、 常用HTML5的全域屬性

1. 是否可編輯：[contenteditable](http://www.runoob.com/tags/att-global-contenteditable.html)="true"
2. 是否拼字檢查：[spellcheck](http://www.runoob.com/tags/att-global-spellcheck.html)="true"
3. 隱藏元件：[hidden](http://www.runoob.com/tags/att-global-hidden.html)
4. 右鍵選單：[contextmenu](http://www.runoob.com/tags/att-global-contextmenu.html)="mymenu"

:::