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

滾動的CSS

Avatar for Shouko Shouko
October 24, 2014
Technology
500
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
150
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
240

Other Decks in Technology

See All in Technology
Claude Mythos、Fable...フロンティアAIの最新動向と企業のセキュリティ対策
Avatar for GMO Flatt Security flatt_security
0
170
Power Automateアップデート情報
Avatar for MiyakeMito miyakemito
0
280
クラウドを使う側から、作る側へ / 大吉祥寺.pm 2026前夜祭
Avatar for FUJIWARA Shunichiro fujiwara3
7
1.7k
全社でのソフトウェアサプライチェーン攻撃対策をやってみた with Takumi Guard
Avatar for kaita z63d
0
330
AIエージェントがあれば技術書なんてすぐ書けるでしょ→無理でした
Avatar for watany watany
6
1.1k
VPCセキュリティ対応の最新事情
Avatar for nagisa_53 nagisa53
1
350
脱Jenkins、インターン生が挑んだCIツールGitHubActions移行
Avatar for MIXI ENGINEERS mixi_engineers
PRO
1
260
ここは地獄！つらい朝会を体験することで、チームとしてのより良い振る舞いに気づくワークショップ / The stand-up meeting from hell in the game industry
Avatar for scrummasudar scrummasudar
0
440
ウォーターフォール開発案件のPMとしてAI活用を模索している話
Avatar for da-hatakeyama hatahata021
2
200
MCPをつなげて作る組織横断のAIエージェント基盤
Avatar for Yuta Matsumura tsubakimoto_s
0
360
どこまでAIに任せるか 〜確率論と決定論の境界決定〜
Avatar for Shu Kobuchi shukob
0
560
AI時代の強いチームの作り方
Avatar for yuukiyo yuukiyo
3
2k

Featured

See All Featured
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
430
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
850
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
260
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
420
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
290
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.7k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k

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#