Download - ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้
![Page 1: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/1.jpg)
หลกการออกแบบเวบไซต�♦ การกำาหนดขนาดเวบเพจ ♦
ขนาดของเวบไซตทนยมในปจจบนม 2 ขนาด คอ1. ขนาดเวบไซตแบบ 800 X 600 pixels เปนขนาดทสามารถใชไดกบหนาจอทกขนาดในปจจบนเปนขนาดของการออกแบบเวบไซตทใชในอดต เนองจากอดตขนาดของจอคอมพวเตอรมขนาดเลก2. ขนาดเวบไซตแบบ 1024 X 768 pixels เปนขนาดทนยมในปจจบน เนองจากผใชนยมใชจอคอมพวเตอรขนาดใหญขนเนองมาจากราคาจอคอมพวเตอรทถกลง
♦ รปแบบการออกแบบเวบไซต ♦เวบไซตในปจจบนจะมการออกแบบทแตกตางกนไมมากนก ซงการออกแบบหนาตาเวบไซตสวนใหญจะมองดองคประกอบขององคกร หนวยงาน หรอเนอหาเรองทนำาเสนอเปนหลก ซงการออกแบบหนาตของเวบไซตมอย 3 แบบ คอ1. การออกแบบเวบไซตทเนนการนำาเสนอเนอหาเปนการออกแบบเวบไซตทเนนการนำาเสนอเนอหามากกวารปภาพ โดยโครงสรางใชรปแบบตารางเปนหลก มการออกแบบหนาตารปแบบงาย เชน มเมนสารบญ และเนอหา2. การออกแบบเวบไซตทเนนภาพกราฟกเปนการออกแบบเวบไซตทเนนภาพกราฟกทสวยงาม ซงอาจจะใชโปรแกรม Photoshop สำาหรบการตกแตงภาพ ขอด สวยงาม นาสนใจ ขอเสย อาจจะใชเวลาในการโหลดเวบนาน3.การออกแบบเวบไซตทมทงภาพและเนอหาเปนการออกแบบเวบทนยมในปจจบนซงประกอบดวยขอความ รปภาพ โดยมการจดองคประกอบตาง ๆ เพอใหเวบนาสนใจ
♦ การออกแบบโครงสรางเวบไซต ♦การออกแบบโครงสรางเวบไซต คอ การวางแผนการจดลำาดบ เนอหาสาระของเวบไซต ออกเปนหมวดหม เพอจดทำาเปนโครงสรางในการจดวางหนา
![Page 2: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/2.jpg)
เวบเพจทงหมด เปรยบเสมอนแผนท ททำาใหเหนโครงสรางทงหมดของเวบไซต ชวยในนกออกแบบเวบไซตไมใหหลงทาง การจดโครงสรางของเวบไซต มจดมงหมายสำาคญคอ การทจะทำาใหผเขาเยยมชม สามารถคนหาขอมลในเวบเพจไดอยางเปนระบบ ซงถอวาเปนขนตอนทสำาคญ ทสามารถสรางความสำาเรจใหกบผททำาหนาทในการออกแบบและพฒนาเวบไซต (Webmaster) การออกแบบโครงสรางหรอจดระเบยบของขอมลทชดเจน แยกยอยเนอหาออกเปนสวนตาง ๆ ทสมพนธกนและใหอยในมาตรฐานเดยวกน จะชวยใหนาใชงานและงาย ตอการเขาอานเนอหาของผใชเวบไซตหลกในการออกแบบโครงสรางเวบไซต ควรพจารณาดงน
1. กำาหนดวตถประสงค โดยพจารณาวาเปาหมายของการสรางเวบไซตนทำาเพออะไร
2. ศกษาคณลกษณะของผทเขามาใชวากลมเปาหมายใดทผสรางตองการสอสาร ขอมลอะไรทพวกเขาตองการโดยขนตอนนควรปฏบตควบคไปกบขนตอนทหนง
3. วางแผนเกยวกบการจดรปแบบโครงสรางเนอหาสาระ การออกแบบเวบไซตตองมการจดโครงสรางหรอจดระเบยบขอมลทชดเจน การทเนอหาม ความตอเนองไปไมสนสดหรอกระจายมากเกนไป อาจทำาใหเกดความสบสนตอผใชได ฉะนนจงควรออกแบบใหมลกษณะทชดเจนแยกยอยออกเปนสวนตาง ๆ จดหมวดหมในเรองทสมพนธกน รวมทงอาจมการแสดงใหผใชเหนแผนทโครงสรางเพอปองกนความสบสนได
4. กำาหนดรายละเอยดใหกบโครงสราง ซงพจารณาจากวตถประสงคทตงไว โดยตงเกณฑในการใช เชน ผใชควรทำาอะไรบาง จำานวนหนาควรมเทาใด มการเชอมโยง มากนอยเพยงใด
5. หลงจากนน จงทำาการสรางเวบไซตแลวนำาไปทดลองเพอหาขอผดพลาดและทำาการแกไขปรบปรง แลวจงนำาเขาสเครอขายอนเทอรเนตเปนขนสดทาย
![Page 3: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/3.jpg)
องคประกอบทดของการออกแบบเวบไซต1. โครงสรางทชดเจน ผออกแบบเวบไซตควรจดโครงสรางหรอจดระเบยบของขอมลทชดเจน แยกยอยเนอหาออกเปนสวนตาง ๆ ทสมพนธกนและใหอยในมาตรฐานเดยวกน จะชวยใหนาใชงานและงาย ตอการอานเนอหาของผใช2. การใชงานทงาย ลกษณะของเวบทมการใชงานงายจะชวยใหผใชรสกสบายใจตอการอานและสามารถทำาความเขาใจกบเนอหาไดอยางเตมท โดยไมตองมาเสยเวลาอยกบการทำาความเขาใจ การใชงานทสบสนดวยเหตนผออกแบบจงควรกำาหนดปมการใชงานทชดเจน เหมาะสม โดยเฉพาะปมควบคมเสนทางการเขาสเนอหา (Navigation) ไมวาจะเปนเดนหนา ถอยหลง หากเปนเวบไซตทมเวบเพจจำานวนมาก ควรจะจดทำาแผนผงของเวบไซต (Site Map) ทชวยใหผใชทราบวา ตอนนอย ณ จดใด หรอเครองมอสบคน (Search Engine) ทชวยในการคนหาหนาททตองการ3. การเชอมโยงทด ลกษณะไฮเปอรเทกซทใชในการเชอมโยง ควรอยในรปแบบทเปนมาตรฐาน ทวไปและตองระวงเรองของตำาแหนงในการเชอมโยง การทจำานวนการเชอมโยงมากและกระจดกระจายอยทวไปในหนาอาจกอใหเกดความสบสน นอกจากนคำาทใชสำาหรบการเชอมโยงจะตองเขาใจงายมความชดเจนและไมสนจนเกนไป นอกจากนในแตละเวบเพจทสรางขนมาควรม จดเชอมโยงกลบมายงหนาแรกของเวบไซตทกำาลงใชงานอยดวย ทงนเผอวาผใชเกดหลงทาง และไมทราบวาจะทำาอยางตอไปดจะไดมหนทางกลบมาสจดเรมตนใหม ระวงอยาใหมหนาทไมมการเชอมโยง (Orphan Page) เพราะจะทำาใหผใชไมรจะทำาอยางไรตอไป4. ความเหมาะสมในหนาจอ เนอหาทนำาเสนอในแตละหนาจอควรสน กระชบ และทนสมย หลกเลยงการใชหนาจอทมลกษณะการเลอนขนลง (Scrolling) แตถาจำาเปนตองม ควรจะใหขอมลทม ความสำาคญอยบรเวณดานบนสดของหนาจอ หลกเลยงการใชกราฟกดานบนของหนาจอ เพราะถงแมจะดสวยงาม แตจะทำาใหผใชเสยเวลาในการไดรบขอมลทตองการ แตหากตองมการใชภาพประกอบกควรใชเฉพาะทมความสมพนธ
![Page 4: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/4.jpg)
กบเนอหาเทานน นอกจากนการใชรปภาพเพอเปนพนหลง (Background) ไมควรเนนสสนทฉดฉาดมากนก เพราะอาจจะไปลดความเดนชดของเนอหาลง ควรใชภาพทมสออน ๆ ไมสวางจนเกนไปรวมไปถงการใชเทคนคตาง ๆ เชน ภาพเคลอนไหว หรอตวอกษรวง (Marquees) ซงอาจจะเกดการรบกวนการอานได ควรใชเฉพาะทจำาเปนจรง ๆ เทานนตวอกษรทนำามาแสดงบนจอภาพควรเลอกขนาดทอานงาย ไมมสสนและลวดลายมากเกนไป5. ความรวดเรว ความรวดเรวเปนสงสำาคญประการหนงทสงผลตอการเรยนร ผใชจะเกดอาการเบอหนายและหมดความสนใจกบเวบทใชเวลาในการแสดงผลนาน สาเหตสำาคญทจะทำาใหการแสดงผลนานคอการใชภาพกราฟกหรอภาพเคลอนไหว ซงแมวาจะชวยดงดดความสนใจไดด ฉะนนในการออกแบบจงควรหลกเลยงการใชภาพขนาดใหญ หรอภาพเคลอนไหวทไมจำาเปน และพยายามใชกราฟกแทนตวอกษรธรรมดาใหนอยทสด โดยไมควรใชมากเกนกวา 2 – 3 บรรทดในแตละหนาจอ
♦ โครงสรางของเวบไซต ♦1. เวบทมโครงสรางแบบเรยงลำาดบ (Sequential Structure)เปนโครงสรางแบบธรรมดาทใชกนมากทสดเนองจากงายตอการจดระบบขอมล ขอมลทนยม จดดวยโครงสรางแบบนมกเปนขอมลทมลกษณะเปนเรองราวตามลำาดบของเวลา เชน การเรยงลำาดบตามตวอกษร ดรรชน สารานกรม หรออภธานศพท โครงสรางแบบน เหมาะกบเวบไซตทมขนาดเลก เนอหาไมซบซอนใชการลงก (Link) ไปทละหนา ทศทางของการเขาสเนอหา (Navigation) ภายในเวบจะเปนการดำาเนนเรองในลกษณะเสนตรง โดยม ปมเดนหนา-ถอยหลงเปนเครองมอหลกในการกำาหนดทศทาง ขอเสยของโครงสรางระบบนคอ ผใชไมสามารถกำาหนดทศทางการเขาสเนอหาของตนเองได ทำาใหเสยเวลาเขาสเนอ
2. เวบทมโครงสรางแบบลำาดบขน (Hierarchical Structure)
![Page 5: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/5.jpg)
เปนวธทดทสดวธหนงในการจดระบบโครงสรางทมความซบซอนของขอมล โดยแบงเนอหา ออกเปนสวนตางๆ และมรายละเอยดยอยๆ ในแตละสวนลดหลนกนมาในลกษณะแนวคดเดยวกบ แผนภมองคกร จงเปนการงายตอการทำาความเขาใจกบโครงสรางของเนอหาในเวบลกษณะน ลกษณะเดนเฉพาะของ เวบประเภทนคอการมจดเรมตนทจดรวมจดเดยว นนคอ โฮมเพจ (Homepage) และเชอมโยงไปสเนอหา ในลกษณะเปนลำาดบจากบนลงลาง
3. เวบทมโครงสรางแบบตาราง (Grid Structure)โครงสรางรปแบบนมความซบซอนมากกวารปแบบทผานมา การออกแบบเพมความยดหยน ใหแกการเขาสเนอหาของผใช โดยเพมการเชอมโยงซงกนและกนระหวางเนอหาแตละสวน เหมาะแก การแสดงใหเหนความสมพนธกนของเนอหา การเขาสเนอหาของผใชจะไมเปนลกษณะเชงเสนตรง เนองจากผใชสามารถเปลยนทศทางการเขาสเนอหาของตนเองได
ในการจดระบบโครงสรางแบบน เนอหาทนำามาใชแตละสวนควรมลกษณะทเหมอนกน และ สามารถใชรปแบบรวมกน หลกการออกแบบคอนำาหวขอทงหมดมาบรรจลงในทเดยวกนซงโดยทวไป จะเปนหนาแผนภาพ (Map Page) ทแสดงในลกษณะเดยวกบโครงสรางของเวบ เมอผใชคลกเลอก หวขอใด กจะเขาไปสหนาเนอหา (Topic
![Page 6: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/6.jpg)
Page) ทแสดงรายละเอยดของหวขอนนๆ และภายในหนานน กจะมการเชอมโยงไปยงหนารายละเอยดของหวขออนทเปนเรองเดยวกน นอกจากนยงสามารถนำา โครงสรางแบบเรยงลำาดบและแบบลำาดบขนมาใชรวมกนไดอกดวย ถงแมโครงสรางแบบน อาจจะสรางความยงยากในการเขาใจได และอาจเกดปญหาการคงคาง ของหวขอ (Cognitive Overhead) ได แตจะเปนประโยชนทสดเมอผใชไดเขาใจถงความสมพนธ ระหวางเนอหา ในสวนของการออกแบบจำาเปนจะตองมการวางแผนทด เนองจากมการเชอมโยงทเกดขน ไดหลายทศทาง นอกจากนการปรบปรงแกไขอาจเกดความยงยากเมอตองเพมเนอหาในภายหลง4. เวบทมโครงสรางแบบใยแมงมม (Web Structure)โครงสรางประเภทนจะมความยดหยนมากทสด ทกหนาในเวบสามารถจะเชอมโยงไปถงกน ไดหมด เปนการสรางรปแบบการเขาสเนอหาทเปนอสระ ผใชสามารถกำาหนดวธการเขาสเนอหาไดดวย ตนเอง การเชอมโยงเนอหาแตละหนาอาศยการโยงใยขอความทมมโนทศน (Concept) เหมอนกน ของแตละหนาในลกษณะของไฮเปอรเทกซหรอไฮเปอรมเดย โครงสรางลกษณะนจดเปนรปแบบท ไมมโครงสรางทแนนนอนตายตว (Unstructured) นอกจากนการเชอมโยงไมไดจำากดเฉพาะเนอหา ภายในเวบนนๆ แตสามารถเชอมโยงออกไปสเนอหาจากเวบภายนอกได
ลกษณะการเชอมโยงในเวบนน นอกเหนอจากการใชไฮเปอรเทกซหรอไฮเปอรมเดย กบขอความทมมโนทศน (Concept) เหมอนกนของแตละหนาแลว ยงสามารถใชลกษณะการเชอมโยง จากรายการทรวบรวมชอหรอหวขอของเนอหาแตละหนาไว ซงรายการนจะปรากฏอยบรเวณใด บรเวณหนงในหนาจอ ผใชสามารถคลกทหวขอใดหวขอหนงในรายการเพอเลอกท
![Page 7: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/7.jpg)
จะเขาไปสหนาใดๆ กไดตามความตองการ ขอดของรปแบบนคองายตอผใชในการทองเทยวบนเวบ โดยผใชสามารถกำาหนดทศทาง การเขาสเนอหาไดดวยตนเอง แตขอเสยคอถามการเพมเนอหาใหมๆ อยเสมอจะเปนการยากในการ ปรบปรง นอกจากนการเชอมโยงระหวางขอมลทมมากมายนนอาจทำาใหผใชเกดการสบสนและ เกดปญหาการคงคางของหวขอ (Cognitive Overhead) ไดขอมลจาก http://www.cybered.co.th/warnuts/wbi/index3.htm
♦องคประกอบของการออกแบบเวบไซต ♦1. ความเรยบงาย (Simplicity)หมายถง การจำากดองคประกอบเสรมใหเหลอเฉพาะองคประกอบหลก กลาวคอในการสอสารเนอหากบผใชนน เราตองเลอกเสนอสงทเราตองการนำาเสนอจรง ๆ ออกมาในสวนของกราฟก สสน ตวอกษรและภาพเคลอนไหว ตองเลอกใหพอเหมาะ ถาหากมมากเกนไปจะรบกวนสายตาและสรางความคำาราญตอผใชตวอยางเวบไซตทไดรบการออกแบบทด ไดแก เวบไซตของบรษทใหญ ๆ อยางเชน Apple Adobe Microsoft หรอ Kokia ทมการออกแบบเวบไซตในรปแบบทเรยบงาย ไมซบซอน และใชงานอยางสะดวก2. ความสมำาเสมอ ( Consistency)หมายถง การสรางความสมำาเสมอใหเกดขนตลอดทงเวบไซต โดยอาจเลอกใชรปแบบเดยวกนตลอดทงเวบไซตกได เพราะถาหากวาแตละหนาในเวบไซตนนมความแตกตางกนมากจนเกนไป อาจทำาใหผใชเกดความสบสนและไมแนใจวากำาลงอยในเวบไซตเดมหรอไม เพราะฉะนนการออกแบบเวบไซตในแตละหนาควรทจะมรปแบบ สไตลของกราฟก ระบบเนวเกชน (Navigation) และโทนสทมความคลายคลงกนตลอดทงเวบไซต3. ความเปนเอกลกษณ (Identity)ในการออกแบบเวบไซตตองคำานงถงลกษณะขององคกรเปนหลก เนองจากเวบไซตจะสะทอนถงเอกลกษณและลกษณะขององคกร การเลอกใชตวอกษร ชดส รปภาพหรอกราฟก จะมผลตอรปแบบของเวบไซตเปน
![Page 8: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/8.jpg)
อยางมาก ตวอยางเชน ถาเราตองออกแบบเวบไซตของธนาคารแตเรากลบเลอกสสนและกราฟกมากมาย อาจทำาใหผใชคดวาเปนเวบไซตของสวนสนกซงสงผลตอความเชอถอขององคกรได4. เนอหา (Useful Content)ถอเปนสงสำาคญทสดในเวบไซต เนอหาในเวบไซตตองสมบรณและไดรบการปรบปรงพฒนาใหทนสมยอยเสมอ ผพฒนาตองเตรยมขอมลและเนอหาทผใชตองการใหถกตองและสมบรณ เนอหาทสำาคญทสดคอเนอหาททมผพฒนาสรางสรรคขนมาเอง และไมไปซำากบเวบอน เพราะจะถอเปนสงทดงดดผใชใหเขามาเวบไซตไดเสมอ แตถาเปนเวบทลงคขอมลจากเวบอน ๆ มาเมอใดกตามทผใชทราบวา ขอมลนนมาจากเวบใด ผใชกไมจำาเปนตองกลบมาใชงานลงคเหลานนอก5. ระบบเนวเกชน (User-Friendly Navigation)เปนสวนประกอบทมความสำาคญตอเวบไซตมาก เพราะจะชวยไมใหผใชเกดความสบสนระหวางดเวบไซต ระบบเนวเกชนจงเปรยบเสมอนปายบอกทาง ดงนนการออกแบบเนวเกชน จงควรใหเขาใจงาย ใชงานไดสะดวก ถามการใชกราฟกกควรสอความหมาย ตำาแหนงของการวางเนวเกชนกควรวางใหสมำาเสมอ เชน อยตำาแหนงบนสดของทกหนาเปนตน ซงถาจะใหดเมอมเนวเกชนทเปนกราฟกกควรเพมระบบเนวเกชนทเปนตวอกษรไวสวนลางดวย เพอชวยอำานวยความสะดวกใหกบผใชทยกเลกการแสดงผลภาพกราฟกบนเวบเบราเซอร6. คณภาพของสงทปรากฏใหเหนในเวบไซต (Visual Appeal)ลกษณะทนาสนใจของเวบไซตนน ขนอยกบความชอบสวนบคคลเปนสำาคญ แตโดยรวมแลวกสามารถสรปไดวาเวบไซตทนาสนใจนนสวนประกอบตาง ๆ ควรมคณภาพ เชน กราฟกควรสมบรณไมมรอยหรอขอบขนบนไดใหเหน ชนดตวอกษรอานงายสบายตา มการเลอกใชโทนสทเขากนอยางสวยงาม เปนตน7. ความสะดวกของการใชในสภาพตาง ๆ (Compatibility)
![Page 9: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/9.jpg)
การใชงานของเวบไซตนนไมควรมขอบจำากด กลาวคอ ตองสามารถใชงานไดดในสภาพแวดลอมทหลากหลาย ไมมการบงคบใหผใชตองตดตงโปรแกรมอนใดเพมเตม นอกเหนอจากเวบบราวเซอร ควรเปนเวบทแสดงผลไดดในทกระบบปฏบตการ สามารถแสดงผลไดในทกความละเอยดหนาจอ ซงหากเปนเวบไซตทมผใชบรการมากและกลมเปาหมายหลากหลายควรใหความสำาคญกบเรองนใหมาก8. ความคงทในการออกแบบ (Design Stability)ถาตองการใหผใชงานรสกวาเวบไซตมคณภาพ ถกตอง และเชอถอได ควรใหความสำาคญกบการออกแบบเวบไซตเปนอยางมาก ตองออกแบบวางแผนและเรยบเรยงเนอหาอยางรอบคอบ ถาเวบทจดทำาขนอยางลวก ๆ ไมมมาตรฐานการออกแบบและระบบการจดการขอมล ถามปญหามากขนอาจสงผลใหเกดปญหาและทำาใหผใชหมดความเชอถอ9. ความคงทของการทำางาน (Function Stability)ระบบการทำางานตาง ๆ ในเวบไซตควรมความถกตองแนนอน ซงตองไดรบการออกแบบสรางสรรคและตรวจสอบอยเสมอ ตวอยางเชน ลงคตาง ๆ ในเวบไซต ตองตรวจสอบวายงสามารถลงคขอมลไดถกตองหรอไม เพราะเวบไซตอนอาจมการเปลยนแปลงไดตลอดเวลา ปญหาทเกดจากลงค กคอ ลงคขาด ซงพบไดบอยเปนปญหาทสรางความรำาคาญกบผใชเปนอยางมาก
♦ ขนตอนการสรางเวบไซต ♦ขนตอนท 1 การวางแผนการจดทำาเวบไซตเปนขนตอนแรกของการออกแบบเวบ เนองจากเราตองกำาหนดชอเรอง เนอหา และรายละเอยดของเวบทเราจะจดทำาเพอใหเหนมมมองคราว ๆ กอนจะลงมอสรางเวบไซต นอกจากนเรายงตองทำาการแบงเนอหาเปนหมวดหมตาง ๆ ตามลำาดบกอน-หลง เพอใหงายตอการจดทำาโครงรางของเวบขนตอนท 2 การกำาหนดโครงสรางของเวบ เปนขนตอนในการกำาหนดผงของเวบ เพอใหทราบองคประกอบทงหมดของเวบ ตวอยางดงรป
![Page 10: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/10.jpg)
ขอสงเกต1. หนาแรกของเวบ หรอโฮมเพจ จะตองชอ index สวนนามสกลใหใส
ตามลกษณะของภาษาทใชในการสรางเวบ2. การตงชอเวบเพจแตละหนาเวลาใหกำาหนดชอเปนภาษาองกฤษตาม
ดวยนามสกลของภาษาทเราสรางเวบ เชน index.html, home.html, history.html เปนตน
ขนตอนท 3 การกำาหนดการเชอมโยงเวบเพจการกำาหนดการเชอมเวบเพจ เปนการกำาหนดความสมพนธของการเชอมโยงในแตละหนาเวบเพอใหสามารถกลบไปกลบมาระหวางหนาตาง ๆ ได โดยแตละไฟลจะมความสมพนธกน ตวอยางดงรป
ขนตอนท 4 การตงชอไฟลและโฟลเดอร1. การสรางโฟลเดอรการสรางโฟลเดอรใหสรางเปนชอหนวยงาน / เรองนน ๆ ควรใชตวอกษร ภาษาองกฤษตวพมพเลก หรอผสมกบตวเลข 0-9 เชน swt คอ โรงเรยนเสรมงามวทยาคม จากนนขางในโฟลเดอร swt ใหเราสราง
![Page 11: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/11.jpg)
โฟลเดอรเกบรปภาพ พนหลง ไฟลเสยง ไฟลวดโอ หรอโฟลเดอรอนเปนชอภาษาองกฤษ เชน pic คอโฟลเดอรเกบรปภาพ, bg คอ โฟลเดอรเกบพนหลง เปนตน
2. การตงชอไฟลการตงชอไฟลใหตงชอและนามสกลไฟลเปนตวอกษร ภาษาองกฤษตวพมพเลก หรอผสมกบตวเลข 0-9 หรอเครองมอขดลบ/ขดลาง และตงชอไฟลใหตรงกบเรองนน ๆ เชน history.html คอ ประวตของโรงเรยน, person.html คอ บคลากรของโรงเรยน เปนตน
ขนตอนท 5 การออกแบบเวบเพจแตละหนาในเวบไซต
สวนประกอบของเวบไซตทดโครงสรางของเวบไซตโดยจะมสวนหลกๆอยดวยกนทงหมด 3 สวนหลก ๆ ดงน1. สวนหวของหนา (Page Header)
![Page 12: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/12.jpg)
เปนสวนทอยตอนบนสดของหนา และเปนสวนทสำาคญทสดของหนา เพราะเปนสวนทดงดดผชมใหตดตามเนอหาภายในเวบไซต มกใสภาพกราฟกเพอสรางความประทบใจ สวนใหญประกอบดวย
โลโก (Logo) เปนสงทเวบไซตควรม เปนตวแทนของเวบไซตไดเปนอยางด และยงทำาใหเวบนาเชอถอ
ชอเวบไซต เมนหลกหรอลงค (Navigation Bar) เปนจดเชอมโยงไปสเนอหา
ของเวบไซต2. สวนของเนอหา (Page Body)เปนสวนทอยตอนกลางของหนา ใชแสดงขอมลเนอหาของเวบไซต ซงประกอบดวยขอความ, ตารางขอมล ภาพกราฟก วดโอ และอนๆ และอาจมเมนหลก หรอเมนเฉพาะกลมวางอยในสวนนดวยสำาหรบสวนเนอหาควรแสดงใจความสำาคญทเปนหวเรองไวบนสด ขอมลมความกระชบ ใชรปแบบตวอกษรทอานงาย และจด Layout ใหเหมาะสมและเปนระเบยบ3. สวนทายของหนา (Page Footer)เปนสวนทอยดานลางสดของหนา มกวางระบบนำาทางทเปนลงคขอความงาย ๆ และอาจแสดงขอมลเพมเตมเกยวกบเนอหาภายในเวบไซต เชน เจาของเวบไซต, ขอความแสดงลขสทธ, วธการตดตอกบผดแลเวบไซต, คำาแนะนำาการใชเวบไซต เปนตน โดยปกตสวนหวและสวนทายมกแสดงเหมอนกนในทกหนาของเวบเพจ
![Page 14: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/14.jpg)
ขนตอนท 6 การสรางเวบเพจเมอจดวางองคประกอบของเวบแตละหนาแลว ตอไปคอขนตอนการเขยนเวบดวยโปรแกรมภาษา HTML เพอกำาหนดใหแตละหนาเวบเพจนำาเสนอขอความ รปภาพ วดโอ และเสยง ใหอยในรปแบบการทตองการ
![Page 15: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/15.jpg)
ขนตอนท 7 การลงทะเบยนขอพนทเวบไซตเมอทำาการออกแบบและสรางเวบไซตเสรจแลว ขนตอนตอไป คอ การเผยแพรเวบไซตสโลกของอนเทอรเนตใหคนอนเขามาเยยมชม วธการ คอ การนำาเวบไซตไปฝากกบผใหบรการพนทเวบไซตทงแบบเสยคาใชจายหรอบรการ และแบบพนทเวบไซตฟร ซงวนนเราจะขอแนะนำาเวบไซตทใหบรการฟรพนทฝากเวบ คอ http://www.thcity.com
ขนตอนท 8 การอพโหลดเวบไซต เมอเราทำาการสมครบรการพนทฝากเวบแลว ขนตอนตอไป คอการอพโหลดไฟลเวบไซตของเราไปยงเวบไซตทใหบรการพนทฝากเวบซง
![Page 16: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/16.jpg)
อาจจะทำาการอพโหลดผานเวบบราวเซอรเวบทใหบรการ หรอการอพโหลดดวยโปรแกรม เชน CuteFTP, Filezilla, WS_FTP เปนตน เพอใหผคนไดเขาเยยมชมโดยสามารถดในเวบไซตของเราผานเครอขายอนเทอรเนต
ขนตอนท 9 การเรยกดเวบไซตเมอเราทำาการอพโหลดไฟลเวบไซตของเราขนบนเวบไซตทใหบรการพนทฝากเวบแลว เราสามารถเปดดเวบไซตของเราผานโปรแกรมเวบบราวเซอร เชน Internet Explorer, Mozilla Firefox, Google Chrome เปนตน โดยการพมพทอยเวบไซตตรง Address Bar เชน http://www/.swt.ac.th เปนตน
![Page 17: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้](https://reader035.vdocuments.mx/reader035/viewer/2022070617/5dd122ced6be591ccb6464f2/html5/thumbnails/17.jpg)
ตวอยางเวบไซต สำานกงานเขตพนทการศกษามธยมศกษาเขต 32
ขอบคณแหลงทมาของขอมล http://krupiyadanai.wordpress.com