top of page

หลักการออกแบบเว็บไซต์

    หลักการออกแบบเว็บไซต์ ตั้งแต่การกำหนดขนาดของเว็บไซต์ แนวทางในการออกแบบเว็บไซต์ รวมถึงขั้นตอนในการสร้างเว็บไซต์

  กำหนดขนาดของเว็บเพจ

     ขนาดของจอคอมพิวเตอร์ในปัจจุบันมีหลายขนาด เช่น 14" 15" และ 17" เป็นต้น ซึ่งขนาดที่แตกต่างกันนี้ทำให้การแสดงผลเว็บไซต์แตกต่างกันด้วย เราจึงควรกำหนดขนาดเว็บไซต์ให้มีรูปแบบที่มาตรฐาน เพื่อทำให้การแสดงข้อมูลได้อย่างครบถ้วนชัดเจน โดยขนาดของเว็บไซต์ที่เห็นกันมากที่สุดมีอยู่ 2 ขนาดคือ

   1. ขนาดของเว็บไซต์แบบ 800x600 pixels  

ขนาดเว็ไซต์แบบ 800x600 pixels นี้เป็นขนาดมาตรฐานที่ใช้กับหน้าจอคอมพิวเตอร์ได้ทุกๆ ขนาด

   2. ขนาดเว็บไซต์แบบ 1024x768 pixels

ซึ่งขนาดแบบนี้กำลังได้รับความนิยมเพิ่มมากขึ้น เนื่องจากจอคอมพิวเตอร์ในปัจจุบันมีราคาถูกลงมาก

ดังนั้นผู้ใช้คอมพิวเตอร์จึงหันไปใช้จอคอมพิวเตอร์ที่มีขนาดใหญ่ขึ้นด้วยเหมือนกัน

   3. ขนาดเว็บไซต์แบบยืดหยุ่นขยายตามความกว้างของหน้าจอ

เป็นการออกแบบเว็บไซต์ที่ต้องการให้การแสดงผลยืดหยุ่นเต็มจอตามการตั้งค่าความละเอียดหน้าจอคอมพิวเตอร์

  การออกแบบโครงสร้างเว็บไซต์

   เว็บไซต์ในปัจจุบัน จะมีหลักการออกแบบที่แตกต่างกันไม่มากนัก ซึ่งจะมีวิธีการออกแบบหน้าตาเว็บไซต์อยู่ 3 แบบ คือ

   1. ออกแบบหน้าเว็บไซต์ที่เน้นการนำเสนอเนื้อหามากๆ

เป็นการออกแบบเว็บไซต์ที่มีการนำเสนอเนื้อหามากกว่ารูปภาพ โดยจะใช้โครงสร้างของตารางเป็นหลัก เพื่อใส่ข้อความแบบหน้าสารบัญ และรูปภาพเป็นชิ้นเล็กๆ ได้

   2. ออกแบบหน้าเว็บไซต์ที่เน้นภาพกราฟิกเป็นหลัก

เป็นการออกแบบเว็บไซต์ ที่มีภาพกราฟิกที่สวยงาม ถูกจัดวางไว้ในหน้าโฮมเพจ ซึ่งแตกต่างจากข้อความแรกมาก เพราะจะไม่ค่อยมีข้อความในเว็บเพจ แต่จะเป็นการ Link ที่ภาพเพื่อเข้าไปยังหน้าเว็บเพจอื่นๆ ต่อไป การสร้างเว็บไซต์แบบนี้จะใช้โปรแกรม Photoshop สำหรับตกแต่งภาพก่อนนำไปใช้บนหน้าเว็บ

    3. ออกแบบหน้าเว็บไซต์ที่มีทั้งภาพและเนื้อหา

