การเขียนเว็บไซต์ 
นางสาว จิราวัลย์ พรมพิลาด 
รหัส 5640248204 ว.5606 
สาขาวิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์และเทคโนโลยี 
มหาวิทยาลัยราชภัฏเลย ปีการศึกษา 2557
1.1 ความเป็นมาและความสาคัญของปัญหา 
เนื่องจากปัจจุบันเทคโนโลยีด้านเครือข่ายคอมพิวเตอร์ได้มีการพัฒนา 
ไปมาก มีการพูดถึงการทา Web site โดยการเขียนโปรแกรมด้วยภาษา 
ต่างๆ เช่น ภาษา HTML PHP เป็นต้น ส่งผลให้มีการพัฒนาเครือข่าย 
คอมพิวเตอร์ และได้มีบทบาทในทุกๆ ด้าน ไม่ว่าจะเป็นด้านการพาณิชย์ 
ธุรกรรมอิเล็กทรอนิกส์ ด้านการติดต่อสื่อสารและโทรคมนาคม ไม่เว้นแม้แต่ 
ด้านการศึกษา
1.2 วัตถุประสงค์ 
1. เพื่อศึกษาเรื่องการเขียนเว็บไซต์บนเว็บ 
2. เพื่อให้มีความรู้เกี่ยวกับการเขียนเว็บเพิ่มขึน้
1.3 ขอบเขตของการศึกษา 
1. ศึกษาทฤษฎีเกี่ยวกับทางด้านการเขียนเว็บไซต์ 
2. ศึกษาค้นคว้างานวิจัยในประเทศที่เกี่ยวกับการเขียนเว็บไซต์
1.4 อุปกรณ์และเครื่องมือ 
1. ฮาร์ดแวร์ 
- Hard Disk 500 GB 
- CPU Intel Core i5 
- RAM 4 GB 
2.ซอฟต์แวร์ 
- Microsoft Word 2010 
- Google Chrome 
- Internet Explorer
1.5 ประโยชน์ที่คาดว่าจะได้รับ 
1. สามารถรู้ถึงทฤษฎีการออกแบบเว็บไซต์ 
2. สามารถรู้และเข้าใจถึงโปรแกรมในการเขียน 
เว็บไซต์
1.6 คานิยามศัพท์เฉพาะ 
1. การเขียนเว็บ หมายถึง การสร้างเว็บไซต์ การแสดงผลของเว็บ 
จะอยู่บนบราวเซอร์ ผู้ใช้สามารถเข้าถึงได้ผ่านทางเครือข่ายอินเทอร์เน็ต 
2. Web browser หมายถึง โปรแกรมที่ใช้แปลภาษา html (interpreter) 
เช่น Internet Explorer, Firefox, Opera, etc. 
3. URL หมายถึง ที่อยู่ (Address) ของเว็บไซต์ เช่น www.hotmail.com เป็นต้น 
4. Server หมายถึง เครื่องคอมพิวเตอร์ที่ให้บริการต่างๆ เช่น Web Server จะให้บริกาเกี่ยวกับเว็บไซต์, Database Server จะให้บริการเกี่ยวกับการจัดการฐานข้อมูล เป็นต้5. Web Server หมายถึง เครื่องคอมพิวเตอร์หรือโปรแกรมซึ่งให้บริการเว็บไซต์ 
ผู้ใช้เรียกชมหน้าเว็บไซต์ได้โดยใช้โปรโตคอล HTTP ผ่านทางเว็บเบราว์เซอร์
2.1 ทฤษฎีการออกแบบเว็บเพจ 
การออกแบบและพัฒนาเว็บเพจ สามารถทาได้หลายรูปแบบ ขึน้อยู่กับ 
ลักษณะของข้อมูลที่จะนาเสนอของผู้พัฒนา ตลอดจนให้ตรงกลุ่มเป้าหมาย 
ที่ต้องการนาเสนอ เช่น หากกลุ่มเป้าหมายเป็นนักศึกษาและจะนาเสนอข้อมูล 
เกี่ยวกับ ความบันเทิง อาจจะออกแบบให้มี ทิศทางการไหลของหน้าเว็บ 
ที่มีเทคนิคที่หลากหลาย ได้มากกว่าเว็บที่นาเสนอด้านวิชาการ
ทฤษฎีการออกแบบเว็บเพจ สามารถแบ่งได้สามลักษณะ คือ 
1. แบบลาดับขัน้(Hierarchy) เป็นการจัดแสดงหน้าเว็บ เรียงตามลาดับ 
กิ่งก้านแตกแขนงต่อเนื่องไปเหมือนต้นไม้กลับหัว 
2. แบบเชิงเส้น (Linear) เป็นการจัดแสดงหน้าเว็บเรียงต่อเนื่องไปในทิศทางเดียว 
3. แบบผสม (Combination) เป็นการจัดหน้าเว็บชนิดผสมระหว่างแบบลาดับขัน้ 
และแบบเชิงเส้น
2.2 ทฤษฎีสีกับการออกแบบเว็บไซต์ 
การสร้างสีสันบนหน้าเว็บเป็นสิ่งที่สื่อความหมายของเว็บไซต์ได้อย่างชัดเจน 
การเลือกใช้สีให้เหมาะสม กลมกลืน ไม่เพียงแต่จะสร้างความพึงพอใจให้กับผู้ใช้ 
แต่ยังสามารถทาให้เห็นถึงความแตกต่างระหว่างเว็บไซต์ได้ สีเป็นองค์ประกอบหลัก 
สาหรับการตกแต่งเว็บ จึงจาเป็นอย่างยิ่งที่จะต้องทาความเข้าใจเกี่ยวกับการใช้สี
โทนสีสามารถแบ่งออกเป็น 3 กลุ่ม คือ 
1. สีโทนร้อน (Warm Colors) เป็นกลุ่มสีที่แสดงถึงความสุข ความปลอบโยน 
ความอบอุ่น และดึงดูดใจ สีกลุ่มนีเ้ป็นกลุ่มสีที่ช่วยให้หายจากความเฉื่อยชา 
มีชีวิตชีวามากยิ่งขึน้ 
2. สีโทนเย็น (Cool Colors) แสดงถึงความที่ดูสุภาพ อ่อนโยน เรียบร้อย 
เป็นกลุ่มสีที่มีคนชอบมากที่สุด สามารถโน้มนาวในระยะไกลได้ 
3. สีโทนกลาง (Neutral Colors) สีที่เป็นกลาง ประกอบด้วย สีดา สีขาว สีเทา 
และสีนา้ตาล กลุ่มสีเหล่านีคื้อ สีกลางที่สามารถนาไปผสมกับสีอื่นๆ เพื่อให้เกิดสีกลางขึน้มา
2.3 ทฤษฎีการออกแบบเว็บไซต์ 
1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก 
2. ความสม่าเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทัง้เว็บไซต์ เช่น รูปแบบของหน้า 
3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคานึงถึงอัตลักษณ์ 
เพราะรูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์ขององค์กรนัน้ๆ 
4. เนือ้หาที่มีประโยชน์ เนือ้หาเป็นสิ่งที่สาคัญทที่สุดในเว็บไซต์ 
5. ระบบเนวิเกชันที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก 
6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์ต้องมีความสัมพันธ์กับคุณภาพ 
ขององค์ประกอบต่างๆ 
7. คุณภาพในการออกแบบและการเรียบเรียงเนือ้หาอย่างรอบคอบสามารถ 
สร้างความรู้สึกว่าเว็บไซต์มีคุณภาพ ถูกต้องและเชื่อถือได้
2.4 ทฤษฎีโปรแกรมที่ใช้เขียนเว็บไซต์ 
1. โปรแกรม Dreamweaver CS6 
เป็นเครื่องมือในการสร้างเว็บเพ็จที่มีประสิทธิภาพสูงและการออกแบบเว็บเพจ 
1. สนับสนุนการทางานแบบ WYSIWYG หมายความว่า อะไรก็ตามที่เราทา 
บนหน้าจอ Dreamweaver CS6 ก็จะปรากฏผลแบบเดียวกันบนเว็บเพ็จ 
2. มีเครื่องมือในการสร้างรูปแบบหน้าจอเว็บเพ็จและมีความในการยืดหยุ่นสูง 
3. สนับสนุนภาษาสคริปต่างๆ ทัง้ฝั่งไคลเอ็นต์และเชิฟเวอร์เช่น Java, Asp
2. โปรแกรม Adobe Photoshop CS6 
เป็นโปรแกรมที่เกี่ยวกับการสร้างกราฟิกให้ออกมาอย่างสวยงาม 
ไมว่่าจะเป็นการสร้างตัวอักษรต่างๆ และอีกทัง้ยังนิยมมาแต่งภาพอีกด้วย
3. โปรแกรม Adobe Flash CS6 
เป็นโปรแกรมที่เว็บบราวเซอร์สามารถแสดงสื่อนาเสนอของมันได้ มีความสามรถ 
ในการลองรับภาพแบบเวกเตอร์ และบนแบบเรสเตอร์และยังรองรับระบบเสียงและวีดีโอ 
แบบสเตอริโอได้อีกด้วย 
4. ทฤษฎีฐานข้อมูล 
ฐานข้อมูล ประกอบด้วยรายละเอียดของข้อมูลที่เกี่ยวข้องกัน ซึ่งถูกนามาใช้ 
ในงานด้านต่างๆ เช่น ด้านธนาคาร จะมีฐานข้อมูลที่เกี่ยวข้องกับข้อมูลเงินฝาก 
ข้อมูลเหล่านีจ้ะถูกจัดเก็บไว้อย่างมีระบบ และมีความสัมพันธ์กัน เพื่อประโยชน์ 
ในการจัดการและรียกใช้ข้อมูลได้อย่างมีประสิทธิภาพ
งานวิจัยที่เกี่ยวข้อง 
ระบบการสืบค้นผลงานวิจัยและโครงงานคอมพิวเตอร์ธุรกิจ วิทยาลัยราช 
พฤกษ์ 
ผู้วิจัย ศิริพร อ่วมมีเพียร 
การพัฒนาระบบสืบค้นผลงานวิจัยมีวัตถุประสงค์เพื่อเก็บรวมรวมรายละเอียด 
ข้อมูลผลงาน วิจัยออกมาเป็นระบบงานสืบค้นข้อมูลบนเครือข่ายอินเทอร์เน็ต ทาให้ 
การสืบค้นผลงานวิจัยมีความ สะดวกและรวดเร็วมากยิ่งขึน้ เพราะสามารถสืบค้น 
ได้จากคาที่เกี่ยวข้องในผลงานวิจัยนัน้ๆ
จบการนาเสนอ 
ขอบคุณค่ะ
บรรณานุกรม 
 ศิริพร อ่วมมีเพียร. (2551). ระบบการสืบค้นผลงานวิจัยและโครงงานคอมพิวเตอร์ธุรกิจ 
