滾動的CSS

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

Transcript

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
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¿£D
    n ‡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 3D
    n ¡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 (—i
    id
50. ²'3 m‰²'3 ‚[IeHTML€m‰ class²'3 ~.¶ÀA. id²'3 ~#¶ÀA. ¨CSS„±ž~61
    element¼
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#