Joomla! Extension Course - 1

Presentation on theme: "Joomla! Extension Course - 1"— Presentation transcript:

1 Joomla! Extension Course - 1
HTML5 / CSS3 Joomla! Extension Course - 1

2 Outline Editor – 選擇適當的工具 HTML5 – 常見的標籤 CSS3 – 認識樣式和學習使用
在 Joomla! 的佈景主題匯入自訂的 CSS (小例子：修改背景) 套用 Joomla! 佈景主題提供的樣式

3 Sublime Text 2 我想推薦它做為編輯器 從垃圾碼當中解脫

4 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

5 萬惡設計模式 不良的上稿方式範例 (Copy + Paste) 產生過多的垃圾碼

6 HTML HyperText Markup Language

7 HTML Semantic Web 語意網頁 純文字檔 前端工程的基礎 任何元素都是由標籤配合屬性建構 連結是其核心架構
檔案較小，可以增進網站的讀取速度。 容易維護，下一個助理可能容易接手。 專業！ Web Accessibility Initiative 網頁親合力 （無障礙網頁） Search Engine Optimization 搜尋引擎最佳 化

8 HTML 的標籤與屬性 各種標籤都有屬性(Attribute) HTML 是由 標籤(Tag) 組成的
<標籤 屬性=“屬性值”>內容</標籤> <a href=“ HTML 是由 標籤(Tag) 組成的 <標籤>內容</標籤> <p>這是一個段落</p>

9 HTML5 的文件結構

10 學習資源在哪裡 Google Search

11 CSS Cascading Style Sheets

12 CSS Cascading Style Sheets 結合HTML編輯器說明「行內引用」 介紹 Joomla! 如何「匯入引用」 #id 想成身分證字號，它是唯一的 .class 想成是職業，很多人可以相同職業 層疊樣式表 CSS 有 3 種使用的方式 說好今天不講選擇器的： 基本選擇器、偽元素選擇器、虛擬型別選擇器、 屬性選擇器，還有那強大但不小心使用就會爆 版的組合選擇符。

13 <p>這是一個段落</p>
BOX Model <p>這是一個段落</p>

14 學習資源在哪裡 Google Search

15 Joomla! 我想把網頁做得再精緻一點 ：資料的正確性和時效性比較 重要

16 參考教學 使用 JoomlaShine 提供的樣式 引入自訂 CSS 樣式
ustomize-appearance ss/115-external-css

17 學習更多 參(ㄔㄠ)考(ㄒㄧˊ)別人的網站 多練習，並且找些人一起學 Google It!

18 Q&A 我要怎樣修改網站某個地方的背景照片 以 JSN Sky Pro(ot.kmu.edu.tw) 說明
#jsn-header_inner { background-color: #ffedff }