Chapter 2 การออกแบบเว็บไซต์

บทที่ 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.