การสร้างเว็บไซต์การสร้างเว็บไซต์ระบบติดตามผู้สำเร็จการศึกษาสาขาวิชาคอมพิวเตอร์ธุรกิจ

การสร้างเวบ็ ไซตร์ ะบบติดตามผู้สาเรจ็ การศกึ ษาสาขาวิชาคอมพิวเตอรธ์ รุ กิจ Creating a Tracking Systems Website for Graduates of Business Computer นายสิทธศิ ักดิ์ ชนรนิ ทร์ นางสาวอินทอุ ร อ่นุ อารีย์กุล โครงการนี้เป็นสว่ นหนงึ่ ของการศกึ ษาตามหลักสูตรประกาศนยี บตั รวชิ าชีพชัน้ สงู .(ปวส.) สาขาวชิ าคอมพวิ เตอร์ธุรกิจ วทิ ยาลัยการอาชีพนวมินทราชนิ ีมุกดาหาร ปกี ารศกึ ษา 2563

การสร้างเว็บไซตร์ ะบบตดิ ตามผสู้ าเร็จการศกึ ษาสาขาวชิ าคอมพวิ เตอรธ์ ุรกจิ Creating a Tracking Systems Website for Graduates of Business Computer นายสิทธศิ ักด์ิ ชนรินทร์ นางสาวอนิ ทุอร อุ่นอารีย์กุล โครงการนี้เปน็ ส่วนหน่ึงของการศกึ ษาตามหลกั สตู รประกาศนยี บัตรวชิ าชีพช้ันสงู .(ปวส.) สาขาวิชาคอมพิวเตอร์ธรุ กิจ วิทยาลยั การอาชีพนวมนิ ทราชนิ ีมกุ ดาหาร ปีการศึกษา 2563





ค หัวข้อโครงการ การสร้างเวบ็ ไซต์ระบบติดตามผสู้ าเรจ็ การศึกษาสาขาวชิ าคอมพิวเตอร์ธุรกจิ Creating a Tracking Systems Website for Graduates of Business Computer ผู้ดาเนนิ โครงการ นายสทิ ธศิ ักด์ิ ชนรินทร์ รหสั ประจาตวั นกั ศึกษา 6232040009 นางสาวอินทุอร อนุ่ อารีย์กลุ รหสั ประจาตวั นักศึกษา 6232040011 ครทู ปี่ รกึ ษา นางประเสริฐศรี สทุ ธิพันธ์ ครผู ู้สอน นางประเสริฐศรี สุทธิพนั ธ์ สาขาวชิ า คอมพวิ เตอรธ์ ุรกิจ ปีการศกึ ษา 2563 …………………………………………………………………………………………………..………………………………………… บทคัดย่อ โครงการการสร้างเว็บไซต์ระบบติดตามผู้สาเร็จการศึกษาสาขาวิชาคอมพิวเตอร์ธุรกิจ จัดทาขึ้นโดยมีวัตถุประสงค์ 1) เพ่ือสร้างเว็บไซต์ระบบติดตามของผู้สาเร็จการศึกษาสาขาวิชา คอมพิวเตอร์ธุรกิจ 2) เพื่อเป็นช่องทางการติดตามของผู้สาเร็จการศึกษาสาขาวิชาคอมพิวเตอร์ธุรกิจ 3) เพ่ือศึกษาความพึงพอใจผู้ใช้ที่มีต่อเว็บไซต์ระบบติดตามผู้สาเร็จการศึกษาของสาขาวิชา คอมพิวเตอร์ธุรกิจ กลุ่มตัวอย่างในการวิจัยครั้งนี้ ประชากรและกลุ่มตัวอย่างเป็นผู้บริหาร บุคลากร และนักเรียน นักศึกษาสาขาวิชาคอมพิวเตอร์ธุรกิจ วิทยาลัยการอาชีพนวมินทราชินีมุกดาหาร จานวน 129 คน ได้มาโดยวิธีการสุ่มตัวอย่างจากขนาดของกลุ่มประชากรตามทฤษฎีเครซี่และ มอร์แกน (Krejcie and Morgan) เครื่องมือท่ีใช้ในการวิจัยครั้งนี้ได้แก่ 1) เว็บไซต์ระบบติดตาม ผู้สาเร็จการศึกษาสาขาวิชาคอมพิวเตอร์ธุรกิจ ที่ผู้วิจัยสร้างข้ึน 2) ความพึงพอใจของกลุ่มตัวอย่าง ที่มีต่อเว็บไซต์ระบบติดตามผู้สาเร็จการศึกษาสาขาวิชาคอมพิวเตอร์ธุรกิจ สถิติที่ใช้ในการวิจัยครั้งน้ี ไดแ้ ก่ ค่าเฉลี่ย และคา่ ส่วนเบย่ี งเบนมาตรฐาน ผลของการสร้างเว็บไซต์ระบบติดตามผู้สาเร็จการศึกษาพบว่าเว็บไซต์สามารถเก็บ รวบรวมข้อมลู ของผสู้ าเร็จการศึกษาสาขาวชิ าคอมพิวเตอร์ธรุ กิจได้และเพิ่มช่องติดต่อระหว่างผ้สู าเร็จ การศกึ ษากับสาขาวิชาได้ ผลการวิจัยพบว่า ความพึงพอใจของกลุ่มตัวอย่างท่ีมีต่อเว็บไซต์ระบบติดตามผู้สาเร็จ การศึกษาสาขาวิชาคอมพิวเตอร์ธุรกิจ ทั้ง 3 ด้าน มีระดับความพึงพอใจ อยู่ในระดับดี มีค่าเฉลยี่ เท่ากบั 4.16 และค่าเบย่ี งเบนมาตรฐานเทา่ กับ 0.55

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

สารบัญ จ ใบรบั รองโครงการ หน้า ใบแห่งลิขสิทธิ์ ก บทคดั ย่อ ข กิตติกรรมประกาศ ค สารบญั ง สารบัญตาราง จ สารบญั ภาพ ช ซ บทที่ 1 บทนา 1.1 ความเปน็ มาและความสาคัญของปัญหา 1 1.2 วตั ถปุ ระสงคข์ องโครงการ 1 1.3 เปา้ หมายและขอบเขตของโครงการ 2 1.4 แผนงานและระยะเวลาดาเนินการ 3 1.5 ประโยชนท์ ค่ี าดวา่ จะได้รับ 3 1.6 นยิ ามศพั ทเ์ ฉพาะ 4 บทท่ี 2 ทฤษฎีทีเ่ กี่ยวข้อง 5 2.1 ความรเู้ บือ้ งตน้ เกย่ี วกับเว็บไซต์ 8 2.2 การออกแบบและพฒั นาเว็บไซต์ 15 2.3 การออกแบบและพฒั นาระบบ 46 2.4 การเผยแพร่เว็บไซตข์ นึ้ สู่ระบบอนิ เทอรเ์ น็ต 48 2.5 งานวจิ ยั ที่เกยี่ วข้อง 51 บทที่ 3 วิธีดาเนนิ โครงการ 52 3.1 ประชากรและกลุ่มตัวอย่าง 53 3.2 เคร่อื งมือท่ใี ช่ในการพัฒนาระบบ/วิจยั 53 3.3 แผนการดาเนนิ งาน 54 3.4 การศึกษาระบบงานเดมิ 54 3.5 การวเิ คราะห์ความตอ้ งการของผู้ใช้ 3.6 ข้นั ตอนการดาเนนิ งานสรา้ งเวบ็ ไซต์

สารบัญ (ต่อ) ฉ บทท่ี 4 ผลการวิเคราะหข์ ้อมูล หน้า 4.1 ผลการพัฒนาระบบ 4.2 ผลการวเิ คราะหข์ ้อมูล 59 64 บทที่ 5 สรุปผล อภิปรายผล และข้อเสนอแนะ 5.1 สรปุ ผลการศึกษา 69 5.2 อภิปรายผล 71 5.3 ขอ้ เสนอแนะ 71 บรรณานกุ รม 72 ภาคผนวก 73 74 ภาคผนวก ก แบบเสนอเค้าโครงโครงการ 87 ภาคผนวก ข รายงานการพบครูท่ีปรกึ ษาโครงการ 89 ภาคผนวก ค แบบประเมนิ ความพงึ พอใจ 92 ภาคผนวก ง แบบประเมนิ ความพึงพอใจออนไลน์ 97 ภาคผนวก จ เอกสารเผยแพรผ่ ลงานโครงการ 99 ภาคผนวก ฉ คมู่ อื การใช้งานเวบ็ ไซต์ 104 ภาคผนวก ช ตารางแสดงผลการวเิ คราะห์ข้อมูลด้วยโปรแกรมทางสถติ ิ 108 ภาคผนวก ซ ภาพกิจกรรมการดาเนนิ โครงการ 110 ภาคผนวก ฌ ประวัติผู้จัดทาโครงการ

ช สารบญั ตาราง ตารางที่ หน้า ตารางที่ 1.1 ตารางแสดงวธิ ีดาเนินงาน 3 ตารางท่ี 2.1 ความรูส้ ึกเก่ียวกบั สี 10 ตารางที่ 2.2 แสดงขัน้ สีท่ี 1 แม่สี 11 ตารางที่ 2.3 แสดงขน้ั สีที่ 2 การผสมสี 11 ตารางท่ี 2.4 ตารางอธิบายเครอ่ื งมือTool ต่างๆ 19 ตารางที่ 2.5 ตารางอธบิ ายเครื่องมือ Tool ตา่ งๆ (ต่อ) 20 ตารางที่ 2.6 ตารางอธิบายเครือ่ งมือTool ตา่ งๆ (ต่อ) 21 ตารางที่ 2.7 ตารางอธบิ ายเคร่ืองมือในแถบ Document Toolba 35 ตารางท่ี 2.8 ตารางอธิบายเครอื่ งมือในแถบ Document Toolbar (ตอ่ ) 36 ตารางที่ 4.1 ทดสอบการทางานหน้าแรก 60 ตารางท่ี 4.2 ทดสอบการทางานหน้าหลัก 61 ตารางท่ี 4.3 ทดสอบการทางานหน้าผูจ้ ัดทาเวบ็ ไซต์ 61 ตารางที่ 4.4 ทดสอบการทางานหนา้ เขา้ สรู่ ะบบ 62 ตารางท่ี 4.5 ทดสอบการทางานหน้าสาหรับเจา้ หนา้ ที่ 63 ตารางท่ี 4.6 ทดสอบการทางานหนา้ ภาพกิจกรรม 63 ตารางท่ี 4.7 ค่ารอ้ ยละของขอ้ มูลท่ัวไปของผ้ตู อบแบบประเมนิ 64 ตารางที่ 4.7 คา่ ร้อยละของข้อมูลท่ัวไปของผตู้ อบแบบประเมนิ (ต่อ) 65 ตารางที่ 4.8 แสดงค่าคะแนนเฉลยี่ และส่วนเบีย่ งเบนมาตรฐาน ดา้ นท่ี 1 ด้านเนื้อหา 66 ของเว็บไซต์ระบบติดตามผ้สู าเรจ็ การศกึ ษาสาขาวชิ าคอมพิวเตอรธ์ รุ กิจ ตารางท่ี 4.9 แสดงคา่ คะแนนเฉลยี่ และสว่ นเบ่ียงเบนมาตรฐาน ดา้ นท่ี 2 ด้านการออกแบบ 67 และการจดั รปู แบบเวบ็ ไซตร์ ะบบติดตามผสู้ าเรจ็ การศกึ ษาสาขาวิชาคอมพวิ เตอรธ์ รุ กจิ ตารางท่ี 4.10 แสดงค่าคะแนนเฉลี่ยและสว่ นเบยี่ งเบนมาตรฐาน ดา้ นท่ี 3 ด้านการนาไปใช้ 67

