การออกแบบและพัฒนาเว็บไซต์

งานนำเสนอเรื่อง: "การออกแบบและพัฒนาเว็บไซต์"— ใบสำเนางานนำเสนอ:

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

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

3 ตัวอย่าง Homepage Website Webpage

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

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

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

7 รู้จักรหัสโดเมน ใช้สำหรับ รหัสโดเมน ตัวอย่าง 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

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

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

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

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

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

13 รูปแบบของเว็บไซต์ 2. Dynamic Website 1. Static Website
แบ่งได้เป็น 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 เวิลด์ไวด์เว็บ (World Wide Web : WWW)
ประเภทของเว็บไซต์ มี ?

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

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