香港网页设计大师的培训演讲稿(网页设计、网络运营工作者必看!) .ppt

上传人:laozhun 文档编号:2831401 上传时间:2023-02-26 格式:PPT 页数:156 大小:7MB
返回 下载 相关 举报
香港网页设计大师的培训演讲稿(网页设计、网络运营工作者必看!) .ppt_第1页
第1页 / 共156页
香港网页设计大师的培训演讲稿(网页设计、网络运营工作者必看!) .ppt_第2页
第2页 / 共156页
香港网页设计大师的培训演讲稿(网页设计、网络运营工作者必看!) .ppt_第3页
第3页 / 共156页
香港网页设计大师的培训演讲稿(网页设计、网络运营工作者必看!) .ppt_第4页
第4页 / 共156页
香港网页设计大师的培训演讲稿(网页设计、网络运营工作者必看!) .ppt_第5页
第5页 / 共156页
点击查看更多>>
资源描述

《香港网页设计大师的培训演讲稿(网页设计、网络运营工作者必看!) .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。,

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 建筑/施工/环境 > 项目建议


备案号:宁ICP备20000045号-2

经营许可证:宁B2-20210002

宁公网安备 64010402000987号