Design Design Web2

Slide 1: Design Design Web 2.0 Nariopon Thungtreerat : WoNe’ co.,ltd : 01/11/2007

Slide 2: Design Design Web 2.0 • Tableless Layout Design • ลักษณะการออกแบบเดนๆของ Web 2.0

Slide 3: Tableless Layout Design

Slide 4: การทําเว็บในอดีต(ของบางคน) • เปด Dream weaver • Ctrl + N • คลิกทีปุมตารางเพื่อสรางLayout กําหนดความกวางของหนาเพจ ่ • ใสดีไซน ที่หั่นไวเรียบรอยแลวจาก Photoshop • ใสตารางเขาไปอีก ใสเนื้อหาลงไป กําหนดสี กําหนดรูปแบบเนื้อหาลงไป • ไดเว็บเพจ ออกมา 1 หนา จบ.... แลวมีปญหาอะไร ????

Slide 5: การทําเว็บในอดีต(ของบางคน) • การใชตาราง(Table)ในการวาง Layout หนาเว็บเพจ

Slide 6: การทําเว็บในอดีต(ของบางคน) • รูปแบบการแสดงผลตางๆถูกกําหนดลงไปในเนื้อหาเลย -หัวขอหลักเปนสีแดง ขนาดอักษร 38 -หัวขอหลักเปนสีเขียว ขนาดอักษร 38 -เนื้อหายอยเปนสีดํา ขนาดอักษร 18 -เนื้อหายอยเปนสีเหลือง ขนาดอักษร 18

Slide 7: การทําเว็บในอดีต(ของบางคน) สรุปปญหา • ไมสามารถแสดงผลไดอยางสมบูรณในอุปกรณตางๆ • เกิดความยุงยากเมื่อตองการแกไขรูปแบบการแสดงผล • ฯลฯ แลวจะแกไขอยางไร ????

Slide 8: Tableless Layout Design • Tableless Layout Design / CSS Layout Design • การออกแบบ Layout โดยไมใช Table(ตาราง) • ไมใชไมใหใช Table เลย แตใหใชใหถูกหนาที่ของมัน • XHTML + CSS • ใช <div> และ <span> ในการวาง Layout • ใช CSS ในการควบคุมการแสดงผล • เปนการออกแบบ Layout ที่แยกสวนของเนื้อหา ออกจากสวนแสดงผล

Slide 9: Tableless Layout Design XHTML (eXtensible HyperText Markup Language) • การรวมเอา HTMLและXML เขาไวดวยกัน • แตกตางจาก HTMLตรงที่จะตองเปน Well-format เทานั้น CSS (Cascading Style Sheets) • ตกแตงเอกสาร HTML หรือ XHTML หรือ XML

Slide 10: HTML, XML, XHTML, CSS & Tableless Layout Design + = HTML XML XHTML CSS Tableless Layout Design XHTML+CSS

Slide 11: แยกสวนที่เปนเนือหาออกจากสวนของการแสดงผล ้

Slide 12: แยกสวนที่เปนเนือหาออกจากสวนของการแสดงผล ้

Slide 13: Tableless Layout Design สรุป • การออกแบบ Layout โดยไมใช Table(ตาราง) • ใช <div> และ <span> ในการวาง Layout และใช CSS ในการควบคุมการแสดงผล • เปนการออกแบบ Layout ที่แยกสวนของเนื้อหา ออกจากสวนแสดงผล

Slide 14: CSS 3.0 • เวอรชันใหมลาสุดของ CSS • Web Font • กําหนด Style ลงในแอททริบิวตไดโดยตรง • OPACITY • กรอบขอบโคง • เงา

Slide 15: ลักษณะการออกแบบเดนๆของ Web 2.0

Slide 16: Color http://www.ajaxload.info/

Slide 17: Color http://www.skype.com/

Slide 18: Color http://www.curvycorners.net/index.php

Slide 19: Oversized http://www.flickr.com/

Slide 20: Oversized http://www.rankforest.com/

Slide 21: Wet table https://extensions.flock.com

Slide 22: Glass buttons http://www.popshops.com/

Slide 23: Glass buttons http://dashwire.com/

Slide 24: Glass buttons http://www.bigfilebox.com/

Slide 25: Rounded Corners http://www.schillmania.com

Slide 26: Rounded Corners http://www.webcredible.co.uk

Slide 27: Star bursts

Slide 28: Star bursts http://www.clockingit.com/

Slide 29: Star bursts http://www.mangolanguages.com/

Slide 30: Free http://beanstalkapp.com/

Slide 31: Free http://www.veetro.com/

Slide 32: Free http://www.fullpix.tv/

Slide 33: ใชงานงาย http://searchslides.com/

Slide 34: ใชงานงาย http://5pmweb.com/

Slide 35: ลักษณะการออกแบบเดนๆของ Web 2.0 สรุป • ไมตองยึดติดกับรูปแบบดังกลาว • เปนเพียงแคสมัยนิยม อนาคตเปลี่ยนแปลงแนนอน • ใชงานไดงาย และสะดวกดีที่สุด

Slide 36: จบการบรรยาย