O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
HTML&CSS AND SEMANTIC-UI NCKU TIEN-TANG WU 1
2
從頭開始⾃自⼰己打造個⼈人履歷網⾴頁 3
從頭開始⾃自⼰己打造個⼈人履歷網⾴頁 ⽤用WordPress打造⾃自⾝身blog 4
從頭開始⾃自⼰己打造個⼈人履歷網⾴頁 ⽤用WordPress打造⾃自⾝身blog 5
從頭開始⾃自⼰己打造個⼈人履歷網⾴頁 ⽤用WordPress打造⾃自⾝身blog 打造活動專⾴頁(不要再⽤用粉絲團了！) 6
能夠⾃自⼰己把⼼心中所想的東⻄西 ⽤用html&css呈現出來然後放到網路 上給全世界看！ 7
是⼀一件很潮⼜又很酷的事！ 8
正⽂文開始！ 9
先來複習⼀一下上週交的 10
html:超⽂文本標記語⾔言（ HyperText Markup Language ） 定義網站中的⽂文章內容、標題、連結、圖⽚片等，讓瀏覽 器知道網站整個架構的呈現。 css:層疊樣式表 （Cascading Style Sheets）...
html:超⽂文本標記語⾔言（ HyperText Markup Language ） 定義網站中的⽂文章內容、標題、連結、圖⽚片等，讓瀏覽 器知道網站整個架構的呈現。 ⾻骨架 ⾐衣服 css:層疊樣式表 （Cascading Sty...
補充說明⼀一下 網站三要素： html css javascript ⾐衣服 ⾻骨架 互動 13
補充說明⼀一下 網站三要素： html css javascript front-end(前端) 14
基本html <html></html>:層狀結構,起始標籤,定義語⾔言 <head></head>:網站資訊,引⼊入外部資源 <body></body>:網站內容 15
基本 css css選擇器 id class 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 解釋最⾼高優先css ⽰示範改變 div ⼤大⼩小 和 顏⾊色 22
hand on 打開google chrome 右鍵 檢查元素 1 2 3 改變div ⼤大⼩小顏⾊色 寬：width: 100px ⻑⾧長：height: 100px 背景顏⾊色：background-color: blue;...
今天的重頭戲要來囉！ 24
semantic-ui 語意化的 front-end framework 25
semantic-ui 語意化的 front-end framework 不要打造重覆的輪⼦子！ 要站在巨⼈人的肩膀上！ 26
semantic-ui 不要再從頭打造UI了 UI semantic-UI讓你上天堂 27
先來感受⼀一下power 28
沒啥感覺？ 那來前後⽐比對 勝 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在 3...
先來個button練練等 go 33 實地演練 範例
換你做做看！ step1: 把程式碼複製到<body>中,可以動了,很爽 step2: 試試看不同種類的button step3: 配合網站的code 去修改⾃自⼰己的code button種類：⼤大⼩小,顏⾊色,icon, Anima...
學會了button之後 來回頭看⼀一下semantic-ui提供哪 些好⽤用的ㄏㄏ 35
學會了button之後 來回頭看⼀一下semantic-ui提供哪 些好⽤用且常⽤用的ㄏㄏ elements: button,icon,image… collections: menu,form… views: comment,lis...
再來學個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
1 2 3 4 設定值請參考官網設定 45
4 把click改成 hover看看 設定值請參考官網設定 46
太神啦！ 你已經會使⽤用semantic-ui了 47
學習資源參考 semantic-ui jQuery w3school 潮翻天的語⾔言： 關鍵字搜尋javascript 48
Próximos SlideShares
Carregando em…5
×

Semantic ui教學

7.410 visualizações

Publicada em

前面講解簡單的html&css
後面介紹semantic-ui framework的使用

Publicada em: Software
no profile picture user

  • Entre para ver os comentários

Exibir mais

Semantic ui教學

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

×