สารบัญรปู ซ รูปที่ หน้า รปู ท่ี 2.1 วงจรสี 12 รูปท่ี 2.2 ตัวอย่างการเอาสีท่ตี ดั กนั 13 รูปท่ี 2.3 เก้าอ้ีหลากสี 14 รปู ท่ี 2.4 หมวกหลากสี 14 รูปที่ 2.5 แสดงเข้าไปยังโฟลเดอรข์ อง Photoshop ตามภาพ ดับเบล้ิ คลกิ Set-up 15 รปู ที่ 2.6 แสดงการตรวจสอบก่อนทาการติดต้ังโปรแกรม 15 รปู ที่ 2.7 แสดงโปรแกรมตรวจสอบเสร็จแลว้ จะเขา้ สูห่ นา้ จอ เลอื ก Try 16 รูปท่ี 2.8 แสดงการกรอก Serial Number แล้วคลกิ ทปี่ ุ่ม คลกิ Accept 16 รปู ท่ี 2.9 แสดงการเลือกการติดตั้งของโปรแกรม ใหเ้ ลือก Installs 16 (สีฟ้า : คอื การติดตงั้ แบบ 64 bit สเี หลอื ง : คือการติดตงั้ เเบบ 32 bit) 17 รปู ที่ 2.10 แสดงหน้าการโหลดของโปรแกรม 17 รปู ที่ 2.11 แสดงการเสรจ็ ส้ินการตดิ ตัง้ โปรเเกรม Adobe Photoshop CS6 18 รูปท่ี 2.12 แสดงข้ันตอนการเขา้ สโู่ ปรแกรม Adobe Photoshop CS6 18 รปู ท่ี 2.13 แสดงหน้าต่างโปรแกรม Adobe Photoshop CS6 18 รูปท่ี 2.14 แสดงหนา้ จอหลักการทางานของโปรแกรม Adobe Photoshop CS6 19 รูปท่ี 2.15 แสดงเครอ่ื งมือต่างๆ (Toolbox) Adobe Photoshop CS6 22 รปู ท่ี 2.16 แสดงการเปดิ ไฟลภ์ าพ (Open) 22 รูปท่ี 2.17 แสดงการเปิดไฟล์ภาพ (Open) 22 รปู ที่ 2.18 การสร้างไฟลใ์ หม่ (New) 23 รปู ที่ 2.19 แสดงการกาหนดขนาดของกระดาษ 24 รูปท่ี 2.20 แสดงการบนั ทึกข้อมูลลงบนไฟล์ (Save) 25 รปู ที่ 2.21 แสดงการบันทึกข้อมูลลงบนไฟล์ (Save) 26 รูปที่ 2.22 แสดงการปรบั ค่าความสว่าง/ความคมชัด 26 รปู ท่ี 2.23 แสดงหน้าต่าง User Account Control 27 รูปท่ี 2.24 แสดงหน้าต่าง Microsoft Software License Terms 27 รปู ที่ 2.25 แสดงหนา้ ตา่ ง Choose the installation 28 รูปท่ี 2.26 แสดงหนา้ ต่าง Installation Progress 28 รปู ท่ี 2.27 แสดงหนา้ ต่าง Successfully Installed 29 รูปที่ 2.28 หนา้ ตา่ ง Office Professional Plus 2010

ฌ สารบญั รปู (ตอ่ ) รปู ที่ หนา้ รปู ที่ 2.29 แสดงการเปดิ โฟลเดอรโ์ ปรแกรม Adobe Dreamweaver CS6 29 รปู ท่ี 2.30 แสดงการดบั เบ้ิลคลิกที่ไฟล์ Set-up.exe จากนน้ั โปรแกรมอ้างมีการแจง้ เตือน 30 ใหเ้ รา restart เราเลือก Ignore เพอ่ื ดาเนินการต่อ ดังรูป รปู ท่ี 2.31 แสดงโปรแกรมจะทาการตรวจสอบก่อนทาการติดตงั้ โปรแกรม 30 รปู ท่ี 2.32 แสดงเม่ือโปรแกรมตรวจสอบเสร็จแล้ว จะเขา้ สหู่ น้าจอขอ้ กาหนด 30 ในการตดิ ตงั้ โปรแกรมให้เราคลิก Accept รูปที่ 2.33 แสดงการกรอก Serial Number แล้วคลิกท่ีปุ่ม Next 31 รปู ท่ี 2.34 แสดงจะเข้าสหู่ นา้ Option ของโปรแกรม ให้เลอื ก Installs 31 รปู ที่ 2.35 แสดงรอใหโ้ ปรแกรมติดตั้งจนเสรจ็ 31 รปู ที่ 2.36 แสดงหนา้ เมอื่ ตดิ ตง้ั เสรจ็ จะปรากฏหน้าจอดังภาพ ใหเ้ ราคลิก Close 32 รปู ท่ี 2.37 แสดงหน้าตา่ งการเปดิ โปรแกรม Dreamweaver โดยเข้าไปท่ี 32 เมนู Start > Apps > Adobe Dreamweaver CS6 รปู ท่ี 2.38 แสดงเมือ่ เปดิ โปรแกรมครง้ั แรก จะพบหนา้ จอดงั ภาพ ใหค้ ลิก Select All >> OK 32 รปู ที่ 2.39 แสดงหนา้ ต่างการเข้าสหู่ นา้ จอ Welcome Screen 33 รูปท่ี 2.40 แสดงหน้าตา่ งสว่ นประกอบของหนา้ จอโปรแกรม 34 รูปที่ 2.41 แสดงมมุ มองโค้ด (Code View) 36 รูปท่ี 2.42 มุมมองโค้ดและออกแบบ (Code and Design View หรือ Split) 36 รูปที่ 2.43 แสดงมมุ มองออกแบบ (Design View) 36 รูปที่ 2.44 แสดงมมุ มองแสดงหน้าเวบ็ เหมือนดบู นบราวเซอร์ (Live View) 37 รูปที่ 2.45 แสดงมุมมองกลุ่มพาเนล 37 รูปท่ี 2.46 แสดงหนา้ ต่างไม้บรรทัด 38 รูปท่ี 2.47 แสดงการเข้าส่โู ปรแกรม Adobe Flash CS6 39 รูปท่ี 2.48 แสดงหนา้ ต่างเร่ิมการทางานของ Adobe Flash CS6 39 รูปท่ี 2.49 แสดงหนา้ ต่างสว่ นประกอบของโปรแกรม Adobe Flash CS6 39 รูปที่ 2.50 แสดงหน้าตา่ งสว่ นประกอบของโปรแกรม Adobe Flash CS6 40 รปู ท่ี 2.51 แสดงหน้าต่างเมนบู าร์ (Menu Bar) แถบเมนูแสดงรายการคาสั่งต่างๆ 40 รปู ที่ 2.52 แสดงหน้าต่างทูลบอ๊ กซ์ (Toolbox) 41 รปู ท่ี 2.53 แสดงหนา้ ต่าง Timeline 41 รูปที่ 2.54 แสดงหน้าตา่ งพ้ืนท่ีว่างสาหรับวางวตั ถุแบบช่ัวคราว และพน้ื ท่กี ารทางาน 42

ญ สารบัญรูป (ตอ่ ) หนา้ 42 รปู ที่ 43 รูปท่ี 2.55 แสดงหน้าต่างคุณสมบตั ิต่าง ๆ ของออบเจก็ ต์ 43 รปู ท่ี 2.56 แสดงหนา้ ตา่ งเลือกใช้สแี ละผสมสตี ามทีต่ ้องการ 44 รปู ท่ี 2.57 แสดงหนา้ ตา่ งควบคุมเก่ยี วกับชดุ วัตถขุ องโปรแกรม 44 รปู ท่ี 2.58 แสดงหนา้ ต่างของโปรแกรม SPSS 44 รูปท่ี 2.59 แสดงหนา้ ตา่ งการกรอกขอ้ มูลจากแบบสอบถาม 45 รูปท่ี 2.60 แสดงหนา้ ตา่ งการหาคา่ ร้อยละ 45 รปู ท่ี 2.61 แสดงหน้าต่างแบบฟอร์มท่ีใช้เก็บข้อมูลใน Google Form 46 รูปท่ี 2.62 แสดงหน้าต่างของการออกแบบ 55 รปู ท่ี 2.63 แสดงการหาเวบ็ โฮสตงิ้ ที่ดตี ้องคานึงถึงสิ่งใดบ้าง 55 รูปท่ี 3.1 แสดงแผนผงั โครงสรา้ งการทางานของเว็บไซตร์ ะบบตดิ ตามผู้สาเรจ็ การศึกษาฯ 56 รูปที่ 3.5 แสดงเค้าโครงเว็บไซต์ 57 รปู ท่ี 3.2 กรอบแนวคิดการวิจัย 57 รปู ท่ี 3.3 แผนภาพแสดงกระแสข้อมูล DFD Level 0 60 รูปที่ 3.4 แผนภาพแสดงกระแสข้อมลู DFD Level 1 60 รูปท่ี 4.1 แสดงการทดสอบหน้าแรก 61 รูปที่ 4.2 แสดงการทดสอบหน้าหลัก 62 รปู ท่ี 4.3 แสดงการทดสอบหน้าหน้าสมาชกิ 62 รปู ท่ี 4.4 แสดงการทดสอบหน้าเข้าสรู่ ะบบ 63 รปู ท่ี 4.5 แสดงการทดสอบหนา้ สาหรบั เจ้าหนา้ ที่ รูปที่ 4.6 แสดงการทดสอบหนา้ ภาพกิจกรรม

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

2 1.3 เปำ้ หมำยและขอบเขตของโครงกำร dddddddd1.3.1 เป้ำหมำยของโครงกำร 1.3.1.1 เปา้ หมายเชงิ ปริมาณ 1) เว็บไซต์ระบบติดตามผู้ส้าเร็จการศึกษาสาขาวิชาคอมพิวเตอร์ธรุ กิจ จ้านวน 1 เว็บไซต์ 2) ข้อมลู ของทผ่ี สู้ า้ เสรจ็ การศึกษาในปกี ารศึกษา 2561 และ ปีการศึกษา 2562 3) รูปเลม่ งานวิจัยศึกษาคน้ ควา้ จา้ นวน 1 เล่ม 4) คมู่ อื การใชง้ านเวบ็ ไซต์ จ้านวน 1 เล่ม 1.3.1.2 เป้าหมายเชิงคณุ ภาพ 1) เพ่ือเป็นสื่อกลางในการเผยแพร่ข้อมูลข่าวสารและกิจกรรมส้าหรับ ผู้สา้ เร็จการศกึ ษาสาขาวิชาคอมพิวเตอร์ ผ่านระบบเครือข่ายอินเตอรเ์ นต็ 2) สาขาวิชาคอมพิวเตอร์ธุรกิจมีการประชาสัมพันธ์กิจกรรมข่าวสาร ตา่ งๆ เพอื่ ใหผ้ ู้ส้าเรจ็ การศกึ ษาไดเ้ ขา้ มาดู 3) ผู้เข้าใช้งานเว็บไซต์ระบบติดตามผู้ส้าเร็จการศึกษาสาขาวิชา คอมพวิ เตอร์ธุรกจิ มีความพงึ พอใจในการเข้าใช้งานอยู่ในระดับมาก dddddddd1.3.2 ขอบเขตของโครงกำร 1.3.2.1 สว่ นระบบ Admin สามารถจดั การไดด้ ังนี 1) เขา้ ระบบ 2) ตรวจสอบขอ้ มูลสมาชิก 3) ตรวจสอบประวตั ิของผลู้ งทะเบียนได้ 4) เพ่ิม/ลบ/แก้ไข ข้อมลู สมาชกิ 5) รายงานข้อมลู ขนึ เว็บไซต์ได้ 6) ออกจากระบบ 1.3.2.2 ส่วนของผู้ลงทะเบยี น 1) ลงทะเบียน 2) เข้าสูร่ ะบบเว็บไซต์ 3) เพ่ิม/ลบ/แก้ไข ขอ้ มูลของตัวเองได้ 4) ดรู ายชื่อสมาชิกศิษย์เก่า 5) ออกจากระบบ

3 1.3.2.3 หน้าเว็บไซต์ทงั หมด 1) สมคั รสมาชิก 2) เขา้ ระบบ 3) สา้ หรบั เจา้ หน้าท่ี 4) ขา่ วสาร 5) ภาพกจิ กรรม 1.4 แผนงำนและระยะเวลำดำเนนิ กำร เวลาเร่ิมต้นการท้างานในแต่ละวันไม่แน่นอน โดยเฉล่ีย 1 วัน ท้างาน 4 ชั่วโมง รวมทังสิน ในการศึกษาและการพัฒนาเวบ็ ไซตใ์ ช้เวลาโดยประมาณ 4 เดือน (1 กรกฎาคม 2563 ถึง 23 ตลุ าคม 2563) ซึ่งสามารถแสดงรายละเอียดตารางแผนการด้าเนินงาน ดงั ต่อไปนี ตำรำงที่ 1.1 ตารางแสดงวธิ ีดา้ เนินงาน กิจกรรม/ ระยะเวลำดำเนนิ งำน (สัปดำห์ท)่ี ขัน้ ตอนกำรดำเนนิ งำน กรกฎำคม สิงหำคม กนั ยำยน ตลุ ำคม 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ขัน้ เตรยี มกำร สอบเคา้ โครง ศึกษาขอ้ มลู ข้นั ดำเนนิ กำร สรา้ งชินงาน ตรวจสอบความสมบรู ณ์ ขัน้ สรปุ และประเมินผล สรุปผล จดั ทา้ รูปเล่ม นา้ เสนอ/เผยแพร่ 1.5 ประโยชนท์ ีค่ ำดว่ำจะได้รบั 1.5.1 ได้เวบ็ ไซต์ระบบตดิ ตามของผู้สา้ เร็จการศึกษาสาขาวิชาคอมพวิ เตอรธ์ ุรกิจ 1.5.2 ได้ชอ่ งทางการตดิ ตามผสู้ า้ เรจ็ การศึกษาสาขาวิชาคอมพวิ เตอร์ธุรกจิ 1.5.3 ได้ระดับความพงึ พอใจผใู้ ช้ทีม่ ีตอ่ เว็บไซตร์ ะบบติดตามผ้สู ้าเร็จการศึกษาสาขาวชิ า คอมพิวเตอรธ์ ุรกิจ

