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

滾動的CSS

Avatar for Shouko Shouko
October 24, 2014
Technology
1
480

 滾動的CSS

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

Avatar for Shouko

Shouko

October 24, 2014
Tweet

More Decks by Shouko

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

Other Decks in Technology

See All in Technology
20251222_サンフランシスコサバイバル術
Avatar for ponponmikan ponponmikankan
2
140
ハッカソンから社内プロダクトへ AIエージェント ko☆shi 開発で学んだ4つの重要要素
Avatar for Tech Leverages leveragestech
0
250
Introduce marp-ai-slide-generator
Avatar for Itaru Tomita itarutomy
0
130
20251203_AIxIoTビジネス共創ラボ_第4回勉強会_BP山崎.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
140
AI との良い付き合い方を僕らは誰も知らない
Avatar for Asei Sugiyama asei
0
270
アラフォーおじさん、はじめてre:Inventに行く / A 40-Something Guy’s First re:Invent Adventure
Avatar for 株式会社カミナシ kaminashi
0
170
障害対応訓練、その前に
Avatar for coconala_engineer coconala_engineer
0
200
フィッシュボウルのやり方 / How to do a fishbowl
Avatar for Pauli pauli
2
400
『君の名は』と聞く君の名は。 / Your name, you who asks for mine.
Avatar for NTT docomo Business nttcom
1
120
なぜ あなたはそんなに re:Invent に行くのか？
Avatar for Kazuki Miura miu_crescent
PRO
0
220
MySQLとPostgreSQLのコレーション / Collation of MySQL and PostgreSQL
Avatar for とみたまさひろ tmtms
1
1.3k
202512_AIoT.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
150

Featured

See All Featured
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
13
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
48
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
190
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
51
47k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
0
100
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k

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#