Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

NTUOSC Notice    Fall 2013     R02725021  R02725046     

Slide 3

Slide 3 text

Web Design #1 R02725021 x2 R02725046 ä

Slide 4

Slide 4 text

Agenda 上Web? NTU FTP HTML

Slide 5

Slide 5 text

上web HTML下 HTML

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ÈĤ@Ă Domain Name áP@ķZĻgoogle.comĶfacebook.com IP ×FćķLInternetÆMN DNS Domain Name System !…ĨĄØķ<ÅDomain Name‰.IP

Slide 11

Slide 11 text

á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 ĭĬÝ©

Slide 12

Slide 12 text

HTML CSS JS structure presentation behavior áĭWúÚ

Slide 13

Slide 13 text

ò‡\A HTML structure

Slide 14

Slide 14 text

‡\úYÉ HTML presentation CSS

Slide 15

Slide 15 text

¡{_j<1 HTML CSS behavior JS

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

HTML HyperText Markup Language ¯Ù tags start tag / close tag l~ attributes

This is a paragraph

Start tag Attribute Close tag Value Content Element

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ï ĞúHello World! Web Design

Hello World!

Slide 23

Slide 23 text

Tagć bC·–İOaè

Slide 24

Slide 24 text

Tagć HTMLáĭž-Åhtml tag3 øĬ)3BĶ'W5R

Slide 25

Slide 25 text

Tag title meta ⼀一 <link> CSS <script> JS Javascript

Slide 26

Slide 26 text

Tagć áĭeĦ&cãēš· ǍÉáĭcodeAĸ

Slide 27

Slide 27 text

Web Design

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Block-level Element
element 中

~

,
    中●.●.●... ,
      中1.2.3..

Slide 30

Slide 30 text

Block-level Element ⼀一 ⼀一 ⼀一 ⼀一

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Z©ƒ(ʶÆƀ ĊÅ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Inline-level Element inline element 不 , , code, 三

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Web Design #2 R02725021 fP% R02725046 ‘

Slide 39

Slide 39 text

Outline What is CSS? Why? Where is CSS? How can I use CSS? Learning Resource

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Where is CSS? Inline style MnQ

This is a paragraph.

g»¬ŒÆ`$gÂ!

Slide 44

Slide 44 text

Where is CSS? Internal style sheet ³nQÈb½É `$<~6b½ hr { color: sienna; } p { margin-left: 20px; } body { background-image: url("images/back40.gif"); }

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Where is CSS? y 3¿£ ‹g +By 3Dn ¡u«vÊ reset.css G+By 3nQsº normalize.css G+By 3nQ

Slide 47

Slide 47 text

Inline style MnQ Internal style sheet ³nQ External style sheet 9³nQ y 3¿£nQ 1 2 3 4 ¾O›

Slide 48

Slide 48 text

How can I use CSS? nQ Z{ Box model

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Box model

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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]

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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