[WEB DESIGN] The Markup and Style

[WEB DESIGN]

The Markup and

Style

1

EDITOR

หนงสอเลมนจดท าขนเพอประกอบการเรยนการสอน ซงแสดง

ขนตอนทส าคญในกระบวนการและขนตอนการวางแผนการ

จดการ การคด และรวมถงการออกแบบเวบไซต หรอโครงการการ

ออกแบบจากแนวความคดผานจนถงขนตอนการน าเสนอ

เวบไซต ผเขยนใชรปแบบทนาสนใจ งายตอการเขาถง เพอชวยให

ผอานในการออกแบบเวบไซตในโครงการของตวเอง

หนงสอเลมน จะมประโยชนส าหรบผทตองการมเวบไซตเปนของ

ตวเองตลอดจน นกเรยนนกศกษาทศกษาดานการออกแบบ

เวบไซต

อ.นภณต คณะนตสาร

2

CONTENTS

[CHAPTER 01] WEB DESIGN HOW TO 03

[CHAPTER 02] THE PRINCIPLE OF WEB DESIGN 17

[CHAPTER 03] WEB DESIGN GUIDE 27

[CHAPTER 04] WEB DESIGN PROCESS 39

[CHAPTER 05] WEB DESIGN HTML 45

[CHAPTER 06] WEB DESIGN CSS 77

3

Chapter 1 Web design…..How to?

4

Chapter 01 web design…..How to?

หลกการออกแบบเวบไซต

เวบไซตเปนสอทไดรบความนยมอยามากบนอนเตอรเนต ซงเวบไซตเปนสอทอยในความควบคมของผใชโดยสมบรณ กลาวคอ ผใชสามารถตดสนใจเลอกไดวาจะดเวบไซตใดและจะไมเลอกดเวบไซตใด ไดตามตองการ จงท าใหผใชไมมความอดทนตออปสรรคและปญหาทเกดจากการออกแบบเวบไซตผดพลาดถาผใชเหนวาเวบทก าลงดอยนนไมมประโยชนตอตวเขา หรอไมเขาใจวาเวบไซตนจะใชงานอยางไร เขากสามารถทจะเปลยนไปดเวบไซตอนๆ ไดอยางรวดเรว เนองจากในปจจบนมเวบไซตอยมากมาย และยงมเวบไซดทเกดขนใหม ๆ ทกวน ผใชจงมทางเลอกมากขน และสามารถเปรยบเทยบคณภาพของเวบไซดตาง ๆ ไดเอง

เวบไซดทไดรบการออกแบบอยางสวยงาม มการใชงานทสะดวก ยอมไดรบความสนใจจากผใช มากกวาเวบไซดทดสบสนวนวาย มขอมลมากมายแตหาอะไรไมเจอ นอกจากนยงใชเวลาในการแสดงผลแตละหนานานเกนไป ซงปญหาเหลานลวนเปนผลมาจากการออกแบบเวบไซดไมดทงสน

ดงนน การออกแบบเวบไซดจงเปนกระบวนการส าคญในการสรางเวบไซด ใหประทบใจผใช ท าใหเขาอยากกลบเขามาเวบไซดเดมอกในอนาคต ซงนอกจากตองพฒนาเวบไซดทดมประโยชนแลว ยงตองค านงถงการแขงขนกบเวบไซดอน ๆ อกดวย

5


องคประกอบของการออกแบบเวบไซต

[1. ความเรยบงาย (Simplicity)]

[หมายถง การจ ากดองคประกอบเสรมใหเหลอเฉพาะองคประกอบหลก กลาวคอในการสอสารเนอหากบผใชนน เราตองเลอกเสนอสงทเราตองการน าเสนอจรง ๆ ออกมาในสวนของกราฟก สสน ตวอกษรและภาพเคลอนไหว ตองเลอกใหพอเหมาะ ถาหากมมากเกนไปจะรบกวนสายตาและสรางความค าราญตอผใชตวอยางเวบไซตทไดรบการออกแบบทด ไดแก เวบไซตของบรษทใหญ ๆ อยางเชน Apple Adobe Microsoft ทมการออกแบบเวบไซตในรปแบบทเรยบงาย ไมซบซอน และใชงานอยางสะดวก ]

[2. ความสมาเสมอ (Consistency)]

[หมายถง การสรางความสม าเสมอใหเกดขนตลอดทงเวบไซต โดยอาจเลอกใชรปแบบเดยวกนตลอดทงเวบไซตกได เพราะถาหากวาแตละหนาในเวบไซตนนมความแตกตางกนมากจนเกนไป อาจท าใหผใชเกดความสบสนและไมแนใจวาก าลงอยในเวบไซตเดมหรอไม เพราะฉะนนการออกแบบเวบไซตในแตละหนาควรทจะมรปแบบ สไตลของกราฟก ระบบเนวเกชน (Navigation) และโทนสทมความคลายคลงกนตลอดทงเวบไซต]

[3. ความเปนเอกลกษณ (Identity)]

[ในการออกแบบเวบไซตตองค านงถงลกษณะขององคกรเปนหลก เนองจากเวบไซตจะสะทอนถงเอกลกษณและลกษณะขององคกร การเลอกใชตวอกษร ชดส รปภาพหรอกราฟก จะมผลตอรปแบบของเวบไซตเปนอยางมาก ตวอยางเชน ถาเราตองออกแบบเวบไซตของธนาคารแตเรากลบเลอกสสนและกราฟกมากมาย อาจท าใหผใชคดวาเปนเวบไซตของสวนสนกซงสงผลตอความเชอถอขององคกรได ]

6


องคประกอบของการออกแบบเวบไซต (ตอ)

[4. เนอหา (Useful Content)]

[ถอเปนสงส าคญทสดในเวบไซต เนอหาในเวบไซตตองสมบรณและไดรบการปรบปรงพฒนาใหทนสมยอยเสมอ ผพฒนาตองเตรยมขอมลและเนอหาทผใชตองการใหถกตองและสมบรณ เนอหาทส าคญทสดคอเนอหาททมผพฒนาสรางสรรคขนมาเอง และไมไปซ ากบเวบอน เพราะจะถอเปนสงทดงดดผใชใหเขามาเวบไซตไดเสมอ แตถาเปนเวบทลงคขอมลจากเวบอน ๆ มาเมอใดกตามทผใชทราบวา ขอมลนนมาจากเวบใด ผใชกไมจ าเปนตองกลบมาใชงานลงคเหลานนอก]

[5. ระบบเนวเกชน (User-Friendly Navigation)]

[เปนสวนประกอบทมความส าคญตอเวบไซตมาก เพราะจะชวยไมใหผใชเกดความสบสนระหวางดเวบไซต ระบบเนวเกชนจงเปรยบเสมอนปายบอกทาง ดงนนการออกแบบเนวเกชน จงควรใหเขาใจงาย ใชงานไดสะดวก ถามการใชกราฟกกควรสอความหมาย ต าแหนงของการวางเนวเกชนกควรวางใหสม าเสมอ เชน อยต าแหนงบนสดของทกหนาเปนตน ซงถาจะใหดเมอมเนวเกชนทเปนกราฟกกควรเพมระบบเนวเกชนทเปนตวอกษรไวสวนลางดวย เพอชวยอ านวยความสะดวกใหกบผใชทยกเลกการแสดงผลภาพกราฟกบนเวบเบราเซอร]

]

[6. คณภาพของสงทปรากฏใหเหนในเวบไซต (Visual Appeal)]

[ลกษณะทนาสนใจของเวบไซตนน ขนอยกบความชอบสวนบคคลเปนส าคญ แตโดยรวมแลวกสามารถสรปไดวาเวบไซตทนาสนใจนนสวนประกอบตาง ๆ ควรมคณภาพ เชน กราฟกควรสมบรณไมมรอยหรอขอบขนบนไดใหเหน ชนดตวอกษรอานงายสบายตา มการเลอกใชโทนสทเขากนอยางสวยงาม เปนตน ]

7


องคประกอบของการออกแบบเวบไซต (ตอ)

[7. ความสะดวกของการใชในสภาพตาง ๆ (Compatibility)]

[การใชงานของเวบไซตนนไมควรมขอบจ ากด กลาวคอ ตองสามารถใชงานไดดในสภาพแวดลอมทหลากหลาย ไมมการบงคบใหผใชตองตดตงโปรแกรมอนใดเพมเตม นอกเหนอจากเวบบราวเซอร ควรเปนเวบทแสดงผลไดดในทกระบบปฏบตการ สามารถแสดงผลไดในทกความละเอยดหนาจอ ซงหากเปนเวบไซตทมผใชบรการมากและกลมเปาหมายหลากหลายควรใหความส าคญกบเรองนใหมาก ]

[8. ความคงทในการออกแบบ (Design Stability)]

[ถาตองการใหผใชงานรสกวาเวบไซตมคณภาพ ถกตอง และเชอถอได ควรใหความส าคญกบการออกแบบเวบไซตเปนอยางมาก ตองออกแบบวางแผนและเรยบเรยงเนอหาอยางรอบคอบ ถาเวบทจดท าขนอยางลวก ๆ ไมมมาตรฐานการออกแบบและระบบการจดการขอมล ถามปญหามากขนอาจสงผลใหเกดปญหาและท าใหผใชหมดความเชอถอ]

