หลกการออกแบบเวบไซต�♦ การกำาหนดขนาดเวบเพจ ♦

ขนาดของเวบไซตทนยมในปจจบนม 2 ขนาด คอ1. ขนาดเวบไซตแบบ 800 X 600 pixels เปนขนาดทสามารถใชไดกบหนาจอทกขนาดในปจจบนเปนขนาดของการออกแบบเวบไซตทใชในอดต เนองจากอดตขนาดของจอคอมพวเตอรมขนาดเลก2. ขนาดเวบไซตแบบ 1024 X 768 pixels เปนขนาดทนยมในปจจบน เนองจากผใชนยมใชจอคอมพวเตอรขนาดใหญขนเนองมาจากราคาจอคอมพวเตอรทถกลง

♦ รปแบบการออกแบบเวบไซต ♦เวบไซตในปจจบนจะมการออกแบบทแตกตางกนไมมากนก ซงการออกแบบหนาตาเวบไซตสวนใหญจะมองดองคประกอบขององคกร หนวยงาน หรอเนอหาเรองทนำาเสนอเปนหลก ซงการออกแบบหนาตของเวบไซตมอย 3 แบบ คอ1. การออกแบบเวบไซตทเนนการนำาเสนอเนอหาเปนการออกแบบเวบไซตทเนนการนำาเสนอเนอหามากกวารปภาพ โดยโครงสรางใชรปแบบตารางเปนหลก มการออกแบบหนาตารปแบบงาย  เชน มเมนสารบญ และเนอหา2. การออกแบบเวบไซตทเนนภาพกราฟกเปนการออกแบบเวบไซตทเนนภาพกราฟกทสวยงาม ซงอาจจะใชโปรแกรม Photoshop สำาหรบการตกแตงภาพ ขอด   สวยงาม นาสนใจ ขอเสย   อาจจะใชเวลาในการโหลดเวบนาน3.การออกแบบเวบไซตทมทงภาพและเนอหาเปนการออกแบบเวบทนยมในปจจบนซงประกอบดวยขอความ รปภาพ โดยมการจดองคประกอบตาง ๆ เพอใหเวบนาสนใจ

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

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

1. กำาหนดวตถประสงค โดยพจารณาวาเปาหมายของการสรางเวบไซตนทำาเพออะไร

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

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

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

5. หลงจากนน จงทำาการสรางเวบไซตแลวนำาไปทดลองเพอหาขอผดพลาดและทำาการแกไขปรบปรง แลวจงนำาเขาสเครอขายอนเทอรเนตเปนขนสดทาย

องคประกอบทดของการออกแบบเวบไซต1. โครงสรางทชดเจน ผออกแบบเวบไซตควรจดโครงสรางหรอจดระเบยบของขอมลทชดเจน แยกยอยเนอหาออกเปนสวนตาง ๆ ทสมพนธกนและใหอยในมาตรฐานเดยวกน จะชวยใหนาใชงานและงาย ตอการอานเนอหาของผใช2. การใชงานทงาย ลกษณะของเวบทมการใชงานงายจะชวยใหผใชรสกสบายใจตอการอานและสามารถทำาความเขาใจกบเนอหาไดอยางเตมท โดยไมตองมาเสยเวลาอยกบการทำาความเขาใจ การใชงานทสบสนดวยเหตนผออกแบบจงควรกำาหนดปมการใชงานทชดเจน เหมาะสม โดยเฉพาะปมควบคมเสนทางการเขาสเนอหา (Navigation) ไมวาจะเปนเดนหนา ถอยหลง หากเปนเวบไซตทมเวบเพจจำานวนมาก ควรจะจดทำาแผนผงของเวบไซต (Site Map) ทชวยใหผใชทราบวา ตอนนอย ณ จดใด หรอเครองมอสบคน (Search Engine) ทชวยในการคนหาหนาททตองการ3. การเชอมโยงทด ลกษณะไฮเปอรเทกซทใชในการเชอมโยง ควรอยในรปแบบทเปนมาตรฐาน ทวไปและตองระวงเรองของตำาแหนงในการเชอมโยง การทจำานวนการเชอมโยงมากและกระจดกระจายอยทวไปในหนาอาจกอใหเกดความสบสน นอกจากนคำาทใชสำาหรบการเชอมโยงจะตองเขาใจงายมความชดเจนและไมสนจนเกนไป นอกจากนในแตละเวบเพจทสรางขนมาควรม จดเชอมโยงกลบมายงหนาแรกของเวบไซตทกำาลงใชงานอยดวย ทงนเผอวาผใชเกดหลงทาง และไมทราบวาจะทำาอยางตอไปดจะไดมหนทางกลบมาสจดเรมตนใหม ระวงอยาใหมหนาทไมมการเชอมโยง (Orphan Page) เพราะจะทำาใหผใชไมรจะทำาอยางไรตอไป4. ความเหมาะสมในหนาจอ เนอหาทนำาเสนอในแตละหนาจอควรสน กระชบ และทนสมย หลกเลยงการใชหนาจอทมลกษณะการเลอนขนลง (Scrolling) แตถาจำาเปนตองม ควรจะใหขอมลทม ความสำาคญอยบรเวณดานบนสดของหนาจอ หลกเลยงการใชกราฟกดานบนของหนาจอ เพราะถงแมจะดสวยงาม แตจะทำาใหผใชเสยเวลาในการไดรบขอมลทตองการ แตหากตองมการใชภาพประกอบกควรใชเฉพาะทมความสมพนธ