วิทยาลัยราชพฤกษ์. 
 หลักการทางานของโปรแกรมบนอินเตอร์เน็ต. ค้นเมื่อ 20 ตุลาคม 2557, จาก 
https://sites.google.com/site/klumtee10/home/hlak-kar-thangan 
 อาสาสมัครวกิิเดีย ภาษา JAVA การแก้ไขครัง้ล่าสุด: 19 พฤศจิกายน 2014 14:17 
UTC 
 วิกิพีเดีย สารานุกรมเสรี. ภาษาPHP การแก้ไขครัง้ล่าสุด: 9 มิถุนายน 2014, 06:31 
UTC 
 นางสาวอนงค์ หลอดแก้ว โครงสร้างพืน้ฐานของ HTML นักวิชาการคอมพิวเตอร์ / 
อาจารย์พิเศษวิทยาลัยชุมชนยโสธร 
 https://sites.google.comภาษา SQL การแก้ไขครัง้ล่าสุด: 10 ส.ค. 
2555 10:08

ส มมมนาแก ไข หล_งนำเสนอ

  • 1.
    การเขียนเว็บไซต์ นางสาว จิราวัลย์พรมพิลาด รหัส 5640248204 ว.5606 สาขาวิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์และเทคโนโลยี มหาวิทยาลัยราชภัฏเลย ปีการศึกษา 2557
  • 2.
    1.1 ความเป็นมาและความสาคัญของปัญหา เนื่องจากปัจจุบันเทคโนโลยีด้านเครือข่ายคอมพิวเตอร์ได้มีการพัฒนา ไปมาก มีการพูดถึงการทา Web site โดยการเขียนโปรแกรมด้วยภาษา ต่างๆ เช่น ภาษา HTML PHP เป็นต้น ส่งผลให้มีการพัฒนาเครือข่าย คอมพิวเตอร์ และได้มีบทบาทในทุกๆ ด้าน ไม่ว่าจะเป็นด้านการพาณิชย์ ธุรกรรมอิเล็กทรอนิกส์ ด้านการติดต่อสื่อสารและโทรคมนาคม ไม่เว้นแม้แต่ ด้านการศึกษา
  • 3.
    1.2 วัตถุประสงค์ 1.เพื่อศึกษาเรื่องการเขียนเว็บไซต์บนเว็บ 2. เพื่อให้มีความรู้เกี่ยวกับการเขียนเว็บเพิ่มขึน้
  • 4.
    1.3 ขอบเขตของการศึกษา 1.ศึกษาทฤษฎีเกี่ยวกับทางด้านการเขียนเว็บไซต์ 2. ศึกษาค้นคว้างานวิจัยในประเทศที่เกี่ยวกับการเขียนเว็บไซต์
  • 5.
    1.4 อุปกรณ์และเครื่องมือ 1.ฮาร์ดแวร์ - Hard Disk 500 GB - CPU Intel Core i5 - RAM 4 GB 2.ซอฟต์แวร์ - Microsoft Word 2010 - Google Chrome - Internet Explorer
  • 6.
    1.5 ประโยชน์ที่คาดว่าจะได้รับ 1.สามารถรู้ถึงทฤษฎีการออกแบบเว็บไซต์ 2. สามารถรู้และเข้าใจถึงโปรแกรมในการเขียน เว็บไซต์
  • 7.
    1.6 คานิยามศัพท์เฉพาะ 1.การเขียนเว็บ หมายถึง การสร้างเว็บไซต์ การแสดงผลของเว็บ จะอยู่บนบราวเซอร์ ผู้ใช้สามารถเข้าถึงได้ผ่านทางเครือข่ายอินเทอร์เน็ต 2. Web browser หมายถึง โปรแกรมที่ใช้แปลภาษา html (interpreter) เช่น Internet Explorer, Firefox, Opera, etc. 3. URL หมายถึง ที่อยู่ (Address) ของเว็บไซต์ เช่น www.hotmail.com เป็นต้น 4. Server หมายถึง เครื่องคอมพิวเตอร์ที่ให้บริการต่างๆ เช่น Web Server จะให้บริกาเกี่ยวกับเว็บไซต์, Database Server จะให้บริการเกี่ยวกับการจัดการฐานข้อมูล เป็นต้5. Web Server หมายถึง เครื่องคอมพิวเตอร์หรือโปรแกรมซึ่งให้บริการเว็บไซต์ ผู้ใช้เรียกชมหน้าเว็บไซต์ได้โดยใช้โปรโตคอล HTTP ผ่านทางเว็บเบราว์เซอร์
  • 8.
    2.1 ทฤษฎีการออกแบบเว็บเพจ การออกแบบและพัฒนาเว็บเพจสามารถทาได้หลายรูปแบบ ขึน้อยู่กับ ลักษณะของข้อมูลที่จะนาเสนอของผู้พัฒนา ตลอดจนให้ตรงกลุ่มเป้าหมาย ที่ต้องการนาเสนอ เช่น หากกลุ่มเป้าหมายเป็นนักศึกษาและจะนาเสนอข้อมูล เกี่ยวกับ ความบันเทิง อาจจะออกแบบให้มี ทิศทางการไหลของหน้าเว็บ ที่มีเทคนิคที่หลากหลาย ได้มากกว่าเว็บที่นาเสนอด้านวิชาการ
  • 9.
    ทฤษฎีการออกแบบเว็บเพจ สามารถแบ่งได้สามลักษณะ คือ 1. แบบลาดับขัน้(Hierarchy) เป็นการจัดแสดงหน้าเว็บ เรียงตามลาดับ กิ่งก้านแตกแขนงต่อเนื่องไปเหมือนต้นไม้กลับหัว 2. แบบเชิงเส้น (Linear) เป็นการจัดแสดงหน้าเว็บเรียงต่อเนื่องไปในทิศทางเดียว 3. แบบผสม (Combination) เป็นการจัดหน้าเว็บชนิดผสมระหว่างแบบลาดับขัน้ และแบบเชิงเส้น
  • 10.
    2.2 ทฤษฎีสีกับการออกแบบเว็บไซต์ การสร้างสีสันบนหน้าเว็บเป็นสิ่งที่สื่อความหมายของเว็บไซต์ได้อย่างชัดเจน การเลือกใช้สีให้เหมาะสม กลมกลืน ไม่เพียงแต่จะสร้างความพึงพอใจให้กับผู้ใช้ แต่ยังสามารถทาให้เห็นถึงความแตกต่างระหว่างเว็บไซต์ได้ สีเป็นองค์ประกอบหลัก สาหรับการตกแต่งเว็บ จึงจาเป็นอย่างยิ่งที่จะต้องทาความเข้าใจเกี่ยวกับการใช้สี
  • 11.
    โทนสีสามารถแบ่งออกเป็น 3 กลุ่มคือ 1. สีโทนร้อน (Warm Colors) เป็นกลุ่มสีที่แสดงถึงความสุข ความปลอบโยน ความอบอุ่น และดึงดูดใจ สีกลุ่มนีเ้ป็นกลุ่มสีที่ช่วยให้หายจากความเฉื่อยชา มีชีวิตชีวามากยิ่งขึน้ 2. สีโทนเย็น (Cool Colors) แสดงถึงความที่ดูสุภาพ อ่อนโยน เรียบร้อย เป็นกลุ่มสีที่มีคนชอบมากที่สุด สามารถโน้มนาวในระยะไกลได้ 3. สีโทนกลาง (Neutral Colors) สีที่เป็นกลาง ประกอบด้วย สีดา สีขาว สีเทา และสีนา้ตาล กลุ่มสีเหล่านีคื้อ สีกลางที่สามารถนาไปผสมกับสีอื่นๆ เพื่อให้เกิดสีกลางขึน้มา
  • 12.
    2.3 ทฤษฎีการออกแบบเว็บไซต์ 1.ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก 2. ความสม่าเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทัง้เว็บไซต์ เช่น รูปแบบของหน้า 3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคานึงถึงอัตลักษณ์ เพราะรูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์ขององค์กรนัน้ๆ 4. เนือ้หาที่มีประโยชน์ เนือ้หาเป็นสิ่งที่สาคัญทที่สุดในเว็บไซต์ 5. ระบบเนวิเกชันที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก 6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์ต้องมีความสัมพันธ์กับคุณภาพ ขององค์ประกอบต่างๆ 7. คุณภาพในการออกแบบและการเรียบเรียงเนือ้หาอย่างรอบคอบสามารถ สร้างความรู้สึกว่าเว็บไซต์มีคุณภาพ ถูกต้องและเชื่อถือได้
  • 13.
    2.4 ทฤษฎีโปรแกรมที่ใช้เขียนเว็บไซต์ 1.โปรแกรม Dreamweaver CS6 เป็นเครื่องมือในการสร้างเว็บเพ็จที่มีประสิทธิภาพสูงและการออกแบบเว็บเพจ 1. สนับสนุนการทางานแบบ WYSIWYG หมายความว่า อะไรก็ตามที่เราทา บนหน้าจอ Dreamweaver CS6 ก็จะปรากฏผลแบบเดียวกันบนเว็บเพ็จ 2. มีเครื่องมือในการสร้างรูปแบบหน้าจอเว็บเพ็จและมีความในการยืดหยุ่นสูง 3. สนับสนุนภาษาสคริปต่างๆ ทัง้ฝั่งไคลเอ็นต์และเชิฟเวอร์เช่น Java, Asp
  • 14.
    2. โปรแกรม AdobePhotoshop CS6 เป็นโปรแกรมที่เกี่ยวกับการสร้างกราฟิกให้ออกมาอย่างสวยงาม ไมว่่าจะเป็นการสร้างตัวอักษรต่างๆ และอีกทัง้ยังนิยมมาแต่งภาพอีกด้วย
  • 15.
    3. โปรแกรม AdobeFlash CS6 เป็นโปรแกรมที่เว็บบราวเซอร์สามารถแสดงสื่อนาเสนอของมันได้ มีความสามรถ ในการลองรับภาพแบบเวกเตอร์ และบนแบบเรสเตอร์และยังรองรับระบบเสียงและวีดีโอ แบบสเตอริโอได้อีกด้วย 4. ทฤษฎีฐานข้อมูล ฐานข้อมูล ประกอบด้วยรายละเอียดของข้อมูลที่เกี่ยวข้องกัน ซึ่งถูกนามาใช้ ในงานด้านต่างๆ เช่น ด้านธนาคาร จะมีฐานข้อมูลที่เกี่ยวข้องกับข้อมูลเงินฝาก ข้อมูลเหล่านีจ้ะถูกจัดเก็บไว้อย่างมีระบบ และมีความสัมพันธ์กัน เพื่อประโยชน์ ในการจัดการและรียกใช้ข้อมูลได้อย่างมีประสิทธิภาพ
  • 16.
    งานวิจัยที่เกี่ยวข้อง ระบบการสืบค้นผลงานวิจัยและโครงงานคอมพิวเตอร์ธุรกิจ วิทยาลัยราช พฤกษ์ ผู้วิจัย ศิริพร อ่วมมีเพียร การพัฒนาระบบสืบค้นผลงานวิจัยมีวัตถุประสงค์เพื่อเก็บรวมรวมรายละเอียด ข้อมูลผลงาน วิจัยออกมาเป็นระบบงานสืบค้นข้อมูลบนเครือข่ายอินเทอร์เน็ต ทาให้ การสืบค้นผลงานวิจัยมีความ สะดวกและรวดเร็วมากยิ่งขึน้ เพราะสามารถสืบค้น ได้จากคาที่เกี่ยวข้องในผลงานวิจัยนัน้ๆ
  • 17.
  • 18.
    บรรณานุกรม  ศิริพรอ่วมมีเพียร. (2551). ระบบการสืบค้นผลงานวิจัยและโครงงานคอมพิวเตอร์ธุรกิจ วิทยาลัยราชพฤกษ์.  หลักการทางานของโปรแกรมบนอินเตอร์เน็ต. ค้นเมื่อ 20 ตุลาคม 2557, จาก https://sites.google.com/site/klumtee10/home/hlak-kar-thangan  อาสาสมัครวกิิเดีย ภาษา JAVA การแก้ไขครัง้ล่าสุด: 19 พฤศจิกายน 2014 14:17 UTC  วิกิพีเดีย สารานุกรมเสรี. ภาษาPHP การแก้ไขครัง้ล่าสุด: 9 มิถุนายน 2014, 06:31 UTC  นางสาวอนงค์ หลอดแก้ว โครงสร้างพืน้ฐานของ HTML นักวิชาการคอมพิวเตอร์ / อาจารย์พิเศษวิทยาลัยชุมชนยโสธร  https://sites.google.comภาษา SQL การแก้ไขครัง้ล่าสุด: 10 ส.ค. 2555 10:08