โครงการการสร้างเว็บไซต์ร้านขายสินค้าออนไลน์ยวลใจการแว่น

การสร้างเวบ็ ไซตข์ ายสนิ ค้าออนไลน์รา้ นยวลใจการแวน่ Website Creation of Shopping for Yuanjai Kanwen Shop นายราเมศวร์ พมิ พไ์ ตรรัตน์ นายสุรเดช วงค์มุสิก โครงการนเี้ ป็นส่วนหนึง่ ของการศกึ ษาตามหลกั สูตรประกาศนยี บตั รวชิ าชีพชนั้ สงู .(ปวส.) สาขาวิชาคอมพิวเตอร์ธุรกจิ วทิ ยาลัยการอาชีพนวมินทราชินีมุกดาหาร ปีการศึกษา 2563

การสร้างเวบ็ ไซตข์ ายสนิ ค้าออนไลน์รา้ นยวลใจการแวน่ Website Creation of Shopping for Yuanjai Kanwen Shop นายราเมศวร์ พมิ พไ์ ตรรัตน์ นายสุรเดช วงค์มุสิก โครงการนเี้ ป็นส่วนหนึง่ ของการศกึ ษาตามหลกั สูตรประกาศนยี บตั รวชิ าชีพชนั้ สงู .(ปวส.) สาขาวิชาคอมพิวเตอร์ธุรกจิ วทิ ยาลัยการอาชีพนวมินทราชินีมุกดาหาร ปีการศึกษา 2563





ค หัวข้อโครงการ การสรา้ งเว็บไซต์ขายสนิ คา้ ออนไลน์รา้ นยวลใจการแวน่ Website Creation of Shopping for Yuanjai Kanwen Shop ผ้จู ดั ทาโครงการ นายราเมศวร์ พมิ พไ์ ตรรัตน์ รหสั ประจาตวั นักศึกษา 6232040006 นายสรุ เดช วงค์มสุ กิ รหสั ประจาตวั นกั ศึกษา 6232040010 ครูที่ปรึกษา นายวชั รินทร์ พันธส์ าโรง ครผู ู้สอน นางประเสริฐศรี สทุ ธพิ ันธ์ สาขาวชิ า คอมพวิ เตอรธ์ ุรกิจ ปกี ารศึกษา 2563 ……………………………………………………………………………………………….………........................................... บทคดั ยอ่ การสร้างเว็บไซต์ขายสินค้าออนไลน์ร้านยวลใจการแว่น จัดทาข้ึนโดยมีวัตถุประสงค์ 1) เพ่อื สรา้ งเว็บไซต์ขายสนิ ค้าออนไลน์ร้านยวลใจการแวน่ 2) เพื่อเพม่ิ ช่องทางการขายสนิ คา้ ออนไลน์ รา้ นยวลใจการแว่น 3) เพือ่ สารวจความพงึ พอใจผู้ใชบ้ ริการเวบ็ ไซต์ขายสนิ ค้าออนไลน์ร้านยวลใจการแว่น กลุ่มตัวอย่างท่ีใช้ในการวิจัย ได้แก่ประชากรท่ีอาศัยอยู่ตาบลป่งขาม อาเภอหว้านใหญ่ จังหวัดมุกดาหาร จานวน 357 คน เครื่องมอื ที่ใช้ในการวิจยั ครั้งน้ีได้แก่ 1) เว็บไซต์ขายสินค้าออนไลน์ร้านยวลใจการแว่น ที่คณะผู้วิจัยสร้างขึ้น 2) แบบสอบถามความพึงพอใจในการเข้าใช้งานเว็บไซต์ขายสินค้าออนไลน์ รา้ นยวลใจการแว่น ผลการศึกษา การสร้างเว็บไซต์ขายสินค้าออนไลน์ร้านยวลใจการแว่นพบว่า เว็บไซต์ขาย สินค้าออนไลน์ร้านยวลใจการแว่น ท่ีคณะผู้วิจัยสร้างข้ึนสามารถเพ่ิมช่องทางการขายสินค้าให้กับ ร้านยวลใจการแว่น เน่ืองจากทาให้ร้านฯ มีเว็บไซต์ในการเผยแพร่ประชาสัมพันธ์ข้อมูลข่าวสาร และการบรกิ ารจากทางร้านมีความสะดวกมากย่ิงข้นึ ผลการวิจยั พบว่าความพงึ พอใจของผู้ใชง้ านเว็บไซต์ขายสินคา้ ออนไลน์ร้านยวลใจการแว่น โดยภาพรวมระดับความพึงพอใจอยู่ในระดับดีมาก มีค่าเฉลี่ยเท่ากับ 4.65 ค่าเบี่ยงเบนมาตรฐาน เท่ากบั 0.60

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

สารบญั จ เรือ่ ง หน้า ใบรบั รองโครงการ ก ใบแหง่ ลิขสิทธิ์ ข บทคัดยอ่ ค กิตติกรรมประกาศ ง สารบัญ จ สารบญั (ต่อ) ฉ สารบัญตาราง ช สารบญั รูป ซ สารบัญรูป (ต่อ) ฌ สารบัญรูป (ต่อ) ญ สารบญั รูป (ต่อ) ฎ บทท่ี 1 บทนา 1 1 1.1 ความเปน็ มาและความสาคัญของปัญหา 1 1.2 วัตถุประสงคข์ องโครงการ 2 1.3 เปา้ หมายและขอบเขตของโครงการ 3 1.4 แผนงานและระยะเวลาดาเนินการ 4 1.5 ประโยชนท์ ีค่ าดว่าจะไดร้ ับ 4 1.6 นิยามศัพท์เฉพาะ 5 บทท่ี 2 ทฤษฎแี ละงานวิจัยที่เก่ียวขอ้ ง 5 2.1 ความหมายและประวตั คิ วามเปน็ มาของเว็บไซต์ 6 2.2 หลกั การออกแบบและพัฒนาเวบ็ ไซต์ 15 2.3 โปรแกรมทใ่ี ชพ้ ัฒนาระบบ 54 2.4 ทฤษฎีท่ีเกี่ยวข้องในการพฒั นาระบบงาน 58 2.5 งานวจิ ยั ท่เี กย่ี วข้อง 61 บทท่ี 3 วธิ ีดาเนินการ 61 3.1 ประชากรและกลุมตวั อย่าง 61 3.2 เครอื่ งมือท่ใี ช้ในการพัฒนาระบบและวเิ คราะห์ขอ้ มูล 62 3.3 การเก็บรวบรวมขอ้ มูล

สารบญั (ต่อ) ฉ เรือ่ ง หน้า 3.4 การวเิ คราะห์ข้อมลู 63 3.5 ขน้ั ตอนการดาเนินงานสร้างเว็บไซต์ 63 73 บทท่ี 4 ผลการวิเคราะหข์ อ้ มลู 73 4.1 ผลการพฒั นาระบบ 84 4.2 ผลการวิเคราะหข์ อ้ มูล 89 89 บทท่ี 5 สรุป และข้อเสนอแนะ 90 5.1 สรุปผลการศกึ ษา 91 5.2 อภปิ รายผล 92 5.3 ข้อเสนอแนะ 93 94 บรรณานกุ รม 107 ภาคผนวก 109 112 ก. แบบเสนอเคา้ โครงโครงการ 117 ข. รายงานการพบครทู ีป่ รกึ ษาโครงการ 120 ค. ตวั อย่างแบบประเมนิ ความพึงพอใจ 128 ง. แบบประเมนิ ความพงึ พอใจออนไลน์ 132 จ. เอกสารการเผยแพร่/สง่ มอบ 135 ฉ. คมู่ ือการใชง้ านเวบ็ ไซต์ ช. ตารางแสดงผลการวเิ คราะหข์ ้อมูลด้วยโปรแกรมทางสถติ ิ ซ. ภาพกิจกรรมการดาเนนิ โครงการ ฌ. ประวัติผูจ้ ัดทา

สารบญั ตาราง ช ตารางท่ี หน้า 1.1 ตารางแสดงแผนการดาเนินงาน 3 2.1 ตารางอธิบายเคร่ืองมือ Tool ต่างๆ 21 2.2 ตารางอธิบายเคร่ืองมือในแถบ Document Toolbar 40 4.1 ทดสอบการทางานหน้าหลัก 74 4.2 ทดสอบการทางานหน้าสนิ ค้าทง้ั หมด 75 4.3 ทดสอบการทางานหน้ารีวิวสนิ คา้ 75 4.4 ทดสอบการทางานหนา้ Login Member 76 4.5 ทดสอบการทางานหนา้ สมัครสมาชิก 77 4.6 ทดสอบการทางานหนา้ รวมสินค้าทส่ี ง่ั ซ้ือ 77 4.7 ทดสอบการทางานหน้ารอการชาระสินค้า 78 4.8 ทดสอบการทางานหน้า Login Admin 79 4.9 ทดสอบการทางานหน้าแรก Admin 79 4.10 ทดสอบการทางานหนา้ สมาชกิ ทัง้ หมด 80 4.11 ทดสอบการทางานหนา้ ระบบสนิ คา้ ทั้งหมด 81 4.12 ทดสอบการทางานหนา้ จดั การสินค้าทีส่ ัง่ ซื้อ 81 4.13 ทดสอบการทางานหน้าจัดการประเภทสินค้าท้ังหมด 82 4.14 ทดสอบการทางานหนา้ ดูข้อมลู ประเภทสนิ คา้ 83 4.15 ทดสอบการทางานหน้าเพิ่มประเภทสนิ คา้ 83 4.16 ค่าร้อยละของข้อมูลทั่วไปของผู้ตอบแบบประเมนิ 84 4.17 แสดงคา่ เฉลยี่ และส่วนเบี่ยงเบนมาตรฐานด้านที่ 1 86 4.18 แสดงคา่ เฉลีย่ และสว่ นเบยี่ งเบนมาตรฐานด้านที่ 2 87 4.19 แสดงคา่ เฉล่ยี และส่วนเบีย่ งเบนมาตรฐานดา้ นที่ 3 88

