Transcript
Page 1: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

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

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

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

Page 2: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

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

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

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

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

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

Page 3: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

Page 4: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

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

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

Page 5: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

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

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

Page 6: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

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

Page 7: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

จะเขาไปสหนาใดๆ กไดตามความตองการ ขอดของรปแบบนคองายตอผใชในการทองเทยวบนเวบ โดยผใชสามารถกำาหนดทศทาง การเขาสเนอหาไดดวยตนเอง แตขอเสยคอถามการเพมเนอหาใหมๆ อยเสมอจะเปนการยากในการ ปรบปรง นอกจากนการเชอมโยงระหวางขอมลทมมากมายนนอาจทำาใหผใชเกดการสบสนและ เกดปญหาการคงคางของหวขอ (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หลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

Page 9: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

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

Page 10: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

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

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

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

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

Page 11: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

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

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

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

Page 12: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

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

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

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

Page 13: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

Page 14: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

Page 15: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

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

Page 16: ictkrupikul.files.wordpress.com€¦ · Web viewหลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

อาจจะทำาการอพโหลดผานเวบบราวเซอรเวบทใหบรการ หรอการอพโหลดดวยโปรแกรม เชน 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หลักในการออกแบบโครงสร้างเว็บไซต์ ควรพิจารณาดังนี้

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

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


Top Related