เป็นการออกแบบหน้าเว็บไซต์ที่ผสมกันระหว่างข้อที่ 1 และ 2 ข้างต้น โดยจะเน้นการจัดวางภาพที่ตัดแบ่งเป็นชิ้นเล็กๆ ก่อน หลังจากนั้นจึงใส่ข้อความประกอบภาพลงไป เพื่อให้เว็บไซต์ของเรามีความสวยงามด้วยภาพกราฟิกที่นำมาประกอบ และใส่เนื้อหาได้อย่างสมบูรณ์ด้วย

  ขั้นตอนการสร้างเว็บไซต์

   เราสามารถนำไฟล์เว็บเพจมาร้อยเรียงและนำเสนอเป็นกลุ่มข้อมูลที่เรียกว่า เว็บไซต์ ซึ่งจะมีวิธีการคิดตั้งแต่กำหนดโครงร่างของเว็บเพจ จนถึงการอัพโหลดเว็บขึ้นบนอินเทอร์เน็ต ทั้งหมด 6 ขั้นตอน ดังนี้

  • ขั้นตอนที่ 1 กำหนดโครงร่างของเว็บไซต์

    ในการสร้างเว็บ เราจะเริ่มต้นด้วยการกำหนดผังของเว็บ หรือเรียกว่า Site Map ก่อน ดังตัวอย่างเรามีหน้าเว็บเพจ 6 หน้า จึงกำหนด Site Map ดังรูป

 

  • ขั้นตอนที่ 2 กำหนดการเชื่อมโยงระหว่างเว็บเพจ

   กำหนดให้เว็บเพจแต่ละหน้าเชื่อมโยงถึงกัน เพื่อให้กลับไปกลับมาระหว่างหน้าต่างๆ ได้ โดยจะแสดงชื่อไฟล์ html แต่ละไฟล์ที่มีการเชื่อมโยงสัมพันธ์กัน ดังรูป

 

  • ขั้นตอนที่ 3 ออกแบบหน้าเว็บเพจแต่ละหน้าภายในเว็บไซต์

    สามารถออกแบบเว็บเพจในแต่ละหน้าให้สวยงาม เพื่อเตรียมภาพที่จำเป็นสำหรับจัดวางบนหน้าเว็บเพจ เช่น การออกบบโลโก้ เพื่อเป็นสัญลักษณ์ให้กับเว็บไซต์ของเราก่อน จากนั้นจึงทำการออกแบบหน้าเว็บเพจในแต่ละหน้าตามลำดับ

 

   • ขั้นตอนที่ 4 สร้างเว็บเพจแต่ละหน้า

     เมื่อวางรูปแบบของเว็บเพจในแต่ละหน้าแล้ว จากนั้นก็ทำการเขียนโปรแกรมภาษา HTML เพื่อกำหนดให้แต่ละเว็บเพจนำเสนอข้อความ ภาพ หรือ วีดิโอ ให้อยู่ในรูปแบบตามที่ต้องการจะนำเสนอนั่นเอง

 

   • ขั้นตอนที่ 5 ลงทะเบียนขอพื้นที่เว็บไซต์ฟรี

    หลังจากออกแบบและสร้างเว็บไซต์จนเสร็จสมบูรณ์แล้ว ขั้นตอนถัดไปก็คือ การเผยแพร่เว็บไซต์นั้นสู่เครือข่ายอินเทอร์เน็ต ให้คนอื่นๆสามารถเข้ามาเยี่ยมชมเว็บไซต์ของเราได้ วิธีการก็คือการนำเว็บไซต์ที่สร้างขึ้นไปไว้บนพื้นที่ที่ให้บริการ (Web Hosting) ซึ่งมีทั้งพื้นที่ที่ต้องจ่ายค่าบริการ และพื้นที่ที่สามารถนำเว็บไวต์ไปฝากได้ฟรี ในหนังสือเล่มนี้ได้ขอพื้นที่เว็บไซต์ฟรี เช่น www.000webhost.com/

 

 

 

 

 

 


               ตัวอย่างเว็บที่ให้บริการพื้นที่เว็บไซต์ฟรี จาก www.hostinger.in.th

   • ขั้นตอนที่ 6 อัพโหลดเว็บไซต์

    หลังจากที่ได้สร้างเว็บไซต์จนเสร็จแล้ว ต่อไปเราจะทำการอัพโหลดเว็บไซต์ด้วยโปรแกรม FileZilla เพื่อให้คนทั่วโลกสามารถดูเว็บไซต์ของได้ผ่านเครือข่ายอินเทอร์เน็ต 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


                            การอัพโหลดเว็บไซต์ผ่านโปรแกรม FileZilla