สารบัญรปู ซ รปู ที่ หน้า 2.1 รปู โครงสร้างแบบเรยี งลาดับ 6 2.2 โครงสร้างแบบลาดับขัน้ 7 2.3 โครงสร้างแบบตาราง 7 2.4 โครงสรา้ งแบบใยแมงมมุ 8 2.5 โครงสรา้ งของเว็บ 11 2.6 การเช่อื มโยงเว็บเพจ 11 2.7 การตัง้ ช่ือไฟล์ 12 2.8 การออกแบบเวบ็ เพจ 12 2.9 การเขยี นโปรแกรมดว้ ยภาษา HTML 13 2.10 การลงทะเบียนขอพ้นื ท่ีเวบ็ ไซต์ 13 2.11 การอัพโหลดเวบ็ 14 2.12 การเรยี กดเู วบ็ ไซต์ 14 2.13 แสดงเขา้ ไปยงั โฟลเดอร์ของ Photoshop 16 2.14 แสดงการตรวจสอบก่อนทาการตดิ ต้ังโปรแกรม 16 2.15 แสดงโปรแกรมตรวจสอบเสรจ็ 16 2.16 แสดงการกรอก Serial Number 17 2.17 แสดงการเลือกการตดิ ตงั้ ของโปรแกรม 17 2.18 แสดงหน้าการโหลดของโปรแกรม 18 2.19 แสดงการเสร็จส้นิ การติดตง้ั โปรเเกรม Adobe Photoshop CS6 18 2.20 แสดงขน้ั ตอนการเขา้ ส่โู ปรแกรม Adobe Photoshop CS6 19 2.21 แสดงหนา้ ต่างโปรแกรม Adobe Photoshop CS6 19 2.22 แสดงหนา้ จอหลกั การทางานของโปรแกรม Adobe Photoshop CS6 20 2.23 แสดงเคร่อื งมือต่างๆ (Toolbox) 20 2.24 แสดงการเปดิ ไฟล์ภาพ (Open) 24 2.25 แสดงการเปิดไฟลภ์ าพ (Open) 24 2.26 การสรา้ งไฟลใ์ หม่ (New) 25 2.27 แสดงการกาหนดขนาดของกระดาษ 25

สารบัญรปู (ตอ่ ) ฌ ภาพท่ี หน้า 2.28 แสดงการบันทึกขอ้ มลู ลงบนไฟล์ (Save) 27 2.29 แสดงการบันทึกขอ้ มลู ลงบนไฟล์ (Save) 27 2.30 แสดงการปรับค่าความสวา่ ง/ความคมชัด 28 2.31 แสดงหนา้ ตา่ ง User Account Control 29 2.32 แสดงหน้าต่าง Microsoft Software License Terms 30 2.33 แสดงหนา้ ตา่ ง Choose the installation 30 2.34 แสดงหน้าตา่ ง Installation Progress 31 2.35 แสดงหนา้ ต่าง Successfully Installed 31 2.36 หน้าตา่ ง Office Professional Plus 2010 32 2.37 แสดงการเปดิ โฟลเดอร์โปรแกรม Adobe Dreamweaver CS6 33 2.38 แสดงการดบั เบล้ิ คลกิ ท่ีไฟล์ Set-up.exe 33 2.39 แสดงโปรแกรมจะทาการตรวจสอบกอ่ นทาการติดต้ังโปรแกรม 33 2.40 แสดงเม่อื โปรแกรมตรวจสอบเสร็จแลว้ 34 2.41 แสดงการกรอก Serial Number 34 2.42 แสดงจะเข้าส่หู น้า Option ของโปรแกรม 35 2.43 แสดงรอให้โปรแกรมติดตั้งจนเสรจ็ 35 2.44 แสดงหนา้ เมื่อติดต้ังเสร็จ 36 2.45 แสดงหนา้ ต่างการเปิดโปรแกรม Dreamweaver 36 2.46 แสดงเมอ่ื เปิดโปรแกรมคร้งั แรก 37 2.47 แสดงหน้าต่างการเข้าสู่หน้าจอ Welcome Screen 37 2.48 แสดงหน้าตา่ งสว่ นประกอบของหนา้ จอโปรแกรม 38 2.49 แสดงมุมมองโค้ด (Code View) 41 2.50 มุมมองโคด้ และออกแบบ 41 2.51 แสดงมุมมองออกแบบ 41 2.52 แสดงมุมมองแสดงหนา้ เว็บเหมือนดบู นบราวเซอร์ 42 2.53 แสดงมมุ มองกลมุ่ พาเนล 42 2.54 แสดงหน้าต่างไมบ้ รรทัด 43 2.55 แสดงการเข้าส่โู ปรแกรม Adobe Flash CS6 44 2.56 แสดงหน้าต่างเร่ิมการทางานของ Adobe Flash CS6 44

ญ สารบญั รปู (ตอ่ ) ภาพท่ี หน้า 2.57 แสดงหนา้ ต่างส่วนประกอบของโปรแกรม Adobe Flash CS6 45 2.58 แสดงหนา้ ต่างสว่ นประกอบของโปรแกรม Adobe Flash CS6 45 2.59 แสดงหน้าตา่ งเมนบู าร์ (Menu Bar) 46 2.60 แสดงหนา้ ตา่ งทลู บ๊อกซ์ (Toolbox) 46 2.61 แสดงหนา้ ตา่ ง Timeline 47 2.62 แสดงหน้าต่างพืน้ ท่วี ่างสาหรบั วางวตั ถุแบบช่ัวคราว 48 2.63 แสดงหนา้ ตา่ งคุณสมบัตติ า่ ง ๆ ของออบเจก็ ต์ 48 2.64 แสดงหนา้ ต่างเลือกใช้สีและผสมสีตามท่ีตอ้ งการ 49 2.65 แสดงหนา้ ตา่ งควบคุมเก่ียวกบั ชดุ วตั ถุของโปรแกรม 49 2.66 แสดงการหาเว็บโฮสติ้งทดี่ ีต้องคานึงถงึ ส่งิ ใดบ้าง 50 2.67 แสดงหนา้ ต่างโดเมนเนมเม่อื เราจดทะเบียนแล้ว 50 2.68 แสดงหนา้ ตา่ งของโปรแกรม SPSS 51 2.69 แสดงหน้าตา่ งการกรอกข้อมลู จากแบบสอบถาม 52 2.70 แสดงหน้าต่างการหาค่ารอ้ ยละ 52 2.71 แสดงหนา้ ต่างแบบฟอร์มทใ่ี ชเ้ ก็บข้อมลู ใน Google Form 53 2.72 แสดงหน้าตา่ งของการออกแบบ 53 3.1 แสดงแผนผังโครงสร้างการทางานของเว็บไซต์ขายสินค้าออนไลน์รา้ นยวลใจการแว่น 64 3.2 แสดงสว่ นแสดงผล 65 3.3 แสดง Context Diagram 66 3.4 Process Decomposition Diagram ขายแวน่ ออนไลน์ 67 3.5 แผนภาพกระแสข้อมลู ระดบั ท่ี 1 ของระบบขายแวน่ ออนไลน์ 68 3.6 แผนภาพกระแสข้อมลู ระดบั ท่ี 2 โปรเซสจัดการข้อมูลสมาชกิ 69 3.7 แผนภาพกระแสข้อมลู ระดบั ที่ 2 โปรเซสจัดการขอ้ มูลการส่ังซอ้ื 70 3.8 แผนภาพกระแสข้อมูลระดับท่ี 2 โปรเซสแจ้งการชาระเงนิ 71 3.9 แผนภาพกระแสข้อมลู ระดบั ท่ี 2 โปรเซสจัดการข้อมูลหลัก 72 4.1 แสดงการทดสอบหนา้ หลัก 74 4.2 แสดงการทดสอบ 74 4.3 แสดงการทดสอบหนา้ รีวิวสนิ ค้า 75 4.4 แสดงการทดสอบหน้า Login Member 76

สารบญั รูป (ต่อ) ฎ ภาพที่ หน้า 4.5 แสดงการทดสอบหน้าสมัครสมาชกิ 76 4.6 แสดงการทดสอบหน้ารวมสนิ ค้าทสี่ ่งั ซื้อ 77 4.7 แสดงการทดสอบหนา้ รอการชาระสินคา้ 78 4.8 แสดงการทดสอบหน้า Login Admin 78 4.9 แสดงการทดสอบหน้าแรก Admin 79 4.10 แสดงการทดสอบหนา้ สมาชกิ ท้ังหมด 80 4.11 แสดงการทดสอบหน้าระบบสินค้าทั้งหมด 80 4.12 แสดงการทดสอบหน้าจัดการสินคา้ ที่สงั่ ซื้อ 81 4.13 แสดงการทดสอบหน้าจัดการประเภทสนิ ค้าทงั้ หมด 82 4.14 แสดงการทดสอบหน้าดูข้อมลู ประเภทสินคา้ 82 4.15 แสดงการทดสอบหนา้ เพ่มิ ประเภทสนิ ค้า 83

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

