線上書籍

Home

[1031]XOOPS佈景設計

一、 講義直送您的電腦
  1. 講義:http://www.tad0616.net/modules/tad_book3/index.php?tbsn=32
  2. 請申請Dropbox(雲端磁碟機),一旦發布講義,您的電腦會馬上收到。(有帳號的可不用再申請)
  3. 您也可以直接連上https://www.dropbox.com/ 只要有網路,都可直接下載教材。
  4. 未來講義將不再列出實體紙張,講義及相關教材會盡量於星期五送到各位電腦中,同時也會發表到Tad教材網。
二、 關於本課程
  1. 本課程是系列課程中的第二個學程,也是未來幾個學程的基本功夫部份。
  2. 上課歡迎卯起來走動,互相交流,有任何不懂之部份,請儘管舉手或開口發問。
  3. 課程分為三大主軸:HTML5、CSS3(含影像處理及Bootstrap)、XOOPS佈景設計
三、 關於編輯器
  1. 本次課程使用的預設編輯器為NotePad++(http://notepad-plus-plus.org/)或用Sublime Text更好。這兩套都是執行快速,功能強大的免費軟體,而且都具有中文界面。當然您也可以使用自己熟悉的編輯軟體來操作。
四、 關於瀏覽器
  1. 瀏覽器以FireFox為主,建議安裝web developer套件,將對本次課程有相當大之幫助。請從「工具→附加元件」來安裝。
  2. Google瀏覽器亦有web developer(請裝中文版)套件,但功能較簡易。請從「工具→擴充功能」來安裝。
五、 關於伺服器
  1. HTML及CSS部份,並不需要任何伺服器,只要有瀏覽器就可以執行。
  2. XOOPS架設則需放到網頁伺服器中,同時也需要資料庫伺服器來儲存資料。期中會開帳號給學員,若想在家或離線練習,可安裝XAMPPUniForm Server來練習。
六、 關於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
  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。
<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>中)
  <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->