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

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

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

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

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

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

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

วชาการ จะใหความส าคญกบเนอหาทขอความมากกวาสสนทใชในเวบเพจ

การออกแบบและพฒนาเวบเพจนนควรมการวางแผนกอนการพฒนาเสมอ เนองจากระบบ

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

(Operating System : OS) ทใชงานในระบบเครอขายกหลากหลาย ตวอยาง เชน หากขณะทสรางเอกสาร

เวบนน ผทท าการพฒนาเวบใชคอมพวเตอรทมระบบปฏบตการทเปนโปรแกรมไมโครซอฟตวนโดวส

(Microsoft Windows)

หลงจากทท าการพฒนาเสรจแลวตองท าการโอนยายเอกสารเวบเหลานนไปเกบไวบนเครองคอมพวเตอรแม

ขาย ซงสวนใหญแลวจะเปนระบบปฏบตการยนกซ (Unix) หรอบางครงอาจเปนระบบปฏบตการทเปน

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

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

ระบบปฏบตการหลายระบบ ดงนนในการพฒนาเวบเพจนนจะตองค านงถงสงเหลานดวย

ผทท าการสรางเอกสารเวบนน ควรจะตองศกษาถงขอก าหนดพนฐานทควรทราบกอน เชน การ

ก าหนดชอของโฟลเดอร ประเภทของแฟมขอมลทเปนเอกสารเวบ ประเภทของแฟมขอมลรปภาพท

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

ในระบบปฏบตการยนกซหรอระบบปฏบตการลนกซ ลกษณะการตงชอแฟมขอมลนนจะเปน

แบบใหความส าคญกบลกษณะของตวอกษร (Case-Sensitive) กลาวคอตวอกษรพมพใหญและตวอกษร

พมพเลก จะถอวาเปนตวอกษรคนละตวกนซงตางจากระบบปฏบตการวนโดวส (Windows) หรอ

ระบบปฏบตการดอส (Dos) เชน แฟมขอมลทชอวา “index.html” กบ “INDEX.HTML” ใน

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

หรอดอส จะถอวาเปนแฟมขอมลเดยวกน

ดงนนหากผทสรางเวบเพจ ใชเครองคอมพวเตอรทมระบบปฏบตการวนโดวสในการสราง

เอกสารเวบ และก าหนดชอแฟมขอมลเปน “NextPage.html” เ มอปอนค าสงส าหรบการเชอมโยง

แฟมขอมลโดยใหเชอมโยงไปยงแฟมขอมลผานแปนพมพเปน “nextpage.html” ขณะทท าการทดสอบบน

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

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

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

แฟมขอมลกน

ขนตอนการพฒนาเวบเพจ

ล าดบขนตอนส าหรบการพฒนาเวบเพจ สามารถจ าแนกเปนล าดบขนตอนไดดงน

1. วางแผนการพฒนาเวบเพจ

2. ก าหนดโฟลเดอรทใชส าหรบเกบแฟมขอมลทเกยวกบเวบเพจ

3. จดหาภาพทเกยวของกบเนอหาและจดเกบไวในโฟลเดอรไดก าหนดไว

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

ในโฟลเดอรทไดก าหนดไว

5. ตรวจสอบผลเอกสารเวบผานทางโปรแกรมเวบเบราวเซอร

6. น าขอมลขนไปเกบไวบนเครองคอมพวเตอรแมขาย (Server) และท าการตรวจสอบผลการเรยกด

เอกสารเวบทอยบนเครองคอมพวเตอรแมขาย

รายละเอยดของขนตอนการพฒนาเวบเพจมหลายขนตอนทตองขนอยกบผดแลระบบ (Web System

Administrator) เปนผก าหนดวธการ ดงนนกอนด าเนนการสรางเวบเพจควรตดตอขอขอมลเหลานจาก

ผดแลระบบกอน

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

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

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

ตอเนอง เปรยบไดกบตนไมกลบหว

2. แบบเชงเสน เปนการจดแสดงหนาเอกสารเวบ โดยเรยงตอเนองกนไปในทศทางเดยวไมมการแตก

ออกเปนกงกานสาขา

3. แบบผสม เปนการจดเรยงหนาของเอกสารเวบโดยผสมผสานระหวางแบบล าดบชนและแบบเชง

เสน ทงนกขนอยกบผทท าการออกแบบ วาจะจดเรยงล าดบของรปแบบเอกสารเวบในลกษณะใด

