สาระส าคัญ - WordPress.com · 2014-11-07 · ที่ 1 ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บไซต์

เอกสารประกอบการสอน วชา การสรางเวบเพจ (2201-2414) หลกสตรประกาศนยบตรวชาชพ (ปวช) พศ 2545 (ปรบปรง พศ 2546)

สาระการเรยนร

จดประสงคการเรยนร

สาระส าคญ

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

1 คาศพททเกยวของเกยวกบเวบไซต 2 ประเภทของเวบไซต 3 พนทใชงานและสวนประกอบของหนาเวบเพจ 4 รปแบบและโครงสรางพนทใชงานของเวบเพจ 5 กระบวนการพฒนาเวบไซต

1 อธบายความหมายของศพททเกยวของไดอยางถกตอง 2 บอกความแตกตางของเวบแตละประเภทไดอยางถกตอง 3 อธบายโครงสรางและสวนประกอบของเวบเพจไดอยางถกตองและเหมาะสม 4 อธบายขนตอนการพฒนาเวบไซตไดอยางถกตอง 5 ออกแบบและกาหนดสวนประกอบของเวบเพจไดอยางถกตองและเหมาะสม 6 มความรบผดชอบตองานทไดรบมอบหมาย 7 เกบอปกรณการเรยนไดอยางเรยบรอยและถกตอง

2


หนวยท 1 ความรเบองตนเกยวกบการสรางเวบไซต

ค าศพททเกยวของเกยวกบเวบไซต

ในการใชงานบนระบบเครอขายอนเตอรเนต ม คาศพททเกยวของ มากมายและกอน

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

เวบเพจ (Web Page) หมายถง หนาเวบหนงหนา เปรยบเสมอนหนงสอคอกระดาษหนาหนงในหนงสอ เชน หนา 10 หรอ หนา 20 ทประกอบไปดวยขอความหรอรปภาพหรอบนหนากระดาษนน ซงเวบเพจจะมกหนากไดขนอยกบเนอหา

โฮมเพจ (Home Page) หมายถง เวบเพจหนาแรกของเวบไซต นน ๆ ทเปนหนา เวบเพจเรมตนทอาจประกอบดวยเมนเชอมโยงไปยงหนาเวบเพจตาง ๆ เปรยบเสมอนหนาปกหนงสอ

เวบไซต (Web Site) หมายถง เวบทประกอบดวยหนาโฮมเพจและเวบเพจหลาย ๆ หนามาประกอบกน ซงเปรยบเสมอนกบหนงสอทงเลม

เวบไซต (Web Site) wwwpbpvc acth

วทยาลยอาชวศกษาเพชรบร

โฮมเพจ(Home Page)

รปท 11 แสดงตวอยางหนาเวบทเปนโฮมเพจ เวบเพจ และเวบไซต ทมา wwwpbpvcacth [online] สบคนเมอวนท 23 มกราคม 2555

เวบเพจ (Web Page)

3



อนเตอรเนต (Internet) หมายถง เครอขายคอมพวเตอรทใหญทสดในโลกซงรวมเอาเครอขายยอยเปนจานวนมากตอเชอมภายใตมาตรฐานเดยวก นจนเปน เครอขายคอมพวเตอรขนาดใหญ ทาใหทวโลกเชอมโยงกน เปนเครอขายเดยวกนไดในแพลตฟอรมของ เวลด ไวด เวบ (World Wide Web)

เวลด ไวด เวบ (World Wide Web ndash www) หรอเรยกยอ ๆ วา เวบ (web) หมายถง อนเตอรเนตชนดหนง ทอยในรปแบบของ กราฟกและมลตมเดย ซงประกอบดวยขอความ (Text) ภาพ (Graphic) เสยง (Sound) และ ภาพเคลอนไหว (Movie) เปนตนผใชทวไปสามารถเขาไปในเวบไดงาย และจะไดรบขอมลครบถวนปจจบน ถา กลาวถงอนเตอรเนต คนทวไปเขาใจวาหมายถงเวบ ซงแททจรงแลวเวบเปนสวนหนงของอนเตอรเนตเทานน

เวบเบราเซอร(Web Browser) หมายถง โปรแกรมทใชสาหรบเปดเวบเพจหรอ รบสงขอมลตามทเครองลกขายรองขอเมอเราเปดเขาสอนเตอรเนต เวบเบราเซอรทไดรบความนยมปจจบนมหลายโปรแกรม เชน Microsoft Internet Explorer (IE) Mozilla Firefox Google Chrome และ Opera

รปท 12 โปรแกรมเวบบราวเซอร Microsoft Internet Explorer (IE) ทมา wwwgooglecoth [online] สบคนเมอวนท 23 มกราคม 2555

ภาษา HTML ยอมาจากคาวา Hypertext Markup Language หมายถง ภาษาท

ใชสาหรบสรางเวบเพจ โดยจะไดรบการแปลหรอการแสดงผลโดยเวบ เบราเซอรซงสามารถแสดงไดทงขอความ ภาพ และเสยง และภาพเคลอนไหว การสรางเวบเพจดวยภาษา HTML ใชโปรแกรมประมวลผลคาทวไป เชน Wordpad Notepad และ MS-word เปนตน โดยปกตจะนยมใชโปรแกรม

4



Notepad ซงมาพรอมกบปฏบตการวนโดวส ทาใหใชงานและแกไขงานสะดวก รปแบบโครงสรางภาษา HTML ประกอบดวย สวนเรมตนของคาสง เรยก Tag เปด และสวนจบของคาสง เรยก Tag ปด โดย Tag ปด จะมเครองหมาย Slash ( ) ดงตวอยาง ในรปท 13 ซงภาษา HTML จงมโครงสรางทงาย เหมาะสาหรบผเรมตนสรางเวบเพจ และใชงานรวมกบโปรแกรมการสรางเวบเพจอนๆ เพอทาใหเวบเพจสวยงามและมประสทธภาพมากยงขน

รปท 13 โครงสรางภาษา HTML

โดเมนเนม (Domain Name) หมายถง ชอเรยกของเวบไซต เกดจากการ จดทะเบยนโดเมนเนม เปนการลงทะเบยนชอใหกบเวบไซตในโลกอนเตอรเนต โดเมนเนมทขอจดทะเบยนจะไมซากนในโลกอนเตอรเนต และการตงจะเกยวของกบเนอหา สนคาและบรการ ทเปนขอมลเกยวกบภายในเวบไซต โดยใชคาทจาได งาย เชน sanookcom และ yahoocom เปนตน ซงประเภทของโดเมนเนม แบงตามลกษะของชอออกเปน 2 ประเภท คอ โดเมนเนม 2 ระดบ และโดเมนเนม 3 ระดบ โดยขอยกตวอยาง ดงน

