การออกแบบ เว็บ

1. การออกแบบเว็บ

2. ศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์ศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์ • Internetคือ ระบบเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลกเกิดจากการเชื่อมโยง ของคอมพิวเตอร์หลายล้านเครื่องที่กระจายอยู่ตามที่ต่างๆ ในโลก อินเตอร์เน็ตเป็นแหล่งที่รวมของข้อมูลมหาศาลและเป็นช่องทางติดต่อสื่อสาร เพื่อแลกเปลี่ยนข้อมูลที่สะดวกและรวดเร็วบริการยอดนิยมบนอินเตอร์เน็ต ได้แก่ เว็บเพจ (www) อีเมล์ และ Instant Messageing เช่น MSN Messenger, Yahoo Messenger, ICQ เป็นต้น • www (World Wide Web) เป็นบริการข้อมูล โดยข้อมูลของ www จะอยู่ในรูปเอกสารแบบ Hypertext ซึ่งภายในเอกสารจะมีจุดเชื่อมโยง (link) ไปยังเอกสารอื่นๆ ที่เกี่ยวข้อง เอกสารต่างๆ ที่เชื่อมโยงกันเหมือนใยแมงมุม เป็นที่มาของคำว่า Web. • HTTP เป็นโปรโตคอลสำหรับเปิดดูข้อมูลจาก www เรียกใช้งานได้โดยระบุ http:// และตามด้วย URL ในช่องกรอก Address ด้านบนของโปรแกรมเว็บบราวเซอร์ http://www.kts.ac.th/kts/kanghan/html/unit102.htm

3. ศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์ (ต่อ) • URL (Uniform Resource Locator) คือ ข้อความที่บอกตำแหน่งของข้อมูลใน Internet ไม่ว่าจะเป็น Web page, File ประเภทต่างๆ เช่น รูปภาพ เสียง URL ประกอบด้วย โปรโตคอล + domain name + (directory ที่เก็บไฟล์) ชื่อไฟล์ เช่นhttp://www.enjoyday.net/webtutorial/css/index.htmlhttp://www.enjoyday.net/images/logo.jpg • Domain name คือ ชื่อเว็บไซต์ (ที่ไม่มีการซ้ำกันกับเว็บไซต์อื่นๆ) เช่น google.com, enjoyday.net

4. ศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์ (ต่อ) • Webpage คือ หน้าเอกสารของบริการ www ที่อยู่ในรูปแบบ HTML ภายในประกอบด้วยข้อความ ภาพ ลิงค์ Web page แต่ละหน้าจะเชื่อมโยงกัน เพื่อให้เราเรียกดูเอกสารหน้าอื่นๆ ที่เกี่ยวข้องได้อย่างสะดวก ไม่ต้องระบุ URL เองทุกครั้ง • Homepage คือ Web page หน้าแรกที่ผู้ใช้เห็นเมื่อเข้ามายัง Web site มักถูกออกแบบให้โดดเด่น น่าสนใจ และมีลิงค์เชื่อมโยงไปเว็บเพจหน้าอื่นๆ • Website คือ Web page หลายๆ หน้าที่มีเนื้อหาเกี่ยวข้องกัน ประกอบเข้าด้วยกัน

6. ศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์ (ต่อ) • Web browserคือ โปรแกรมสำหรับเรียกดูเว็บเพจ โดยจะแปลคำสั่ง HTML แล้วประมวลผลเพื่อแสดงผลออกมาเป็น Web page เช่น Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เป็นต้น • Web serverคือ เครื่องคอมพิวเตอร์ที่ทำหน้าที่ให้บริการข้อมูลใน www ซึ่งเก็บ Web page และโปรแกรมจัดการบริการ เมื่อผู้ใช้ต้องการดู Web page ที่อยู่ในเครื่อง Server ก็จะใช้ Web browser เรียกขอข้อมูลโดยระบุที่อยู่ของข้อมูลในลักษณะที่เรียกว่า URL • Uploadคือ การส่งข้อมูลจากเครื่องของเราไปยัง Web Server เมื่อเราสร้าง Web page แต่ละหน้าแล้ว ต้องส่งข้อมูลไปเก็บไว้ที่ Web Server ที่เป็นเครื่องคอมพิวเตอร์ที่ให้บริการข้อมูล www โดยอาศัยโปรแกรม FTP • Search engineเป็นเครื่องมือหรือโปรแกรมในการค้นหาเว็บต่างๆ โดยมีการเก็บ รายชื่อเว็บไซต์ และข้อมูลที่เกี่ยวข้องต่างๆ ของเว็บไซต์ และนำมาจัดเก็บไว้ใน server เพื่อให้สามารถค้นหาและแสดงผลได้สะดวกรวดเร็ว เช่น google.com, yahoo.com, bing.com, altavista.com, sanook.com เป็นต้น

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

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

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

10. ออกแบบให้ตรงกับเป้าหมายและลักษณะของเว็บไซต์ออกแบบให้ตรงกับเป้าหมายและลักษณะของเว็บไซต์ เว็บไซต์แต่ละประเภทต่างมีเป้าหมายและลักษณะที่แตกต่างกัน เช่น เว็บไซต์ Search Engine ซึ่งเป็นแหล่งรวบรวมเว็บไซต์ต่างๆไว้ โดยมีผู้ที่เข้ามาใช้ปริการมากในแต่ละวัน ดังนั้นสิ่งสำคัญในการออกแบบเว็บไซต์ประเภทนี้คือ - สามารถแสดงหน้าเว็บอย่างรวดเร็วเมื่อผู้ใช้เปิดเข้ามาดู - มีระบบสืบค้นข้อมูลที่มีประสิทธิภาพ เพื่อให้ได้ผลลัพธ์ที่รวดเร็ว - มีความสะดวกในการใช้บริการสืบค้นข้อมูล - มีรายละเอียดของผลการสืบค้นที่ดี