การวางแผนพฒนาเวบเพจ

การวางแผนส าหรบการพฒนาเวบเพจนน ถอวาเปนขนตอนส าคญขนตอนหนง เนองจาก

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

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

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

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

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

ทท าการสรางเวบเพจสามารถมองเหนภาพการไหลของขอมล (Data Flow) ภายในเวบเพจไดชดเจน

และสามารถท าการพจารณาตอไปไดวาเอกสารเวบแตละแฟมขอมลนนมความสมพนธกบเอกสารอน

อยางไร และสมพนธกบแฟมขอมลเอกสารเวบใดบาง

ตวอยาง ตองการสรางเวบเพจเพอน าเสนอความรเกยวกบคอมพวเตอรเบองตน อาจสามารถท าการ

ออกแบบไดดงน

การก าหนดชอและนามสกลของแฟมขอมลเอกสารเวบ

ขอก าหนดส าหรบการตงชอของแฟมขอมลนน นอกจากจะขนอยกบความสามารถของ

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

(Web Administrator) ดวย ดงนนผทสรางเวบเพจจงตองสอบถามกฎการตงชอเหลานโดยละเอยด

โดยทวไปแลวมหลกการดงน

ควรใชตวอกษร a-z หรอตวเลข 0-9 ในการตงชอไมควรใชอกขระพเศษ

ตวอกษร a-z ทใชในการตงชอ ควรเปนตวอกษรพมพเลก

ไมควรเวนวรรคชองวางภายในชอ

หามใชอกขระพเศษในการตงชอ ยกเวน Underscore (ขดลาง) หรอ Dash (ขดกลาง)

ชอแฟมขอมลแรกของเวบเพจ มกจะใชชอ index.html หรอ index.htm

นามสกลของแฟมขอมลเอกสารเวบม 2 รปแบบ คอ .htm และ .html สวนแฟมขอมลประเภทอน ผ

ทท าการสรางเวบเพจควรสอบถามจากผดแลเครองคอมพวเตอรแมขายวาเครองคอมพวเตอรแม

ขาย (Server) นสามารถใชงานเกบเอกสารทมนามสกลของแฟมขอมลเปนรปแบบใดไดอก เชน

.php , .asp เปนตน

นอกจากการวางโครงรางของเวบเพจขางตนแลว สงทควรจะท าการพจารณาตอไปคอ

- รปแบบการแสดงผลของหนาเวบเพจ หมายถงลกษณะการวางเนอหา และรายการเลอกตาง ๆ บน

หนาเวบ ซงมไดหลากหลายรปแบบ เชน

- การแสดงผลเนอหาทงหมดรวมในหนาเดยวกน ซงการแสดงผลแบบนจะรวมเอารายการเลอก

และเนอหาไวในหนาเดยวกน

- การแสดงผลดวยตาราง การแสดงผลรปแบบนจะแยกระหวางรายการเลอกหรอเมน (Menu) ไว

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

- การแสดงผลดวยเฟรม การแสดงผลรปแบบนคลายกบการแสดงผลแบบตารางแตรายการเลอก

หรอเมนนนจะถกตรงกบท จะไมมการเคลอนยายเมอท าการเลอนจอภาพหรอเลอกเนอหาท

ตองการแสดงผล แตจะท างานไดเฉพาะโปรแกรมเวบเบราวเซอรเทานน

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

เอกสารเวบ (Title Bar) โดยขอความสวนนจะถกน าไปใชเปนค าส าคญ (Keyword) ทใชในการ

คนหาเวบเพจจากบคคลอน ขอความทน ามาก าหนดเปนเรองของเวบเพจนน ควรมลกษณะ

ดงตอไปน

- สามารถเปนขอความภาษาไทยหรอภาษาองกฤษ

- มความยาวไมเกน 64 ตวอกษร

- เปนขอความทสอความหมายทกระชบเกยวกบเนอหาในหนาเวบนน

- ลกษณะของหนาเวบ หมายถงการก าหนดสของพนของเอกสารเวบ (Background Color) หรอ

รปภาพทจะน ามาใชเปนพนหลงของเอกสารเวบ (Background Image) สของตวอกษรปกต (Normal Text)

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

ดงดดความสนใจของผใชงาน

การก าหนดโฟลเดอรส าหรบเกบขอมล

