Upload
-
View
1.106
Download
0
Embed Size (px)
Citation preview
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 เรอง การออกแบบโครงสรางเวบ
จ านวนสมาชกในกลม...............คน ชน...................วน/เดอน/ป............................ ชอ ......................................................................... เลขท ....................... ชอ ......................................................................... เลขท .......................
ตวอยางการออกแบบเวบไซต