การสร้างเว็บไซต์การสร้างเว็บไซต์ขายสินค้าออนไลน์ ร้านBBสติ๊กเกอร์

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

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





ค หัวข้อโครงการ การสร้างเวบ็ ไซต์ขายสนิ คา้ ออนไลน์ ร้านBBสตก๊ิ เกอร์ Website Creation of Shopping for BBSticker Shop ผ้จู ัดทำโครงการ นายธนยศ พรหมวงั รหัสประจำตวั นักศึกษา 6232040002 นายสรายธุ ซามงค์ รหัสประจำตัวนกั ศึกษา 6232040008 ครูท่ีปรกึ ษา นายวัชรนิ ทร์ พนั ธส์ ำโรง ครผู สู้ อน นางประเสริฐศรี สทุ ธพิ นั ธ์ สาขาวิชา คอมพิวเตอร์ธรุ กิจ ปีการศึกษา 2563 ............................................................................................................................. ................................... บทคดั ย่อ การสร้างเว็บไซต์ขายสินค้าออนไลน์ ร้านBBสติ๊กเกอร์ จัดทำขึ้นโดยมีวัตถุประสงค์ 1) เพ่อื สรา้ งเวบ็ ไซต์ขายสินค้าออนไลน์ ร้านBBสติ๊กเกอร์ 2) เพือ่ เพมิ่ ช่องทางประชาสัมพันธ์และการ ซื้อสินค้าผ่านทางระบบอินเทอร์เน็ต ร้านBBสติ๊กเกอร์ 3) เพื่อสำรวจความพึงพอใจเว็บไซต์ขายสินค้า ออนไลน์ ร้านBBสติ๊กเกอร์ กลุ่มตัวอย่างที่ใช้ในการวิจัย ได้แก่ประชากรที่อาศัยอยู่อำเภอศรีราชา ตำบลบึง จังหวัดชลบุรี โดยเจาะจงกลุ่มบุคคลในช่วงอายุ 13 – 50 ปี จำนวน 589 คนเพื่อตอบ แบบสอบถาม เครื่องมือที่ใช้ในการวิจัยครั้งนี้ได้แก่ 1) เว็บไซต์ขายสินค้าออนไลน์ ร้านBBสติ๊กเกอร์ ที่คณะผู้วิจัยสร้างขึ้น 2) แบบสอบถามความพึงพอใจในการเข้าใช้งานเว็บไซต์ขายสินค้าออนไลน์ ร้านBBสต๊กิ เกอร์ ผลของการสร้างเว็บไซต์ขายสินค้าออนไลน์ ร้านBBสติ๊กเกอร์ พบว่า เว็บไซต์ขายสินค้า ออนไลน์ ร้านBBสติ๊กเกอร์ ที่คณะผู้วิจัยสร้างขึ้นสามารถเพิ่มช่องทางการขายสินค้าให้กับ รา้ นBBสต๊ิกเกอร์ และสามารถใหก้ ารซอ้ื -ขายสินคา้ มีความสะดวกมากยิง่ ขึ้น ผลการวิจัยพบว่าความพึงพอใจของผู้ใช้งานเว็บไซต์ขายสินค้าออนไลน์ ร้านBBสติ๊กเกอร์ โดยภาพรวมระดับความพึงพอใจอยู่ในระดบั มาก มีคา่ เฉล่ยี เท่ากบั 3.93 คา่ เบย่ี งเบนมาตรฐานเทา่ กับ 0.71

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

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

สารบัญ (ตอ่ ) ฉ เรื่อง หน้า บทท่ี 5 สรุป และข้อเสนอแนะ 71 71 5.1 สรุปผลการศึกษา 72 5.2 อภิปรายผล 73 5.3 ข้อเสนอแนะ 74 บรรณานกุ รม 75 ภาคผนวก 76 ภาคผนวก ก. แบบเสนอเคา้ โครงโครงการ 90 ภาคผนวก ข. รายงานการพบครทู ่ีปรึกษาโครงการ 92 ภาคผนวก ค. ตัวอย่างแบบประเมินความพงึ พอใจ 95 ภาคผนวก ง. แบบประเมนิ ความพึงพอใจออนไลน์ 100 ภาคผนวก จ. เอกสารการเผยแพร/่ สง่ มอบ 103 ภาคผนวก ฉ. ค่มู ือการใช้งานเว็บไซต์ 114 ภาคผนวก ช. ตารางแสดงผลการวิเคราะหข์ ้อมูลดว้ ยโปรแกรมทางสถติ ิ 118 ภาคผนวก ซ. ภาพกจิ กรรมการดำเนินโครงการ 120 ภาคผนวก ฌ. ประวตั ผิ ูจ้ ดั ทำ

