Css java script 前端網頁設計概論(day1)
Transcript of Css java script 前端網頁設計概論(day1)
![Page 1: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/1.jpg)
CSS JavaScript 前端網頁設計概論(Day1)
![Page 2: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/2.jpg)
經歷
![Page 3: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/3.jpg)
講授過課程
![Page 4: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/4.jpg)
Agenda
![Page 5: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/5.jpg)
What is CSS?
![Page 6: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/6.jpg)
What is CSS
![Page 7: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/7.jpg)
CSS 的基本觀念
![Page 8: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/8.jpg)
CSS 的基本觀念
![Page 9: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/9.jpg)
CSS 基本語法說明
![Page 10: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/10.jpg)
外部檔案、內嵌樣式表
![Page 11: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/11.jpg)
註解
![Page 12: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/12.jpg)
規則
![Page 13: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/13.jpg)
群組
![Page 14: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/14.jpg)
繼承
![Page 15: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/15.jpg)
盒子模型 (box model)
![Page 16: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/16.jpg)
CSS 的語法縮寫
![Page 17: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/17.jpg)
基本的 CSS 語法縮寫
![Page 18: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/18.jpg)
基本的 CSS 語法縮寫
![Page 19: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/19.jpg)
CSS 的版面配置
![Page 20: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/20.jpg)
CSS 的版面配置
![Page 21: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/21.jpg)
強大的 CSS 選取器 (Selector)
![Page 22: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/22.jpg)
強大的 CSS 選取器 (Selector)
![Page 23: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/23.jpg)
CSS 選取器 (Selector) 的種類
![Page 24: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/24.jpg)
類別選取器 (Class Selector)
![Page 25: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/25.jpg)
ID 選取器 (ID Selector)
![Page 26: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/26.jpg)
型態選取器 (Type Selector)
![Page 27: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/27.jpg)
萬用選取器 (Universal Selector)
![Page 28: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/28.jpg)
屬性選取器 (Attributes Selector)
![Page 29: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/29.jpg)
![Page 30: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/30.jpg)
各種 CSS 範例
![Page 31: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/31.jpg)
訪間各種 CSS 範例
![Page 32: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/32.jpg)
Bootstrap 與 RWD 網站設計概論
![Page 33: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/33.jpg)
什麼是 RWD 響應式網頁設計?
![Page 34: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/34.jpg)
什麼是響應式網頁設計?
![Page 35: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/35.jpg)
以前的做法 (Adaptive)
![Page 36: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/36.jpg)
Responsive vs Adaptive 的抉擇
![Page 37: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/37.jpg)
Responsive Web Design 的要素
![Page 38: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/38.jpg)
體驗 Responsive Web Design 網站
![Page 39: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/39.jpg)
其他 Responsive Web Design 網站
![Page 40: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/40.jpg)
Responsive Web Design 的設計原則
![Page 41: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/41.jpg)
Bootstrap 與響應式網頁設計?
![Page 42: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/42.jpg)
Bootstrap 與響應式網頁設計?
![Page 43: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/43.jpg)
什麼是 Bootstrap ?
![Page 44: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/44.jpg)
Bootstrap 的特色?
![Page 45: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/45.jpg)
Bootstrap 裡面有什麼
![Page 46: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/46.jpg)
Bootstrap 套件支援的功能
![Page 47: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/47.jpg)
Visual Studio 2015 對 RWD 設計的支援
![Page 48: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/48.jpg)
Bootstrap 套件所提供的基礎功能
![Page 49: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/49.jpg)
依照 ( 視窗 /Device) 調整大小的 img
![Page 50: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/50.jpg)
支援最多 12 欄位的 Grid 表格
![Page 51: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/51.jpg)
定義 Grid 表格的欄位與寬度
![Page 52: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/52.jpg)
Bootstrap 文字對齊
![Page 53: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/53.jpg)
Bootstrap 文字強化效果
![Page 54: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/54.jpg)
Bootstrap 的 Table 表格
![Page 55: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/55.jpg)
Bootstrap 對 Form 表單的支援
![Page 56: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/56.jpg)
Bootstrap 對 Button 增強
![Page 57: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/57.jpg)
實作:使用 VS2015 建立一個 MVC 網站,並操作使用 Bootstrap
![Page 58: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/58.jpg)
各瀏覽器對 HTML5/CSS3 支援程度
![Page 59: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/59.jpg)
CSS Hack 解決 IE7,IE8,IE10,IE11,Firefox
![Page 60: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/60.jpg)
CSS 的變種 (LESS 、 SASS)
![Page 61: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/61.jpg)
Q&A
![Page 62: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/62.jpg)
References
![Page 63: Css java script 前端網頁設計概論(day1)](https://reader033.fdocuments.net/reader033/viewer/2022042906/58a0a6141a28ab9f758b6f05/html5/thumbnails/63.jpg)
個人資訊