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

網站程式設計[1] @ INFOR

Avatar for tewei tewei
October 21, 2014
Programming
140
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
470
Do No Harm Book Report
Avatar for tewei tewei
0
97
古騰堡革命
Avatar for tewei tewei
0
150
個人申請
Avatar for tewei tewei
0
170
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
110

Other Decks in Programming

See All in Programming
進化を続けるGo toolsの現在地 / The Current State of Ever-Evolving Go Tools
Avatar for hond hond0413
0
250
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
Avatar for Kanaru kanaru0928
0
240
PyConJP2026_wat_Python × Signal Processing: How to Draw Pictures with Sound Using Spectrogram Art
Avatar for wat wat
0
290
<title><a id="</title>君はこのHTMLをパースできるか"></a></title> #雑LT_study
Avatar for pizzacat83 pizzacat83
0
180
いまどきの Codex で開発する visionOS アプリの開発スタイルについて
Avatar for kazuhiro hara karad
0
160
異なる設計思想のフレームワークを経験して得た学び
Avatar for amekuhideki amekuhideki
1
300
源内ハンズオン概要編
Avatar for Hideyuki Nagata hideg
0
210
Cloudflare is Agents
Avatar for chimame chimame
0
180
思考垂れ流し開発　～音声入力 × AIエージェント × 開発ハーネスによる試行錯誤～
Avatar for NPOS npostring
0
120
ソフトウェアエンジニアにとっての生成AI - 特性を知って使い倒す / generative ai for software enginner
Avatar for Naoki Kishida kishida
7
2.1k
ここ半年くらいでAIに作らせたR用ツール
Avatar for eitsupi eitsupi
0
400
言葉の格闘技のススメ～紙とペンと言葉から始める、キャリアの描き方～
Avatar for 進捗ゼミ progresscicada
2
170

Featured

See All Featured
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.7k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.5k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
550
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.6k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
970
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.9k

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/