โดเมนเนม 2 ระดบ เชน wwwsanookcom หรอ wwwhunsacom โดยท www คอ ประเภทการใหบรการแบบ World Wide Web สวนท 1 sanook หรอ hunsa เปนชอ หรออกษรยอของบรษท หรอหนวยงาน

เจาของเวบไซต สวนท 2 com เปนอกษรยอของประเภทองคกร ซงทพบบอยมดงน

com เปนบรษทหรอองคกรพาณชย เชนบรษทโซน (wwwsonycom)

edu เปนสถาบนการศกษา เชน มหาวทยาลยฮารวารด (wwwharvardedu)

gov เปนองคกรของรฐบาล เชน องคการนาซา (wwwnasagov)

mil เปนองคกรทางทหาร เชน กองทพอากาศสหรฐอเมรกา (wwwafmil)

5



net เปนองคกรททาหนาทเปนเกตเวยหรอจดเชอมตอเครอขาย หรอใหบรการดานอนเทอรเนต(wwwmcinet)

org เปนองคกรทไมเขาขายองคกรทงหมดทไดกลาวถง

biz เปนบรษทหรอองคกรทางธรกจ

info ใชในโอกาสโฆษณาสนคา หรอเหตการณสาคญ โดเมนเนม 3 ระดบ เชน wwwsuacth หรอ wwwschoolnetth www คอประเภทการใหบรการแบบ World Wide Web สวนท 1 sumoeschool เปนชอหรอชอย อขององคกรตาง ๆ เชน su คอชอยอ

ของมหาวทยาลยศลปากร สวนท 2 ac go net คายอในสวนท 2 หลงเครองหมายจด เปนประเภทของ

องคกร สวนท 3 th คายอในสวนท 3 หลงเครองหมายจด เปนทตงขององคกรนน ตว

ยอสวนท 2 ทพบบอยคอ co หมายถง บรษทหรอองคกรพาณชย ac หมายถง สถาบนการศกษา go หมายถง องคกรของรฐบาล net หมายถง องคกรทใหบรการเครอขาย ตวยอสวนท 3 คออกษรยอของประเทศตาง ๆ ทองคกรนนตงอย เชน th หมายถง ประเทศไทย cn หมายถง ประเทศจน jp หมายถง ประเทศญปน

URL (Uniform Resource Locator) คอ ตาแหนงอางองเวบเพจในระบบอนเทอรเนต ซงมสวนประกอบดงภาพดานบน ซงมรายละเอยดดงน

รปท 14 ตาแหนงอางองเวบเพจ URL

Hostname

Content identifier สวนระบตาแหนง

ชอไฟลขอมลหรอชอไฟลเวบเพจ

httpwwwpbpvcacthnewindexhtml

6



- Content identifier คอ สวนทแจงใหเบราวเซอรทราบวาตองจดการขอมลทพบอยางไร สาหรบบรการ WWW จะใช โปรโตรคอลมาตรฐานชอ HTTP (HyperText Transfer Protocol) สวน FTP เปนอกโปรโตคอลเกยวกบ การโอนยายไฟลขอมล

- Host name คอ สวนทระบชอเวบไซต สวนใหญมกถกเรยกวาโดเมนเนม แตละเวบไซตจะมโดเมนเนมไมซากน

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

ขน มกมนามสกลเปน html หรอ htm หากไมระบสวนนเบราวเซอรจะถอวา ไฟลทตองการเ รยกดคอ indexhtml ซงสวนใหญชอนจะตงใหกบ หนาโฮมเพจเสมอ

ดงนนจะเหนไดวา การเขาเวบไซตตาง ๆ โดยโปรแกรมเบราวเซอรนนตองระบทอย (Address) ของเวบไซต ซงสามารถทาได 3 รปแบบคอ ระบ เปน IP Address Domain Name หรอ URL กสามารถทาได อาจกลาวโดยสรปไดวา IP Address Domain Name หรอ URL กคอ ทอยของเวบไซต

Web Hosting(เวบโฮสตง) คอ การบรการใหเชาพนทในการนาเวบไซตมาฝาก เพอใหเวบไซตคณสามารถออนไลนบนอนเตอรเนตได โดยเปนการใหบรการแบบเบดเสรจ คอ ผใชบรการไมตองยงยากกบระบบเวบเซรฟเวอร เพราะทางผใหบรการ Web Hosting จะเตรยมการทกอยางไวใหเรยบรอย แตคณตองทาการ จดโดเมน กอนแลวจงมาเชา Web Hosting เพอเกบเวบไซต

(Link) คอ สวนของเวบเพจทเราสามารถคลกเพอเปดเวบเพจหรอเวบไซตใหมขนมาแทนทเวบไซตหนาปจจบนได โดยสามารถเปนไดทงตวอกษร ขอความ หรอแมแตรปภาพ

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

เวบมาสเตอร (Webmaster) หมายถง ชอเรยกผดแลเวบไซต ดาวนโหลด (Download) หมายถง การคดลอกขอมลจากเครองคอมพวเตอรแมขายท

ใหบรการอนเตอรเนต(Server Computer) ไปยงเครองคอมพวเตอรทตองการเกบขอมล อพโหลด (Upload) หมายถง การคดลอกขอมลจากเครองคอมพวเตอรทเกบขอมลอย

ไปยงเครองคอมพวเตอรแมขายทใหบรการอนเตอรเนต(Server Computer) เวบเซรฟเวอร (Web Server) หมายถง เครองคอมพวเตอรทเปนแมขายทาหนาทเกบ

เวบไซต และใหบรการเกยวกบเวบตามทเวบบราวเซอรรองขอขอมลมา

7



รปท 15 แสดงการทางานของระหวางเวบเซรฟเวอร (Web Server) กบ เวบเบราเซอร(Web Browser)

ทมา pirunkuacth~faaspsuedudoc739241WebPageppt[Online] วนทสบคน 23 มกราคม 2555

หลกการทางานของระบบอนเตอรเนต คอ ผใชงานจะสงคารองขอผา นเครอง

คอมพวเตอรลกขาย (Client) ผานโปรแกรมเวบเบราเซอร (Web Browser) ไปยงคอมพวเตอร แมขาย(Web Server) แลวเครองคอมพวเตอรแมขายสงขอมลทรองขอกลบมายงเครองลกขายผานโปรแกรมเวบบราวเซอร แลวแสดงใหผใชเหนขอมลทางจอภาพ โดยมคาศพททเกยวของทผเรยนตองเรยนรเพอความเขาใจกอนจะออกแบบเวบเพจ