สารบัญตาราง ช ตารางท่ี หน้า 1.1 ตารางแสดงแผนการดำเนินงาน 3 2.1 ตารางอธบิ ายเคร่ืองมือ Tool ตา่ ง ๆ 19 2.2 ตารางอธบิ ายเครื่องมือในแถบ Document Toolbar 34 2.3 ตารางอธิบายเคร่ืองมือในแถบ Document Toolbar (ต่อ) 35 4.1 ทดสอบหน้าหลัก 62 4.2 การทดสอบหนา้ แสดงสินค้าท้งั หมด 62 4.3 การทดสอบหนา้ Loginสมาชิก 63 4.4 การทดสอบหนา้ สมัครสมาชกิ 63 4.5 การทดสอบหนา้ Login Admin 64 4.6 การทดสอบหน้า ระบบของ admin ท้งั หมด 64 4.7 การทดสอบหนา้ เพิ่มสินค้า 65 4.8 การทดสอบหน้า โชว์ข้อมูลสมาชิกทง้ั หมด 65 4.9 การทดสอบหนา้ แก้ไข สินคา้ 66 4.10 ทดสอบหนา้ รายชอื่ คนส่งั สินค้าทงั้ หมด 66 4.11 การทดสอบหน้า order สินคา้ ทั้งหมด 67 4.12 ค่าร้อยละของข้อมลู ทัว่ ไปของผู้ตอบแบบประเมนิ 68 4.13 แสดงค่าคะแนนเฉลี่ยและสว่ นเบีย่ งเบนมาตรฐาน ดา้ นท่ี 1 70 4.14 แสดงค่าคะแนนเฉลยี่ และสว่ นเบี่ยงเบนมาตรฐาน ด้านที่ 2 70 4.15 แสดงค่าคะแนนเฉล่ยี และสว่ นเบยี่ งเบนมาตรฐาน ดา้ นที่ 3 71

ซ สารบัญรูป หน้า 6 รปู ท่ี 7 2.1 รปู โครงสร้างแบบเรียงลำดับ 7 2.2 โครงสรา้ งแบบลำดับขนั้ 8 2.3 โครงสรา้ งแบบตาราง 10 2.4 โครงสร้างแบบใยแมงมุม 11 2.5 โครงสร้างของเวบ็ 11 2.6 การเชอ่ื มโยงเวบ็ เพจ 12 2.7 การตั้งช่อื ไฟล์ 12 2.8 การออกแบบเวบ็ เพจ 13 2.9 การเขียนโปรแกรมด้วยภาษา HTML 13 2.10 การลงทะเบียนขอพนื้ ท่ีเว็บไซต์ 14 2.11 การอัพโหลดเว็บ 15 2.12 การเรยี กดเู วบ็ ไซต์ 15 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 18 2.21 แสดงหน้าตา่ งโปรแกรม Adobe Photoshop CS6 19 2.22 แสดงหนา้ จอหลักการทำงานของโปรแกรม Adobe Photoshop CS6 21 2.23 แสดงเครื่องมือต่างๆ (Toolbox) 22 2.24 แสดงการเปดิ ไฟล์ภาพ (Open) 22 2.25 แสดงการเปิดไฟลภ์ าพ (Open) 22 2.26 การสร้างไฟล์ใหม่ (New) 24 2.27 แสดงการกำหนดขนาดของกระดาษ 24 2.28 แสดงการบนั ทึกขอ้ มูลลงบนไฟล์ (Save) 25 2.29 แสดงการบันทึกข้อมูลลงบนไฟล์ (Save) 26 2.30 แสดงการปรบั ค่าความสว่าง/ความคมชดั 26 2.31 แสดงหนา้ ตา่ ง User Account Control 27 2.32 แสดงหนา้ ต่าง Microsoft Software License Terms 2.33 แสดงหน้าต่าง Choose the installation