4 1.6 นยิ ำมศัพทเ์ ฉพำะ เว็บไซต์ (Website, Web site) หมายถึง หน้าเว็บเพจหลายหน้าซึ่งเช่ือมโยงกันผ่านทาง ไฮเปอร์ลิงค์ส่วนใหญ่จัดท้าขึนเพื่อน้าเสนอข้อมูลผ่านคอมพิวเตอร์โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หนา้ แรกของเวบ็ ไซต์ทีเ่ ก็บไว้ท่ชี อ่ื หลักจะเรยี กวา่ โฮมเพจ โดเมนเนม (อังกฤษ: domain name) หมายถึง ชื่อท่ีใช้ระบุลงในคอมพิวเตอร์ (เช่น เป็นส่วนหนงึ่ ของที่อยเู่ ว็บไซต์ หรืออเี มล์แอดเดรส) เพือ่ ไปคน้ หาในระบบโดเมนเนมซีสเทมเพ่ือระบุถงึ เลขท่ีอยู่ไอพี ของชื่อนัน ๆ เป็นช่ือท่ีผู้จดทะเบียนระบุเว็บไซต์ของตน บางครังอาจใช้ \"ที่อยู่เว็บไซต์\" แทนได้ ชื่อโดเมนเปน็ ช่อื ทีต่ ังขึนเพ่ือใหง้ ่ายต่อการจดจ้า เนอื่ งจากไอพีแอดเดรสนนั จดจ้าได้ยากกว่า และเม่ือ การเปล่ียนแปลงไอพีแอดเดรส ผู้ใช้ไม่จ้าเป็นต้องรับรู้หรือจดจ้าไอพีแอดเดรสใหม่ ยังคงใช้โดเมนเนม เดิมไดต้ ่อไป AppServ หมายถึง เว็บเซิร์ฟเวอร์ท้าหน้าที่จัดเก็บและประมวลผลข้อมูล เพื่อแสดงผล ข้อมูลผ่านทางเว็บไซต์ ภาษาท่ีใช้เขียนเว็บ เช่น php ระบบฐานข้อมูล เช่น MySQL เคร่ืองมือ ทใี่ ชบ้ ริหารจดั การระบบฐานขอ้ มลู เชน่ phpMyAdmin ทส่ี า้ คญั เปน็ Open Source Software ซอฟต์แวร์โอเพนซอร์ส Open Source Software หรือ OSS หมายถึง ซอฟต์แวร์ ทสี่ ามารถนา้ ไปใช้งาน ศกึ ษา แก้ไข และเผยแพร่ได้อย่างเสรี ปราศจากเง่ือนไขเพ่ิมเติมโดยการพัฒนา ต้องเปิดเผยซอร์สโค้ดให้สาธารณะน้าไปพัฒนาต่อยอดได้ ท้าให้เกิดการร่วมมือกันท้างาน อย่างไรพ้ รมแดนผ่านเครือขา่ ยอนิ เทอร์เน็ต Apache (อะแพช’ชี) หมายถึง ซอฟต์แวร์เซิร์ฟเวอร์ที่ใช้กันอย่างแพร่หลายซึ่งเป็น ซอฟต์แวร์โอเพนซอร์สท่ีสามารถใช้งานได้ฟรี โดยมีการใช้โดยรวมประมาณ 67% ของเว็บเซิร์ฟเวอร์ ทังหมดในโลก ซงึ่ รวดเรว็ เช่ือถอื ได้และปลอดภยั สามารถปรบั แต่งไดเ้ พ่ือตอบสนองความตอ้ งการ PHP MySQL หมายถึง โปรแกรมระบบจัดการฐานข้อมูล มีหน้าท่ีเก็บข้อมูลอย่างเป็นระบบ รองรับคา้ สั่งเป็นเคร่ืองมือสา้ หรับเก็บข้อมูล ท่ีตอ้ งใช้รว่ มกับเคร่ืองมือหรือโปรแกรมอ่ืนอย่างบรู ณาการ เพอื่ ใหไ้ ดร้ ะบบงานทีร่ องรบั ความตอ้ งการของผใู้ ช้ PHP MyAdmin หมายถึง เคร่ืองมือซอฟต์แวร์ฟรีท่ีเขียนขึนในPHP ซึ่ง phpMyAdmin มีวัตถุประสงค์เพื่อรองรับการจัดการ MySQL ผ่านเว็บ phpMyAdmin สนับสนุนการด้าเนิน การต่าง ๆ บน MySQL การด้าเนินงานท่ใี ช้บ่อย phpMyAdmin สามารถดา้ เนินการผ่านอนิ เทอร์เฟซผู้ใช้

บทที่ 2 ทฤษฎีทเ่ี กี่ยวขอ้ ง โครงการ การสร้างเว็บไซต์ระบบติดตามผู้สาเร็จการศึกษาสาขาวิชาคอมพิวเตอร์ธุรกิจ คณะผู้จัดทาโครงการ ได้ทาการศึกษาหลักการ ทฤษฎีที่และเทคโนโลยีที่เก่ียวข้องที่สามารถนามาประยุกต์ ใช้งานโดยแบ่งออกเป็นหวั ข้อตา่ ง ๆ ดังต่อไปน้ี 2.1 ความรู้เบื้องต้นเก่ยี วกับเว็บไซต์ 2.2 หลักการออกแบบและพัฒนาเว็บไซต์ 2.3 โปรแกรมที่ใช้ในการพัฒนาระบบงาน 2.4 การเผยแพร่และอพั โหลดไฟลส์ เู่ ว็บไซต์ 2.5 งานวจิ ยั ทเ่ี ก่ยี วขอ้ ง 2.1 ความรูเ้ บือ้ งต้นเกยี่ วกับเวบ็ ไซต์ 2.1.1 ประวัติความเป็นมาของเวบ็ ไซต์ ปีพุทธศักราช 2533 นักวิทยาศาสตร์จากห้องทดลองของสถาบันเซิร์น (CERN) ซึ่งเป็นห้องปฏิบัติการฟิสิกส์แห่งยุโรป ในนครเจนีวา ประเทศสวิตเซอร์แลนด์ คือ ทิมเบิร์น เนอรส์ ลี (Tim Berners-Lee) ไดส้ รา้ งระบบการส่อื สารขอ้ มลู ผ่านเครือข่ายคอมพิวเตอร์ในรปู แบบใหม่ ที่เรียกว่าไฮเพอร์เท็กซ์ (Hypertext) ซึ่งผลที่ได้ทาให้มีการสร้างโพรโทคอลแบบ HTTP (Hypertext Transport Protocol) ข้ึนเพือ่ ใช้ในการส่งสารสนเทศต่าง ๆ โดยจะถูกจัดอย่ใู นรูปแบบใหม่ ที่เรยี กวา่ HTML (Hyper Text Markp Language) ซ่ึงการส่อื สารและการสบื คน้ สารสนเทศในรปู แบบใหม่ ทาให้มนุษย์สามารถติดต่อส่ือสารกันได้อย่างรวดเร็วในทุกรูปแบบ ไม่ว่าจะเป็นข้อความ ภาพและเสียง (จิตเกษม พัฒนาศิริ, 2540) จากการวิจัยดังกล่าวในปัจจุบันได้มีการคิดค้นและสร้างสรรค์รูปแบบ เพื่อสื่อสารระหว่างมนุษย์ด้วยกันโดยอาศัยเครือข่ายคอมพิวเตอร์เป็นตัวเชื่อมโยง ทาให้เวิลด์ไวด์เว็บ กลายเป็นเคร่ืองมือที่ใช้การติดต่อส่ือสารและการนาเสนอผ่านเครือข่ายที่ยิ่งใหญ่ที่สุดในโลกไปแล้ว ในขณะน้ีเว็บไซต์ เว็บเพจและโฮมเพจเวบ็ ไซตถ์ ือเปน็ องค์ประกอบหน่ึงของเว็บ เน่ืองจากเมื่อเข้าไปในเว็บ แล้วสารสนเทศหรือข้อมูลต่าง ๆ ที่ต้องการสืบค้นก็คือหน้าของเอกสารท่ีปรากฏบนจอคอมพิวเตอร์ ซง่ึ รายละเอยี ดของแตล่ ะส่วน มีดังนี้

6 2.1.1.1 เวบ็ ไซต์ (Web Site) ปิยวิท เจนกิจจาไพบูลย์ (2540) ได้กล่าวว่า เว็บไซต์ ถูกเรียก เป็นตาแหน่งที่อยู่ของผู้ที่มีเว็บเพจเป็นของตัวเองบนระบบอินเทอร์เน็ต ซ่ึงได้จากการลงทะเบียน กับผู้ให้บริการเช่าพื้นท่ีบนระบบอินเทอร์เน็ตเมอื่ ลงทะเบียนในช่ือทต่ี ้องการแลว้ ก็สามารถจัดทาเว็บ เพจและส่งให้ศูนย์บริการนาข้ึนไปไว้บนอินเทอร์เน็ตซ่ึงถือว่ามีเว็บไซต์เป็นของตนเองแล้ว และเว็บไซต์ ก็คือแหล่งท่ีรวบรวมเว็บเพจจานวนมากมายหลายหน้าในเร่ืองเดียวกันมารวมอยู่ด้วยกัน แต่สิ่งหน่ึง ในการเสนอเร่ืองราวท่ีอยู่บนเว็บไซต์ท่ีแตกต่างไปจากโปรแกรมโทรทัศน์ เนื้อหาในนิตยสาร หรือ หนังสือพิมพ์ เน่ืองจากการทางานบนเว็บจะไม่มีวันส้ินสุด ทั้งนี้เน่ืองจากเราสามารถเปล่ียนแปลง และเพิ่มสารสนเทศบนเว็บไซต์ได้ตลอดเวลาและแต่ละเว็บเพจจะมีการเช่ือมโยงกันภายใ นเว็บไซต์ หรอื ไปยังเว็บไซต์อ่นื ๆ เพื่อให้ผู้อา่ นสามารถอ่านได้ในเวลาอันรวดเรว็ กิดานันท์ มลิทอง (2542) นิรุธ อานวยศิลป์ (2542) กล่าวถึง เวบ็ ไซต์เปน็ ชอื่ เรียก Host หรอื Server ท่ีไดจ้ ดทะเบียนอยู่ในเวิลด์ไวดเ์ ว็บซ่ึงกค็ ือช่ือ Host ทถี่ ูก กาหนด ให้มีชื่อในเวิลด์ไวด์เว็บ และข้ึนต้นด้วย http และมีโดเมนหรือนามสกุลเป็น .com, .net, .org หรอื อน่ื ๆ 2.1.1.2 เวบ็ เพจ (Web Page) สานักงานเลขานุการคณะกรรมการเทคโนโลยีสารสนเทศแห่งชาติ ศูนย์เทคโนโลยีอิเล็กทรอนิกส์และคอมพิวเตอร์แห่งชาติ (2540) ได้ให้ความหมายของเว็บเพจ ไว้ดังน้ี เว็บเพจ คือหน้าหนังสืออิเล็กทรอนิกส์บนเว็บท่ีเจ้าของเว็บเพจต้องการจะใส่ลงไปในหน้า หนังสืออิเล็กทรอนิกส์น้ัน เช่น ข้อมูลแนะนาตัวเองซ่ึงอาจเป็นบุคคลหรือองค์กรที่ต้องการให้ผู้อื่น ได้ทราบหรือข้อมูลท่ีน่าสนใจ เป็นต้น โดยที่ข้อมูล ที่แสดงเป็นได้ท้ังข้อความ เสียง ภาพน่ิง และภาพเคล่ือนไหว และข้อมูลท่ีนาเสนอสามารถเช่ือมโยงในรูปของไฮเพอร์เท็กซ์ คือเชื่อมโยง ไปยังเว็บเพจอ่ืนที่จะให้ข้อมูลน้ัน ๆ ในระดับลึกลงไปได้เรื่อย ๆ และเว็บเพจจะต้องมีท่ีอยู่อิเล็กทรอนิกส์ บนเครือข่ายเฉพาะของตน ซ่ึงแหลง่ ท่อี ยู่นเี้ รยี กวา่ URL (Uniform Resource Locator) 2.1.2 ความหมายของเว็บไซต์ 2.1.2.1 ความหมายของเวบ็ ไซต์ ในปัจจุบันเว็บไซต์เป็นสิ่งที่มีความสาคัญและจาเป็นมากขึ้นและได้รับ ความนิยมทั้งในด้านความบันเทิง ด้านการศึกษา และด้านประชาสัมพันธ์เป็นอย่างมาก โดยความหมายของเว็บไซตน์ นั้ มีความหมายดงั น้ี เว็บไซต์ (อังกฤษ: website, web site หรือsite) หมายถึง หน้าเว็บเพจ หลายหน้าซง่ึ เช่ือมโยงกันผ่านทางไฮเปอร์ลงิ ก์ ส่วนใหญ่จดั ทาข้ึนเพื่อนาเสนอขอ้ มูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไวใ้ นเวิลด์ไวดเ์ วบ็ หน้าแรกของเว็บไซต์ท่ีเก็บไว้ทชี่ ื่อหลักจะเรียกว่า โฮมเพจ เว็บไซต์