ดงนนสรปไดวา ศพททเกยวของกบการสรางเวบเพจและเวบไซตทตองใช ควรรจก ไดแก เวบเพจ (Web Page) โฮมเพจ (Home Page) เวบไซต (Web Site) อนเตอรเน ต (Internet) เวลด ไวด เวบ(World Wide Web ndash www) โดเมนเนม (Domain Name) URL Web Hosting(เวบโฮสตง ) ลงค (Link) HTTP เวบมาสเตอร (Webmaster) ดาวนโหลด (Download) อพโหลด (Upload) เวบเซรฟเวอร (Web Server)

8



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

ถงลกษณะของเวบไซตและลกษณะการทางานของเวบเพจ ซงสามารถแบงประเภทของเวบไซตไดตามการเปลยนแปลงของเนอหา ได 2 ประเภท ดงน

1 แบบ Static Web Page หมายถง เวบไซตทสรางดวยภาษา HTML ธรรมดา และบนทกเปนไฟลนามสกล html เนอหาขอความ รปภาพในหนาเวบเพจนนจะเปนไปตามทเราเขยนกาหนดไว เหมาะกบเวบไซตทมขนาดไมใหญ จานวนหนาเวบเพจไมมาก ไมมการเปลยนแปลงขอมลบอยๆ และไมมการตดตอฐานขอมล เวบเพจประเภทนจะตอบสนองการใชงานไดอยางจากด เนองจากเนอหาตาง ๆ ในเวบไดถกกาหนดไวลวงหนาและไมสามารถเปลยนแปลงได ดงนนไมวาจะเขาชมเวลาใดกจะเหนเนอหาเหมอนเดมไมเปลยนแปลง

หลกการทางานของเวบไซตประเภทน คอ ทนทเรยกชมเวบไซต เบราเซอรจะสง คารองขอ(Request) จากเครองลกขายทผใชใชอย (Client) ไปยงเวบเซรฟเวอรท เกบไฟลเวบเพจ จากนนเวบเซรฟเวอรก จะตอบสนอง (Response) โดยการสงขอมลในไฟล ซงเปนคาสง HTML กลบไปยงเบราเซอร เพอใหเบราเซอรแปลพรอมทงแสดงผลเปนขอความและ รปภาพออกทางหนาจอคอมพวเตอร

รปท 16 แสดงหลกการการทางานของเวบแบบ Static Web Page ทมา pirunkuacth~faaspsuedudoc739241WebPageppt[Online]

วนทสบคน 23 มกราคม2555

9



รปท 17 ตวอยางหนาเวบเพจแบบ Static Web Page ทมา httpwwwbkp-sskacthgrouptechnohtml004htm[online]

สบคนเมอวนท 23 มกราคม 2555

2 แบบ Dynamic Web Page หมายถง เวบไซตทหนาเวบเพจสามารถเปลยนแปลงขอมลเองได โดยไมตองเขยนแตละหนาเวบเพจเอง เชน กระดานขาว (Webboard) ระบบสบคนขอมล เวบไซตรปแบบนจะถ กสรางดวยภาษา Script แบบ Server Side Script เชน PHP ASP ASPNet JSP และอนๆ ไฟลเอกสารทไดจะมนามสกล php asp เปนตน และมการตดตอกบฐานขอมลเพอบนทกขอมลลงในฐานขอมล หรอนาขอมล จากฐานขอมลขนมาแสดงผลเปนหนา เวบเพจ การแสดงผลของเวบเพจประเภทนจะแตกตางกนเมอถกเรยกใชแตละครงตามเงอนไขหรอเหตการณทเปลยนไป โดยเปนผลมาจากชดคาสงภาษาสครปตอยางเชน PHP ASP ASPNet JSP และอนๆ ซงถกนามาใชรวมกบฐานขอมลเพอบนทกหรอเรยกแสดงขอมลทเกบไว โปรแกรมทใชบอยและใชงานจนเปนทรจก ไดแก facebook เปนตน

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

10



รปท 18 แสดงหลกการการทางานของเวบแบบ Dynamic Web Page ทมา pirunkuacth~faaspsuedudoc739241WebPageppt[Online]


รปท 19 ตวอยางหนาเวบเพจแบบ Dynamic Web Page ทมา httpwwwimshoeshopcomindexphp [Online] วนทสบคน 23 มกราคม2555

สรปไดวา ประเภทของเวบไซต ประกอบดวย เวบไซตแบบ Static Web Page บนทก

เปนไฟลนามสกล html มเนอหาและจานวนหนาเวบเพจไมมาก ขอมลไมคอยเปลยนแปลงและไม

11



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

มการตดตอฐานขอมล สวนเวบไซตแบบ Dynamic Web Page หนาเวบเพจสามารถเปลยนแปลงขอมลได ถกสรางดวยภาษา Script และมการตดตอกบฐานขอมล

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

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

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

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

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

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

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

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

12



รปท 110 ตวอยางโลโกของเวบไซตตาง ๆ

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

21 เมนหลก(Link Menu) ในแตละหนาเวบเพจจาเปนตองม เมนหลกเพอเปนจดเชอมโยงไปยงแตละหนาเวบเพจในเวบไซตนน ๆ ซงรปแบบของเมนหลกอาจเปนเมนแบบปมหรอขอความกได ซงเมนควรปรากฏอยบนเวบเพจทกหนาของเวบไซต โดยสวนใหญนยมเมนหลกแบบแนวตงและแนวนอน ตวอยางดงรปท 111

รปท 111 ลกษณะเมนในรปแบบตาง ๆ

เมนหลกทใชเชอมโยงภายในเวบไซตควรมวธทาใหการออกแบบเมนหลก

ออกมาดด เชน จานวนลงคในสวนเมนหลกไมควรมเยอะเกนไป ทงนไมไดมกฏเกณฑ

ตายตววาจะตองมไมเกนกลงค แตโดยทวไปแลวไมควรเกน 6-7 ลงค สวนของเมนหลกควรสงวนไวให เฉพาะลงคทไปสหนาหลกของสวน

อน ๆ ของบลอก โดยทหนานนสามารถพาผเยยมชมไปสสวนยอยตาง ๆ(เมนรองนนเอง) ไดอก ตวอยางเมนหลกทเหนไดทวไปคอ การตดตอ(contact) เกยวกบเรา

(about) คณสมบต คณลกษณะของเมนห ลก ขนอยกบวา คณออกแบบโครงสรางบลอกของคณอยางไร และ อะไรทคณตองการใหผเยยมชมบลอกของคณสนใจ

13



