網站程式設計[1] @ INFOR

網站程式設計 Alexander Shieh @ INFOR

介紹⼀一下 • 如果某⼀一天我沒來上課或沒有講義純屬正常現象 • ⼤大綱：http://tewei.logdown.com/posts/208349- network-programming-course • 參考書籍：Discover Meteor, 深⼊入淺出Node.js

網站101 • 網站是很多網⾴頁組成的((廢話 • 網⾴頁是什麼組成的呢？ • 如何取得網⾴頁？ HTML CSS JS

網⾴頁的組成 • HTML - 內容的架構，將不同類型的內容區隔 • CSS - 設定樣式，如⼤大⼩小、位置、顏⾊色、背景等等 •
JS - 控制HTML、CSS，可製作動畫或其他互動功能

JS - 控制HTML、CSS，可製作動畫或其他互動功能 HTML

JS - 控制HTML、CSS，可製作動畫或其他互動功能 HTML CSS

JS - 控制HTML、CSS，可製作動畫或其他互動功能 HTML CSS JS

取得網⾴頁 • 當我們輸⼊入網址按下Enter，瀏覽器就幫我們發了HTTP Request給這個網站所在的伺服器，然後伺服器就會回傳我們想看的網⾴頁伺服器 Server 客⼾戶端 Client HTTP
Response HTTP Request

HTTP Request

HTTP Request 客⼾戶端 Client

HTTP Request 伺服器 Server 客⼾戶端 Client

HTTP Request 伺服器 Server 客⼾戶端 Client HTTP Request ! Connected
to scikit-learn.org. GET /stable/ HTTP/1.1 Host: scikit-learn.org …

HTTP Request 伺服器 Server 客⼾戶端 Client HTTP Response ! HTTP/1.1
200 OK Date: … Server: Apache/2.2.15 … <html> <head></head> <body>…</body> </html> HTTP Request ! Connected to scikit-learn.org. GET /stable/ HTTP/1.1 Host: scikit-learn.org …

HTTP Request 伺服器 Server 客⼾戶端 Client HTTP Response ! HTTP/1.1
200 OK Date: … Server: Apache/2.2.15 … <html> <head></head> <body>…</body> </html> HTTP Request ! Connected to scikit-learn.org. GET /stable/ HTTP/1.1 Host: scikit-learn.org … Status Code 2xx 成功 3xx 重新導向 4xx Client Error 5xx Server Error

HTML • HTML - 內容的架構，將不同類型的內容區隔 HTML

元素Elements • https://developer.mozilla.org/en-US/docs/Web/HTML/ Element

HTML Wrap-Up

HTML Wrap-Up • HW1.1: Reveal.js • HW1.2: Finish Codecademy Build
a Website

CSS • CSS - 設定樣式，如⼤大⼩小、位置、顏⾊色、背景等等

CSS • CSS - 設定樣式，如⼤大⼩小、位置、顏⾊色、背景等等 CSS

CSS進階 • Responsive: Media Query • CSS3: 3D-Transform、Animation • CSS
pre-processors: SCSS、 LESS、SASS

CSS參考 • CSS Parallax • http://neversaycoding.tumblr.com/post/95265641412/1-1- css-pure-css-parallax-design • CSS Light
Box • http://schier.co/post/creating-pure-css-lightboxes-with- the-:target-selector • CSS Centering • http://css-tricks.com/centering-css-complete-guide/

網站程式設計[1] @ INFOR

網站程式設計[1] @ INFOR

tewei

More Decks by tewei

Other Decks in Programming

Featured

Transcript

網站程式設計 Alexander Shieh @ INFOR

介紹⼀一下 • 如果某⼀一天我沒來上課或沒有講義純屬正常現象 • ⼤大綱：http://tewei.logdown.com/posts/208349- network-programming-course • 參考書籍：Discover Meteor, 深⼊入淺出Node.js

網站101 • 網站是很多網⾴頁組成的((廢話 • 網⾴頁是什麼組成的呢？ • 如何取得網⾴頁？ HTML CSS JS

網⾴頁的組成 • HTML - 內容的架構，將不同類型的內容區隔 • CSS - 設定樣式，如⼤大⼩小、位置、顏⾊色、背景等等 •

網⾴頁的組成 • HTML - 內容的架構，將不同類型的內容區隔 • CSS - 設定樣式，如⼤大⼩小、位置、顏⾊色、背景等等 •

網⾴頁的組成 • HTML - 內容的架構，將不同類型的內容區隔 • CSS - 設定樣式，如⼤大⼩小、位置、顏⾊色、背景等等 •

網⾴頁的組成 • HTML - 內容的架構，將不同類型的內容區隔 • CSS - 設定樣式，如⼤大⼩小、位置、顏⾊色、背景等等 •

網⾴頁的組成 • HTML - 內容的架構，將不同類型的內容區隔 • CSS - 設定樣式，如⼤大⼩小、位置、顏⾊色、背景等等 •

網⾴頁的組成 • HTML - 內容的架構，將不同類型的內容區隔 • CSS - 設定樣式，如⼤大⼩小、位置、顏⾊色、背景等等 •

網⾴頁的組成 • HTML - 內容的架構，將不同類型的內容區隔 • CSS - 設定樣式，如⼤大⼩小、位置、顏⾊色、背景等等 •

取得網⾴頁 • 當我們輸⼊入網址按下Enter，瀏覽器就幫我們發了HTTP Request給這個網站所在的伺服器，然後伺服器就會回傳我們想看的網⾴頁伺服器 Server 客⼾戶端 Client HTTP

HTTP Request

HTTP Request 客⼾戶端 Client

HTTP Request 伺服器 Server 客⼾戶端 Client

HTTP Request 伺服器 Server 客⼾戶端 Client

HTTP Request 伺服器 Server 客⼾戶端 Client HTTP Request ! Connected

HTTP Request 伺服器 Server 客⼾戶端 Client HTTP Response ! HTTP/1.1

HTTP Request 伺服器 Server 客⼾戶端 Client HTTP Response ! HTTP/1.1

HTTP Request 伺服器 Server 客⼾戶端 Client HTTP Response ! HTTP/1.1

HTML • HTML - 內容的架構，將不同類型的內容區隔 HTML

元素Elements • https://developer.mozilla.org/en-US/docs/Web/HTML/ Element

HTML Wrap-Up

HTML Wrap-Up • HW1.1: Reveal.js • HW1.2: Finish Codecademy Build

CSS • CSS - 設定樣式，如⼤大⼩小、位置、顏⾊色、背景等等

CSS • CSS - 設定樣式，如⼤大⼩小、位置、顏⾊色、背景等等 CSS

CSS進階 • Responsive: Media Query • CSS3: 3D-Transform、Animation • CSS

CSS參考 • CSS Parallax • http://neversaycoding.tumblr.com/post/95265641412/1-1- css-pure-css-parallax-design • CSS Light