สารบัญรูป (ต่อ) ฌ ภาพที่ หน้า 2.34 แสดงหน้าต่าง Installation Progress 27 2.35 แสดงหน้าตา่ ง Successfully Installed 27 2.36 หน้าต่าง Office Professional Plus 2010 28 2.37 แสดงการเปิดโฟลเดอร์โปรแกรม Adobe Dreamweaver CS6 29 2.38 แสดงการดบั เบล้ิ คลกิ ท่ีไฟล์ Set-up.exe 29 2.39 แสดงโปรแกรมจะทำการตรวจสอบกอ่ นทำการติดต้ังโปรแกรม 29 2.40 แสดงเมื่อโปรแกรมตรวจสอบเสร็จแล้ว 30 2.41 แสดงการกรอก Serial Number 30 2.42 แสดงจะเข้าสหู่ นา้ Option ของโปรแกรม 30 2.43 แสดงรอให้โปรแกรมติดตงั้ จนเสรจ็ 31 2.44 แสดงหนา้ เมื่อติดตั้งเสร็จ 31 2.45 แสดงหนา้ ตา่ งการเปิดโปรแกรม Dreamweaver 31 2.46 แสดงเมือ่ เปิดโปรแกรมครงั้ แรก 32 2.47 แสดงหนา้ ตา่ งการเขา้ สู่หนา้ จอ Welcome Screen 32 2.48 แสดงหนา้ ต่างสว่ นประกอบของหน้าจอโปรแกรม 33 2.49 แสดงมุมมองโคด้ (Code View) 35 2.50 มุมมองโค้ดและออกแบบ 35 2.51 แสดงมุมมองออกแบบ 36 2.52 แสดงมมุ มองแสดงหนา้ เวบ็ เหมอื นดูบนบราวเซอร์ 36 2.53 แสดงมมุ มองกลมุ่ พาเนล 36 2.54 แสดงหน้าต่างไม้บรรทัด 37 2.55 แสดงการเข้าส่โู ปรแกรม Adobe Flash CS6 38 2.56 แสดงหน้าตา่ งเรม่ิ การทำงานของ Adobe Flash CS6 38 2.57 แสดงหนา้ ตา่ งส่วนประกอบของโปรแกรม Adobe Flash CS6 39 2.58 แสดงหน้าต่างส่วนประกอบของโปรแกรม Adobe Flash CS6 39 2.59 แสดงหน้าตา่ งเมนบู าร์ (Menu Bar) 40 2.60 แสดงหน้าตา่ งทูลบ๊อกซ์ (Toolbox) 40 2.61 แสดงหน้าต่าง Timeline 41 2.62 แสดงหนา้ ต่างพื้นทว่ี า่ งสำหรับวางวตั ถแุ บบช่วั คราว 41 2.63 แสดงหนา้ ตา่ งคุณสมบัติตา่ ง ๆ ของออบเจก็ ต์ 42 2.64 แสดงหนา้ ตา่ งเลือกใช้สีและผสมสตี ามที่ตอ้ งการ 42 2.65 แสดงหนา้ ตา่ งควบคมุ เกยี่ วกบั ชดุ วัตถขุ องโปรแกรม 42 2.66 แสดงการหาเว็บโฮสติ้งที่ดีต้องคำนึงถึงสิ่งใดบ้าง 43

ญ สารบญั รูป (ต่อ) ภาพที่ หน้า 2.67 แสดงหนา้ ตา่ งโดเมนเนมเม่อื เราจดทะเบยี นแล้ว 44 2.68 แสดงหนา้ ตา่ งของโปรแกรม SPSS 45 2.69 แสดงหนา้ ต่างการกรอกข้อมลู จากแบบสอบถาม 45 2.70 แสดงหน้าต่างการหาค่าร้อยละ 45 2.71 แสดงหนา้ ตา่ งแบบฟอรม์ ท่ใี ช้เกบ็ ขอ้ มูลใน Google Form 46 2.72 แสดงหน้าตา่ งของการออกแบบ 46 3.1 แสดงแผนผังโครงสร้างการทำงานของเว็บไซต์ขายสนิ ค้าออนไลน์ ร้านBBสตกิ๊ เกอร์ 55 3.2 เป็นส่วนแสดงผล 56 3.3 แสดง Context Diagram 56 3.4 Process Decomposition Diagram ขายสติ๊กเกอร์ออนไลน์ 57 3.5 แผนภาพกระแสข้อมูลระดบั ที่ 1 ของระบบขายสติ๊กเกอร์ออนไลน์ 58 3.6 แผนภาพกระแสข้อมลู ระดับที่ 2 โปรเซสจดั การขอ้ มูลสมาชกิ 59 3.7 แผนภาพกระแสข้อมลู ระดับที่ 2 โปรเซสจัดการขอ้ มูลการส่ังซ้ือ 59 3.8 แผนภาพกระแสข้อมลู ระดบั ท่ี 2 โปรเซสแจง้ การชำระเงนิ 60 3.9 แผนภาพกระแสข้อมูลระดับที่ 2 โปรเซสจดั การขอ้ มลู หลกั 60 4.1 การทดสอบหน้าหลัก 62 4.2 การทดสอบหน้าแสดงสินค้าทงั้ หมด 62 4.3 การทดสอบหน้า Loginสมาชกิ 63 4.4 การทดสอบหนา้ สมัครสมาชิก 63 4.5 การทดสอบหนา้ Login Admin 64 4.6 การทดสอบหน้า ระบบของ admin ทงั้ หมด 64 4.7 การทดสอบหน้า เพมิ่ สนิ คา้ 65 4.8 การทดสอบหนา้ โชว์ข้อมูลสมาชิกทง้ั หมด 65 4.9 การทดสอบหน้าแก้ไข สินค้า 66 4.10 การทดสอบหนา้ รายชอ่ื คนสัง่ สนิ คา้ ทั้งหมด 66 4.11 การทดสอบหน้า order สนิ ค้าท้ังหมด 67

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

