Joomla! Extension Course - 1 HTML5 / CSS3 Joomla! Extension Course - 1
Outline Editor – 選擇適當的工具 HTML5 – 常見的標籤 CSS3 – 認識樣式和學習使用 在 Joomla! 的佈景主題匯入自訂的 CSS (小例子：修改背景) 套用 Joomla! 佈景主題提供的樣式
Sublime Text 2 我想推薦它做為編輯器 從垃圾碼當中解脫
What You See Is What You Get Editor What You See Is What You Get TEXT Editor NotePad NotePad++ Emeditor UltraEdit Eclipse Sublime Text WYSIWYG HTML Editor Adobe DreamWeaver CC Microsoft FrontPage (Expression Studio) KompoZer, iWeb, Flux… etc Open Source HTML text editor： CKEditor、TinyMCE、JCE
萬惡設計模式 不良的上稿方式範例 (Copy + Paste) 產生過多的垃圾碼
HTML HyperText Markup Language
HTML Semantic Web 語意網頁 純文字檔 前端工程的基礎 任何元素都是由標籤配合屬性建構 連結是其核心架構 檔案較小，可以增進網站的讀取速度。 容易維護，下一個助理可能容易接手。 專業！ Web Accessibility Initiative 網頁親合力 （無障礙網頁） Search Engine Optimization 搜尋引擎最佳 化
HTML 的標籤與屬性 各種標籤都有屬性(Attribute) HTML 是由 標籤(Tag) 組成的 <標籤 屬性=“屬性值”>內容</標籤> <a href=“http://olis.kmu.edu.tw”>圖書資訊處</a> HTML 是由 標籤(Tag) 組成的 <標籤>內容</標籤> <p>這是一個段落</p>
HTML5 的文件結構
學習資源在哪裡 http://www.w3schools.com/html/default.asp Google Search
CSS Cascading Style Sheets
CSS Cascading Style Sheets 結合HTML編輯器說明「行內引用」 介紹 Joomla! 如何「匯入引用」 #id 想成身分證字號，它是唯一的 .class 想成是職業，很多人可以相同職業 層疊樣式表 CSS 有 3 種使用的方式 說好今天不講選擇器的： 基本選擇器、偽元素選擇器、虛擬型別選擇器、 屬性選擇器，還有那強大但不小心使用就會爆 版的組合選擇符。
<p>這是一個段落</p> BOX Model <p>這是一個段落</p>
學習資源在哪裡 http://www.w3schools.com/css/default.asp Google Search
Joomla! 我想把網頁做得再精緻一點 ：資料的正確性和時效性比較 重要
參考教學 使用 JoomlaShine 提供的樣式 引入自訂 CSS 樣式 http://webguide.kmu.edu.tw/index.php/c ustomize-appearance http://webguide.kmu.edu.tw/index.php/c ss/115-external-css
學習更多 參(ㄔㄠ)考(ㄒㄧˊ)別人的網站 多練習，並且找些人一起學 Google It!
Q&A 我要怎樣修改網站某個地方的背景照片 以 JSN Sky Pro(ot.kmu.edu.tw) 說明 #jsn-header_inner { background-color: #ffedff }