7 โดยท่ัวไปจะให้บริการต่อผู้ใช้ฟรี แต่ในขณะเดียวกันบางเว็บไซต์จาเป็นต้องมีการสมัครสมาชิก และเสียค่าบริการเพื่อที่จะดูข้อมูลในเว็บไซต์น้ัน ซ่ึงได้แก่ข้อมูลทางวิชาการ ข้อมูลตลาดหลักทรัพย์ หรอื ขอ้ มูลสอื่ ตา่ ง ๆ ผ้ทู าเวบ็ ไซตม์ หี ลากหลายระดับ ต้ังแต่สร้างเว็บไซต์ส่วนตัว จนถึงระดบั เว็บไซต์ สาหรับธุรกิจหรือองค์กรต่าง ๆ การเรียกดูเว็บไซต์โดยท่ัวไปนิยมเรียกดูผ่านซอฟต์แวร์ในลักษณะ ของเว็บเบราว์เซอร์ซ่ึงสามารถบันทึกและเปิดให้ชมได้ทันที โดยอาศัยเคร่ืองเล่นบันทึกวีดีทัศน์ ซ่งึ สามารถบนั ทกึ และลบสญั ญาณภาพและเสียงได้ 2.1.3 ประโยชนข์ องเว็บไซต์ 2.1.3.1 ส่งเสริมศักยภาพทางด้านธุรกิจ การมีเว็บไซต์สามารถช่วยในการเพิ่ม เสริมศักยภาพของธรุ กจิ ของคณุ ให้แข็งแกร่งมากยิ่งขึ้นได้ เนอ่ื งจากเป็นโลกท่ีเปิดกวา้ งทางด้านขอ้ มูล ทาใหส้ นิ คา้ และบรกิ ารของคุณเป็นท่ีรจู้ กั ในท้องตลาดมากย่ิงขึ้นไปได้ 2.1.3.2 การเข้าถึงกลุ่มลูกค้าที่ง่ายมากยิ่งขึ้น สามารถท่ีจะมีเว็บไซต์เป็นของ ตนเองและ สามารถที่จะทาให้กลุ่มลูกค้าของคุณค้นเว็บของคุณเจอผ่าน Search Engine โดยกลุ่มคาท่ี เจาะจงกับธุรกิจของคุณได้เป็นการเพ่ิมกลุ่มลูกค้าที่กาลังสนใจกับสินค้าและบริการของคุณ ให้ตรง เปา้ หมาย มากย่ิงขึ้นตลอด 24 ช่ัวโมง แมว้ า่ จะเป็นวนั หยดุ ก็ตาม 2.1.3.3 ช่วยให้คุณขายสินค้าได้โดยไม่ต้องมีหน้าร้าน เว็บไซต์เปรียบเสมอร้านค้า ออนไลน์หรือสานักงาน ท่ีใคร ๆ ก็สามารถเข้ามาเย่ียมชมและค้าหาข้อมูลของสินค้าได้ โดยที่ไม่ต้อง ลงทนุ เปดิ หน้าร้านท่ีต้องมีการเชา่ ห้องและมีค่าใชจ้ ่ายสูงอีกด้วย 2.1.3.4 ช่วยสร้างภาพลักษณ์ท่ีดีให้กับองค์กร สมัยนี้บริษัทที่ไม่มีเว็บเป็นของ ตนเองเปรียบเสมือน บริษัทที่มันต่อโลกภายนอกการมีเว็บไซต์บริษัทสามารถแสดงให้กลุ่มลูกค้า ของคุณเข้าใจถึงภาพลักษณ์ที่ดีของบริษัทได้ และเว็บไซต์ยังช่วยในการสร้างความรู้สึกประทับใจ กับผู้เยี่ยมชมไดอ้ ีกด้วย 2.1.3.5 ช่วยลดค่าใช้จ่ายในการประชาสัมพันธ์ จะดีหรือไม่ถ้าคุณไม่ต้องเสีย ค่าโฆษณาท่ีแพง ๆ ผ่านสื่อต่าง ๆ เช่น โทรทัศน์ วิทยุ หนังสือพิมพ์ โดยคุณหันมาสร้างเว็บไซต์ เป็นของตนเองลงทุนสร้างเว็บแค่คร้ังเดียวแต่ใคร ๆ ก็สามารถท่ีจะเข้ามาเยี่ยมชมได้โดยท่ีคุณไม่ต้อง เสียค่าใชจ้ ่ายทม่ี ากมายเสยี เพียงคา่ บริการรายปีเพยี งเล็กน้อยเท่านั้น 2.1.3.6 สามารถอานวยความสะดวกแก่ลูกค้าได้ จะดีไม่น้อยเลยทีเดียว หากลูกค้าของคณุ มีปัญหาหรอื ข้อสงสัยในสินค้าและบรกิ ารและสามารถที่ จะแก้ปญั หาด้วยตนเองได้ ผ่านการอ่านบทความช่วยเหลือบนเว็บไซต์ของคุณอีกทั้ง ยังเป็นการสร้างความมั่นใจในการดูและ ลูกค้าใหก้ บั กลุ่มลูกคา้ ของคณุ มากย่ิงข้นึ ด้วย

8 2.2 หลักการออกแบบและพัฒนาเวบ็ ไซต์ 2.2.1 หลกั การในการออกแบบเว็บไซต์ การสรา้ งเวบ็ ไซต์สง่ิ สาคญั อยทู่ ่ีการออกแบบเว็บ เพราะเว็บไซต์ที่มีรูปแบบสวยงาม จะสามารถดึงดูดความสนใจจากผู้คนได้ดีกว่า ทาให้ผู้คนเกิดความรู้สึกประทับใจอยากกลับมาใช้งาน เว็บไซตอ์ กี ครั้งในอนาคต ดังนน้ั เร่มิ แรกกอ่ นทาเว็บไซต์ จงึ จาเป็นตอ้ งทาความเข้าใจกับหลักการออกแบบ และรูปแบบโครงสร้างของเว็บกอ่ น 2.2.2 องค์ประกอบในการออกแบบเวบ็ ไซต์ การออกแบบเวบ็ ไซต์เพ่ือให้มปี ระสทิ ธภิ าพ และสามารถดึงดดู ความสนใจของผูค้ น ไดด้ ี จะต้องมีองคป์ ระกอบของเว็บไซต์อย่างครบถ้วนซง่ึ ไดแ้ ก่ 2.2.2.1 ความเรียบง่าย เข้าใจงา่ ย การออกแบบเว็บไซต์ที่ดี จะต้องเน้นที่ความ เรียบง่ายเป็นหลัก โดยเลือกนาเสนอเฉพาะส่ิงท่ีต้องการนาเสนอจริง ๆ ในรูปแบบท่ีหลากหลาย โดยอาจจะเป็นสีสัน กราฟิก ภาพเคล่ือนไหวหรือตัวอักษร ที่สาคัญจะต้องมีการนาเสนอท่ีไม่ดูรก หน้าเว็บจนเกินไป เพื่อไม่ให้เกิดความรู้สึกรกสายตาหรือสร้างความเบื่อหน่าย น่าราคาญให้กับ ผู้ท่ีเข้าชมเว็บไซต์ มีตัวอย่างเว็บไซต์ ท่ีมีการออกแบบโดยเน้นความเรียบง่ายได้ดี คือ Apple, Nokia และ Microsoft เปน็ ต้น 2.2.2.2 ความสม่าเสมอ ไม่สับสน ควรออกแบบเว็บไซต์ด้วยความสม่าเสมอ คือ จะต้องมีรปู แบบ กราฟิก โทนสีและการตกแต่งต่าง ๆ ให้แตล่ ะหน้าบนเวบ็ ไซต์มีความคล้ายคลึงกัน และเป็นแนวเดียวกันไปตลอดทั้งเว็บไซต์ ดังตัวอย่างเว็บไซต์ทั่ว ๆ ไปที่จะสังเกตเห็นได้ว่าทุกหน้า ของเว็บไซตน์ ั้น จะเน้นการตกแต่งในรปู แบบเดยี วกันท้ังหมด ต่างก็แคก่ ารนาเสนอของแตล่ ะหน้าเท่านั้น 2.2.2.3 สรา้ งความโดดเด่น เป็นเอกลกั ษณ์ การออกแบบเวบ็ ไซตเ์ พ่ือสามารถสื่อ ถงึ จุดประสงค์ในการนาเสนอเว็บไดด้ ี จะตอ้ งมีการสร้างความเป็นเอกลักษณ์และจดุ เดน่ ใหก้ ับเวบ็ ไซต์ เพื่อ ให้สามารถสะท้อนถึงลักษณะขององค์กรได้มากท่ีสุด โดยการสร้างเอกลักษณ์ดังกล่าวนั้น อาจใช้ชุดสี รูปภาพ ตัวอักษรหรือกราฟิก นอกจากน้ีก็ต้องขึ้นอยู่กับว่า เป็นเว็บไซต์แบบทางการ หรือไมเ่ พอ่ื จะได้ออกแบบได้อยา่ งเหมาะสมทส่ี ุด 2.2.2.4 เน้ือหาต้องดี ครบถ้วน เน้ือหาเป็นส่ิงที่สาคัญที่สุดของการสร้างเวบ็ ไซต์ เพราะส่ิงทีท่ าให้ผู้คนเกิดความสนใจ และหมั่นติดตามเว็บไซต์เหล่าน้ันอยู่เสมอ ก็คือเน้ือหาท่ีมีความ สมบูรณ์และน่าสนใจ นอกจากน้ีจะต้องมีการปรับปรุง พัฒนาเนื้อหาบนเว็บให้มีความทันสมัย อยูเ่ สมอ รวมถึงข้อมูลตอ้ งมีความถกู ตอ้ งทีส่ ุด 2.2.2.5 ระบบเนวิเกชั่นใช้ง่าย ระบบเนวิเกชั่น เป็นเสมือนป้ายบอกทางเพ่ือให้ ผู้ใช้งาน ไม่เกิดความสับสนในขณะใช้งานเว็บไซต์ ซ่ึงการออกแบบเนวิเกชั่นก็จะต้องเน้นท่ีความ เรียบง่าย ใช้งานสะดวก และมีความเข้าใจได้ง่าย ที่สาคัญจะต้องมีตาแหน่งการวางที่สม่าเสมอ

9 เพื่อให้ดูเป็นแนวทางเดียวกันทาให้ผู้ใช้งานหรือผู้ชมรู้สึกประทับใจ และจดจาเว็บไซต์ได้ง่ายข้ึน ส่วนใครทม่ี ีการนากราฟิกมาใชใ้ นระบบเนวิเกช่ันก็จะต้องเลือกกราฟิกทีส่ ามารถสอ่ื ความหมายไดด้ ี 2.2.2.6 คุณภาพของเว็บไซต์ เว็บไซต์ท่ีดีจะต้องมีคุณภาพ ทั้งส่ิงท่ีปรากฏ ให้เห็นบนเว็บไซต์ ไม่ว่าจะเป็นกราฟิกชนิดตัวอักษร รูปภาพหรือสีสันที่ใช้เนื้อหาที่นามาแสดงผล ซึ่งหากเว็บไซต์มีคุณภาพก็จะสร้างความน่าเชื่อถือ และเป็นจุดเด่นที่ทาให้ผู้คนส่วนใหญ่เกิด ความสนใจไดด้ ี เพราะฉะน้ันหา้ มละเลยในส่วนของคุณภาพเด็ดขาด 2.2.2.7 ความสะดวกในการเข้าใช้งาน เว็บไซต์ควรให้ความสะดวกสบายแก่ ผู้ใช้งานได้ดีคือจะต้องมีการแสดงผลได้ในทุกระบบปฏิบัติการ ไม่ว่าจะเป็นเว็บเบราว์เซอร์ คอมพิวเตอร์โน๊ตบุ๊คหรือบนโทรศัพท์มือถือที่สาคัญจะต้องมีความละเอียดของการแสดงผลและ สามารถใชง้ านไดโ้ ดยไมม่ ีปญั หาดว้ ย 2.2.2.8 ความคงที่ของการออกแบบ การออกแบบเว็บไซต์ควรจะมีความคงท่ีใน การออกแบบ ด้วยการสร้างเว็บไซต์ด้วยแบบแผนเดียวกัน และมีการเรยี บเรยี งเนื้อหาอย่างรอบคอบ ทาให้เว็บมีความน่าเชื่อถือ และดมู ีคุณภาพ ช่วยสร้างความประทบั ใจให้กับผูใ้ ชง้ านไดเ้ ปน็ อย่างดี 2.2.2.9 ความคงท่ีของการทางาน ระบบการทางานบนเวบ็ ไซต์จะตอ้ งมคี วามคงท่ี และสามารถใช้งานได้ดี ซ่ึงนอกจากการออกแบบระบบการทางานให้มีความทันสมัยและสร้างสรรค์ แล้วก็จะต้องหมั่นตรวจสอบอยู่เสมอ เพราะหากระบบการใช้งานมีความผิดปกติก็จะได้แก้ปัญหาได้ ทันนอกจากนี้อาจมีการอัพเดตดีไซน์ให้ทันสมัยขึ้นบ่อย ๆ เพื่อให้ผู้ใช้งานรู้สึกสนุก ไปกับการใช้งาน เว็บไซต์ 2.2.3 ขนั้ ตอนในการจัดทาเว็บไซต์ 2.2.3.1 การสร้างเว็บไซต์ อาจเริ่มต้ังแต่การกาหนดเน้ือหารายละเอียดต่าง ๆ ในหน้าเว็บเพจจนถึงการอัพโหลดเว็บไซต์ข้ึนบนอนิ เทอร์เน็ต จะมีขั้นตอนดงั นี้ ข้ันตอนที่ 1 วางแผนจัดทาเว็บไซต์ กาหนดเน้ือหา แบ่งเน้ือหาเป็น หมวดหมู่ต่าง ๆ ตามลาดับก่อนหลัง และรายละเอียดของเว็บท่ีเราจะจัดทาเพื่อให้เห็นมุมมองคร่าว ๆ ก่อนจะลงมือสร้างเว็บไซต์ ขัน้ ตอนที่ 2 การกาหนดโครงสร้างของเว็บ ข้ันตอนการกาหนดผังของเว็บไซต์ หรอื ทีเ่ รยี กวา่ Site Map เพื่อให้ทราบองค์ประกอบทัง้ หมดของเว็บไซต์ ขัน้ ตอนที่ 3 กาหนดการเช่ือมโยงระหวา่ งเว็บเพจ เปน็ การกาหนด การ เชอ่ื มโยงในแต่ละหนา้ เว็บเพจให้สามารถเชอ่ื มโยงกลบั ไปกลบั มาระหว่างหน้าเวบ็ เพจต่าง ๆ ได้ ข้นั ตอนที่ 4 ออกแบบหน้าเว็บเพจแต่ละหน้า ออกแบบโครงสร้างหน้า เว็บเพจในแต่ละหน้าเพ่ือจะได้รู้ว่าในเว็บเพจแต่ละหน้ามีรายละเอียดอะไรบ้าง ไม่ว่าจะเป็น ข้อมูล รูปภาพ จากนั้นทาการออกแบบหน้าเวบ็ เพจหนา้ ต่อไป