2 1.3 เป้ำหมำยและขอบเขตของโครงกำร 1.3.1 เปำ้ หมำยของโครงกำร 1.3.1.1 เปา้ หมายเชงิ ปริมาณ 1) ไดเ้ วบ็ ไซตข์ ายสินคา้ ออนไลนร์ ้านยวลใจการแว่น จานวน 1 เว็บไซต์ 2) ไดง้ านวิจยั ศกึ ษาความความพึงพอใจของผู้ใช้บริการเว็บไซต์ขายสินคา้ ออนไลน์ ร้านยวลใจการแว่น จานวน 1 เล่ม 3) ได้คู่มือการใช้งานเวบ็ ไซต์ขายสินคา้ ออนไลน์รา้ นยวลใจการแว่น จานวน 1 เล่ม 1.3.1.2 เป้าหมายเชงิ คุณภาพ 1) เป็นสือ่ กลางในการซ้ือขายสนิ ค้าและประชาสมั พันธ์ข้อมูลข่าวสาร ตา่ งๆ ผ่านระบบเครอื ข่ายอนิ เตอร์เน็ต 2) เปน็ การเพมิ่ ช่องทางการขายสนิ คา้ และบริการ ร้านยวลใจการแวน่ 3) ผู้เข้าใชง้ านเว็บไซต์ขายสินค้าออนไลน์ ร้านยวลใจการแว่น มีความ พึงพอใจในการเข้าใชง้ านอยู่ในระดบั มาก 1.3.2 ขอบเขตของโครงกำร 1.3.2.1 กำรแสดงผลหนำ้ หลัก (Home page) 1) มีการแสดงผลการโฆษณาสนิ ค้า 2) มีการแสดงผลสินค้าทล่ี ูกค้าใหค้ วามสนใจ 3) มีระบบการสืบคน้ สนิ คา้ 1.3.2.2 ระบบจัดกำรสมำชกิ (User) 1) มีการสมคั รสมาชกิ ใหม่ 2) มกี ารเข้าสรู่ ะบบ Login 3) มแี ก้ไขขอ้ มลู สมาชกิ (Profile) 1.3.2.3 ระบบกำรสง่ั ซ้อื (Order) 1) มีระบบตะกรา้ สินคา้ 2) มกี ารคานวณราคาของสนิ คา้ อตั โนมัติ 3) มีการแกไ้ ข หรอื ยกเลกิ สินค้าในตะกรา้ สนิ คา้ 4) มีการยนื ยันการส่งั ซ้อื สนิ ค้า 5) มีการแสดงสถานะการสงั่ ซอ้ื สนิ ค้า

3 1.3.2.4 มีระบบกำรชำระเงิน (Payment) 1) มชี อ่ งทางการชาระเงนิ 2) มกี ารตรวจสอบการชาระเงิน 1.3.2.5 มีระบบบรหิ ำรจัดกำรเว็บไซตข์ ำยสินค้ำออนไลน์ 1) มีระบบจัดการสมาชกิ เพิ่ม ลบ แก้ไข ค้นหาข้อมูลสมาชิก 2) มรี ะบบจัดการสนิ ค้า เพม่ิ ลบ แกไ้ ข ค้นหา รายละเอียดสนิ ค้า 3) มีการเกบ็ ขอ้ มลู การสัง่ ซ้อื สินคา้ 4) มีระบบการสง่ เสรมิ การขาย (Promotion) 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 ข้นั เตรยี มกำร สอบเค้าโครง ศกึ ษาข้อมูล ข้นั ดำเนนิ กำร สร้างชนิ้ งาน ตรวจสอบความสมบูรณ์ ขั้นสรปุ และประเมินผล สรุปผล จดั ทารูปเลม่ นาเสนอ/เผยแพร่

4 1.5 ประโยชนท์ ีค่ ำดว่ำจะไดร้ บั 1.5.1 ได้เวบ็ ไซต์ขายสินคา้ ออนไลน์ร้านยวลใจการแวน่ 1.5.2 ได้งานวจิ ัยศกึ ษาความความพงึ พอใจของผใู้ ช้บริการเว็บไซตข์ ายสินค้าออนไลน์ ร้านยวลใจการแวน่ 1.5.3 ได้คู่มอื การใชง้ านเวบ็ ไซต์ขายสินคา้ ออนไลนร์ ้านยวลใจการแวน่ 1.5.4 ไดช้ ่องทางการขายสนิ ค้าและบรกิ ารรา้ นยวลใจการแว่นขึ้นมาอกี 1 ช่องทาง 1.6 นิยำมศพั ทเ์ ฉพำะ 1.6.1 เวิลด์ไวด์เว็บ (World Wide Web : WWW) คือพื้นท่ีท่ีเก็บข้อมูลข่าวสาร ที่เช่ือมต่อกันทางอนิ เทอร์เนต็ โดยการกาหนดยูอาร์แอล คาว่าเวิลด์ไวด์เว็บมักจะใชส้ ับสนกบั คาว่า อินเทอรเ์ นต็ จริง ๆ แล้วเวลิ ดไ์ วด์เวบ็ เปน็ เพียงแค่บรกิ ารหน่งึ บนอินเทอรเ์ นต็ 1.6.2 เว็บเพจ (Web Page) คือ หน้า ๆ หนึ่งท่ีเปิดดูผ่านเวิลด์ไวด์เว็บ โดยจะถูกสร้าง ขึน้ มาบนพนื้ ฐานของภาษาคอมพิวเตอร์เช่น HTML หรืออ่นื ๆ 1.6.3 โฮมเพจ (Home Page) คือ เว็บเพจหนง่ึ หน้าทม่ี กั เปน็ หน้าแรก และหน้าหลักเมอ่ื เข้าชม โดยมกั แสดงถงึ ภาพรวมของเนื้อหาทั้งหมดว่ามีอะไรบ้าง และทาหน้าท่ีเชื่อมโยงไปยังเว็บเพจ อื่น ๆ ทเ่ี ก่ียวขอ้ งในเว็บไซต์ 1.6.4 เวบ็ เซิร์ฟเวอร์ (Web Server) คือ เคร่ืองคอมพิวเตอร์ท่ีเก็บข้อมูลของเว็บไซต์ไว้ และทาหนา้ ท่สี ง่ ข้อมูลกลบั ไปยงั เว็บเบราว์เซอรข์ องเครอ่ื งรบั บรกิ าร เมือ่ ไดร้ ับการรอ้ งขอขอ้ มูล ขอ้ มลู ทั้งหมดทใี่ ชง้ านผา่ นเวลิ ด์ไวดเ์ วบ็ จะดึงมาจากเวบ็ เซิรฟ์ เวอร์ 1.6.5 เว็บโฮสต้ิง (Web Hosting) คือ พื้นที่บนเครือข่ายอินเทอร์เน็ตที่เปิดให้บริการ สาหรับเกบ็ ขอ้ มูลท่ีแสดงบนเว็บไซต์ โดยจะมีท้ังในรปู แบบฟรแี ละรูปแบบท่ตี ้องเสยี ค่าบริการ โดยจะ มขี ้อดขี ้อเสยี แตกต่างกนั ไป 1.6.6 โดเมนเนม (Domain Name) คือ ชอื่ ของเวบ็ ที่ใช้เรียกบนอินเทอร์เน็ต และใชใ้ น การระบเุ พ่ือเขา้ ถึงเวบ็ ไซต์ต่าง ๆ โดยในระยะแรกนั้นจะเป็นไอพีแอดเดรสที่ใชใ้ นการทางาน ซ่ึงเป็น ตัวเลขท่ียาว ยากต่อการจดจา ต่อมาจึงได้มกี ารนาโดเมนเนมมาใช้แทนที่ ซึ่งเป็นตัวอกั ษรทอี่ ่านและ จดจาได้งา่ ยกว่า โดยการตงั้ ชอื่ โดเมนเนมจะต้องไมซ่ า้ กบั ท่เี คยมีคนต้ัง และใชง้ านไปแลว้ 1.6.7 ไอพีแอดเดรส (IP Address) คือ รูปแบบหน่ึงของการระบุที่ตั้งของข้อมูลใน เครือขา่ ย รวมถงึ อินเทอร์เนต็ โดยจะอยู่ในรูปของ x.x.x.x แทนด้วยตวั เลข โดยอาจมีรูปแบบอืน่ ตาม ลกั ษณะท่ใี ชง้ าน

