หนวยการเรยนท 2 หลกการออกแบบสรางเวบเพจ

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

ผงความคด (Mind Mapping)

หลกการออกแบบเวบเพจ

1. ความรทวไปเกยวกบการ สรางเวบเพจไซต

2. การออกแบบสรางเวบเพจ 2.4 ออกแบบหน

าจอเวบ

2.3 ออกแบบระบบเนวเกชน 2.2 เขยนผงโครงสรางเวบไซต

2.1 การเขยนผงระดมความคด

จดประสงคการเรยนร 1. บอกขอมลพนฐานทควรร ในการออกแบบสรางเวบ ได 2. บอกลาดบขนตอนการสรางเวบไซตได 3. เขยนผงระดมความคด จดการเนอหาสรางเวบไซต ได 4. เขยนผงโครงสรางของเวบได 5. เขยนผงการเชอมโยงหรอผงเนวเกชนของเวบไซตได 6. ออกแบบหนาจอแสดงผลเวบหรอ Story board ได

26

หลกการออกแบบสรางเวบ

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

1. ความรทวไปในการออกแบบสรางเวบเพจ

การสรางเวบเพจ คอ การออกแบบสรางหนาเอกสารอเลกทรอนกส เพอนาเสนอขอมลความรตาง ๆ ขององคกรหรอขอมลสวนตว ไปแสดงในเครอขายอนเทอรเนต แสดงออกทางหนาจอคอมพวเตอรหรอสออน ๆ ทสามารถแสดงภาพได โดยการออกแบบทกลาวถงทวไปจะคานงถง การแสดงผลทจอคอมพวเตอรเทานน การสงขอมลสอสาร บนอนเทอรเนต มคาศพทเฉพาะทใชเรยกชองานหรอโปรแกรมทเกยวของ ซงนกเรยนตองทราบกอนเพอความเขาใจ เมอมการกลาวถงคาศพทเหลานน คาศพททจะพบมากในการสรางเวบ มดงน เวบเพจ (Web page) คอ หนาเอกสารอเลกทรอนกสทใชแสดงขอมลบนเครอขายอนเทอรเนต มคณสมบตพเศษกวาเอกสารทวไปคอสามารถเชอมโยงไปยงหนาเอกสารอน ๆ ได โฮมเพจ (Home page) คอ เวบเพจทใชเปนหนาหลก ในการเชอมโยงเขาสหนาเนอหา อนในเวบไซต เปรยบเหมอนหนาสารบญของหนงสอ เวบไซต (Web site) คอ ชอเรยกทอยของเวบเพจ ทใชแสดงเรองราวในองคกรทงหมด เชน เวบไซตวทยาลยเทคนคราชบร www.rtc.ac.th กจะมจานวนเวบเพจ แสดงขอมลของฝายงานตาง ๆ ในองคกรจานวนมาก โดยมการลงคหรอเชอมโยงกน จากรายการในหนาโฮมเพจ เวบบราวเซอร คอ โปรแกรมทใชเปดเวบเพจในอนเทอรเนต สามารถสงไฟลขอมลไปยงเครองคอมพวเตอรทเชอมตอในอนเทอรเนตไดโดยการแ ปลคาสงภาษา HTML แลวแสดงผลออกทางหนาจอไดทง ตวอกษร รปภาพ ภาพเคลอนไหว เสยง หรอ วดทศน โปรแกรมบราวเซอรในปจจบนมหลายโปรแกรม เชน Internet Explorer , Mozilla Firefox , Opera , Safari เปนตน ภาษา HTML (Hyper Text Markup Language) เปนโปรแกรมภาษาทใชเขยนเวบเพจ ซงสามารถสรางการเชอมโยง (Link) ไปยงหนาเวบเพจอน ๆ ได เรยกการเชอมโยงนวา Hypertext ในการเขยนเวบจะมการใชโคดคาสงของ โปรแกรมภาษาอนมาใชรวมกบภาษา HTML ไดเรยกวา Script เพอเพมเทคนค สสนใหก บหนาเวบ เชน Java , Java Script , MySQL , PHP, ASP เปนตน WYSIWYG (What You See Is What You Get) อานวา วสสวก คอ ชอเรยกโปรแกรม สรางเวบทงหลายท สามารถออกแบบไดโดยนาขอความ รปภาพ หรองานกราฟก มาจดวาง บนหนาเวบทออกแบบ แลวสงแสดงผล ดวยโปรแกรมบราวเซอรจะปรากฏผลบนเวบเพจ

27

