การออกแบบและพัฒนาเว็บไซต์ 3901-2006 การออกแบบและพัฒนาเว็บไซต์ 3901-2006 จุดประสงค์รายวิชา เพื่อให้ - มีความเข้าใจหลักการออกแบบพัฒนา Web -สามารถออกแบบและพัฒนา Web -สามารถใช้ซอร์ฟแวร์เพื่อออกแบบและพัฒนา web ได้อย่างเหมาะสม - มีกิจนิสัยในการทำงานด้วยความประณีต รอบคอบและปลอดภัย ตระหนักถึงคุณภาพของงาน และมีจริยธรรมในงานอาชีพ เกณฑ์การให้คะแนน มี 4 ส่วน 100% 1. จิตพิสัย 20% 2. เก็บสะสมระหว่างเรียน 40% 3. สอบกลางภาค 20% 4. การสอบประมวลความรู้ 20%

คำที่ควรรู้จักก่อนสร้างเว็บไซต์ เว็บไซต์ (Website) คือ ชุดของข้อมูลที่ต้องนำเสนอบนระบบอินเตอร์เน็ต ประกอบด้วย เว็บเพจ (Web Page) ตั้งแต่ 1 หน้า ขึ้นไป เว็บเพจ (Webpage) คือ ไฟล์ HTML 1 ไฟล์ที่แสดงผลบนบราวเซอร์นั่นเอง โฮมเพจ(Homepage) คือ เว็บเพจหน้าแรกของเว็บไซต์ หรือเปรียบหน้าเหมือหน้าปกหนังสือ www.themegallery.com

ตัวอย่าง Homepage Website Webpage

คำที่ควรรู้จักก่อนสร้างเว็บไซต์ URL (Universal Resource Location) คือ มาตรฐานในการกำหนดที่อยู่ของเว็บไซต์ในเครือข่ายอินเทอร์เน็ต หรือเรียกอีกอย่างว่าที่อยู่ของเว็บไซต์ (Internet Address) เช่นhttp://www.hi.ac.th บราวเซอร์ (Browser) คือ โปรแกรมแสดงเว็บเพจหรือหน้าเว็บไซต์ที่ถูกสร้างขึ้นมาจากภาษา HTML เช่น Internet Explorer, Mozilla Firefox, Opera, Netscape www.themegallery.com

คำที่ควรรู้จักก่อนสร้างเว็บไซต์ (ต่อ) HTML(Hyper Text Markup Language)คือ ภาษามาตฐานที่ใช้ในการสร้างเว็บเพจ เพื่อนำไปแสดงบนบราวเซอร์ FTP (File Transfer Protocol) คือ โปรโตคอลหรือมาตรฐานรูปแบบหนึ่งที่ใช้ในการรับ-ส่งข้อมูลระหว่างเครื่องคอมพิวเตอร์ผ่านเครือข่ายอินเทอร์เน็ต www.themegallery.com

คำที่ควรรู้จักก่อนสร้างเว็บไซต์ (ต่อ) เว็บเซิร์ฟเวอร์ (Web server) คือ เครื่องคอมพิวเตอร์เครื่องหนึ่งในเครือข่ายอินเทอร์เน็ตที่ทำหน้าที่เก็บรวบรวมเว็บไซต์ต่าง ๆ เอาไว้ เพื่อให้ผู้ชมสามารถเข้ามาเปิดดูเว็บไซต์นั้นได้ ชื่อโดเมน (Domain name) คือ ชื่อที่ใช้อ้างถึงเว็บไซต์แทน IP Address เพื่อให้จดจำได้ง่าย โดยรูปแบบคือ ชื่อ.รหัสโดเมน www.themegallery.com

รู้จักรหัสโดเมน ใช้สำหรับ รหัสโดเมน ตัวอย่าง Pantip.com com Ucla.edu กลุ่มการค้าและเว็บไซต์ทั่วไป สถาบันการศึกษา หน่วยงานของรัฐที่ไม่ใช่หน่วยงานทางการทหาร หน่วงงานทางการทหาร หน่วยงานเกี่ยวกับเครือข่าย หน่วยงานที่ไม่หวังผลกำไร บริษัทที่จดทะเบียนในประเทศไทย ตัวอย่าง Pantip.com Ucla.edu Nasa.gov Army.mil Isp.net Unesco.org Infopress.co.th รหัสโดเมน com edu gov mil net org co.th www.themegallery.com