[9. ความคงทของการทางาน (Function Stability)]

[ระบบการท างานตาง ๆ ในเวบไซตควรมความถกตองแนนอน ซงตองไดรบการออกแบบสรางสรรคและตรวจสอบอยเสมอ ตวอยางเชน ลงคตาง ๆ ในเวบไซต ตองตรวจสอบวายงสามารถลงคขอมลไดถกตองหรอไม เพราะเวบไซตอนอาจมการเปลยนแปลงไดตลอดเวลา ปญหาทเกดจากลงค กคอ ลงคขาด ซงพบไดบอยเปนปญหาทสรางความร าคาญกบผใชเปนอยางมาก]

8


หลกในการออกแบบเวบไซต

ในการออกแบบเวบไซตนนประกอบดวยกระบวนการตาง ๆ มากมาย เชน การออกแบบโครงสราง ลกษณะหนาตา หรอการเขยนโปรแกรม แตมหลายคนทพฒนาเวบไซต โดยขาดการวางแผนและท างานไมเปนระบบ ตวอยางเชน การลงมอออกแบบโดยการใชโปรแกรมชวยสรางเวบ เนอหาและรปแบบกเปนไปตามทนกขนไดขณะนน และเมอเหนวาดดแลวกเปดตวเลย ท าใหเวบนนมเปาหมายและแนวทางทไมแนนอน ผลลพธทไดจงเสยงกบความลมเหลวคอนขางมาก

ความลมเหลวทพบเหนไดทวไป ไดแก เวบทแสดงขอความวาอยระหวางการกอสราง ( Under Construction หรอ Coming soon) ซงแสดงใหเหนถงการขาดการวางแผนทดบางเวบถอไดวาตายไปแลว เนองจากขอมลไมทนสมย ขาดการพฒนาปรบปรงเทคโนโลยลาสมย ลงคผดพลาด สงเหลานแสดงใหเหนถงการขาดการดแล ตรวจสอบและพฒนาใหทนสมยอยเสมอ

การออกแบบเวบไซตอยางถกตองจะชวยลดความผดพลาดเหลาน และชวยลดความเสยงทจะท าใหเวบประสบความลมเหลว การออกแบบเวบไซตทดตองอาศยการออกแบบและจดระบบขอมลอยางเหมาะสม

กระบวนการแรกของการออกแบบเวบไซตคอการก าหนดเปาหมายของเวบไซตก าหนดกลมผใช ซงการจะใหไดมาซงขอมล ผพฒนาตองเรยนรผใช หรอจ าลองสถานการณ สงเหลานจะชวยใหเราสามารถออกแบบเนอหาและการใชงานเวบไซตไดอยางเหมาะสม ตรงกบความตองการของผใชอยางแทจรง

ก าหนดเปาหมายของเวบไซต

ขนตอนแรกของการออกแบบเวบไซต คอการก าหนดเปาหมายของเวบไซตใหแนชดเสยกอน เพอจะไดออกแบบการใชงานไดตรงกบเปาหมายทไดตงเอาไว โดยทวไปมกจะเขาใจวาการท าเวบไซตมจดมงหมายเพอบรการขอมลของหนวยงานหรอองคกรเทานน แตในความเปนจรงแลว เวบไซตแตละแหงกจะมเปาหมายของตนเองแตกตางกนออกไป

9


ก าหนดกลมผใชเปาหมาย

ผออกแบบเวบไซตจ าเปนตองทราบกลมผใชเปาหมายทเขามาใชบรการเวบไซต เพอทจะไดตอบสนองความตองการของผใชไดอยางชดเจน ตวอยางเชนเวบไซตทมกลมผใชหลากหลาย เชน เซรชเอนจน เวบทา และเวบไดเรกทอร แตเวบไซตสวนใหญนนจะตอบสนองความตองการเฉพาะกลมเทานน ไมส าหรบทกคน เพราะคณไมสามารถตอบสนองความตองการของคนทหลากหลายไดในเวบไซตเดยว

สงทผใชตองการจากเวบ

หลงจากทไดเปาหมายและกลมเปาหมายของเวบไซตแลว ล าดบตอไปคอการออกแบบเวบไซตเพอดงดดผใชงานใหไดนานทสด ดวยการสรางสงทนาสนใจเพอดงดดผใชโดยทวไปแลว สงทผใชคาดหวงจากการเขาชมเวบไซตหนง ไดแก

- ขอมลและการใชงานทเปนประโยชน - ขาวและขอมลทนาสนใจ - การตอบสนองตอผใช - ความบนเทง - ของฟร

ขอมลหลกทควรมอยในเวบไซต

เมอเราทราบถงความตองการทผใชตองการไดรบเมอเขาชมเวบไซตหนง ๆ แลว เรากออกแบบเวบไซตใหมขอมลทผใชตองการ ซงขอมลตอไปน เปนสงทผใชสวนใหญคาดหวงจะไดรบเมอเขาไปชมเวบไซต

- ขอมลเกยวกบบรษท - รายละเอยดของผลตภณฑ - ขาวความคบหนาและขาวจากสอมวลชน - ค าถามยอดนยม - ขอมลในการตดตอ

10


[ออกแบบหนาเวบไซต (Page Design)]

หนาเวบเปนสงแรกทผใชจะไดเหนขณะทเปดเขาสเวบไซต และยงเปนสงแรกทแสดงถงประสทธภาพในการออกแบบเวบไซตอกดวย หนาเวบจงเปนสงส าคญมาก เพราะเปนสอกลางใหผชมสามารถใชประโยชนจากขอมลของระบบงานของเวบไซตนนได โดยปกตหนาเวบจะประกอบดวย รปภาพ ตวอกษร สพน ระบบเนวเกชน และองคประกอบอน ๆ ทชวยสอความหมายของเนอหาและอ านวยความสะดวกตอการใชงาน

หลกส าคญในการออกแบบหนาเวบกคอ การใชรปภาพและองคประกอบตาง ๆ รวมกนเพอสอความหมาย เกยวกบเนอหาหรอลกษณะส าคญของเวบไซต โดยมเปาหมายส าคญเพอการสอความหมายทชดเจนและนาสนใจ บนพนฐานของความเรยบงายและความสะดวกของผใช

11


[การออกแบบเวบไซต ตองค านงถง]

1. ความเรยบงาย ไดแก มรปแบบทเรยบงาย ไมซบซอน และใชงานไดสะดวก ไมมกราฟกหรอตวอกษรทเคลอนไหวอยตลอดเวลา ชนดและสของตวอกษรไมมากจนเกนไปท าใหวนวาย

2. ความสม าเสมอ ไดแก ใชรปแบบเดยวกนตลอดทงเวบไซต เชน รปแบบของหนา สไตลของกราฟก ระบบเนวเกชนและโทนส ควรมความคลายคลงกนตลอดทงเวบไซต

3. ความเปนเอกลกษณ การออกแบบเวบไซตควรค านงถงลกษณะขององคกร เพราะรปแบบของเวบไซตจะสะทอนถงเอกลกษณและลกษณะขององคกรนน ๆ เชน ถาเปนเวบไซตของทาง ราชการ จะตองดนาเชอถอไมเหมอนสวนสนก ฯลฯ

4. เนอหาทมประโยชน เนอหาเปนสงทส าคญทสดในเวบไซต ดงนนควรจดเตรยมเนอหาและขอมลทผใชตองการใหถกตอง และสมบรณ มการปรบปรงและเพมเตมใหทนเหตการณอยเสมอ เนอหาไมควรซ ากบเวบไซตอน จงจะดงดดความสนใจ

5. ระบบเนวเกชนทใชงานงาย ตองออกแบบใหผใชเขาใจงายและใชงานสะดวก ใชกราฟกทสอความหมายรวมกบค าอธบายทชดเจน มรปแบบและล าดบของรายการทสม าเสมอ เชน วางไว ต าแหนงเดยวกนของทกหนา

12


[การออกแบบเวบไซต ตองค านงถง] [ตอ]

6. ลกษณะทนาสนใจ หนาตาของเวบไซตจะตองมความสมพนธกบคณภาพขององคประกอบตางๆ เชน คณภาพของกราฟกทจะตองสมบรณ การใชส การใชตวอกษรทอานงาย สบายตา การใชโทนสทเขากนลกษณะหนาตาทนาสนใจนนขนอยกบความชอบของแตละบคคล

7. การใชงานอยางไมจ ากด ผใชสวนใหญสามารถเขาถงไดมากทสดเลอกใชบราวเซอรชนดใดกไดในการเขาถงเนอหาสามารถแสดงผลไดทกระบบปฏบตการและความละเอยดหนาจอตางๆ กนอยางไมมปญหาเปนลกษณะส าคฐส าหรบผใชทมจ านวนมาก

8. คณภาพในการออกแบบ การออกแบบและเรยบเรยงเนอหาอยาง

รอบคอบ สรางความรสกวาเวบไซตม….คณภาพ ถกตอง และเชอถอได