บทที่ 2 ทฤษฎีที่เกีย่ วขอ้ ง โครงการการสร้างเว็บไซต์ขายสินค้าออนไลน์ร้านยวลใจการแว่น ผู้จัดทาโครงการ ได้ทาการศึกษาหลักการ ทฤษฎีที่และเทคโนโลยีที่เก่ียวข้อง ที่สามารถนามาประยุกต์ใช้งาน โดยแบ่ง ออกเปน็ หวั ขอ้ ตา่ งๆดงั ต่อไปน้ี 2.1 ความหมายและประวตั ิความเป็นมาของเว็บไซต์ 2.2 หลกั การออกแบบและพฒั นาเวบ็ ไซต์ 2.3 โปรแกรมท่ีใชใ้ นการพัฒนาระบบงาน 2.4 ทฤษฎีทเี่ ก่ยี วข้องในการพัฒนาระบบงาน 2.5 งานวจิ ัยทีเ่ กยี่ วขอ้ ง 2.1 ความหมายและประวตั คิ วามเปน็ มาของเว็บไซต์ 2.1.1 เว็บไซต์ (Website) หมายถึง หน้าเว็บเพจที่จัดทาขึ้น เพ่ือนาเสนอข้อมูลต่าง ๆ ผ่านทางคอมพิวเตอร์และอินเทอร์เน็ต โดยจะมีหน้าเว็บเพจหลาย ๆ หน้าที่เชื่อมโยงเข้ากับไฮเปอร์ ล้ิงค์ เพื่อให้สามารถเปิดไปยังหน้าเพจต่าง ๆ ได้อย่างง่ายดายและถูกจัดเก็บไว้ใน www (เวิลด์ไวด์เว็บ) โดยเว็บไซต์ส่วนใหญ่น้ันก็มีท้ังเว็บไซต์ที่เปิดให้เข้าชมได้ฟรี และเว็บไซต์ท่ีต้องสมัคร สมาชิกและเสียค่าบริการ จึงจะเข้าใช้งานเว็บได้ ซ่ึงข้อมูลในเว็บก็จะมีหลากหลายแบบ ขึ้นอยู่กับ ความต้องการนาเสนอของเจ้าของเวบ็ ไซต์ การเรียกดูเว็บไซตจ์ ะเรียกดูผ่านทางซอฟต์แวร์ ในลกั ษณะ ของเบราว์เซอร์ 2.1.2 ประวัติความเป็นมาของเว็บไซต์ เมื่อปี ค.ศ.1990 นักวิทยาศาสตร์จากห้องทดลอง ของสถาบัน CERN ห้องปฏิบัติการฟิสิกส์ ที่ต้ังอยู่ ณ นคร Geneva ประเทศสวิตเซอร์แลนด์ นาม Tim Berners-Lee ได้สร้างระบบส่ือสารผ่านเครือข่ายคอมพิวเตอร์ รูปแบบใหม่ ซ่ึงเรียกว่า hypertext ผลที่ออกมาคือมีการสร้างโพรโทคอลแบบ HTTP ขึ้น นามาใช้ในการส่งสารสนเทศต่าง ๆ โดยมันถูกจัด อยู่ในรูปแบบใหม่ท่ีเรียกว่า HTML จากการส่ือสารสืบค้นสารสนเทศรูปแบบใหม่น้ี ทาให้ผู้คน ติดต่อสื่อสารกันได้อย่างรวดเร็วมากขึ้น อีกทั้งยังส่งเป็นทั้งข้อความ ภาพ และเสียงได้อีกด้วย จากการวิจัยดังกล่าวทาให้ในปัจจุบันได้มีการคิดค้นพร้อมสร้างสรรค์รูปแบบเพื่อยกระดับการส่ือสาร ระหว่างมนุษย์ด้วยกันโดยอาศัยเครือข่ายคอมพิวเตอร์เป็นตัวเช่ือมโยง ทาให้ WWW กลายเป็นเครื่องมือ ท่ีใช้การติดต่อส่ือสารผ่านเครือข่ายขนาดใหญ่ที่สุดในโลกจากเว็บเพจ โฮมเพจ จัดเป็นองค์ประกอบ หนงึ่ ของเวบ็ ไซตเ์ มื่อเข้าไปในเว็บไซต์แลว้ สารสนเทศหรอื ข้อมูลต่าง ๆ ที่คณุ ต้องการสืบค้นก็คอื หนา้ ของ เอกสารซึ่งปรากฏอยู่บนหนา้ จอคอมพวิ เตอร์

6 2.1.3 ประเภทของเว็บไซต์ 2.1.3.1 เว็บไซต์ประชาสัมพันธ์องค์กร (Corporate Website) จัดทาขึ้นเพื่อ นาเสนอขอ้ มูลและข่าวสารสาหรบั องค์กร 2.1.3.2 เว็บไซต์บริการหรือเว็บไซต์ชุมชน (Community & Service Website) จัดทาขึ้นเพอื่ เปน็ เครื่องมือในการสร้างชุมชน หรอื ให้บริการแกล่ กู คา้ หรือสมาชกิ ขององค์กรหรือบรษิ ัทนั้น 2.1.3.3 เว็บไซต์จาหน่ายสินค้าหรือบริการออนไลน์ (E-Commerce Website) จดั ทาข้นึ เพ่อื ใช้ในการทาตลาดหรือขายสินคา้ หรอื บริการผา่ นเวบ็ ไซต์ 2.1.3.4 เว็บไซต์นาเสนอส่ือผสม (Multimedia & Presentation Website) เว็บไซต์ มีการนาเอาเทคโนโลยีใหม่ ๆ ที่ทันสมัยมาใช้ในการนาเสนอ เช่น ภาพเคล่ือนไหว (Animation), เสยี ง (Sound), หรอื ภาพวีดีโอ (VDO Streaming) นาเสนอผา่ นเวบ็ ไซต์ 2.2 หลกั การออกแบบและพัฒนาเวบ็ ไซต์ 2.2.1 การวางโครงสรา้ งเว็บไซต์ 2.2.1.1 เว็บท่ีมีโครงสร้างแบบเรียงลาดับ (Sequential Structure) เป็น โครงสร้างแบบธรรมดาท่ีใช้กันมากที่สุดเน่ืองจากง่ายต่อการจัดระบบข้อมูล ข้อมูลที่นิยม จัดด้วย โครงสร้างแบบน้ีมักเป็นข้อมูลท่ีมีลักษณะเป็นเรื่องราวตามลาดับของเวลา เช่น การเรียงลาดับตาม ตัวอักษร ดรรชนี สารานุกรม หรืออภิธานศัพท์ โครงสร้างแบบนี้ เหมาะกับเว็บไซต์ที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อนใช้การลิงก์ (Link) ไปทีละหน้า ทิศทางของการเข้าสู่เน้ือหา (Navigation) ภายใน เว็บจะเป็นการดาเนินเร่ืองในลักษณะเส้นตรง โดยมี ปุ่มเดินหน้า-ถอยหลังเป็นเครื่องมือหลักในการ กาหนดทิศทาง ข้อเสียของโครงสร้างระบบน้ีคือ ผู้ใช้ไม่สามารถกาหนดทิศทางการเข้าสู่เนื้อหาของตนเอง ได้ ทาใหเ้ สียเวลาเขา้ สู่เนื้อ รปู ท่ี 2.1 รปู โครงสรา้ งแบบเรียงลาดบั (Sequential Structure) 2.2.1.2 เว็บท่ีมีโครงสร้างแบบลาดับข้ัน (Hierarchical Structure) เป็นวิธีที่ดี ท่ีสุดวิธีหน่ึงในการจัดระบบโครงสร้างที่มีความซับซ้อนของข้อมูล โดยแบ่งเนื้อหา ออกเป็นส่วนต่างๆ และมรี ายละเอียดย่อยๆ ในแต่ละสว่ นลดหลน่ั กันมาในลกั ษณะแนวคดิ เดยี วกบั แผนภูมอิ งค์กร จึงเป็น การง่ายต่อการทาความเข้าใจกับโครงสร้างของเนื้อหาในเว็บลักษณะนี้ ลักษณะเด่นเฉพาะของ เว็บ ประเภทนี้คอื การมีจุดเรมิ่ ต้นท่ีจุดร่วมจดุ เดยี ว น่ันคือ โฮมเพจ (Homepage) และเชอื่ มโยงไปสู่เนือ้ หา ในลักษณะเป็นลาดบั จากบนลงลา่ ง

7 รูปที่ 2.2 โครงสรา้ งแบบลาดับขน้ั (Hierarchical Structure) 2.2.1.3 เว็บท่ีมีโครงสร้างแบบตาราง (Grid Structure)โครงสร้างรปู แบบนม้ี ี ความซบั ซ้อนมากกว่ารูปแบบทผี่ ่านมา การออกแบบเพิม่ ความยดื หยุ่น ให้แก่การเขา้ สเู่ น้ือหาของผใู้ ช้ โดยเพมิ่ การเช่ือมโยงซ่งึ กนั และกนั ระหว่างเนอ้ื หาแตล่ ะส่วน เหมาะแก่ การแสดงให้เหน็ ความสมั พันธ์ กนั ของเนื้อหา การเขา้ ส่เู น้ือหาของผ้ใู ช้จะไม่เปน็ ลักษณะเชิงเส้นตรง เนอื่ งจากผใู้ ชส้ ามารถเปลี่ยนทศิ ทางการเขา้ ส่เู นื้อหาของตนเองได้ รูปที่ 2.3 โครงสรา้ งแบบตาราง (Grid Structure) ในการจัดระบบโครงสร้างแบบน้ี เน้ือหาท่ีนามาใช้แต่ละส่วนควรมี ลกั ษณะท่ีเหมอื นกนั และ สามารถใช้รปู แบบร่วมกัน หลกั การออกแบบคือนาหัวขอ้ ท้ังหมดมาบรรจลุ ง ในทเ่ี ดียวกันซ่ึงโดยทั่วไปจะเป็นหน้าแผนภาพ (Map Page) ท่ีแสดงในลักษณะเดียวกับโครงสรา้ งของ เวบ็ เม่ือผูใ้ ช้คลิกเลือก หัวขอ้ ใด ก็จะเขา้ ไปส่หู น้าเน้ือหา (Topic Page) ทแ่ี สดงรายละเอยี ดของหัวข้อ น้ันๆ และภายในหน้านั้น ก็จะมีการเช่ือมโยงไปยังหน้ารายละเอียดของหัวข้ออื่นท่ีเป็นเรื่องเดียวกัน นอกจากน้ียังสามารถนา โครงสร้างแบบเรียงลาดับและแบบลาดับขั้นมาใช้ร่วมกันได้อีกด้วย ถึงแม้ โครงสร้างแบบน้ี อาจจะสร้างความยุ่งยากในการเข้าใจได้ และอาจเกิดปัญหาการคงค้าง ของหัวข้อ (Cognitive Overhead) ได้ แต่จะเป็นประโยชน์ทส่ี ุดเม่ือผู้ใชไ้ ดเ้ ข้าใจถึงความสัมพันธ์ ระหวา่ งเนื้อหา ในส่วนของการออกแบบจาเป็นจะต้องมีการวางแผนที่ดี เนื่องจากมีการเชื่อมโยงที่เกิดข้ึน ได้หลาย ทิศทาง นอกจากนี้การปรับปรงุ แก้ไขอาจเกิดความยุ่งยากเม่ือต้องเพ่ิมเนื้อหาในภายหลัง