2 1.3 เป้าหมายและขอบเขตของโครงการ 1.3.1 เปา้ หมายของโครงการ 1.3.1.1 เป้าหมายเชงิ ปริมาณ 1) เว็บไซต์ขายสนิ ค้าออนไลน์ รา้ นBBสต๊ิกเกอร์ จำนวน 1 เวบ็ ไซต์ 2) ไดง้ านวจิ ัยศึกษาความความพึงพอใจของผใู้ ช้บริการเว็บไซต์ขายสินค้า ออนไลน์ รา้ นBBสตกิ๊ เกอร์ จำนวน 1 เล่ม 3) ไดค้ ่มู อื การใช้งานเว็บไซต์ขายสนิ คา้ ออนไลน์ ร้านBBสติ๊กเกอร์ จำนวน 1 เลม่ 1.3.1.2 เป้าหมายเชิงคณุ ภาพ 1) เป็นสอ่ื กลางในการซื้อขายสินค้าและประชาสัมพนั ธ์ข้อมูลข่าวสารต่าง ๆ ผ่านระบบเครอื ข่ายอนิ เตอร์เนต็ 2) เพื่อเพ่มิ ชอ่ งทางการขายสินคา้ ร้านขายสินค้าออนไลน์ รา้ นBBสต๊ิกเกอร์ 3) ผู้เข้าใช้งานเว็บไซต์ร้านขายสินค้าออนไลน์ ร้านBBสติ๊กเกอร์ มีความพงึ พอใจในการเข้าใช้งานอยู่ในระดับมาก 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) มกี ารแสดงสถานะการสัง่ ซื้อสนิ คา้ 1.3.2.4 มีระบบการชำระเงิน (Payment) 1) มีช่องทางการชำระเงิน 2) มกี ารตรวจสอบการชำระเงิน

3 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 ขั้นเตรียมการ สอบเคา้ โครง ศึกษาขอ้ มลู ข้นั ดำเนินการ สร้างช้ินงาน ตรวจสอบความสมบรู ณ์ ข้ันสรปุ และประเมินผล สรปุ ผล จัดทำรูปเลม่ นำเสนอ/เผยแพร่ 1.5 ประโยชน์ที่คาดว่าจะได้รบั จากการทำโครงการ 1.5.1 ได้เว็บไซตข์ ายสนิ คา้ ออนไลน์ รา้ นBBสต๊กิ เกอร์ 1.5.2 ได้งานวิจัยศึกษาความความพึงพอใจของผู้ใช้บริการเว็บไซต์ขายสินค้าออนไลน์ ร้านBBสติ๊กเกอร์ 1.5.3 ได้คู่มอื การใช้งานเวบ็ ไซตข์ ายสนิ ค้าออนไลน์ ร้านBBสต๊ิกเกอร์ 1.5.4 ได้ชอ่ งทางการขายสนิ คา้ และบริการ รา้ นBBสติ๊กเกอร์ ข้นึ มาอีก 1 ช่องทาง