คำศัพท์พื้นฐานเกี่ยวกับการสร้างเว็บเพจ

    สิ่งที่ควรรู้ก่อนสร้างเว็บเพจ คือ คำศัพท์ต่างๆ ที่ช่วยทำให้เราเข้าใจและสามารถศึกษาการสร้างเว็บเพจได้อย่างถูกต้อง

เครือข่ายใยแมงมุม WWW (World Wide Web)

    บริการรูปแบบหนึ่งในอินเทอร์เน็ตที่เชื่อแน่ว่า ทุกคนต้องเคยสัมผัสก็คือ WWW หรือที่เรียกสั้นๆ

ว่า "เว็บ" นั่นเอง การให้บริการในรูปแบบนี้ คือ การเรียกบราวเซอร์ เช่น Internet Explorer หรือ Firefox จากเครื่องของเราและระบุ URL เพื่อใช้ในการอ้างที่อยู่ที่เก็บเว็บเท่านี้ ก็สามารถเปิดดูเว็บได้แล้ว ดังตัวอย่างเมื่อเราระบุ URL ที่ต้องการเปิดเป็น www.sakaeo.go.th ก็จะเปิดดูเว็บไซต์ Roiet หรือจังหวัดร้อยเอ็ด

เว็บไซต์ (Web Site)

    หน้าเว็บหลายๆ หน้ารวมกัน ว่า "เว็บไซต์" (Web Site) โดยจะมีการกำหนดเว็บเพจหน้าหนึ่งไว้เป็นหน้าแรก และเรียกว่า "โฮมเพจ" (Home Page) ที่เป็นช่องทางเข้าเว็บเพจทั้งหมดภายในเว็บไซต์นั้น

                      ตัวอย่างหน้าโฮมเพจของเว็บไซต์ Kapook.com

เว็บบราวเซอร์ และเว็บเซิร์ฟเวอร์ (Web Browser & Web Server)

   เว็บบราวเซอร์ (Web Browser)

   คือ โปรแกรมที่เป็นประตูเข้าสู่โลก World Wide Web ซึ่งเป็นโปรแกรมที่อยู่ในเครื่องคอมพิวเตอร์ลูกข่าย (Client) มีหน้าที่ในการส่งข้อมูลร้องขอ และนำเสนอข้อมูลเว็บ โดยตัวเว็บบราวเซอร์จะเข้าใจในภาษา HTML ที่เป็นมาตรฐานของเว็บ ปัจจุบันบราวเซอร์ที่ได้รับความนิยม ก็มี Internet Explorer

ของไมโครซอฟท์ Firefox และ Google Chrome ซึ่งเป็นบราวเซอร์โอเพ่นซอร์ส

    เว็บเซิร์ฟเวอร์ (Web Server)

    เป็นที่เก็บเว็บเพจ เมื่อใดที่ต้องการเปิดดูเว็บเพจ ต้องใช้บราวเซอร์ดึงข้อมูล โดยที่บราวเซอร์จะทำการติดต่อกับเซิร์ฟเวอร์ที่เก็บเว็บไซต์นั้น เพื่อให้มีการโอนย้ายข้อมูลมาแสดงที่เครื่องของเรา

โดเมนเนม (Domain Name)

   การติดต่อกันบนอินเทอร์เน็ตนั้น จะใช้ไอพีแอดเดรสในการทำงาน แต่เป็นตัวเลขที่ยาว ทำให้ผู้ใช้

จำยาก จึงได้มีการใช้โดเมนเนม (Domain Name) หรืออินเทอร์เน็ตแอดเดรส (Internet Address) มาใช้ ซึ่งเป็นการนำตัวอักษรที่จำง่ายมาใช้แทนไอพีแอดเดรส โดเมนเนมจะไม่ซ้ำกัน และมักถูกตั้งให้สอดคล้องกับชื่อบริษัท หรือองค์กรผู้เป็นเจ้าของ เพื่อสะดวกในการจดจำชื่อ เช่น บริษัท ดีแทค มีโดเมนเป็น www.dtac.co.th

    ประเภทของโดเมนเนม

     โดเมนเนมเป็นชื่อของเว็บไซต์ที่เราเผยแพร่ข้อมูล ซึ่งจะไม่ซ้ำใครในโลก มีการแบ่งโดเมนเป็น 2 ประเภทตามลักษณะของมัน ได้แก่ โดเมนเนม 2 ระดับและโดเมนเนม 3 ระดับ