การก าหนดโฟลเดอรกอนทจะท าการสรางชดเอกสารเวบเพจนน เปนล าดบขนตอนทควรกระท า

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

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

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

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

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

ต าแหนงกน เพราะจะท าใหการจดการเกยวกบเวบเพจนนมปญหายงยากได โดยท าการสรางโฟลเดอร 1

โฟลเดอร ตอเวบไซต 1 เวบไซต

ตวอยางการสรางโฟลเดอรชอ WEB-SITE ไวท desktop ของ Windows

- ทหนาจอของคอมพวเตอรจะแสดง Desktop ของ Windows

- น าเมาสไปชตรงต าแหนงพนทวางบน Desktop จากนนใหกดปมเมาสทางดานขวาเพอแสดงเมน

ลด

- ท าการเลอกค าสง New จากนนเลอก Folder

- ปรากฏไอคอนของโฟลเดอรวาง

- ใหท าการพมพชอของโฟลเดอร ในทน คอ WEB-SITE จากนนท าการกดปม ENTER

จะปรากฏโฟลเดอรชอ WEB-SITE

การจดเตรยมภาพทเกยวของกบเนอหาเวบ

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

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

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

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

เวบไซตในอนาคต

แฟมขอมลรปภาพทน ามาใชในการท าเวบเพจนน ปจจบนนยมใชอย 2 รปแบบ คอ

- ไฟลฟอรแมต JPEG (Joint Photographer’s Experts Group File)

- ไฟลฟอรแมต GIF (Graphics Interlace File)

การจดหารปแบบทน ามาใชในการจดท าเวบเพจนน สามารถจดเตรยมไดหลายวธ เชน

- สรางรปภาพโดยโปรแกรมกราฟกตาง ๆ เชน PhotoShop , Corel Draw เปนตน ในการสราง

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

- เลอกรปภาพจากชดภาพส าเรจรป ทมการวางจ าหนายในลกษณะคลงรปภาพส าหรบท าเวบเพจ

(Web ClipArt) ซงสะดวกรวดเรวและงายตอการใชงาน แตอาจจะไดภาพทไมตรงกบความ

ตองการมากนก

- น ารปภาพจากโปรแกรมอน หรอเวบเพจอนมาใช ซงสะดวกรวดเรวตอการใชงาน เชนกน แต

อาจเกดปญหาทางดานลขสทธของภาพ

การสรางเอกสารเวบ

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

เกยวกบเวบเพจ (Web Administrator) แลว การก าหนดชอแฟมขอมลของเอกสารเวบตองเปนไปตาม

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

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

อนเทอรเนต

แฟมขอมลเอกสารเวบนนจะเขยนโดยใชภาษาเอชทเอมแอล (HTML) ซงกคอแฟมขอมล

ขอความหรอแฟมขอมลตวอกษร (Text File) ดงนนการสรางเอกสรเวบนน สามารถใชโปรแกรมท

สามารถจดการเกยวกบแฟมขอมลตวอกษรใดกได ในการชวยส าหรบการเขยนรหสค าสงภาษา

เอชทเอมแอล เชน Notepad , Wordpad เปนตน นอกจากนในปจจบนมโปรแกรมชวยในการสราง

เอกสารเวบอกมากมาย เชน โปรแกรมไมโครซอฟต ฟรอนตเพจ (Front Page) เปนตน

เอกสารเวบนนเปนเอกสารทเปนลกษณะเปนแฟมขอความปกต ทเกบรหสค าสงของภาษา

เอชทเอมแอล (HTML) ดงนนเพอเปนการบอกใหโปรแกรมเวบเบราวเซอรทราบวา เอกสารนเปน

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

สวนขยายของไฟล (File Extension) เปนตวบอกแกโปรแกรมเวบเบราวเซอร โดยนามสกลหรอสวน

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

“index.html” , “index.htm” หรอ “default.html” เปนตน ทงนกขนอยกบผดแลระบบ

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

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

เลกในการก าหนดชอและนามสกลของแฟมขอมล เพอปองกนปญหาทเกดจากการท างานขาม

ระบบปฏบตการ เนองจากระบบอนเทอรเนตจะใชระบบปฏบตการหลายระบบรวมกน โดยเฉพาะ

ยนกซ (Unix) จะถอวาตวอกษรพมพใหญและตวอกษรพมพเลกนนมความหมายทตางกน (Case-

Sensitive)