design with web standards PPT模板.pptx

hlb, 布丁 Handlino和多 和而不同，少就是多 HappyDesigner HappyDesigner WaSP ILG HappyDesigner WaSP ILG Handlino 網頁標準設計Design with web standards 網頁標準設計？ 網頁標準設計 妥善使用網頁標準設計網站 網頁標準web standards 標準 = 規約 族繁不及備載Accessibility, CC/PP, Compound Document Formats, CSS,Databinding, DOM, Efcient 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, SemanticWeb, SML, SMIL, SOAP/XMLP, SOAP-JMS, SPARQL, Style, SVG, TAG,Timed Text, URI/URL, Voice, Ubiquitous Web Applications, WAI, WebAPI, Web Application Formats, Web Architecture, WebCGM, WebServices, WS-Addressing, WS-CDL, WSDL, WS-Policy, XForms,XHTML, XHTML2, XLink, XML, XML Base, XML Encryption, XML KeyManagement, XML Query, XML Schema, XML Signature, XPath,XPointer, XSL and XSLT (X)HTML, CSS,ECMAScript 太初呈現HTML資訊 結構與呈現分離結構HTML呈現CSS CSSCSSCSS 結構HTML呈現CSS行為DOM 現實 W3C vs. vendors各行其是 NetScapeStandards, , JavaScript IEStandards, , VBScript, JScript 瀏覽器版本太舊！請使用IE5以上參觀囧rz 那時、天下人的口音言語、都是一樣。他們往東邊遷移的時候、在示拿地遇見一片平原、就住在那裏。他們彼此商量說、來吧、我們要作磚、把磚燒透了。他們就拿磚當石頭、又拿石漆當灰泥。他們說、來吧、我們要建造一座城、和一座塔、塔頂通天、為要傳揚我們的名、免得我們分散在全地上。耶和華降臨要看看世人所建造的城和塔。耶和華說、看哪、他們成為一樣的人民、都是一樣的言語、如今既作起這事來、以後他們所要作的事、就沒有不成就的了。我們下去、在那裏變亂他們的口音、使他們的言語、彼此不通。於是耶和華使他們從那裏分散在全地上。他們就停工、不造那城了。因為耶和華在那裏變亂天下人的言語、使眾人分散在全地上、所以那城名叫巴別。 創世記11:1-9 所見即所得WYSIWYG 所見即所得WYSIWYG 所見天曉得WYSIWGKWhat You See Is What God Knows 福音 時代改變2002 所見還是天曉得WYSISWGK 妥善使用 驗證程式碼HTML Validator “How can anyone possibly expect CSS or DOM-basedJavascript to work reliably with an invalid (X)HTML?” Tantek elik 標籤、屬性都小寫 標籤開始與結束 . . . . . . . . . . . . . . . . . . . . . . . . 引號 使用正確的標籤, , , , 瀏覽器模式standard / quirks mode Box Model IE Box Model 我知道自己在做什麼Doctype Switch KKBOX 百萬音樂 無限下載 編碼Big5 跟 UTF-8 到底是什麼鬼 BOM! 濫用DIV unobtrusive 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; My First Tableless Website!To See More Information on how tomake your first website.click here http:/ 疊床架屋 LSMLayered Semantic Markup 別讓今天的錯誤成為明日的負擔http:/ Powerful Weapon 表格排版 為什麼要用CSS表格排版有什麼問題？ 表格 排版根本無關 有規則的資料 沒有選擇table, table, or me? Grids 缺點 冗長的HTML語法 = size+ 不必要的定位用圖片 = request+ 語法沒有結構性 = extend- 更新維護不易 = cost+ 整形前Write5cTitle(id)Write5cBody(id)囧囧囧囧囧囧囧囧 囧囧囧囧囧囧囧囧 囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧 a href=http:/. onmouseover=return ss() 整形後囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧 囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧 CSS vs. Table至少減少15 35% Not Designer Friendly 設計師？ 科學家 CSS都十年了為什麼編輯器還是這麼難用？ 設計網站 vs.平面設計網頁設計 平面設計頁Page 平面設計網頁設計頁 流Page Flow 平面設計靜一張恆久遠，千古永流傳 平面設計網頁設計靜 動一張恆久遠，千古永流傳JavaScript, Flash,Silverlight, Java, . 平面設計定全開 | 菊八開 | A4 | B5 平面設計網頁設計定 變全開 | 菊八開 | A4 | B5 1920 x1024, 1024x768,240 x320, 128x128, . 128x128 160 x160 160 x240 240 x320 240 x160 320 x 240720 x 480 1280 x 7201440 x 900 1920 x 1080 編輯器工欲善其事，必先利其器 Dreamweaver Notepad+ EditPlus UltraEditCoda 輔助工具 Firefox Multiple IEs IEWebDeveloperhttp:/ CompanionJShttp:/www.my- IETesterhttp:/www.my- DebugBarhttp:/ 排版方式 Liquid(Fluid) Elastic Fixed reset csshttp:/ 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:/ YUI Fonts.css/* Percents could work for IE, butfor backCompat purposes, we areusing keywords.* x-small is for IE6/7 quirks mode.*/body font:13px/1.231arial,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 樣式管理 共同討論 命名 redtext greenFrog the_right_side_columnthis 命名 main, container, sidebar,wrapper, message, current site-search, error-message 取消預設reset.css ConditionalCommentsIE only blahblah.http:/ CSS Tricks clearing oat Image Replacementhttp:/ Link Backgroundhttp:/ CSS Rollovershttp:/ 導覽列http:/superuousbanter.org/archives/2004/05/navigation-matrix/ CSS Dropdown Menu Sliding Doorshttp:/ Double Rolloverhttp:/ Image Maphttp:/hlb.yichi.org/design/css/map/taiwan/ 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 InternetExplorer behave like a standards-compliant browser.http:/ hasLayout金手指 hasLayoutzoom: 1;height: 1%; CSS Filter 效能調校optimization 源碼最佳化code optimization 整理樣式CSS Combination td font-family: 新細明體, 細明體; font-size: 9pt; color: #000000a: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:15ptform font-family: 新細明體, 細明體; font-size: 9pt; color: #000000select 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; JS壓縮jsmin (function()var _jQuery=window.jQuery,_$=window.$;var jQuery=window.jQuery=window.$=function(selector,context)return newjQuery.fn.init(selector,context);var quickExpr=/*()*$|#(w+)$/,isSimple=/.:#.*$/,undefined;jQuery.fn=jQuery.prototype=init:function(selector,context)selector=selector|document;if(selector.nodeType)this0=selector;this.length=1;return this;if(typeof selector=string)var match=quickExpr.exec(selector);if(matchelsevar elem=document.getElementById(match3);if(elem)if(elem.id!=match3)returnjQuery().find(selector);return jQuery(elem);selector=;elsereturn jQuery(context).find(selector);else if(jQuery.isFunction(selector)return jQuery(document)jQuery.fn.ready?ready:load(selector);returnthis.setArray(jQuery.makeArray(selector);,jquery:1.2.6,size:function()return this.length;,length:0,get:function(num)return num=undefined?jQuery.makeArray(this):thisnum;,pushStack:function(elems)var ret=jQuery(elems);ret.prevObject=this;return ret;,setArray:function(elems)this.length=0;Array.prototype.push.apply(this,elems);return this;,each:function(callback,args)returnjQuery.each(this,callback,args);,index:function(elem)var ret=-1;return jQuery.inArray(elem,attr:function(name,value,type)var options=name;if(name.constructor=String)if(value=undefined)returnthis0elseoptions=;optionsname=value;return this.each(function(i)for(name in options)jQuery.attr(type?this.style:this,name,jQuery.prop(this,optionsname,type,i,name););,css:function(key,value)if(key=width| key=height),clone:function(events)var ret=this.map(function()if(jQuery.browser.msiecontainer.appendChild(clone);returnjQuery.clean(container.innerHTML)0;else return this.cloneNode(true););var clone=ret.find(*).andSelf().each(function()if(thisexpando!=undefined)thisexpando=null;);if(events=true)this.find(*).andSelf().each(function(i)if(this.nodeType=3)return;varevents=jQuery.data(this,events);for(var type in events)for(var handler in eventstype)jQuery.event.add(clonei,type,eventstypehandler,eventstypehandler.data););return ret;,filter:function(selector)returnthis.pushStack(jQuery.isFunction(selector)|jQuery.multiFilter(selector,this);,not:function(selector)if(selector.constructor=String)if(isSimple.test(selector)returnthis.pushStack(jQuery.multiFilter(selector,this,true);elseselector=jQuery.multiFilter(selector,this);var isArrayLike=selector.lengthreturnthis.filter(function()return isArrayLike?jQuery.inArray(this,selector)0;,hasClass:function(selector)return this.is(.+selector);,val:function(value)if(value=undefined)if(this.length)var elem=this0;if(jQuery.nodeName(elem,select)varindex=elem.selectedIndex,values=,options=elem.options,one=elem.type=select-one;if(index0)return null;for(var i=one?index:0,max=one?index+1:options.length;i=0|jQuery.inArray(this.name,value)=0);else if(jQuery.nodeName(this,select)var values=jQuery.makeArray(value);jQuery(option,this).each(function()this.selected=(jQuery.inArray(this.value,values)=0|jQuery.inArray(this.text,values)=0););if(!values.length)this.selectedIndex=-1;elsethis.value=value;);,html:function(value)return value=undefined?(this0?this0.innerHTML:null):this.empty().append(value);,replaceWith:function(value)return this.after(value).remove();,eq:function(i)return this.slice(i,i JS結合cat a.js b.js c.js app.js 圖片最佳化Image Optimization http:/smush.it Asset Host24 connections per hostnamehttp:/ 漸進強化Progressive Enhancement 精益求精 http:/ 謝謝清聴http:/ 創用 CC姓名標示-非商業性-相同方式分享 2.5 台灣這份投影片的文字部分（含備忘稿）以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權，請參考完整授權條款。姓名標示部分請標註薛良斌 http:/hlb.yichi.org。