semantic ui教學
Post on 09-Jul-2015
1.754 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTML&CSS AND SEMANTIC-UINCKU TIEN-TANG WU
1
2
從頭開始⾃自⼰己打造個⼈人履歷網⾴頁
⽤用WordPress打造⾃自⾝身blog
打造活動專⾴頁(不要再⽤用粉絲團了！)
6
能夠⾃自⼰己把⼼心中所想的東⻄西 ⽤用html&css呈現出來然後放到網路
上給全世界看！
7
是⼀一件很潮⼜又很酷的事！
8
正⽂文開始！
9
先來複習⼀一下上週交的
10
html:超⽂文本標記語⾔言（ HyperText Markup Language ）
定義網站中的⽂文章內容、標題、連結、圖⽚片等，讓瀏覽器知道網站整個架構的呈現。
css:層疊樣式表 （Cascading Style Sheets）
能為你的網站修改字體樣式、顏⾊色、網⾴頁背景、甚⾄至是華麗的動畫與 3D 效果、讓你增添設計感的⼯工具。
11
講述瀏覽器形成網⾴頁的過程建⽴立dom css渲染
html:超⽂文本標記語⾔言（ HyperText Markup Language ）
定義網站中的⽂文章內容、標題、連結、圖⽚片等，讓瀏覽器知道網站整個架構的呈現。
css:層疊樣式表 （Cascading Style Sheets）
能為你的網站修改字體樣式、顏⾊色、網⾴頁背景、甚⾄至是華麗的動畫與 3D 效果、讓你增添設計感的⼯工具。
⾻骨架
⾐衣服
12
css推廣歷史 禪意花園
補充說明⼀一下
網站三要素： html css
javascript
⾐衣服⾻骨架
互動
13
補充說明⼀一下
網站三要素： html css
javascriptfront-end(前端)
14
基本html
<html></html>:層狀結構,起始標籤,定義語⾔言
<head></head>:網站資訊,引⼊入外部資源
<body></body>:網站內容
15
基本 csscss選擇器
idclass
16
使⽤用css的三個⽅方法：
外部引⼊入-在head中加⼊入link標籤
內部引⼊入-在style標籤中加⼊入css語法
內部引⼊入(最⾼高優先)-在標籤中加⼊入 style標籤
17
使⽤用css的三個⽅方法：
外部引⼊入-在head中加⼊入link標籤
內部引⼊入-在style標籤中加⼊入css語法
內部引⼊入(最⾼高優先)-在標籤中加⼊入 style標籤
只要有style標籤就可以使⽤用css
18
example:
1
2
3
19
使⽤用使⽤用Google Chrome開發者⼯工具，快速調校網⾴頁並偵錯
打開google chrome
右鍵 檢查元素
1
2
20
example:
1
2
3
21
demo
22
解釋最⾼高優先css⽰示範改變 div ⼤大⼩小 和 顏⾊色
hand on打開google chrome
右鍵 檢查元素
1
2
改變div ⼤大⼩小顏⾊色3
寬：width: 100px
⻑⾧長：height: 100px
背景顏⾊色：background-color: blue;
23
今天的重頭戲要來囉！
24
semantic-ui
語意化的 front-end framework
25
semantic-ui
語意化的 front-end framework
不要打造重覆的輪⼦子！
要站在巨⼈人的肩膀上！
26
semantic-ui
不要再從頭打造UI了
semantic-UI讓你上天堂
UI
27
沒啥感覺？ 那來前後⽐比對
勝29
好想學！ 第⼀一步！
回想如何使⽤用css的三個⽅方法
30
好想學！ 第⼀一步！
回想如何使⽤用css的三個⽅方法
把css外部引⼊入進來！<link rel="stylesheet" href="./packaged/css/semantic.css"/>
31
<link rel="stylesheet" href="./packaged/css/semantic.css"/>
注意相對路徑！
packaged,index.html,reset.css 同層
⽽而semantic.css在
32
換你做做看！
step1: 把程式碼複製到<body>中,可以動了,很爽
step2: 試試看不同種類的button
step3: 配合網站的code 去修改⾃自⼰己的code
button種類：⼤大⼩小,顏⾊色,icon, Animated…
34
⽤用http://semantic-ui.com/elements/button.html查詢喔～
學會了button之後
來回頭看⼀一下semantic-ui提供哪些好⽤用的ㄏㄏ
35
學會了button之後
來回頭看⼀一下semantic-ui提供哪些好⽤用且常⽤用的ㄏㄏ
elements: button,icon,image…collections: menu,form…views: comment,list…modules: slidbar,popup…
36
再來學個popup
37
BUT!
38
BUT!
好像出現我沒看過的東⻄西...
$
$
what?
wt
$
$
$
39
還記得我們說過網站三要素嗎？
40
html
css
javascript
41
html
css
javascript$ 是 jQuery的語法,⽽而jQuery是javascript的函式庫...
42
我不要聽這麼多,教我直接⽤用就好了
43
好吧...
跟css⼀一樣引⼊入外部套件1.先引⼊入jQuery 函式庫
2.在引⼊入semantic.js 函式庫
3.加上class or id
4.呼叫它並填⼊入設定
44
12
3
4
設定值請參考官網設定45
4
設定值請參考官網設定
把click改成 hover看看
46
太神啦！
你已經會使⽤用semantic-ui了
47
學習資源參考
semantic-ui
jQuery
w3school
潮翻天的語⾔言：
關鍵字搜尋javascript
48
top related