10 2.2.4 ทฤษฎีสใี นการออกแบบ 2.2.4.1 ความหมายของทฤษฎีสี 1) ทฤษฎี หมายถงึ ความจรงิ ที่ไดพ้ สิ ูจน์แล้ว หรือ หลกั วิชา 2) สี หมายถึง แสงท่ีมากระทบวัตถแุ ลว้ สะทอ้ นเขา้ ตาเรา ทาใหเ้ หน็ เปน็ สีตา่ งๆ 3) ทฤษฎสี ี หมายถงึ หลักวิชาเกี่ยวกบั สที ่ีสามารถมองเห็นได้ดว้ ยสายตา 2.2.4.2 ความสัมพันธ์ของมนุษย์กับสี สรรพส่ิงท้ังหมายในจักรวาลประกอบไป ด้วยสี ดงั น้ันสิ่งแวดลอ้ มรอบตวั มนษุ ย์จึงประกอบไปดว้ ยสี สีจาแนกออกเป็น 2 ประเภท คอื 1) สที ่ีเกดิ จากปรากฏการณต์ ามธรรมชาติ เช่น สขี องแสง สีผวิ ของวัตถุ 2) สีที่เกิดจากการสร้างสรรค์ของมนุษย์ เช่น สีของแสงไฟฟ้า สีของพลุ สีท่ีใช้เขียนภาพ และย้อมสีวัสดุต่างๆ เหตุที่มนุษย์รู้จักใช้สี เพราะมนุษย์มีธรรมชาติรักสวยรักงาม เม่ือเห็นความงามตามธรรมชาติ เช่น ดอกไม้ ใบไม้ สัตว์ วัตถุ ตลอดจนทิวทัศน์ท่ีงดงาม มนุษย์ ก็อยากจะเก็บความงามเอาไว้ จึงได้นาเอาใบไม้ หินสี เปลือกหอย ฯลฯ มาประดับร่างกาย หรือ ขีดเขียนส่วนที่ต้องการให้งาม รวมทั้งการเขียนภาพตามผนังถ้า อีกด้วย สาหรับในปัจจุบันได้มีการ สังเคราะหส์ จี ากวตั ถุข้นึ มาใช้ในงานตา่ งๆ อยา่ งกว้างขวางทวั่ ไป 2.2.4.3 จิตวิทยาแห่งสี (psychology of colors) การใช้สีให้สอดคล้อกับ หลักจติ วทิ ยา จะต้องเขา้ ใจว่าสีใดใหค้ วามรสู้ ึกต่อมนุษย์อย่างไร จึงจะใช้ไดอ้ ยา่ งเหมาะสม ความรู้สึก เกี่ยวกับสี สามารถจาแนกออกไดด้ ังนี้ ตารางที่ 2.1 ความร้สู กึ เกี่ยวกับสี สแี ดง ให้ความรู้สึกอนั ตราย เร่าร้อน รุนแรง มน่ั คง อดุ มสมบูรณ์ สีส้ม ให้ความรสู้ ึกสว่าง เรา่ ร้อน ฉูดฉาด สเี หลือง ใหค้ วามรู้สึกสวา่ ง สดใส สดชนื่ ระวัง สีเขยี ว ให้ความรสู้ กึ งอกงาม พักผอ่ น สดช่นื สีนา้ เงิน ให้ความรูส้ ึกสงบ ผ่อนคลาย สงา่ งาม ทึม สมี ่วง ใหค้ วามร้สู กึ หนัก สงบ มเี ลศนัย สนี า้ ตาล ให้ความรสู้ ึกเกา่ หนัก สงบเงยี บ สขี าว ให้ความรูส้ กึ บรสิ ทุ ธ์ิ สะอาด ใหม่ สดใส สีดา ให้ความรสู้ ึกหนัก หดหู่ เศรา้ ใจ ทบึ ตัน

11 1) การใช้สีตามหลักจิตวิทยา สามารถก่อให้เกิดประโยชน์ได้หลาย ประการ ท้งั น้ีขน้ึ อยกู่ บั ลกั ษณะการใชง้ าน ประโยชน์ท่ีไดร้ ับนน้ั สามารถสรุปได้ดังนี้ - ประโยชน์ในด้านแสดงเวลาของบรรยากาศในภาพเขียน เพราะสี บรรยากาศในภาพเขียนน้นั จะแสดงให้รู้วา่ เป็นภาพตอนเชา้ ตอนกลางวนั หรือตอนบา่ ย เปน็ ต้น - ประโยชน์ในด้านการค้า คือ ทาให้สินค้าสวยงาม น่าซื้อหา นอกจากนยี้ งั ใชก้ บั งานโฆษณา เชน่ โปสเตอร์ต่างๆ ชว่ ยให้จาหน่ายสินค้าไดม้ ากขึ้น - ประโยชน์ในด้านประสิทธิภาพของการทางาน เช่น โรงงาน อุตสาหกรรม ถ้าทาสีสถานที่ทางานให้ถูกหลักจิตวิทยา จะเป็นทางหน่ึงท่ีช่วยสร้างบรรยากาศให้น่า ทางานคนงานจะทางามากข้นึ มีประสิทธิภาพในการทางานสูงข้ึน - ประโยชน์ในด้านการตกแต่ง สีของห้อง และสีของเฟอร์นิเจอร์ ช่วยแก้ปัญหาเร่ืองความสว่างของห้องรวมท้ังความสุขในการใช้ห้อง ถ้าเป็นโรงเรียนเด็กจะเรียน ได้ผลดีขึ้น ถ้าเป็นรงพยาบาลคนไข้จะหายเร็วข้ึน แม่สีของวัตถุธาตุแม่สีของวัตถุธาตุสังเคราะห์มาจาก วัตถโุ ดยนักเคมี ซึง่ นามาใช้กับวงการศิลปะ วงการอุตสาหกรรม โดยกาหนดแมส่ ีไว้ 3 สี คอื ตารางท่ี 2.2 แสดงขน้ั สที ี่ 1 แม่สี สแี ดง (red) สนี ้าเงนิ (blue) สีเหลือง (yellow) ตารางที่ 2.3 แสดงขน้ั สีท่ี 2 การผสมสี 2) วงสี หรือเรียกอีกอย่างหน่ึงว่า วงสีธรรมชาติ ประกอบด้วย แม่สี สี ขั้นที่ 2 และสขี นั้ ที่ 3 ซึง่ มสี ีดังตอ่ ไปนี้ แมส่ ี 3 สี คือ สแี ดง สีนา้ เงิน สีเหลอื ง - สขี ัน้ ที่ 2 เกดิ จากการผสมกันระหว่างสีของแมส่ ี จะเกิดสขี ึน้ 3 สี คือ - สมี ว่ ง (violet) เกิดจาก สีแดงผสมสนี า้ เงิน - สีเขียว (green) เกดิ จาก สีน้าเงินผสมสเี หลอื ง - สสี ้ม (orange) เกิดจาก สเี หลอื งผสมสแี ดง

เกิดสีขน้ึ 6 สี คอื 12 - สีขั้นที่ 3 เกิดจากการผสมกันระหว่างสีของแม่สีกับสีข้ันท่ี 2 จะ - สีน้าเงินม่วง (violet-blue) เกิดจาก สีน้าเงินผสมสีม่วง - สเี ขยี วน้าเงิน (blue-green) เกดิ จาก สนี ้าเงนิ ผสมสีเขยี ว - สเี หลอื งเขยี ว (green-yellow) เกิดจาก สีเหลอื งผสมสีเขียว - สสี ม้ เหลือง (yellow-orange) เกดิ จาก สเี หลอื งผสมสีสม้ - สีแดงสม้ (orange-red) เกดิ จาก สีแดงผสมสสี ม้ - สีมว่ งแดง (red-violet) เกดิ จาก สแี ดงผสมสมี ่วง รูปท่ี 2.1 วงจรสี 2.2.4.4 คุณลักษณะของสี มี 3 ประการ คือ สีแท้ (hue) คือ สี 12 สีที่ปรากฏ ในวงสธี รรมชาติ 1) ความจัดของสี (intensity) คือ ความสดหรือความบริสุทธิ์ของสีแท้ ความบรสิ ทุ ธิ์ของสีแท้จะลดลงเมอื่ ถกู ผสมดว้ ยสขี าว สดี า หรือสคี ู่ตรงข้าม 2) น้าหนักของสี (values) หมายถึง น้าหนักอ่อนแก่ของสีตามลาดับ เนื่องจากถูกผสมด้วยสีขาว – ดา น้าหนักของสีจะลดลงด้วยการใช้สีขาวผสม (tint) น้าหนักของสี จะเพ่ิมข้ึนปานกลางด้วยการใช้สีเทาผสม (tone) และน้าหนักของสีจะเพิ่มข้ึนมากข้ึนด้วยการใช้สีดา ผสม (shade) น้าหนักของสียังหมายถึงการเรียงลาดับน้าหนักของสีแท้ด้วยกันเอง โดยเปรียบเทียบ นา้ หนกั อ่อนแกก่ ับสีขาว – ดา ยกตวั อยา่ งเช่น ในวงสีไม่มีสนี ้าตาล เพราะความจรงิ แลว้ สนี ้าตาลกค็ ือ สแี ดง ทเี่ ข้มข้ึนโดยผสมด้วยสีดา หรอื ในวางสไี มม่ ีสฟี ้า เพราะความจรงิ สีฟ้าก็คือสีน้าเงนิ ทจี่ างลงดว้ ย สขี าว เป็นตน้

13 3) การใช้สีสาหรับการออกแบบ จะใช้ให้เกิดความสวยงามตรงตาม จดุ ประสงค์ มหี ลักในการใช้อยา่ งกวา้ งๆ 2 ประการ คอื - การใช้สีให้กลมกลืนกัน และการใช้สีให้ตัดกัน ในงานหนึ่งๆ อาจจะใช้สีให้กลมกลืนกันหรือตัดกันเพียงอย่างใดอย่างหนึ่ง หรืออาจจะใช้พร้อมกันทั้ง 2 อยา่ ง ทั้งน้ี แล้วแต่ความประสงค์ของนักออกแบบ การใช้สีให้กลมกลืนกัน เป็นการใช้สีหรือน้าหนักของสี ให้ใกล้เคียงกันหรือคล้ายคลึงกัน เช่น การใช้สีแบบเอกรงค์ (monochrome) เป็นการใช้สีสีเดียวที่มี น้าหนักอ่อนแก่หลายลาดับ การใช้สีข้างเคียง (adjacent colors) เป็นการใช้สีที่เคียงกัน 2 – 3สี ในวงสี เช่น สีแดง สีส้มแดง และสมี ่วงแดง การใช้สีใกล้เคียง (analogous colors) เป็นการใช้สีท่ีอยู่ เรียงกันในวงสีไม่เกิน 5 สี ตลอดจนการใช้สีวรรณะร้อนและวรรณะเย็น (warm tone colors and cool tone colors) โดยการแบ่งครึ่งวงสี ผ่ากลางสีเหลืองและสีม่วง เพ่ือแยกออกเป็นสองซีก ซีกท่ีมี สแี ดงเปน็ วรรณะร้อน ซกี ที่มสี เี ขยี วเปน็ วรรณะเยน็ - การใช้สีให้ตัดกัน เป็นการใช้สีหรือน้าหนักของสีให้แตกต่างหรือ ตรงกันข้าม เช่น การใช้สีตรงข้าม (complementary colors) เป็นคู่สีที่ตรงข้ามกันในวงสีซึ่งเป็นสี ท่ีตัดกนั อยา่ งแท้จริง เช่น แดง/เขียว การใชส้ ีเกือบตรงข้าม (split complementary colors) เป็นสี ที่อยู่เกือบตรงข้ามกันในวงสี เช่น สีเหลืองเกือบตรงข้ามกับสีม่วง ใช้รวมกันท้ัง 3 สี การใช้สี ตรงข้าม 2 คู่ที่อยู่เคียงกัน (double complementary colors) เช่น สีเหลืองตรงข้ามกับสีม่วง และสีม่วงแดงตรงข้ามกับสีเขียวเหลือง ควรคานึงถึงความเป็นเอกภาพด้วย วิธีการใช้มีหลายวิธี เช่น ใชส้ ีให้มปี ริมาณต่างกนั เช่น ใช้สแี ดง 20 % สเี ขียว 80% หรอื ใชเ้ นื้อสผี สมในกันและกัน หรอื ใชส้ หี นึ่ง สใี ดผสมกับสีคูท่ ตี่ ัดกนั รวมท้งั การเอาสที ีต่ ัดกันมาทาใหเ้ ปน็ ลวดลายเล็ก ๆ สลับกัน รูปท่ี 2.2 ตวั อย่างการเอาสีทต่ี ัดกนั