22 เมนรอง (Secondary Navigation) เมนรองคอชดของลงคทนาพา ผเยยมชมไปยงสวนยอยอน ๆ ของเนอหาทอยในขอบเขต เดยวกน (section) โดยทวไปจะอยในรปแบบสวนดานขาง(sidebar) เมนรองมความสาคญไมนอยเหมอนกน เพราะเปนสวนททาใหผอานสามารถเขาถงสวนยอยอน ๆ ของบลอกทเมนหลกไมไดคลอบคลมถงไดเมนรองทดควรจะเปนลงคไปยงบทความทผเยยมชมคลกดมากทสด ลงคของชดบทความ เชน บทความทมหลายตอน เปนตน หรอจะเปนสงอน ๆ ทนาสนใจทคณอยากใหผอานเขาถงไดงาย

รปท 112 ลกษณะของเมนรอง

เมนรองทใชเชอมโยงภายในเวบไซตควรวธทาใหการออกแบบเมนรองออกมาดด

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

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

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

3 ปายโฆษณา (Banner) ปายโฆษณาจดเปนสวนสาคญของเวบไซตเพราะชวยสงเสรมและกระตนความสนใจใหเวบไซตนาสนใจยงขน แตไมควรใหมปายโฆษณามากเกนไปจนดนาราคาญและควรจดวางตาแหน งของปายใหเหมาะสม ซงปายโฆษณาสวนใหญนยมใชเปนภาพเคลอนไหว(Gif Animation) และภาพเคลอนไหวแบบแฟลช(Flash animation) ปายโฆษณษมดวยกนหลายขนาดดงน 468x60 Pixels 125x125 Pixels และ 120x60 Pixels

รปท 113 ตวอยางปายโฆษณา(Banner)

14



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

บลอกคณจะตองใหความสาคญกบมนดวย เพอใหโฆษณาทเอามาแปะ เขากบบลอกไดอยางลงตว โฆษณาทเปนทนยมมาก คอ googlersquos adsense และโฆษณาขนาด 125 x

125 Googlersquos adsense เปนโฆษณาทยดหยนอยางมาก คณสามารถเลอกขนาดได หรอ รปแบบการแสดงผลไดตามทคณตองการ แตโฆษณาขนาด 125 x 125 จะไมคอยยดหยนสกเทาไหร โฆษณาประเภทนมกจะนาไปใสไวดานขางบลอก

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

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

2 สวนเนอหา (Page Body) จะอยบรเวณตอนกลางของหนาเวบเพจ ซงเปนสวนทแสดงเนอหาภายในหนาเวบเพจนน โดยประกอบดวยข อความ ขอมล ภาพเคลอนไหว เปนตน บางครงเมนหลกหรอเมนเฉพาะกลมอาจมาอยในสวนนกได โดยมกจะวางไวดานซายมอสด เนองจากผใชมองเหนไดงายกวา ซงวธทาใหการออกแบบสวนเนอหาออกมาดด อาจกระทาไดดงน

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

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

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

ในการออกแบบสวนของเนอหาของเวบเพจเพอใหดนาสนใจ ควรมองคประกอบดงตอไปน

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

15



รปท 114 ตวอยางภาพประกอบและเนอหา ทมา httpphalapholbrinksternetIndex5html [online] สบคนเมอวนท 23 มกราคม 2555

22 ฉากหลง(Background) การใชฉากหลงนนสามารถเลอกไดวาจะเปนฉาก

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

รปท 115 ตวอยางฉากหลง ทมา httpwwwgarabuningspacomindexphp[online] สบคนเมอวนท 23 มกราคม 2555

16



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

3 แถบขาง (Slide Bar) ในปจจบนนยมออกแบบใหหนาเวบเพจมพนทแถบดานขาง เพอใชวางปายโฆษณา หรอลงคแนะนาบรการตาง ๆ ทพบเหนไดบอย เชน ลงคโฆษณา เปนตน ซงสวนประกอบของพนทใชงานบนหนาเวบเพจ

รปท 116 แสดงสวนแถบขาง

ทมา http httpwwwrelaxzycomhotel [online] สบคนเมอวนท 23 มกราคม 2555

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

ออกแบบใหสวนทายบลอกตดกบสวนของเนอหาบลอก เพอใหผใชรวา ตอนนอยทสวนทายของบลอก

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

ออกแบบอยางเรยบงายไมตองฉดฉาดเกนไป เนนทการใชประโยชน

แถบขาง แถบขาง

17



สรปวา พนทใชงานของเวบเพจ ประกอบดวยสวนประกอบใหญ ๆ ดงนคอ สวนหว

สวนเนอหา แถบขาง และ สวนทายของเวบเพจ ดงรปท 118

รปท 118 พนทใชงานในหนาเวบเพจ ทมา httpwwwthaispaassociationcom [online] สบคนเมอวนท 23 มกราคม 2555

สวนหว (Page Header)

แถบขาง(Slide Bar)


สวนทาย (Page Footer)

สวนเนอหา(Page Body)

รปท 117 แสดงสวนทายของเวบเพจ ทมา httpwwwse-edcom [online] สบคนเมอวนท 23 มกราคม 2555

18



รปแบบและโครงสรางพนทใชงานของเวบเพจ

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

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

1 โครงสรางและรปแบบของเวบเพจ แบงแบบอสระ ลกษณะของโครงสรางเวบเพจ

แบงแบบอสระ ประกอบดวยสวนตางๆ ของหนาเวบเพจ คอ สวนหว ประกอบดวยโลโก แบนเนอร

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

จะอยสวนตรงกลางเตมพนทของหนาเวบเพจ และไมมแถบขางซงประกอบดวยเมนยอย โฆษณา หรอ

ลงคตาง ๆ

รปท 119 ลกษณะหนาเวบเพจแบบอสระ ทมา httpwwwenjoydaynetpage-layout-designhtml [Online]


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

19



รปท 120 ตวอยางเวบเพจแบงแบบอสระ ทมา httpwwwenjoydaynetpage-layout-designhtml [Online]

วนทสบคน 23 มกราคม 2555

2 โครงสรางและรปแบบของเวบเพจ แบง 2 สวน โครงสรางและรปแบบของ

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

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

สวนกลางของเวบเพจ

รปท 121 ลกษณะหนาเวบเพจแบง 2 สวน ทมา httpwwwenjoydaynetpage-layout-designhtml [Online]


20



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

3 โครงสรางและรปแบบของเวบเพจแบง 3 สวน โครงสรางและรปแบบของเวบเพจ

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

รปท 123 ตวอยางเวบเพจแบง 3 สวน ทมา httpwwwenjoydaynetpage-layout-designhtml [Online]


รปท 122 ตวอยางเวบเพจแบงแบบ 2 สวน ทมา httpwwwse-edcomeshop [Online] วนทสบคน 23 มกราคม2555

21



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



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

22



กระบวนการพฒนาเวบไซต

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