11. ออกแบบให้ตรงกับเป้าหมายและลักษณะของเว็บไซต์ออกแบบให้ตรงกับเป้าหมายและลักษณะของเว็บไซต์ เว็บไซต์เพื่อความบันเทิงหรือที่เกียวกับศิลปะซึ่งผู้ใช้หวังที่จะได้พบกับความตื่นเต้นเร้าใจ, ความสวยงาม, ความสนุกสนานและความเพลิดเพลิน ดังนั้นสิ่งสำคัญในการออกแบบเว็บไซต์ประเภทนี้คือ - มีการออกแบบเว็บให้สวยงามและน่าสนใจ - มีการใช้ Plug-ins เพื่อให้เว็บนั้นมีสีสันมากขึ้น - มีการจัดการระบบข้อมูลที่ดีอย่างเป็นระบบ - คำนึงถึงความสวยงามของเว็บไซต์เป็นหลัก

12. ภาษามาตรฐานที่ใช้ในการสร้างเว็บเพจภาษามาตรฐานที่ใช้ในการสร้างเว็บเพจ • HTML (Hypertext Markup Language) คือ ภาษามาตรฐานที่ใช้ในการสร้างเว็บเพจ เพื่อนำไปแสดงผลในโปรแกรม Web browser เอกสารเว็บเพจจะมีนามสกุลเป็น .htmหรือ .html ตัวอย่างcode ภาษา HTML เพื่อสร้างหน้าเว็บเพจ <html> <head> <title>การเริ่มต้นสร้างเว็บเพจ</title> </head> <body> ตัวอย่างการสร้างเว็บเพจด้วย HTML </body></html>

13. รูปแบบของเว็บไซต์ แบ่งได้เป็น 2 รูปแบบหลักๆ คือ 1. Static Website 2. Dynamic Website

14. รูปแบบของเว็บไซต์ 1. Static Website หมายถึง เว็บไซต์ที่สร้างด้วยภาษา HTML ธรรมดา และบันทึกเป็นไฟล์นามสกุล .html    เนื้อหาข้อความ รูปภาพในหน้าเว็บเพจนั้นจะเป็นไปตามที่เราเขียนกำหนดไว้ Static Websiteเหมาะกับเว็บไซต์ที่มีขนาดไม่ใหญ่ จำนวนหน้าเว็บเพจไม่มาก ไม่มีการเปลี่ยนแปลงข้อมูลบ่อยๆและไม่มีการติดต่อฐานข้อมูล2. Dynamic Website หมายถึง เว็บไซต์ที่หน้าเว็บเพจสามารถเปลี่ยนแปลงข้อมูลเองได้ โดยไม่ต้องเขียนแต่ละหน้าเว็บเพจเองเช่น กระดานข่าว (Webboard), ระบบสืบค้นข้อมูล เว็บไซต์รูปแบบนี้จะถูกสร้างด้วยภาษา Script แบบ Server Side Script เช่น PHP, ASP, ASP.Net, JSP และอื่นๆไฟล์เอกสารที่ได้จะมีนามสกุล .php, .asp เป็นต้น และมักจะมีการติดต่อกับฐานข้อมูลเพื่อบันทึกข้อมูลลงในฐานข้อมูล หรือนำข้อมูลจากฐานข้อมูลขึ้นมาแสดงผลเป็นหน้าเว็บเพจ

15. ส่วนประกอบของหน้าเว็บเพจส่วนประกอบของหน้าเว็บเพจ แบ่งเป็น 3 ส่วน • ส่วนหัวของหน้า (Page Header) • ส่วนของเนื้อหา (Page Body) • ส่วนท้ายกระดาษ (Page Footer)

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

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

18. ขั้นตอนการออกแบบเวปไซต์ขั้นตอนการออกแบบเวปไซต์

21. การออกแบบเว็บเพจ

25. โครงสร้างเว็บไซต์ การออกแบบโครงสร้างเว็บไซต์ สามารถทำได้หลายแบบ ขึ้นอยู่กับลักษณะของข้อมูล ความถนัดของผู้ออกแบบ ตลอดจนกลุ่มเป้าหมายที่ต้องการนำเสนอ โครงสร้างของเว็บไซต์ประกอบไปด้วย 4 รูปแบบใหญ่ๆ ได้ดังนี้

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

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

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

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

33. การวางแผนพัฒนาเว็บเพจการวางแผนพัฒนาเว็บเพจ

34. Example

35. ? ? ?

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

37. ออกแบบโดยสร้างเมนูเป็นรูปอยู่แถบซ้ายมือ แล้วใช้ frame เรียกข้อมูลมาแสดงบริเวณตรงกลาง

38. http://www.prapayneethai.com/th/culture/

39. http://thai.tourismthailand.org/

40. http://women.sanook.com/health/

41. องค์ประกอบของการออกแบบเว็บไซต์

42. องค์ประกอบของการออกแบบเว็บไซต์อย่างมีประสิทธิภาพองค์ประกอบของการออกแบบเว็บไซต์อย่างมีประสิทธิภาพ 1. ความเรียบง่าย (Simplicity) 2. ความสม่ำเสมอ (Consistency) 3. ความเป็นเอกลักษณ์ (Identity) 4. เนื้อหาที่มีประโยชน์ (Useful content) 5. มีลักษณะที่น่าสนใจ (Visual Appeal) 6. การใช้งานอย่างไม่จำกัด (Compatibility) 7. คุณภาพในการออกแบบ (Design Stability) 8. ระบบการใช้งานที่ถูกต้อง (Functional Stability)

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

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

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