14 2.2.4.5 หลกั การใช้สี การใช้สีกับงานออกมาน้ัน อยู่ทน่ี ักออกแบบมีจุดมุ่งหมายใด ที่จะสร้างความสนใจ ความเร้าใจตอ่ ผู้ดเู พอื่ ให้เข้าถงึ จดุ หมายทตี่ นต้องการ หลกั ของการใช้มดี งั นี้ 1) การใช้สีวรรณะเดียว ความหมายของสีวรรณะเดียว (tone) คือกลุ่ม สที ่ีแบ่งออกเปน็ วงล้อของสเี ป็น 2 วรรณะ คือ - วรรณะร้อน (warm tone) ซ่ึงประกอบด้วย สีเหลือง สีส้ม สีแดง สีม่วง สีเหลา่ นใี้ ห้อทิ ธพิ ล ต่อความร้สู ึก ต่ืนเต้น เรา้ ใจ กระฉับกระเฉง ถือวา่ เปน็ วรรณะร้อน - วรรณะเย็น (cool tone) ประกอบด้วย สีเหลือง สีเขียว สีน้าเงิน สีม่วง สีเหล่าน้ีดู เย็นตา ให้ความรู้สึก สงบ สดชื่น (สีเหลืองกับสีม่วงอยู่ได้ท้ังสองวรรณะ) การใช้สีแต่ ละคร้ังควรใช้สีวรรณะเดียวในภาพท้ังหมด เพราะจะทาให้ภาพความเป็นอันหน่ึงอันเดียวกัน (เอกภาพ) กลมกลืน มีแรงจงู ใจให้คลอ้ ยตามได้มาก รปู ท่ี 2.3 เกา้ อ้หี ลากสี 2) การใช้สีต่างวรรณะ หลักการทั่วไป ใช้อัตราส่วน 80% ต่อ 20% ของวรรณะสี คอื ถ้าใช้สีวรรณะรอ้ น 80% สีวรรณะเย็นก็ 20% เปน็ ตน้ ซ่ึงการใช้แบบน้ีสรา้ งจุดสนใจ ของผู้ดู ไมค่ วรใช้อตั ราส่วนทเี่ ทา่ กันเพราะจะทาใหไ้ มม่ ีสใี ดเด่น ไม่นา่ สนใจ รูปท่ี 2.4 หมวกหลากสี

15 3) การใช้สีตรงกันข้าม สีตรงข้ามจะทาให้ความรู้สึกที่ตัดกันรุนแรง สร้างความเด่น และเร้าใจได้มากแต่หากใช้ไม่ถูกหลัก หรือ ไม่เหมาะสม หรือใช้จานวนสีมาก จนเกินไป ก็จะทาให้ความรู้สึกพร่ามัว ลายตา ขัดแย้ง ควรใช้สีตรงข้าม ในอัตราส่วน 80% ต่อ20% หรือหากมีพื้นท่ีเท่ากันที่จาเป็นต้องใช้ ควรนาสีขาว หรือสีดา เข้ามาเสริม เพื่อ ตัดเส้นให้แยกออก จาก กนั หรอื อีกวธิ ีหนง่ึ คือการลดความสดของสีตรงข้ามให้หม่นลงไป 2.3 โปรแกรมทใี่ ชใ้ นการพัฒนาระบบงาน 2.3.1 โปรแกรม Adobe Photoshop CS6 โปรแกรม Adobe Photoshop cs6 เป็นโปรแกรมในตระกูล Adobe ที่ใช้สาหรับ ตกแตง่ ภาพถ่ายและภาพกราฟฟิก ได้อยา่ งมีประสิทธิภาพ ไม่ว่าจะเป็นงานด้านส่ิงพิมพ์ นิตยสาร และ งานด้านมัลติมีเดีย อกี ทงั้ ยงั สามารถ retouching ตกแต่งภาพและการสรา้ งภาพ ซึ่งกาลังเป็นท่ีมนิยม สูงมากในขณะนี้ เราสามารถใช้โปรแกรม Photoshop ในการตกแต่งภาพการใส่ Effect ต่าง ๆให้กับ ภาพ และตัวหนังสือ การทาภาพขาวดา การทาภาพถ่ายเป็นภาพเขียน การนาภาพมารวมกัน การ Retouch ตกแต่งภาพต่าง โปรแกรม Adobe Photoshop เป็นโปรแกรมท่ีสามารถท่ีจะเรียนรู้ ได้ด้วยตนเองและทาการแก้ไขภาพ ตกแต่งภาพ ซ้อนภาพในรูปแบบต่างๆได้อย่างง่ายดาย และสิ่งที่ ขาดไม่ได้น้ันก็คือการใส่ข้อความประกอบลงในภาพด้วย และเน่ืองด้วย Adobe Photoshop มีการพัฒนาโปรแกรมมาอย่างต่อเน่ือง ทาให้จาเป็นต้องศึกษาคาสั่งต่างๆให้เข้าใจ แต่ที่สาคัญ เม่ือ ได้เรียนรู้การใช้คาสั่งในเวอร์ช่ันเกา่ แต่กย็ ังคงสามารถนาไปประยุกต์ใช้กับเวอรช์ นั่ ใหม่ๆ ได้ดว้ ย 2.3.1.1 วิธกี ารติดต้ัง โปรแกรม Adobe Photoshop cs6 รูปที่ 2.5 แสดงเข้าไปยงั โฟลเดอร์ของ Photoshop ตามภาพ ดบั เบล้ิ คลกิ Set-up รปู ท่ี 2.6 แสดงการตรวจสอบกอ่ นทาการติดต้งั โปรแกรม

16 รูปท่ี 2.7 แสดงโปรแกรมตรวจสอบเสรจ็ แล้วจะเข้าส่หู นา้ จอ เลอื ก Try รปู ท่ี 2.8 แสดงการกรอก Serial Number แล้วคลิกที่ปมุ่ คลกิ Accept รปู ท่ี 2.9 แสดงการเลือกการติดต้งั ของโปรแกรม ให้เลือก Installs (สฟี า้ : คอื การติดต้งั แบบ 64 bit สเี หลอื ง : คือการติดตงั้ เเบบ 32 bit)

17 รูปท่ี 2.10 แสดงหน้าการโหลดของโปรแกรม รูปท่ี 2.11 แสดงการเสรจ็ สน้ิ การติดตัง้ โปรเเกรม Adobe Photoshop CS6 2.3.1.2 การเรม่ิ ต้นใชง้ าน Adobe Photoshop CS6 การเร่ิมต้นใช้งาน Adobe Photoshop CS6 เบื้องต้นหลังจากท่ีทาการ ตดิ ตง้ั Adobe Photoshop CS6 เรยี บร้อยแล้ว กส็ ามารถเรยี กใชง้ านโปรแกรมด้วยวิธีการตอ่ ไปน้ี 1) Click Mouse ท่ปี ุ่ม 2) เลอื กคาสง่ั All Program > Adobe Photoshop CS6

18 รปู ท่ี 2.12 แสดงข้ันตอนการเข้าสู่โปรแกรม Adobe Photoshop CS6 รปู ท่ี 2.13 แสดงหน้าต่างโปรแกรม Adobe Photoshop CS6 รอสกั ครจู่ ะปรากฏหนา้ ตา่ งการทางาน Menu bar Toolbox Tool options bar Palettes รูปท่ี 2.14 แสดงหนา้ จอหลักการทางานของโปรแกรม Adobe Photoshop CS6

19 2.3.1.3 เครื่องมือตา่ งๆ (Toolbox) รปู ที่ 2.15 แสดงเคร่ืองมือต่างๆ (Toolbox) Adobe Photoshop CS6 ตารางท่ี 2.4 ตารางอธบิ ายเคร่ืองมือTool ต่างๆ สัญลักษณ์ ความหมาย Marquee Tool เป็นการเลอื กแบบส่เี หลี่ยมผนื ผา้ , วงกลม, แถวขนาด 1 Pixels หรือคอลมั น์ 1 Pixels Move Tool ใช้เพื่อเลื่อนสว่ นท่ีเลือก หรอื ไว้เลือ่ น Layer และ Guide ต่างๆ Lasso Tool จะใชเ้ พ่ือสรา้ ง Selection แบบอิสระ, แบบ Polygonal (ตามจดุ ทคี่ ลกิ ) และ Magnetic (ดึงเข้าหาขอบรูปภาพ) Magic Wand Tool ใชเ้ ลอื กพ้ืนทีบ่ ริเวณทีม่ ีสีเดียวกนั Crop T Crop Tool ใชใ้ นการเลือกบางสว่ นของรปู ภาพ Slice Tool ใช้ในการสร้าง Slice Slice Selection Tool ใช้เลอื ก Slice ทค่ี ุณสร้างข้นึ มา

20 ตารางที่ 2.5 ตารางอธบิ ายเคร่ืองมือ Tool ต่างๆ (ต่อ) สญั ลกั ษณ์ ความหมาย Healing Brush Tool ใช้ในการระบายสี เพอ่ื ซ่อมแซมรปู ภาพให้สมบูรณแ์ บบ Patch Tool ใชเ้ ฉพาะในบรเิ วณทีเ่ ลอื กไวเ้ ทา่ น้นั เพื่อให้เกดิ ความสมบูรณข์ องรปู ภาพ โดยใชล้ วดลาย หรอื ใชส้ ่วนทีเ่ ลอื กในภาพเปน็ ตน้ ฉบับ Brush Tool ใชใ้ นการวาดเสน้ Brush ตา่ งๆ Pencil Tool ใชใ้ นการวาดเสน้ ทมี่ ขี อบชดั เจน Clone Stamp Tool ใช้กอ็ ปป้ีรปู โดยอาศยั รูปภาพตน้ ฉบบั Pattern Stamp Tool ใชเ้ พ่ือวาดรปู โดยใชบ้ างส่วนของรูปภาพทมี่ ีอย่เู ปน็ ตน้ ฉบับ Art History Brush Tool ใช้ในการวาดรูป จาก State หรือ Snapshot ของรูปนี้โดยอาศยั รูปแบบของ Stoke ท่ีมี สไตล์หลากหลาย ช่วยใหส้ ไตล์ ของภาพดูตา่ งออกไป Eraser Tool ใชล้ บรปู ภาพหรือลบบางส่วนของพกิ เซลส์และทาการเก็บสว่ นตา่ งๆ เปน็ State ต่างๆ ใน History Palette Magic Eraser Tool ใช้ลบรปู ภาพบริเวณที่มสี ีเดียวกันใหก้ ลายเปน็ พน้ื ที่โปรง่ ใส (Transparent) โดยการคลิก เพยี งคร้งั เดยี ว Background Eraser Tool ใชล้ บรูปภาพบางสว่ นใหก้ ลายเป็นพน้ื ที่โปรง่ ใสโดยการลากเมาส์ Gradient Tools ใชเ้ พอื่ ไล่สีระหว่างสหี ลายๆ สี ในแบบตา่ งๆ Straight-line, Radial, Angle, Reflected และ Diamond Paint Bucket Tool ใชใ้ นการเตมิ สี Fill ในบริเวณท่ีเป็นสีเดียวกนั ดว้ ยสขี อง Foreground

21 ตารางที่ 2.6 ตารางอธิบายเครือ่ งมอื Tool ตา่ งๆ (ต่อ) สัญลกั ษณ์ ความหมาย Sponge Tool Sponge Tool ใช้เปลยี่ นสใี นส่วนตา่ งๆ ของรปู ภาพ โดยการปรับคา่ ความเข้มสี Burn Tool ใช้ลดความสว่างทาใหร้ ูปภาพดมู ดื ลง Path Selection Tool ใชเ้ พ่ือเลอื ก Shape หรือ Path เพ่ือแสดง Anchor Paint, Direction Line และ Direction Paint Type Tool ใช้ในการสรา้ งตวั หนงั สือลงบนรูปภาพ Type Mask Tool ใชส้ ร้าง Selection เป็นรูปรา่ งตัวหนังสอื Pen Tools ใชใ้ นการลากเสน้ Path ซ่งึ สามารถดัดโคง้ ตามรปู ภาพได้ Custom Shape Tool ใช้เลอื กรูปภาพเลือกรูปภาพที่มรี ปู ร่างเฉพาะจาก Custom Shape List Animations Tool ใช้เขียนโน๊ต หรือแนบเสียงไปกบั รปู ภาพได้ Eyedropper Tool ใชใ้ นการดูดสีจากรปู ภาพเพ่ือใชเ้ ป็นตน้ แบบของสีกบั งานชนิ้ อ่นื ๆ Measure Tool ใช้วดั ระยะหา่ ง, ตาแหนง่ และมมุ องศาระหวา่ งภาพ Hand Tool ใช้เลอื่ นภาพท่อี ยใู่ นหนา้ ต่างเดยี วกัน Zoom Tool ใชใ้ นการขยายและย่อสว่ นการแสดงภาพบนหนา้ จอ