8 2.2.1.4 เว็บท่ีมีโครงสร้างแบบใยแมงมุม (Web Structure)โครงสร้างประเภทนี้ จะมีความยืดหยุ่นมากท่ีสุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกัน ได้หมด เป็นการสร้างรูปแบบ การเข้าส่เู นอื้ หาที่เป็นอิสระ ผู้ใช้สามารถกาหนดวธิ ีการเข้าสูเ่ นอื้ หาได้ด้วย ตนเอง การเช่ือมโยงเนอื้ หา แต่ละหน้าอาศยั การโยงใยขอ้ ความท่ีมีมโนทัศน์ (Concept) เหมือนกนั ของแต่ละหน้าในลักษณะของ ไฮเปอรเ์ ทก็ ซห์ รือไฮเปอร์มีเดยี โครงสร้างลักษณะน้ีจดั เปน็ รูปแบบที่ ไมม่ โี ครงสรา้ งท่ีแน่นนอนตายตัว (Unstructured) นอกจากนี้การเชื่อมโยงไม่ได้จากัดเฉพาะเนื้อหา ภายในเว็บนั้นๆ แต่สามารถ เช่อื มโยงออกไปสูเ่ นือ้ หาจากเว็บภายนอกได้ รูปที่ 2.4 โครงสร้างแบบใยแมงมมุ (Web Structure) ลักษณะการเช่ือมโยงในเว็บนั้น นอกเหนือจากการใช้ไฮเปอร์เท็กซ์หรือ ไฮเปอร์มีเดีย กับข้อความท่ีมีมโนทัศน์ (Concept) เหมือนกันของแต่ละหน้าแล้ว ยังสามารถใช้ ลักษณะการเช่ือมโยง จากรายการท่ีรวบรวมช่ือหรือหัวข้อของเน้ือหาแต่ละหน้าไว้ ซ่ึงรายการน้ีจะ ปรากฏอยู่บริเวณใด บริเวณหนงึ่ ในหน้าจอ ผู้ใช้สามารถคลิกท่ีหัวข้อใดหัวข้อหนึง่ ในรายการเพอื่ เลือก ที่จะเข้าไปสู่หน้าใดๆ ก็ได้ตามความต้องการ ข้อดีของรูปแบบนี้คือง่ายต่อผู้ใช้ในการท่องเที่ยวบนเว็บ โดยผู้ใช้สามารถกาหนดทิศทาง การเข้าสู่เน้ือหาได้ด้วยตนเอง แต่ข้อเสียคือถ้ามีการเพิ่มเนื้อหาใหม่ๆ อยู่เสมอจะเปน็ การยากในการ ปรบั ปรุง นอกจากนี้การเช่ือมโยงระหว่างข้อมูลท่ีมีมากมายนั้นอาจทา ใหผ้ ใู้ ชเ้ กิดการสบั สนและ เกิดปัญหาการคงค้างของหวั ข้อ (Cognitive Overhead) ได้ 2.2.2 การกาหนดขนาดเวบ็ เพจ ขนาดของเว็บไซตท์ ีน่ ยิ มในปัจจุบันมี 2 ขนาด คือ 2.2.2.1 ขนาดเว็บไซต์แบบ 800 X 600 pixels เป็นขนาดท่ีสามารถใช้ได้กับ หน้าจอทุกขนาดในปัจจุบันเป็นขนาดของการออกแบบเว็บไซต์ท่ีใช้ในอดีต เนื่องจากอดีตขนาดของ จอคอมพวิ เตอรม์ ขี นาดเล็ก 2.2.2.2 ขนาดเว็บไซต์แบบ 1024 X 768 pixels เป็นขนาดท่ีนิยมในปัจจุบัน เนื่องจากผู้ใช้นยิ มใชจ้ อคอมพวิ เตอร์ขนาดใหญ่ขึน้ เนอ่ื งมาจากราคาจอคอมพิวเตอร์ท่ีถูกลง

9 2.2.3 รปู แบบการออกแบบเว็บไซต์ เว็บไซต์ในปัจจุบันจะมีการออกแบบท่ีแตกต่างกันไม่มากนัก ซ่ึงการออกแบบ หน้าตาเว็บไซต์ส่วนใหญ่จะมองดูองค์ประกอบขององค์กร หน่วยงาน หรือเน้ือหาเรื่องท่ีนาเสนอเป็น หลัก ซ่งึ การออกแบบหนา้ ตาของเวบ็ ไซต์มีอยู่ 3 แบบ คือ 2.2.3.1 การออกแบบเว็บไซต์ท่ีเน้นการนาเสนอเนื้อหาเป็นการออกแบบเว็บไซต์ ท่ีเน้นการนาเสนอเน้ือหามากกว่ารูปภาพ โดยโครงสร้างใช้รูปแบบตารางเป็นหลัก มีการออกแบบ หน้าตารูปแบบง่าย เช่น มีเมนสู ารบัญ และเนอ้ื หา 2.2.3.2 การออกแบบเว็บไซต์ท่ีเน้นภาพกราฟิก เป็นการออกแบบเว็บไซต์ที่เน้น ภาพกราฟิกที่สวยงาม ซ่ึงอาจจะใช้โปรแกรม Photoshop สาหรับการตกแต่งภาพ ข้อดี สวยงาม น่าสนใจ ข้อเสีย อาจจะใชเ้ วลาในการโหลดเว็บนาน 2.2.3.3 การออกแบบเว็บไซต์ที่มีท้ังภาพและเน้ือหา เป็นการออกแบบเว็บที่นิยม ในปัจจบุ นั ซึง่ ประกอบดว้ ยขอ้ ความ รปู ภาพ โดยมีการจดั องคป์ ระกอบต่าง ๆ เพื่อใหเ้ ว็บน่าสนใจ 2.2.4 องค์ประกอบของการออกแบบเว็บไซต์ 2.2.4.1 ความเรียบง่าย (Simplicity) หมายถึง การจากัดองค์ประกอบเสริมให้ เหลือเฉพาะองค์ประกอบหลัก กล่าวคือในการส่ือสารเน้ือหากับผู้ใช้นั้น เราต้องเลือกเสนอสิ่งท่ีเรา ต้องการนาเสนอจริง ๆ ออกมาในส่วนของกราฟิก สีสัน ตัวอักษรและภาพเคล่ือนไหว ต้องเลือกให้ พอเหมาะ ถ้าหากมีมากเกินไปจะรบกวนสายตาและสรา้ งความคาราญต่อผู้ใช้ตัวอย่างเวบ็ ไซต์ที่ได้รับ การออกแบบที่ดี ได้แก่ เว็บไซต์ของบริษัทใหญ่ ๆ อย่างเช่น Apple Adobe Microsoft หรือ Kokia ทีม่ กี ารออกแบบเวบ็ ไซตใ์ นรปู แบบทเี่ รียบงา่ ย ไม่ซับซ้อน และใชง้ านอยา่ งสะดวก 2.2.4.2 ความสม่าเสมอ ( Consistency) หมายถึง การสร้างความสม่าเสมอให้ เกิดขึ้นตลอดทั้งเว็บไซต์ โดยอาจเลือกใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ก็ได้ เพราะถ้าหากวา่ แต่ละ หนา้ ในเวบ็ ไซตน์ ้นั มคี วามแตกต่างกันมากจนเกนิ ไป อาจทาให้ผู้ใชเ้ กดิ ความสับสนและไม่แน่ใจว่ากาลัง อยู่ในเว็บไซต์เดิมหรือไม่ เพราะฉะน้ันการออกแบบเว็บไซตใ์ นแต่ละหน้าควรท่ีจะมีรูปแบบ สไตล์ของ กราฟกิ ระบบเนวิเกชั่น (Navigation) และโทนสที ี่มีความคล้ายคลงึ กันตลอดทั้งเวบ็ ไซต์ 2.2.4.3 ความเป็นเอกลักษณ์ (Identity) ในการออกแบบเว็บไซต์ต้องคานึงถึง ลักษณะขององค์กรเป็นหลัก เน่ืองจากเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กร การ เลือกใช้ตัวอักษร ชุดสี รูปภาพหรือกราฟิก จะมีผลต่อรูปแบบของเว็บไซต์เป็นอย่างมาก ตัวอย่างเช่น ถา้ เราต้องออกแบบเว็บไซต์ของธนาคารแตเ่ รากลบั เลือกสสี ันและกราฟิกมากมาย อาจทาให้ผใู้ ช้คิดว่า เปน็ เวบ็ ไซตข์ องสวนสนกุ ซึ่งสง่ ผลตอ่ ความเช่อื ถอื ขององค์กรได้

