Upgrade to Pro — share decks privately, control downloads, hide ads and more …

網站程式設計[1] @ INFOR

Avatar for tewei tewei
October 21, 2014
Programming
0
110

網站程式設計[1] @ INFOR

Avatar for tewei

tewei

October 21, 2014
Tweet

More Decks by tewei

See All by tewei
Alcoholism Treatment: A Translational Perspective
Avatar for tewei tewei
0
190
AI in Medicine @ APMSS 2019
Avatar for tewei tewei
1
420
Do No Harm Book Report
Avatar for tewei tewei
0
66
古騰堡革命
Avatar for tewei tewei
0
100
個人申請
Avatar for tewei tewei
0
140
Entresoft Program 2015-16
Avatar for tewei tewei
0
140
Intro to CS Course Outline
Avatar for tewei tewei
0
58
Deep and Reinforced Learning
Avatar for tewei tewei
1
110
網路安全 @ INFOR
Avatar for tewei tewei
0
86

Other Decks in Programming

See All in Programming
Devoxx BE - Local Development in the AI Era
Avatar for Kevin Dubois kdubois
0
120
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
Avatar for Atsuya Sato natmark
2
490
CSC305 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
260
スマホから Youtube Shortsを見られないようにする
Avatar for lemolatoon lemolatoon
26
28k
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
Avatar for nrs nrslib
3
390
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
Avatar for m_t_tion1 kaorumuta
2
520
Six and a half ridiculous things to do with Quarkus
Avatar for Holly Cummins hollycummins
0
160
クラシルを支える技術と組織
Avatar for raku rakutek
0
200
そのpreloadは必要？見過ごされたpreloadが技術的負債として爆発した日
Avatar for mugi mugitti9
2
3.2k
技術的負債の正体を知って向き合う / Facing Technical Debt
Avatar for irof irof
0
150
Go言語の特性を活かした公式MCP SDKの設計
Avatar for hond hond0413
1
230
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
Avatar for masato hommaru mbook
0
810

Featured

See All Featured
Visualization
Avatar for Eitan Lees eitanlees
148
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.2k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
23k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
61k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
5
220
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k

Transcript

  1. 網站程式設計 Alexander Shieh @ INFOR

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Response HTTP Request

  12. HTTP Request

  13. HTTP Request 客⼾戶端 Client

  14. HTTP Request 伺服器 Server 客⼾戶端 Client

  15. HTTP Request 伺服器 Server 客⼾戶端 Client

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

    to scikit-learn.org. GET /stable/ HTTP/1.1 Host: scikit-learn.org …

  17. 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 …

  18. 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

  19. 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

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

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

  22. HTML Wrap-Up

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

    a Website

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

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

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

    pre-processors: SCSS、 LESS、SASS

  27. 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/