9. ลงคตางๆ จะตองเชอมโยงไปหนาทมอยจรงและถกตอง ระบบการท างานตางๆ ในเวบไซตจะตองมความแนนอนและท าหนาทไดอยางถก

13


การออกแบบโครงสรางเวบไซต (Site Structure Design)

โครงสรางเวบไซท ( Site Structure ) เปนแผนผงของการล าดบเนอหาหรอการจดวางต าแหนงเวบเพจทงหมด ซงจะท าใหเรารวาทงเวบไซทประกอบไปดวยเนอหาอะไรบาง และมเวบเพจหนาไหนทเกยวของเชอมโยงถงกน ดงนนการออกแบบโครงสรางเวบไซทจงเปนเรองส าคญ เปรยบเสมอนกบการเขยนแบบอาคารกอนทจะลงมอสราง เพราะจะท าใหเรามองเหนหนาตาของเวบไซทเปนรปธรรมมากขน สามารถออกแบบระบบเนวเกชนไดเหมาะสม และเปนแนวทางการท างานทชดเจน ส าหรบขนตอนตอๆไป นอกจากนโครงสรางเวบไซททดยงชวยใหผชมไมสบสนและคนหาขอมลทตองการไดอยางรวดเรว

วธการจดโครงสรางเวบไซทสามารถท าไดหลายแบบ แตแนวคดหลกๆทนยมใชกนมอย 2 แบบคอ

จดตามกลมเนอหา ( Content-based Structure ) จดตามกลมผชม ( User-based Structure )

รปแบบของโครงสรางเวบไซท

เราสามารถวางรปแบบโครงสรางเวบไซทไดหลายแบบตามความเหมาะสม เชน

แบบเรยงล าดบ ( Sequence ) เหมาะส าหรบเวบไซททมจ านวนเวบเพจไมมากนก หรอเวบไซททมการน าเสนอขอมลแบบทละขนตอน

แบบระดบชน ( Hierarchy ) เหมาะส าหรบเวบไซททมจ านวนเวบเพจมากขน เปนรปแบบทเราจะพบไดทวไป

แบบผสม ( Combination )

เหมาะส าหรบเวบไซททซบซอน เปนการ

น าขอดของรปแบบทง 2 ขางตนมาผสม

กน

14


การใชสในการออกแบบเวบไซต

การสรางสสนบนหนาเวบเปนสงทสอความหมายของเวบไซตไดอยางชดเจน

การเลอกใชสใหเหมาะสม กลมกลน ไมเพยงแตจะสรางความพงพอใจใหกบผใช แตยง

สามารถท าใหเหนถงความแตกตางระหวางเวบไซตได สเปนองคประกอบหลกส าหรบ

การตกแตงเวบ จงจ าเปนอยางยงทจะตองท าความเขาใจเกยวกบการใชส

ระบบสทแสดงบนจอคอมพวเตอร มระบบการแสดงผลผานหลอดล าแสงท

เรยกวา CRT (Cathode ray tube) โดยมลกษณะระบบสแบบบวก อาศยการผสมของของ

แสงสแดง สเขยว และสน าเงน หรอระบบส RGB สามารถก าหนดคาสจาก 0 ถง 255 ได

จากการรวมสของแมสหลกจะท าใหเกดแสงสขาว มลกษณะเปนจดเลก ๆ บนหนาจอไม

สามารถมองเหนดวยตาเปลาได จะมองเหนเปนสทถกผสมเปนเนอสเดยวกนแลว จดแต

ละจดหรอพกเซล (Pixel) เปนสวนประกอบของภาพบนหนาจอคอมพวเตอร โดยจ านวน

บตทใชในการก าหนดความสามารถของการแสดงสตาง ๆ เพอสรางภาพบนจอนน

เรยกวา บตเดป (Bit-depth) ในภาษา HTML มการก าหนดสดวยระบบเลขฐานสบหก ซง

