《香港网页设计大师的培训演讲稿（网页设计、网络运营工作者必看！） .ppt》由会员分享，可在线阅读，更多相关《香港网页设计大师的培训演讲稿（网页设计、网络运营工作者必看！） .ppt（156页珍藏版）》请在三一办公上搜索。
1、,淺談,網頁標準設計,Handlino,和多 和而不同，少就是多,HappyDesigner,HappyDesigner,WaSP ILG,HappyDesigner,WaSP ILG,Handlino,HappyDesignerWaSP ILG,RegistranoHandlino,淺談,網頁標準設計,web standards,What,族繁不及備載,Accessibility,CC/PP,Compound Document Formats,CSS,Databinding,DOM,Efcient XML Interchange,eGovernment,GRDDL,Health Care a
2、nd Life Sciences,HTML,HTTP,Incubator,InkML,Internationalization,MathML,Mobile Web Initiative,Multimodal Interaction,OWL,Patent Policy,PICS,PNG,POWDER,Privacy andP3P,RDF,Rich Web Clients,Rules,Security,SemanticWeb,SML,SMIL,SOAP/XMLP,SOAP-JMS,SPARQL,Style,SVG,TAG,Timed Text,URI/URL,Voice,UbiquitousWeb
3、 Applications,WAI,Web API,Web ApplicationFormats,Web Architecture,WebCGM,Web Services,WS-Addressing,WS-CDL,WSDL,WS-Policy,XForms,XHTML,XHTML2,XLink,XML,XML Base,XML,Encryption,XML Key Management,XML Query,XMLSchema,XML Signature,XPath,XPointer,XSL and XSLT,(X)HTML,CSS,ECMAScript,Why,規約,太初,呈現,HTML,資訊
4、,結構與呈現分離,結構HTML,呈現CSS,CSS,CSS,CSS,結構HTML,呈現CSS,行為DOM,尊重過去,backward compatibility,展望未來,forward compatibility,以上是理想,現實,W3C vs.vendors,各行其是,NetScapeStandards,JavaScript,IE,Standards,VBScript,JScript,瀏覽器版本太舊！請使用IE5以上參觀,囧rz,那時、天下人的口音言語、都是一樣。他們往東邊遷移的時候、在示拿地遇見一片平原、就住在那裏。他們彼此商量說、來吧、我們要作磚、把磚燒透了。他們就拿磚當石頭、又拿石漆
5、當灰泥。他們說、來吧、我們要建造一座城、和一座塔、塔頂通天、為要傳揚我們的名、免得我們分散在全地上。耶和華降臨要看看世人所建造的城和塔。耶和華說、看哪、他們成為一樣的人民、都是一樣的言語、如今既作起這事來、以後他們所要作的事、就沒有不成就的了。我們下去、在那裏變亂他們的口音、使他們的言語、彼此不通。於是耶和華使他們從那裏分散在全地上。他們就停工、不造那城了。因為耶和華在那裏變亂天下人的言語、使眾人分散在全地上、所以那城名叫巴別。,創世記11:1-9,所見即所得,WYSIWYG,所見即所得,WYSIWYG,所見天曉得,WYSIWGK,What You See Is What God Knows,
6、福音,時代改變,2002,所見還是天曉得,WYSISWGK,Powerful Weapon,表格排版,為什麼要用CSS,表格排版有什麼問題？,表格 排版,根本無關,有規則的資料,沒有選擇,table,table,or me?,Grids,table,cellpadding=0cellspacing=0border=0,缺點,冗長的HTML語法=size+,不必要的定位用圖片=request+語法沒有結構性=extend-更新維護不易=cost+,整形前,script,language=JavaScriptWrite5cTitle(id)Write5cBody(id),囧囧囧囧ahref=htt
7、p:/.onmouseover=returnss(),target=_blank,囧囧囧囧囧囧囧囧囧囧囧囧ahref=http:/.onmouseover=returnss(),target=_blank囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧ahref=http:/.,onmouseover=returnss()target=_blank囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧/,tr囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧,囧囧囧囧囧囧囧ahref=http:/.onmouseover=returnss(),整形後,囧囧囧囧,囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧
8、囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧,CSS vs.Table,至少減少15,35%,Not Designer Friendly,設計師？,科學家,CSS都十年了,為什麼編輯器還是這麼難用？,vs.,平面設計,網頁設計,平面設計,頁,Page,平面設計,網頁設計,頁 流,Page,Flow,平面設計,靜,一張恆久遠，,千古永流傳,平面設計,網頁設計,靜 動,一張恆久遠，千古永流傳,JavaScript,Flash,Silverlight,Java,.,平面設計,定,全開|菊八開|A4|B5,平面設計,網頁設計,定 變,全開|菊八開|A4|B
9、5,1920 x1024,1024x768,240 x320,128x128,.,128x128,160 x160,160 x240,240 x320,240 x160,320 x 240,720 x 4801280 x 7201440 x 9001920 x 1080,反,轉思考,休息一下,設計流程,使用符合標準的瀏覽器開發,符合標準,補強不符合標準的瀏覽器,向後相容,瀏覽器即開發工具,真正所見即所得,驗證程式碼,自助者，人助之,編碼,Big5 跟 UTF-8 到底是什麼鬼,BOM!,瀏覽器模式,standards mode,almost standards mode quirks mode
10、,Doctype Switch,我真的知道自己在做什麼！,Box Model,IE Box Model,標籤、屬性都小寫,標籤開始與結束,.,.,引號,使用正確的標籤,驗證程式碼,HTML Validator,Does it matter?,How can anyone possibly expect CSS orDOM-based Javascript to work reliablywith an invalid(X)HTML?,Tantek elik,技,tdfontfamily:新細明體,細明體;fontsize:9pt;color:#000000a:linkfontfamily:新細
11、明體,細明體;fontsize:9pt;color:#0000CC;a:visitedfontfamily:新細明體,細明體;fontsize:9pt;color:#0000CC;a:hoverfontfamily:新細明體,細明體;fontsize:9pt;color:#0000CC;a:activefontfamily:新細明體,細明體;fontsize:9pt;color:#0000CC.sfontfamily:新細明體,細明體;fontsize:8pt;color:#646464.vfontfamily:Verdana;fontsize:7pt;color:#000000.v2font
12、family:Verdana;fontsize:7pt;color:#0000CC.pointfontfamily:Arial;fontsize:9pt;color:#000000,.hfontfamily:新細明體,細明體;fontsize:9pt;color:#000000;lineheight:15pt,formfontfamily:新細明體,細明體;fontsize:9pt;color:#000000selectfontfamily:新細明體,細明體;fontsize:9pt;color:#000000inputfontfamily:新細明體,細明體;fontsize:9pt;colo
13、r:#000000.titfontfamily:新細明體,細明體,Verdana;fontsize:15pt.kindbackgroundrepeat:norepeat;,bodyfont:9pt“新細明體”,“細明體”;color:#000;a:link,a:visited,a:hover,a:activecolor:#00c;.sfontsize:8pt;color:#646464;,.vfontfamily:Verdana;fontsize:7pt;.v2fontfamily:Verdana;.pointfontfamily:Arial;.hlineheight:15pt;,select
14、,inputfont:9pt“新細明體”,“細明體”;color:#000;.titfontsize:15pt;,.kindbackgroundrepeat:norepeat;,編輯器,工欲善其事，必先利其器,Dreamweaver Notepad+EditPlus UltraEditCoda,輔助工具,Firefox,請記得選自訂安裝,Firebug,Web Developer,Toolbar,Multiple IEs,IE,WebDeveloper,http:/,CompanionJS,http:/www.my-,IETester,http:/www.my-,DebugBar,http:/
15、,樣式管理,共同討論,If you can Name it,you can think about,it.And if you can Name it,you cancontrol it.,命名,redtext,greenFrog,the_right_side_columnthis,命名,main,container,sidebar,wrapper,message,current,site-search,error-message,取消預設,reset.css,ConditionalComments,IE only,blahblah.,http:/,濫用DIV,unobtrusivecss,.
16、tabledisplay:table;.trdisplay:tablerow;.tddisplay:tablecell;.bluecolor:blue;,.boldfontweight:bold;,.verdanafontfamily:verdana;.handcursor:pointer;,MyFirstTablelessWebsite!,ToSeeMoreInformationonhowtomakeyourfirstwebsite.,spanclass=verdanabluehand,onclick=window.open(http:/);clickhere,http:/,疊床架屋,LSM
17、,Layered Semantic Markup,別讓今天的錯誤成為明日的負擔,http:/,實戰,實戰,始,meta http-equiv=Content-Type content=text/html;,charset=utf-8,meta http-equiv=Content-Type content=text/html;,charset=utf-8,link rel=stylesheet href=style.css type=text/css,media=screen,projection,meta http-equiv=Content-Type content=text/html;,
18、charset=utf-8,.,.,驗證,validation rst:-),續,reset css,http:/,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,
19、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
20、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
21、 for IE,butfor backCompat purposes,we areusing keywords.,*x-small is for IE6/7 quirks mode.*/,body font:13px/1.231,arial,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,HAte,a:link,a:visited,a:hover,a:active,t
22、ext-decoration:none;,a:link,a:visited,a:visited:hover a:hover a:active,LVFHA,Image Replacement,http:/,Link Background,http:/,CSS Rollovers,http:/,導覽列,http:/superuousbanter.org/archives/2004/05/navigation-matrix/,CSS Dropdown Menu,Sliding Doors,http:/,Double Rollover,http:/,Image Map,http:/hlb.yichi.
23、org/design/css/map/taiwan/,誤,標準,validator,以彼之道,還施彼身,不祥之器,標準,hasLayout網頁不符合HTML規範,IE,Filter&Hacks不得已而用之,clearing oat,IE tricks,Double Margin,div#box,float:right;,margin-right:20px;,margin-right in IE 6=40px!,min-height,selector,min-height:500px;,height:auto!important;height:500px;,:hover,use IE behav
24、ior,PNG,progid:DXImageTransform.Microsoft.AlphaImageLoader,IE7,IE7 is a JavaScript library to make Microsoft InternetExplorer behave like a standards-compliant browser.,http:/,hasLayout,金手指,hasLayout,zoom:1;,height:1%;,CSS Filter,CSS trick!,謝謝,清聴,http:/,創用 CC,姓名標示-非商業性-相同方式分享 2.5 台灣,這份投影片的文字部分（含備忘稿）以創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權，請參考完整授權條款。姓名標示部分請標註薛良斌 http:/hlb.yichi.org。,
