Exemple awoo en val de garonne marion oudenot piton commercialisation activités mopa 10 mars 2016
Web Standards Design for AWOO Part 2
-
date post
21-Oct-2014 -
Category
Technology
-
view
6.015 -
download
0
description
Transcript of Web Standards Design for AWOO Part 2
![Page 1: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/1.jpg)
網頁標準設計 第二講
![Page 3: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/3.jpg)
作業
![Page 4: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/4.jpg)
就在投影片中
![Page 5: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/5.jpg)
上課之後•Firefox•Firebug•Web Developer Extension•IE•Multiple IEs•DebugBar•IE Tester
![Page 6: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/6.jpg)
![Page 7: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/7.jpg)
![Page 8: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/8.jpg)
<補>
![Page 9: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/9.jpg)
引號<img src="..." border="0">
<img src='..." border=0>
✔
✘
![Page 10: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/10.jpg)
編碼Big5 跟 UTF-8 到底是什麼鬼
![Page 11: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/11.jpg)
Big5大五碼
![Page 12: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/12.jpg)
Big5游錫(方方土)
![Page 13: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/13.jpg)
Bug5許功蓋
![Page 14: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/14.jpg)
UnicodeUTF-8, UTF-16, ...
![Page 15: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/15.jpg)
編輯器工欲善其事,必先利其器
![Page 16: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/16.jpg)
•Dreamweaver
•Notepad++•EditPlus•UltraEdit•Coda
![Page 17: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/17.jpg)
![Page 18: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/18.jpg)
![Page 19: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/19.jpg)
</補>
![Page 20: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/20.jpg)
實戰
![Page 21: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/21.jpg)
實戰
![Page 22: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/22.jpg)
始
![Page 23: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/23.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 24: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/24.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 25: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/25.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 26: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/26.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 27: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/27.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> <meta name="description" content="......"> </head>
< 70 characters
![Page 28: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/28.jpg)
驗證validation first :-)
![Page 29: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/29.jpg)
續
![Page 30: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/30.jpg)
reset csshttp://meyerweb.com/eric/tools/css/reset/
![Page 31: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/31.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 32: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/32.jpg)
Font
![Page 33: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/33.jpg)
字型大小是問題http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html
![Page 34: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/34.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 35: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/35.jpg)
body { font-size: 62.5%; }
16 * 62.5% = 10
![Page 36: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/36.jpg)
Link
![Page 37: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/37.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 38: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/38.jpg)
LVFHA
![Page 39: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/39.jpg)
Image Replacementhttp://www.stopdesign.com/present/2004/sxsw/goodbad/?no=3
![Page 40: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/40.jpg)
Link Backgroundhttp://www.simplebits.com/notebook/2004/07/18/clickable.html
![Page 41: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/41.jpg)
CSS Rollovershttp://www.stopdesign.com/present/2004/sxsw/hifi/?no=12
![Page 42: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/42.jpg)
導覽列http://superfluousbanter.org/archives/2004/05/navigation-matrix/
![Page 43: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/43.jpg)
CSS Dropdown Menu
![Page 44: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/44.jpg)
Sliding Doorshttp://www.alistapart.com/articles/slidingdoors/
![Page 45: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/45.jpg)
Double Rolloverhttp://stopdesign.com/present/eg/ap/
![Page 46: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/46.jpg)
Image Maphttp://hlb.yichi.org/design/css/map/taiwan/
![Page 47: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/47.jpg)
誤
![Page 48: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/48.jpg)
標準
![Page 49: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/49.jpg)
標準不得已而用之
網頁不符合HTML規範hasLayout
IE 不祥之器
以彼之道還施彼身
Filter & Hacks
validator
![Page 50: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/50.jpg)
clearing float
![Page 51: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/51.jpg)
IE tricks
![Page 52: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/52.jpg)
Double Margindiv#box { float: right; margin-right: 20px;}
margin-right in IE 6 = 40px!
![Page 53: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/53.jpg)
min-heightselector { min-height:500px; height:auto !important; height:500px;}
![Page 54: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/54.jpg)
:hoveruse IE behavior
![Page 55: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/55.jpg)
PNGprogid:DXImageTransform.Microsoft.AlphaImageLoader
![Page 56: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/56.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 57: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/57.jpg)
hasLayout金手指☝
![Page 58: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/58.jpg)
hasLayoutzoom: 1;
height: 1%;
![Page 60: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/60.jpg)
CSS trick!
![Page 61: Web Standards Design for AWOO Part 2](https://reader034.fdocuments.net/reader034/viewer/2022051608/54473b05afaf9f61178b495a/html5/thumbnails/61.jpg)
這份投影片的文字部分(含備忘稿)以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權,請參考完整授權條款。「姓名標示」部分請標註「薛良斌 http://hlb.yichi.org」。
創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