มเครองหมาย (#) อยดานหนาและตามดวยเลขฐานสบหกจ านวนอกษรอก 6 หลก โดย

แตละไบต (byte) จะมตวอกษรสองตว แบงออกเปน 3 กลม เชน #FF12AC การใช

ตวอกษรแตละไบตนเพอก าหนดระดบความเขมของแมสแตละสของชดส RGB โดย 2

หลกแรก แสดงถงความเขมของสแดง 2 หลกตอมา แสดงถงความเขมของสเขยว 2 หลก

สดทายแสดงถงความเขมของสน าเงน

15


การใชสในการออกแบบเวบไซต [ตอ]

สมอทธพลในเรองของอารมณการสอความหมายทเดนชด กระตนการรบรทางดาน

จตใจมนษย สแตละสใหความรสก อารมณทไมเหมอนกน สบางสใหความรสกสงบ บาง

สใหความรสกตนเตนรนแรง สจงเปนปจจยส าคญอยางยงตอการออกแบบเวบไซต

ดงนนการเลอกใชโทนสภายในเวบไซตเปนการแสดงถงความแตกตางของสทแสดงออก

ทางอารมณ มชวตชวาหรอเศราโศก รปแบบของสทสายตาของมนษยมองเหน สามารถ

แบงออกเปน 3 กลม คอ

1. สโทนรอน (Warm Colors) เปนกลมสทแสดงถงความสข ความปลอบโยน ความอบอน และดงดดใจ สกลมนเปนกลมสทชวยใหหายจากความเฉอยชา มชวตชวามากยงขน

2. สโทนเยน (Cool Colors) แสดงถงความทดสภาพ ออนโยน เรยบรอย เปนกลมสทมคนชอบมากทสด สามารถโนมนาวในระยะไกลได

3. สโทนกลาง (Neutral Colors) สทเปนกลาง ประกอบดวย สด า สขาว สเทา และสน าตาล กลมสเหลานคอ สกลางทสามารถน าไปผสมกบสอน ๆ เพอใหเกดสกลางขนมา สงทส าคญตอผออกแบบเวบคอการเลอกใชสส าหรบเวบ นอกจากจะมผลตอ

การแสดงออกของเวบแลวยงเปนการสรางความรสกทดตอผใชบรการ ดงนนจะเหนวาส

แตละสสามารถสอความหมายของเวบไดอยางชดเจน ความแตกตาง ความสมพนธท

เกดขนยอมสงผลใหเวบมความนาเชอถอมากยงขน ชดสแตละชดมความส าคญตอเวบ

ถาเลอกใชสไมตรงกบวตถประสงคหรอเปาหมายอาจจะท าใหเวบไมนาสนใจ

16

Note

17

Chapter 2 The Principle of Web design

18

Chapter 02 The principle of web design

Web 1.0

• ผใหบรการน าเสนอขอมลใหกบบคคลทวไป

• โดยท าในลกษณะเดยวกบหนงสอทวไป

• ผอานมสวนรวมนอยมากในการเตมแตงขอมล

Web 2.0

• บคคลทวไปคอผสรางเนอหา

• เปนเรองของการแบงปนความรซงกนและ

กนอยางแทจรง

• ตวอยาง เชน wikipedia

• ท าใหความรถกตอยอดไปอยตลอดเวลา

• ขอมลทกอยางไดมาจากการเตมแตงอยาง

ไมมทสนสด เกดจากการคาน อ านาจของ

ขอมลของแตละบคคลท าใหขอมลนน

ถกตองมากทสด และจะถกมากขนเมอ

เรองนนถกขดเกลามาตามระยะเวลา

ยาวนาน

Web 3.0

• Web 3.0 จะท าหนาทประมวลผล

ขอมลและวเคราะหขอมลเหลานน

แลวให Tags ตามความเหมาะสมให

เราแทน

• โดยเมอได Tag มาแลว ขอมลแตละ

Tag จะมความสมพนธกบอก Tag

นงโดยปรยาย

• เชนขอมลเกยวกบบรษท Apple กจะ

ม Tag ทเกยวกบ Computer, iPod,

iMac

• โดยจะเชอมโยงแบบนไปเรอย ๆ ท า

ใหขอมลมการเชอมโยงกนเหมอน

ฐานขอมลทมความสมพนธกนในเชง

ขอมล ท าใหอนเตอรเนตกลายเปน

ฐานขอมลความรขนาดใหญ ทขอมล

ทกอยางถกเชอมตอกนอยางเปน

ระบบมากขน

ววฒนาการของเวบไซต

19

2. Logo

บอกความเปนเอกลกษณของบรษท

จดจ าไดงาย

นยมไวสวนบนสดของเวบไซต


WEB PAGE ANATOMY

1 .Containing Block

o Liquid

o Fixed

20


3. Navigation

งายและสะดวกในการใชงาน

ผใชคาดหวงวาจะเหนไดทสวนบนของเวบไซต

เมนหลกควรจะอยกอนทจะเลอนหนาเวบไซตลง

4. Content

สวนเนอหา เปนหวใจหลกของเวบไซต

สามารถท าใหผใชตดสนใจอานตอหรอจะออกจากเวบไซต ภายในเวลาไมนานได

ถาผใชไมสามารถหาขอมลทตวผใชสนใจได

21


5. Footer

นยมน าบทความทผใชเขาถงบอย ๆ หรอลงคทเกยวของมาไวท Footer

6. White space

ชวยให design ดไมอดอดจนเกนไป

การม White space มความส าคญเทยบเทากบ การม content

22


GRID THEORY…….rule of thirds

กฎสามสวน กลาวไววา ไมวาภาพจะอยแนวตงหรอแนวนอนกตาม หากเราแบงภาพนน

ออกเปนสามสวน ทงตามแนวตงและแนวนอน แลวลากเสนแบงภาพทงสามเสน (ภาพท 2)

จะเกดจดตดกนทงหมด 4 จด ซงจดตดของเสนทงสน เปนต าแหนงทเหมาะสมส าหรบการจด

วางวตถทตองการเนนใหเปนจดเดนหลก สวนรายละเอยดอนๆนน เปนสวนส าคญทรองลงมา

การจดวางต าแหนงจดเดนหลกไมจ าเปนจะตองจ ากดมากนก อาจถอเอาบรเวณใกลเคยงทง ส

จดนกได

ภาพท 1 ภาพท 2 ภาพท 3 ภาพท 4

23


Most Common Layout

Left column navigation

ขอด : ผใชสวนใหญคนเคย

ขอเสย : ขาดความคดสรางสรรค

24


Most Common Layout

Right column navigation

ขอด : Main content เปนสวนหลกทน าเสนอ

ขอเสย : บาง browser ไมสามารถ เปดดดานขวาสดได

25


Most Common Layout

Three column navigation

ม Links จ านวนมาก

มเนอหาไมมาก

มการใชพนทโฆษณา

Column ตรงกลางม white space เพอไมใหดอด

อด

26

Note

27

Chapter 3 Web design….. Guide

28

Chapter 03 web design…………Guide

O สวนหว (Header)

O สวนเนอหา (Content Area)

O เมนหลก (Primary Navigation)

O เมนรอง (Secondary Navigation)

O หวเรอง (Headlines)

O สวนแสดงความคดเหน (Comments)

O สวนทายของบทความ (Post’s Footer)

O สวนทายของเวบไซต ((Footer)

O โฆษณา (Advertisements)

แนวทางการ Design web ยคใหม

29


สวนหว (Header)

O สวนหวเปนสวนทผเยยมชมสวนใหญจะเหนเปนสวนแร

O เปนสวนทส าคญทสด มนเปนสงเดยวทจะแยก ใหเหนถงความแตกตางระหวางบลอก

ของคณกบบลอกอน ๆ นบลานบลอก

O เปนสงทแสดงถงเอกลกษณของบลอกคณเพอใหเกดการจดจ า


30


สวนเนอหา (Content Area)

O สวนเนอหาเปนสวนทผอานหรอผเยยมชม จะใชเวลาจดจออยนานทสด

O สวนเนอหางายตอการอาน

O ไมควรมสงทดงความสนใจผอานมากจนเกนไป

O สงส าคญอกสงหนงคอ ตองวางโครงสรางเนอหาใหดวาอะไร ส าคญทสดไปจนถง

ส าคญนอยทสด


31


เมนหลก (Primary Navigation)

O เมนหลกคอชดของลงคทจะน าพาไปสสวนของอน ๆ ทแตกตางกนอยางชดเจน (area)

O วางไวใกลกบสวนหว เพราะผเยยมชมสวนใหญจะคาดหวงวาเมนหลกจะตองอยแถวน


32


เมนรอง (Secondary Navigation)

O เมนรองคอชดของลงคทน าพาผเยยมชมไปยงสวนยอยอน ๆ ของเนอหาทอยในขอบเขต

เดยวกน(section)

O อยในรปแบบสวนดานขาง(sidebar

O เมนรองทดควรจะเปนลงคไปยงบทความ ทผเยยมชมคลกดมากทสด


33


หวเรอง (Headlines)

O หวเรองของแตละบทความมไวเพอดงดดความสนใจผอาน

O ยวเยาใหอานเนอหาทงหมดในทสด

O หวเรองของคณจะตองเดน โดยสามารถท าไดหลากหลายวธ


34


สวนแสดงความคดเหน (Comments)

O จะตองออกแบบใหบรเวณนดเปนการสนทนากน

O แยกแตละความคดเหนออกจากกน อาจจะดวยการก าหนดหมายเลขใหแตละความ

คดเหน

O แยกความคดเหนของเจาของบทความ ใหตางจากความคดเหนทวไป


35


สวนทายของบทความ (Post’s Footer)

O สวนทายของบทความจะอยระหวางดานลางบทความ บรรทดสดทายกบสวนแสดง

ความคดเหน

O สวนทชกจงผเยยมชม/ผอาน ไปยงบทความอน ๆ ทเกยวของ หรอ บทความทส าคญ


36


สวนทายของเวบไซต (Footer)

O สามารถน าเมนรองมาใสไวไดเพอลดความแออดของลงค ในเมนรองในดานขางเวบ

O ผอาน อานเนอหาจบแลว หรอ อานสวนแสดงความคดเหนเสรจแลว นบเปนชวงเวลาท

ดทคณจะไดน าเสนอ บทความอน ๆ ดวยการวางเมนรองไวในสวนทายเวบน

O ลงคทนาจะน ามาใสควรเปน บทความทมผอานมากทสด บทความแนะน า คณอาจจะ

ใสลงค เกยวกบเรา และ การตดตอไปดวย ถาหากเปาหมายของคณคอ ผเยยมชมเวบ

ตดตอคณ


37


โฆษณา (Advertisements)

O โฆษณาทจดวางไมถกท ดนาเกยจ อาจจะท าใหผเยยมชมเออมระอาเวบของคณ แทนท

คณจะไดเงนจากการคลกโฆษณา เขาจะไมกลบมาอกเลย

O หากคณออกแบบและวางโฆษณาไวอยางถกหลก เงนจากคาโฆษณามนกไมหนไปไหน

หรอก


38

Note

39

Chapter 4 Web design….. Process

40

Chapter 04 web design………process

Pre Production Production Post Production

Web Design Process

Planning

• Domain name

• วตถประสงค

• กลมเปาหมาย

• Concept design

• จดเดน-จดดอย ของ เวบ

คแขง

• Site Map

Organizing

• จดระบบความคด

• เตรยมขอมลดบ

• ศกษา web คแขง

• จดทะเบยน Domain

ออกแบบ

Photoshop

Coral Draw

Illustrator

สรางเอกสาร HTML

Dreamweaver

HTML

FrontPage

ภาพรวมการออกแบบ

การใชงาน

• Readability

• Usability

• จดทะเบยน Domain

41


การจดเอกสาร Html

1. ก าหนด คา Title ของเวบไซต 2. Set Page Properties โดยตงคา Page font

[การสราง font set – แนะน าใหใช Tahoma, Arial, MS Sans-serif]

3. Set Background [background image สามารถทดลองท าใน Photoshop save เปน pattern]

4. Set Margin [ระยะกนหนา] [Ctrl + J] – set เปน 0 ทง top margin, right margin, left margin และ bottom margin

5. Set Encoding [รหสภาษา] web ภาษาไทย ใช Thai (Window) หรอ Unicode กได – ถาใน Web มหลายภาษา ใหใช Unicode (UTF-8)

6. Save อยางนอย 1 ครง 7. จด layout ตามตองการ [Wireframe]

- ทดลองออกแบบใน Photoshop โดยใช Ruler และ guide ชวย – ความกวาง ความสง ควรลง หลก 5 หลก 10 - สวนซายบน จะเปนสวนแรกทโชวขนมา และเปนสวนสดทายทหายไป - ควรม footer ปดทาย เพอจะไดรวาหนา web load จบแลว

42


การ Copy text จาก word หรอ เอกสารอนๆ

ควร copy ไปใสใน notepad กอน [เปนการลาง tag ตางๆทอาจตดมา เชน Word จะม tag <p> (paragraph) ตดมาดวย] – click ขวาท desktop

Format -> Word Wrap

Copy ขอความมาใสใน Dream Weaver

เพราะฉะนน การเตรยมขอมลทด ควรพมพไวใน Text Document หรอ ใน Dream Weaver

43


การท าใหตวหนงสอไมตดขอบ Table

ลองสราง table 3 แถว 2 column ยาว 600 pixel

สราง table ซอนไวขางใน ขนมา 1 แถว 1 column ยาว 300 pixel แลวใส cell padding

ดลกษณะของ text ทง 4 ดาน text จะอยหางจากขอบ = 10 pixel

Note: หากตองการ set Cell padding เพยงดานหนง ตองสราง CSS ขนมาก ากบเทานน (แนะน า)

44


ปรบขนาด Code view ทมขนาดเลกเกนไป Edit > Preference (ctrl+u)

Font > Code view

ปรบขนาด Code view size

45

Chapter 5 Web design….. HTML

46

HTML Code [HTML ยอมาจากค าวา HyperText Markup Language]

- หนา web จะประกอบดวย tag หรอ element ตางๆ ซง tag หลกคอ tag head และ tag body - ตวอยางหนา Code View ทยงไมไดใสขอมลอะไรเลย

Chapter 05 web design………HTML

<html>

<head> - เปนสวนทไมแสดงผลในหนางาน

- เตรยมขอมล ในสวนค านวณ (เปรยบเหมอนสมองของมนษย)

- เกบ css, javaScript, ก าหนดขนาด ส font

</head>

<body> - สวนทแสดงผล

</body>

</html>

47

- ทสวนหวจะม Document Type Definition (DTD) บอกอย ส าหรบ DreamWeaver CS3 จะใช

XHTML 1.0 Transitional เปน Default (หากตองการเปลยน กสามารถเปลยนไดท Menu Modify -> Page Properties -> Title/Encoding)

Tag ทใชในภาษา HTML

- Tag เปนลกษณะเฉพาะของภาษา HTML ใชในการระบรปแบบค าสง หรอการลงรหสค าสง HTML ภายในเครองหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยท Tag HTML แบงได 2 ลกษณะ คอ แบบค (double tag) <แทกเปด>….</แทกปด> และแบบเดยว (single tag) <แทกเดยว/>

- Tag ตางๆ จะถกมองเปนวต หรอ object เสมอ ตวอยาง tag table <table>………..</table> จะเกดจาก object แถว <tr>…</tr> และ object คอลมน <td>…….</td> มาประกอบกน


48

- DreamWeaver version กอนๆ จะใช HTML 4.0 Transitional เปน default ชง code จะมความแตกตางกนอยบาง ลองเปรยบเทยบ code ด HTML 4.0 XHTML 1.0 Abilities

<html>…………..</html> <html>…………..</html>

<head>…………..</head> <head>…………..</head> สวนหว

<title>…………..</title> <title>…………..</ title> ขอความทแสดงบนTitle Bar ของ

Browser

<style>…………..</style> <style>…………..</style> ใชก าหนด CSS ทใชในหนา

webpageนน

<script language=……> <script language=……> ใชก าหนดภาษาสครปต เชน


49

……..</script> ……..</script> javaScript, VBScript

<body>…………</body> <body>…………</body> เปนสวนแสดงเนอหาใน webpage

<br> <br/> shift + enter (เพอไมใหเวนบรรทด)

<img> <img/> รปภาพ

<i>…………………</i> <em>………………</em> ตวเอยง

<b>……………….</b> <strong>……..</strong> ตวหนา

<p>……………….</p> <p>……………….</p> paragraph

<p align=right> <p align="right">….</p> ขอความชดขอบขวา

<p align=left> <p align="left">….</p> ขอความชดขอบซาย

<center>……….</center> <p align="center"></p> ขอความอยกลางหนา

<pre>……………….</pre> <p align="justify">…</p> ขอความชดขอบซายและขอบขวา

<br> <p>……………….</p> ขนบรรทดใหม

<hr> <hr/> ขดเสนบรรทด

<a href>……….</a> <a href="#">…….</a> ท า link

Workshop – Test Code

- ปกต DreamWeaver จะชวยในเรองของ tag ตางๆ อยแลว แตควรเขาใจลกษณะการท างานของ tag, object, method และ event เพอเปนการปพนฐานไปยง CSS และ javaScript

- New page -> set page properties -> พมพค าวา NetDesign Party แลวเปด code view ด

50

- ทดลองท าตวหนาใหกบค าวา NetDesign และตวเอยงใหกบค าวา - Party โดยการพมพ tag ในหนา code view เอง - ทนททเรากด < จะม submenu ท pop up ขนมาใหเราเลอก


51

- พอเราพมพ s submenu กจะเลอนไปทตว s

- ถาเราเผลอ ท า submenu หายไป ใหกด Ctrl + Space Bar แลว submenu กจะ pop up ขนมาอก เมอได tag ทตองการแลวใหกด enter

- ท tag ปด พอพมพ </ โปรแกรม จะชวยใส code โดยดจากtagทอยใกลทสดใหโดยอตโนมต

- สงเกต tag ทมาครอบอย


52

- ลองเพมให NetDesign เปนตวเอยงดวย และ Party เปนตวหนาดวย จะสงเกตไดวา tag ทเพมเขามา จะมาครอบ tag ทมอยกอน ส าหรบ tag ทไมชนกน จะเอาอะไรขนกอนหลงกได โดยปกตแลว text จะฟงค าสงของ code ทอยใกลทสด

- หามใส tag overlap กน ดงตวอยางขางลาง เพราะ code จะไมท างาน และเราสามารถ สงเกตสของ code ดไดวา ไมเปนสน าเงนอยางทควรจะเปน


53

- Tag <p> (paragraph) ทง 4 ขางลาง เกดขนจากการกด enter ในหนา Design เพยงครงเดยว

Attribute – สวนขยายของ tag

- Attributes เปนสวนขยายความสามารถของ Tag จะตองใสภายในเครองหมาย < > ในสวน Tag เปดเทานน Tag ค าสง HTML แตละค าสง จะม Attribute แตกตางกนไป สวนใหญจะเกยวของกบ การแสดงผล เชน ความกวาง ความสง ส ขนาด การจดเรยง และมจ านวนไมเทากน การระบ Attribute มากกวา 1 Attribute ใหใชชองวางเปนตวคน เชน Tag ควบคมเกยวกบรปภาพ <IMG> ม Attributes ดงน

<img src=‛filename‛ width=‛n‛ height=‛n‛ alt=‛text‛ border=‛n‛>

โดย SRC เปน Attribute ควบคมชอไฟลภาพทจะน ามาแสดงผล

WIDTH เปน Attribute ควบคมความกวางของภาพ

HEIGHT เปน Attribute ควบคมความสงของภาพ

ALT เปน Attribute ควบคมค าอธบายภาพ

BORDER เปน Attribute ควบคมขนาดของเสนขอบของภาพ


54

Event – ก าหนด function การท างาน

- Event คอ Action ตางๆทเกดขนกบสวนตางๆในเวบเพจ เชน เมอเราเอา mouse ไปทบตว link กจะเกด event onmouseover ทตว link พอเอา mouse ออก กจะเกด event onmouseout พอเรา click กจะเกด event onclick เปนตน การท างานของ event กจะมอย 2 ขนตอน คอ 1. ตรวจสอบการเกด event ทเราก าหนดไว 2. เมอเกด event ขน กจะไปเรยก function หรอค าสงตางๆมาท างาน จะเปนการก าหนด function การท างาน เชน onclick, onmouseover

<img src=‛filename‛ width=‛200 onclick=‛this.width=500

จากตวอยางขางบน เมอ click ทภาพ จะมการเปลยนขนาดจาก 200 เปน 500

ตารางสรป Event ทใชบอย

Category Attribute Description

Mouse onclick เกดเมอ click ท tag หรอ object

ondbclick เกดเมอ double click ท tag หรอ object

onmousedown เกดเมอ click บนปม mouse คางบน tag หรอ object

onmouseup เกดเมอ ปลอยปม mouse บน tag หรอ object

onmouseover เกดเมอ ตวช mouse เลอนมาอยบน tag หรอ object

onmousemove เกดเมอ ตวช mouse เลอนไปมาอยบน tag หรอ object

onmouseout เกดเมอ ตวช mouse เลอนออกนอก tag หรอ object

Keyboard onkeypress เกดเมอ กดและปลอยปม keyboard


55

onkeydown เกดเมอ กดปม keyboard

onkeyup เกดเมอ ปลอยปม keyboard

HTML onload เกดเมอ เปดหนา webpage ขนมา

Frame/object onunload เกดเมอ ปดหนา webpage หรอเปลยนไปดหนาอน

onabort เกดเมอ มการหยดโหลด webpage กอนโหลดครบ

onerror เกดเมอ มการผดพลาดขณะโหลด webpage

onresize เกดเมอ มการปรบขนาดหนาจอเวบ

onscroll เกดเมอ มการเลอนหนาจอขนลง

HTML onselect เกดเมอ มการเลอกขอความใน object input, textarea

form onchange เกดเมอ มการแกไขขอมลใน object input, select,

textarea

onsubmit เกดเมอ form ถก submit

onreset เกดเมอ form ถก reset

onfocus เกดเมอ object ไดรบ focus

onblue เกดเมอ object เสย focus

56

Tag และ Attribute ของ Tag HTML

ม Attribute หลายตวทใชใน Tag ตางๆ สรปคราวๆ ทใชhบอยๆ ไดดงน

Tag/Attribute ความหมาย ตวอยาง

align ชดซาย-ขวา =‚center‛ =‚right‛ =‚left‛

valign ชดบน-ลาง =‚top‛ =‚bottom‛

Background img พนหลง-ภาพ =‛img/wall.jpg‛

bgcolor พนหลง-ส =‛blue‛ =‛#FFFFCC‛

border ขนาดขอบ =‛2‛

bordercolor สขอบ =‛blue‛ =‛#FFFFCC‛

bordercolordark สขอบตรง shade =‛blue‛ =‛#FFFFCC‛

bordercolorlight สขอบตรง light =‛blue‛ =‛#FFFFCC‛

cellpadding ระยะขอมล-ขอบเซลล =‛blue‛ =‛#FFFFCC‛

cellspacing ระยะระหวางเซลล =‛2‛

colspan จ านวนคอลมน =‛2‛

rowspan จ านวนแถว =‛4‛


57

height ความสง =‛20‛ (pixel) =‛20%‛

width ความกวาง =‛20‛ (pixel) =‛20%‛

alt ชอเรยก =‛tool tip‛

src แทรก =‛img/wall.jpg‛

class เรยกใช style sheet =‛ชอclass‛

id ชอ Object =‛ชอ id‛

dir อานซาย>ขวา/ขวา>ซาย =‛ltr‛ซาย>ขวา =‛rtf‛ขวา>ซาย

lang ภาษา =‛TH‛

style ก าหนดลกษณะ =‛ชอ style sheet‛

link ส link =‛blue‛ =‛#FFFFCC‛

alink ส link active =‛blue‛ =‛#FFFFCC‛

vlink ส link ทกดแลว =‛blue‛ =‛#FFFFCC‛

text ส text =‛blue‛ =‛#FFFFCC‛

leftmargin ระยะขอบของหนา =‛2‛

rightmargin ระยะขอบของหนา =‛2‛

topmargin ระยะขอบของหนา =‛2‛

bottommargin ระยะขอบของหนา =‛2‛

marginwidth ระยะขอบของหนา =‛2‛

marginheight ระยะขอบของหนา =‛2‛

58

face ชอ font =‛Arial‛

size ขนาด font =‛3‛

color ส font =‛blue‛ =‛#FFFFCC‛

หาความหมาย และรายการของ Tag

- หากตองการหาความหมาย และรายการของ Tag ตางๆ เราจะหาไดจาก tag chooser ทอยใน Tab Common ซงจะแสดงรายการแทกทงหมดใหเลอกใช เมอคลกเลอกทชอแทกจะปรากฎกรอบของ Tag Info ขนมาเพอแสดงความหมายของแตละ Tag

59

Tag <img/> [รปภาพ]

- Tag <img> เปน tag ในการใสรป ลองพมพในหนา code view วา <img src จะม Browse pop up ขนมาใหเราclickเขาไปเลอกรปไดเลย

-

- สงเกต tag img รปชอ logo.gif อยใน folder ชอ images


60

- ถาลมใส /> เพอปด tag ผลจะเปนดงภาพขางลาง

Tag <marquee>………….</marquee> [ตวหนงสอวง]

- ทดลองใสชอมลยาวๆ ใน page แลว highlight ขอความทงหมด จากนน clickขวา เลอก Insert Tag


61

- เลอก HTML tags ตามดวย marquee ตามดวย Insert และ Close ตามล าดบ

- สงเกตลกษณะของ tag


62

- ด attribute โดยการวาง cursor ไวหลง tag marquee ดงภาพ

- จากนนกด space bar จะม attribute pop up ขนมา มความกวาง ความสง bgcolor ฯลฯ

- ลอง preview ดผลทได คอ ตวหนงสอจะวงจากขวาไปซาย


63

- ลองเพม attribute bgcolor จะม color palette pop up ขนมา ลองเลอกมาสกสหนง

- Code ส จะเขาไปอยในเครองหมาย ‚…..‛ แตใน Design page จะไมมอะไรเปลยนแปลง

แตพอ preview ด จะมผลดงภาพขางลาง สทเกดขน จะครอบ text ทงหมด และความยาวของส กจะเตม

ความกวางของ page


64

- ลองก าหนดขอบเขตความกวาง ความยาวของ text โดยการน า cursor ไปวางหลง tag marquee

- กด space bar เลอก height

- หลงจากเลอก height พอกด enter จะเหนวา cursor จะไปกระพรบอยใน "….."


65

- ลองใส 200 แลว preview ด

- คราวนลองก าหนดความกวางเปน 200


66

- Preview ด

- ลองสงให text วงขนขางบน โดยการใช attribute direction เพอก าหนดทศทางการวง

- Attribute direction มใหเลอก 4 แบบ ลองเลอก up แลว preview ด

67

- จะเหนวา text เลอนขนรวดเรวมาก

สามารถก าหนดความชาเรวได โดยใช attribute scrollamount และ scrolldelay scrollamount = ระยะทางทเคลอน / 1 ครง (px)

scrolldelay = เวลาทใชเคลอน / 1 ครง (ms) [1 second = 1000 ms]

- ลองก าหนด scrolldelay = 500 และ scrollamount = 5 เมอ preview ด จะเหนวา text มลกษณะเลอนขนแบบกระโดด

- ลองปรบตวเลขใหม scrolldelay = 100 และ scrollamount = 1 แมวาเมอเทยบสดสวนดแลวจะมขนาดเทากน แตพอ preview ดการเคลอนทจะดนมนวลกวา

- ลองปรบตวเลขใหม scrolldelay = 50 เมอ preview ด การเคลอนทจะเรวขน

- ลองปรบตวเลขใหม scrolldelay = 10 เมอ preview ด การเคลอนทจะเทาเดม เปนเพราะวา

scrolldelay ปรบไดต าสดแค 50 หากตองการใหแสดงผลตามจรง ตองใส attribute truespeed เขาไป เปน

การปรบคาจรง


68

- จะเหนวา text เลอนขนรวดเรวตามความจรงทเราก าหนด - ตงชอใหกบ text ซงมคาเทากบ object โดยใช attribute id ในตวอยาง ตงชอใหกบ text วา mym

โดยใช attribute id

- ทดลองใส event ใหกบ text ใหหยดวง หรอ ใหวงตอ โดยใส event onmouseover="this.stop()"

onmouseout="this.start()"

Note: การอางองโดยใช this

this เปนค าสงวน ใชอางอง object ตวท JavaScript ฝงตวอย ใชในกรณท script เกบอยในตว object

ดงนนเวลาอางถงตวเอง จะใช this เชน

<font color=‚blue‛

onmouseover=‚this.style.color=‘#ff0000’‛

onmouseout=‚this.style.color=‘blue’‛> ขอความ

</font>


69

this ในแตละ object จะอางถง object คนละตวกน ขบกบวา this ไปอยใน object ตวใดกจะอางถง

object ตวนน

ถาใช id

<font id=‚text‛ color=‚blue‛

onmouseover=‚text.style.color=‘#ff0000’‛

onmouseout=‚text.style.color=‘blue’‛> ขอความ

</font>

- Preview ด พอน า mouse ไปวางในกลองขอความ text จะหยดวงทนท พอน า mouse ออกนอกกลองขอความ text กจะวงตอ


70

- ทดลองสรางปมค าสง เพอควบคมให text หยด หรอ เลนตอ [Event] โดยพมพค าวา Start และ Stop ไวเหนอ text [object.method()]

- Highlight ค าวา Start แลว ใสเครองหมาย # ในชอง Link

- ท Code view น า cursor ไปวาหลง "#" แลวกด Space bar

- เลอก onclick


71

- Cursor จะกระพรบอยใน ".."

- ใหพมพค าวา "getElementById('mym').start()"

- ตอไป highlight ทค าวา Stop แลว ใสเครองหมาย # ในชอง Link - ใส event onclick "getElementById('mym').stop()"

- ด Code view

- เทาน เรากจะบงคบปม Start และ Stop ไดแลว - ทนลองเพมปม Up และ Down - พมพค าวา up และ down ใส # ในชอง Link - ท Code view ใส event ใหกบ Up วา

<a href="#" onclick="getElementById('mym').direction='up';getElementById('mym')"> - ใส event ใหกบ Down วา

<a href="#" onclick="getElementById('mym').direction='down';getElementById('mym')"> Note: getElementById เปนการใช JavaScript อางองคณสมบต CSS ไดโดยผาน

object ของ HTML โดยระบวตถทจะเรยก จากตวอยางขางบน วตถคอ mym


72

โครงสราง

document.getElementByID(‚object name‛).style.property=‚value‛ เชน

document.getElementByID.text1.style.backgroundColor=‚red‛

document.getElementByID.text2.style.left=‚50px‛

- ถงตอนน เราสามารถบงคบปมทง 4 ไดแลว แตยงมปญหาวา หลงจากกดปม Stop แลวมากดปม Up และ Down ปมทง2จะไมท างาน จงตองแกดวยการใส code เพม .start() ตอทาย

<a href="#" onclick="getElementById('mym').direction='up';getElementById('mym').start()">

<a href="#" onclick="getElementById('mym').direction='down';getElementById('mym').start()">


73

Rollover Image [mouse แตะภาพแลวเปลยนเปนอกภาพ]

- Insert รปภาพทจะโชวใน page สงเกต code ทเกดขน

- ใส event onmouseout=this.scr= แลวใหใสเครองหมาย '..' เตรยมไวกนลม กรณตองใสค ายาวๆ

- ในเครองหมาย '..' ใหระบภาพเดมกอน

- จากนนเพม event onmouseover เพอใหรปภาพเปลยน

- น า object ทตองการใหเกด event ไปใสใน ‚….‛


74

- ระบแหลงของ object ใน ‘….’ [อยาลมพมพ ‘..’ เตรยมไวเลย]

- ระบภาพทจะให ปรากฎแทนทลงใน ‘..’

- ลอง preview ด

ต าแหนงของการเขยน JavaScript

- ต าแหนงสวนหวของเอกสาร HTML <head>

<script language=javascript>

…. ค าสง JavaScript……..

</script>

</head>


75

- ต าแหนงสวนตวของเอกสาร HTML <body>

…. Tag ค าสง HTML……..

<script language=javascript>

…. ค าสง JavaScript……..

</script>

…. Tag ค าสง HTML……..

</body>

- เปนคา event ของแทกค าสง HTML <body onload=‚alert(‘Hello! Boy.’)‛ onunload=‚alert(‘Goodbye!’)‛>

- เกบไวในไฟลแยกตางหาก โดยมนามสกล .js <script language=‚javascript‛ type=‚text/javascript‛ src=‚unit1.js‛>

</script>

การใช javaScript อางองคณสมบต CSS

- javaScript สามารถอางองคณสมบต CSS ได โดยผาน object HTML โดยจะอางถง object HTML กอน และตามดวย .style.ชอคณสมบต CSS ดตวอยางตอไปน

document.getElementById(‚ชอobject‛).style.ชอคณสมบต=‛คาทก าหนด‛

document.getElementById(‚ชอobject‛).style.backgroundColor=‛red‛

document.getElementById(‚ชอobject‛).style.left=‛50px‛


76

Note

77

Chapter 6 Web design….. CSS

78

Chapter 06 web design……..…CSS

Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS) “ภาษาทใชในการปรบแตง

คณสมบตของ html”

ในการก าหนดส รปแบบ และคณสมบตตางๆ หากก าหนด

เหมอนๆกนในหลายๆจดของเวบเพจ สามารถสรางชด รปแบบ

เกบไวเรยกใชงานไดในรปแบบ Style sheet โดยสามารถเรยกใช

งานไดในลกษณะตางๆกน คอ ใชก าหนด คาสวนตางๆเฉพาะ

หนานนๆ โดยก าหนดไวทสวน head (Embedded Style Sheet)

ใชก าหนดเฉพาะ tag โดยแทนทจะใช tag และ attribute ใช

ค าสง style แทน (Inline Style Sheet) ใชก าหนด คาตางๆ

ส าหรบหนาเวบเพจทเรยกมาใช โดยสราง style sheet เปนไฟล

ไว แลวใหเวบเพจทตองการใช เรยกใช โดยค าสง Link rel ในสวน

head (Linked Style Sheet) ใชก าหนด คาเมอเรยกใชจากชอ

style sheet ทตงไว (Class และ ID)

79



2. Tag (Element Style) - ใชชอตรงกบ tag ท

ตองการใชงาน - ปรบแตง tag นนๆ

ทนททกทในหนางาน

1. Class Style (Template)

- ตงชออะไรกได, มจด (.) น าหนา, ไมเวนวรรค

- ปรบแตงเฉพาะสงทเลอก

3. ID Style (object) [Advanced]

- ตงชอตรงกบ id ของวตถทตองการใชงาน, ม #น าหนา และ ไมเวนวรรค

- ปรบแตงวตถท id ตรงกน

ประโยชนของ CSS

CSS มคณสมบตมากกวา tag ของ html เชนการก าหนดกรอบใหขอความ รวมทงส รปแบบของขอความ

CSS นนก าหนดทตนของไฟล html หรอต าแหนงอน ๆ กได และสามารถมผลกบเอกสารทงหมด หมายถงก าหนดครงเดยวจดเดยวกมผลกบการแสดงผลทงหมดท าใหเวลาแกไขหรอปรบปรงท าไดสะดวกไมตองไลตามแก tag ตางๆ ทวทงเอกสาร

CSS สามารถก าหนดแยกไวตางหากจากไฟลเอกสาร html และสามารถน ามาใชรวมกบเอกสารหลายไฟลได การแกไขกแกเพยงจดเดยวกมผลกบเอกสารทงหมดได

80


การใช CSS รวมกบ HTML

แบบท 1 Inline styles

เปนการก าหนดคาส าหรบ tag เฉพาะ tag โดยใชค าสง style แทนการใช tag และ attribute

เชน new "style=...." วธนไมเปนทนยมมากนกเพราะไมไดลดความยงยากมากนกยงคลาย html อย เชน<p style="color:red; font-family:sans-serif">ขอความ </p>

/* แบบ inline style*/

.mywords {color:darkgreen; font-style:italic} /* แบบ inline class */

แบบนยงยากเพราะเวลาแกไขหรอปรบปรงตองท าหลายจดเหมอนเดมยงวนวายอยเวลาตองการน า style ไปก าหนดต าแหนงตางๆ ใช tag <div> และ <span> เชน <span style"color:green"> ขอความ </span>

การก าหนดลกษณะแบบนท าไดดวย <div>และ<span>ความแตกตางระหวางสองตวนคอ <div> นนจะเวนบรรทดวางกอนและหลงขอความ 1 บรรทด ซงทงสองตวนใชไดกบทง "style=" และ "class="

81



แบบท 2 Document style (Embedded Style Sheet)

ท าไดโดยการสราง Style ในสวน Head แลวก าหนดสวนตางๆ หากสวน Body ม tag ทก าหนดไวในสวน style กจะไดรบการก าหนดคาตามนน เชน <style>...</style>แบบนตองก าหนดในสวนของ <head>...</head>ซงเวลาแกไขกท าทนจดเดยวท าใหสะดวกขนมาก เชน <html> <head> <title>document Title Here</title> <style TYPE="text/css">  /* จบการซอนทตรงน*/ </style> </head> <body> <h1>Heading in navy sans-serif text </h1> Other text here. </body> </html>

82



แบบท 3 External style sheet (Linked style sheet)

การใช Style sheet วธน เปนการสราง style sheet ไวเปนไฟล และไฟล HTML ไฟลใดทตองการใช style sheet น กเรยกใชได โดยใชค าสง Link rel ในสวน head)

ลกษณะนก าหนด CSS ไวอกไฟลหนงตางหากแลวเรยกใชดวย tag <link> ในสวนของ <head> ของเอกสารเชนกน การใช แบบนท าใหใชรวมกนไดกบ html หลายไฟล แตจดเสยของมนกคอท าให browser ตองโหลดถงสองไฟลคอ html หนงกบ CSS อกหนง

83


การสราง CSS Style Sheet

สงหนงทควรจะท าคอ ควรรวบรวมการก าหนดรปแบบ

ตางๆของตวหนงสอในหนาเวปไวในทเดยวกนคอใน

ไฟล CSS ใหไดมากทสดเทาทจะท าได เพอทจะ

จดการใหรปแบบของหนาเวปตางๆ มลกษณะใน

ทศทางเดยวกนทงเวปไซด

ในกรณทออกแบบหนาเวปไซดโดยใช Tags DIV และ

CSS แทนการใช Table หรอใช Template ของ

หนาเวปทมไวใหแลวใน Dreamweaver(prebuilt

layout)โปรแกรมจะสรางไฟล CSS หรอ cascading

style sheet ให และก าหนดต าแหนงหรอรปแบบของ

tags div แตละอนเอาไว

ขางลางคอลสตของ style sheet แบบ external ท

สามารถรวบรวมเอาไวในไฟล CSS(style sheet แบบ

external คอแบบทแยกเปนไฟล CSS อกตวหนง แลว

attach หรอ link เขากบหนาเวปนนๆ ไมใชแบบ

internal ซงรวม code ของ CSS ไวในหนาเวปนน

เลย)

ก าหนดรปแบบของ Tag H1 ใหม ซง Tag H1 สวน

ใหญจะใชกบหวขอเรองในหนาเวปทเปนแบบตว

ใหญทสด

- ก าหนดรปแบบของ Tag H2 ใหม ซง Tag H2

สวนใหญจะใชกบหวขอเรองในหนาเวปทเปนแบบ

ตวใหญรองลงมา

- ก าหนดรปแบบของ Tag p หรอ paragraph ใหม

ซง Tag p กคอ Tag ของรปแบบตวหนงสอทจะใช

ในหนาเวปทจะแสดงออกมา ถาคณไมไดเลอกหรอ

เจาะจงใหใช Tag ตวอนกบตวหนงสอเหลานน

- ก าหนดรปแบบของ Tag a หรอ anchor ใหม Tag

a เปน Tag ทเอาไวก าหนด link การตงคาใหมกบ

Tag a จะก าหนดและเปลยนแปลงรปแบบของ

ตวหนงสอทใชเปน link

- ก าหนดรปแบบของเมนใหม

- การก าหนดรปแบบของตวหนงสอทเปน footer ซง

จะใชกบสวนลางสดของหนาเวป สวนใหญจะเปน

ขอมลของชอ ทอย และเบอรตดตอของบรษท

84

เครองมอใน CSS Styles Panel

- ทมมลางของ palette CSS Styles จะมเครองมอ ดงน - ใชเพอเชอมตอเอกสาร - ใชเพอสราง CSS ขนมาใหม - ใชเพอแกไข CSS - ใชลบ CSS

การน า CSS ออกมาจากหนา web เพอเกบไวเปนสวนกลาง

- click ท css ตวแรกทตองการเกบไวเปนสวนกลาง - กด shift ขณะ click เลอก css ตวสดทาย


85

- Click ขวาทสวนท highlight แลวเลอก Move CSS Rules


86

- โปรแกรมจะถามวา จะเอา css ทเพงเลอกไปรวมกบ *.css ทมอย หรอ จะสราง *.css ขนมาใหม

- ถาจะน าไปรวมกบ *.css กใหไป click ท Browse แลวเลอก file

- ถาจะสราง *.css ขนมาใหม แนะน าให สราง folder เพอเกบ file css โดยเฉพาะ เพอไมไปปะปนกบ file อน

- เวลาทเราตองการใช *.css กไป click ทปม Attach Style Sheet แลงคอยไป browse หา file.css ทตองการ


87

การสรางไฟล CSS แบบ external ท าไดโดยการท าตามขนตอนขางลางน

1. ไปทเมน File แลวเลอก New

2. ตรงชองของตวเลอก Page Type เลอก CSS

3. กดปม Create แลว save ไฟลไวในโฟลเดอรเดยวกบทเกบเวปไซดคณ แตผมแนะน าใหสรางโฟลเดอร

ยอยขนมาใหม อาจจะตงชอวา style หรออะไรกไดทจะท าใหคณรวาโฟลเดอรนนเกยวกบ style sheet แลว

กตงชอไฟล แลวก save ไฟลไปในนน ไฟลตวนนจะม extension หรอนามสกลเปน .css

สามารถสราง rule หรอการก าหนด style ของ css ขนใหมไดโดยการคลกทไอคอน New CSS Rule


88

จะม dialog box ของ New CSS Rule ขนมา

ถาตองการตง style ของตวเอง ซงจะสามารถใชใสไปใน Tag ของ Html ตวใดกได กเลอก Class โดยท า

ตามขนตอนขางลาง

1. ตรงสวนของ Selector Type: เลอก Class

2. ตงชอโดยพมพจดน าหนา(.) เชน .heading

3. ตรงสวนของ Define in: กเลอก style_main.css หรอชออนๆ แลวกคลกทปม OK

ถาตองการเปลยนแปลง style ของ Tag ทมอยแลวใน code Html กเลอก Tag โดยท าตามขนตอนขางลาง

1. ตรงสวนของ Selector Type: เลอก Tag


89

2. เลอก Tag ทตองการจะเปลยนแปลงรปแบบจากเมนทใหเลอกทางขวาของ Tag: เชน h1 อยางในรป

3. ตรงสวนของ Define in: เลอก style_main.css หรอชออน แลวกคลกทปม OK

จะม dialog box ของ CSS Rule Definition ขนมา สามารถตงวาจะใชฟอนตอะไร ขนาดเทาไหร ม style

แบบไหน แลวกอนๆอกมากมาย ในหมวดตางๆ dialog box ตวนได เมอตงเสรจแลว คลก OK

การเปดด Cascading Style Sheet (CSS)

- ดทเมน Window เลอก CSS Styles

- Click ท All เพอด CSS ทมอยซงบางตว จะถกโปรแกรมสรางขนเอง เชน Style1, Style2, body, body td, th


90

- Click ท body จะเหนคณสมบตตางของ CSS body

การท าใหรปภาพ ไมมเสนขอบ

- ใน DreamWeaver CS3 นนเวลาใส link ใหกบรปภาพ จะท าใหเกดกรอบของรปภาพขนมา สามารถแกไขไดโดยการสรง CSS ขนมาตามตวอางขางลาง


91

- ในหนา CSS Rule ใหก าหนดตามภาพขางลาง

สราง CSS Border เปนเสนประ

Concept

- Border = เสนประ

- Bgcolor = black - Font = yellow 14 px bold


92

- new CSS ขนมา ท าตามรปขางลาง


93


- สงเกต CSS ทเราพงสรางขนมา

CSS ทเปน Class จะมา list อยทชอง Style ท

Property ดานลาง ลองดตวอยาง ขอความทก ากบ

ดวย CSS ตวน

94

- รปภาพกสามารถก ากบดวย CSS นได แตในสวนทเปน background จะมองไมเหน เพราะโดนทบดวยรปภาพทงหมด

การใช tag <div> แทนท Table

- page ทมตารางซอนกนหลายๆตาราง จะท าใหเกด code หลายบรรทด เราสามารถ clear code เหลานไดโดยใช CSS เขามาจดการ

- ตวอยางน มการซอนของตารางหลายชน โดยดไดจาก Layout -> Expanded


95

- เมอเราน า mouse ไป click อยในเซลตารางไหน ดานลางจะบอกรายละเอยดใหหมด เปน เซลทซอนอยกตาราง กเซล

- ตวอยางของตารางขางลางก าหนดใหม CellPad = 10 เราจะท าการลบตารางนทง แลวสราง CSS ทก าหนด CellPad มาก ากบขอความแทน

96

- ลองสงเกตด ตารางทมการก าหนด CellPad

- ทนททเรลบตารางออก สงเกตทหนา Code view วา cursor จะไปกระพรบอยหลง td tag

- สามารถตงชอ id ไดเลย

- พอตงชอเสรจ ท CSS Styles Palette จะใหเรากดปม Refresh

97

- หลงจากกดปม Refresh โปรแกรมจะชวย สรางชอใหตรงกบชอ id ทเราพงตง

- ลบค าทเกนมาออกไป

- ก าหนดคาตามภาพ

- สงเกตหนาตาของขอความจากหนา Layout Expanded

98

- สงเกตหนาตาของขอความจากหนาปกต

รวมเสนแบงเขต และ ขอความเอาไวดวยกน

- ตวอยางนจดวางอยในตารางทม 2 คอลมน

- ลองดใน Layout Expanded

99

ลบขอความและตารางออก

100

- เมอตารางถกลบออก Cursor จะไปกระพรบอยท td tag

- ตงชอ id

- Click Refresh

- หลงจากกดปม Refresh โปรแกรมจะชวย สรางชอใหตรงกบชอ id ทเราพงตง

101

- ลบค าทเกนมาออกไป

- ก าหนดคาตามภาพ ในสวนของ Background image ใหเลอกภาพ เสนแบงเขต และ no-repeat

- สงเกตหนาตาของขอความจากหนา Layout Expanded


102

- สงเกตหนาตาของขอความจากหนาปกต

- Preview ด หนาตาไมแตกตางจากตอนแรกเลย


103

การท า List

- ใช code <ul>

<li> </li>

</ul>


104

เมอเรมแรกทจะท าการออกแบบเวบไซตผอานหลายทานอาจจะไมทราบ

ขนตอนการคนหาขอมลหรอไอเดยในการผลตเวบไซต ผเขยนเชอวา

ผอานคงพอทจะได ไอเดยในการออกแบบเวบไซต ทงในเรองของการ

เรมตนกระบวนการคด เตรยมขอมล และตลอดถงกระบวนการออกแบบ

เวบไซต เพอทจะสอสารสงทตองการจะน าเสนอ ผานกระบวนการ

ออกแบบและผลตเวบไซตทจะออกมาตรงตามเปาหมายของผรบสาร

มากทสด

ตองไดอะไรจากหนงสอเลมน

105

บรรณานกรม

1. Jason Beaird, The Principles of Beautiful Web design Second Edition: Site point Publishing Co.,

November 2010. 170 pages

2. Dan Cederholm, Web Standard Solutions: Apress, 2009, 300 pages

3. Cameron Adams, Jina Bolton, David Johnson, Steve Smith, Jonathan Snook, The art & science

of CSS: SitePoint, 2007. 224 pages

4. Rachel Andrew, The CSS anthology: 101 essential tips, tricks & hacks: SitePoint Pty. Ltd., 2004.

391 pages

5. Web page anatomy (16 th June 2011). By Jason Beaird เขาถงไดจาก

http://designfestival.com/web-page-anatomy.

http://www.google.com/search?tbo=p&tbm=bks&q=inauthor:%22Dan+Cederholm%22

http://www.google.com/search?tbo=p&tbm=bks&q=inauthor:%22Cameron+Adams%22&source=gbs_metadata_r&cad=5

http://www.google.com/search?tbo=p&tbm=bks&q=inauthor:%22Jina+Bolton%22&source=gbs_metadata_r&cad=5

http://www.google.com/search?tbo=p&tbm=bks&q=inauthor:%22David+Johnson%22&source=gbs_metadata_r&cad=5

http://www.google.com/search?tbo=p&tbm=bks&q=inauthor:%22Steve+Smith%22&source=gbs_metadata_r&cad=5

http://www.google.com/search?tbo=p&tbm=bks&q=inauthor:%22Jonathan+Snook%22&source=gbs_metadata_r&cad=5

http://www.google.com/search?tbo=p&tbm=bks&q=inauthor:%22Rachel+Andrew%22&source=gbs_metadata_r&cad=9

http://designfestival.com/web-page-anatomy

[WEB DESIGN] The Markup and Style

Documents

Transcript of [WEB DESIGN] The Markup and Style