4 1.6 นิยามศพั ท์เฉพาะ 1.6.1 เว็บไซต์ (Website Web site) หมายถึง หน้าเว็บเพจหลายหน้าซึ่งเชื่อมโยงกัน ผ่านทางไฮเปอร์ลิงค์ส่วนใหญ่จัดทำขึ้นเพ่ือนำเสนอข้อมูลผ่านคอมพิวเตอร์โดยถูกจัดเก็บไว้ใน เวลิ ดไ์ วด์เว็บ หนา้ แรกของเวบ็ ไซตท์ ่ีเก็บไวท้ ีช่ ื่อหลักจะเรียกว่าโฮมเพจ 1.6.2 เว็บเพจ (Web Page) หมายถึง หน้า ๆ หนึ่งที่เปิดดูผ่านเวิลด์ไวด์เว็บ โดยจะถูก สร้างข้ึนมาบนพื้นฐานของภาษาคอมพวิ เตอร์ เชน่ HTML หรอื่ อน่ื ๆ เช่น Flash เปน็ ตน้ 1.6.3 แอปเซิร์ฟ (AppServ) หมายถึง ชุดโปรแกรมในลักษณะของWAMP ในการสร้าง เว็บเซิร์ฟเวอรส์ ำเรจ็ รปู บนระบบปฏบิ ตั กิ ารไมโครซอฟท์ วนิ โดวส์ 1.6.4 โฮมเพจ (Home Page) หมายถึง เว็บเพจหนึ่งหน้าที่มักเป็นหน้าแรก และหน้า หลักเมื่อเข้าชมโดยมักแสดงถึงภาพรวมของเนื้อหาทั้งหมดว่ามีอะไรบ้าง และทำหน้าที่เชื่อมโยงไปยงั เวบ็ เพจอ่นื ๆ เกี่ยวข้องในเว็บไซต์ 1.6.5 พีเอชพีมายแอดมิน (phpMyAdmin) หมายถึง คือโปรแกรมที่ถูกพัฒนาโดยใช้ ภาษา PHP เพื่อใช้ในการบริหารจัดการฐานข้อมูล Mysql แทนการคีย์คำสั่ง เนื่องจากถ้าเราจะใช้ ฐานข้อมูล ที่เป็น MySQL บางครั้งจะมีความลำบากและยุ่งยากในการใช้งาน ดังนั้นจึงมเี ครื่องมือใน การจัดการฐานข้อมูล MySQL ขึ้นมาเพื่อให้สามารถจัดการ ตัว DBMS ที่เป็น MySQL ได้ง่ายและ สะดวกยงิ่ ขึ้น โดย phpMyAdmin ก็ถือเปน็ เครือ่ งมือชนดิ หนง่ึ ในการจดั การนัน้ เอง 1.6.6 โดเมนเนม (Domain Name) หมายถงึ คือชื่อของเว็บไซตท์ ่ใี ชเ้ รยี กบนอนิ เตอร์เน็ต และใช้ในการระบุเพื่อเข้าถึงเว็บไซต์ต่างๆ โดยในระยะแรกนั้นจะป็นไอพีแอดเดรสที่ใช้ในการทำงาน ซึ่งเป็นตัวเลขที่ยาว ยากต่อการจดจำ ต่อมาจึงได้มีการนำโดเมนเนมมาใช้แทนที่ ซึ่งเป็นตัวอักษรที่ อา่ นและจดจำได้งา่ ยกว่า 1.6.7 เว็บโฮสติ้ง (hosting) หมายถึง พื้นที่บนเครือข่ายที่ว่าง และเปิดให้บริการสำหรบั เก็บขอ้ มลู ที่แสดงบนเว็บไซต์ โดยจะมที ง้ั ในรูปแบบฟรแี ละรูปแบบที่ตอ้ งเสียค่าบริการ โดยจะมีข้อเสีย แตกต่างกนั ไป

5 บทท่ี 2 ทฤษฎที ีเ่ ก่ยี วขอ้ ง โครงการการสร้างเว็บไซต์ขายสินค้าออนไลน์ ร้านBBสติ๊กเกอร์ ผู้จัดทำโครงการ ได้ทำการศึกษาหลักการ ทฤษฎีและเทคโนโลยีที่เกี่ยวข้อง ที่สามารถนำมาประยุกต์ใช้งาน โดยแบง่ ออกเป็นหวั ขอ้ ตา่ ง ๆ ดงั ตอ่ ไปน้ี 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) ได้แต่จะเป็นประโยชน์ที่สุดเมื่อผู้ใช้ได้เข้าใจถึงความสัมพันธ์ ระหว่างเนื้อหา ในส่วนของการออกแบบจำเป็นจะต้องมีการวางแผนที่ดี เนื่องจากมีการเชื่อมโยงที่ เกิดขึ้น ได้หลายทิศทาง นอกจากนี้การปรับปรุงแก้ไขอาจเกิดความยุ่งยากเมื่อต้องเพิ่มเนื้อหาใน ภายหลัง 2.2.1.4 เว็บที่มีโครงสร้างแบบใยแมงมุม (Web Structure) โครงสร้างประเภทนี้จะ มีความยืดหยุ่นมากที่สดุ ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกันได้หมดเป็นการสร้างรูปแบบการ เขา้ สเู่ นอ้ื หาท่ีเปน็ อิสระ ผู้ใชส้ ามารถกำหนดวธิ กี ารเข้าสูเ่ น้อื หาได้ด้วยตนเองการเชอื่ มโยงเน้ือหาแต่ละ

