Post on 22-Oct-2014
description
淺談 網頁標準設計
<me>
Handlino和多 — 和而不同，少就是多
HappyDesigner
Registrano
HappyDesigner
WaSP ILG
Registrano
HappyDesigner
WaSP ILG
Registrano
Handlino
HappyDesigner Registrano
WaSP ILG
Registrano
Handlino
</me>
淺談 網頁標準設計
<網頁標準>web standards
What
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
族繁不及備載
(X)HTML, CSS, ECMAScript
Why
規約
呈現HTML
資訊
太初
結構HTML
呈現CSS
結構與呈現分離
CSS
CSS
CSS
行為DOM
結構HTML
呈現CSS
尊重過去backward compatibility
展望未來forward compatibility
以上是理想
現實
W3C vs. vendors各行其是
NetScape Standards
<layer>, <blink>, JavaScript
IEStandards
<marquee>, <bgsound>, VBScript, JScript
瀏覽器版本太舊！請使用IE5以上參觀
囧rz
那時、天下人的口音言語、都是一樣。他們往東邊遷移的時候、在示拿地遇見一片平原、就住在那裏。他們彼此商量說、來吧、我們要作磚、把磚燒透了。他們就拿磚當石頭、又拿石漆當灰泥。他們說、來吧、我們要建造一座城、和一座塔、塔頂通天、為要傳揚我們的名、免得我們分散在全地上。耶和華降臨要看看世人所建造的城和塔。耶和華說、看哪、他們成為一樣的人民、都是一樣的言語、如今既作起這事來、以後他們所要作的事、就沒有不成就的了。我們下去、在那裏變亂他們的口音、使他們的言語、彼此不通。於是耶和華使他們從那裏分散在全地上。他們就停工、不造那城了。因為耶和華在那裏變亂天下人的言語、使眾人分散在全地上、所以那城名叫巴別。
– 創世記11:1-9
所見即所得WYSIWYG
所見即所得WYSIWYG
所見天曉得WYSIWGK
What You See Is What God Knows
福音
時代改變2002 ~
所見還是天曉得WYSISWGK
</網頁標準>
<CSS>
☢Powerful Weapon
表格排版
為什麼要用CSS表格排版有什麼問題？
表格 排版根本無關
<table>有規則的資料
沒有選擇table, table, or me?
<table cellpadding="0" cellspacing="0" border="0">
Grids
缺點•冗長的HTML語法 = size++
•不必要的定位用圖片 = request++•語法沒有結構性 = extend--•更新維護不易 = cost++
<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>
整形前
<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>
整形後
CSS vs. Table至少減少15 ~ 35%
☹Not Designer Friendly
設計師？
科學家
CSS都十年了為什麼編輯器還是這麼難用？
</CSS>
平面設計 vs. 網頁設計
平面設計
頁Page
平面設計
頁Page
網頁設計
流Flow
平面設計
靜一張恆久遠，千古永流傳
平面設計
靜一張恆久遠，千古永流傳
網頁設計
動JavaScript, Flash, Silverlight, Java, ...
平面設計
定全開 | 菊八開 | A4 | B5
平面設計
定全開 | 菊八開 | A4 | B5
網頁設計
變1920x1024, 1024x768, 240x320, 128x128, ...
1920 x 1080
1440 x 900
1280 x 720
720 x 480
320 x 240160
x240
240x
320
240x
160
160x
160
128x
128
轉思考反
休息一下
設計流程•使用符合標準的瀏覽器開發符合標準
•補強不符合標準的瀏覽器向後相容
•瀏覽器即開發工具真正所見即所得
•驗證程式碼自助者，人助之
編碼Big5 跟 UTF-8 到底是什麼鬼
BOM!
瀏覽器模式
• standards mode
• almost standards mode
• quirks mode
Doctype Switch我真的知道自己在做什麼！
Box Model
IE Box Model
標籤、屬性都小寫<a href="..." onclick="">
<a href="..." onClick="">
✔
✘
標籤開始與結束<p>......</p><p>......</p>
<p>......<p>......
✔
✘
引號<img src="..." border="0">
<img src='..." border=0>
✔
✘
使用正確的標籤<blockquote>, <b>, <em>, <strong>, <hN>
驗證程式碼HTML Validator
Does it matter?
“How can anyone possibly expect CSS or DOM-based Javascript to work reliably with an invalid (X)HTML?”
Tantek Çelik
技
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;}
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;}
編輯器工欲善其事，必先利其器
•Dreamweaver
•Notepad++•EditPlus•UltraEdit•Coda
輔助工具
Firefox請記得選「自訂安裝」
Firebug
Web Developer Toolbar
Multiple IEs
IE WebDeveloper
http://www.ieinspector.com/
CompanionJShttp://www.my-debugbar.com/wiki/
IETesterhttp://www.my-debugbar.com/wiki/
樣式管理
共同討論
“If you can Name it, you can think about it. And if you can Name it, you can control it.”
命名
•redtext•greenFrog•the_right_side_column
•this
命名
•main, container, sidebar, wrapper, message, current
•site-search, error-message
取消預設reset.css
Conditional Comments
IE only
<!‐‐[if expression]>blah blah...<![endif]‐‐>
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
濫用DIV
<!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/
疊床架屋
LSMLayered Semantic Markup
別讓今天的錯誤成為明日的負擔
http://www.schillmania.com/content/entries/2006/04/more-rounded-corners/
實戰
實戰
始
<!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>
<!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>
<!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>
<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>
驗證validation first :-)
續
reset csshttp://meyerweb.com/eric/tools/css/reset/
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;}
Font
字型大小是問題http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html
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%;}
body { font-size: 62.5%; }
16 * 62.5% = 10
Link
LoVe, HAtea:link, a:visited, a:hover, a:active { text-decoration: none;}a:link {}a:visited {}a:visited:hover {}a:hover {}a:active {}
LVFHA
Image Replacementhttp://www.stopdesign.com/present/2004/sxsw/goodbad/?no=3
Link Backgroundhttp://www.simplebits.com/notebook/2004/07/18/clickable.html
CSS Rollovershttp://www.stopdesign.com/present/2004/sxsw/hifi/?no=12
導覽列http://superfluousbanter.org/archives/2004/05/navigation-matrix/
CSS Dropdown Menu
Sliding Doorshttp://www.alistapart.com/articles/slidingdoors/
Double Rolloverhttp://stopdesign.com/present/eg/ap/
Image Maphttp://hlb.yichi.org/design/css/map/taiwan/
誤
標準
標準不得已而用之
網頁不符合HTML規範hasLayout
IE 不祥之器
以彼之道還施彼身
Filter & Hacks
validator
clearing float
IE tricks
Double Margindiv#box { float: right; margin-right: 20px;}
margin-right in IE 6 = 40px!
min-heightselector { min-height:500px; height:auto !important; height:500px;}
:hoveruse IE behavior
PNGprogid:DXImageTransform.Microsoft.AlphaImageLoader
IE7IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser.
http://code.google.com/p/ie7-js/
hasLayout金手指☝
hasLayoutzoom: 1;
height: 1%;
CSS trick!
謝謝ご清聴ありがとうございましたhttp://handlino.com/
hlb@handlino.com
創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣
這份投影片的文字部分（含備忘稿）以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權，請參考完整授權條款。「姓名標示」部分請標註「薛良斌 http://hlb.yichi.org」。