รปท 125 กระบวนการพฒนาเวบไซต

1 ก าหนดเปาหมายและวางแผน (Site Definition and Planing) ในการ

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

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

กาหนดเปาหมายและวางแผน (Site Definition and Planing)

วเคราะหและจดโครงสรางขอมล (Analysis and Information Architecture)

ออกแบบเวบไซตและเตรยมขอมล (Page Design and Content Editing)

ลงมอสรางและทดสอบ (Construction and Testing)

เผยแพร และสงเสรมใหเปนทรจก (Publishing and Promotion)

ดแลและพฒนา (Maintenance and Innovation)

23



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

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

ทมา wwwlgcom [Online] วนทสบคน 23 มกราคม 2555

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

ทมา httpwwwnestlecothdekthaiddkid [Online] วนทสบคน 23 มกราคม 2555

24



จากรปภาพท 126 แสดงใหเหนถงการออกแบบหนาเวบเพจเพอเจาะจงกลมเปาหมายทเปนกลมลกคาทชนชอบเทคโนโลยททนสมยและเปนลกคาทชนชอบเกยวกบโทรศพทมอถอ และในรปภาพท 127 จะเปนกลมเปาหมายทเปนเดกเลกหรอกลมวยรนโดยออกแบบมงเนนใชสสนและภาพเคลอนไหว

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

14 เตรยมทกษะหรอบคลากร การสราง เวบไซต ตองอาศยทกษะหลายๆดาน เชน การเตรยมเนอหา ออกแบบกราฟก เขยนโปรแกรม และการดแลเวบเซรฟเวอร เปนตน

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

2 วเคราะหและจดโครงสรางขอมลเวบไซต (Analysis and Information Architecture) ขนตอนนจะเปนการนาขอมลตางๆ ทรวบรวมไดจากขนแรก ไมวาจะเปนวตถประสงคของ เวบไซต กลมผชมเปาหมาย รวมทงเนอหาห ลกของ เวบไซต นามาประเมน วเคราะห และจดระบบ เพอใหไดโครงสรางขอมลและขอกาหนด ซงจะใชเปนกรอบในการออกแบบดาเนนการในขนตอ ๆ ไป ผลทไดรบจากขนนประกอบไปดวย

- แผนผงโครงสรางของเวบไซต (Site Structure) สารบญ (Table of Content) ลาดบการนาเสนอ (Storyboard) หรอผงงาน (Flowchart)

- ระบบนาทางหรอเนวเกชน (Navigation) ซงผชมจะใชสาหรบเปดเขาไปยงสวนตางๆของ เวบไซต

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

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

ใน เวบไซต - คณสมบตของเวบเซรฟเวอร รวมถงขอจากด และบรการเสรมตางๆ ทมให

3 ออกแบบเวบไซตและเตรยมขอมล (Web Design and Content Editing) เปนขนตอนของการออกแบบเคาโครง หนาตา และลกษณะทางดานกรา ฟกของเวบไซต เพอใหเพอชมเกดอารมณ ความรบรตอ เวบไซต ตามทเราตองการ ดงนนผททาหนาทนจงควรมความสามารถดานศลปะพอสมควร ซงผลลพธทไดจะประกอบไปดวย ไฟลกราฟกตางๆ ทใชบน เวบไซต เชน โลโก

25



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

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

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

1 เวบทมโครงสรางแบบเรยงล าดบ (Sequential Structure) เปนโครง สรางแบบธรรมดาทใชกนมากทสดเนองจากงายตอการจดระบบขอมล ขอมลทนยม จดดวยโครงสรางแบบนมกเปนขอมลทมลกษณะเปนเรองราวตามลาดบของเวลา เชน การเรยงลาดบตามตวอกษร ดรรชน สารานกรม หรออภธานศพท โครงสรางแบบน เหมาะกบเวบไซตทมข นาดเลก เนอหาไมซบซอนใชการลงก (Link) ไปทละหนา ทศทางของการเขาสเนอหา (Navigation) ภายในเวบจะเปนการดาเนนเรองในลกษณะเสนตรง โดยม ปมเดนหนา-ถอยหลงเปนเครองมอหลกในการกาหนดทศทาง ขอเสยของโครงสรางระบบนคอ ผใชไมสามารถกาหนดทศทางการเขาสเนอหาของตนเองไดทาใหเสยเวลาเขาสเนอ

รปท 128 ลกษณะเวบทมโครงสรางแบบเรยงลาดบ ทมา httpschoolobecgothpp_schoolhtmlmakeweb1html [Online]


3 เวบทมโครงสรางแบบล าดบขน (Hierarchical Structure) เปนวธทดทสดวธหนงในการจดระบบโครงสรางทมความซบซอนของขอมล โดยแบงเนอหา ออกเปนสวนตางๆ และมรายละเอยดยอยๆ ในแตละสวนลดหลนกนมาในลกษณะแนวคดเดยวกบ แผนภมองคกร จงเปนการงายตอการทาความเขาใจกบโครงสรางของเนอห าในเวบลกษณะน ลกษณะเดนเฉพาะของ เวบ

26



ประเภทนคอการมจดเรมตนทจดรวมจดเดยว นนคอ โฮมเพจ (Homepage) และเชอมโยงไปสเนอหา ในลกษณะเปนลาดบจากบนลงลาง

รปท 129 ลกษณะเวบทมโครงสรางแบบลาดบขน ทมา httpschoolobecgothpp_schoolhtmlmakeweb1html [Online]


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

3 เวบทมโครงสรางแบบตาราง (Grid Structure) โครงสรางรปแบบนมความซบซอนมากกวารปแบบทผานมา การออกแบบเพมความยดหยน ใหแกการเขาสเนอหาของผใช โดยเพมการเชอมโยงซงกนและกนระหวางเนอหาแตละสวน เหมาะแก การแสดงใหเหนความสมพนธกนของเนอหา การเขาสเนอหาของผใชจะไมเปนลกษณ ะเชงเสนตรง เนองจากผใชสามารถเปลยนทศทางการเขาสเนอหาของตนเองได เชน ในการศกษาขอมลประวตศาสตร สมยสโขทย อยธยา ธนบร และรตนโกสนทร โดยในแตละสมยแบงเปนหวขอยอยเหมอนกนคอ การปกครอง ศาสนา วฒนธรรม และภาษา ในขณะทผใชกาลงศกษาขอมลทางประวตศาสตรเกยวกบ การปกครองในสมยอยธยา ผใช

27



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

รปท 130 ลกษณะเวบทมโครงสรางแบบตาราง ทมา httpschoolobecgothpp_schoolhtmlmakeweb1html [Online]


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

