ข้อมูลองค์ความรู้โดย
นิลาวัลย์ กุลประดิษฐ์
ตำแหน่ง เจ้าหน้าที่สารสนเทศ

ความรู้พื้นฐานก่อนสร้างเว็ปไซต์

ประเภททางด้าน IT หลัก :   Development & Integration
ประเภททางด้าน IT ย่อย :   Web Design
  ลงข้อมูลเมื่อ 09:37:33 20/05/2013
  Page View (1840) แบ่งปัน

ความรู้พื้นฐานก่อนสร้างเว็ปไซต์

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

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

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

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

เว็บไซต์ (Website)  และเว็บเพจ (Webpage)

 เอกสารหรือส่วนที่ติดต่อกับผู้ใช้ในเว็บ เรียกว่า เว็บเพจ (Webpage)  หมายถึงเอกสารหนึ่งหน้า การใช้เว็บก็คือการเปิดอ่านหรือเปิดใช้เว็บแต่ละหน้านั่นเอง  เว็บเพจอาจสร้างขึ้นด้วยภาษาคอมพิวเตอร์  เช่น HTML, ASP, PHP, JAVA ฯลฯ  
                เมื่อนำเว็บเพจหลาย ๆ หน้ามารวมกัน และระบุอยู่ในอินเตอร์เน็ต  หรือ ยูอาร์แอล (Uniform Resource Locator – URL)  ให้กับเว็บเพจกลุ่มนั้นจะเรียกว่า  เว็บไซต์ (Web Site)
                เมื่อเปิดเว็บไซต์ขึ้นมาจะพบกับหน้าแรกของเว็บไซต์   ซึ่งเรียกว่าโฮมเพจ (Homepage)   ซึ่งเป็นหน้าที่ สำคัญที่สุดและเป็นหน้าที่จะเชื่อมโยงไปยังเว็บเพจและเว็บไซต์อื่น ๆ

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

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

ภาษา  HTML

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

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

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

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

Com กลุ่มองค์การค้า(Commercial) เช่น  www.ibm.com 

edu กลุ่มการศึกษา(Education) เช่น  www.chula.edu

gov กลุ่มองค์การ เช่น  www.whitehouse.gov รัฐบาล(Government) เช่น  www.dtic.mil

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

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

org กลุ่มองค์กรอื่นๆ (Organizations)  เช่น  www.greenpeace.org

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

โดเมนเนมเหล่านี้ จะใช้ต่อตอนท้ายสุด เพื่อสะดวกในการอ้างอิงว่าเป็นโฮสต์หรือเว็บไซต์ที่อยู่ในประเทศใด เช่น 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)

 

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

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


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

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

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

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

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

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

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

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

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

การหาผู้ให้บริการรับฝากเว็บไซต์ (Web Hosting) เป็นต้น

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

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

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

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

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

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

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

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

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

หรือจะมีชื่อเจ้าของเว็บไซต์ อีเมลแอดเดรสของผู้ดูแลเว็บไซต์สำหรับติดต่อกับทางเว็บไซต์

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

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

 ที่มาจาก : com-learning2u.com



องค์ความรู้ที่มีผู้อ่านมากสุด
ม า รู้ จั ก F i r e w a l l ส่ ว น ตั ว กั น เ ถ อ ะ
-

โดย... นิลาวัลย์ กุลประดิษฐ์

ก า ร ทำ Sc a n d i s k ใ ห้ ร ว ด เ ร็ ว ทั น ใ จ
-

โดย... นิลาวัลย์ กุลประดิษฐ์

เคล็ดลับและไม่ลับที่ดีใน Windows 7
-

โดย... นิลาวัลย์ กุลประดิษฐ์

:: WAP ::
WAP (Wireless Application Protocal) WAP ย่อมาจาก Wireless Application Protocol เป็นเทคโนโลยีสื่อสารแบบไร้สายเป็นโปรโตคอล(Protocol) ที่พัฒนาขึ้นจากผู้ผลิตโทรศัพท์มือถือในปี ค.ศ. 1977 ได้แก่ Ericcson, Nokia, Motorola เป็นต้น เพื่อให้ผู้ใช้งานโทรศัพท์มือถือ และอุปกรณ์ไร้สาย สามารถติดต่อเข้าระบบเครือข่ายอินเตอร์เน็ตได้จากทุกที โดยใช้งานผ่านซอฟต์แวร์ที่เรียกว่า WAP Browser และฝั่งผู้ให้บริการเครือข่ายจะต้องมี WAP Gateway ไว้รองรับการใช้งานหรือให้บริการ

โดย... นิลาวัลย์ กุลประดิษฐ์

โปรแกรม Dreamweaver 8 ใช้สำหรับสร้างเว็ป
โปรแกรม Dreamweaver 8 ใช้สำหรับสร้างเว็ป

โดย... นิลาวัลย์ กุลประดิษฐ์

:: BLUETOOTH ::
ความเป็นมาของ Bluetooth คำว่า "บลูทูธ"ชื่อนี้ได้ยินกันมานานอยู่พอสมควร แต่ผมเชื่ออยู่อย่างหนึ่งว่า มีหลายท่านเคยใช้ประโยชน์จากมันมาแล้ว และ ทราบรายละเอียดของเจ้าอุปกรณ์ไฮเทคตัวนี้ดีครับ

โดย... นิลาวัลย์ กุลประดิษฐ์

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

โดย... นิลาวัลย์ กุลประดิษฐ์

Hashtag ใน Facebook คืออะไร?
ถ้าใครเล่นทวิตเตอร์มาจะรู้จักว่า Hashtag (#) หรือเครื่องหมายชาร์ปนั้นมีประโยชน์อย่างไร

โดย... นิลาวัลย์ กุลประดิษฐ์