บทที่1 ความรู้เบื้องต้นเกี่ยวกับเว็บไซต์

บทที่1 ความรู้เบื้องต้นเกี่ยวกับเว็บไซต์

บทที่1 ความรู้เบื้องต้นเกี่ยวกับเว็บไซต์

เนื้อหาสาระ

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

1.1ความรู้เบื้องต้นเกี่ยวกับอินเตอร์เน็ต

http://www.healthygamer.net/sites/default/files/browser.jpg

อินเตอร์เน็ต  (Internet)

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

https://yupapanbeam.files.wordpress.com/2012/07/w-w-w-http.jpg?w=645

ลักษณะของเวิล์ด ไวด์ เว็บ (World Wide Web)

เวิล์ด ไวด์ เว็บ (World Wide Web – www) หรือเรียกย่อ ๆ ว่า เว็บ (web) เป็นอินเตอร์เน็ตชนิดหนึ่ง ที่อยู่ในรูปแบบของกราฟิกและมัลติมีเดีย ซึ่งประกอบด้วยข้อความ (Text) ภาพ (Graphic) เสีย (Sound) และ ภาพเคลื่อนไหว (Movie) เป็นต้นผู้ใช้ทั่วไปสามารถเข้าไปในเว็บได้ง่าย และจะได้รับข้อมูลครบถ้วนปัจจุบัน ถ้าพูดถึงอินเตอร์เน็ต คนทั่วไปจะเข้าใจว่าหมายถึงเว็บ ทั้งที่จริงแล้วเว็บเป็นส่วนหนึ่งของอินเตอร์เน็ตเท่านั้น

http://www.earthnet.net/help/images/set_homepage/ie_homepage_6B.png

โฮมเพจ (Home Page)

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

เว็บเพจและเว็บไซต์อื่น ๆ อีกเป็นจำนวนมากได้ และต้องตั้งชื่อเป็น index.html เท่านั้น

http://www.kts.ac.th/kts/kanghan/html/images/web_sk.gif

เว็บเพจ (Webpage)

เว็บเพจ (Webpage)หมายถึง หน้าหนึ่ง ๆ ของเว็บไซต์ที่เราเปิดขึ้นมาใช้งานโดยทั่วไป เว็บเพจส่วนใหญ่จะอยู่ในรูปของเอกสาร HTML หรือ XHTML (ซึ่งมักมีนามสุึกลไฟล์เป็น htm หรือ html) มีลิงก์สำหรับเชื่อมโยงไปยังเว็บเพจหน้าอื่น ๆ สามารถใส่รูปภาพและรูปภาพยังสามารถเป็นลิงก์ กล่าวคือ สามารถคลิกบนรูปเพื่อกระโดดไปหน้าอื่นได้

http://www.freethailand.com/articlepic/website.gif

เว็บไซต์ (Website)

เว็บไซต์ (Website) คือเว็บเพจหลาย ๆ หน้ารวมกันและเก็บไว้ที่หนึ่ง เรียกว่า เว็บไซต์

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

เว็บเบราเซอร์ (Web Browser) คือโปรแกรมที่ใช้สำหรับเปิดเว็บเพจหรือ รับส่งข้อมูลตามที่เครื่องลูกข่ายร้องขอเมื่อเราเปิดเข้าสู่อินเตอร์เน็ต เว็บเบราเซอร์ที่ได้รับความนิยมปัจจุบันมีหลายโปรแกรม เช่น Microsoft Internet Explorer (IE), Mozilla Firefox, และ Opera

http://www.udomsuksa.ac.th/Latphrao/Knowledge/Teaching1/HTML/HTML_files/ex14_marqueeBgcolor_Notepad.gif

ภาษา HTML

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

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

โดเมนเนม (Domain Name) หรือที่เข้าใจกันทั่วไป คือ ชื่อเรียกเว็บไซต์นั่นเอง การจดทะเบียนโดเมนเนมจึงเป็นการลงทะเบียนชื่อให้กับเว็บไซต์ของเราในโลก อินเตอร์เน็ต โดเมนเนมที่ขอจดทะเบียนจะต้องไม่ซ้ำกับคนอื่น และควรตั้งให้เกี่ยวข้องกับเนื้อหาภายในเว็บไซต์ หรือเกี่ยวข้องกับสินค้าและบริการ ตลอดจนใช้คำง่าย ๆ ให้จำได้ เช่น sanook.com และ yahoo.com เป็นต้น

ความหมายของซับโดเมน

Com

edu

gov

mit

net

org

กลุ่มองค์การค้า(Commercial)

กลุ่มการศึกษา(Education)

กลุ่มองค์การรัฐบาล(Government)

กลุ่มองค์การทหาร(Military)

กลุ่มองค์การบริการเครือข่าย(Network Services)