เหมอนการออกแบบทจดวางไวในโปรแกรมสรางเหลานน ทาใหการสรางเวบเพจงาย และ รวดเรว และโปรแกรมเหลานนจะสราง โคดคาสง HTML ใหดวย ทาใหไดรบความนยมใชงานมาก ตวอยางโปรแกรม แบบ WYSIWYG เชน FrontPage , Dreamweaver , Homesite, Namo Editor เปนตน เนองจากขอกาหนดมาตรฐาน หรอโปรโตคอลเรองการสงและ รบขอมลระหวางเครอง Server กบโปรแกรมบราวเซอร และเงอนไขของลกษณะขอมลของเอกสารเวบ ซงปจจบนสวนใหญเปนขอมลลกษณะมลตม เดย คอมทง ขอความ ภาพนง ภาพเคลอนไหว เสยง หรอวดทศน การสรางเวบเพจจงตองใชภาษา HTML เปนโปรแกรมหลก แตไมไดหมายความวาตองสรางเวบ ดวยโปรแกรมภาษา HTML เทานน เพราะกลมโปรแกรมแบบวสสวก ซงสามารถสราง และ ออกแบบไดดวยการใสเนอ หา รปภาพ หรอกราฟกตาง ๆ ไดงายกวา เมอออกแบบตามทมองเหนในหนาเอกสารทออกแบบ โปรแกรมจะสรางโคด HTML ใหเลย จงสามารถแสดงผลไดเหมอน การเขยนดวยโปรแกรมภาษา HTML ดงนน นกออกแบบเวบสวนใหญจงหนไปใชโปรแกรม แบบวสสวก โดยเรยนรคาสง HTML ไวเพอสามารถปรบแกไขหรอเพม โคดคาสงใหงานสมบรณไดเทานน ซงหากผออกแบบรายใดมพนความร HTML มากกจะสามารถทางานออกแบบสรางเวบไดดกวาคนทมพนความรคาสง HTML นอย แตปญหานกไมยากสาหรบ ยคปจจบน เนองจากม นกออกแบบเวบจานวนมากไดนาความร คาสง HTML คาสง Script เทคนคการสรางเวบใหสวย นาสนใจไปวางไวบนอนเทอรเนตใหศกษากนได สามารถเรยนรไดตลอดเวลา การสรางเวบเพจจงเปนเรองทมายากอกตอไป

2. การออกแบบสรางเวบไซต

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

28

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

รปแบบ การเชอมโยง การสรางการเชอมโยงถอวาเปนเครองม อทสาคญของเวบเพจ โดยจะตองสามารถสรางเชอมโยงดวยขอความ รปภาพ หรอวดทศน คอสามารถตดตามเนอหาได ทกจดเพอใหความสะดวกแกผใชมากทสด ภาพกราฟก (Image) รปภาพทสามารถนามาใชบนเวบไซต จะไดจากทใด ขนาดความจไฟล ไมทาใหเวบโหลดชา (ไมควรเกน 50 KB) และเลอกชนดของไฟลใหเหมาะสม การทดสอบเวบเพจ การสรางเวบตองมการทดสอบตลอดเวลาในระหวางการสราง จะทดสอบทไหน จะตองเตรยมพนทวางเวบไซตบนอนเทอรเนตกอนหรอไม การเผยแพรเวบเพจ เมอเวบไซตเผยแพรในอนเทอรเนต การประชาสมพนธจะใชวธใด

การลงมอออกแบบสรางเวบไซต

มลาดบขนการทางานด งน

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

29

รปท 2.1 แสดงการเขยนผงระดมความคด ทมา :gotoknow.org/blog/9nuqa/40487

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

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

Home page Web page Web page Web page Web page

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

รปท 2.2 ผงโครงสรางเวบไซตแบบระดบ

Home page

Web page Web page Web page

Web page Web page Web page

รปท 2.3 ผงโครงสรางเวบไซตแบบระดบชน

30

แบบผสม (Combination) เหมาะสาหรบเวบไซตทซบซอนเนอหามาก เปนการนาขอดของรปแบบ ทงสองขางตนมาผสมกน

Web page

Home page

Web page Web page Web page

Web page Web page

รปท 2.4 ผงโครงสรางเวบไซตแบบผสม

Web page

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

หนา Home Page ชอไฟล Index.html

หนาหลกของเวบไซต เหมอนสารบญชอ

ชอไฟล home.html

หนาเวบหนวยท 1 บทเรยนหนวยท 1

ชอไฟล unit1.html

หนาเวบหนวยท 2 บทเรยนหนวยท 2

