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