10 2.2.4.4 เนื้อหา (Useful Content) ถือเป็นส่ิงสาคัญที่สุดในเว็บไซต์ เน้ือหาใน เว็บไซต์ต้องสมบูรณ์และได้รับการปรับปรุงพัฒนาให้ทันสมัยอยู่เสมอ ผู้พัฒนาต้องเตรียมข้อมูลและ เน้ือหาที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ เนื้อหาท่ีสาคัญที่สุดคือเนื้อหาที่ทีมผู้พัฒนาสร้างสรรค์ ขึ้นมาเอง และไม่ไปซ้ากับเว็บอ่ืน เพราะจะถือเป็นส่ิงที่ดึงดูดผู้ใช้ให้เข้ามาเว็บไซต์ได้เสมอ แต่ถ้าเป็น เว็บท่ีลิงค์ข้อมูลจากเว็บอื่น ๆ มาเม่ือใดก็ตามท่ีผู้ใช้ทราบว่า ข้อมูลนั้นมาจากเว็บใด ผู้ใช้ก็ไม่ จาเป็นต้องกลบั มาใช้งานลิงคเ์ หลา่ นั้นอีก 2.2.4.5 ระบบเนวิเกชั่น (User-Friendly Navigation) เป็นส่วนประกอบที่มี ความสาคัญต่อเว็บไซต์มาก เพราะจะช่วยไม่ให้ผู้ใช้เกิดความสับสนระหว่างดูเว็บไซต์ ระบบเนวิเกชั่น จงึ เปรียบเสมือนป้ายบอกทาง ดงั นั้นการออกแบบเนวเิ กชัน่ จงึ ควรใหเ้ ข้าใจง่าย ใช้งานได้สะดวก ถา้ มี การใช้กราฟิกก็ควรส่ือความหมาย ตาแหน่งของการวางเนวิเกชั่นก็ควรวางให้สม่าเสมอ เช่น อยู่ ตาแหน่งบนสุดของทุกหน้าเป็นต้น ซ่ึงถ้าจะให้ดีเม่ือมีเนวิเกชั่นท่ีเป็นกราฟิกก็ควรเพิ่มระบบเนวิเกช่ัน ทเี่ ป็นตวั อักษรไว้ส่วนลา่ งด้วย เพื่อชว่ ยอานวยความสะดวกให้กับผู้ใชท้ ี่ยกเลิกการแสดงผลภาพกราฟิก บนเว็บเบราเซอร์ 2.2.4.6 คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์ (Visual Appeal) ลักษณะที่ นา่ สนใจของเวบ็ ไซต์น้ัน ข้ึนอยู่กบั ความชอบส่วนบุคคลเป็นสาคัญ แต่โดยรวมแล้วก็สามารถสรุปได้ว่า เวบ็ ไซต์ท่นี า่ สนใจนนั้ ส่วนประกอบต่าง ๆ ควรมีคณุ ภาพ เช่น กราฟกิ ควรสมบูรณไ์ มม่ ีรอยหรือขอบข้ัน บันได้ให้เห็น ชนิดตัวอักษรอ่านงา่ ยสบายตา มีการเลอื กใชโ้ ทนสีทเ่ี ข้ากนั อยา่ งสวยงาม เป็นตน้ 2.2.4.7 ความสะดวกของการใช้ในสภาพต่าง ๆ (Compatibility) การใช้งานของ เว็บไซต์น้ันไม่ควรมีขอบจากัด กล่าวคือ ต้องสามารถใช้งานได้ดีในสภาพแวดล้อมที่หลากหลาย ไม่มี การบังคับให้ผู้ใช้ต้องติดตั้งโปรแกรมอ่ืนใดเพ่ิมเติม นอกเหนือจากเว็บบราวเซอร์ ควรเป็นเว็บท่ีแสดง ผลได้ดีในทุกระบบปฏิบัติการ สามารถแสดงผลได้ในทุกความละเอียดหน้าจอ ซ่ึงหากเป็นเว็บไซต์ท่ีมี ผูใ้ ชบ้ ริการมากและกลุม่ เปา้ หมายหลากหลายควรให้ความสาคัญกับเรื่องนี้ใหม้ าก 2.2.4.8 ความคงที่ในการออกแบบ (Design Stability) ถ้าต้องการให้ผู้ใช้งาน รูส้ ึกว่าเว็บไซต์มีคณุ ภาพ ถูกต้อง และเชื่อถือได้ ควรให้ความสาคัญกับการออกแบบเว็บไซต์เป็นอย่าง มาก ต้องออกแบบวางแผนและเรียบเรียงเนื้อหาอย่างรอบคอบ ถ้าเว็บที่จัดทาข้ึนอย่างลวก ๆ ไม่มี มาตรฐานการออกแบบและระบบการจัดการข้อมูล ถ้ามีปัญหามากขึ้นอาจส่งผลให้เกิดปัญหาและทา ใหผ้ ใู้ ชห้ มดความเชื่อถอื 2.2.4.9 ความคงท่ีของการทางาน (Function Stability) ระบบการทางานตา่ ง ๆ ในเว็บไซต์ควรมีความถูกต้องแน่นอน ซึ่งต้องได้รับการออกแบบสร้างสรรค์และตรวจสอบอยู่เสมอ ตัวอย่างเช่น ลิงค์ต่าง ๆ ในเว็บไซต์ ต้องตรวจสอบว่ายังสามารถลิงค์ข้อมูลได้ถูกต้องหรือไม่ เพราะ

11 เว็บไซต์อ่นื อาจมีการเปล่ยี นแปลงไดต้ ลอดเวลา ปญั หาที่เกิดจากลิงค์ กค็ อื ลิงคข์ าด ซึ่งพบได้บอ่ ยเป็น ปัญหาท่ีสรา้ งความราคาญกบั ผู้ใช้เปน็ อยา่ งมาก 2.2.5 ขนั้ ตอนการสร้างเว็บไซต์ ข้ันตอนที่ 1 การวางแผนการจัดทาเว็บไซต์ เป็นขั้นตอนแรกของการออกแบบ เว็บ เนอ่ื งจากเราตอ้ งกาหนดชื่อเรื่อง เนื้อหา และรายละเอยี ดของเว็บทเ่ี ราจะจดั ทาเพ่ือใหเ้ ห็นมุมมอง คร่าว ๆ ก่อนจะลงมือสร้างเว็บไซต์ นอกจากนี้เรายังต้องทาการแบ่งเนื้อหาเป็นหมวดหมู่ต่าง ๆ ตามลาดบั ก่อน-หลัง เพ่ือให้ง่ายต่อการจัดทาโครงรา่ งของเวบ็ ข้นั ตอนท่ี 2 การกาหนดโครงสร้างของเว็บ เป็นขน้ั ตอนในการกาหนดผงั ของเว็บ เพอ่ื ให้ทราบองค์ประกอบทง้ั หมดของเวบ็ ตวั อยา่ งดงั รปู รูปที่ 2.5 โครงสรา้ งของเว็บ ขัน้ ตอนที่ 3 การกาหนดการเช่ือมโยงเวบ็ เพจ การกาหนดการเชอ่ื มเว็บเพจ เป็น การกาหนดความสัมพันธ์ของการเชื่อมโยงในแต่ละหน้าเว็บเพ่ือให้สามารถกลับไปกลับมาระหว่าง หน้าตา่ ง ๆ ได้ โดยแตล่ ะไฟล์จะมีความสัมพันธก์ นั ตัวอยา่ งดังรปู รปู ที่ 2.6 การเชือ่ มโยงเว็บเพจ

12 ขนั้ ตอนท่ี 4 การตัง้ ชื่อไฟลแ์ ละโฟลเดอร์ การสร้างโฟลเดอร์ การสร้างโฟลเดอร์ให้สร้างเป็นช่ือหน่วยงาน / เรื่องนั้น ๆ ควรใช้ตัวอักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9 เช่น swt คือ โรงเรียน เสริมงามวิทยาคม จากนั้นข้างในโฟลเดอร์ swt ให้เราสร้างโฟลเดอร์เก็บรูปภาพ พ้ืนหลัง ไฟล์เสียง ไฟล์วีดีโอ หรือโฟลเดอร์อื่นเป็นชื่อภาษาอังกฤษ เช่น pic คือโฟลเดอร์เก็บรูปภาพ, bg คือ โฟลเดอร์ เกบ็ พื้นหลงั เป็นต้น การตั้งชื่อไฟล์ การต้ังชื่อไฟล์ให้ต้ังช่ือและนามสกุลไฟล์เป็น ตัวอักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9 หรือเคร่ืองมือขีดลบ/ขีดล่าง และต้ังชื่อ ไฟล์ให้ตรงกับเร่ืองนนั้ ๆ เช่น history.html คอื ประวัติของโรงเรียน,person.html คือ บุคลากรของ โรงเรยี น เป็นต้น รูปที่ 2.7 การตง้ั ชื่อไฟล์ ข้นั ตอนที่ 5 การออกแบบเว็บเพจแตล่ ะหนา้ ในเว็บไซต์ รูปท่ี 2.8 การออกแบบเวบ็ เพจ

