Transcript HTML5 / CSS3 - 高雄醫學大學 Joomla! 討論網站

HTML5 / CSS3
Joomla! Extension Course - 1
OUTLINE
Editor – 選擇適當的工具
HTML5 – 常見的標籤
CSS3 – 認識樣式和學習使用
在 Joomla! 的佈景主題匯入自訂的 CSS (小例子：修改背景)
套用 Joomla! 佈景主題提供的樣式
SUBLIME TEXT 2
我想推薦它做為編輯器
從垃圾碼當中解脫
EDITOR
TEXT Editor
WYSIWYG HTML Editor
NotePad
Adobe DreamWeaver CC
NotePad++
Microsoft FrontPage
(Expression Studio)
Emeditor
UltraEdit
Eclipse
Sublime Text
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) 組成的
<標籤>內容</標籤>
<p>這是一個段落</p>
<標籤 屬性=“屬性值”>內容</標籤>
<a href=“http://olis.kmu.edu.tw”>圖書資訊處</a>
HTML5 的文件結構
學習資源在哪裡
http://www.w3schools.com/html/default.asp
Google Search
CSS
Cascading Style Sheets
CSS
Cascading Style Sheets
結合HTML編輯器說明「行內引用」
介紹 Joomla! 如何「匯入引用」
層疊樣式表
CSS 有 3 種使用的方式
說好今天不講選擇器的：
基本選擇器、偽元素選擇器、虛擬型別選擇器、
屬性選擇器，還有那強大但不小心使用就會爆
版的組合選擇符。
#id 想成身分證字號，它是唯一的
.class 想成是職業，很多人可以相同職業
BOX MODEL
<p>這是一個段落</p>
學習資源在哪裡
http://www.w3schools.com/css/default.asp
Google Search
JOOMLA!
我想把網頁做得再精緻一點
：資料的正確性和時效性比較
重要
參考教學
使用 JoomlaShine 提供的樣式
http://webguide.kmu.edu.tw/index.php/c
ustomize-appearance
引入自訂 CSS 樣式
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
}