design with web standards PPT模板.pptx

hlb, 布丁 Handlino和多 和而不同，少就是多 HappyDesigner HappyDesigner WaSP ILG HappyDesigner WaSP ILG Handlino 網(wǎng)頁標(biāo)準(zhǔn)設(shè)計Design with web standards 網(wǎng)頁標(biāo)準(zhǔn)設(shè)計？ 網(wǎng)頁標(biāo)準(zhǔn)設(shè)計 妥善使用網(wǎng)頁標(biāo)準(zhǔn)設(shè)計網(wǎng)站 網(wǎng)頁標(biāo)準(zhǔn)web standards 標(biāo)準(zhǔn) = 規(guī)約 族繁不及備載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 太初呈現(xiàn)HTML資訊 結(jié)構(gòu)與呈現(xiàn)分離結(jié)構(gòu)HTML呈現(xiàn)CSS CSSCSSCSS 結(jié)構(gòu)HTML呈現(xiàn)CSS行為DOM 現(xiàn)實 W3C vs. vendors各行其是 NetScapeStandards, , JavaScript IEStandards, , VBScript, JScript 瀏覽器版本太舊！請使用IE5以上參觀囧rz 那時、天下人的口音言語、都是一樣。他們往東邊遷移的時候、在示拿地遇見一片平原、就住在那裏。他們彼此商量說、來吧、我們要作磚、把磚燒透了。他們就拿磚當(dāng)石頭、又拿石漆當(dāng)灰泥。他們說、來吧、我們要建造一座城、和一座塔、塔頂通天、為要傳揚我們的名、免得我們分散在全地上。耶和華降臨要看看世人所建造的城和塔。耶和華說、看哪、他們成為一樣的人民、都是一樣的言語、如今既作起這事來、以後他們所要作的事、就沒有不成就的了。我們下去、在那裏變亂他們的口音、使他們的言語、彼此不通。於是耶和華使他們從那裏分散在全地上。他們就停工、不造那城了。因為耶和華在那裏變亂天下人的言語、使眾人分散在全地上、所以那城名叫巴別。 創(chuàng)世記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 標(biāo)籤、屬性都小寫 標(biāo)籤開始與結(jié)束 . . . . . . . . . . . . . . . . . . . . . . . . 引號 使用正確的標(biāo)籤, , , , 瀏覽器模式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 別讓今天的錯誤成為明日的負(fù)擔(dān)http:/ Powerful Weapon 表格排版 為什麼要用CSS表格排版有什麼問題？ 表格 排版根本無關(guān) 有規(guī)則的資料 沒有選擇table, table, or me? Grids 缺點 冗長的HTML語法 = size+ 不必要的定位用圖片 = request+ 語法沒有結(jié)構(gòu)性 = extend- 更新維護(hù)不易 = cost+ 整形前Write5cTitle(id)Write5cBody(id)囧囧囧囧囧囧囧囧 囧囧囧囧囧囧囧囧 囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧 a href=http:/. onmouseover=return ss() 整形後囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧 囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧 CSS vs. Table至少減少15 35% Not Designer Friendly 設(shè)計師？ 科學(xué)家 CSS都十年了為什麼編輯器還是這麼難用？ 設(shè)計網(wǎng)站 vs.平面設(shè)計網(wǎng)頁設(shè)計 平面設(shè)計頁Page 平面設(shè)計網(wǎng)頁設(shè)計頁 流Page Flow 平面設(shè)計靜一張恆久遠(yuǎn)，千古永流傳 平面設(shè)計網(wǎng)頁設(shè)計靜 動一張恆久遠(yuǎn)，千古永流傳JavaScript, Flash,Silverlight, Java, . 平面設(shè)計定全開 | 菊八開 | A4 | B5 平面設(shè)計網(wǎng)頁設(shè)計定 變?nèi)_ | 菊八開 | 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 取消預(yù)設(shè)reset.css ConditionalCommentsIE only blahblah.http:/ CSS Tricks clearing oat Image Replacementhttp:/ Link Backgroundhttp:/ CSS Rollovershttp:/ 導(dǎo)覽列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 效能調(diào)校optimization 源碼最佳化code optimization 整理樣式CSS Combination td font-family: 新細(xì)明體, 細(xì)明體; font-size: 9pt; color: #000000a:link font-family: 新細(xì)明體, 細(xì)明體; font-size: 9pt; color: #0000CC;a:visited font-family: 新細(xì)明體, 細(xì)明體; font-size: 9pt; color: #0000CC;a:hover font-family: 新細(xì)明體, 細(xì)明體; font-size: 9pt; color: #0000CC;a:active font-family: 新細(xì)明體, 細(xì)明體; font-size: 9pt; color: #0000CC.s font-family: 新細(xì)明體, 細(xì)明體; 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: 新細(xì)明體, 細(xì)明體; font-size: 9pt; color: #000000;line-height:15ptform font-family: 新細(xì)明體, 細(xì)明體; font-size: 9pt; color: #000000select font-family: 新細(xì)明體, 細(xì)明體; font-size: 9pt; color: #000000 input font-family: 新細(xì)明體, 細(xì)明體; font-size: 9pt; color: #000000.tit font-family: 新細(xì)明體, 細(xì)明體, Verdana; font-size: 15pt.kind background-repeat: no-repeat; body font: 9pt 新細(xì)明體, 細(xì)明體; 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 新細(xì)明體, 細(xì)明體; 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結(jié)合cat a.js b.js c.js app.js 圖片最佳化Image Optimization http:/smush.it Asset Host24 connections per hostnamehttp:/ 漸進(jìn)強(qiáng)化Progressive Enhancement 精益求精 http:/ 謝謝清聴http:/ 創(chuàng)用 CC姓名標(biāo)示-非商業(yè)性-相同方式分享 2.5 臺灣這份投影片的文字部分（含備忘稿）以創(chuàng)用 CC 姓名標(biāo)示-非商業(yè)性-相同方式分享 2.5 臺灣授權(quán)條款授權(quán)，請參考完整授權(quán)條款。姓名標(biāo)示部分請標(biāo)註薛良斌 http:/hlb.yichi.org。