ชอไฟล unit2.html

หนาเวบสมครสมาชก หนาสมครสมาชก

ชอไฟล register.html

หนาเวบขอมลทวไป แสดงขอมลองคกร/ผจดทา

ชอไฟล about.html

รปท 2.5 แสดงตวอยางผงโครงสรางเวบไซตแตละสวน

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

31

Index.html

การเขยนผงเนวเกชน ถอเปนงานสาคญทจะทาใหเราและทมงานสามารถสรางเวบได มสาระสาคญเกยวกบการสรางระบบนา ทาง หรอเนวเกชน ทควรรคอ 1. เปาหมายของ ระบบเนวเกชน หรอ ระบบนาทาง คอ ชวยใหผเ ขาชมเขาถงขอมล ทตองการไดอยางรวดเรว ไมหลงทาง ดงนนองคประกอบของระบบนาทางจงม 2 สวนดวยกนคอ 1.1. เครองนาทาง คอเครองมอสาหรบใหผชมเปดเขาเวบเพจตางๆ ภายในเวบไซตประกอบดวย - เมนหลก เปนเมนสาหรบไปยงหวขอเนอหาหลกของเวบไซต มกอยในรปของลงคทเปนขอความหรอภาพกราฟก และจะตองมปรากฏอยบนเวบเพจทกหนา -เมนเฉพาะกลม เปนเมนทเชอมโยงเวบเพจปจจบนกบเวบเพจอ นภายในกลมยอยทมเนอหา เกยวเนองเทานน มกอยในรป ของลงคขอความหรอกราฟก -เครองมอเสรม สาหรบชวยเสรมการทางานของเมน ไดหลากหลายรปแบบ เชน ชองคนหา (Search Box), เมนแบบดรอปดาวน (Drop-down menu), อมเพจแมพ (Image Map), แผนทเวบไซต (Site Map) 1.2. เครองบอกตาแหนง (Location Indication) เปนสงทใชแสดง วาผชมกาลงอยท ตาแหนง ใดมไดหลายรปแบบ เชน ขอความ หรอภาพกราฟกทแสดง ชอเวบเพจ หรอขอความบงช (ปายเหลอง) ปกตทเครองบอกตาแหนง จะสรางรวมไว กบเมนเลย

home.html

index.html

about.html

register.html Unit1.html

Unit2.html

about.html

index.html

home.html

register.html Unit1.html

Unit2.html

regist.html

index.html

about.html

home.html Unit1.html

Unit2.html

Unit1.html

index.html

about.html

register.html home.html

Unit2.html

Unit2.html

index.html

about.html

register.html home.html

Unit1.html

รปท 2.6 แสดงตวอยางการเขยนผงการเชอมโยง (Navigation) ในเวบไซต

32

2. ลกษณะระบบเนวเกชนทด - อยในตาแหนงทเหนไดชดและเขาถงงาย เชน สวนบนหรอดานขวาของเวบเพจ - เขาใจงายหรอมขอความกากบชดเจนผชมใชไดทนทโ ดยไมตองเสยเวลาศกษา - มความสมาเสมอ และเปนระบบ ไมชวนใหสบสนหรอกลบไปกลบมา - มการตอบสนองเมอใชงาน เชน เปลยนสเมอผชมชเมาสหรอคลก - มจานวนรายการพอเหมาะ ไมมากเกนไป - มหลายทางเลอกใหใช เชน เมนกราฟก, เมนขอความ, ชองคนหาขอมล (Search Box), เมนแบบดรอปดาวน (Drop-down menu), แผนทเวบไซต (Site Map) - มลงคใหคลกกลบไปยงโฮมเพจไดเสมอ เพอใหผชมกลบไปเรมตนใหมในกรณท หลงทางไมรวาตวเองอยทตาแหนงใด

เมนหลก

เมนเฉพาะกลม

เครองมอเสรม

รปท 2.7 ภาพแสดงเครองมอระบบนาทาง (Navigation) ในเวบไซต

ทมา: เวบไซตมหาวทยาลยแมฟาหลวง

33