กบเนอหาเทานน นอกจากนการใชรปภาพเพอเปนพนหลง (Background) ไมควรเนนสสนทฉดฉาดมากนก เพราะอาจจะไปลดความเดนชดของเนอหาลง ควรใชภาพทมสออน ๆ ไมสวางจนเกนไปรวมไปถงการใชเทคนคตาง ๆ เชน ภาพเคลอนไหว หรอตวอกษรวง (Marquees) ซงอาจจะเกดการรบกวนการอานได ควรใชเฉพาะทจำาเปนจรง ๆ เทานนตวอกษรทนำามาแสดงบนจอภาพควรเลอกขนาดทอานงาย ไมมสสนและลวดลายมากเกนไป5. ความรวดเรว ความรวดเรวเปนสงสำาคญประการหนงทสงผลตอการเรยนร ผใชจะเกดอาการเบอหนายและหมดความสนใจกบเวบทใชเวลาในการแสดงผลนาน สาเหตสำาคญทจะทำาใหการแสดงผลนานคอการใชภาพกราฟกหรอภาพเคลอนไหว ซงแมวาจะชวยดงดดความสนใจไดด ฉะนนในการออกแบบจงควรหลกเลยงการใชภาพขนาดใหญ หรอภาพเคลอนไหวทไมจำาเปน และพยายามใชกราฟกแทนตวอกษรธรรมดาใหนอยทสด โดยไมควรใชมากเกนกวา 2 – 3 บรรทดในแตละหนาจอ

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

2. เวบทมโครงสรางแบบลำาดบขน (Hierarchical Structure)

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

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

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

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

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

จะเขาไปสหนาใดๆ กไดตามความตองการ ขอดของรปแบบนคองายตอผใชในการทองเทยวบนเวบ โดยผใชสามารถกำาหนดทศทาง การเขาสเนอหาไดดวยตนเอง แตขอเสยคอถามการเพมเนอหาใหมๆ อยเสมอจะเปนการยากในการ ปรบปรง นอกจากนการเชอมโยงระหวางขอมลทมมากมายนนอาจทำาใหผใชเกดการสบสนและ เกดปญหาการคงคางของหวขอ (Cognitive Overhead) ไดขอมลจาก http://www.cybered.co.th/warnuts/wbi/index3.htm

♦องคประกอบของการออกแบบเวบไซต ♦1. ความเรยบงาย (Simplicity)หมายถง การจำากดองคประกอบเสรมใหเหลอเฉพาะองคประกอบหลก กลาวคอในการสอสารเนอหากบผใชนน เราตองเลอกเสนอสงทเราตองการนำาเสนอจรง ๆ ออกมาในสวนของกราฟก สสน ตวอกษรและภาพเคลอนไหว ตองเลอกใหพอเหมาะ ถาหากมมากเกนไปจะรบกวนสายตาและสรางความคำาราญตอผใชตวอยางเวบไซตทไดรบการออกแบบทด ไดแก เวบไซตของบรษทใหญ ๆ อยางเชน Apple Adobe Microsoft หรอ Kokia ทมการออกแบบเวบไซตในรปแบบทเรยบงาย ไมซบซอน และใชงานอยางสะดวก2. ความสมำาเสมอ ( Consistency)หมายถง การสรางความสมำาเสมอใหเกดขนตลอดทงเวบไซต โดยอาจเลอกใชรปแบบเดยวกนตลอดทงเวบไซตกได เพราะถาหากวาแตละหนาในเวบไซตนนมความแตกตางกนมากจนเกนไป อาจทำาใหผใชเกดความสบสนและไมแนใจวากำาลงอยในเวบไซตเดมหรอไม เพราะฉะนนการออกแบบเวบไซตในแตละหนาควรทจะมรปแบบ สไตลของกราฟก ระบบเนวเกชน (Navigation) และโทนสทมความคลายคลงกนตลอดทงเวบไซต3. ความเปนเอกลกษณ (Identity)ในการออกแบบเวบไซตตองคำานงถงลกษณะขององคกรเปนหลก เนองจากเวบไซตจะสะทอนถงเอกลกษณและลกษณะขององคกร การเลอกใชตวอกษร ชดส รปภาพหรอกราฟก จะมผลตอรปแบบของเวบไซตเปน

