Web Standards for NCTU CS
-
date post
22-Oct-2014 -
Category
Design
-
view
10.084 -
download
1
description
Transcript of Web Standards for NCTU CS
![Page 1: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/1.jpg)
淺談 網頁標準設計
![Page 2: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/2.jpg)
<me>
![Page 3: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/3.jpg)
![Page 4: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/4.jpg)
Handlino和多 — 和而不同,少就是多
![Page 5: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/5.jpg)
HappyDesigner
Registrano
![Page 6: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/6.jpg)
HappyDesigner
WaSP ILG
Registrano
![Page 7: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/7.jpg)
HappyDesigner
WaSP ILG
Registrano
Handlino
![Page 8: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/8.jpg)
HappyDesigner Registrano
WaSP ILG
Registrano
Handlino
![Page 9: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/9.jpg)
</me>
![Page 10: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/10.jpg)
淺談 網頁標準設計
![Page 11: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/11.jpg)
<網頁標準>web standards
![Page 12: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/12.jpg)
What
![Page 13: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/13.jpg)
Accessibility, CC/PP, Compound Document Formats, CSS, Databinding, DOM, Efficient XML Interchange, eGovernment, GRDDL, Health Care and Life Sciences, HTML, HTTP, Incubator, InkML, Internationalization, MathML, Mobile Web Initiative, Multimodal Interaction, OWL, Patent Policy, PICS, PNG, POWDER, Privacy and P3P, RDF, Rich Web Clients, Rules, Security, Semantic Web, SML, SMIL, SOAP/XMLP, SOAP-JMS, SPARQL, Style, SVG, TAG, Timed Text, URI/URL, Voice, Ubiquitous Web Applications, WAI, Web API, Web Application Formats, Web Architecture, WebCGM, Web Services, WS-Addressing, WS-CDL, WSDL, WS-Policy, XForms, XHTML, XHTML2, XLink, XML, XML Base, XML Encryption, XML Key Management, XML Query, XML Schema, XML Signature, XPath, XPointer, XSL and XSLT
族繁不及備載
![Page 14: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/14.jpg)
(X)HTML, CSS, ECMAScript
![Page 15: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/15.jpg)
Why
![Page 16: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/16.jpg)
規約
![Page 17: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/17.jpg)
呈現HTML
資訊
太初
![Page 18: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/18.jpg)
結構HTML
呈現CSS
結構與呈現分離
![Page 19: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/19.jpg)
CSS
CSS
CSS
![Page 20: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/20.jpg)
![Page 21: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/21.jpg)
行為DOM
結構HTML
呈現CSS
![Page 22: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/22.jpg)
尊重過去backward compatibility
![Page 23: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/23.jpg)
展望未來forward compatibility
![Page 24: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/24.jpg)
以上是理想
![Page 25: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/25.jpg)
現實
![Page 26: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/26.jpg)
W3C vs. vendors各行其是
![Page 27: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/27.jpg)
NetScape Standards
<layer>, <blink>, JavaScript
![Page 28: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/28.jpg)
IEStandards
<marquee>, <bgsound>, VBScript, JScript
![Page 29: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/29.jpg)
瀏覽器版本太舊!請使用IE5以上參觀
囧rz
![Page 30: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/30.jpg)
那時、天下人的口音言語、都是一樣。他們往東邊遷移的時候、在示拿地遇見一片平原、就住在那裏。他們彼此商量說、來吧、我們要作磚、把磚燒透了。他們就拿磚當石頭、又拿石漆當灰泥。他們說、來吧、我們要建造一座城、和一座塔、塔頂通天、為要傳揚我們的名、免得我們分散在全地上。耶和華降臨要看看世人所建造的城和塔。耶和華說、看哪、他們成為一樣的人民、都是一樣的言語、如今既作起這事來、以後他們所要作的事、就沒有不成就的了。我們下去、在那裏變亂他們的口音、使他們的言語、彼此不通。於是耶和華使他們從那裏分散在全地上。他們就停工、不造那城了。因為耶和華在那裏變亂天下人的言語、使眾人分散在全地上、所以那城名叫巴別。
– 創世記11:1-9
![Page 31: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/31.jpg)
所見即所得WYSIWYG
![Page 32: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/32.jpg)
所見即所得WYSIWYG
![Page 33: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/33.jpg)
所見天曉得WYSIWGK
What You See Is What God Knows
![Page 34: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/34.jpg)
福音
![Page 35: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/35.jpg)
時代改變2002 ~
![Page 36: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/36.jpg)
![Page 37: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/37.jpg)
![Page 38: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/38.jpg)
所見還是天曉得WYSISWGK
![Page 39: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/39.jpg)
</網頁標準>
![Page 40: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/40.jpg)
<CSS>
![Page 41: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/41.jpg)
☢Powerful Weapon
![Page 42: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/42.jpg)
表格排版
![Page 43: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/43.jpg)
為什麼要用CSS表格排版有什麼問題?
![Page 44: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/44.jpg)
表格 排版根本無關
![Page 45: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/45.jpg)
<table>有規則的資料
![Page 46: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/46.jpg)
沒有選擇table, table, or me?
![Page 47: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/47.jpg)
<table cellpadding="0" cellspacing="0" border="0">
Grids
![Page 48: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/48.jpg)
缺點•冗長的HTML語法 = size++
•不必要的定位用圖片 = request++•語法沒有結構性 = extend--•更新維護不易 = cost++
![Page 49: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/49.jpg)
<table width=175 border=0 cellspacing=0 cellpadding=0><tr><td height=21 background=img2003/bg_Ltitle.gif bgcolor=FED230><img src=img2003/space.gif width=9 height=13><b><script language="JavaScript">Write5cTitle(id)</script></b></td></tr></table><table width=175 border=0 cellspacing=0 cellpadding=0><tr><td valign=top bgcolor=FED230><img src=img2003/ill_FED230.gif width=1 height=108></td><td width=174><table width=98% border=0 cellspacing=0 cellpadding=4 class=t><script language="JavaScript">Write5cBody(id)</script></table></td></tr><tr><td colSpan=2><img src=img2003/space.gif height=10 width=175></td></tr></table><table width=175 border=0 cellspacing=0 cellpadding=0><tr><td height=21 background=img2003/bg_Ltitle.gif bgcolor=FED230><img src=img2003/space.gif width=9 height=13><b>囧囧囧囧</b></td></tr></table><table width=175 border=0 cellspacing=0 cellpadding=0><tr><td valign=top bgcolor=FED230><img src=img2003/ill_FED230.gif width=1></td><td width=174 valign=top><table width=98% border=0 cellspacing=0 cellpadding=4><tr><td align=center height=52 valign=bottom><a href="http://..." onmouseover="return ss()" target=_blank><img src=/upload1/xxxmain/M1_xxx2152.gif alt="Dell" width=108 height=31 border=0 vspace=10></a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧囧囧囧囧</a></td></tr><tr><td>‧<a href="http://..." onmouseover="return ss()" target=_blank>囧囧囧囧囧囧囧囧</a></td></tr></table></td></tr><tr><td colspan=2><img src=img2003/space.gif height=8 width=175></td></tr></table>
整形前
![Page 50: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/50.jpg)
<div class="section"><h3>囧囧囧囧</h3><div class="sectionContent"><img src="pic/sidebar_ad2.gif" /><ul><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li><li><a href=”http://...”>囧囧囧囧囧囧囧囧</a></li></ul></div></div>
整形後
![Page 51: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/51.jpg)
CSS vs. Table至少減少15 ~ 35%
![Page 52: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/52.jpg)
☹Not Designer Friendly
![Page 53: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/53.jpg)
設計師?
![Page 54: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/54.jpg)
科學家
![Page 55: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/55.jpg)
CSS都十年了為什麼編輯器還是這麼難用?
![Page 56: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/56.jpg)
</CSS>
![Page 57: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/57.jpg)
平面設計 vs. 網頁設計
![Page 58: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/58.jpg)
平面設計
頁Page
![Page 59: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/59.jpg)
平面設計
頁Page
網頁設計
流Flow
![Page 60: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/60.jpg)
平面設計
靜一張恆久遠,千古永流傳
![Page 61: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/61.jpg)
平面設計
靜一張恆久遠,千古永流傳
網頁設計
動JavaScript, Flash, Silverlight, Java, ...
![Page 62: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/62.jpg)
平面設計
定全開 | 菊八開 | A4 | B5
![Page 63: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/63.jpg)
平面設計
定全開 | 菊八開 | A4 | B5
網頁設計
變1920x1024, 1024x768, 240x320, 128x128, ...
![Page 64: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/64.jpg)
1920 x 1080
1440 x 900
1280 x 720
720 x 480
320 x 240160
x240
240x
320
240x
160
160x
160
128x
128
![Page 65: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/65.jpg)
轉思考反
![Page 66: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/66.jpg)
休息一下
![Page 67: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/67.jpg)
設計流程•使用符合標準的瀏覽器開發符合標準
•補強不符合標準的瀏覽器向後相容
•瀏覽器即開發工具真正所見即所得
•驗證程式碼自助者,人助之
![Page 68: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/68.jpg)
編碼Big5 跟 UTF-8 到底是什麼鬼
![Page 69: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/69.jpg)
BOM!
![Page 70: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/70.jpg)
瀏覽器模式
• standards mode
• almost standards mode
• quirks mode
![Page 71: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/71.jpg)
Doctype Switch我真的知道自己在做什麼!
![Page 72: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/72.jpg)
![Page 73: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/73.jpg)
Box Model
![Page 74: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/74.jpg)
IE Box Model
![Page 75: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/75.jpg)
標籤、屬性都小寫<a href="..." onclick="">
<a href="..." onClick="">
✔
✘
![Page 76: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/76.jpg)
標籤開始與結束<p>......</p><p>......</p>
<p>......<p>......
✔
✘
![Page 77: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/77.jpg)
引號<img src="..." border="0">
<img src='..." border=0>
✔
✘
![Page 78: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/78.jpg)
使用正確的標籤<blockquote>, <b>, <em>, <strong>, <hN>
![Page 79: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/79.jpg)
驗證程式碼HTML Validator
![Page 80: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/80.jpg)
![Page 81: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/81.jpg)
![Page 82: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/82.jpg)
Does it matter?
![Page 83: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/83.jpg)
“How can anyone possibly expect CSS or DOM-based Javascript to work reliably with an invalid (X)HTML?”
Tantek Çelik
![Page 84: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/84.jpg)
技
![Page 85: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/85.jpg)
td { font‐family: "新細明體", "細明體"; font‐size: 9pt; color: #000000}a:link { font‐family: "新細明體", "細明體"; font‐size: 9pt; color: #0000CC;}a:visited { font‐family: "新細明體", "細明體"; font‐size: 9pt; color: #0000CC;}a:hover { font‐family: "新細明體", "細明體"; font‐size: 9pt; color: #0000CC;}a:active { font‐family: "新細明體", "細明體"; font‐size: 9pt; color: #0000CC}.s { font‐family: "新細明體", "細明體"; font‐size: 8pt; color: #646464}.v { font‐family: "Verdana"; font‐size: 7pt; color: #000000}.v2 { font‐family: "Verdana"; font‐size: 7pt; color: #0000CC}.point { font‐family: "Arial"; font‐size: 9pt; color: #000000}.h { font‐family: "新細明體", "細明體"; font‐size: 9pt; color: #000000;line‐height:15pt}form { font‐family: "新細明體", "細明體"; font‐size: 9pt; color: #000000}select { font‐family: "新細明體", "細明體"; font‐size: 9pt; color: #000000}input { font‐family: "新細明體", "細明體"; font‐size: 9pt; color: #000000}.tit { font‐family: "新細明體", "細明體", "Verdana"; font‐size: 15pt}.kind{ background‐repeat: no‐repeat;}
![Page 86: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/86.jpg)
body { font: 9pt “新細明體”, “細明體”; color: #000; }a:link, a:visited,a:hover, a:active { color: #00c; }.s { font‐size: 8pt; color: #646464; }.v { font‐family: Verdana; font‐size: 7pt; }.v2 { font‐family: Verdana; }.point { font‐family: Arial; }.h { line‐height: 15pt; }select, input { font: 9pt “新細明體”, “細明體”; color: #000; }.tit { font‐size: 15pt; }.kind{ background‐repeat: no‐repeat;}
![Page 87: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/87.jpg)
編輯器工欲善其事,必先利其器
![Page 88: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/88.jpg)
•Dreamweaver
•Notepad++•EditPlus•UltraEdit•Coda
![Page 89: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/89.jpg)
![Page 90: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/90.jpg)
![Page 91: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/91.jpg)
輔助工具
![Page 92: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/92.jpg)
Firefox請記得選「自訂安裝」
![Page 93: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/93.jpg)
Firebug
![Page 94: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/94.jpg)
Web Developer Toolbar
![Page 95: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/95.jpg)
Multiple IEs
![Page 96: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/96.jpg)
IE WebDeveloper
http://www.ieinspector.com/
![Page 97: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/97.jpg)
CompanionJShttp://www.my-debugbar.com/wiki/
![Page 98: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/98.jpg)
IETesterhttp://www.my-debugbar.com/wiki/
![Page 100: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/100.jpg)
樣式管理
![Page 101: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/101.jpg)
共同討論
![Page 102: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/102.jpg)
“If you can Name it, you can think about it. And if you can Name it, you can control it.”
![Page 103: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/103.jpg)
命名
•redtext•greenFrog•the_right_side_column
•this
![Page 104: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/104.jpg)
命名
•main, container, sidebar, wrapper, message, current
•site-search, error-message
![Page 105: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/105.jpg)
取消預設reset.css
![Page 106: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/106.jpg)
Conditional Comments
IE only
![Page 107: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/107.jpg)
<!‐‐[if expression]>blah blah...<![endif]‐‐>
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
![Page 108: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/108.jpg)
濫用DIV
![Page 109: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/109.jpg)
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html><head> <title>unobtrusive css</title> <meta http‐equiv="Content‐Type" content="text/html; charset=UTF‐8" /> <style type='text/css'> .table { display:table; } .tr { display:table‐row; } .td { display:table‐cell; } .blue { color:blue; } .bold { font‐weight:bold; } .verdana { font‐family:verdana; } .hand { cursor:pointer; } </style></head><body> <div class='table'> <div class='tr'> <div class='td'> <span class='verdana bold'>My First Tableless Website!</span> </div> <div class='td'> <span class='verdana'>To See More Information on how to make your first website...</span> </div> <div class='td'> <span class='verdana blue hand' onclick="window.open('http://www.example.com');"> click here </span> </div> </div> </div></body></html>
http://www.dustindiaz.com/totally-compliant-markup/
![Page 110: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/110.jpg)
疊床架屋
![Page 111: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/111.jpg)
LSMLayered Semantic Markup
![Page 112: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/112.jpg)
別讓今天的錯誤成為明日的負擔
http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/
![Page 113: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/113.jpg)
實戰
![Page 114: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/114.jpg)
實戰
![Page 115: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/115.jpg)
始
![Page 116: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/116.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body> </body></html>
![Page 117: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/117.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection"> </head> <body> </body></html>
![Page 118: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/118.jpg)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body> <div class="container"> <div id="hd"></div> <div id="bd"></div> <div id="ft"></div> </div> </body></html>
![Page 119: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/119.jpg)
<body> <div class="container"> <div id="hd"> <h1>...</h1> <ul id="nav"> <li class="first">...</li> </ul> </div> <div id="bd"></div> <div id="ft"></div> </div> </body>
![Page 120: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/120.jpg)
驗證validation first :-)
![Page 121: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/121.jpg)
續
![Page 122: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/122.jpg)
reset csshttp://meyerweb.com/eric/tools/css/reset/
![Page 123: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/123.jpg)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}
/* remember to define focus styles! */:focus { outline: 0;}
/* remember to highlight inserts somehow! */ins { text-decoration: none;}del { text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */table { border-collapse: collapse; border-spacing: 0;}
![Page 124: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/124.jpg)
Font
![Page 125: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/125.jpg)
字型大小是問題http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html
![Page 126: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/126.jpg)
YUI Fonts.css/** * Percents could work for IE, but for backCompat purposes, we are using keywords. * x-small is for IE6/7 quirks mode. */body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}
![Page 127: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/127.jpg)
body { font-size: 62.5%; }
16 * 62.5% = 10
![Page 128: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/128.jpg)
Link
![Page 129: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/129.jpg)
LoVe, HAtea:link, a:visited, a:hover, a:active { text-decoration: none;}a:link {}a:visited {}a:visited:hover {}a:hover {}a:active {}
![Page 130: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/130.jpg)
LVFHA
![Page 131: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/131.jpg)
Image Replacementhttp://www.stopdesign.com/present/2004/sxsw/goodbad/?no=3
![Page 132: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/132.jpg)
Link Backgroundhttp://www.simplebits.com/notebook/2004/07/18/clickable.html
![Page 133: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/133.jpg)
CSS Rollovershttp://www.stopdesign.com/present/2004/sxsw/hifi/?no=12
![Page 134: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/134.jpg)
導覽列http://superfluousbanter.org/archives/2004/05/navigation-matrix/
![Page 135: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/135.jpg)
CSS Dropdown Menu
![Page 136: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/136.jpg)
Sliding Doorshttp://www.alistapart.com/articles/slidingdoors/
![Page 137: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/137.jpg)
Double Rolloverhttp://stopdesign.com/present/eg/ap/
![Page 138: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/138.jpg)
Image Maphttp://hlb.yichi.org/design/css/map/taiwan/
![Page 139: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/139.jpg)
誤
![Page 140: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/140.jpg)
標準
![Page 141: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/141.jpg)
標準不得已而用之
網頁不符合HTML規範hasLayout
IE 不祥之器
以彼之道還施彼身
Filter & Hacks
validator
![Page 142: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/142.jpg)
clearing float
![Page 143: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/143.jpg)
IE tricks
![Page 144: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/144.jpg)
Double Margindiv#box { float: right; margin-right: 20px;}
margin-right in IE 6 = 40px!
![Page 145: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/145.jpg)
min-heightselector { min-height:500px; height:auto !important; height:500px;}
![Page 146: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/146.jpg)
:hoveruse IE behavior
![Page 147: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/147.jpg)
PNGprogid:DXImageTransform.Microsoft.AlphaImageLoader
![Page 148: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/148.jpg)
IE7IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser.
http://code.google.com/p/ie7-js/
![Page 149: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/149.jpg)
hasLayout金手指☝
![Page 150: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/150.jpg)
hasLayoutzoom: 1;
height: 1%;
![Page 152: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/152.jpg)
CSS trick!
![Page 153: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/153.jpg)
![Page 154: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/154.jpg)
![Page 155: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/155.jpg)
謝謝ご清聴ありがとうございましたhttp://handlino.com/
![Page 156: Web Standards for NCTU CS](https://reader034.fdocuments.net/reader034/viewer/2022051411/54473bb6b1af9f1b098b45db/html5/thumbnails/156.jpg)
創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣
這份投影片的文字部分(含備忘稿)以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,請參考完整授權條款。「姓名標示」部分請標註「薛良斌 http://hlb.yichi.org」。