design with web standards PPT模板.pptx

上傳人:san****019 文檔編號(hào):20886812 上傳時(shí)間:2021-04-20 格式:PPTX 頁(yè)數(shù):144 大?。?.14MB
收藏 版權(quán)申訴 舉報(bào) 下載
design with web standards PPT模板.pptx_第1頁(yè)
第1頁(yè) / 共144頁(yè)
design with web standards PPT模板.pptx_第2頁(yè)
第2頁(yè) / 共144頁(yè)
design with web standards PPT模板.pptx_第3頁(yè)
第3頁(yè) / 共144頁(yè)

下載文檔到電腦,查找使用更方便

14.9 積分

下載資源

還剩頁(yè)未讀,繼續(xù)閱讀

資源描述:

《design with web standards PPT模板.pptx》由會(huì)員分享,可在線閱讀,更多相關(guān)《design with web standards PPT模板.pptx(144頁(yè)珍藏版)》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、 hlb, 布丁 Handlino和多 和而不同,少就是多 HappyDesigner HappyDesigner WaSP ILG HappyDesigner WaSP ILG Handlino 網(wǎng)頁(yè)標(biāo)準(zhǔn)設(shè)計(jì)Design with web standards 網(wǎng)頁(yè)標(biāo)準(zhǔn)設(shè)計(jì)? 網(wǎng)頁(yè)標(biāo)準(zhǔn)設(shè)計(jì) 妥善使用網(wǎng)頁(yè)標(biāo)準(zhǔn)設(shè)計(jì)網(wǎng)站 網(wǎng)頁(yè)標(biāo)準(zhǔn)web standards 標(biāo)準(zhǔn) = 規(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資訊 結(jié)構(gòu)與呈現(xiàn)分離結(jié)構(gòu)HTML呈現(xiàn)CSS CSSCSSCSS 結(jié)構(gòu)HTML呈現(xiàn)CSS行為DOM 現(xiàn)實(shí) W3C vs. vendors各行其是 NetScapeStandards, , JavaScript IEStandards, , VBScript, JScript 瀏覽器版本太舊!請(qǐng)使用IE5以上參觀囧rz 那時(shí)、天下人的口音言語(yǔ)、都是一樣。他們往東邊遷移的時(shí)候、在示拿地遇見(jiàn)一片平原、就住在那裏。他們彼此商量說(shuō)、來(lái)吧、我們要作磚、把磚燒透了。他們就拿磚當(dāng)石頭、又拿石漆當(dāng)灰

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

6、變2002 所見(jiàn)還是天曉得WYSISWGK 妥善使用 驗(yàn)證程式碼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é)束 . . . . . . . . . . . . . . . . . . . . . . . . 引號(hào) 使用正確的標(biāo)籤, , , , 瀏覽器模式standard / quirks mode Box Model IE Box Model 我知道自己

7、在做什麼Doctype Switch KKBOX 百萬(wàn)音樂(lè) 無(wú)限下載 編碼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 別讓今天的錯(cuò)誤成為明日的負(fù)擔(dān)http:/ Powerful Weapon 表格排版 為什麼要用CSS表格排版有什麼問(wèn)題? 表格 排版根本無(wú)關(guān) 有規(guī)則的資料 沒(méi)有選擇table, table, or me? Grids 缺點(diǎn) 冗長(zhǎng)的HTML語(yǔ)法 = size+ 不必要的定位用圖片 = request+ 語(yǔ)法沒(méi)有結(jié)構(gòu)性 = extend- 更新維護(hù)不易 = cost+ 整形前Write5cTitle(id)Write5cBody(id)囧囧

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

10、計(jì) 平面設(shè)計(jì)頁(yè)P(yáng)age 平面設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)頁(yè) 流Page Flow 平面設(shè)計(jì)靜一張恆久遠(yuǎn),千古永流傳 平面設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)靜 動(dòng)一張恆久遠(yuǎn),千古永流傳JavaScript, Flash,Silverlight, Java, . 平面設(shè)計(jì)定全開 | 菊八開 | A4 | B5 平面設(shè)計(jì)網(wǎng)頁(yè)設(shè)計(jì)定 變?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 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 字型大小是問(wèn)題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 取消預(yù)設(shè)reset.css ConditionalCommentsIE only blahblah.http:/ CSS Tricks clearing oat Image Replacementhttp:/ Link Backgroundhttp:/ CSS Rollovershttp:

17、/ 導(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-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 效能調(diào)校optimiz

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

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

21、新細(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 ba

22、ckground-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ì)明體

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

展開閱讀全文
溫馨提示:
1: 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2: 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3.本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 裝配圖網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

相關(guān)資源

更多
正為您匹配相似的精品文檔
關(guān)于我們 - 網(wǎng)站聲明 - 網(wǎng)站地圖 - 資源地圖 - 友情鏈接 - 網(wǎng)站客服 - 聯(lián)系我們

copyright@ 2023-2025  zhuangpeitu.com 裝配圖網(wǎng)版權(quán)所有   聯(lián)系電話:18123376007

備案號(hào):ICP2024067431號(hào)-1 川公網(wǎng)安備51140202000466號(hào)


本站為文檔C2C交易模式,即用戶上傳的文檔直接被用戶下載,本站只是中間服務(wù)平臺(tái),本站所有文檔下載所得的收益歸上傳人(含作者)所有。裝配圖網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)上載內(nèi)容本身不做任何修改或編輯。若文檔所含內(nèi)容侵犯了您的版權(quán)或隱私,請(qǐng)立即通知裝配圖網(wǎng),我們立即給予刪除!