Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

網站程式設計[1] @ INFOR

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for tewei tewei
October 21, 2014
Programming
150
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
220
AI in Medicine @ APMSS 2019
Avatar for tewei tewei
1
480
Do No Harm Book Report
Avatar for tewei tewei
0
110
古騰堡革命
Avatar for tewei tewei
0
160
個人申請
Avatar for tewei tewei
0
180
Entresoft Program 2015-16
Avatar for tewei tewei
0
160
Intro to CS Course Outline
Avatar for tewei tewei
0
73
Deep and Reinforced Learning
Avatar for tewei tewei
1
170
網路安全 @ INFOR
Avatar for tewei tewei
0
120

Other Decks in Programming

See All in Programming
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
Avatar for convto convto
5
7.1k
How I Stole PSI from Android Studio - DroidKaigi2026
Avatar for JunRong Tan worker8
0
120
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
Avatar for Hidemune Takahashi h1d3mun3
1
350
Are APIs Still Relevant in the AI Era?
Avatar for Antoine Bluchet soyuka
0
200
XP祭りでしか伝わらないフリップネタ #xpjug
Avatar for bayashi murabayashi
0
150
20260828_品質と開発生産性を両立させる、AI時代のE2Eテストの考え方
Avatar for MagicPod magicpod
0
210
Family mrubyの進捗
Avatar for Katsuhiko Kageyama kishima
1
120
iOSDC Japan 2026 - Swiftで作って学ぼう！データベース自作入門
Avatar for kaseken (Kent Kaseda) kaseken
2
160
AHC070解法紹介
Avatar for eijirou eijirou
0
120
個人開発基盤をまるごとCloudflareに引っ越して爆速で総合的体験を向上させた話
Avatar for Tsubasa SEKIGUCHI tinykitten
0
180
自分的「カンファレンスの楽しみ方」
Avatar for syumai syumai
0
200
kubernetes コンポーネント開発入門 / 新卒N年目の勉強会&交流会！〜〇〇への誘い〜 #n_study
Avatar for mazrean mazrean
0
240

Featured

See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
390
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
720
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
310
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2.1k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
280
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
4.9M
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.1k
Fireside Chat
Avatar for paigeccino paigeccino
43
4k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
460
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.6k

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/