[WEB DESIGN] The Markup and Style
Transcript of [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
Chapter 01 web design…..How to?
องคประกอบของการออกแบบเวบไซต
[1. ความเรยบงาย (Simplicity)]
[หมายถง การจ ากดองคประกอบเสรมใหเหลอเฉพาะองคประกอบหลก กลาวคอในการสอสารเนอหากบผใชนน เราตองเลอกเสนอสงทเราตองการน าเสนอจรง ๆ ออกมาในสวนของกราฟก สสน ตวอกษรและภาพเคลอนไหว ตองเลอกใหพอเหมาะ ถาหากมมากเกนไปจะรบกวนสายตาและสรางความค าราญตอผใชตวอยางเวบไซตทไดรบการออกแบบทด ไดแก เวบไซตของบรษทใหญ ๆ อยางเชน Apple Adobe Microsoft ทมการออกแบบเวบไซตในรปแบบทเรยบงาย ไมซบซอน และใชงานอยางสะดวก ]
[2. ความสมาเสมอ (Consistency)]
[หมายถง การสรางความสม าเสมอใหเกดขนตลอดทงเวบไซต โดยอาจเลอกใชรปแบบเดยวกนตลอดทงเวบไซตกได เพราะถาหากวาแตละหนาในเวบไซตนนมความแตกตางกนมากจนเกนไป อาจท าใหผใชเกดความสบสนและไมแนใจวาก าลงอยในเวบไซตเดมหรอไม เพราะฉะนนการออกแบบเวบไซตในแตละหนาควรทจะมรปแบบ สไตลของกราฟก ระบบเนวเกชน (Navigation) และโทนสทมความคลายคลงกนตลอดทงเวบไซต]
[3. ความเปนเอกลกษณ (Identity)]
[ในการออกแบบเวบไซตตองค านงถงลกษณะขององคกรเปนหลก เนองจากเวบไซตจะสะทอนถงเอกลกษณและลกษณะขององคกร การเลอกใชตวอกษร ชดส รปภาพหรอกราฟก จะมผลตอรปแบบของเวบไซตเปนอยางมาก ตวอยางเชน ถาเราตองออกแบบเวบไซตของธนาคารแตเรากลบเลอกสสนและกราฟกมากมาย อาจท าใหผใชคดวาเปนเวบไซตของสวนสนกซงสงผลตอความเชอถอขององคกรได ]
6
Chapter 01 web design…..How to?
องคประกอบของการออกแบบเวบไซต (ตอ)
[4. เนอหา (Useful Content)]
[ถอเปนสงส าคญทสดในเวบไซต เนอหาในเวบไซตตองสมบรณและไดรบการปรบปรงพฒนาใหทนสมยอยเสมอ ผพฒนาตองเตรยมขอมลและเนอหาทผใชตองการใหถกตองและสมบรณ เนอหาทส าคญทสดคอเนอหาททมผพฒนาสรางสรรคขนมาเอง และไมไปซ ากบเวบอน เพราะจะถอเปนสงทดงดดผใชใหเขามาเวบไซตไดเสมอ แตถาเปนเวบทลงคขอมลจากเวบอน ๆ มาเมอใดกตามทผใชทราบวา ขอมลนนมาจากเวบใด ผใชกไมจ าเปนตองกลบมาใชงานลงคเหลานนอก]
[5. ระบบเนวเกชน (User-Friendly Navigation)]
[เปนสวนประกอบทมความส าคญตอเวบไซตมาก เพราะจะชวยไมใหผใชเกดความสบสนระหวางดเวบไซต ระบบเนวเกชนจงเปรยบเสมอนปายบอกทาง ดงนนการออกแบบเนวเกชน จงควรใหเขาใจงาย ใชงานไดสะดวก ถามการใชกราฟกกควรสอความหมาย ต าแหนงของการวางเนวเกชนกควรวางใหสม าเสมอ เชน อยต าแหนงบนสดของทกหนาเปนตน ซงถาจะใหดเมอมเนวเกชนทเปนกราฟกกควรเพมระบบเนวเกชนทเปนตวอกษรไวสวนลางดวย เพอชวยอ านวยความสะดวกใหกบผใชทยกเลกการแสดงผลภาพกราฟกบนเวบเบราเซอร]
]
[6. คณภาพของสงทปรากฏใหเหนในเวบไซต (Visual Appeal)]
[ลกษณะทนาสนใจของเวบไซตนน ขนอยกบความชอบสวนบคคลเปนส าคญ แตโดยรวมแลวกสามารถสรปไดวาเวบไซตทนาสนใจนนสวนประกอบตาง ๆ ควรมคณภาพ เชน กราฟกควรสมบรณไมมรอยหรอขอบขนบนไดใหเหน ชนดตวอกษรอานงายสบายตา มการเลอกใชโทนสทเขากนอยางสวยงาม เปนตน ]
7
Chapter 01 web design…..How to?
องคประกอบของการออกแบบเวบไซต (ตอ)
[7. ความสะดวกของการใชในสภาพตาง ๆ (Compatibility)]
[การใชงานของเวบไซตนนไมควรมขอบจ ากด กลาวคอ ตองสามารถใชงานไดดในสภาพแวดลอมทหลากหลาย ไมมการบงคบใหผใชตองตดตงโปรแกรมอนใดเพมเตม นอกเหนอจากเวบบราวเซอร ควรเปนเวบทแสดงผลไดดในทกระบบปฏบตการ สามารถแสดงผลไดในทกความละเอยดหนาจอ ซงหากเปนเวบไซตทมผใชบรการมากและกลมเปาหมายหลากหลายควรใหความส าคญกบเรองนใหมาก ]
[8. ความคงทในการออกแบบ (Design Stability)]
[ถาตองการใหผใชงานรสกวาเวบไซตมคณภาพ ถกตอง และเชอถอได ควรใหความส าคญกบการออกแบบเวบไซตเปนอยางมาก ตองออกแบบวางแผนและเรยบเรยงเนอหาอยางรอบคอบ ถาเวบทจดท าขนอยางลวก ๆ ไมมมาตรฐานการออกแบบและระบบการจดการขอมล ถามปญหามากขนอาจสงผลใหเกดปญหาและท าใหผใชหมดความเชอถอ]
[9. ความคงทของการทางาน (Function Stability)]
[ระบบการท างานตาง ๆ ในเวบไซตควรมความถกตองแนนอน ซงตองไดรบการออกแบบสรางสรรคและตรวจสอบอยเสมอ ตวอยางเชน ลงคตาง ๆ ในเวบไซต ตองตรวจสอบวายงสามารถลงคขอมลไดถกตองหรอไม เพราะเวบไซตอนอาจมการเปลยนแปลงไดตลอดเวลา ปญหาทเกดจากลงค กคอ ลงคขาด ซงพบไดบอยเปนปญหาทสรางความร าคาญกบผใชเปนอยางมาก]
8
Chapter 01 web design…..How to?
หลกในการออกแบบเวบไซต
ในการออกแบบเวบไซตนนประกอบดวยกระบวนการตาง ๆ มากมาย เชน การออกแบบโครงสราง ลกษณะหนาตา หรอการเขยนโปรแกรม แตมหลายคนทพฒนาเวบไซต โดยขาดการวางแผนและท างานไมเปนระบบ ตวอยางเชน การลงมอออกแบบโดยการใชโปรแกรมชวยสรางเวบ เนอหาและรปแบบกเปนไปตามทนกขนไดขณะนน และเมอเหนวาดดแลวกเปดตวเลย ท าใหเวบนนมเปาหมายและแนวทางทไมแนนอน ผลลพธทไดจงเสยงกบความลมเหลวคอนขางมาก
ความลมเหลวทพบเหนไดทวไป ไดแก เวบทแสดงขอความวาอยระหวางการกอสราง ( Under Construction หรอ Coming soon) ซงแสดงใหเหนถงการขาดการวางแผนทดบางเวบถอไดวาตายไปแลว เนองจากขอมลไมทนสมย ขาดการพฒนาปรบปรงเทคโนโลยลาสมย ลงคผดพลาด สงเหลานแสดงใหเหนถงการขาดการดแล ตรวจสอบและพฒนาใหทนสมยอยเสมอ
การออกแบบเวบไซตอยางถกตองจะชวยลดความผดพลาดเหลาน และชวยลดความเสยงทจะท าใหเวบประสบความลมเหลว การออกแบบเวบไซตทดตองอาศยการออกแบบและจดระบบขอมลอยางเหมาะสม
กระบวนการแรกของการออกแบบเวบไซตคอการก าหนดเปาหมายของเวบไซตก าหนดกลมผใช ซงการจะใหไดมาซงขอมล ผพฒนาตองเรยนรผใช หรอจ าลองสถานการณ สงเหลานจะชวยใหเราสามารถออกแบบเนอหาและการใชงานเวบไซตไดอยางเหมาะสม ตรงกบความตองการของผใชอยางแทจรง
ก าหนดเปาหมายของเวบไซต
ขนตอนแรกของการออกแบบเวบไซต คอการก าหนดเปาหมายของเวบไซตใหแนชดเสยกอน เพอจะไดออกแบบการใชงานไดตรงกบเปาหมายทไดตงเอาไว โดยทวไปมกจะเขาใจวาการท าเวบไซตมจดมงหมายเพอบรการขอมลของหนวยงานหรอองคกรเทานน แตในความเปนจรงแลว เวบไซตแตละแหงกจะมเปาหมายของตนเองแตกตางกนออกไป
9
Chapter 01 web design…..How to?
ก าหนดกลมผใชเปาหมาย
ผออกแบบเวบไซตจ าเปนตองทราบกลมผใชเปาหมายทเขามาใชบรการเวบไซต เพอทจะไดตอบสนองความตองการของผใชไดอยางชดเจน ตวอยางเชนเวบไซตทมกลมผใชหลากหลาย เชน เซรชเอนจน เวบทา และเวบไดเรกทอร แตเวบไซตสวนใหญนนจะตอบสนองความตองการเฉพาะกลมเทานน ไมส าหรบทกคน เพราะคณไมสามารถตอบสนองความตองการของคนทหลากหลายไดในเวบไซตเดยว
สงทผใชตองการจากเวบ
หลงจากทไดเปาหมายและกลมเปาหมายของเวบไซตแลว ล าดบตอไปคอการออกแบบเวบไซตเพอดงดดผใชงานใหไดนานทสด ดวยการสรางสงทนาสนใจเพอดงดดผใชโดยทวไปแลว สงทผใชคาดหวงจากการเขาชมเวบไซตหนง ไดแก
- ขอมลและการใชงานทเปนประโยชน - ขาวและขอมลทนาสนใจ - การตอบสนองตอผใช - ความบนเทง - ของฟร
ขอมลหลกทควรมอยในเวบไซต
เมอเราทราบถงความตองการทผใชตองการไดรบเมอเขาชมเวบไซตหนง ๆ แลว เรากออกแบบเวบไซตใหมขอมลทผใชตองการ ซงขอมลตอไปน เปนสงทผใชสวนใหญคาดหวงจะไดรบเมอเขาไปชมเวบไซต
- ขอมลเกยวกบบรษท - รายละเอยดของผลตภณฑ - ขาวความคบหนาและขาวจากสอมวลชน - ค าถามยอดนยม - ขอมลในการตดตอ
10
Chapter 01 web design…..How to?
[ออกแบบหนาเวบไซต (Page Design)]
หนาเวบเปนสงแรกทผใชจะไดเหนขณะทเปดเขาสเวบไซต และยงเปนสงแรกทแสดงถงประสทธภาพในการออกแบบเวบไซตอกดวย หนาเวบจงเปนสงส าคญมาก เพราะเปนสอกลางใหผชมสามารถใชประโยชนจากขอมลของระบบงานของเวบไซตนนได โดยปกตหนาเวบจะประกอบดวย รปภาพ ตวอกษร สพน ระบบเนวเกชน และองคประกอบอน ๆ ทชวยสอความหมายของเนอหาและอ านวยความสะดวกตอการใชงาน
หลกส าคญในการออกแบบหนาเวบกคอ การใชรปภาพและองคประกอบตาง ๆ รวมกนเพอสอความหมาย เกยวกบเนอหาหรอลกษณะส าคญของเวบไซต โดยมเปาหมายส าคญเพอการสอความหมายทชดเจนและนาสนใจ บนพนฐานของความเรยบงายและความสะดวกของผใช
11
Chapter 01 web design…..How to?
[การออกแบบเวบไซต ตองค านงถง]
1. ความเรยบงาย ไดแก มรปแบบทเรยบงาย ไมซบซอน และใชงานไดสะดวก ไมมกราฟกหรอตวอกษรทเคลอนไหวอยตลอดเวลา ชนดและสของตวอกษรไมมากจนเกนไปท าใหวนวาย
2. ความสม าเสมอ ไดแก ใชรปแบบเดยวกนตลอดทงเวบไซต เชน รปแบบของหนา สไตลของกราฟก ระบบเนวเกชนและโทนส ควรมความคลายคลงกนตลอดทงเวบไซต
3. ความเปนเอกลกษณ การออกแบบเวบไซตควรค านงถงลกษณะขององคกร เพราะรปแบบของเวบไซตจะสะทอนถงเอกลกษณและลกษณะขององคกรนน ๆ เชน ถาเปนเวบไซตของทาง ราชการ จะตองดนาเชอถอไมเหมอนสวนสนก ฯลฯ
4. เนอหาทมประโยชน เนอหาเปนสงทส าคญทสดในเวบไซต ดงนนควรจดเตรยมเนอหาและขอมลทผใชตองการใหถกตอง และสมบรณ มการปรบปรงและเพมเตมใหทนเหตการณอยเสมอ เนอหาไมควรซ ากบเวบไซตอน จงจะดงดดความสนใจ
5. ระบบเนวเกชนทใชงานงาย ตองออกแบบใหผใชเขาใจงายและใชงานสะดวก ใชกราฟกทสอความหมายรวมกบค าอธบายทชดเจน มรปแบบและล าดบของรายการทสม าเสมอ เชน วางไว ต าแหนงเดยวกนของทกหนา
12
Chapter 01 web design…..How to?
[การออกแบบเวบไซต ตองค านงถง] [ตอ]
6. ลกษณะทนาสนใจ หนาตาของเวบไซตจะตองมความสมพนธกบคณภาพขององคประกอบตางๆ เชน คณภาพของกราฟกทจะตองสมบรณ การใชส การใชตวอกษรทอานงาย สบายตา การใชโทนสทเขากนลกษณะหนาตาทนาสนใจนนขนอยกบความชอบของแตละบคคล
7. การใชงานอยางไมจ ากด ผใชสวนใหญสามารถเขาถงไดมากทสดเลอกใชบราวเซอรชนดใดกไดในการเขาถงเนอหาสามารถแสดงผลไดทกระบบปฏบตการและความละเอยดหนาจอตางๆ กนอยางไมมปญหาเปนลกษณะส าคฐส าหรบผใชทมจ านวนมาก
8. คณภาพในการออกแบบ การออกแบบและเรยบเรยงเนอหาอยาง
รอบคอบ สรางความรสกวาเวบไซตม….คณภาพ ถกตอง และเชอถอได
9. ลงคตางๆ จะตองเชอมโยงไปหนาทมอยจรงและถกตอง ระบบการท างานตางๆ ในเวบไซตจะตองมความแนนอนและท าหนาทไดอยางถก
13
Chapter 01 web design…..How to?
การออกแบบโครงสรางเวบไซต (Site Structure Design)
โครงสรางเวบไซท ( Site Structure ) เปนแผนผงของการล าดบเนอหาหรอการจดวางต าแหนงเวบเพจทงหมด ซงจะท าใหเรารวาทงเวบไซทประกอบไปดวยเนอหาอะไรบาง และมเวบเพจหนาไหนทเกยวของเชอมโยงถงกน ดงนนการออกแบบโครงสรางเวบไซทจงเปนเรองส าคญ เปรยบเสมอนกบการเขยนแบบอาคารกอนทจะลงมอสราง เพราะจะท าใหเรามองเหนหนาตาของเวบไซทเปนรปธรรมมากขน สามารถออกแบบระบบเนวเกชนไดเหมาะสม และเปนแนวทางการท างานทชดเจน ส าหรบขนตอนตอๆไป นอกจากนโครงสรางเวบไซททดยงชวยใหผชมไมสบสนและคนหาขอมลทตองการไดอยางรวดเรว
วธการจดโครงสรางเวบไซทสามารถท าไดหลายแบบ แตแนวคดหลกๆทนยมใชกนมอย 2 แบบคอ
จดตามกลมเนอหา ( Content-based Structure ) จดตามกลมผชม ( User-based Structure )
รปแบบของโครงสรางเวบไซท
เราสามารถวางรปแบบโครงสรางเวบไซทไดหลายแบบตามความเหมาะสม เชน
แบบเรยงล าดบ ( Sequence ) เหมาะส าหรบเวบไซททมจ านวนเวบเพจไมมากนก หรอเวบไซททมการน าเสนอขอมลแบบทละขนตอน
แบบระดบชน ( Hierarchy ) เหมาะส าหรบเวบไซททมจ านวนเวบเพจมากขน เปนรปแบบทเราจะพบไดทวไป
แบบผสม ( Combination )
เหมาะส าหรบเวบไซททซบซอน เปนการ
น าขอดของรปแบบทง 2 ขางตนมาผสม
กน
14
Chapter 01 web design…..How to?
การใชสในการออกแบบเวบไซต
การสรางสสนบนหนาเวบเปนสงทสอความหมายของเวบไซตไดอยางชดเจน
การเลอกใชสใหเหมาะสม กลมกลน ไมเพยงแตจะสรางความพงพอใจใหกบผใช แตยง
สามารถท าใหเหนถงความแตกตางระหวางเวบไซตได สเปนองคประกอบหลกส าหรบ
การตกแตงเวบ จงจ าเปนอยางยงทจะตองท าความเขาใจเกยวกบการใชส
ระบบสทแสดงบนจอคอมพวเตอร มระบบการแสดงผลผานหลอดล าแสงท
เรยกวา CRT (Cathode ray tube) โดยมลกษณะระบบสแบบบวก อาศยการผสมของของ
แสงสแดง สเขยว และสน าเงน หรอระบบส RGB สามารถก าหนดคาสจาก 0 ถง 255 ได
จากการรวมสของแมสหลกจะท าใหเกดแสงสขาว มลกษณะเปนจดเลก ๆ บนหนาจอไม
สามารถมองเหนดวยตาเปลาได จะมองเหนเปนสทถกผสมเปนเนอสเดยวกนแลว จดแต
ละจดหรอพกเซล (Pixel) เปนสวนประกอบของภาพบนหนาจอคอมพวเตอร โดยจ านวน
บตทใชในการก าหนดความสามารถของการแสดงสตาง ๆ เพอสรางภาพบนจอนน
เรยกวา บตเดป (Bit-depth) ในภาษา HTML มการก าหนดสดวยระบบเลขฐานสบหก ซง
มเครองหมาย (#) อยดานหนาและตามดวยเลขฐานสบหกจ านวนอกษรอก 6 หลก โดย
แตละไบต (byte) จะมตวอกษรสองตว แบงออกเปน 3 กลม เชน #FF12AC การใช
ตวอกษรแตละไบตนเพอก าหนดระดบความเขมของแมสแตละสของชดส RGB โดย 2
หลกแรก แสดงถงความเขมของสแดง 2 หลกตอมา แสดงถงความเขมของสเขยว 2 หลก
สดทายแสดงถงความเขมของสน าเงน
15
Chapter 01 web design…..How to?
การใชสในการออกแบบเวบไซต [ตอ]
สมอทธพลในเรองของอารมณการสอความหมายทเดนชด กระตนการรบรทางดาน
จตใจมนษย สแตละสใหความรสก อารมณทไมเหมอนกน สบางสใหความรสกสงบ บาง
สใหความรสกตนเตนรนแรง สจงเปนปจจยส าคญอยางยงตอการออกแบบเวบไซต
ดงนนการเลอกใชโทนสภายในเวบไซตเปนการแสดงถงความแตกตางของสทแสดงออก
ทางอารมณ มชวตชวาหรอเศราโศก รปแบบของสทสายตาของมนษยมองเหน สามารถ
แบงออกเปน 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
บอกความเปนเอกลกษณของบรษท
จดจ าไดงาย
นยมไวสวนบนสดของเวบไซต
Chapter 02 The principle of web design
WEB PAGE ANATOMY
1 .Containing Block
o Liquid
o Fixed
20
Chapter 02 The principle of web design
3. Navigation
งายและสะดวกในการใชงาน
ผใชคาดหวงวาจะเหนไดทสวนบนของเวบไซต
เมนหลกควรจะอยกอนทจะเลอนหนาเวบไซตลง
4. Content
สวนเนอหา เปนหวใจหลกของเวบไซต
สามารถท าใหผใชตดสนใจอานตอหรอจะออกจากเวบไซต ภายในเวลาไมนานได
ถาผใชไมสามารถหาขอมลทตวผใชสนใจได
21
Chapter 02 The principle of web design
5. Footer
นยมน าบทความทผใชเขาถงบอย ๆ หรอลงคทเกยวของมาไวท Footer
6. White space
ชวยให design ดไมอดอดจนเกนไป
การม White space มความส าคญเทยบเทากบ การม content
22
Chapter 02 The principle of web design
GRID THEORY…….rule of thirds
กฎสามสวน กลาวไววา ไมวาภาพจะอยแนวตงหรอแนวนอนกตาม หากเราแบงภาพนน
ออกเปนสามสวน ทงตามแนวตงและแนวนอน แลวลากเสนแบงภาพทงสามเสน (ภาพท 2)
จะเกดจดตดกนทงหมด 4 จด ซงจดตดของเสนทงสน เปนต าแหนงทเหมาะสมส าหรบการจด
วางวตถทตองการเนนใหเปนจดเดนหลก สวนรายละเอยดอนๆนน เปนสวนส าคญทรองลงมา
การจดวางต าแหนงจดเดนหลกไมจ าเปนจะตองจ ากดมากนก อาจถอเอาบรเวณใกลเคยงทง ส
จดนกได
ภาพท 1 ภาพท 2 ภาพท 3 ภาพท 4
23
Chapter 02 The principle of web design
Most Common Layout
Left column navigation
ขอด : ผใชสวนใหญคนเคย
ขอเสย : ขาดความคดสรางสรรค
24
Chapter 02 The principle of web design
Most Common Layout
Right column navigation
ขอด : Main content เปนสวนหลกทน าเสนอ
ขอเสย : บาง browser ไมสามารถ เปดดดานขวาสดได
25
Chapter 02 The principle of web design
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
Chapter 03 web design…………Guide
สวนหว (Header)
O สวนหวเปนสวนทผเยยมชมสวนใหญจะเหนเปนสวนแร
O เปนสวนทส าคญทสด มนเปนสงเดยวทจะแยก ใหเหนถงความแตกตางระหวางบลอก
ของคณกบบลอกอน ๆ นบลานบลอก
O เปนสงทแสดงถงเอกลกษณของบลอกคณเพอใหเกดการจดจ า
แนวทางการ Design web ยคใหม
30
Chapter 03 web design…………Guide
สวนเนอหา (Content Area)
O สวนเนอหาเปนสวนทผอานหรอผเยยมชม จะใชเวลาจดจออยนานทสด
O สวนเนอหางายตอการอาน
O ไมควรมสงทดงความสนใจผอานมากจนเกนไป
O สงส าคญอกสงหนงคอ ตองวางโครงสรางเนอหาใหดวาอะไร ส าคญทสดไปจนถง
ส าคญนอยทสด
แนวทางการ Design web ยคใหม
31
Chapter 03 web design…………Guide
เมนหลก (Primary Navigation)
O เมนหลกคอชดของลงคทจะน าพาไปสสวนของอน ๆ ทแตกตางกนอยางชดเจน (area)
O วางไวใกลกบสวนหว เพราะผเยยมชมสวนใหญจะคาดหวงวาเมนหลกจะตองอยแถวน
แนวทางการ Design web ยคใหม
32
Chapter 03 web design…………Guide
เมนรอง (Secondary Navigation)
O เมนรองคอชดของลงคทน าพาผเยยมชมไปยงสวนยอยอน ๆ ของเนอหาทอยในขอบเขต
เดยวกน(section)
O อยในรปแบบสวนดานขาง(sidebar
O เมนรองทดควรจะเปนลงคไปยงบทความ ทผเยยมชมคลกดมากทสด
แนวทางการ Design web ยคใหม
33
Chapter 03 web design…………Guide
หวเรอง (Headlines)
O หวเรองของแตละบทความมไวเพอดงดดความสนใจผอาน
O ยวเยาใหอานเนอหาทงหมดในทสด
O หวเรองของคณจะตองเดน โดยสามารถท าไดหลากหลายวธ
แนวทางการ Design web ยคใหม
34
Chapter 03 web design…………Guide
สวนแสดงความคดเหน (Comments)
O จะตองออกแบบใหบรเวณนดเปนการสนทนากน
O แยกแตละความคดเหนออกจากกน อาจจะดวยการก าหนดหมายเลขใหแตละความ
คดเหน
O แยกความคดเหนของเจาของบทความ ใหตางจากความคดเหนทวไป
แนวทางการ Design web ยคใหม
35
Chapter 03 web design…………Guide
สวนทายของบทความ (Post’s Footer)
O สวนทายของบทความจะอยระหวางดานลางบทความ บรรทดสดทายกบสวนแสดง
ความคดเหน
O สวนทชกจงผเยยมชม/ผอาน ไปยงบทความอน ๆ ทเกยวของ หรอ บทความทส าคญ
แนวทางการ Design web ยคใหม
36
Chapter 03 web design…………Guide
สวนทายของเวบไซต (Footer)
O สามารถน าเมนรองมาใสไวไดเพอลดความแออดของลงค ในเมนรองในดานขางเวบ
O ผอาน อานเนอหาจบแลว หรอ อานสวนแสดงความคดเหนเสรจแลว นบเปนชวงเวลาท
ดทคณจะไดน าเสนอ บทความอน ๆ ดวยการวางเมนรองไวในสวนทายเวบน
O ลงคทนาจะน ามาใสควรเปน บทความทมผอานมากทสด บทความแนะน า คณอาจจะ
ใสลงค เกยวกบเรา และ การตดตอไปดวย ถาหากเปาหมายของคณคอ ผเยยมชมเวบ
ตดตอคณ
แนวทางการ Design web ยคใหม
37
Chapter 03 web design…………Guide
โฆษณา (Advertisements)
O โฆษณาทจดวางไมถกท ดนาเกยจ อาจจะท าใหผเยยมชมเออมระอาเวบของคณ แทนท
คณจะไดเงนจากการคลกโฆษณา เขาจะไมกลบมาอกเลย
O หากคณออกแบบและวางโฆษณาไวอยางถกหลก เงนจากคาโฆษณามนกไมหนไปไหน
หรอก
แนวทางการ Design web ยคใหม
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
Chapter 04 web design………process
การจดเอกสาร 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
Chapter 04 web design………process
การ Copy text จาก word หรอ เอกสารอนๆ
ควร copy ไปใสใน notepad กอน [เปนการลาง tag ตางๆทอาจตดมา เชน Word จะม tag <p> (paragraph) ตดมาดวย] – click ขวาท desktop
Format -> Word Wrap
Copy ขอความมาใสใน Dream Weaver
เพราะฉะนน การเตรยมขอมลทด ควรพมพไวใน Text Document หรอ ใน Dream Weaver
43
Chapter 04 web design………process
การท าใหตวหนงสอไมตดขอบ 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
Chapter 04 web design………process
ปรบขนาด 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> มาประกอบกน
Chapter 05 web design………HTML
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=……> ใชก าหนดภาษาสครปต เชน
Chapter 05 web design………HTML
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 ขนมาใหเราเลอก
Chapter 05 web design………HTML
51
- พอเราพมพ s submenu กจะเลอนไปทตว s
- ถาเราเผลอ ท า submenu หายไป ใหกด Ctrl + Space Bar แลว submenu กจะ pop up ขนมาอก เมอได tag ทตองการแลวใหกด enter
- ท tag ปด พอพมพ </ โปรแกรม จะชวยใส code โดยดจากtagทอยใกลทสดใหโดยอตโนมต
- สงเกต tag ทมาครอบอย
Chapter 05 web design………HTML
52
- ลองเพมให NetDesign เปนตวเอยงดวย และ Party เปนตวหนาดวย จะสงเกตไดวา tag ทเพมเขามา จะมาครอบ tag ทมอยกอน ส าหรบ tag ทไมชนกน จะเอาอะไรขนกอนหลงกได โดยปกตแลว text จะฟงค าสงของ code ทอยใกลทสด
- หามใส tag overlap กน ดงตวอยางขางลาง เพราะ code จะไมท างาน และเราสามารถ สงเกตสของ code ดไดวา ไมเปนสน าเงนอยางทควรจะเปน
Chapter 05 web design………HTML
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 ควบคมขนาดของเสนขอบของภาพ
Chapter 05 web design………HTML
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
Chapter 05 web design………HTML
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‛
Chapter 05 web design………HTML
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
Chapter 05 web design………HTML
60
- ถาลมใส /> เพอปด tag ผลจะเปนดงภาพขางลาง
Tag <marquee>………….</marquee> [ตวหนงสอวง]
- ทดลองใสชอมลยาวๆ ใน page แลว highlight ขอความทงหมด จากนน clickขวา เลอก Insert Tag
Chapter 05 web design………HTML
61
- เลอก HTML tags ตามดวย marquee ตามดวย Insert และ Close ตามล าดบ
- สงเกตลกษณะของ tag
Chapter 05 web design………HTML
62
- ด attribute โดยการวาง cursor ไวหลง tag marquee ดงภาพ
- จากนนกด space bar จะม attribute pop up ขนมา มความกวาง ความสง bgcolor ฯลฯ
- ลอง preview ดผลทได คอ ตวหนงสอจะวงจากขวาไปซาย
Chapter 05 web design………HTML
63
- ลองเพม attribute bgcolor จะม color palette pop up ขนมา ลองเลอกมาสกสหนง
- Code ส จะเขาไปอยในเครองหมาย ‚…..‛ แตใน Design page จะไมมอะไรเปลยนแปลง
แตพอ preview ด จะมผลดงภาพขางลาง สทเกดขน จะครอบ text ทงหมด และความยาวของส กจะเตม
ความกวางของ page
Chapter 05 web design………HTML
64
- ลองก าหนดขอบเขตความกวาง ความยาวของ text โดยการน า cursor ไปวางหลง tag marquee
- กด space bar เลอก height
- หลงจากเลอก height พอกด enter จะเหนวา cursor จะไปกระพรบอยใน "….."
Chapter 05 web design………HTML
65
- ลองใส 200 แลว preview ด
- คราวนลองก าหนดความกวางเปน 200
Chapter 05 web design………HTML
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 เขาไป เปน
การปรบคาจรง
Chapter 05 web design………HTML
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>
Chapter 05 web design………HTML
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 กจะวงตอ
Chapter 05 web design………HTML
70
- ทดลองสรางปมค าสง เพอควบคมให text หยด หรอ เลนตอ [Event] โดยพมพค าวา Start และ Stop ไวเหนอ text [object.method()]
- Highlight ค าวา Start แลว ใสเครองหมาย # ในชอง Link
- ท Code view น า cursor ไปวาหลง "#" แลวกด Space bar
- เลอก onclick
Chapter 05 web design………HTML
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
Chapter 05 web design………HTML
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()">
Chapter 05 web design………HTML
73
Rollover Image [mouse แตะภาพแลวเปลยนเปนอกภาพ]
- Insert รปภาพทจะโชวใน page สงเกต code ทเกดขน
- ใส event onmouseout=this.scr= แลวใหใสเครองหมาย '..' เตรยมไวกนลม กรณตองใสค ายาวๆ
- ในเครองหมาย '..' ใหระบภาพเดมกอน
- จากนนเพม event onmouseover เพอใหรปภาพเปลยน
- น า object ทตองการใหเกด event ไปใสใน ‚….‛
Chapter 05 web design………HTML
74
- ระบแหลงของ object ใน ‘….’ [อยาลมพมพ ‘..’ เตรยมไวเลย]
- ระบภาพทจะให ปรากฎแทนทลงใน ‘..’
- ลอง preview ด
ต าแหนงของการเขยน JavaScript
- ต าแหนงสวนหวของเอกสาร HTML <head>
<script language=javascript>
…. ค าสง JavaScript……..
</script>
</head>
Chapter 05 web design………HTML
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‛
Chapter 05 web design………HTML
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
Chapter 06 web design……..…CSS
Cascading Style Sheet (CSS)
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
Chapter 06 web design……..…CSS
การใช 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
Chapter 06 web design……..…CSS
Cascading Style Sheet (CSS)
แบบท 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"> <!-- /* ตวอยางเดม- ซอนเพอไมให browserทไมสนบสนน CSS มปญหา*/ h1,h2,h3 {font-family: sans-serif; color: navy} /*แบบนเวลาแก แกทนจดเดยว*/ --> /* จบการซอนทตรงน*/ </style> </head> <body> <h1>Heading in navy sans-serif text </h1> Other text here. </body> </html>
82
Chapter 06 web design……..…CSS
Cascading Style Sheet (CSS)
แบบท 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
Chapter 06 web design……..…CSS
การสราง 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 ตวสดทาย
Chapter 06 web design……..…CSS
85
- Click ขวาทสวนท highlight แลวเลอก Move CSS Rules
Chapter 06 web design……..…CSS
86
- โปรแกรมจะถามวา จะเอา css ทเพงเลอกไปรวมกบ *.css ทมอย หรอ จะสราง *.css ขนมาใหม
- ถาจะน าไปรวมกบ *.css กใหไป click ท Browse แลวเลอก file
- ถาจะสราง *.css ขนมาใหม แนะน าให สราง folder เพอเกบ file css โดยเฉพาะ เพอไมไปปะปนกบ file อน
- เวลาทเราตองการใช *.css กไป click ทปม Attach Style Sheet แลงคอยไป browse หา file.css ทตองการ
Chapter 06 web design……..…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
Chapter 06 web design……..…CSS
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
Chapter 06 web design……..…CSS
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
Chapter 06 web design……..…CSS
90
- Click ท body จะเหนคณสมบตตางของ CSS body
การท าใหรปภาพ ไมมเสนขอบ
- ใน DreamWeaver CS3 นนเวลาใส link ใหกบรปภาพ จะท าใหเกดกรอบของรปภาพขนมา สามารถแกไขไดโดยการสรง CSS ขนมาตามตวอางขางลาง
Chapter 06 web design……..…CSS
91
- ในหนา CSS Rule ใหก าหนดตามภาพขางลาง
สราง CSS Border เปนเสนประ
Concept
- Border = เสนประ
- Bgcolor = black - Font = yellow 14 px bold
Chapter 06 web design……..…CSS
92
- new CSS ขนมา ท าตามรปขางลาง
Chapter 06 web design……..…CSS
93
Chapter 06 web design……..…CSS
- สงเกต CSS ทเราพงสรางขนมา
CSS ทเปน Class จะมา list อยทชอง Style ท
Property ดานลาง ลองดตวอยาง ขอความทก ากบ
ดวย CSS ตวน
94
- รปภาพกสามารถก ากบดวย CSS นได แตในสวนทเปน background จะมองไมเหน เพราะโดนทบดวยรปภาพทงหมด
การใช tag <div> แทนท Table
- page ทมตารางซอนกนหลายๆตาราง จะท าใหเกด code หลายบรรทด เราสามารถ clear code เหลานไดโดยใช CSS เขามาจดการ
- ตวอยางน มการซอนของตารางหลายชน โดยดไดจาก Layout -> Expanded
Chapter 06 web design……..…CSS
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
Chapter 06 web design……..…CSS
102
- สงเกตหนาตาของขอความจากหนาปกต
- Preview ด หนาตาไมแตกตางจากตอนแรกเลย
Chapter 06 web design……..…CSS
103
การท า List
- ใช code <ul>
<li> </li>
</ul>
Chapter 06 web design……..…CSS
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.