web standards design for awoo part 2
Post on 21-Oct-2014
6.015 views
DESCRIPTION
TRANSCRIPT
網頁標準設計 第二講
作業
就在投影片中
上課之後•Firefox•Firebug•Web Developer Extension•IE•Multiple IEs•DebugBar•IE Tester
<補>
引號<img src="..." border="0">
<img src='..." border=0>
✔
✘
編碼Big5 跟 UTF-8 到底是什麼鬼
Big5大五碼
Big5游錫（方方土)
Bug5許功蓋
UnicodeUTF-8, UTF-16, ...
編輯器工欲善其事，必先利其器
•Dreamweaver
•Notepad++•EditPlus•UltraEdit•Coda
</補>
實戰
實戰
始
<!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>
<!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> <meta name="description" content="......"> </head>
< 70 characters
驗證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!
這份投影片的文字部分（含備忘稿）以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權，請參考完整授權條款。「姓名標示」部分請標註「薛良斌 http://hlb.yichi.org」。
創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