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

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

3. Tableless Layout Design

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

27. Star bursts

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

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

30. Free
http://beanstalkapp.com/

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

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

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

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

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

36. จบการบรรยาย