อยางมาก ตวอยางเชน ถาเราตองออกแบบเวบไซตของธนาคารแตเรากลบเลอกสสนและกราฟกมากมาย อาจทำาใหผใชคดวาเปนเวบไซตของสวนสนกซงสงผลตอความเชอถอขององคกรได4. เนอหา (Useful Content)ถอเปนสงสำาคญทสดในเวบไซต เนอหาในเวบไซตตองสมบรณและไดรบการปรบปรงพฒนาใหทนสมยอยเสมอ ผพฒนาตองเตรยมขอมลและเนอหาทผใชตองการใหถกตองและสมบรณ เนอหาทสำาคญทสดคอเนอหาททมผพฒนาสรางสรรคขนมาเอง และไมไปซำากบเวบอน เพราะจะถอเปนสงทดงดดผใชใหเขามาเวบไซตไดเสมอ แตถาเปนเวบทลงคขอมลจากเวบอน ๆ มาเมอใดกตามทผใชทราบวา ขอมลนนมาจากเวบใด ผใชกไมจำาเปนตองกลบมาใชงานลงคเหลานนอก5. ระบบเนวเกชน (User-Friendly Navigation)เปนสวนประกอบทมความสำาคญตอเวบไซตมาก เพราะจะชวยไมใหผใชเกดความสบสนระหวางดเวบไซต ระบบเนวเกชนจงเปรยบเสมอนปายบอกทาง ดงนนการออกแบบเนวเกชน จงควรใหเขาใจงาย ใชงานไดสะดวก ถามการใชกราฟกกควรสอความหมาย ตำาแหนงของการวางเนวเกชนกควรวางใหสมำาเสมอ เชน อยตำาแหนงบนสดของทกหนาเปนตน ซงถาจะใหดเมอมเนวเกชนทเปนกราฟกกควรเพมระบบเนวเกชนทเปนตวอกษรไวสวนลางดวย เพอชวยอำานวยความสะดวกใหกบผใชทยกเลกการแสดงผลภาพกราฟกบนเวบเบราเซอร6. คณภาพของสงทปรากฏใหเหนในเวบไซต (Visual Appeal)ลกษณะทนาสนใจของเวบไซตนน ขนอยกบความชอบสวนบคคลเปนสำาคญ แตโดยรวมแลวกสามารถสรปไดวาเวบไซตทนาสนใจนนสวนประกอบตาง ๆ ควรมคณภาพ เชน กราฟกควรสมบรณไมมรอยหรอขอบขนบนไดใหเหน ชนดตวอกษรอานงายสบายตา มการเลอกใชโทนสทเขากนอยางสวยงาม เปนตน7. ความสะดวกของการใชในสภาพตาง ๆ (Compatibility)

การใชงานของเวบไซตนนไมควรมขอบจำากด กลาวคอ ตองสามารถใชงานไดดในสภาพแวดลอมทหลากหลาย ไมมการบงคบใหผใชตองตดตงโปรแกรมอนใดเพมเตม นอกเหนอจากเวบบราวเซอร ควรเปนเวบทแสดงผลไดดในทกระบบปฏบตการ สามารถแสดงผลไดในทกความละเอยดหนาจอ ซงหากเปนเวบไซตทมผใชบรการมากและกลมเปาหมายหลากหลายควรใหความสำาคญกบเรองนใหมาก8. ความคงทในการออกแบบ (Design Stability)ถาตองการใหผใชงานรสกวาเวบไซตมคณภาพ ถกตอง และเชอถอได ควรใหความสำาคญกบการออกแบบเวบไซตเปนอยางมาก ตองออกแบบวางแผนและเรยบเรยงเนอหาอยางรอบคอบ ถาเวบทจดทำาขนอยางลวก ๆ ไมมมาตรฐานการออกแบบและระบบการจดการขอมล ถามปญหามากขนอาจสงผลใหเกดปญหาและทำาใหผใชหมดความเชอถอ9. ความคงทของการทำางาน (Function Stability)ระบบการทำางานตาง ๆ ในเวบไซตควรมความถกตองแนนอน ซงตองไดรบการออกแบบสรางสรรคและตรวจสอบอยเสมอ ตวอยางเชน ลงคตาง ๆ ในเวบไซต ตองตรวจสอบวายงสามารถลงคขอมลไดถกตองหรอไม เพราะเวบไซตอนอาจมการเปลยนแปลงไดตลอดเวลา ปญหาทเกดจากลงค กคอ ลงคขาด ซงพบไดบอยเปนปญหาทสรางความรำาคาญกบผใชเปนอยางมาก