4 เวบทมโครงสรางแบบใยแมงมม (Web Structure) โครงสรางประเภทนจะมความยดหยนมากทสด ทกหนาในเวบสามารถจะเชอมโยงไปถงกน ไดหมด เปนการสรางรปแบบการเขาสเนอหาทเปนอสระ ผใชสามารถกาหนดวธการเขาสเนอหาไดดวย ตนเอง การเชอมโยงเนอหาแตละหนาอาศยการโยงใยขอความทมมโนทศน (Concept) เหมอนกน ของแตละหนาในลกษณะของไฮเปอรเทกซหรอไฮเปอรมเดย โครงสรางลกษณะนจดเปนรปแบบท ไมมโครงสรางทแนนนอนตายตว

28



(Unstructured) นอกจากนการเชอมโยงไมไดจากดเฉพาะเนอหา ภายในเวบนนๆ แตสามารถเชอมโยงออกไปสเนอหาจากเวบภายนอกได

รปท 131 ลกษณะเวบทมโครงสรางแบบใยแมงมม ทมา httpschoolobecgothpp_schoolhtmlmakeweb1html [Online]


การเชอมโยงเวบไซต ลกษณะการเชอมโยงในเวบนน นอกเหนอจากการใชไฮเปอรเทกซหรอไฮเปอรมเดย

กบขอความทมมโนทศน (Concept) เหมอนกนของแตละหนาแลว ยงสามารถใชลกษณะการเชอมโยง จากรายการทรวบรวมชอหรอหวขอของเนอหาแตละหนาไว ซงรายการนจะปรากฏอยบรเวณใด บรเวณหนงในหนาจอ ผใชสามารถคลกทหวขอใดหวขอหนงในรายการเพ อเลอกทจะเขาไปสหนาใดๆ กไดตามความตองการ ขอดของรปแบบนคองายตอผใชในการทองเทยวบนเวบ โดยผใชสามารถกาหนดทศทาง การเขาสเนอหาไดดวยตนเอง แตขอเสยคอถามการเพมเนอหาใหมๆ อยเสมอจะเปนการยากในการ ปรบปรง นอกจากนการเชอมโยงร ะหวางขอมลทมมากมายนนอาจทาใหผใชเกดการสบสนและ เกดปญหาการคงคางของหวขอ (Cognitive Overhead) ได

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

29



และเลอกใชอยางเหมาะสม โดยไมใหหลากหลายหรอจากดเกนไป ระบบเนวเกชนแบงออกเปน 4 รปแบบดงน

o ระบบเนวกเกชนแบบลาดบขน (Hierarchical) o ระบบเนวกเกชนแบบโกลบอล (Global) o ระบบเนวกเกชนแบบโลคอล (Local) o ระบบเนวกเกชนแบบเฉพาะท (Ad Hoc) องคประกอบของระบบ Navigation 1 เครองน าทาง คอ เครองมอสาหรบใหผชมเปดไปยงเวบเพจตาง ๆ

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

ของลงคทเปนขอความหรอภาพกราฟฟก และมกถกจดวางอยดานบนในเวบเพจทกหนา เมนเฉพาะกลม เปนเมนทเชอโยงเวบเพจปจจบนกบเวบเพจอนภายในกลม

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

ชองคนหาขอมล (Search Box) เมนแบบดรอปดาวน (Drop-Down menu) แผนผงเวบไซต (Site Map) อมเมจแมพ (Image Map)

รปท 132 องคประกอบของเนวเกชน ทมา httpwwwthaiwarecom [Online] วนทสบคน 23 มกราคม 2555

2 เครองมอบอกต าแหนง (Location Indicator) เปนสงทใชแสดงใหเหน

เครองบอกตาแหนง

เครองมอเสรม

เมนหลก

เมน เฉพาะกลม

30



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

รปท 133 เครองบอกตาแหนง

ทมา httpwwwthaiwarecom [Online] วนทสบคน 23 มกราคม 2555

ลกษณะของระบบเนวเกชนทด อยในตาแหนงทเหนไดชดและเขาถงงาย เชน สวนบนหรอดานขวาของ

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

ศกษา มความสมาเสมอ วางอยในตาแหนง เดยวกนของทกหนาเวบเพจ และใช

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

(Search Box) เมนดรอปดาวน (Drop-down menu) แผนผงเวบไซต (Site Map) มลงคใหคลกกลบไปยงโฮมเพจไดเสมอ เพอใหผชมกลบไปเรมตนใหมใน

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

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


31



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

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

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

3 ความเปนเอกลกษณ (Uniqueness) หมายถง การออกแบบเวบไซตทเนนการสรางจดเดนหรอเอกลกษณเฉพาะตวใหเกดขนกบเวบไซต นนๆ โดยทจดเดนหรอเอกลกษณนนจะตองสามารถสะทอนบคลกหรอลกษณะเฉพาะทไมเหมอนใครของเจาของหรองคกรทสรางเวบไซตนนๆ ขนมาไดอยางด โดยการสรางเอกลกษณนอาจทา ไดโดยการใชสสน ตวอกษร กรา ฟก การจดหนา ฯลฯ ซงผสรางเวบไซตจะเลอกใชแบบไหนนนกขนอยกบเปาหมายของเวบไซตนนเอง

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

5 ระบบ Navigation ทใชงานงาย (Easy-use Navigation) หมายถง การออกแบบระบบ Navigation ทสามารถทาใหผใชเขาใจไดงายและใชไดอยางสะดวก วางไวในตาแหนงทเหนไดชดเจนและอยในตาแหนงเดมทกหนา อกทงยงควรมคาอธบายประกอบใหชดเจนเพอทผใชงานจะไดไมสบสนและเกดการหลงทางในเวบไซต

6 แสดงผลไดอยางรวดเรว (Rapid Output) หมายถง เมอมผใชงานเขามาใชเวบของเรานนเวบเพจแตละหนาควรจะปรากฎขนมาบนจออยางรวดเรว เพราะการทเราสามารถทาใหผใชไมตองรอนานนน จะทาใหผใชรสกกกระตอรอรนในการใชเวบและไมเกดความรสกเบอหนายจนอาจสงผลใหปดหนาเวบของเรา แลวไปเขาเวบแหงอนๆ ดงนน หากเราตองการทจะใหมคนเขาชมเวบของเรามากๆ เราตอง หาจดทเหมาะสมระหวางสงทจะใสเขาไปกบเวลาทผใชตองรอ โดยเฉพาะเวบทมคนเขามาใชมากๆ ยงตองใหความสาคญกบความเรวในการแสดงผลของเวบมากยงขน

32



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

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

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

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

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

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

2 สวนบนของเวบเพจตองสะดดตา สวนสาคญทสดในแตละหนาเวบเพจคอสวนบนสดของแตละหนา ซงเปนสวนท

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

