Nariopon Thungtreerat : WoNe’ co.,ltd : 01/11/2007

Design Design Web 2.0

• Tableless Layout Design

• ลกษณะการออกแบบเดนๆของ Web 2.0

Design Design Web 2.0

Tableless Layout Design

การทาเวบในอดต(ของบางคน)• เปด Dream weaver

• Ctrl + N

• คลกทปมตารางเพอสรางLayout กาหนดความกวางของหนาเพจ

• ใสดไซน ทหนไวเรยบรอยแลวจาก Photoshop

• ใสตารางเขาไปอก ใสเนอหาลงไป กาหนดส กาหนดรปแบบเนอหาลงไป

• ไดเวบเพจ ออกมา 1 หนา จบ....

แลวมปญหาอะไร ????

• การใชตาราง(Table)ในการวาง Layout หนาเวบเพจ

การทาเวบในอดต(ของบางคน)

• รปแบบการแสดงผลตางๆถกกาหนดลงไปในเนอหาเลย

-หวขอหลกเปนสแดง ขนาดอกษร 38

-เนอหายอยเปนสดา ขนาดอกษร 18-หวขอหลกเปนสเขยว ขนาดอกษร 38

-เนอหายอยเปนสเหลอง ขนาดอกษร 18

การทาเวบในอดต(ของบางคน)

สรปปญหา

• ไมสามารถแสดงผลไดอยางสมบรณในอปกรณตางๆ

• เกดความยงยากเมอตองการแกไขรปแบบการแสดงผล

• ฯลฯ

แลวจะแกไขอยางไร ????

การทาเวบในอดต(ของบางคน)

Tableless Layout Design

• Tableless Layout Design / CSS Layout Design

• การออกแบบ Layout โดยไมใช Table(ตาราง)

• ไมใชไมใหใช Table เลย แตใหใชใหถกหนาทของมน

• XHTML + CSS

• เปนการออกแบบ Layout ทแยกสวนของเนอหา ออกจากสวนแสดงผล

• ใช <div> และ <span> ในการวาง Layout

• ใช CSS ในการควบคมการแสดงผล

XHTML (eXtensible HyperText Markup Language)

• การรวมเอา HTMLและXML เขาไวดวยกน

• แตกตางจาก HTMLตรงทจะตองเปน Well-format เทานน

CSS (Cascading Style Sheets)

• ตกแตงเอกสาร HTML หรอ XHTML หรอ XML

Tableless Layout Design

HTML XML XHTML CSS

XHTML+CSS

+ =

HTML, XML, XHTML, CSS & Tableless Layout Design

Tableless Layout Design

แยกสวนทเปนเนอหาออกจากสวนของการแสดงผล

แยกสวนทเปนเนอหาออกจากสวนของการแสดงผล

Tableless Layout Design

สรป

• การออกแบบ Layout โดยไมใช Table(ตาราง)

• เปนการออกแบบ Layout ทแยกสวนของเนอหา ออกจากสวนแสดงผล

• ใช <div> และ <span> ในการวาง Layout และใช CSS ในการควบคมการแสดงผล

CSS 3.0

• เวอรชนใหมลาสดของ CSS

• Web Font

• กาหนด Style ลงในแอททรบวตไดโดยตรง

• OPACITY

• กรอบขอบโคง

• เงา

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

http://www.ajaxload.info/

Color

Color

http://www.skype.com/

Color

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

Oversized

http://www.flickr.com/

http://www.rankforest.com/

Oversized

https://extensions.flock.com

Wet table

Glass buttons

http://www.popshops.com/

Glass buttons

http://dashwire.com/

Glass buttons

http://www.bigfilebox.com/

Rounded Corners

http://www.schillmania.com

http://www.webcredible.co.uk

Rounded Corners

Star bursts

Star bursts

http://www.clockingit.com/

Star bursts

http://www.mangolanguages.com/

Free

http://beanstalkapp.com/

Free

http://www.veetro.com/

Free

http://www.fullpix.tv/

http://searchslides.com/

ใชงานงาย

http://5pmweb.com/

ใชงานงาย

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

สรป

• ไมตองยดตดกบรปแบบดงกลาว

• เปนเพยงแคสมยนยม อนาคตเปลยนแปลงแนนอน

• ใชงานไดงาย และสะดวกดทสด

จบการบรรยาย