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
410
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
57
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
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
Avatar for yoshiyoshifujii yoshiyoshifujii
4
420
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
Avatar for Yuichi Maekawa kaelaela
12
7.1k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
Avatar for コドモン開発チーム codmoninc
2
21k
AI時代のソフトウェア開発を考える（2025/07版） / Agentic Software Engineering Findy 2025-07 Edition
Avatar for Takuto Wada twada
PRO
99
37k
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
Avatar for Hiroki Iseri goyoki
5
1.2k
AWS Summit Japan 2024と2025の比較／はじめてのKiro、今あなたは岐路に立つ
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
120
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
Avatar for Gunji gunji
0
180
状態遷移図を書こう / Sequence Chart vs State Diagram
Avatar for Kuniwak orgachem
PRO
2
210
A full stack side project webapp all in Kotlin (KotlinConf 2025)
Avatar for Dan Kim dankim
0
150
ニーリーにおけるプロダクトエンジニア
Avatar for Nealle nealle
0
950
おやつのお供はお決まりですか？@WWDC25 Recap -Japan-\(region).swift
Avatar for gangan shingangan
0
140
ISUCON研修おかわり会 講義スライド
Avatar for Yuki Yata arfes0e2b3c
1
470

Featured

See All Featured
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.4k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.7k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.4k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.8k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
54k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k

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/