8 หน้าอาศัยการโยงใยข้อความที่มีมโนทัศน์ (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 เป็นขนาดที่นิยมในปัจจุบัน เนอื่ งจากผูใ้ ชน้ ิยมใช้จอคอมพวิ เตอรข์ นาดใหญ่ข้ึนเนือ่ งมาจากราคาจอคอมพวิ เตอร์ท่ีถูกลง 2.2.3 รูปแบบการออกแบบเว็บไซต์ เว็บไซต์ในปัจจุบันจะมีการออกแบบที่แตกต่างกันไม่มากนกั ซึ่งการออกแบบหน้าตา เว็บไซต์ส่วนใหญ่จะมองดูองค์ประกอบขององค์กร หน่วยงาน หรือเนื้อหาเรื่องที่นำเสนอเป็นหลัก ซึง่ การออกแบบหนา้ ตาของเวบ็ ไซต์มีอยู่ 3 แบบ คอื 2.2.3.1 การออกแบบเว็บไซต์ที่เน้นการนำเสนอเนื้อหาเป็นการออกแบบเว็บไซต์ที่ เน้นการนำเสนอเนื้อหามากกว่ารูปภาพ โดยโครงสร้างใช้รูปแบบตารางเป็นหลัก มีการออกแบบ หนา้ ตารูปแบบงา่ ย เชน่ มเี มนสู ารบญั และเนื้อหา

9 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) ในการออกแบบเว็บไซต์ต้องคำนึงถึง ลักษณะขององค์กรเป็นหลัก เนื่องจากเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กร การเลือกใช้ตัวอักษร ชุดสี รูปภาพหรือกราฟิก จะมีผลต่อรูปแบบของเว็บไซต์เป็นอย่างมาก ตัวอย่างเช่น ถ้าเราต้องออกแบบเว็บไซต์ของธนาคารแต่เรากลับเลือกสีสันและกราฟิกมากมาย อาจทำให้ผู้ใชค้ ิดว่าเป็นเวบ็ ไซตข์ องสวนสนุกซ่งึ สง่ ผลตอ่ ความเช่ือถือขององค์กรได้ 2.2.4.4 เนื้อหา (Useful Content) ถือเป็นสิ่งสำคัญที่สุดในเว็บไซต์ เนื้อหาใน เว็บไซต์ต้องสมบูรณ์และได้รับการปรับปรุงพัฒนาให้ทันสมัยอยู่เสมอ ผู้พัฒนาต้องเตรียมข้อมูลและ เนื้อหาที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ เนื้อหาที่สำคัญที่สุดคือเนื้อหาที่ทีมผู้พัฒนาสร้างสรรค์ ขึ้นมาเอง และไม่ไปซ้ำกับเว็บอื่น เพราะจะถือเป็นสิ่งที่ดึงดูดผู้ใช้ให้เข้ามาเว็บไซต์ได้เสมอ แต่ถ้าเป็น เว็บที่ลิงค์ข้อมูลจากเว็บอื่น ๆ มาเมื่อใดก็ตามที่ผู้ใช้ทราบว่า ข้อมูลนั้นมาจากเว็บใด ผู้ใช้ก็ไมจ่ ำเป็นต้องกลบั มาใชง้ านลงิ ค์เหล่านัน้ อกี 2.2.4.5 ระบบเนวิเกชั่น ( User-Friendly Navigation) เป็นส่วนประกอบท่ี มีความสำคัญต่อเวบ็ ไซต์มาก เพราะจะช่วยไม่ใหผ้ ูใ้ ช้เกิดความสบั สนระหวา่ งดูเว็บไซต์ ระบบเนวเิ กช่ัน จึงเปรียบเสมอื นป้ายบอกทาง ดังนั้นการออกแบบเนวิเกช่ัน จึงควรให้เข้าใจง่าย ใช้งานได้สะดวกถา้ มี การใช้กราฟิกก็ควรสื่อความหมาย ตำแหน่งของการวางเนวิเกชั่นก็ควรวางให้สม่ ำเสมอ เช่น อยู่ตำแหน่งบนสุดของทุกหน้าเป็นต้น ซึ่งถ้าจะให้ดีเมื่อมีเนวิเกชั่นที่เป็นกราฟิกก็ควรเพิ่มระบบ เนวิเกชั่นที่เป็นตัวอักษรไว้ส่วนล่างด้วย เพื่อช่วยอำนวยความสะดวกให้กับผู้ใช้ที่ยกเลิกการแสดงผล ภาพกราฟิกบนเว็บเบราเซอร์

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

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

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

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

