บทที่ 2 หลักการออกแบบเว็บไซต 2.1 บทนํา
หลักการออกแบบเว็บไซตนั้น เริ่มตนตั้งแตการกําหนดเปาหมายของเว็บไซต กลุมผูใช การ ออกแบบหนา เว็ บ การใช กราฟ ก สี รูปแบบตัว อักษร การสรางปุมควบคุมเสน ทาง (Navigation) ระบบฐานขอมูล นอกจากนี้ยังตองคํานึงถึงการแสดงผลเว็บไซต โดยตองออกแบบใหรองรับกับชนิด และรุนของบราวเซอร ขนาดหนาจอมอนิเตอร ความละเอียด รวมไปถึงปลั๊กอินชนิดตางๆ ที่ผูใชมีอยู การออกแบบเว็ บ ไซต ที่ ดี อาจไม จํ า เป น ต อ งสวยงาม มี ก ราฟ ก มากมาย หรื อ มี ลู ก เล น หลากหลาย จึงเป น เรื่ องยากที่ จ ะกําหนดวาหลักการออกแบบเว็บ ไซตที่ดีนั้น เปน อยางไร เพราะ แนวทางการออกแบบของเว็บไซตหนึ่ง อาจไมเหมาะกับอีกเว็บไซตหนึ่งก็ได เนื่องจากเว็บไซตแตละ ประเภทมีเปาหมายและลักษณะที่แตกตางกัน เชน เว็บไซตที่เปน Search Engine จะทําหนาที่เปน ประตูไปสูเว็บไซตอื่นๆ มีเปาหมายที่จะใหขอมูลตามที่ผูใชตองการไดอยางรวดเร็ว ดังนั้นตองเปน เว็บไซตที่แสดงหนาเว็บไดอยางรวดเร็ว มีระบบสืบคนที่มีประสิทธิภาพ ในขณะที่เว็บไซตเพื่อความ บันเทิง สนุกสนาน ผูใชจะคาดหวังวาตองไดพบความตื่นเตน สนุกสนาน กอใหเกิดอารมณสุนทรี ดังนั้นสรุปไดวาหลักการออกแบบเว็บไซตที่ดี เปนการออกแบบใหเหมาะสมกับเปาหมายของ เว็บไซต ลักษณะของเว็บไซต และตองคํานึงถึงความสะดวกในการใชงานของกลุมผูใชเปนหลัก
2.2 หลักการออกแบบโครงสรางเว็บไซต
หลักในการออกแบบโครงสรางของเว็บไซต มีสิ่งที่ควรพิจารณา ดังนี้ 2.2.1 กําหนดวัตถุประสงค โดยกําหนดจากเปาหมายในการสรางเว็บไซตนั้นๆ วาสรางขึ้นมา เพื่อใชทําอะไร 2.2.2 กําหนดกลุมผูใชงานเว็บไซต วาผูใชตองมีคุณลักษณะแบบใด ผูใชตองการขอมูลอะไร 2.2.3 จั ดรูปแบบโครงสร างของข อมูล โดยจัดหมวดหมูเนื้อหาที่สัมพัน ธกัน รวมทั้งมีการ แสดงแผนที่โครงสรางใหผูใชเห็น เพื่อปองกันการสับสนในการใชงาน 2.2.4 กําหนดรายละเอียดใหกับโครงสราง โดยพิจารณาจากวัตถุประสงคที่ตั้งไว พรอมทั้งตั้ง เกณฑในการใชงาน เชน ในสวนนี้ผูใชควรทําอะไรไดบาง มีจํานวนหนาเว็บเทาใด มีการเชื่อมโยงไปที่ ไหน มากนอยเพียงใด
12 2.2.5 ดําเนินการสรางเว็บไซตตามที่กําหนดไวในขอที่ 2.1-2.4 แลวนําไปทดลอง เพื่อหา ขอบกพรอง และทําการแกไขปรับปรุง จากนั้นนําเขาสูเครือขายอินเทอรเน็ต
เปาหมาย การโปรโมท เว็บไซต
กลุมผูใช
เครือขาย อินเทอรเน็ ต
รูปแบบ โครงสราง การสราง เว็บไซต
เงินทุน
เนื้อหา
ระยะเวลา ผูดูแล เว็บไซต
ออกแบบ หนาเว็บ เพจ
รูปที่ 2.1 แสดงปจจัยสําคัญในการสรางเว็บไซต จากรูปที่ 2.1 ในการสรางเว็บไซตนั้น ปจจัยที่ตองนํามาพิจารณากอนที่จะเริ่มลงมือพัฒนา เว็ บ เพจนั้น เริ่มจากการกํ า หนดเปาหมาย วาสรางเว็ บ นี้ขึ้น มาเพื่อใชทําอะไร พรอมกําหนดกลุม ผูใชงาน ตอมาจึงพิจารณารูปแบบโครงสราง เนื้อหาและการใชงานที่จําเปน แลวนํามาจัดกลุมใหเปน ระบบ จากนั้นออกแบบโครงสรางขอมูลในหนาเว็บ ออกแบบกราฟก และสวนติดตอผูใชงาน รวมทั้ง การสรางปุมควบคุมเสนทาง และอินเตอรเฟสของเว็บ สิ่ ง ต า งๆ เหล า นี้ ที่ ก ล า วมาข า งต น จะถู ก สร า ง พั ฒ นา และดู แ ลโดยผู ดู แ ลเว็ บ ไซต (Administrator) ซึ่งจะตองบริหารไปพรอมกับระยะเวลาที่กําหนด และเงินทุนที่มี หลั งจากนั้ น ต องดํ า เนิ น การนํา เว็บ เพจที่ส รางขึ้น สูโ ลกอิน เทอรเน็ต ผานระบบเครือขา ย อินเทอรเน็ต โดยนําไปฝากไวบนเว็บเซิรฟเวอร เพื่อเผยแพรสูสาธารณะชน พรอมกับการโปรโมท เว็บไซตใหเปนที่รูจัก
2.3 องคประกอบที่ดีของการออกแบบเว็บไซต
2.3.1 มีโครงสรางที่ชัดเจน ผูออกแบบควรจัดโครงสรางที่แยกเนื้อหาที่สัมพันธกัน ออกเปน หมวดหมู และมีมาตรฐานเดียวกัน 2.3.2 มีการใชงานที่งาย ผูออกแบบควรกําหนดปุมการใชงานที่ชัดเจน เหมาะสม เชน ปุม เดินหนา ถอยหลัง ในกรณีที่เว็บไซตนั้นมีเว็บเพจเปนจํานวนมาก ควรจัดทําแผนผังของเว็บไซต (Site Map) เพื่อชวยใหผูใชงานทราบวา ณ ขณะนี้อยูที่จุดใด และควรมีเครื่องมือสืบคนที่ชวยในการคนหา ขอมูลที่ตองการ 2.3.3 มีความสม่ําเสมอ หมายถึง การใชรูปแบบเดียวกันตลอดทั้งเว็บไซต ทั้งรูปแบบของหนา รูปแบบของกราฟก โทนสี และปุมควบคุมเสนทาง ถาลักษณะของแตละเพจแตกตางกัน จะทําใหผูใช เกิดความไมแนใจวาตนเองกําลังใชงานเว็บไซตเดิมหรือไม 2.3.4 ความเหมาะสมในแตล ะเพจ เนื้อหาที่นําเสนอในแตล ะเพจควรสั้น ไดใจความ มี ความถูกตอง ในกรณีใชหนาจอที่มีลักษณะการเลื่อนขึ้นลง (Scrolling) ควรจะใหขอมูลที่สําคัญอยู บริเวณดานบนสุดของหนา หลีกเลี่ยงการใชกราฟกดานบนของเพจ เพราะสงผลใหผูใชเสียเวลาในการ รับขอมูลที่ตองการ ภาพที่ใชประกอบตองมีความสัมพันธกับเนื้อหา พื้นหลัง (Background) ไมควร เนนสีฉูดฉาด ไมควรใชภาพเคลื่อนไหว ตัวอักษรวิ่ง (Marquees) เนื่องจากไปรบกวนการอานได 2.3.5 การเชื่ อ มโยงที่ ดี ลักษณะของไฮเปอรเท็ กซที่ใชใ นการเชื่อมโยง ควรเป น รูป แบบ มาตรฐาน คําที่ใชตองเขาใจงาย ไมสั้นจนเกินไป ตองระมัดระวังตําแหนงการเชื่อมโยง และในแตละ เพจควรมีการเชื่อมโยงกลับไปยังหนาแรกของเว็บไซต (Homepage) นอกจากนี้ตองระวังอยาใหมี หนาเพจที่ไมมีการเชื่อมโยง (Orphan Page) เพราะสงผลใหผูใชไมทราบวาจะทําอยางไรตอไป 2.3.6 ความรวดเร็ว เปนสิ่งสําคัญสิ่งหนึ่งตอการใชงานเว็บไซตนั้นๆ หากเว็บใชเวลาในการ แสดงผลนาน ทําใหผูใชเกิดอาการเบื่อหนาย หมดความสนใจในการใชงาน 2.3.7 การใช ง านอย า งไม จํา กัด ต องออกแบบเว็ บ ไซต ที่ไ ม มี การบั งคั บ ให ผู ใช ต อ งติ ด ตั้ ง โปรแกรมใดๆ เพิ่ ม เติ ม อี ก ไม จํ า กั ด บราวเซอร ที่ ใ ช ใ นการแสดงผล สามารถใช ง านได ใ นทุ ก ระบบปฏิบัติการและทุกความละเอียดของหนาจอ
2.4 โครงสรางของเว็บไซต
2.4.1 โครงสรางเว็บไซตแบบเรียงลําดับ (Sequential Structure) เปนโครงสรางแบบธรรมดาที่ใชกันมากที่สุด การจัดขอมูลเปนแบบเรียงลําดับจากหนา แรก ไปหนาสุดทาย โครงสรางแบบนี้เหมาะกับเว็บไซตที่มีเนื้อหาไมมาก ไมซับซอน จึงทําใหงายตอ การสรางและการปรับปรุงสําหรับผูดูแลเว็บไซต ทิ ศทางในการเข า สู เนื้อหามีลักษณะเปน เสน ตรง ใชปุ มเดิน หน า ปุมถอยหลังเป น เครื่องมือหลักในการกําหนดทิศทาง จึงทําใหผูใชไมสามารถกําหนดทิศทางการเขาสูเนื้อหาของตนเอง ได กอใหเกิดการเสียเวลาเขาสูเว็บเพจที่ตองการ โครงสรางเว็บไซตแบบเรียงลําดับมีรายละเอียด ดัง รูปที่ 2.2
............................................ ............................................ ............................................ ............................................ .......................................
............................................ ............................................ ............................................ ............................................ .......................................
............................................ ............................................ ............................................ ............................................ .......................................
............................................ ............................................ ............................................ ............................................ .......................................
รูปที่ 2.2 แสดงโครงสรางเว็บไซตแบบเรียงลําดับ ในกรณีที่เนื้อหามีความซับซอน แลวตองการเพิ่มเติมเนื้อหายอยเขาไปในแตละสวน สามารถเพิ่มเติมได ดังรูปที่ 2.3
................................. ................................. ................................. ................................. ................................. ................................. .................
................................. ................................. ................................. ................................. ................................. ................................. .................
................................. ................................. ................................. ................................. ................................. ................................. .................
................................. ................................. ................................. ................................. ................................. ................................. .................
................................. ................................. ................................. ................................. ................................. ................................. .................
................................. ................................. ................................. ................................. ................................. ................................. .................
................................. ................................. ................................. ................................. ................................. ................................. .................
................................. ................................. ................................. ................................. ................................. ................................. .................
รูปที่ 2.3 แสดงโครงสรางเว็บไซตแบบเรียงลําดับ กรณีเพิ่มเติมเนื้อหายอย
................................. ................................. ................................. ................................. ................................. ................................. .................
2.4.2 โครงสรางเว็บไซตแบบลําดับชั้น (Hierarchical Structure) เปนโครงสรางที่มีการแบงเนื้อหาเปนหมวดหมูอยางชัดเจน และมีรายละเอียดยอยแตก ในลักษณะลดหลั่นกันลงมาแบบเดียวกับแผนภูมิองคกร (Organization Chart) ซึ่งเปนวิธีที่ดีวิธีหนึ่ง ในการจัดระบบโครงสรางกรณีที่ขอมูลมีความซับซอน ขอดีของโครงสรางแบบนี้คือ มีจุดเริ่มตนที่จุดเดียวกัน คืออยูท่ีหนาแรกของเว็บไซต (Homepage) และมีการเชื่อมโยงไปสูเนื้อหาแบบเปนลําดับจากบนลงลาง สามารถนําโครงสรางแบบ เรียงลําดับมาใชรวมได เปนโครงสรางที่งายตอการจัดระบบขอมูลของผูสราง งายตอการดูแลและปรับปรุง นอกเหนือจากนี้งายตอการแยกแยะเนื้อหาสําหรับกลุมผูใชงาน รายละเอียดดังรูปที่ 2.4
................................................ ................................................ ................................................ ................................................ ............................................
................................................ ................................................ ................................................ ................................................ ............................................
................................................ ................................................ ................................................ ................................................ ..............................................
................................................ ................................................ ................................................ ................................................ ............................................
................................................ ................................................ ................................................ ................................................ ..............................................
................................................ ................................................ ................................................ ................................................ ...............................................
................................................ ................................................ ................................................ ................................................ ...............................................
................................................ ................................................ ................................................ ................................................ .............................................
................................................ ................................................ ................................................ ................................................ ............................................
รูปที่ 2.4 แสดงโครงสรางเว็บไซตแบบลําดับชั้น การสรางโครงสรางเว็บไซตแบบลําดับชั้นตองระวังอยาใหโครงสรางไมสมดุล คือ มี ลักษณะที่ตื้นเกินไป (Too Shallow) ดังรูปที่ 2.5 หรือลึกเกินไป (Too Deep) ดังรูปที่ 2.6
..................... ..................... ..................... ..................... .....................
..................... ..................... ..................... ..................... .....................
..................... ..................... ..................... ..................... .....................
..................... ..................... ..................... ..................... .....................
..................... ..................... ..................... ..................... .....................
..................... ..................... ..................... ..................... .....................
..................... ..................... ..................... ..................... .....................
..................... ..................... ..................... ..................... .....................
..................... ..................... ..................... ..................... .....................
รูปที่ 2.5 แสดงโครงสรางเว็บไซตแบบลําดับชั้นที่มีลักษณะตื้นเกินไป ............................... ............................... ...............................
............................... ............................... ...............................
............................... ............................... ...............................
............................... ............................... ...............................
............................... ............................... ...............................
............................... ............................... ...............................
............................... ............................... ...............................
............................... ............................... ...............................
............................... ............................... ...............................
............................... ............................... ...............................
............................... ............................... ...............................
............................... ............................... ...............................
............................... ............................... ...............................
............................... ............................... ...............................
รูปที่ 2.6 แสดงโครงสรางเว็บไซตแบบลําดับชั้นที่มีลักษณะลึกเกินไป
............................... ............................... ...............................
2.4.3 โครงสรางเว็บไซตแบบตาราง (Grid Structure) เปนโครงสรางที่มีการออกแบบที่เพิ่มความยืดหยุนในการเขาใชเนื้อหาของกลุมผูใช โดยเพิ่มการเชื่อมโยงระหวางเนื้อหาแตละสวน เพื่อแสดงความสัมพันธของเนื้อหาเหลานั้น ดังนั้นการ เขาสูเนื้อหาตางๆ ผูใชสามารถเปลี่ยนทิศทางการเขาสูเนื้อหาไดตามความตองการของตนเอง และยัง สามารถนําโครงสรางแบบเรียงลําดับ และโครงสรางแบบลําดับชั้นมาใชรวมกันได หลักการสราง คือ นําหัวขอทั้งหมดมาทําเปนแผนภาพ (Map Page) ที่แสดง รายละเอียดโครงสรางของขอมูล เมื่อผูใชคลิกเลือกหัวขอ จะเขาสูหนาเนื้อหา (Topic Page) ซึ่งเปน หน า ที่ แสดงรายละเอี ย ดของหั ว ข อ ที่ไ ดเ ลือ ก และภายในหนา นั้ น ก็ จ ะมีก ารเชื่ อมโยงไปยั งหน า
รายละเอียดของหัวขออื่นๆ ที่เปนเรื่องเดียวกัน ซึ่งเนื้อหาที่นํามาใชแตละสวนควรมีลักษณะเหมือนกัน สามารถใชรูปแบบรวมกันได โครงสรางลักษณะนี้อาจสรางความยุงยากในปรับปรุงแกไข และเกิดปญหาการคงคาง ของหัว ข อ (Cognitive Overhead) ได แต จ ะเกิด ประโยชนไ ดม าก ในกรณี ที่ผูใ ชเ ขาใจถึ ง ความสัมพันธระหวางเนื้อหา ดังรูปที่ 2.7 ................................ ................................ ................................ ................................ ................................ ................................
................................ ................................ ................................ ................................ ................................ ................................
................................ ................................ ................................ ................................ ................................ ................................
................................ ................................ ................................ ................................ ................................ ................................
................................ ................................ ................................ ................................ ................................ ................................
................................ ................................ ................................ ................................ ................................ ................................
................................ ................................ ................................ ................................ ................................ ................................
................................ ................................ ................................ ................................ ................................ ................................
................................ ................................ ................................ ................................ ................................ ................................
................................ ................................ ................................ ................................ ................................ ................................
................................ ................................ ................................ ................................ ................................ ................................
................................ ................................ ................................ ................................ ................................ ................................
................................ ................................ ................................ ................................ ................................ ................................
................................ ................................ ................................ ................................ ................................ ................................
................................ ................................ ................................ ................................ ................................ ................................
รูปที่ 2.7 แสดงโครงสรางเว็บไซตแบบตาราง 2.4.4 โครงสรางเว็บไซตแบบใยแมงมุม (Web Structure) เปนโครงสรางที่มีรูปแบบการเขาสูเนื้อหาที่เปนอิสระตอเนื่องกันไปเรื่อยๆ ทุกหนาเว็บ เพจสามารถเชื่อมโยงไปถึงกันไดหมด มีการเขาสูเนื้อหาที่เปนอิสระ มีความยืดหยุนสูง ผูใชสามารถ กําหนดวิธีการเขาสูเนื้อหาไดดวยตนเอง การเชื่ อ มโยงแต ล ะหน า จะอาศั ย ข อ ความที่ เ ป น ไฮเปอร เ ท็ ก ซ (Hypertext) หรื อ ไฮเปอรมีเดีย (Hypermedia) โดยการเชื่อมโยงเหลานี้ มิไดจํากัดเฉพาะเนื้อหาภายในเว็บไซตเทานั้น แตสามารถเชื่อมโยงออกไปสูเนื้อหาภายนอกเว็บไซตได โครงสรางลักษณะนี้อาจสร างความสับสนใหแกผูใช และเกิดปญหาการคงคางของ หัวขอ (Cognitive Overhead) ไดเชนกัน ดังรูปที่ 2.8
................................................ ................................................ ................................................ ................................................ ..............................................
................................................ ................................................ ................................................ ................................................ ..............................................
................................................ ................................................ ................................................ ................................................ ..............................................
ดังรูปที่ 2.8 แสดงโครงสรางเว็บไซตแบบใยแมงมุม
2.5 ขั้นตอนการสรางเว็บไซต
2.5.1 สํารวจปจจัยสําคัญ ไดแก การกําหนดเปาหมายและสํารวจความพรอมของตนเองใน การสรางเว็บ พรอมทั้งเรียนรูผูใชหรือผูเขาชม คือ สามารถระบุกลุมผูใช และศึกษาความตองการใช งานของกลุมเปาหมายได นอกเหนือจากนี้ในกรณีที่ทําธุรกิจ ตองศึกษาคูแขง เพื่อที่จะไดมากําหนดกล ยุทธในการแขงขันได 2.5.2 การวางโครงสร า งเนื้อ หา เปน ขั้น ตอนที่ต องกําหนดชื่อ เรื่อง ขอบเขตของเนื้ อหา รายละเอียดเนื้อหา และรายละเอียดของเว็บที่จะจัดทํา เพื่อใหเห็นมุมมองคราว ๆ กอนจะลงมือสราง เว็บไซต นอกจากนี้ยังตองทําการแบงเนื้อหาเปนหมวดหมูตางๆ ตามลําดับกอน-หลัง เพื่อใหงายตอ การจัดทําโครงรางของเว็บ 2.5.3 การวางโครงสรางเว็บไซต โดยหนาแรกเปนการอธิบายรายละเอียดขอมูลของเว็บไซต สรุปวาเว็บไซตนี้ทําเกี่ยวกับอะไร หรือใหบริการใดบาง เพื่อใหผูใชหรือผูเขาชมเว็บเขาใจวัตถุประสงค ของเว็บใหไดมากที่สุด ในกรณี ที่เ ป น เว็ บ ไซต ขายสิ น คา ก็ตองมีสว นแสดงเกี่ย วกับ สิ น คา ทั้งรายละเอีย ด รูปภาพ ราคา สวนลด การสั่งซื้อ วิธีการชําระเงิน วิธีการจัดสงสินคา นอกจากนี้อาจมีเว็บบอรด สําหรับติดตอพูดคุยกับลูกคา มีในสวนของคําถาม คําตอบ เพื่ออธิบาย ชี้แจงขอสงสัย คําถามที่มักเจอบอยๆ เพื่อใหความกระจางเกี่ยวกับสินคาและบริการของ เว็บ
สุดทายอาจจะมีในสวนติดตอเรา เปนการแสดงรายละเอียดสถานที่ เบอรโทรติดตอ แผนที่ เพื่อใหผูใชหรือลูกคาสามารถติดตอกับเจาของเว็บไซตได 2.5.4 การออกแบบและพัฒนาเว็บเพจ เปนขั้นตอนในการสรางเว็บเพจตามโครงสราง และ เนื้อหาที่ไดวางไวในขั้นตอนกอนหนานี้ 1) การออกแบบหนาเว็บเพจ ประกอบดวย 1.1) สวนหัวของเว็บเพจ (Page Header) เปนสวนที่อยูตอนบนสุดของหนา และ เปนสวนที่สํ าคัญที่สุดของหนา เพราะเปนส วนที่ดึงดูด ผูชมใหติด ตามเนื้อหาภายในเว็ บไซต มักใส ภาพกราฟกเพื่อสรางความประทับใจ สวนใหญประกอบดวย 1.1.1) โลโก (Logo) เปนสัญลักษณที่เปนตัวแทนของเว็บไซต 1.1.2) ชื่อเว็บไซต 1.1.3) เมนูหลักหรือลิงค (Navigation Bar) เปนจุดเชื่อมโยงไปเนื้อหาของ เว็บไซต 1.2) สวนของเนื้อหา (Page Body) เปนสวนที่อยูตอนกลางของหนา ใชแสดงขอมูล เนื้อหาของเว็บไซต ซึ่งประกอบดวยขอความ ตารางขอมูล ภาพกราฟก วีดีโอ และอื่นๆ และอาจมีเมนู หลักหรือเมนูเฉพาะกลุม วางอยูในสวนนี้ดวย สําหรับสวนเนื้อหาควรแสดงใจความสําคัญที่เปนหัวเรื่องไวบนสุด ขอมูลมีความ กระชับ ใชรูปแบบตัวอักษรที่อานงาย และจัดวางโครงราง (Layout) ใหเหมาะสมและเปนระเบียบ 1.3) สวนทายของเว็บเพจ (Page Footer) เปนสวนที่อยูดานลางสุดของหนา มักวาง ระบบนําทางที่เปนลิงคขอความงาย ๆ และอาจแสดงขอมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต เชน เจาของเว็บไซต ขอความแสดงลิขสิทธิ์ วิธีการติดตอกับผูดูแลเว็บไซต คําแนะนําการใช โดยปกติสวน หัวและสวนทายมักแสดงเหมือนกันในทุกหนาของเว็บเพจ การออกแบบหนาเว็บเพจ ขอ 2.5.4 สามารถอธิบายไดดวยภาพ ดังรูปที่ 2.9 รูปที่ 2.10 และรูปที่ 2.11
โลโก
ประวัติ วิสัยทัศน บุคลากร เกียรติประวัติ ติดตอเรา แผนผังเว็บไซต
สวนหัวดานบน / ชื่อหนวยงาน / ชื่อเว็บ
เนื้อหาที่ตองการแสดง/ แนะนําเว็บไซต
รูปภาพ
ดังรูปที่ 2.9 แสดงตัวอยางการออกแบบหนาแรกของเว็บไซต แบนเบอร โลโก เมนู เนื้อหา สวนทาย
โลโก
แบนเบอร เมนู
เมนู
เนื้อหา
สวนทาย
โลโก
แบนเบอร เมนู
เมนู
เนื้อหา สวนทาย
ลิงค อื่นๆ
ดัง รูปที่
2.10 แสดงตัวอยางการแบงพื้นที่เว็บไซต
รูปที่ 2.11 แสดงตัวอยางเว็บไซต aruneekham.com 2) การเขียนเว็บดวยโปรแกรมภาษา เมื่อจัดวางองคประกอบของเว็บแตละหนาแลว ตอไปคือขั้นตอนการเขียนเว็บดวยโปรแกรมภาษา HTML เพื่อกําหนดใหแตละหนาเว็บเพจนําเสนอ ขอความ รูปภาพ วีดีโอ และเสียง ใหอยูในรูปแบบการที่ตองการ ดังรูปที่ 2.12
รูปที่
2.12 แสดงการสรางเว็บดวยภาษา HTML 2.5.5 การลงทะเบี ย นขอพื้น ที่เว็ บ ไซต เมื่ อทํา การออกแบบและสรางเว็ บ ไซตเ สร็จ แล ว ขั้นตอนตอไป คือ การเผยแพรเว็บไซตสูโลกของอินเทอรเน็ตใหคนอื่นเขามาเยี่ยมชม วิธีการ คือ การ นําเว็บไซตไปฝากกับผูใหบริการพื้นที่เว็บไซตทั้งแบบเสียคาใชจายหรือบริการ และแบบพื้นที่เว็บไซต ฟรี สําหรับเว็บไซตที่ใหบริการฟรีพื้นที่ฝากเว็บ เชน http://www.thcity.com ดังรูปที่ 2.13
รูปที่ เว็บไซต
2.13 แสดง
http://www.thcity.com 2.5.6 การอัพโหลดเว็บไซต เมื่อทําการสมัครบริการพื้นที่ฝากเว็บแลว ขั้นตอนตอไป คือการ อั พ โหลดไฟล เ ว็ บ ไซตไ ปยั งเว็ บ ไซต ที่ใ ห บ ริ ก ารพื้น ที่ ฝ ากเว็ บ ซึ่ งอาจจะทํ าการอั พ โหลดผ านเว็ บ
บราวเซอรเว็บที่ใหบริการ หรือการอัพโหลดดวยโปรแกรม เชน CuteFTP, Filezilla หรือ WS_FTP เพื่อใหผูคนไดเขาเยี่ยมชม โดยสามารถดูเว็บไซตของเราผานเครือขายอินเทอรเน็ตได ดังรูปที่ 2.14
รูปที่ 2.14 แสดงการอัพโหลดดวยโปรแกรม Filezilla 2.5.6 การเรียกดูเว็บไซต เมื่อทําการอัพโหลดไฟลเว็บไซตของเราขึ้นบนเว็บไซตที่ใหบริการ พื้ น ที่ ฝ ากเว็ บ แล ว เราสามารถเป ด ดูเว็บ ไซตของเราผา นโปรแกรมเว็ บ บราวเซอร เชน Internet Explorer, Mozilla Firefox, Google Chrome หรือ Spark โดยการพิมพที่อยูเว็บไซตตรง Address Bar ดังรูปที่ 2.15
รูปที่ 2.15 แสดงการเรียกใชเว็บไซต www.vru.ac.th แหลงอางอิง ปยะดนัย วิเคีย น. (ม.ป.ป.). เรียน IT งายๆ ตามสไตลครูปยะดนัย. [ออนไลน ]. แหลงขอมูล: http://krupiyadanai.wordpress.com/. (วันที่คนขอมูล: 13 พฤษภาคม 2557). P.J. Lynch and S. Horton. (1999). Basic Design Principles For Creating Web Sites. Universities Press (India) Pvt. Limited.