22 2.3.1.4 การเปิดไฟลภ์ าพ (Open) 1) คลิกท่ีเมนูคาสั่ง File ที่แถบ Menu bar จากน้ันเลอื กคาสงั่ Open เปดิ มาใช้งาน รูปท่ี 2.16 แสดงการเปิดไฟลภ์ าพ (Open) 2) จะปรากฏ Dialog แสดงรายชื่อไฟล์ต่าง ๆ ดังภาพ เพ่ือเลือกไฟล์ที่ต้องการ 3) คลกิ เลือกไฟล์ท่ตี ้องการเปิดใชง้ าน จากน้นั คลกิ ปมุ่ Open Open รปู ที่ 2.17 แสดงการเปิดไฟลภ์ าพ (Open) 2.3.1.5 การสร้างไฟลใ์ หม่ (New) 1) คลิกทเ่ี มนูคาสั่ง File ทแี่ ถบ Menu bar จากนน้ั เลือกคาส่ัง New รูปที่ 2.18 การสร้างไฟล์ใหม่ (New)

23 2) จะปรากฏ Dialog สาหรบั กาหนดคุณสมบตั ติ า่ ง ๆ ของไฟล์ภาพดังน้ี รูปที่ 2.19 แสดงการกาหนดขนาดของกระดาษ - Name คือ ช่ือของช้ินงาน สามารถกาหนดใหม่เองได้ ชื่อนี้จะไป ระบุทีช่ ื่อไฟล์ตอ่ ไป - Preset คือ ขนาดงานท่ีโปรแกรมกาหนดมาให้ ซ่ึงมีหลากหลาย ขนาดให้เลอื ก หรอื สามารถกาหนดเองจากช่อง Width และ Height ได้ - Width คือ ขนาดความกว้างของงาน (จากซ้ายไปขวา) โดยกาหนด หน่วยและขนาดได้เอง จากรปู คือ 1024 Pixels - Height คือ ขนาดความกว้างของงาน (จากบนลงล่าง) โดยกาหนด หน่วยและขนาดได้เอง จากรปู คือ 768 Pixels - Resolution คือ ความละเอียดของภาพ โดยใส่ตัวเลขค่าความ ละเอียดของภาพ เช่น งานเว็บหรือรูปที่แสดงบนคอมพิวเตอร์เท่ากับ 72 pixels/inch งานส่ิงพิมพ์ เทา่ กบั 150-200 pixels/inch - Color Mode คือ โหมดสีของภาพ ซ่ึงประกอบไปด้วย โหมดสี Bitmap, Grayscale, RGB Color, CMYK Color, Lab Color - Background Contents คือ สีพ้ืนหลังของภาพ เมื่อเริ่มชิ้นงาน ใหม่ มีดังนี้ - White กาหนดใหส้ พี น้ื หลังเปน็ สขี าว - Background Color ก า ห น ด ให้ สี พื้ น ห ลั งเป็ น สี เดี ย ว กั บ Background - Transparent ไมม่ ีพื้นหลัง 3) หลงั จากกาหนดคุณสมบัติต่าง ๆ ใหค้ ลิกปุ่ม OK เพื่อเริ่มช้นิ งานใหม่

24 2.3.1.6 การบันทึกข้อมลู ลงบนไฟล์ (Save) หลังจากตกแต่งไฟล์ภาพเรียบร้อย จะต้องเก็บบันทึกข้อมูลลงบนไฟล์ (Save) สาหรับการเรียกใช้งานในครั้งต่อไป โปรแกรมมีการบันทึกข้อมูลลงบนไฟล์ (Save) อยู่ 3 ลกั ษณะ คอื 1) Save บนั ทกึ ไฟลใ์ นรูปแบบ (Format) ปกติ 2) Save As บันทึกไฟลใ์ นรูปแบบ (Format) อ่ืน ๆ ได้ เช่น JPEG, BMP, GIF เป็นต้น 3) Save for Web บันทึกไฟล์ในรูปแบบ (Format) สาหรับการ ใช้งาน บนเว็บ เชน่ ไฟล์ Html และไฟลร์ ปู ภาพ JPEG, GIF, PGN เป็นตน้ 2.3.1.7 การใชง้ านของ Save และ Save As 1) คลกิ ท่เี มนคู าสัง่ File ทีแ่ ถบ Menu bar จากนัน้ เลอื กคาสง่ั Save หรือ Save As หรือ Save for Web & Devices รูปที่ 2.20 แสดงการบันทกึ ขอ้ มูลลงบนไฟล์ (Save)

25 2) จะปรากฏ Dialog สาหรับกาหนดคุณสมบัตติ ่าง ๆ ของไฟล์ภาพ ดงั นี้ รปู ท่ี 2.21 แสดงการบันทกึ ขอ้ มูลลงบนไฟล์ (Save) - ชือ่ ไฟล์ (File Name) - รปู แบบของไฟล์ (Format) - กาหนดคณุ สมบัติของการบันทกึ ไฟล์ (Save Options) 3) As a Copy บันทึกไฟล์เป็นชื่ออื่น รูปแบบ (Format) อ่ืน ขณะที่ไฟล์ เดมิ กาลังเปิดใชง้ าน 4) Layers จะเกบ็ คุณสมบัติของ Layer ตา่ ง ๆ 5) Use Proof setup เก็บค่าโหมดสที ่จี ะใชแ้ สดงสีของภาพก่อนจะพิมพ์ 6) Thumbnail กาหนดให้ไฟล์ที่บันทึก (Save) สามารถแสดงภาพ ตัวอยา่ งใน Dialog ของการเปดิ ไฟล์ 7) Use Lower Case Extension กาหนดใหน้ ามสกลุ ไฟล์เป็นอักษรตวั เล็ก 8) หลงั จากกาหนดคณุ สมบตั ติ ่าง ๆ ให้คลกิ ปุม่ Save เพื่อบนั ทกึ ขอ้ มูล 2.3.1.8 การปรับค่าความสว่าง/ความคมชัด (Brightness/Contrast) การปรับความสว่าง-ความมืดของภาพ และการตัดกันของสีท่ีชัดเจนขึ้นนั้น สามารถทาได้โดยใช้คาสั่ง Brightness/Contrast โดยเลือกคลิกท่ี Image > Adjust > Brightness/Contrast Training Service

26 Original Brightness Contrast รูปที่ 2.22 แสดงการปรับค่าความสว่าง/ความคมชดั 2.3.2 ขัน้ ตอนการตดิ ตัง้ โปรแกรม Microsoft Office 2010 โปรแกรมไมโครซอฟต์เวิร์ด ซึ่งเป็นโปรแกรมประมวลผลคาแบบพิเศษ ชว่ ยให้สร้างเอกสารแบบมืออาชพี อย่างมีประสิทธิภาพและประหยดั เช่น เหมาะกับงานด้านการพิมพ์ เอกสารทุกชนิด สามารถพิมพ์เอกสารออกมาเป็นชุด ๆ ซึ่งเอกสารอาจเป็นจดหมาย บันทึกข้อความ รายงาน บทความ ประวัติย่อ และยังสามารถตรวจสอบ ทบทวน แก้ไข ปรับปรุงความถูกต้องในการ พิมพ์เอกสารได้อย่างง่ายดาย สามารถตรวจสอบ สะกดคา และหลักไวยากรณ์ เพ่ิมตาราง เพิ่มกราฟิก ในเอกสารได้อย่างง่ายดาย หรือเพิ่มเติมข้อมูลได้ตลอดเวลา สามารถใช้ลักษณะของการจัดพิมพ์ด้วย คอมพิวเตอร์แบบตั้งโต๊ะ (Desktop Publishing) เพ่ือสร้างโบชัวร์ (Brochures) ด้านส่ือโฆษณา (Advertisements) และจดหมายข่าว (Newsletters) ไดด้ ้วยโปรแกรมประมวลผลคา (word Processor) 2.3.2.1 การตดิ ตั้ง Microsoft Office 2010 มขี ั้นตอนดงั นี้ 1) ในโฟลเดอร์ท่ีเก็บไฟล์ติดตั้ง Microsoft Office Professional Plus 2010 Beta ใหด้ บั เบิลคลกิ ไฟล์ ProfessionalPlus.exe 2) ในหน้าไดอะล็อกบ็อกซ์ User Account Control (UAC) ใหค้ ลกิ Continue รปู ที่ 2.23 แสดงหน้าต่าง User Account Control

27 3) รอจนโปรแกรมเตรียมการเซ็ตอัพระบบแล้วเสร็จ จากน้ัน ในหน้า Read the Microsoft Software License Terms ให้เลือกเช็คบ็อกซ์หน้า I accept the terms in this agreement เสรจ็ แล้วคลิก Continue รปู ที่ 2.24 แสดงหนา้ ตา่ ง Microsoft Software License Terms 4) ในหน้า Choose the installation you want โปรแกรมจะ ให้เลือกว่าจะติดตั้งแบบดีฟอลท์หรือทาการติดต้ังโดยปรับแต่งเอง ในท่ีน้ีเลือก Install Now เพ่ือ ตดิ ตัง้ แบบดฟี อลท์ รปู ที่ 2.25 แสดงหน้าตา่ ง Choose the installation 5) ในหน้าไดอะล็อกบ็อกซ์ Installation Progress รอจนการ ตดิ ต้งั โปรแกรมแล้วเสรจ็

28 รปู ท่ี 2.26 แสดงหนา้ ตา่ ง Installation Progress 6) ในหน้าไดอะล็อกบ็อกซ์ถัดไปคลิก Close เพื่อจบการติดต้ัง Microsoft Office Professional Plus 2010 Beta รูปที่ 2.27 แสดงหนา้ ตา่ ง Successfully Installed 2.3.2.2 เริ่มต้นใช้งาน Microsoft Office 2010 1) หลงั จากทาการติดตัง้ Microsoft Office 2010 เสร็จเรียบร้อย แล้ว จากนั้นใหค้ ลกิ Start 2) คลิก Start แล้วคลิก All Programs คลิก Microsoft Office แล้วคลกิ Microsoft Word 2010

29 รปู ที่ 2.28 หนา้ ตา่ ง Office Professional Plus 2010 2.3.3 โปรแกรม Adobe Dreamweaver CS6 เป็นโปรแกรมท่ีช่วยในการสร้างเว็บไซต์ และเหมาะสมสาหรับนักพัฒนาเว็บไซต์ มือใหม่ โดยสามารถนารูปภาพหรือข้อความมาประกอบเป็นเว็บเพจ อีกท้ังยังเพ่ิมลูกเล่นต่าง ๆ เช่น เสียง ภาพเคลื่อนไหว วีดิโอ ซ่ึงไม่จาเป็นต้องรู้หลักการเขียนโปรแกรมด้วยภาษา HTML ก็สามารถ สรา้ งเวบ็ ไซต์ได้ เป็นโปรแกรมแก้ไข HTML พฒั นาโดยบริษัทแมโครมีเดยี (ปัจจบุ ันควบกจิ การรวมกับ บริษัท อะโดบีซิสเต็มส์) ดรีมวีฟเวอร์มีทั้งในระบบปฏิบัติการแมคอินทอช และไมโครซอฟท์วินโดวส์ ดรมี วีฟเวอร์ยงั สามารถทางานบนระบบปฏิบัติการแบบยูนิกซ์ ผ่านโปรแกรมจาลองอย่าง WINE ได้ 2.3.3.1 ข้ันตอนการตดิ ตัง้ โปรแกรม Adobe Dreamweaver CS6 รูปที่ 2.29 แสดงการเปิดโฟลเดอรโ์ ปรแกรม Adobe Dreamweaver CS6

30 รูปที่ 2.30 แสดงการดบั เบิ้ลคลกิ ท่ีไฟล์ Set-up.exe จากนน้ั โปรแกรมอา้ งมีการแจ้งเตอื นใหเ้ รา restart เราเลอื ก Ignore เพอื่ ดาเนนิ การต่อ ดังรปู รูปท่ี 2.31 แสดงโปรแกรมจะทาการตรวจสอบก่อนทาการติดตั้งโปรแกรม รูปที่ 2.32 แสดงเมือ่ โปรแกรมตรวจสอบเสร็จแลว้ จะเข้าส่หู นา้ จอข้อกาหนดในการตดิ ตง้ั โปรแกรม ใหเ้ ราคลิก Accept

31 รปู ที่ 2.33 แสดงการกรอก Serial Number แล้วคลกิ ท่ปี ุ่ม Next รปู ที่ 2.34 แสดงจะเข้าสู่หน้า Option ของโปรแกรม ให้เลอื ก Installs รปู ท่ี 2.35 แสดงรอให้โปรแกรมตดิ ตั้งจนเสรจ็

