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

滾動的CSS

Avatar for Shouko Shouko
October 24, 2014
Technology
520
1

 滾動的CSS

台大開源社社課 基礎網頁設計

Avatar for Shouko

Shouko

October 24, 2014

More Decks by Shouko

See All by Shouko
PDOGS Recruit 2016
Avatar for Shouko shouko
0
160
PDOGS 2015 Recruit
Avatar for Shouko shouko
0
230
Open Source Open Data Intro
Avatar for Shouko shouko
0
130
如何把大象放進冰箱裡 - 開源社PHP入門
Avatar for Shouko shouko
2
1.1k
資料視覺化與知名行動通訊APP之安全性疑慮
Avatar for Shouko shouko
1
180
2014 NTU IM prepConf 哞~有趣的圖文產生器
Avatar for Shouko shouko
1
250

Other Decks in Technology

See All in Technology
ハーレムエンジニアリング
Avatar for yamachan kazuma777777
0
190
FORENSIA: ローカルLLMフォレンジックハーネス
Avatar for S.Nakano sumeshi
2
430
AI・HPC開発を支えるGPU環境の新しい選択肢 液冷GPUシステム「AquSys」の取り組み
Avatar for GPU UNITE gpuunite_official
0
150
強化学習「理論」入門
Avatar for Etsuji Nakai enakai00
3
3.6k
SO-101×VLAによる3色キューブのピック＆プレース
Avatar for ABEJA abeja
0
220
[potatotips #96] Give Your AI Agent the Flutter Playbook
Avatar for Kenichi Kambara korodroid
0
120
まちスペース®とデジタルツインと「まちづくり」
Avatar for hiro_OGI hiro_ogi
0
130
Kiro入門｜仕様駆動開発で変わるAI時代の開発スタイル
Avatar for 工藤皓夢 cmkudo
0
250
Rust×eBPFでEDRっぽいものをつくる
Avatar for 5unl1fe3 sunlife3
1
240
生成 AI の基礎 〜 サンプル実装で学ぶ基本原理
Avatar for Etsuji Nakai enakai00
7
4.5k
FDEの心得
Avatar for Noriaki Oji noriakioji
5
6.4k
Kiro Crew入門 - 常駐エージェントの仕組みと使いどころ / Intro to Kiro Crew
Avatar for Kazuki Adachi k_adachi_01
1
620

Featured

See All Featured
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.3k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
700
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.5k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.2k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
430
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
370

Transcript

  1. None

  2. NTUOSC Notice    Fall 2013   

     R02725021  R02725046     

  3. Web Design #1 R02725021 x2 R02725046 ä

  4. Agenda 上Web? NTU FTP HTML

  5. 上web HTML下 HTML

  6. Ī‚áĭ vs. 1‚áĭ Ī‚áĭ L¼ýGQõWĝ*n HTML/CSS/Javascript 1‚áĭ ĩú‘ğ{Òáĭ¤GĶϗv php/node.js/RoR/Python/JSP

  7. Ī‚áĭ ¼ýG áĭ¤G Ċľáĭ I„HTMLáĭ QõclientÒ „ÅÏy

  8. 1‚áĭ ¼ýG áĭ¤G Ċľáĭ I„HTMLáĭ QõserverÒ „ÅÏy

  9. iăđˆ Ī‚áĭ 1‚áĭ ÿ®ĈÏáĭ facebook twitter pinterest

  10. ÈĤ@Ă Domain Name áP@ķZĻgoogle.comĶfacebook.com IP ×FćķLInternetÆMN DNS Domain Name System

    !…ĨĄØķ<ÅDomain Name‰.IP

  11. áNĔ%Ļ google.com DNS server 2. http://202.169.173.247 1. ĊDNS‰google.com IP google

    web server 3. Ęâ.google server 4.I ĭĬ 4.I ĭĬÝ©

  12. HTML CSS JS structure presentation behavior áĭWúÚ

  13. ò‡\A HTML structure

  14. ‡\úYÉ HTML presentation CSS

  15. ¡{_j<1 HTML CSS behavior JS

  16. NTU FTP Û -Åfilezilla Ñ=ÕÃE Ęâ Ęâ±Ļhomepage.ntu.edu.tw 7aĻFTP /dĻĩúĖĚVıyTLSÆFTP qôĶdÌĻîÿÈ?

    xÐpublic_htmlϗX  index.html²« http://homepage.ntu.edu.tw/~r02725021
  17. None

  18. NTU FTP 不 http://oper.cc.ntu.edu.tw/docs/student_homepage.html

  19. HTML HyperText Markup Language ¯Ù tags start tag / close

    tag l~ attributes <p class=”important”>This is a paragraph </p> Start tag Attribute Close tag Value Content Element

  20. HTML5 wèþĠĻ ÀèþĠĻ ÈgšHTML4ž™ÆHTML¿§ U/™Æƀtag ’#eAPIķĐ¼ýG“uŸĴ

  21. ĊǍ^éHTML5ķėžÂLęõyĸ

  22. ï ĞúHello World! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

    <title>Web Design</title> </head> <body> <p>Hello World!</p> </body> </html>

  23. Tagć <!DOCTYPE> bC·–İOaè <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"

    "http:// www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html>

  24. Tagć <html> HTMLáĭž-Åhtml tag3 øĬ)3B<head>Ķ<body>'W5R

  25. Tag <head> title meta <meta> ⼀一 <title> <link> CSS <script>

    JS Javascript

  26. Tagć <body> áĭeĦ&cãēš· ǍÉáĭcodeAĸ

  27. <html> </html> <head> </head> <body> </body> <link rel="stylesheet" href="style.css"> <script

    src="javascript.js"></script> <meta charset="UTF-8"> <title>Web Design</title>

  28. Block-level Element }L<body>& ¹element¢|™Æõģ[ <3B(block-level element & inline-level element

  29. Block-level Element <div> element 中 <p> <h1>~<h6> <hr> , <br>

    <form> <ul> 中•.•.•... , <ol> 中1.2.3.. <li> <ul> <ol>

  30. Block-level Element <header> ⼀一 <footer> ⼀一 ⼀一 <nav> <article> <section>

    <aside> ⼀一 <hgroup>

  31. ¯»HTML5ªy œ¥HTML source:http://bit.ly/GMjof4

  32. Z©ƒ(ʶÆƀ ĊÅ<div>

  33. Inline-level Element ;ì3B£contentD(inline-level element ì3block-level element default(¼ýGĮā)¢|™Æõķ¢L>Ĝå 9Œ+

  34. Inline-level Element <span> inline element <a> 不 <img> <button> ,

    <input> <em> , <code> code, <i> <a href=”http://google.com” target=”_blank”> <img src="http://joung.im.ntu.edu.tw/images/bcc-logo.gif" alt=" 三">

  35. ×FÖ http://jsbin.com/AKewIPo/1/edit

  36. „ąúËě *ĕblock-level elementDinline-levelÆo, ¦LŒ¿ÆĽķ$ėelementž ĵlevelļ elementÞg;ė ķnothing but google! úŠHTML9ĉ•°yķúæ4Ğ

    àCSS9

  37. ^éĎº http://www.w3schools.com/ http://html5doctor.com/ http://devdocs.io (īrŽó!) ĤĢ]Ļ101

  38. Web Design #2 R02725021 fP% R02725046 ‘

  39. Outline What is CSS? Why? Where is CSS? How can

    I use CSS? Learning Resource

  40. What is CSS? Cascading Style Sheets [nQ› \!½J€@ÄnQ ¨½§x ÆIe»?

    Ç

  41. Why? E¯HTMLœ¼š2Ë z) Æ HTML+By 3¿£Dn ‡Q…°;¹ Ž¦ Œ@4¹Ä“5KlU

  42. Why? CSSà RSŽ¦½nQCd ) q£@:| nQ }ˆ€CSSnQ›

  43. Where is CSS? Inline style MnQ <p style="color:sienna;margin-left:20px">This is a

    paragraph.</p> g»¬ŒÆ`$gÂ!

  44. Where is CSS? Internal style sheet ³nQÈb½É `$<~6b½ <head> <style>

    hr { color: sienna; } p { margin-left: 20px; } body { background-image: url("images/back40.gif"); } </style> </head>

  45. Where is CSS? External style sheet 9³nQÈ.cssoÉ `$<~6b½Æpµ©Å <head> <link

    rel="stylesheet" type="text/css" href="mystyle.css"> </head>

  46. Where is CSS? y 3¿£ ‹g +By 3Dn ¡u«vÊ reset.css

    G+By 3nQsº normalize.css G+By 3nQ

  47. Inline style MnQ Internal style sheet ³nQ External style sheet

    9³nQ y 3¿£nQ 1 2 3 4 ¾O›

  48. How can I use CSS? nQ Z{ Box model

  49. 7†lU class ( .¶À) c ) µiƒ,class idÈ #¶ÀÉ c

    (—iid

  50. ²'3 m‰²'3 ‚[IeHTML€m‰ class²'3 ~.¶ÀA. id²'3 ~#¶ÀA. ¨CSS„±ž~61element¼

  51. Box model

  52. ¥8’– FÊ960px tN” 30% 70%

  53. ^EwV ž~nQ/-Æ~¤V&/- ­[™ÄÁLQ/-)ƍXeµÃÅ

  54. Learning Resource http://www.1keydata.com/css-tutorial/tw/ ·a> http://hackdesign.org/ hEcode žh£¢ https://github.com/kidwm/idiomatic-css/tree/master/ translations/zh-TW ½EŸ"

    http://www.smashingmagazine.com/ Web Design T]

  55. Resource http://www.flaticon.com/ Yicon http://www.awwwards.com/ ½£¢=0 http://colorschemedesigner.com/ ´˜ http://codepen.io/ Š•webH0_¸N*

  56. j®k ªÊhttps://github.com/kpman/joung-lab  NTU FTP week6.html WrÊ10/23ÈÉ pm6:30#