14 รปู ที่ 2.12 การเรยี กดเู ว็บไซต์ 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 สีเทา ให้ความรู้สึก เศร้า อาลัย ท้อแท้ ความลึกลับ ความหดหู่ ความชรา ความสงบ ความเงียบ สุภาพ สุขุม ถ่อมตน สีนี้มีข้อดีคือทำให้เย็น แต่สร้างความสร้างความรู้สึก หม่นหมองได้ ควรใช้ร่วมกบั สีทม่ี ีชวี ิต โทนสว่างอยา่ งนอ้ ยหน่งึ สี

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

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

17 รูปท่ี 2.18 แสดงหน้าการโหลดของโปรแกรม รูปที่ 2.19 แสดงการเสร็จสน้ิ การติดตัง้ โปรเเกรม 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.20 แสดงขั้นตอนการเขา้ ส่โู ปรแกรม Adobe Photoshop CS6 รปู ที่ 2.21 แสดงหนา้ ต่างโปรแกรม Adobe Photoshop CS6 รอสักครจู่ ะปรากฏหนา้ ต่างการทำงาน Menu bar Tool options bar Toolb Palettes ox รูปที่ 2.22 แสดงหนา้ จอหลักการทำงานของโปรแกรม Adobe Photoshop CS6

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

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

21 ตารางที่ 2.1 ตารางอธิบายเคร่อื งมือTool ต่างๆ (ต่อ) สญั ลักษณ์ ความหมาย Pen Toolsใชใ้ นการลากเสน้ Path ซึ่งสามารถดัดโค้งตามรูปภาพได้ Custom Shape Toolใชเ้ ลอื กรปู ภาพเลือกรูปภาพที่มีรปู ร่างเฉพาะจาก Custom Shape List Animations Toolใช้เขียนโน๊ต หรอื แนบเสียงไปกับรปู ภาพได้ Eyedropper Tool ใช้ในการดดู สีจากรูปภาพเพ่ือใชเ้ ป็นตน้ แบบของสกี บั งานช้นิ อ่นื ๆ Measure Toolใชว้ ัดระยะห่าง, ตำแหน่งและมุมองศาระหว่างภาพ Hand Tool ใช้เลอ่ื นภาพที่อยู่ในหนา้ ตา่ งเดยี วกัน Zoom Tool ใชใ้ นการขยายและยอ่ ส่วนการแสดงภาพบนหน้าจอ 2.3.1.4 การเปดิ ไฟลภ์ าพ (Open) 1) คลิกทเี่ มนูคำส่งั File ท่ีแถบ Menu bar จากน้นั เลอื กคำสงั่ Open เปิดมาใชง้ าน รูปท่ี 2.24 แสดงการเปดิ ไฟล์ภาพ (Open) 2) จะปรากฏ Dialog แสดงรายชอ่ื ไฟลต์ ่าง ๆ ดังภาพ เพอื่ เลอื กไฟลท์ ีต่ อ้ งการ 3) คลิกเลือกไฟลท์ ่ีต้องการเปดิ ใชง้ าน จากนัน้ คลิกปุ่ม Open

22 รูปท่ี 2.25 แสดงการเปิดไฟล์ภาพ (Open) 2.3.1.5 การสร้างไฟล์ใหม่ (New) 1) คลกิ ที่เมนูคำสัง่ File ทีแ่ ถบ Menu bar จากนน้ั เลือกคำส่ัง New รปู ที่ 2.26 การสร้างไฟลใ์ หม่ (New) 2) จะปรากฏ Dialog สำหรับกำหนดคุณสมบัติตา่ ง ๆ ของไฟล์ภาพดังนี้ รปู ที่ 2.27 แสดงการกำหนดขนาดของกระดาษ

23 - 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 กำหนดใหส้ พี ้ืนหลังเป็นสีเดยี วกับ - 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