2.4 การออกแบบหนาจอเวบเพจ (Page Design หรอ Story board) การออกแบบหนาเวบเพจ โดยนาโครงสรางขอมลตางๆ มาจดวางตาแหนงจา ลอง ทงดานเนอหาและกราฟก โดยผออกแบบตองเขาใจงานกราฟก การใชส เทคนคการออกแบบเวบเพจ ใหนาสนใจเปนอยางด เพราะหนาเวบเพจทกหนานจะเปนสอสรางการปฏสมพนธกบผเขาชม วธทสะดวกทสดในการออกแบบเวบเพจ คอการใชโปรแกรมสรางภาพกราฟก เชน Photoshop หรอ Fireworks วางเคาโครงของหนาเวบและวาดองคประกอบตางๆ ขนมาใหครบสมบรณในไฟลเดยวเลยไมว าจะเปนโลโก ชอเวบไซต ปมเมน รปไอคอน แถบส และอนๆ เนองจากโปรแกรมเหลานมเครองมอพรอมสาหรบงานดงกลาว อกทงในขนตอนสดทายเรายงสามารถบนทก องคประกอบทงหมดแยกเปนไฟลกราฟกยอย ๆ (โดยใช Slice tool) พรอมกบไฟล HTML ซงสามารถจะนาไปใชในโปรแกรมสรางเวบไดเลย โดยทวไปหนาเวบเพจจะแบงออกเปน 3 สวน ไดแก ดงน

1. สวนหว (Page Header) อยตอนบนสดของหนา เปนบรเวณทสาคญทสดเนองจากผใชจะมองเหนกอนบรเวณอน สวนใหญนยมวางโลโก ชอ เวบไซต ปายโฆษณา ลงคสาหรบตดตอหรอลงคทสาคญ และระบบนาทาง 2. สวนของเนอหา (Page body) อยตอนกลางหนาใชแสดงเนอหาภายในเวบเพจ ซงอาจจะประกอบดวยขอความ, ภาพกราฟก, ตารางขอมล และอนๆบางครงเมนหลกหรอเมนเฉพาะกลม อาจมาอยในสวนน โดยมกจะวางไวดานซายมอสดเพอผใชจะมองเหนงายกวา 3. สวนทาย (Page Footer) อยลางสดของหนาสวนใหญ จะนยมวางระบบนาทางภายในเวบไซตแบบทเปนลงคขอความงายๆนอกจากนกอาจจะมชอของเจาของ ขอความแสดงลขสทธ และอเมลแอดเดรสของผดแลเวบไซต

Page Header

Page Body

Page Footer

รปท 2.8 แสดงลาดบการสรางตามสดสวนทออกแบบไว

ทมา : http://science.bu.ac.th/archive_html/archive_file/WebDevelopmentConcept.pdf

34

ขอเสนอแนะ แนวคดการออกแบบเวบเพจ

สาหรบผเรม ตนสรางเวบเพจ จะมปญหาเรองการออกแบบใหหนาเวบวาจะเปนแบบใด หรอ แนวไหนจงจะดด ไดมาตรฐานไมดเชย มขอแนะนาทจะชวยใหเราเกดความคด ดงน 1. ศกษาจากเวบไซตอนๆ เปนวธทงาย ทสด เราสามารถศกษาจากเวบไซตตางๆทมอย แลวบนอนเทอรเนต แลวเลอกรปแบบทเหมาะสมมาประยกตใช ไมวาจะเปนในเรองของแนวคด การออกแบบ การใชส ขอความ กราฟก รวมไปถงเทคนคทใชในการสรางเวบเพจ 2. ประยกตแบบจากสงพมพ สงพ มพเชนนตย สาร แผนพบ โปรชวร, โปสเตอร และหนงสอบางเลม มรปแบบทสวยงามสามารถนามา ใชเปนแนวทาง การออกแบบเวบเพจได 3. ขอความและภาพกราฟก เวบเพจทมขอความมากๆ ผชมจะรสกกลวและเบอ เพราะเมอเหนขอความกทอ ในทางตรงกนขาม ถามเวบเพจทมแตภาพอยางเดยว ผชมกรสกสบสนเชน กน เพราะบางทดรปแลวไมเขาใจ สงสยวาทาไมไมมคาอธบาย ฉะนนเราควรออกแบบ ในแนวกลางๆ ไมมองคประกอบ อยาง ใดอยาง หนงมากหรอนอยเกนไป ดใหเหมาะสมกบเนอหา 4. เวบเพจทจดแบบเรยบงายแตดด จะสรางความนาสนใจและนาเชอถอกบผชม นอกจากน การวางตาแหนง ของเนอหาตางๆ อยางมระเบยบเปนสดสวน กทาใหผชมหาขอมล ทตองการไดอยางรวดเรว 5. ใหความสาคญกบสวนบนของเวบเพจ สวนสาคญทสดของเ วบเพจ คอดานบนสดของหนา ซงผชมจะสมผสไดทนทเมอเขามาทหนานน สวนใหญ จะนยมจดวางองคประกอบเปนรปแบบทคลายๆ กนในทกหนาเวบ คอสวนของ ชอและโลโกของเวบไซต ระบบนาทางไดแกเครองมอคนหาขอมลภายในเวบไซต ลงคสาคญ ปายแบนเนอรโฆษณา หรอขอความสาคญ 6. สรางระดบความสาคญของเนอหา การสรางระดบความสาคญขององคประกอบตางๆ ภายในเวบเพจ ชวยเนนใหผชมเหนวาสวนไหน สาคญมาก สวนไหนสาคญนอย ซงผชมจะรบรดวยสายตาจากการมองเหน เชน หวขอขนาดใหญ แสดงวาสาค ญกวาขอความขนาดเลก เปนตน 7. ใชกราฟกใหพอด การใชกราฟกจะใหผล 2 ดานคอ ดานหนงชวยใหสวยงามและนาสนใจ แตอกดานหนงถาเราใสกราฟกมากเกนไปจะเกดผลเสยคอดรกตา และทาใหเวบเพจโหลดชา ผชม ตองเสยเวลารอ 8. ออกแบบขนาดของเวบเพจใหพอดกบหนาจอ การออกแบบเวบเพจตองคานงถงกลมผชมเปาหมายวาเขา ปจจบนใชขนาดจอภาพเทาใด และใชความละเอยดหนาจอ (Resolution) กพกเซล ซงระดบรายละเอยดของเวบเพจทใชกนทวไปปจจบนจะม 3 ขนาดดวยกนคอ - 800 x 600 พกเซล ความละเอยดปานกลาง (ปรมาณการใชเรมลดลง ) - 1024 x 768 พกเซล ความละเอยดสง (มใชมากทสด) - 1280 x 1024 พกเซล ความละเอยดสง (มใชมากขนเรอย ๆ )

