การสร้างเว็บไซต์ 
เว็บไซต์ (Web Site) คือ แหล่งที่เก็บรวบรวมข้อมูลเอกสารและสื่อประสมต่าง ๆ เช่น ภาพ เสียง ข้อความ ของแต่ละบริษัทหรือหน่วยงานโดยเรียกเอกสารต่าง ๆ เหล่านี้ว่า เว็บเพจ (Web Page) และเรียกเว็บหน้าแรกของแต่ละเว็บไซต์ว่า โฮมเพจ (Home Page) หรืออาจกล่าวได้ว่า เว็บไซต์ก็คือเว็บเพจอย่างน้อยสองหน้าที่มีลิงก์ (Links) ถึงกัน ตามหลักคำว่า เว็บไซต์จะใช้สำหรับผู้ที่มีคอมพิวเตอร์แบบเซิร์ฟเวอร์หรือจดทะเบียนเป็นของตนเองเรียบร้อยแล้วเช่น www.google.co.th ซึ่งเป็นเว็บไซต์ที่ให้บริการสืบค้นข้อมูลเป็นต้นสรุป เว็บไซต์ คือ ชื่อเรียกหรือที่อยู่ของเครื่องคอมพิวเตอร์ที่ให้บริการเว็บเพจ คือ หน้าแต่ละหน้าที่มีการเชื่อมโยงถึงกันโฮมเพจ คือ หน้าแรกที่เข้าสู่เว็บไซต์นั้น ๆ
องค์ประกอบของเว็บไซต์
สำหรับคนที่เริ่มต้นออกแบบเว็บไซต์ในครั้งแรกไม่รู้ว่าจะเริ่มอย่างไรดี บทความนี้จะแนะนำวิธีการในการออกแบบเว็บไซต์ที่เว็บทั่วไปควรมี ดังรูปที่เห็นด้านบนเป็นโครงสร้างของเว็บไซต์โดยจะมีส่วนหลักๆอยู่ด้วยกันทั้งหมด 6 ส่วนดังนี้ Containing block โดยปรกติเราจะเขียน <div> หรือ <table> ต่อจาก <body> เพื่อเอาไว้เก็บเนื้อหาทั้งหมดของเว็บไซต์ก่อน เพื่อเอาไว้เป็นกล่องในการเก็บเนื้อหาทั้งหมด โดยกล่องของเราจะมีข้อดีอยู่ตรงที่ สามารถทำให้ปรับเปลี่ยนขนาดในการแสดงผลของเนื้อหาได้ หรือตำแหน่งการแสดงผลของเว็บไซต์ได้เช่น จัดกลาง ชิดซ้าย หรือชิดขวา หากนึกภาพไม่ออก ลองเขียนเว็บไซต์โดยเริ่มที่ใส่ตัวหนังสือลงไปก่อน จากนั้นหากต้องการจัดตัวหนังสือเหล่านั้นจะทำได้ยากมาก ดังนั้นทุกครั้งที่ออกแบบเว็บไซต์อย่างลืมที่จะสร้าง containing block เอาไว้ใส่เนื้อหาทั้งหมดก่อน เพื่อความสะดวกของเราเอง Logo เป็นสัญลักษณ์ที่แสดงถึงตัวตนของเรา ทำให้ลูกค้าหรือผู้ใช้งานจดจำเราได้ ด้วยเหตุนี้เองทำให้การออกแบบเว็บไซต์นั้นจำเป็นต้องมีโลโก้ ของเว็บไซต์เป็นอย่างยิ่ง ส่วนตำแหน่งที่ควรจะวางโลโก้ไว้คือตำแหน่งที่เป็นสีม่วงทั้งหมดนั่นเอง จะสังเกตได้ว่าจะเป็นส่วนที่อยู่ด้านบนของเว็บไซต์ทั้งหมด เพื่อให้ผู้ใช้งานจำได้ และสะดุดตา เรื่องที่ต้องเตือนให้รู้กันก็คือ โลโก้ของเว็บไซต์เมื่อคลิกจะนำไปสู่หน้าแรกของเว็บไซต์เสมอ Navigation เป็นส่วนที่จะนำผู้เข้าชมเว็บไซต์ไปยังส่วนต่างของเว็บไซต์ โดยสามารถทำให้อยู่ในแนวนอน หรือแนวตั้งก็ได้ หากสังเกต hellomyweb.com เราจะทำทั้งแนวตั้งและแนวนอน โดยแนวนอนจะนำไปสู่เนื้อหาหน้าอื่นของเว็บไซต์ ส่วนแนวตั้งจะนำไปสู่เนื้อหาย่อยในหน้านั้น ตำแหน่งที่ควรจะวาง navagation เอาไว้คือสีเขียวทั้งหมด ถ้าสังเกตดูจะพบว่าการวางตำแหน่งต้องพยายามให้อยู่ในส่วนด้านบนของเว็บไซต์ หรือจะพูดอีกอย่างคือส่วนที่เมื่อผู้ใช้เปิดมาก็ต้องเจอได้ทันที ไม่ควรวางไว้ในตำแหน่งที่ผู้ใช้จะต้องเลื่อนขึ้นลง ซ้ายขวา Content ส่วนเนื้อหาของเว็บไซต์ เป็นส่วนที่สำคัญมากที่สุด หากผู้ใช้งานไม่สามารถเข้าถึงได้โดยง่ายผู้ใช้งานจะเปลี่ยนไปชมเว็บใหม่ทันที ตำแหน่งที่ควรวางเนื้อหาไว้คือสีแดง หรือตำแหน่งอื่นๆที่คิดว่าจะทำให้ผู้หาเจอได้โดยไม่ลำบาก หากสังเกตดูจะพบว่าเว็บไซต์บางเว็บไซต์มีโฆษณาที่มากจนเกินไป ทำให้ผู้ใช้งานหาเนื้อหาไม่เจอ นั่นถือเป็นการออกแบบที่ผิดพลาด Footer คือส่วนล่างสุดของหน้าเว็บไซต์ ส่วนใหญ่จะเก็บลิงก์ต่างๆเอาไว้ หรือเป็นเนื้อหาที่เกี่ยวกับเว็บไซต์เช่นลิขสิทธิ์ต่างๆ ถามว่าจำเป็นต้องมีหรือไม่ บอกได้ว่าจำเป็นอย่างยิ่ง footer จะเป็นตัวบอกผู้ชมว่าส่วนนี้คือล่างสุดของหน้าที่กำลังแสดงอยู่แล้วนะ ไม่มีเนื้อหาเพิ่มเติมแล้ว ทำไม่ต้องบอกเนื่องจากการแสดงเว็บไซต์ในบางครั้งนั้นหน้านั้นอาจโหลดได้ไม่หมด อาจแสดงได้แค่เนื้อหาภายใน หากเราออกแบบให้มี footer ตั้งแต่แรกผู้ใช้งานก็จะรู้ได้ทันทีว่าหน้าที่แสดงผลนี้อาจแสดงได้ไม่สมบูรณ์เพราะยังไม่เห็น footer และยังมีผลต่อภาพลักษณ์ของเว็บไซต์โดยตรง เราจะสังเกตได้ว่าเมื่อเข้าไปดูเว็บไซต์ที่ไม่มี footer จะรู้สึกเหมือนกับว่าเว็บไซต์นั้นยังทำไม่เสร็จ หรือขาดอะไรบางอย่าง Whitespace พื้นที่ว่างในเว็บไซต์ คนส่วนใหญ่มักไม่เห็นความสำคัญของการเว้นพื้นที่ว่างไว้ในเว็บไซต์ เรามักจะใส่ภาพหรือตัวหนังสือเข้าไปให้มากที่สุดเพราะคิดว่าจะทำให้เว็บดูสวยงามขึ้น หรือใช้พื้นที่มีมีอยู่ให้คุ้มค่าที่สุด หากเราออกแบบโดยไม่ได้คำนึงว่าต้องมีพื้นที่ว่างอยู่ในเว็บไซต์ จะทำให้เว็บของเรานั้นดูอึดอัดทันที การเว้นช่องว่างเอาไว้ ไม่ว่าจะเป็นระยะห่างระหว่างตัวอักษร หรือช่องว่างระหว่างภาพ เนื้อหาต่างๆ นอกจากจะทำให้เว็บของเราดูสบายตาขึ้นแล้ว ยังทำให้เราสามารถกำหนดจุดที่จะให้ผู้ใช้งานเว็บรู้สึกสนใจในจุดนั้นได้อีกด้วย เช่นหากเราเว้นช่องว่างเอาไว้ตรงกลาง และนำภาพหรือตัวหนังสือเล็กๆไปวางไว้ ตรงจุดนั้นจะเป็นที่สนใจของผู้ใช้ทันที
ส่วนประกอบของเว็บเพจ
แบ่งออกเป็น 3 ส่วนหลักๆ คือ 1. ส่วนหัวของหน้า (Page Header)เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สำคัญที่สุดของหน้า เพราะเป็นส่วนที่ดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์ มักใส่ภาพกราฟฟิกเพื่อสร้างความประทับใจ ส่วนใหญ่ประกอบด้วยโลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ได้เป็นอย่างดี และยังทำให้เว็บน่าเชื่อถือชื่อเว็บไซต์เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์ 2.ส่วนของเนื้อหา (Page Body)เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ซึ่งประกอบด้วยข้อความ, ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ และอาจมีเมนูหลัก หรือเมนูเฉพาะกลุ่มวางอยู่ในส่วนนี้ด้วยสำหรับส่วนเนื้อหาควรแสดงใจความสำคัญที่เป็นหัวเรื่องไว้บนสุด ข้อมูลมีความกระชับ ใช้รูปแบบตัวอักษรที่อ่านง่าย และจัด Layout ให้เหมาะสมและเป็นระเบียบ 3. ส่วนท้ายของหน้า (Page Footer)เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้ มักวางระบบนำทางที่เป็นลิงค์ข้อความง่าย ๆ และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น เจ้าของเว็บไซต์, ข้อความแสดงลิขสิทธิ์, วิธีการติดต่อกับผู้ดูแลเว็บไซต์, คำแนะนำการใช้เว็บไซต์ เป็นต้น
องค์ประกอบของเว็บเพจ
ส่วนประกอบของเว็บเพจว่ามีส่วนประกอบต่างๆ ที่จำเป็นดังนี้
1. Text เป็นข้อความปกติ โดยเราสามารถตกแต่งให้สวยงามและมีลูกเล่นต่างๆ ดังเช่นโปรแกรมประมวลคำ 2. Graphic ประกอบด้วยรูปภาพ ลายเส้น ลายพื้น ต่างๆ มากมาย 3. Multimedia ประกอบด้วยรูปภาพ ภาพเคลื่อนไหว และแฟ้มเสียง 4. Counter ใช้นับจำนวนผู้ที่เข้ามาเยี่ยมชมเว็บเพจของเรา
5. Cool Links ใช้เชื่อมโยงไปยังเว็บเพจของตนเองหรือเว็บเพจของคนอื่น
6. Forms เป็นแบบฟอร์มที่ให้ผู้เข้าเยี่ยมชม กรอกรายละเอียด แล้วส่งกลับมายังเว็บเพจ 7. Frames เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนก็จะแสดงข้อมูลที่แตกต่างกันและเป็นอิสระจากกัน 8. Image Maps เป็นรูปภาพขนาดใหญ่ที่กำหนดส่วนต่างๆ บนรูป เพื่อเชื่อมโยงไปยังเว็บเพจอื่นๆ 9.Java Applets เป็นโปรแกรมสำเร็จรูปเล็กๆ ที่ใส่ลงในเว็บเพจ เพื่อให้การใช้งานเว็บเพจมีประสิทธิภาพมากยิ่งขึ้น *** นอกจากส่วนประกอบดังกล่าวแล้ว องค์ประกอบที่นิยมใส่ไว้ในเว็บเพจอีก 2 ส่วน ได้แก่ สมุดเยี่ยม (guestbook) และเว็บบอร์ด (webboard) ที่ช่วยให้เว็บเพจกลายเป็นสื่อที่มีปฏิสัมพันธ์ระหว่างผู้ใช้กับผู้สร้างและระหว่างผู้ใช้ด้วยกันเอง โดยอาศัยหลักการที่เรียกว่า Common Gateway Interface หรือ เรียกสั้นๆ ว่า CGI
ประโยชน์ของเว็บไซด์
ประโยชน์ของเว็บไซต์ เช่น
ส่งเสริมศักยภาพทางด้านธุรกิจ
การมีเว็บไซต์สามารถช่วยในการเพิ่มเสริมศักยภาพของธุรกิจของคุณ ให้แข่งแกร่งมากยิ่งขึ้นได้ เนื่องจากเป็นโลกที่เปิดกว้างทางด้านข้อมูล ทำให้สินค้าและบริการของคุณเป็นที่รู้จักในท้องตลาดมากยิ่งขึ้นไปได้
การเข้าถึงกลุ่มลูกค้าที่ง่ายมากยิ่งขึ้น
คุณสามารถที่จะมีเว็บไซต์เป็นของตนเองและ สามารถที่จะทำให้กลุ่มลูกค้าของคุณค้นเว็บของคุณเจอผ่าน Search Engine โดยกลุ่มคำที่เจาะจงกับธุรกิจของคุณได้ เป็นการเพิ่มกลุ่มลูกค้าที่กำลังสนใจกับสินค้าและบริการของคุณ ให้ตรงเป้าหมายมากยิ่งขึ้น ตลอด 24 ชั่วโมง แม้ว่าจะเป็นวันหยุดก็ตาม ช่วยให้คุณขายสินค้าได้โดยไม่ต้องมีหน้าร้าน
เว็บไซต์เปรียบเสมอร้านค้าออนไลน์หรือสำนักงาน ที่ใครๆก็สามารถเข้ามาเยี่ยมชมและค้าหาข้อมูลของสินค้าได้ โดยที่คุณไม่ต้องลงทุนเปิดหน้าร้านที่ต้องมีการเช่าห้องและมีค่าใช้จ่ายสูงอีกด้วย ช่วยสร้างภาพลักษณ์ที่ดีให้กับองค์กรของคุณ
สมัยนี้บริษัทที่ไม่มีเว็บเป็นของตนเองเปรียบเสมือน บริษัทที่มันต่อโลกภายนอก การมีเว็บไซต์บริษัทสามารถแสดงให้กลุ่มลูกค้าของคุณเข้าใจถึงภาพลักษณ์ที่ดีของบริษัทได้ และเว็บไซต์ยังช่วยในการสร้างความรู้สึกประทับใจกับผู้เยี่ยมชมได้อีกด้วย ช่วยลดค่าใช้จ่ายในการประชาสัมพันธ์
จะดีหรือไม่ถ้าคุณไม่ต้องเสียค่าโฆษณาที่แพงๆ ผ่านสื่อต่างๆ เช่น โทรทัศน์ วิทยุ หนังสือพิมพ์ โดยคุณหันมาสร้างเว็บไซต์เป็นของตนเอง ลงทุนสร้างเว็บแค่ครั้งเดียวแต่ใครๆก็สามารถที่จะเข้ามาเยี่ยมชมได้โดยที่คุณไม่ต้องเสียค่าใช้จ่ายที่มากมาย เสียเพียงค่าบริการรายปีเพียงเล็กน้อยเท่านั้น ช่วยให้คุณเป็นเหมือนที่ปรึกษาของลูกค้า
คุณสามารถให้คำปรึกษาปัญหาและวิธีการแก้ไขปัญหาต่างๆ ผ่านทางเว็บไซต์ให้กับลูกค้าของคุณ ตลอด 24 ชั่วโมง โดยอาจจะเป็นการฝากข้อความเอาไว้ก็ได้ โดยที่คุณไม่ต้องมีทีมคอยรับโทรศัพท์ให้กับกลุ่มลูกค้าที่มีปัญหาต่างๆ สามารถอำนวยความสะดวกแก่ลูกค้าได้
จะดีไม่น้อยเลยทีเดียว หากลูกค้าของคุณมีปัญหาหรือข้อสงสัยในสินค้าและบริการ และสามารถที่จะแก้ปัญหาด้วยตนเองได้ ผ่านการอ่านบทความช่วยเหลือบนเว็บไซต์ของคุณ อีกทั้งยังเป็นการสร้างความมั่นใจในการดูและลูกค้าให้กับกลุ่มลูกค้าของคุณมากยิ่งขึ้นด้วย
โปรแกมสำเร็จที่ใช้สร้างเว็บไซด์
ทุกโปรแกรมที่ได้กล่าวถึงข้างต้นต่างก็มีพื้นฐานมาจากการใช้ภาษา HTML (HyperText Markup Language) เกือบทั้งหมด โดยเป็นภาษาที่มีลักษณะของโค้ด คือเป็นไฟล์เก็บข้อมูลที่เป็นตัวอักษรในมาตรฐานของรหัสแอสกี (ASCII Coed) ซึ่งสามารถที่จะอ่านเข้าใจได้ และเป็นเอกสารที่มีความสามารถสูงกว่าเอกสารธรรมดาทั่วไป ทั้งนี้เพราะเป็นเอกสารแบบไฮเปอร์เท็กซ์ และจัดอยู่ในตระกูลของภาษาที่ใช้สำหรับกำหนดรูปแบบของเอกสาร (Markup Language)กราฟิกสำหรับเว็บก็เป็นอีกองค์ประกอบหนึ่งที่สำคัญที่จะช่วยสื่อความหมายของเว็บให้ผู้ใช้ได้เข้าใจได้ง่ายยิ่งขึ้น รูปแบบกราฟิกสำหรับเว็บมีประเภทไฟล์อยู่ 2 ประเภทที่นิยม คือ GIF (Graphic Interchange Format) และ JPEG (Photographic Experts Group) ทั้งสองไฟล์นี้เป็นไฟล์ที่นักออกแบบเว็บส่วนใหญ่นำมาใช้บนหน้าเว็บเพราะเป็นไฟล์ที่มีขนาดเล็ก เมื่อนำมาจัดแสดงบนหน้าเว็บใช้เวลาในการดาว์นโหลดหน้าเว็บไม่นาน โปรแกรม Microsoft FrontPage 2002
จุดเด่นของโปรแกรม FrontPage ในเรื่องของการบริหารเว็บไซต์ได้อย่างดีเยี่ยมเพราะเหมาะสำหรับเว็บที่มีเนื้อหาอยู่ในรูปของโปรแกรม Microsoft Office เป็นส่วนใหญ่ โดยมีการใช้งานที่ง่ายกว่า Micromedia Dreamweaver MX เพราะไม่มีขั้นตอนยุ่งยาก โดยสามารถเปลี่ยนแปลงไฟล์เอกสารที่อยู่ในชุด Office ไม่ว่าจะเป็น Word Excel Access และ PowerPoint ให้เป็นไฟล์ HTML ได้อย่างง่าย เพราะปัจจุบันไมโครซอฟต์ได้พัฒนาชุด Office สนับสนุนการใช้บนเว็บมากยิ่งขึ้น บางเว็บไซต์ยังใช้โปรแกรมตัวนี้อยู่เพราะเหมาะสำหรับผู้เริ่มต้นโปรแกรม Macromedia Flash MX
เมื่อคุณต้องการสร้างงานในรูปแบบมัลติมีเดียบนหน้าเว็บของคุณโปรแกรม Macromedia Flash MX เป็นโปรแกรมที่คุณไม่ควรมองข้าม นอกจากจะทำให้เว็บมีรูปแบบที่สวยงามแล้ว ยังสามารถสร้างภาพเคลื่อนไหว สร้างการโต้ตอบ หรือใส่ลูกเล่นต่างๆ ได้ เพื่อให้เว็บมีความน่าสนใจมากยิ่งขึ้น จะเห็นได้ว่าในปัจจุบันโปรแกรมตัวนี้ได้รับความนิยมสำหรับการออกแบบเป็นอยางดี ส่วนใหญ่เป็นเว็บเกี่ยวกับบันเทิง เกมส์ การ์ตูน ที่นำมาใช้ออกแบบบนหน้าเว็บ นอกจากนี้แล้วความสามารถของโปรแกรมตัวนี้ยังสามารถเพิ่มเติมรองรับกับโค้ดภาษา HTML และ Java Script อีกด้วย โปรแกรม Adobe Illustrator
เป็นโปรแกรมที่ใช้ในการสร้างงานกราฟิก มี 2 ชนิดคือ โปรแกรมประเภทวาดภาพ และโปรแกรมประเภทตกแต่งภาพ สำหรับการสร้างภาพนั้นจะใช้เพื่อสร้างภาพเป็นลายเส้น หรือที่เรียกว่า Vector Graphic โดยจัดได้ว่าเป็นโปรแกรมระดับมืออาชีพที่ใช้กันเป็นมาตรฐานในงานออกแบบระดับสากล สามารถทำการออกแบบรูปภาพต่างๆ ไม่ว่าจะเป็นสิ่งพิมพ์ บรรจุภัณฑ์ เว็บ และภาพเคลื่อนไหวตลอดจน สำหรับการใช้ในการออกแบบภาพบนเว็บอาจจะใช้ออกแบบโลโก้ แบนเนอร์ สัญลักษณ์ต่างๆ ที่จำเป็นต้องใช้บนเว็บ จากนั้นก็จำมาตกแต่งใน Adobe PhotoShop เพื่อความสวยงามยิ่งขึ้น
ขอขอบคุณภาพและแหล่งข้อมูล จาก
http://www.thainextstep.com/
เมื่อ ศุกร์, 06/01/2012 - 14:13 | แก้ไขล่าสุด ศุกร์, 06/01/2012 - 14:48| โดย 
bcs4025
