《design with web standards PPT模板.pptx》由會員分享，可在線閱讀，更多相關《design with web standards PPT模板.pptx（144頁珍藏版）》請在裝配圖網(wǎng)上搜索。

1、 hlb, 布丁 Handlino和多 和而不同，少就是多 HappyDesigner HappyDesigner WaSP ILG HappyDesigner WaSP ILG Handlino 網(wǎng)頁標準設計Design with web standards 網(wǎng)頁標準設計？ 網(wǎng)頁標準設計 妥善使用網(wǎng)頁標準設計網(wǎng)站 網(wǎng)頁標準web standards 標準 = 規(guī)約 族繁不及備載Accessibility, CC/PP, Compound Document Formats, CSS,Databinding, DOM, Efcient XML Interchange, eGovernment,G

2、RDDL, 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

3、, 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, XPa

4、th,XPointer, XSL and XSLT (X)HTML, CSS,ECMAScript 太初呈現(xiàn)HTML資訊 結構與呈現(xiàn)分離結構HTML呈現(xiàn)CSS CSSCSSCSS 結構HTML呈現(xiàn)CSS行為DOM 現(xiàn)實 W3C vs. vendors各行其是 NetScapeStandards, , JavaScript IEStandards, , VBScript, JScript 瀏覽器版本太舊！請使用IE5以上參觀囧rz 那時、天下人的口音言語、都是一樣。他們往東邊遷移的時候、在示拿地遇見一片平原、就住在那裏。他們彼此商量說、來吧、我們要作磚、把磚燒透了。他們就拿磚當石頭、又拿石漆當灰

5、泥。他們說、來吧、我們要建造一座城、和一座塔、塔頂通天、為要傳揚我們的名、免得我們分散在全地上。耶和華降臨要看看世人所建造的城和塔。耶和華說、看哪、他們成為一樣的人民、都是一樣的言語、如今既作起這事來、以後他們所要作的事、就沒有不成就的了。我們下去、在那裏變亂他們的口音、使他們的言語、彼此不通。於是耶和華使他們從那裏分散在全地上。他們就停工、不造那城了。因為耶和華在那裏變亂天下人的言語、使眾人分散在全地上、所以那城名叫巴別。 創(chuàng)世記11:1-9 所見即所得WYSIWYG 所見即所得WYSIWYG 所見天曉得WYSIWGKWhat You See Is What God Knows 福音 時代改

6、變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 我知道自己

7、在做什麼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

8、how tomake your first website.click here http:/ 疊床架屋 LSMLayered Semantic Markup 別讓今天的錯誤成為明日的負擔http:/ Powerful Weapon 表格排版 為什麼要用CSS表格排版有什麼問題？ 表格 排版根本無關 有規(guī)則的資料 沒有選擇table, table, or me? Grids 缺點 冗長的HTML語法 = size+ 不必要的定位用圖片 = request+ 語法沒有結構性 = extend- 更新維護不易 = cost+ 整形前Write5cTitle(id)Write5cBody(id)囧囧

9、囧囧囧囧囧囧 囧囧囧囧囧囧囧囧 囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧 a href=http:/. onmouseover=return ss() 整形後囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧 囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧 CSS vs. Table至少減少15 35% Not Designer Friendly 設計師？ 科學家 CSS都十年了為什麼編輯器還是這麼難用？ 設計網(wǎng)站 vs.平面設計網(wǎng)頁設

10、計 平面設計頁Page 平面設計網(wǎng)頁設計頁 流Page Flow 平面設計靜一張恆久遠，千古永流傳 平面設計網(wǎng)頁設計靜 動一張恆久遠，千古永流傳JavaScript, Flash,Silverlight, Java, . 平面設計定全開 | 菊八開 | A4 | B5 平面設計網(wǎng)頁設計定 變全開 | 菊八開 | 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 10

11、80 編輯器工欲善其事，必先利其器 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, blockq

12、uote, 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:

13、 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 i

14、nserts 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-smal

15、l 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:hove

16、r 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:

17、/ 導覽列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-heigh

18、t: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 效能調校optimiz

19、ation 源碼最佳化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:ac

20、tive 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:

21、新細明體, 細明體; 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 ba

22、ckground-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 新細明體, 細明體

23、; 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.f

24、n=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(

25、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)r

26、eturn 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:functi

27、on(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

28、,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!=

29、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(se

30、lector)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=selecto

31、r.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,on

32、e=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

33、.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:/ 創(chuàng)用 CC姓名標示-非商業(yè)性-相同方式分享 2.5 臺灣這份投影片的文字部分（含備忘稿）以創(chuàng)用 CC 姓名標示-非商業(yè)性-相同方式分享 2.5 臺灣授權條款授權，請參考完整授權條款。姓名標示部分請標註薛良斌 http:/hlb.yichi.org。