Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
滾動的CSS
Search
Shouko
October 24, 2014
Technology
1
460
滾動的CSS
台大開源社社課 基礎網頁設計
Shouko
October 24, 2014
Tweet
Share
More Decks by Shouko
See All by Shouko
PDOGS Recruit 2016
shouko
0
130
PDOGS 2015 Recruit
shouko
0
190
Open Source Open Data Intro
shouko
0
83
如何把大象放進冰箱裡 - 開源社PHP入門
shouko
2
980
資料視覺化與知名行動通訊APP之安全性疑慮
shouko
1
140
2014 NTU IM prepConf 哞~有趣的圖文產生器
shouko
1
200
Other Decks in Technology
See All in Technology
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
110
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
5min GuardDuty Extended Threat Detection EKS
takakuni
0
130
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
150
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
730
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
690
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
160
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
230
Github Copilot エージェントモードで試してみた
ochtum
0
100
AIのAIによるAIのための出力評価と改善
chocoyama
2
550
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
140
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Optimizing for Happiness
mojombo
379
70k
How to train your dragon (web standard)
notwaldorf
93
6.1k
Thoughts on Productivity
jonyablonski
69
4.7k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Why Our Code Smells
bkeepers
PRO
337
57k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
Transcript
None
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 Û -Å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
None
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.flaticon.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#