35

Summary: Optimize Web pages for 1024x768, but use a liquid layout that stretches

well for any resolution, from 800x600 to 1280x1024

จาก Jakob Nielsen's Alertbox, July 31, 2006:

.ทมา: http://www.useit.com/alertbox/screen_resolution.html

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

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

………………………………………………..

36

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

แบบฝกหดประจาบทเรยน

คาสง ใหตอบคาถามตอไปน

1. ใหสรปขอคดเหน การออกแบบหนาเวบทดตองคานงถงอะไรบางมา 5 ขอ ............................................................................................................................................................ ............................................................................................................................................................ ...........................................................................................................................................................

2. ใหเขยนขนตอนการสรางเวบเพจ โดย เปรยบเทยบกบวงจรการพฒนาโปรแกรม

วงจรการพฒนาโปรแกรม (SDLC) วงจรการสรางเวบไซต .................................................................... .................................................................... ..................................................................... ......................................................................

....

....

....................................................................

.................................................................... ..................................................................... ......................................................................

..... ....

3. ใหแสดงความคดเหนเกยวกบการใชสบนหนาเวบเพจ มา 3 ขอ ……………………………………………………………………………………………………….

4. ใหบอกสวนประกอบสาคญในหนาโฮมเพจวา ควรมสวนประกอบอะไรบาง ……………………………………………………………………………………………………….

1. ผงโครงสรางเวบ กบผงเน วเกชน แตกตางกนอยางไร ………………………………………………………………………………………………………. ………………………………………………………………………………………………………. ………………………………………………………………………………………………………. ……………………………………………………………………………………………………….

37

อางอง

เกรยงศกด เจรญวงศศกด,ออกแบบและสรางเวบสวยดวย Dream weaver CS3,กรงเทพ ; ซเอดยเคชน,2551.

สรางโฮมเพจดวยตนเองกฤษณะ สถต , ,กรงเทพ:Info press. บญสบ โพธศร และคณะ. การสรางเวบเพจ. กรงเทพฯ: ศนยสงเสรมอาชวะ , 2550. ประภาพร ชางไม , สรางเวบสวยดวย Dreamweaver 8.0 , กรงเทพฯ : ดจอารต.

การสรางเวบไซต พรเศก จตตแจง , ,กรงเทพ ; Success Media. การสบคน :

http://science.bu.ac.th/archive_html/archive_file/WebDevelopmentConcept.pdf http://www.cc.gatech.edu/gvu/user_surveyshttp://www.nectect.or.th

http://www.skr.ac.th/dreamroot/homepage/chapter2.htm

ผลงานด..อยทการฝกมาก ..ตงใจจรง