โลโกและชอของเวบไซต

เมนหลก

ระบบลอกอนสาหรบสมาชก

ระบบคนหาขอมล

ปายโฆษณา

33



รปท 134 ตวอยางสวนบนของเวบเพจ ทมา httpwwwjamsaicom [Online] วนทสบคน 23 มกราคม 2555

3 ใหความส าคญกบเนอหา

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

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

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

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

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

โลโก แบนเนอรหรอปายโฆษณา เมนหลก



34



ค าถามค าตอบทถามบอย ๆ (FAQ) สวนนเหมาะสาหรบผชมทตองการคาตอบในเรองทไมเขาใจโดยเรว ดงนนจงควรเตรยมหรอรวบรวมคาถามทเคยพบบอย พรอมทงคาตอบใสไวในเวบเพจเพอใหผชมสามารถเปดดไดทนท

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

1024X768 pixels

1280X800 หรอ 1280X1024 pixels แตในปจจบนกยงมผใชจานวนหนงทยงใชความละเอยดของจอภาพ 800X600

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

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

สฟา ใหความรสกโปรงโลงสบายตา ในบางครงสอถงความนมนวล สขสบาย

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

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

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

สแดง เปนสทสรางความตนเตน และกระตนสมอง สแดงปานกลางแสดง

35



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

สมวง ใหความรสก มเสนห นาตดตาม เรนลบ ซอนเรน มอานาจ มพลงแฝงอย ความรก ความเศร า ความผดหวง ความสงบ ความสงศกด เปนสทปลอบโยน และชวยลดความเครยด แตเดมสมวงไดมาจากสตวมกระดองเปลอก ในทะเลเมดเตอรเรเนยน มชอวา Purpura จงไดชอภาษาองกฤษวา Purple

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

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

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

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

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

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

71 ไฟลประเภท GIF (Graphics Interchange Format) เปนไฟลภาพทมขนาดเลก คณภาพตา เนองจากถกบบอดขอมลใหมขนาดเลก แสดงสได 256 ส แตเปนทนยมสาหรบผเขยนเวบเพจเปนอยางมากเนองจากสามารถทาเปนภาพเคลอนไหว (Animation) และ

36



กาหนดใหแสดงภาพแบบโปรงแสง มองทะลไปดานหลงได ไฟลประเภทนสวนใหญจะเปน รปวาด ภาพการตน รป icon emotion ปายโฆษณาแบนเนอร และภาพทไมตองการความละเอยดมากนก สามารถทาภาพแบบโปรงแสงได เมอนาไปวางบนพนหลงสอะไร ดานหลงรปจะเปนสตามพนหลง

รปท 135 ตวอยางรปไฟลประเภท GIF ทมา httpwwwgirlzeedcomemotion-emoticonphp [Online]


72 ไฟลประเภท JPEG หรอ JPG (Joint Photographics Expert Group) เปนไฟลรปภาพทมการบบอดขอมลนอยกวาไฟลประเภท GIF สามารถแสดงสได 167 ลานส ภาพทไดจะมความคมชดมาก ไฟลประเภทนเหมาะกบภาพทตองการความละเอยดสง เชน ภาพถายจากกลองดจตอลหรอ ภาพทไดจากการสแกน ภาพทแสดงการไลเฉดส เปนตน

รปท 136 ตวอยางรปไฟลประเภท JPEG หรอ JPG ทมา httppicpostpostjungcom166900html [Online] วนทสบคน 23 มกราคม 2555

73 ไฟลประเภท PNG (Portable Network Graphic) เปนไฟลภาพท

นามาใชแทนทไฟลประเภท GIF เนองจากสามารถแสดงภาพไดเรวกวา แตยงไมคอยแพรหลายมาก

37



นกเนองจากไมสามารถทาเปนภาพเคลอนไหวได และมขอเสยทไมสามารถใชกบเวบเบราเซอรรนเกาได สาหรบ PNG-8 เปนรป แบบทใชสไดเพยง 256 ส และมคณสมบตคลายกบไฟล GIF จงเหมาะสาหรบใช ทาภาพทมสเรยบๆ เชน ภาพโลโก การตน สามารถกาหนดพนหลงใหโปรงแสงได และPNG-24 เปนรป แบบทใชสได 167 ลานส เชนเดยวกบไฟล JPG เหมาะสาหรบภาพถาย

รปท 137 ตวอยางรปไฟลประเภท PNG ทมา httpblogth88dbcomp=2901 [Online] วนทสบคน 23 มกราคม 2555

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

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

4 ลงมอสรางและทดสอบ (Construction and Testing) เปนขนตอนท เวบไซตถกสรางขนมาจรงทละหนาๆ โดยอาศยเคาโครงและองคประกอบกราฟกตามทไดออกแบบไว เนอหาตางๆ จะถกนามาใสและจดรปแบบ ลงคและระบบนาทางจะถกสรางองคประกอบเสรมตางๆถกวางเขาท อยางไรกตาม เมอลงมอสราง เวบไซต จรงเราอาจพบวาสงทออกแบบไวแลวบางอยางไมเหมาะสม หรอควรไดรบการปรบแตง กสามารถทาได เวบไซต ทสรางขนมาควรไดรบการทดสอบกอนทจะนาออกเผยแพร ไมวาจะเปนในเรองของความถกตองของเนอหา การทางานของลงคและระบบนาทาง ตรวจหาความผดพลาดของโปรแกรมสครปต และฐานขอมล นอกจากนกควรทดสอบ เวบไซต โดยใชสภาพแวดลอมทเหมอนกบของกลมผชม เวบไซต เปาหมาย เชน เวอรชนของบราวเซอร บราวเซอรยหอตางๆ ความละเอยดของจอภาพ ความเรวทเชอมตออนเตอรเนต เพอดวาผชมเปาหมายสามารถชม เวบไซต ไดอยางมประสทธภาพหรอไม

38



รปท 138 ตวอยางหนาเวบเพจทลงมอสราง