♦ ขนตอนการสรางเวบไซต ♦ขนตอนท 1  การวางแผนการจดทำาเวบไซตเปนขนตอนแรกของการออกแบบเวบ เนองจากเราตองกำาหนดชอเรอง เนอหา และรายละเอยดของเวบทเราจะจดทำาเพอใหเหนมมมองคราว ๆ กอนจะลงมอสรางเวบไซต นอกจากนเรายงตองทำาการแบงเนอหาเปนหมวดหมตาง ๆ ตามลำาดบกอน-หลง เพอใหงายตอการจดทำาโครงรางของเวบขนตอนท 2  การกำาหนดโครงสรางของเวบ          เปนขนตอนในการกำาหนดผงของเวบ เพอใหทราบองคประกอบทงหมดของเวบ ตวอยางดงรป

ขอสงเกต1. หนาแรกของเวบ หรอโฮมเพจ จะตองชอ index สวนนามสกลใหใส

ตามลกษณะของภาษาทใชในการสรางเวบ2. การตงชอเวบเพจแตละหนาเวลาใหกำาหนดชอเปนภาษาองกฤษตาม

ดวยนามสกลของภาษาทเราสรางเวบ เชน index.html, home.html, history.html เปนตน

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

ขนตอนท 4  การตงชอไฟลและโฟลเดอร1. การสรางโฟลเดอรการสรางโฟลเดอรใหสรางเปนชอหนวยงาน / เรองนน ๆ ควรใชตวอกษร ภาษาองกฤษตวพมพเลก หรอผสมกบตวเลข 0-9 เชน swt คอ โรงเรยนเสรมงามวทยาคม จากนนขางในโฟลเดอร swt ใหเราสราง

โฟลเดอรเกบรปภาพ พนหลง ไฟลเสยง ไฟลวดโอ หรอโฟลเดอรอนเปนชอภาษาองกฤษ เชน pic คอโฟลเดอรเกบรปภาพ, bg คอ โฟลเดอรเกบพนหลง เปนตน

2. การตงชอไฟลการตงชอไฟลใหตงชอและนามสกลไฟลเปนตวอกษร ภาษาองกฤษตวพมพเลก หรอผสมกบตวเลข 0-9 หรอเครองมอขดลบ/ขดลาง  และตงชอไฟลใหตรงกบเรองนน ๆ เชน history.html คอ ประวตของโรงเรยน, person.html คอ บคลากรของโรงเรยน เปนตน

ขนตอนท 5  การออกแบบเวบเพจแตละหนาในเวบไซต

สวนประกอบของเวบไซตทดโครงสรางของเวบไซตโดยจะมสวนหลกๆอยดวยกนทงหมด 3 สวนหลก ๆ ดงน1. สวนหวของหนา (Page Header)

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

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

ชอเวบไซต เมนหลกหรอลงค (Navigation Bar) เปนจดเชอมโยงไปสเนอหา

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

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

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

ขนตอนท   7  การลงทะเบยนขอพนทเวบไซตเมอทำาการออกแบบและสรางเวบไซตเสรจแลว ขนตอนตอไป คอ การเผยแพรเวบไซตสโลกของอนเทอรเนตใหคนอนเขามาเยยมชม วธการ คอ การนำาเวบไซตไปฝากกบผใหบรการพนทเวบไซตทงแบบเสยคาใชจายหรอบรการ และแบบพนทเวบไซตฟร ซงวนนเราจะขอแนะนำาเวบไซตทใหบรการฟรพนทฝากเวบ คอ http://www.thcity.com

ขนตอนท   8  การอพโหลดเวบไซต          เมอเราทำาการสมครบรการพนทฝากเวบแลว ขนตอนตอไป คอการอพโหลดไฟลเวบไซตของเราไปยงเวบไซตทใหบรการพนทฝากเวบซง

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

ขนตอนท   9  การเรยกดเวบไซตเมอเราทำาการอพโหลดไฟลเวบไซตของเราขนบนเวบไซตทใหบรการพนทฝากเวบแลว เราสามารถเปดดเวบไซตของเราผานโปรแกรมเวบบราวเซอร เชน Internet Explorer, Mozilla Firefox, Google Chrome เปนตน โดยการพมพทอยเวบไซตตรง Address Bar เชน http://www/.swt.ac.th เปนตน

ตวอยางเวบไซต สำานกงานเขตพนทการศกษามธยมศกษาเขต 32

ขอบคณแหลงทมาของขอมล http://krupiyadanai.wordpress.com