design with web standards PPT模板.pptx
《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。
- 溫馨提示:
1: 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
2: 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
3.本站RAR壓縮包中若帶圖紙,網(wǎng)頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
4. 未經(jīng)權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
5. 裝配圖網(wǎng)僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2023年六年級數(shù)學下冊6整理和復習2圖形與幾何第7課時圖形的位置練習課件新人教版
- 2023年六年級數(shù)學下冊6整理和復習2圖形與幾何第1課時圖形的認識與測量1平面圖形的認識練習課件新人教版
- 2023年六年級數(shù)學下冊6整理和復習1數(shù)與代數(shù)第10課時比和比例2作業(yè)課件新人教版
- 2023年六年級數(shù)學下冊4比例1比例的意義和基本性質第3課時解比例練習課件新人教版
- 2023年六年級數(shù)學下冊3圓柱與圓錐1圓柱第7課時圓柱的體積3作業(yè)課件新人教版
- 2023年六年級數(shù)學下冊3圓柱與圓錐1圓柱第1節(jié)圓柱的認識作業(yè)課件新人教版
- 2023年六年級數(shù)學下冊2百分數(shù)(二)第1節(jié)折扣和成數(shù)作業(yè)課件新人教版
- 2023年六年級數(shù)學下冊1負數(shù)第1課時負數(shù)的初步認識作業(yè)課件新人教版
- 2023年六年級數(shù)學上冊期末復習考前模擬期末模擬訓練二作業(yè)課件蘇教版
- 2023年六年級數(shù)學上冊期末豐收園作業(yè)課件蘇教版
- 2023年六年級數(shù)學上冊易錯清單十二課件新人教版
- 標準工時講義
- 2021年一年級語文上冊第六單元知識要點習題課件新人教版
- 2022春一年級語文下冊課文5識字測評習題課件新人教版
- 2023年六年級數(shù)學下冊6整理和復習4數(shù)學思考第1課時數(shù)學思考1練習課件新人教版