5 เผยแพร และสงเสรมใหเปนทรจก (Publishing and Promotion) โดยทวไปการนา เวบไซต ขนเผยแพรบนอนเตอรเนต จะทาดวยการอพโหลดไฟลทเกยวของขนไปบน เวบเซรฟเวอรทเราเปดบรการไว หลงจากนน เวบไซต ควรไดรบการทดสอบอกครง เพอตรวจหาปญหาบางอยางทไมสามารถทดสอบบนคอมพวเตอรของเราเองได เชนการลงคของ เวบไซต กบเวบไซตอนและการทางานของโปรแกรมกบฐานขอมล เวบไซตทจะประสบความสาเรจ นอกจากจะตองมเนอหาทด มการวางโครงสรางและการออกแบบเวบไซตทเหมาะสมแลว ยงตองไดรบการโฆษณาและสงเสรมใหเปนทรจกในกลมผชมเปาหมายหรอในวงกวางออกไปอกดวย การสงเสร มเวบไซต นสามารถทาไดหลายวธไมจาเปนตองใชงบประมาณจานวนมากเสมอไป เชน การแลกเปลยนลงคเวบไซต และแบนเนอรเวบไซต การประกาศบนเวบบอรด การสงอเมล เพมขอมลลงในเสรชเอนจนหรอเวบไซต ไดเรกทอร ไปจนถงแบบทใชงบประมาณมาก เชน การจดงานเปด ตว การลงโฆษณาบน เวบไซต อน หรออาจลงโฆษณา เวบไซตในวทย โทรทศน เปนตน

6 ดแลและพฒนา (Maintenance and Innovation) เวบไซตทเผยแพรออกไปแลวเราไมควรทงขวาง แตควรดแลโดยตลอด ซงหนาทนครอบคลมหลายเรอง ตงแตการตรวจสอบเวบเซรฟเวอร วาไมหยดทางานบอยๆ ลงคเวบไซต ทเชอมโยงตางๆยงคงใชได คอยตอบอเมล หรอ คาถามทมผฝากไวบน เวบไซต ถาเปน เวบไซต ขาวสารกตองปรบปรงขอมลใหทนสมยอยตลอดเวลา ถาเวบไซต มการใชฐานขอมลกตองมการสารองขอมลอยอยางสมาเสมอ นอกจากนนค วรตรวจสอบสถตของการเขาชมเปนระยะๆ ซงเปนบรการเสรมท เวบเซรฟเวอร มกจะมให เชน จานวนผเขาชม

39



สรป

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

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

รปท 139 ตวอยางเวบไซต sanookcom ทมการปรบปรงเนอหาอยางสมาเสมอ ทมา httpwwwsanookcom [Online] วนทสบคน 23 มกราคม 2555

การสรางเวบไซตจาเปนตองรจกคาศพททเกยวของเชน เวบเพจ โฮมเพจ เวบไซต

อนเตอรเนต (Internet) เวลด ไวด เวบ (World Wide Web ndash www) เวบเบราเซอร (Web Browser) โดเมนเนม (Domain Name) Web Hosting ( เวบโฮสตง ) และคาศพทอน ๆ ทเกยวของ รวมถงตองรจกพนทใชงานและสวนประกอบของเวบเพจวาประกอบดวย

1 สวนหวซงโลโก แบนเนอรหรองลงค 2 สวนเนอหา ประกอบดวยเนอหาซงเรยงความสาคญจากมากทสดไปหานอยและทสด

และพนหลงควรเปนสหรอรปภาพสโทนออนเพอใหดงายสบายตา

40



3 สวนทาย แสดงลงคหรอตดตอกบผดแลเวบไซตหรอเวบมาสเตอร 4 สวนสไลดบาร (Slide bar) แสดงเมน หรอการโฆษณา หรอเชอมโยง (link) ไปยง

เวบไซตอน ๆ เปนตน สวนสาคญในการพฒนาเวบไซตจาเปนตอ งเขาใจกระบวนการออกแบบเวบไซต ซง

ประกอบดวยขนตอนดงน 1 กาหนดเปาหมายและวางแผน (Site Definition and Planing) 2 วเคราะหและจดโครงสรางขอมลเวบไซต (Analysis and Information

Architecture) 3 ออกแบบเวบไซตและเตรยมขอมล (Web Design and Content Editing) 4 ลงมอสรางและทดสอบ (Construction and Testing) 5 เผยแพร และสงเสรมใหเปนทรจก (Publishing and Promotion) 6 ดแลและพฒนา (Maintenance and Innovation)

2



ค าศพททเกยวของเกยวกบเวบไซต

ในการใชงานบนระบบเครอขายอนเตอรเนต ม คาศพททเกยวของ มากมายและกอน

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

เวบเพจ (Web Page) หมายถง หนาเวบหนงหนา เปรยบเสมอนหนงสอคอกระดาษหนาหนงในหนงสอ เชน หนา 10 หรอ หนา 20 ทประกอบไปดวยขอความหรอรปภาพหรอบนหนากระดาษนน ซงเวบเพจจะมกหนากไดขนอยกบเนอหา

โฮมเพจ (Home Page) หมายถง เวบเพจหนาแรกของเวบไซต นน ๆ ทเปนหนา เวบเพจเรมตนทอาจประกอบดวยเมนเชอมโยงไปยงหนาเวบเพจตาง ๆ เปรยบเสมอนหนาปกหนงสอ

เวบไซต (Web Site) หมายถง เวบทประกอบดวยหนาโฮมเพจและเวบเพจหลาย ๆ หนามาประกอบกน ซงเปรยบเสมอนกบหนงสอทงเลม

เวบไซต (Web Site) wwwpbpvc acth

วทยาลยอาชวศกษาเพชรบร

โฮมเพจ(Home Page)

รปท 11 แสดงตวอยางหนาเวบทเปนโฮมเพจ เวบเพจ และเวบไซต ทมา wwwpbpvcacth [online] สบคนเมอวนท 23 มกราคม 2555

เวบเพจ (Web Page)

3









4












5












Hostname




6















7








8









9







10








11













12












13











14














15







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







3









4












5












Hostname




6















7








8









9







10








11













12












13











14














15







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







4












5












Hostname




6















7








8









9







10








11













12












13











14














15







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







5












Hostname




6















7








8









9







10








11













12












13











14














15







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







6















7








8









9







10








11













12












13











14














15







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







7








8









9







10








11













12












13











14














15







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







8









9







10








11













12












13











14














15







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







9







10








11













12












13











14














15







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







10








11













12












13











14














15







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







11













12












13











14














15







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







12












13











14














15







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







13











14














15







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







14














15







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







15







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







16












17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







17












18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







18














19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







19











20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







20









21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







21







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







22















23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







23








24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







24














25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







25










26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







26








27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







27








28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







28









29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







29













เมนหลก


30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







30














31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







31










32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







32












เมนหลก




33













34





1024X768 pixels









35












36










37








38






39



สรป








40







33













34





1024X768 pixels









35












36










37








38






39



สรป








40







34





1024X768 pixels









35












36










37








38






39



สรป








40







35












36










37








38






39



สรป








40







36










37








38






39



สรป








40







37








38






39



สรป








40







38






39



สรป








40







39



สรป








40







40







Documents

สาระส าคัญ - WordPress.com · 2014-11-07 · ที่ 1 ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บไซต์