โดเมนเนม 2 ระดับ จะมีรูปแบบ เช่น dtac.com

     สำหรับตัวย่อที่อยู่หลังเครื่องหมายจุดในโดเมนเนม คือคำย่อของประเภทองค์กร ซึ่งคำย่อของประเภทองค์กรที่เราจะพบบ่อย มีดังนี้

 ตัวย่อ     ประเภทองค์กร

  .com     บริษัทหรือองค์กรพาณิชย์ เช่น บริษัท ไอบีเอ็ม มีอินเทอร์เน็ตแอดเดรสเป็น ibm.com

  .edu      สถาบันการศึกษา เช่น มหาวิทยาลัยฮาร์วาร์ด มีอินเทอร์เน็ตแอดเดรสเป็น harvard.edu

  .gov      องค์กรรัฐบาล เช่น องค์กรนาซ่า มีอินเทอร์เน็ตแอดเดรสเป็น nasa.gov

  .mil      องค์กรทางทหาร เช่น af.mil เป็นอินเทอร์เน็ตแอดเดรสของกองทัพอากาศสหรัฐฯ

  .net      องค์กรที่ทำหน้าที่เป็นเกตเวย์ หรือจุดเชื่อมต่อเครือข่าย เช่น mci.net

  .org      องค์กรที่ไม่เข้าข่ายประเภทองค์กรทั้งหมดที่ได้กลางถึงด้านต้น

  .biz      บริษัทหรืองค์กรทางธุรกิจ

  .info     ใช้ในโอกาสโปรโมทสินค้า, เหตุการณ์สำคัญ เช่น บอกข้อมูลส่วนลดสินค้า

โดเมนเนม 3 ระดับ จะมีรูปแบบ เช่น dtac.co.th

  โดยคำย่อในส่วนที่ 2 หลังเครื่องหมายจุดใช้ระบุประเภทขององค์กร และคำย่อส่วนที่ 3 หลังเครื่องหมายจุดใช้ระบุประเทศที่ตั้งขององค์กรนั้น เช่น

    ตัวย่อส่วนที่ 2                              ตัวย่อส่วนที่ 3

   .co     บริษัทหรือองค์กรพาณิชย์                .cn     จีน

   .ac     สถาบันการศึกษา                       .th      ไทย

   .go     องค์กรรัฐบาล                         .jp      ญี่ปุ่น

   .or     องค์กรไม่แสวงผลกำไร                   .au     ออสเตรเลีย

   .net    องค์กรที่ให้บริการเครือข่าย  

    รายละเอียดเกี่ยวกับ URL

content identifier       เป็นส่วนที่แจ้งให้บราวเซอร์ทราบว่าต้องจัดการข้อมูลที่พบอย่างไร สำหรับ                        เว็บเพจใน World Wide Web จะใช้โปรโตคอลมาตรฐานชื่อ HTTP                            (HyperText Transfer Protocol) ส่วน FTP เป็นอีกโปรโตคอลเกี่ยวกับ                         โอนย้ายไฟล์ข้อมูลในอินเทอร์เน็ตที่เราพบได้บ่อย

hostname              เป็นส่วนที่ระบุชื่อของเว็บไซต์ที่ทำหน้าที่เผยแพร่เว็บเพจ บ่อยครั้งที่ส่วนนี้                        ถูกเรียกว่าโดเมนเนม (Domain Name) เว็บไซต์จะมีโดเมนเนมเฉพาะที่ไม่                        เหมือนใคร

ส่วนระบตำแหน่ง         ระบุที่เก็บข้อมูลเว็บในเครื่อง

ชื่อไฟล์ข้อมูล             ส่วนสุดท้ายของ URL จะเป็นชื่อไฟล์ข้อมูล เช่น เว็บเพจจะมีนามสกุล

                      .htm .html ถ้าในส่วนนี้ไม่มีใน URL บราวเซอร์จะถือว่าชื่อไฟล์ที่ต้องการ                        เรียกดูนั้น คือ index.htm ซึ่งโดยปกติจะถูกใช้เป็นชื่อโฮมเพจในเว็บไซต์

bottom of page