32 รูปที่ 2.36 แสดงหน้าเมื่อติดต้ังเสร็จจะปรากฏหนา้ จอดงั ภาพ ใหเ้ ราคลกิ Close 2.3.3.2 ข้นั ตอนการเปิดโปรแกรม Adobe Dreamweaver CS6 รูปท่ี 2.37 แสดงหนา้ ต่างการเปดิ โปรแกรม Dreamweaver โดยเข้าไปท่ี เมนู Start > Apps > Adobe Dreamweaver CS6 รปู ท่ี 2.38 แสดงเมื่อเปิดโปรแกรมคร้งั แรก จะพบหน้าจอดงั ภาพ ใหค้ ลิก Select All >> OK

33 รปู ที่ 2.39 แสดงหน้าต่างการเข้าสหู่ นา้ จอ Welcome Screen 1) Welcome Screen เป็นเคร่อื งมือสาหรบั ช่วยเลอื กขน้ั ตอน เร่ิมต้นในการใชง้ านโปรแกรมโดยตวั เลอื กจะแบ่งออกเปน็ กลุ่มๆ ดงั ภาพ - หมายเลขท่ี 1 Open a Recent Item เปิดไฟล์ที่เคยใช้ โดยคลิกเลือกจากรายชื่อท่ีแสดงอยู่ (เรียงลาดับจากท่ีเคยเปิดหลังสุดเป็นต้นไปหรือคลิก Open เพื่อ เปิดไฟล์อ่ืนๆ) - หมายเลขที่ 2 Create New สร้างไฟล์ใหม่ โดยถ้าคลิก HTML จะเป็นการสรา้ งเวบ็ เพจพื้นฐานแต่ถา้ คลิกหวั ข้ออ่ืนจะเปน็ การสร้างเว็บเพจหรือไฟล์ตามชนิดนั้นๆ - หมายเลขที่ 3 Top Features (videos) เป็นเส้นทางลัด สาหรบั เขา้ ดรู ายละเอียดและเทคนิคในการใช้งานตา่ ง ๆ ของโปรแกรมผา่ นทางเวบ็ ไซตข์ อง Adobe - หมายเลขที่ 4 เปดิ ดูคาแนะนาการใช้โปรแกรม - หมายเลขที่ 5 ดาวน์โหลดโปรแกรมหรือดูข้อมูลบน เวบ็ ไซตข์ อง Adobe - หมายเลขที่ 6 คลิก ออปชั่นนี้หากไม่ต้องการแสดง Welcome Screen อีกในครง้ั ต่อไป

34 รูปท่ี 2.40 แสดงหนา้ ตา่ งส่วนประกอบของหน้าจอโปรแกรม 2) สว่ นประกอบของหนา้ จอโปรแกรม Adobe Dreamweaver ประกอบไปด้วยสว่ นตา่ ง ๆ ดังน้ี - แถบเมนหู ลกั (Menu bar) เป็นแถบรวมรวมคาส่งั ทง้ั หมดของโปรแกรม โดยแบง่ คาสัง่ ท้งั หมดออกเปน็ หมวดหม่ตู ามลักษณะของการใชง้ าน - แถบเครอื่ งมือ (Insert Bar) เป็นแหลง่ รวมเครือ่ งมอื ซงึ่ ใช้ในการวางออบเจ็กต์ชนิดต่าง ๆ ลงบนหน้าเว็บเพจ เช่น ข้อความ รูปภาพ ลิงค์ รูปเคลื่อนไหวเป็น ต้น โดยจะแบ่งเปน็ กลมุ่ คาสั่งเพ่ือให้ใชง้ านได้สะดวก ซึง่ จะประกอบดว้ ยกลมุ่ คาส่ัง ดงั นี้ Common ใช้วางออบเจ็กต์ที่ต้องใช้งานบ่อย ๆ เช่น รูปภาพ ตาราง ไฟลม์ ัลติมเี ดยี เปน็ ตน้ Layout ใช้วางออบเจ็กต์ที่ใช้จัดโครงสร้างของ เว็บ เพจ เช่น ตาราง เฟรม และ AP element (หรอื เลเยอร์) Forms ใช้วางออบเจ็กต์ท่ีใช้ในการสร้างแบบฟอร์มรับ ขอ้ มูล เชน่ ชอ่ งรับขอ้ ความ ปุ่มตัวเลือกตา่ ง ๆ เป็นต้น Data ใช้วางคาส่ังที่ใช้การจัดการฐานข้อมูล และดึงข้อมูล จากฐานขอ้ มลู มาแสดงบนเวบ็ เพจ Spry ใช้วางออบเจก็ ตท์ ่ใี ช้เทคโนโลยขี อง Ajax jQuery Mobile ใช้สร้างหน้าเพจที่แสดงบนอุปกรณ์มือ ถือและแทบ็ เล็ตโดยใชเ้ ทคโนโลยแี บบ jQuery InContext Edting ใช้สร้างออบเจ็กต์ที่ช่วยอานวยความ สะดวกให้ผูใ้ ชง้ านสามารถแกไ้ ขเว็บเพจได้

35 Text ใช้สาหรับจัดปรับแต่งหรือจัดรูปแบบของตัวอักษร และข้อความสะดวกให้ผู้ใช้งาน เช่น หัวเรื่อง ตัวหน้า ตัวเอียง รวมทั้งแทรกสัญลักษณ์พิเศษต่าง ๆ เช่น $ (Dollar) © (Copyright) เปน็ ต้น Favorites เป็นกลุ่มที่สามารถเพ่ิมปุ่มคาส่ังท่ีใช้บ่อยจาก กลุ่มอ่นื ๆ เขา้ มาเกบ็ ไวใ้ ช้งานเอง เพื่อความสะดวกในการใชง้ าน - แถบ Document Toolbar ประกอบไปด้วยปุ่ม และ ป๊อปอัพเมนูที่ใช้กาหนดรูปแบบมุมมองของ Document Window ท่ีเรากาลังทางานอยู่และ คาสั่ง ต่างๆที่ใช้ทางานกับ Document Window อย่างเช่น การแสดงเว็บเพจที่สร้างข้ึนในเว็บบราวเซอร์ หรือ การกาหนดออปช่ันของ Document Window เป็นตน้ - พ้ืนที่สร้างงาน (Document Windows) คือ ส่วนท่ีใช้ สาหรับใส่เน้ือหาและจัดองค์ประกอบของเว็บเพจ วิธีใช้งานวินโดว์นี้จะคล้ายกับที่คุณใช้โปรแกรม เวิร์ดโปรเซสเซอร์ท่ัวไป เช่น พิมพ์ข้อความ วางภาพกราฟิก และสร้างตารางข้อมูลโดยเน้ือหาต่างๆ จะแสดงออกมาคลา้ ยกับท่ีปรากฏบนบราวเซอร์ ซง่ึ สามารถเลอื กเปดิ พ้ืนที่สรา้ งงานไดด้ ว้ ยกัน 4 มมุ มอง ตารางที่ 2.7 ตารางอธิบายเคร่อื งมอื ในแถบ Document Toolbar สญั ลักษณ์ ความหมาย แสดงเวบ็ เพจในมุมมองโค้ด แสดงเวบ็ เพจในมุมมองโคด้ และออกแบบ แสดงเว็บเพจในมุมมองออกแบบ แสดงผลโคด้ (ทางานร่วมกบั มุมมอง Live View) ตรวจสอบความถูกตอ้ งในการแสดงผลบนบราวเซอรท์ ี่เลือก ตรวจสอบความถูกตอ้ งของการใช้สไตล์ CSS ในสว่ นต่าง ๆ บน เว็บเพจโดยใช้ร่วมกบั พาเนล CSS Styles แสดงเมนสู าหรบั เลือกเปิดบราวเซอร์เพอื่ ทดสอบเวบ็ เพจ (คีย์ลัด F12) แสดงเมนูซง่ึ ประกอบด้วยคาส่ังจดั การไฟล์ ตรวจสอบความถูกต้องในการแสดงผลบนบราวเซอรท์ ่เี ลือก แสดงเมนูสาหรบั เปิด/ปดิ ลกั ษณะพเิ ศษของแท็กหรอื คาสัง่ บางอย่าง เชน่ ตาราง,เฟรม และ CSS เพ่ือชว่ ยให้การแก้ไขเว็บ เพจสะดวกข้นึ

36 ตารางที่ 2.8 ตารางอธิบายเครือ่ งมือในแถบ Document Toolbar (ตอ่ ) สญั ลกั ษณ์ ความหมาย ปรบั ปรงุ การแสดงผลของเวบ็ เพจ ใชก้ าหนดชอื่ หรอื คาอธบิ ายเวบ็ เพจ รปู ที่ 2.41 แสดงมมุ มองโค้ด (Code View) รปู ที่ 2.42 มุมมองโคด้ และออกแบบ (Code and Design View หรอื Split) รูปที่ 2.43 แสดงมมุ มองออกแบบ (Design View)

37 รูปท่ี 2.44 แสดงมมุ มองแสดงหน้าเวบ็ เหมอื นดบู นบราวเซอร์ (Live View) 1) กลุ่มพาเนลต่างๆ (Panel Groups) พาเนลเป็นกรอบเล็ก ๆ ทรี่ วบรวมเคร่ืองมอื ต่าง ๆ สาหรับใชท้ างานเฉพาะเรอ่ื งไว้ เชน่ พาเนล CSS Styles ใช้จัดการกับสไตล์ CSS และพาเนล Files ใช้จัดการกับไฟล์และโฟลเดอร์ภายในเว็บไซต์ใน Dreamweaver ประกอบไป ด้วยพาเนลจานวนมาก ซ่ึงสามารถเปิด/ปิดได้โดยเลือกคาส่ัง Window แล้วเลือกชื่อพาเนลนั้น หรือ กดคยี ์ลดั ท่แี สดงดา้ นหลังช่อื พาเนล ดังรปู รปู ที่ 2.45 แสดงมุมมองกลุ่มพาเนล . 2) ไม้บรรทัด (Ruler) ไม้บรรทัดจะปรากฏที่ด้านบนและ ด้านซ้ายของวินโดว์ Document เพื่อให้สาหรับช่วยกาหนดตาแหน่งหรือขนาดขององค์ประกอบต่าง ๆ ที่วางบนเวบ็ เพจ สาหรบั การจดั การต่าง ๆ กับไม้บรรทัดจะทาไดด้ งั น้ี - ซ่อน/แสดงไม้บรรทัด เลือกคาส่ัง View > Rulers > Show (คียลัด Ctrl +Alt +R) - ยา้ ยตาแหนง่ 0,0 ใหค้ ลกิ ลากรูป ไปวางตาแหนง่ ใหม่

38 - ย้ายตาแหน่ง 0,0 กลบั มาที่มุมซ้ายบนสดุ ให้ดับเบิลคลิก ที่ หรือคลกิ ขวาบน ไม้บรรทัดแล้วคลกิ เลอื กคาสง่ั Reset Origin 3) เปลี่ยนหน่วยวัดบนไม้บรรทัดให้คลิกขวาบนไม้บรรทัด แล้ว เลอื กหนว่ ย ซ่งึ มีดังน้ี - Pixels พกิ เซล - Inches น้วิ - Centimeters เซนตเิ มตร รูปที่ 2.46 แสดงหน้าต่างไม้บรรทัด 2.3.4 โปรแกรม Adobe Flash CS6 โปรแกรม Flash เปน็ ซอฟตแ์ วร์ที่ชว่ ยในการสร้างส่อื มลั ตมิ ีเดีย, ภาพเคลอ่ื นไหว (Animation), ภาพกราฟิกที่มีความคมชัด เน่ืองจากเป็นกราฟิกแบบเว็คเตอร์(Vector), สามารถเล่น เสียงและวีดิโอ แบบสเตริโอได้, สามารถสร้างงานให้โต้ตอบกับผู้ใช้(Interactive Multimedia) มีฟังก์ช่ันสาหรับการเขียนโปรแกรม (Action Script) และยังทางานในลักษณะ CGI โดยเช่ือมต่อกับ การเขียนโปรแกรมภาษาอื่นๆ ได้มากมาย เช่น ภาษา PHP, JSP, ASP, ASP.NET, C/C++, C#, C#.NET, VB, VB.NET, JAVAและอื่นๆ โดยเฉพาะขอ้ ดีของโปรแกรม Flash คือ ความสามารถในการบีบอดั ไฟล์ ให้ มีขนาดเล็ก มีผลทาให้แสดงผลได้อย่างรวดเร็ว นอกจากน้ันยังแปลงไฟล์ไปอยู่ในฟอร์แมตอ่ืนได้ หลากหลาย เช่น avi, mov, gif, wav, emf,eps, ai, dxf, bmp, jpg, gif, png เป็นต้น โปรแกรม Flash เร่ิมมีชอื่ เสียงประมาณปี พ.ศ. 2539 จนถึง ปัจจุบันได้ถูกนามา ใช้งานอย่างแพร่หลาย โดยเฉพาะเทคโนโลยีเว็บ ทาให้การนาเสนอทาได้อย่างน่าสนใจ นอกจากน้ัน โปรแกรม Flash ยังสามารถสร้างแอพพลิเคช่ัน (Application) เพ่ือใช้ทางานต่างๆ รองรบั การใช้งาน กับอุปกรณ์ที่ เชื่อมต่อกับระบบเครือข่ายอินเตอร์เน็ต และทางานได้กับหลายๆ แฟลตฟอร์ม (Platform)