24 รูปที่ 2.28 แสดงการบันทึกข้อมูลลงบนไฟล์ (Save) 2) จะปรากฏ Dialog สำหรับกำหนดคุณสมบัตติ า่ ง ๆ ของไฟลภ์ าพ ดงั นี้ รูปที่ 2.29 แสดงการบันทกึ ขอ้ มลู ลงบนไฟล์ (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 เพื่อบนั ทึกข้อมูล

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

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

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

28 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 ได้

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

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

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

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

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

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

35 ตารางที่ 2.2 ตารางอธบิ ายเคร่อื งมอื ในแถบ Document Toolbar (ต่อ) สญั ลกั ษณ์ ความหมาย แสดงเมนูสำหรับเปดิ /ปดิ ลกั ษณะพเิ ศษของแท็กหรือคำสงั่ บางอย่าง เชน่ ตาราง,เฟรม และ CSS เพือ่ ชว่ ยให้การแก้ไข เว็บเพจสะดวกขึ้น ปรบั ปรุงการแสดงผลของเวบ็ เพจ ใชก้ ำหนดชอื่ หรอื คำอธิบายเว็บเพจ รปู ท่ี 2.49 แสดงมุมมองโค้ด (Code View) รปู ท่ี 2.50 มุมมองโค้ดและออกแบบ (Code and Design View หรือ Split)

36 รูปท่ี 2.51 แสดงมุมมองออกแบบ (Design View) รปู ท่ี 2.52 แสดงมุมมองแสดงหน้าเว็บเหมอื นดูบนบราวเซอร์ (Live View) 1. กลุ่มพาเนลต่างๆ (Panel Groups) พาเนลเป็นกรอบเล็ก ๆ ที่รวบรวมเครื่องมือต่าง ๆ สำหรับใช้ ทำงานเฉพาะเรื่องไว้ เช่น พาเนล CSS Styles ใช้จัดการกับสไตล์ CSS และพาเนล Files ใช้จัดการ กับไฟล์และโฟลเดอร์ภายในเว็บไซต์ใน Dreamweaver ประกอบไปด้วยพาเนลจำนวนมาก ซ่ึง สามารถเปิด/ปิดได้โดยเลือกคาสั่ง Window แล้วเลือกชื่อพาเนลนั้น หรือ กดคีย์ลัดที่แสดงด้านหลัง ชอื่ พาเนล ดังรูป รูปที่ 2.53 แสดงมุมมองกลุ่มพาเนล

37 2. ไมบ้ รรทดั (Ruler) ไมบ้ รรทดั จะปรากฏที่ด้านบนและด้านซ้าย ของวินโดว์ Document เพื่อให้สาหรับช่วยกำหนดตำแหน่งหรือขนาดขององค์ประกอบต่าง ๆ ทีว่ างบนเว็บเพจ สาหรับการจดั การตา่ ง ๆ กบั ไม้บรรทดั จะทำไดด้ ังน้ี 1) ซ่อน/แสดงไม้บรรทัด เลอื กคาสั่ง View > Rulers > Show (คยี ลัด Ctrl +Alt +R) 2) ยา้ ยตำแหนง่ 0,0 ให้คลกิ ลากรูป ไปวางตำแหนง่ ใหม่ 3) ย้ายตำแหน่ง 0,0 กลบั มาทมี่ ุมซ้ายบนสดุ ใหด้ ับเบลิ คลิก ท่ี หรือคลิกขวาบน ไมบ้ รรทดั แลว้ คลิกเลือกคาส่งั Reset Origin 4) เปลี่ยนหนว่ ยวัดบนไมบ้ รรทัดให้คลิกขวาบนไม้บรรทัด แลว้ เลือกหน่วย ซ่งึ มดี ังนี้ - Pixels พกิ เซล - Inches นว้ิ - Centimeters เซนติเมตร รปู ท่ี 2.54 แสดงหน้าต่างไมบ้ รรทัด 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 จนถึง ปัจจุบันได้ถูกนำมา ใช้งานอย่างแพร่หลาย โดยเฉพาะเทคโนโลยีเว็บ ทำให้การนำเสนอทำได้อย่างน่าสนใจ นอกจากน้ัน

38 โปรแกรม Flash ยังสามารถสร้างแอพพลิเคชั่น (Application) เพื่อใช้ทำงานตา่ งๆ รองรับการใชง้ าน กับอุปกรณ์ที่ เชื่อมต่อกับระบบเครือข่ายอินเตอร์เน็ต และทำงานได้กับหลายๆ แฟลตฟอร์ ม (Platform) 2.3.4.1 การเปิดใช้งานโปรแกรม Adobe Flash CS6 เขา้ สโู่ ปรแกรม Flash CS6 เม่อื เปิดโปรแกรมคร้ังแรก โดยคลิกเมาส์ท่ปี ุ่ม Start แล้วเลือกคำส่ง All Programs->Adobe>Adobe Flash CS6 Professional จะปรากฏ หน้าต่าง ใหเ้ ราเลือกใชง้ านโปรแกรม Flash CS6 ดงั นี้ รูปท่ี 2.55 แสดงการเขา้ สู่โปรแกรม Adobe Flash CS6 รูปที่ 2.56 แสดงหน้าต่างเรมิ่ การทำงานของ Adobe Flash CS6