กลุ่มองค์กรอื่นๆ (Organizations)

เช่น http://www.ibm.com

เช่น http://www.chula.edu

เช่นhttp://www.whitehouse.gov

เช่น http://www.dtic.mil

เช่น www.greenpeace.org

โดเมนที่เป็นชื่อย่อของประเทศที่น่าสนใจ

โดเมนเนมเหล่านี้ จะใช้ต่อตอนท้ายสุด เพื่อสะดวกในการอ้างอิงว่าเป็นโฮสต์หรือเว็บไซต์ที่อยู่ในประเทศใด เช่น http://www.ksc.net.th จะเห็นว่า ลงท้ายด้วย th จะเป็นโดเมนของประเทศไทย

au

fr

hk

jp

th

sg

uk

ออสเตรเลีย Austtralia

ฝรั่งเศส France

ฮ่องกง Hong Kong

ญี่ปุ่น Japan

ไทย Thailand

สิงคโปร์ Singapore

อังกฤษ United Kingdom

ความหมายของซับโดเมน

ac

co

or

net

go

สถาบันการศึกษา(Academic)

องค์กรธุรกิจ(Commercail)

องค์กรอื่นๆที่ไม่แสวงหากำไร(Organizations)

ผู้วางระบบเน็ตเวิร์ค(Networking)

หน่วยงานรัฐบาล(Government)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioC2obBRUpmcdOmnKoM7gGRTiZzKd6zvTQabb2tkyTpBLWxNhMfQdWnjEO1KqessflSZjTGC8zgv1PmnoXi74SNAtJ-OPINRzpCi_ZBbEtIDQGnn1iiok9i5uW2kSrZgy_JGPZwEKckMmV/s400/The-New-Internet.png

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

หลักการออกแบบเว็บไซต์สามารถแบ่งออกเป็นขั้นตอนต่าง ๆ เพื่อให้เหมาะสมกับผู้เริ่มต้นใช้เป็นแนวทาง ในการสร้างและพัฒนาเว็บไซต์

การวางแผน

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

การกำหนดเนื้อหาและจุดประสงค์ของเว็บไซต์

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

การกำหนดกลุ่มเป้าหมาย

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

การเตรียมข้อมูล

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

ขออนุญาตเจ้าของบทความก่อนเพื่อป้องกันเรื่องลิขสิทธิ์ด้วย

การเตรียมสิ่งต่าง ๆ ที่จำเป็น

ในการออกแบบเว็บไซต์ต้องอาศัยความสามารถต่าง ๆ เช่น โปรแกรมสำหรัสร้าง เว็บไซต์ ภาพเคลื่อนไหว มัลติมีเดีย การจดโดเมนเนม การหาผู้ให้บริการรับฝากเว็บไซต์ (Web Hosting) เป็นต้น

การจัดโครงสร้างข้อมูล

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

โครงสร้างและสารบัญของเว็บไซต์

การใช้ระบบนำผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่าระบบนำทาง (Navigation)

องค์ประกอบที่ต้องนำมาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่าง ๆ

การกำหนดรูปแบบและลักษณะของเว็บเพจ

การกำหนดฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันที่นำมาใช้ในเว็บไซต์

การบริการเสริมต่าง ๆ

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

นับเป็นขั้นตอนในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้านกราฟิกของหน้า

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

1.3 ส่วนประกอบของหน้าเว็บเพจ

เราสามารถจำแนกส่วนประกอบของหน้าเว็บเพจ เป็น 3 ส่วน ดังนี้

       1. ส่วนหัว (Page Header) น่าจะอยู่บริเวณบนสุดของหน้าเว็บเพจ เป็นส่วนที่แสดงชื่อ เว็บไซต์ โลโก้ แบนเนอร์โฆษณาลิงก์สำหรับข้ามไปยังหน้าเว็บอื่น

       2. ส่วนเนื้อหา (Page Body) จะอยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึ่งเป็นส่วนที่แสดงเนื้อหาภายในหน้าเว็บเพจนั้น โดยประกอบด้วยข้อความ ข้อมูล ภาพเคลื่อนไหว เป็นต้น

      3. ส่วนท้าย (Page Footer) จะอยู่บริเวณด้านล่างสุดของหน้าเว็บเพจ ส่วนมากใช้สำหรับลิงก์ข้อความสั้น ๆ เข้าใจง่าย หรือจะมีชื่อเจ้าของเว็บไซต์ อีเมลแอดเดรสของผู้ดูแลเว็บไซต์สำหรับติดต่อกับทางเว็บไซต์

http://archive.cnx.org/resources/87bbfbae21457dfea1b047ff56695852068f2a72/6.4.png

แนวคิดในการออกแบบ

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

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