滾動的CSS

NTUOSC Notice Fall 2013
R02725021 R02725046

Web Design #1 R02725021 x2 R02725046 ä

Agenda 上Web? NTU FTP HTML

上web HTML下 HTML

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

Īáĭ ¼ýG áĭ¤G Ċľáĭ IHTMLáĭ QõclientÒ ÅÏy

1áĭ ¼ýG áĭ¤G Ċľáĭ IHTMLáĭ QõserverÒ ÅÏy

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

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

áNĔ%Ļ google.com DNS server 2. http://202.169.173.247 1. ĊDNSgoogle.com IP google
web server 3. Ęâ.google server 4.I ĭĬ 4.I ĭĬÝ©

HTML CSS JS structure presentation behavior áĭWúÚ

ò\A HTML structure

\úYÉ HTML presentation CSS

¡{_j<1 HTML CSS behavior JS

NTU FTP Û -Åﬁlezilla Ñ=ÕÃ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

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

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

HTML5 wèþĠĻ ÀèþĠĻ ÈgHTML4ÆHTML¿§ U/ÆĆtag #eAPIķĐ¼ýGuĴ

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

ï ĞúHello World! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Web Design</title> </head> <body> <p>Hello World!</p> </body> </html>

Tagć <!DOCTYPE> bC·İOaè <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http:// www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html>

Tagć <html> HTMLáĭ-Åhtml tag3 øĬ)3B<head>Ķ<body>'W5R

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

Tagć <body> áĭeĦ&cãē· ÇÉáĭcodeAĸ

<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>

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

Block-level Element <div> element 中 <p> <h1>~<h6> <hr> , <br>
<form> <ul> 中•.•.•... , <ol> 中1.2.3.. <li> <ul> <ol>

Block-level Element <header> ⼀一 <footer> ⼀一⼀一 <nav> <article> <section>
<aside> ⼀一 <hgroup>

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

Z©(Ê¶ÆĆ ĊÅ<div>

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

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=" 三">

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

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

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

Web Design #2 R02725021 fP% R02725046

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

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

Why? E¯HTML¼2Ë z) Æ HTML+By 3¿£Dn Q°;¹ ¦ @4¹Ä5KlU

Why? CSSÃ RS¦½nQCd ) q£@:| nQ }CSSnQ

Where is CSS? Inline style MnQ <p style="color:sienna;margin-left:20px">This is a
paragraph.</p> g»¬Æ`$gÂ!

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>

Where is CSS? External style sheet 9³nQÈ.cssoÉ `$<~6b½Æpµ©Å <head> <link
rel="stylesheet" type="text/css" href="mystyle.css"> </head>

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

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

How can I use CSS? nQ Z{ Box model

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

²'3 m²'3 [IeHTMLm class²'3 ~.¶ÀA. id²'3 ~#¶ÀA. ¨CSS±~61element¼

Box model

¥8 FÊ960px tN 30% 70%

^EwV ~nQ/-Æ~¤V&/- [ÄÁLQ/-)ÆXeµÃÅ

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]

Resource http://www.ﬂaticon.com/ Yicon http://www.awwwards.com/ ½£¢=0 http://colorschemedesigner.com/ ´ http://codepen.io/ webH0_¸N*

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

滾動的CSS

滾動的CSS

More Decks by Shouko

Other Decks in Technology

Featured

Transcript