13 ขน้ั ตอนที่ 6 การสรา้ งเวบ็ เพจเมือ่ จดั วางองคป์ ระกอบของเวบ็ แต่ละหน้าแลว้ ต่อไป คอื ข้ันตอนการเขียนเว็บด้วยโปรแกรมภาษา HTML เพื่อกาหนดให้แตล่ ะหนา้ เว็บเพจนาเสนอ ข้อความ รปู ภาพ วีดีโอ และเสียง ให้อยใู่ นรูปแบบการท่ีต้องการ รปู ที่ 2.9 การเขยี นโปรแกรมดว้ ยภาษา HTML ขนั้ ตอนที่ 7 การลงทะเบยี นขอพื้นท่ีเว็บไซต์ เมือ่ ทาการออกแบบและสรา้ งเว็บไซต์ เสร็จแล้ว ขน้ั ตอนต่อไป คือ การเผยแพรเ่ ว็บไซต์สโู่ ลกของอินเทอรเ์ น็ตให้คนอน่ื เข้ามาเยี่ยมชม วิธีการ คือ การนาเว็บไซต์ไปฝากกับผู้ให้บริการพื้นท่ีเว็บไซต์ทั้งแบบเสียค่าใช้จ่ายหรือบริการ และแบบพื้นที่ เว็บไซตฟ์ รี ซึ่งวันนี้เราจะขอแนะนาเว็บไซต์ท่ใี ห้บรกิ ารฟรีพืน้ ทฝ่ี ากเว็บ คือhttp://www.thcity.com รปู ที่ 2.10 การลงทะเบียนขอพนื้ ที่เว็บไซต์

14 ข้ันตอนท่ี 8 การอัพโหลดเว็บไซต์ เม่ือเราทาการสมัครบริการพ้ืนที่ฝากเว็บแล้ว ขั้นตอนต่อไป คือการอัพโหลดไฟล์เว็บไซต์ของเราไปยังเว็บไซต์ท่ีให้บริการพ้ืนท่ีฝากเว็บซ่ึงอาจจะทา การอัพโหลดผ่านเว็บบราวเซอร์เว็บท่ีให้บริการ หรือการอัพโหลดด้วยโปรแกรม เช่น CuteFTP, Filezilla, WS_FTP เป็นต้น เพื่อให้ผู้คนได้เข้าเยี่ยมชมโดยสามารถดูในเว็บไซต์ของเราผ่านเครือข่าย อนิ เทอร์เน็ต รปู ที่ 2.11 การอัพโหลดเว็บ ขั้นตอนท่ี 9 การเรียกดูเว็บไซต์ เมื่อเราทาการอัพโหลดไฟล์เว็บไซต์ของเราข้ึนบน เว็บไซต์ท่ีให้บริการพ้ืนที่ฝากเว็บแล้ว เราสามารถเปิดดูเว็บไซต์ของเราผ่านโปรแกรมเว็บบราวเซอร์ เช่น Internet Explorer, Mozilla Firefox, Google Chrome เปน็ ต้น โดยการพิมพท์ ี่อยเู่ ว็บไซต์ตรง Address Bar เช่น http://www/.swt.ac.th เปน็ ต้น รปู ที่ 2.12 การเรยี กดเู ว็บไซต์

15 2.2.6 การใชส้ ี 2.2.6.1 สีฟ้าและสีน้าเงิน ให้ความรู้สึกสงบ สุขุม สุภาพ หนักแน่น เคร่งขรึม เอาการเอางาน ละเอียด รอบคอบ สง่างาม มีศักดิ์ศรี สูงศักดิ์ เป็นระเบียบถ่อมตน สามารถลดความ ตนื่ เตน้ และชว่ ยทาให้มสี มาธิ แตถ่ ้ามีสนี า้ เงนิ เขม้ เกนิ ไป กจ็ ะทาให้รูส้ ึกซึมเศรา้ ได้ 2.2.6.2 สสี ้ม ใหค้ วามร้สู ึก รอ้ น ความอบอุ่น ความสดใส มีชีวิตชีวา วัยรุน่ ความ คึกคะนอง การปลดปล่อย ความเปร้ียว การระวัง เป็นสีท่ีเร้าความรู้สึก ปรกติควรใช้แต่น้อยเมื่อ เทยี บกับสีอน่ื สงั เกตวา่ คนท่อี ยใู่ นห้องสสี ้มจะอยไู่ ด้ไมน่ าน 2.2.6.3 สีเหลือง เป็นสีแห่งความเบิกบาน เร้าอารมณ์ และเรียกร้องความสนใจ ให้ความรู้สึกแจ่มใส ความสดใส ความร่าเริง ความเบิกบานสดชื่น ชีวิตใหม่ ความสด ใหม่ ความสกุ สวา่ ง การแผก่ ระจาย อานาจบารมี 2.2.6.4 สีเขียว เป็นสีในวรรณะเย็น จะสร้างความรู้สึกเย็นสบาย ใช้เป็นสีท่ีช่วย ผ่อนคลายความเครียดได้ ให้ความรู้สึก สงบ เงียบ ร่มรื่น ร่มเย็น การพักผ่อน การผ่อนคลาย ธรรมชาติ ความปลอดภัย ปกติ ความสุข ความสุขมุ เยอื กเยน็ 2.2.6.5 สีขาว ให้ความรู้สึก บริสุทธิ์ สะอาด สดใส เบาบาง อ่อนโยน เปิดเผย การเกิด ความรัก ความหวัง ความจริง ความเมตตา ความศรัทธา ความดงี าม 2.2.6.6 สีเทา ให้ความรู้สึก เศร้า อาลัย ท้อแท้ ความลึกลับ ความหดหู่ ความ ชรา ความสงบ ความเงียบ สุภาพ สุขุม ถ่อมตน สีนี้มีข้อดีคือทาให้เย็น แต่สร้างความสรา้ งความรู้สึก หม่นหมองได้ ควรใชร้ ่วมกบั สที มี่ ีชีวิต โทนสว่างอยา่ งน้อยหน่งึ สี 2.3 โปรแกรมทีใ่ ช้ในการพฒั นาระบบงาน 2.3.1 โปรแกรม Adobe Photoshop CS6 โปรแกรม Adobe Photoshop cs6 เป็นโปรแกรมในตระกูล Adobe ที่ใช้ สาหรับตกแต่งภาพถ่ายและภาพกราฟิก ได้อย่างมีประสิทธิภาพ ไม่ว่าจะเป็นงานด้านส่ิงพิมพ์ นิตยสาร และงานด้านมัลติมีเดีย อีกท้ังยังสามารถ retouching ตกแต่งภาพและการสร้างภาพ ซึ่ง กาลังเป็นที่นิยมสูงมากในขณะน้ี เราสามารถใช้โปรแกรม Photoshop ในการตกแต่งภาพการใส่ Effect ต่าง ๆให้กับภาพ และตัวหนังสือ การทาภาพขาวดา การทาภาพถ่ายเป็นภาพเขียน การนา ภาพมารวมกัน การ Retouch ตกแต่งภาพต่าง โปรแกรม Adobe Photoshop เป็นโปรแกรมท่ี สามารถท่ีจะเรียนรู้ได้ด้วยตนเองและทาการแก้ไขภาพ ตกแต่งภาพ ซ้อนภาพในรปู แบบต่างๆไดอ้ ย่าง ง่ายดาย และสิ่งท่ีขาดไม่ได้นั้นก็คือ การใส่ข้อความประกอบลงในภาพด้วย และเน่ืองด้วย Adobe Photoshop มีการพัฒนาโปรแกรมมาอย่างต่อเน่ือง ทาให้จาเป็นต้องศึกษาคาส่ังต่างๆให้เข้าใจ แต่ที่

16 สาคัญ เมื่อได้เรียนรู้การใช้คาส่ังในเวอร์ช่ันเก่า แต่ก็ยังคงสามารถนาไปประยุกต์ใช้กับเวอร์ชั่นใหม่ๆ ได้ด้วย 2.3.1.1 วิธกี ารติดตั้ง โปรแกรม Adobe Photoshop cs6 รปู ท่ี 2.13 แสดงเข้าไปยงั โฟลเดอรข์ อง Photoshop ตามภาพ ดับเบ้ิลคลกิ Set-up รปู ท่ี 2.14 แสดงการตรวจสอบก่อนทาการติดตงั้ โปรแกรม รปู ท่ี 2.15 แสดงโปรแกรมตรวจสอบเสรจ็ แล้วจะเข้าสหู่ นา้ จอ เลือก Try

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

18 รปู ท่ี 2.18 แสดงหน้าการโหลดของโปรแกรม รปู ท่ี 2.19 แสดงการเสรจ็ ส้ินการติดต้งั โปรเเกรม Adobe Photoshop CS6

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

Menu 20 bar Tool options Palettes bar Toolb ox รูปที่ 2.22 แสดงหน้าจอหลกั การทางานของโปรแกรม Adobe Photoshop CS6 2.3.1.3 เคร่อื งมือต่างๆ (Toolbox) รูปท่ี 2.23 แสดงเครื่องมือต่างๆ (Toolbox) Adobe Photoshop CS6

