1.โลโก ( LOGO) สงส าคญทจะชวยใหผเขาเวบจดจ าเวบไซตของเราไดกคอ “โลโก” นอกจากนเเลว โลโกยงชวยใหเวบไซตของเราดมเอกลกษณอกดวย โดยเรานยมวางต าเเหนงโลโกไวทมมบนซายเพราะเปนจดทสามารถสงเกตไดงาย ซงจากการวจยพบวาวางต าเเหนงโลโกทมมบนซายนนชวยใหผชมสามารถจดจ าเวบไซตของเราไดถง 84% เลยทเดยว คณคาของการวางต าแหนงโลโก บนซาย (Upper Left) = 84% บนขวา (Upper Right) = 6% บนกลาง (Upper Center) = 6% ทอน ๆ (Other Position) = 4% จะสงเกตไดวาการออกแบบโลโกของเเตละเวบไซตนนจะไมซบซอนมากนน แตจะเนนไปในทางดานการออกแบบใหเรยบงายและสามารถอานชอเวบไซตไดชดเจนมากกวา เนองจากใชภาพโลโกทซบซอนอาจสงผลใหผเขาชมไมสามารถจดจ าชอเวบไซตของเราไดนนเอง

2.เมนหลก (LINK MENU)

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

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

4.ภาพประกอบเเละเนอหา (CONTENT)

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

ขนตอนในการสรางโฮมเพจ

1.ขอพนทโฮมเพจจาก WEB HOSTING

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

2.ก าหนดลกษณะของโฮมเพจ

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

3.ออกแบบหนาโฮมเพจดวย PHOTOSHOP

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

4.สรางโฮมเพจใหสมบรณดวย DREAMWEAVER MX

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

5.อพโหลดโฮมเพจขนอนเตอรเนต

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

การออกแบบโครงสรางเวบ

โครงสรางของเวบโดยพนฐานจะม 2 ลกษณะ

1. โครงสรางเวบแบบตน

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

1. โครงสรางเวบแบบตน

รปแสดง ลกษณะโครงสรางเวบแบบตน

2. โครงสรางเวบแบบลก

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

2. โครงสรางเวบแบบลก

องคประกอบทควรมในเวบเพจ

องคประกอบทวไป

1. ชอของเวบเพจ (Title) 2. ประวตและรปภาพผจดท า (Profile/Picture) 3. การเชอมโยงภายในและภายนอกเวบ (Links) 4. การแสดงทอยของเวบ : URL 5. วน/เวลาทสรางเวบ (Date/Time) 6. การปรบปรงครงลาสด (Update) 7. ผจดท าเวบ : (created by) 8. การสงวนลขสทธ (Copy right) 9. การตดตอผจดท าเวบ (contract /e-mail) 10. สถานทตดตอของเวบ (Address) 11. บราวเซอรทเหมาะสมส าหรบการชม (Browser ) 12. ขนาดหนาจอทเหมาะสมในการชม 13. ค าถามทถกถามบอย FAQ (Frequency Asked Question) 14. ความชวยเหลอ (Help)

องคประกอบพเศษ

1. สมดเยยม (Guest book) 2. ฝากขอความ (Web board) 3. กระดานขาว (Bulletin Board) 4. กระท 5. แบบส ารวจ (Web poll) 6. จ านวนผเขาชม (Counter) 7. หองสนทนา (Chat Room) 8. สถตทกประเภท (Web state) 9. เทคนคพเศษดวยโปรแกรมสครปต (Java script, VBscript , cgi,asp,php) 10. โปรแกรมพเศษสนบสนน (Download) 11. สไลดสรปบรรยาย (Presentation)

ใบงานท 3 เรอง การออกแบบโครงสรางเวบ

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

ใบงานท 3 เรอง การออกแบบโครงสรางเวบ

จ านวนสมาชกในกลม...............คน ชน...................วน/เดอน/ป............................ ชอ ......................................................................... เลขท ....................... ชอ ......................................................................... เลขท .......................

ตวอยางการออกแบบเวบไซต