線上書籍

Home

XOOPS 新版佈景設計

一、 HTML5基本概念
  1. 廣義論及HTML5時,實際指的是HTML、CSS 和 JavaScript 在內的技術組合
  2. 先在硬碟建立一個資料夾,因為一個XOOPS佈景就是一個資料夾。
  3. 新增一個名為 theme.html 的檔案,因為XOOPS的主要佈景名稱就是 theme.html。
  4. HTML的檔案為純文字檔,副檔名為.html,瀏覽器即可讀取HTML檔。
  5. 請用文字編輯器開啟 theme.html,並輸入或貼上以下內容: <!DOCTYPE html> <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取代)。 <!--設定背景顏色--> <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
  10. 中文手冊:http://www.w3school.com.cn/tags/index.asp
  11. 台南場的研習的頁面內容可以從這裡擷取: 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不普及的年代,這是很常見的用法,但現今,其實並不建議。 <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>中)
  <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->