線上書籍

Home

[1061] XOOPS佈景設計

一、 關於本課程
  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. 本期助教:溫孝文([email protected])、李佳玲([email protected]
二、 這學期會學到...
  1. HTML5:也就是網頁的最基礎標籤,用來建構網頁外觀架構、表單...等。
  2. CSS3:用來美化系統外觀
  3. BootStrap3:快速導入自適應框架,讓您的網站在手機跑看起來也一樣美觀。
  4. Smarty:PHP官方樣板引擎,開發XOOPS必備。
  5. XOOPS樣板機制:熟悉XOOPS佈景開發流程及其相關原理。
三、 開發工具
  1. 瀏覽器部份,上課主要以Firefox為主,用Chrome亦可,IE建議使用11版以後版本。
  2. Firefox建議安裝幾個套件。請從「工具→附加元件」來安裝。
    • 「web developer」前端開發工具
    • 「colorZilla」顏色選擇器
    • 「uBlock Origin」擋廣告
    • 「Video DownloadHelper」下載影片
    • 「Auto Reload」檔案同步
  3. 首推sublime text(按此下載32位元版),其次為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. 開新檔: Ctrl + N
    2. 複製: Ctrl + C
    3. 貼上: Ctrl + V
    4. 全選: Ctrl + A
    5. 儲存: Ctrl + S
    6. 搜尋: Ctrl + F
    7. 取代: Ctrl + H
    8. 向右縮排: Tab
    9. 向左縮排: Shift + Tab
    10. 排版: Ctrl + Shift + H
    11. 垂直選取: Shift +滑鼠右鍵
    12. 多行選取: Ctrl +滑鼠左鍵
  9. sublime 使用者設定 { "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. 常用基本標籤:
    標題 <h1></h1>(1~6)除了作為標題外,一般也拿來當作網站的架構或大綱。
    段落 <p></p> 區塊容器 <div></div> 行內容器 <span></span>
    換行 <br> 輸出標籤 <pre></pre> 引用 <blockquote></blockquote>
    水平線 <hr> 註釋標籤 <!--註釋-->    
十一、 項目符號或清單列表

有序列表

無序列表

定義列表

<ol>

<li>項目1</li>

<li>項目2</li>

</ol>

<ul>

<li>項目1</li>

<li>項目2</li>

</ul>

<dl>

<dt>項目名稱</dt>

<dd>項目說明</dd>

</dl>

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

<table>

<tr><th>表頭1</th><th>表頭2</th></tr>

<tr><td>表格1</td><td>表格2</td></tr>

</table>

  1. <table>屬性:border(框寬度)

  2. <th>及<td>屬性:colspan(水平合併)、rowspan(垂直合併)、headers(定義表頭關聯)

  3. <th>還支援scope(定義表頭)屬性

  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></header>:頁首

  2. <hgroup></hgroup>:標題群組

  3. <nav></nav>:導覽列

  4. <article></article>:文件

  5. <section></section>:小節

  6. <mark></mark>:畫記

  7. <aside></aside>:側邊內容

  8. <figure></figure>:圖表內容

  9. <figcaption></figcaption>:圖說

  10. <menu type="context" id="mymenu"></menu>:定義一組選單

  11. <menuitem label="編輯"></menuitem>:選單項目

  12. <footer></footer>:頁尾

  13. <video src="影片.mp4"></video>:影片播放
                       

十九、 常用HTML5的全域屬性
  1. 是否可編輯:contenteditable="true"
  2. 是否拼字檢查:spellcheck="true"
  3. 隱藏元件:hidden
  4. 右鍵選單:contextmenu="mymenu"