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

網站程式設計[1] @ INFOR

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for tewei tewei
October 21, 2014
Programming
130
0

網站程式設計[1] @ INFOR

Avatar for tewei

tewei

October 21, 2014

More Decks by tewei

See All by tewei
Alcoholism Treatment: A Translational Perspective
Avatar for tewei tewei
0
210
AI in Medicine @ APMSS 2019
Avatar for tewei tewei
1
460
Do No Harm Book Report
Avatar for tewei tewei
0
84
古騰堡革命
Avatar for tewei tewei
0
130
個人申請
Avatar for tewei tewei
0
160
Entresoft Program 2015-16
Avatar for tewei tewei
0
160
Intro to CS Course Outline
Avatar for tewei tewei
0
68
Deep and Reinforced Learning
Avatar for tewei tewei
1
150
網路安全 @ INFOR
Avatar for tewei tewei
0
100

Other Decks in Programming

See All in Programming
Javaの型とAI時代に型が大事な理由 / java types and type in AI era
Avatar for Naoki Kishida kishida
2
120
決定論的オーケストレーションの設計と実装 / Design and Implementation of Deterministic Orchestration
Avatar for nrs nrslib
3
1.3k
Webフレームワークの ベンチマークについて
Avatar for Yusuke Wada yusukebe
0
160
ローカルLLMを使ってB2Bサービスを作っていての学び
Avatar for Hiroshige Umino yaotti
0
160
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
Avatar for daitasu daitasu
0
220
DynamoDBには集計系のクエリがないけどなんとかしたい
Avatar for 村上優稀 musan
1
130
Technical Debt: Understanding it Rightly, Engaging it Rightly #LaravelLiveJP
Avatar for shogogg shogogg
0
220
AI時代のUIはどこへ行く？その2！
Avatar for Yusuke Wada yusukebe
21
7k
「AIで開発し、AIを届ける」をEvalでつなぐ 〜AIネイティブに始めるプロダクト開発の実践〜 / Connecting "Develop with AI, deliver AI" with Eval
Avatar for r-kagaya rkaga
4
4.9k
IBM Bobを活用したレガシーアプリの最新化
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
1
190
AutonomyとControlのあいだ：Graflowで記述するAIエージェント協調
Avatar for Makoto Yui myui
0
120
Skillsは効率化、Agentsは"自分の拡張"——Builder時代のエージェント編成（CC Night 2026）
Avatar for Hiroki Uemura wemra
1
120

Featured

See All Featured
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
7
36k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
390
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
220
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
840
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
940
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4k

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/