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

滾動的CSS

Avatar for Shouko Shouko
October 24, 2014
Technology
1
460

 滾動的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
120
PDOGS 2015 Recruit
Avatar for Shouko shouko
0
190
Open Source Open Data Intro
Avatar for Shouko shouko
0
82
如何把大象放進冰箱裡 - 開源社PHP入門
Avatar for Shouko shouko
2
980
資料視覺化與知名行動通訊APP之安全性疑慮
Avatar for Shouko shouko
1
140
2014 NTU IM prepConf 哞~有趣的圖文產生器
Avatar for Shouko shouko
1
200

Other Decks in Technology

See All in Technology
Copilot Agentを普段使いしてわかった、バックエンド開発で使えるTips
Avatar for ykagano ykagano
1
1.1k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.6k
技術職じゃない私がVibe Codingで感じた、AGIが身近になる未来
Avatar for ayane blueb
0
120
開発効率と信頼性を両立する Ubieのプラットフォームエンジニアリング
Avatar for teru0x1 teru0x1
0
140
QAはソフトウェアエンジニアリングを学んで実践するのが大事なの
Avatar for ymty ymty
1
400
「伝える」を加速させるCursor術
Avatar for Naomi Shiraishi naomix
0
630
比起獨自升級 我更喜歡 DevOps 文化 <3
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
160
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
44
27k
脅威をモデリングしてMCPのセキュリティ対策を考えよう
Avatar for GMO Flatt Security flatt_security
4
1.7k
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
Avatar for Sansan R&D sansan_randd
1
310
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
Avatar for Yudai Hayashi yudai00
0
360
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
3.4k

Featured

See All Featured
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
46
9.6k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.4k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.8k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.3k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k

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#