ส่วนประกอบของเว็บเพจ ส่วนหัว (Header) เมนู (Navigator) เนื้อหา (Contents) ส่วนท้าย (Footer)

หลักการออกแบบเว็บเพจ หลักการออกแบบ สามารถทำได้หลายระบบ ขึ้นอยู่กับลักษณะของข้อมูล ความชอบของผู้พัฒนา ตลอดจนกลุ่มเป้าหมาย ที่ต้องการนำเสนอ เช่น หากกลุ่มเป้าหมายเป็นเด็กวัยรุ่นและนำเสนอข้อมูลเกี่ยวกับ ความบันเทิง อาจจะออกแบบให้มีทิศทางการไหลของหน้าเว็บเพจ ที่หลากหลายให้ลูกเล่นได้มากกว่าเว็บที่นำเสนอให้กับผู้ใหญ่ หรือเว็บด้านวิชาการ www.themegallery.com

หลักการออกแบบเว็บเพจ (ต่อ) สามารถแบ่งได้ 3 ลักษณะ 1. แบบลำดับขั้น (Hierarchy) เป็นการจัดแสดงหน้าเว็บ เรียงตามลำดับกิ่งก้านแตกแขนงต่อเนื่องไปเหมือนต้นไม้กลับหัว www.themegallery.com

หลักการออกแบบเว็บเพจ (ต่อ) 2. แบบเชิงเส้น (Linear) เป็นการจัดแสดงหน้าเว็บเรียงต่อเนื่องไปในทิศทางเดียว www.themegallery.com

หลักการออกแบบเว็บเพจ (ต่อ) 3. แบบผสม (Combination) เป็นการจัดหน้าเว็บชนิดผสมระหว่างแบบลำดับขั้นและแบบเชิงเส้น www.themegallery.com

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

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

เวิลด์ไวด์เว็บ (World Wide Web : WWW) ประเภทของเว็บไซต์ มี ?

ประเภทของเว็บไซต์ เว็บท่า (Portal site)เว็บท่านั้นอาจเรียกอีกชื่อหนึ่งได้ว่าเว็บวาไรตี้ (variety web) หมายถึงเว็บที่ให้บริการต่างๆ ไว้มากมาย เว็บข่าว (News site)เว็บข่าวมักเป็นเว็บไซต์ที่สร้างขึ้นโดยองค์กรข่าวหรือสถาบัน สื่อสารมวลชนต่างๆ 3. เว็บข้อมูล (Information site)เว็บข้อมูลนั้นเป็นเว็บที่ให้บริการเกี่ยวกับการ สืบค้นข้อมูล ข่าวสาร 4. เว็บธุรกิจหรือการตลาด (Business/ Marketing site)เว็บธุรกิจหรือการตลาด เป็นเว็บไซต์ที่มักสร้างขึ้นโดยองค์กรธุรกิจต่างๆ มีจุดมุ่งหมายหลักในการประชาสัมพันธ์องค์กรและเพิ่มผลกำไรทางการค้า

ประเภทของเว็บไซต์ 5. เว็บการศึกษา (Education site)เว็บการศึกษามักเป็นเว็บที่สร้างขึ้นโดย สถาบันการศึกษาต่างๆ  6. เว็บบันเทิง (Entertainment site)เว็บบันเทิงนั้นมุ่งเสนอและให้บริการ ต่างๆ เพื่อเสริมสร้างความบันเทิง 7. เว็บองค์กรที่ไม่แสวงหาผลกำไร (None-profit organization site)เว็บประเภทนี้ มักจะเป็นเว็บที่สร้างขึ้นโดยกลุ่มบุคคลหรือองค์กรต่างๆ ที่มีนโยบายในการ สร้างสรรค์ที่ช่วยเหลือสังคม 8. เว็บส่วนตัว (personal site)เว็บส่วนตัวอาจเป็นเว็บของคนๆ เดียว เพื่อนฝูง หรือ ครอบครัวก็ได้