21 ตารางท่ี 2.1 ตารางอธิบายเคร่อื งมือTool ตา่ งๆ สัญลักษณ์ ความหมาย Marquee Tool เป็นการเลือกแบบส่ีเหล่ียมผนื ผา้ , วงกลม, แถวขนาด 1 Pixel หรือคอลมั น์ 1 Pixel Move Tool ใชเ้ พ่ือเล่อื นสว่ นทีเ่ ลือก หรือไว้เลอ่ื น Layer และ Guide ตา่ งๆ Lasso Tool จะใช้เพื่อสร้าง Selection แบบอสิ ระ, แบบ Polygonal (ตามจดุ ทีค่ ลกิ ) และ Magnetic (ดงึ เขา้ หาขอบรปู ภาพ) Magic Wand Tool ใชเ้ ลือกพืน้ ทีบ่ ริเวณที่มสี เี ดยี วกนั Crop T Crop Tool ใช้ในการเลอื กบางสว่ นของรปู ภาพ Slice Tool ใช้ในการสรา้ ง Slice Slice Selection Tool ใชเ้ ลอื ก Slice ที่คุณสรา้ งขึ้นมา Healing Brush Tool ใช้ในการระบายสี เพอ่ื ซอ่ มแซมรปู ภาพใหส้ มบรู ณแ์ บบ Patch Tool ใชเ้ ฉพาะในบรเิ วณท่เี ลอื กไว้เทา่ นน้ั เพอ่ื ให้เกดิ ความสมบูรณ์ของรูปภาพ โดยใช้ ลวดลาย หรือใช้ส่วนทเี่ ลอื กในภาพเป็นตน้ ฉบบั Brush Tool ใช้ในการวาดเสน้ Brush ตา่ งๆ Brush Tool ใช้ในการวาดเสน้ Brush ตา่ งๆ Pencil Tool ใชใ้ นการวาดเสน้ ทีม่ ีขอบชดั เจน Clone Stamp Tool ใช้กอ็ ปป้ีรปู โดยอาศยั รปู ภาพตน้ ฉบบั Pattern Stamp Tool ใช้เพอ่ื วาดรูปโดยใชบ้ างส่วนของรูปภาพทมี่ อี ยู่เปน็ ต้นฉบับ

22 ตารางท่ี 2.1 ตารางอธิบายเคร่อื งมือ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 Burn Tool ใชล้ ดความสว่างทาให้รปู ภาพดมู ดื ลง Sponge Tool Sponge Tool ใชเ้ ปล่ียนสีในส่วนตา่ งๆ ของรูปภาพ โดยการปรบั ค่าความเขม้ สี Path Selection Tool ใช้เพอ่ื เลือก Shape หรือ Path เพ่อื แสดง Anchor Paint, Direction Line และ Direction Paint Path Selection Tool ใช้เพอื่ เลือก Shape หรอื Path เพ่อื แสดง Anchor Paint, Direction Line และ Direction Paint

23 ตารางท่ี 2.1 ตารางอธบิ ายเครอื่ งมอื 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 ใช้ในการขยายและย่อส่วนการแสดงภาพบนหนา้ จอ

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

25 2.3.1.5 การสรา้ งไฟลใ์ หม่ (New) 1) คลกิ ที่เมนูคาส่งั File ท่ีแถบ Menu bar จากน้ันเลือกคาสั่ง New รปู ที่ 2.26 การสร้างไฟลใ์ หม่ (New) 2) จะปรากฏ Dialog สาหรับกาหนดคุณสมบัตติ า่ ง ๆ ของไฟล์ภาพดังน้ี รปู ท่ี 2.27 แสดงการกาหนดขนาดของกระดาษ - Name คือ ช่ือของช้ินงาน สามารถกาหนดใหม่เองได้ ช่ือน้ีจะไป ระบุทช่ี ่ือไฟลต์ อ่ ไป - Preset คือ ขนาดงานท่ีโปรแกรมกาหนดมาให้ ซ่ึงมีหลากหลาย ขนาดใหเ้ ลอื ก หรอื สามารถกาหนดเองจากชอ่ ง Width และ Height ได้

26 - 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 เพื่อเร่ิมชน้ิ งานใหม่ 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

27 รูปท่ี 2.28 แสดงการบนั ทกึ ขอ้ มูลลงบนไฟล์ (Save) 2) จะปรากฏ Dialog สาหรบั กาหนดคณุ สมบัติต่าง ๆ ของไฟลภ์ าพ ดังน้ี รปู ที่ 2.29 แสดงการบันทึกขอ้ มลู ลงบนไฟล์ (Save) - ชอื่ ไฟล์ (File Name) - รูปแบบของไฟล์ (Format)

28 - กาหนดคุณสมบตั ิของการบันทกึ ไฟล์ (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 Original Brightness Contrast รปู ท่ี 2.30 แสดงการปรบั คา่ ความสว่าง/ความคมชัด 2.3.2 ขน้ั ตอนการตดิ ตงั้ โปรแกรม Microsoft Office 2010 โปรแกรมไมโครซอฟต์เวิร์ด ซึ่งเป็นโปรแกรมประมวลผลคาแบบพิเศษ ช่วยให้ สร้างเอกสารแบบมืออาชพี อยา่ งมีประสิทธิภาพและประหยัด เชน่ เหมาะกบั งานดา้ นการพิมพ์เอกสาร ทุกชนิด สามารถพิมพ์เอกสารออกมาเป็นชุด ๆ ซึ่งเอกสารอาจเป็นจดหมาย บันทึกขอ้ ความ รายงาน บทความ ประวัติย่อ และยังสามารถตรวจสอบ ทบทวน แก้ไข ปรับปรุงความถูกต้องในการพิมพ์ เอกสารได้อย่างง่ายดาย สามารถตรวจสอบ สะกดคา และหลักไวยากรณ์ เพ่ิมตาราง เพ่ิมกราฟิกใน

29 เอกสารได้อย่างง่ายดาย หรือเพ่ิมเติมข้อมูลได้ตลอดเวลา สามารถใช้ลักษณะของการจัดพิมพ์ด้วย คอมพิวเตอร์แบบตั้งโต๊ะ (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.31 แสดงหนา้ ตา่ ง User Account Control 3) รอจนโปรแกรมเตรียมการเซ็ตอัพระบบแล้วเสร็จ จากน้ันใน หน้า Read the Microsoft Software License Terms ให้เลือกเช็คบ็อกซ์หน้า I accept the terms in this agreement เสรจ็ แลว้ คลิก Continue

30 รูปที่ 2.32 แสดงหนา้ ต่าง Microsoft Software License Terms 4) ในหน้า Choose the installation you want โปรแกรมจะ ให้เลือกว่าจะติดตั้งแบบดีฟอลท์หรือทาการติดต้ังโดยปรับแต่งเอง ในท่ีน้ีเลือก Install Now เพื่อ ตดิ ต้ังแบบดฟี อลท์ รปู ท่ี 2.33 แสดงหน้าต่าง Choose the installation

31 5) ในหน้าไดอะล็อกบ็อกซ์ Installation Progress รอจนการ ตดิ ตง้ั โปรแกรมแลว้ เสรจ็ รูปที่ 2.34 แสดงหนา้ ตา่ ง Installation Progress 6) ในหน้าไดอะล็อกบ็อกซ์ถัดไปคลิก Close เพ่ือจบการติดต้ัง Microsoft Office Professional Plus 2010 Beta รูปที่ 2.35 แสดงหน้าตา่ ง Successfully Installed

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

33 2.3.3.1 ขน้ั ตอนการตดิ ตั้งโปรแกรม Adobe Dreamweaver CS6 รปู ที่ 2.37 แสดงการเปิดโฟลเดอร์โปรแกรม Adobe Dreamweaver CS6 รปู ที่ 2.38 แสดงการดบั เบล้ิ คลกิ ทไ่ี ฟล์ Set-up.exe จากนน้ั โปรแกรมอา้ งมีการแจ้งเตือนใหเ้ รา restart เราเลอื ก Ignore เพอื่ ดาเนนิ การต่อ ดังรปู รูปท่ี 2.39 แสดงโปรแกรมจะทาการตรวจสอบก่อนทาการติดตง้ั โปรแกรม

34 รปู ที่ 2.40 แสดงเมอื่ โปรแกรมตรวจสอบเสรจ็ แลว้ จะเขา้ สู่หน้าจอข้อกาหนดในการตดิ ตั้งโปรแกรม ใหเ้ ราคลิก Accept รปู ท่ี 2.41 แสดงการกรอก Serial Number แลว้ คลิกทป่ี มุ่ Next

35 รปู ท่ี 2.42 แสดงจะเขา้ สหู่ นา้ Option ของโปรแกรม ให้เลอื ก Installs รูปที่ 2.43 แสดงรอให้โปรแกรมติดต้งั จนเสรจ็

36 รปู ท่ี 2.44 แสดงหน้าเมอื่ ตดิ ตง้ั เสร็จจะปรากฏหนา้ จอดังภาพ ให้เราคลิก Close 2.3.3.2 ขนั้ ตอนการเปดิ โปรแกรม Adobe Dreamweaver CS6 รปู ที่ 2.45 แสดงหน้าตา่ งการเปิดโปรแกรม Dreamweaver โดยเขา้ ไปท่ี เมนู Start > Apps > Adobe Dreamweaver CS6

37 รปู ท่ี 2.46 แสดงเมอ่ื เปิดโปรแกรมครั้งแรก จะพบหน้าจอดังภาพ ใหค้ ลิก Select All >> OK รปู ที่ 2.47 แสดงหนา้ ต่างการเขา้ สู่หน้าจอ Welcome Screen