การสร้างเว็บไซต์ศูนย์พัฒนาการกีฬากอล์ฟจังหวัดมุกดาหาร

การสรา้ งเว็บไซต์ศูนยพ์ ัฒนาการกฬี ากอลฟ์ จังหวดั มุกดาหาร Website creation of Mukdahan Sports Development Center นายปรเมษฐ์ ไชยายงค์ นายเกยี รติศกั ดิ์ ไชยยายงค์ โครงการนีเ้ ป็นส่วนหนึ่งของการศกึ ษาตามหลักสตู รประกาศนยี บัตรวิชาชีพชัน้ สูง.(ปวส.) สาขาวชิ าคอมพิวเตอร์ธุรกจิ วิทยาลยั การอาชพี นวมินทราชินมี ุกดาหาร ปีการศกึ ษา 2563

การสรา้ งเว็บไซต์ศูนยพ์ ัฒนาการกฬี ากอลฟ์ จังหวดั มุกดาหาร Website creation of Mukdahan Sports Development Center นายปรเมษฐ์ ไชยายงค์ นายเกยี รติศกั ดิ์ ไชยยายงค์ โครงการนีเ้ ป็นส่วนหนึ่งของการศกึ ษาตามหลักสตู รประกาศนยี บัตรวิชาชีพชัน้ สูง.(ปวส.) สาขาวชิ าคอมพิวเตอร์ธุรกจิ วิทยาลยั การอาชพี นวมินทราชินมี ุกดาหาร ปีการศกึ ษา 2563





ค หวั ข้อโครงการ การสรา้ งเวบ็ ไซตศ์ ูนย์พฒั นาการกฬี ากอล์ฟจงั หวัดมุกดาหาร Website creation of Mukdahan Sports Development Center ผดู้ าเนินโครงการ นายปรเมษฐ์ ไชยายงค์ รหัสประจาตัวนักศึกษา 6132040004 นายเกยี รติศักดิ์ ไชยยายงค์ รหัสประจาตัวนกั ศึกษา 6132040012 ครทู ่ีปรึกษา นางประเสรฐิ ศรี สทุ ธิพันธ์ ครผู สู้ อน นางประเสรฐิ ศรี สทุ ธิพนั ธ์ สาขาวิชา คอมพวิ เตอร์ธุรกิจ ปีการศึกษา 2563 …………………………………………………………………………………………………..………………………………………… บทคดั ย่อ โครงการการสร้างเว็บไซต์ศูนย์พัฒนาการกีฬากอล์ฟจังหวัดมุกดาหาร จัดทาขึ้นโดยมี วัตถุประสงค์ 1) เพ่ือสร้างเว็บไซต์ศูนย์พัฒนาการกีฬากอล์ฟจังหวัดมุกดาหาร 2) เพื่อเผยแพร่ ประชาสัมพันธ์ข้อมูลข่าวสารของศูนย์พัฒนาการกีฬากอล์ฟจังหวัดมุกดาหาร 3) เพื่อศึกษาความ พงึ พอใจของผู้ใช้บริการเว็บไซต์ศูนย์พัฒนาการกีฬากอล์ฟจังหวัดมุกดาหาร ในการวิจัย กลุ่มตัวอย่าง ในการวิจัยคร้ังนี้ ประชากรที่อาศัยอยู่ในตาบลดงเย็น อาเภอเมืองมุกดาหาร จังหวัดมุกดาหาร จานวน 338 คน ได้มาโดยวิธีการสุ่มตัวอย่างแบบง่าย โดยใช้วิธีประเมินแบบสอบถามออนไลน์ เครื่องมือท่ีใช้ในการวิจัยคร้ังน้ีได้แก่ 1. เว็บไซต์ศูนย์พัฒนาการกีฬากอล์ฟจังหวัดมุกดาหาร ที่ผู้วิจัย สร้างข้ึน 2. แบบประเมินความพึงพอใจของกลุ่มตัวอย่างที่มีต่อคุณภาพเว็บไซต์ศูนย์พัฒนาการกีฬา กอล์ฟจังหวัดมุกดาหาร สถิติที่ใช้ในการวิจัยครั้งนี้ได้แก่ ค่าเฉลี่ย และค่าส่วนเบ่ียงเบนมาตรฐาน (S.D.) ผลของการสร้างเว็บไซต์ศูนย์พัฒนาการกีฬากอล์ฟจังหวัดมุกดาหารพบว่าเว็บไซต์ สามารถเผยแพร่ประชาสัมพันธ์ข้อมูลข่าวสาร หรือกิจกรรมต่าง ๆ ของศูนย์พัฒนาการกีฬากอล์ฟ จังหวัดมกุ ดาหาร ผลการวิจัยพบว่า ความพึงพอใจของกลุ่มตัวอย่างที่มีต่อเว็บไซต์ศูนย์พัฒนาการกีฬา กอล์ฟจังหวัดมุกดาหาร ท้ัง 3 ด้าน มีระดับความพึงพอใจ อยู่ในระดับมาก มีค่าเฉล่ียเท่ากับ 4.09 และคา่ เบย่ี งเบนมาตรฐานเท่ากับ 0.68

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

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

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

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

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

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

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

สารบญั รูปผนวก ฎ รูปที่ หน้า รูปท่ี ง.1 รปู ภาพแบบประเมินความพงึ พอใจออนไลน์ 93 รปู ท่ี ง.2 รปู ภาพแบบประเมินความพึงพอใจออนไลน์ ตอนที่ 1 93 รูปที่ ง.3 รูปภาพแบบประเมินความพงึ พอใจออนไลน์ ตอนที่ 1 93 รปู ที่ ง.4 รปู ภาพแบบประเมินความพึงพอใจออนไลน์ ตอนที่ 1 94 รปู ท่ี ง.5 รปู ภาพแบบประเมินความพึงพอใจออนไลน์ ดา้ นที่ 1 94 รูปท่ี ง.6 รูปภาพแบบประเมินความพึงพอใจออนไลน์ ดา้ นที่ 2 95 รูปที่ ง.7 รปู ภาพแบบประเมินความพงึ พอใจออนไลน์ ดา้ นท่ี 3 95 รปู ที่ ง.8 รูปภาพแบบประเมินความพงึ พอใจออนไลน์ ตอนท่ี 3 95 รูปที่ ฉ.1 การพมิ พ์ URL เพื่อเขา้ หน้าเว็บไซต์ 100 รูปที่ ฉ.2 หนา้ แรกของเว็บไซต์ 100 รูปท่ี ฉ.3 ป่มุ เมนูของส่วนหน้าเว็บ 100 รูปที่ ฉ.4 หน้ารูปภาพและเน้ือหาข่าวสาร 101 รูปท่ี ฉ.5 หน้าเคล็ดลบั การเล่นกอล์ฟ 101 รปู ท่ี ฉ.6 หนา้ บุคลากร 101 รูปท่ี ฉ.7 หน้าการติดต่อ 101 รปู ท่ี ฉ.8 ปุ่ม Admin ของเว็บไซต์ 102 รูปที่ ฉ.9 หนา้ เข้าสรู่ ะบบของ Admin 102 รปู ท่ี ฉ.10 หนา้ แสดง Admin 102 รูปที่ ฉ.11 หนา้ การเพ่ิมข่าวสาร 103 รูปท่ี ฉ.12 หน้าตอบกลับ 103 รูปที่ ซ.1 น่ังทาเว็บไซตห์ รือชน้ิ งาน 109 รปู ท่ี ซ.1 นั่งทาเอกสารโครงการ 109 รปู ท่ี ซ.1 ปรกึ ษาหารอื กนั ในเรือ่ งของโครงการ 109

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

2 (3) ได้คู่มือการใช้งานเว็บไซต์ศูนย์พัฒนาการกีฬากอล์ฟจังหวัดมุกดาหาร จานวน 1 เลม่ 1.3.1.2 เปา้ หมายเชิงคุณภาพ (1) เพ่ือเป็นส่ือกลางในการเผยแพร่ข้อมูลข่าวสารศูนย์พัฒนาการกีฬา กอล์ฟจังหวัดมกุ ดาหร ผ่านระบบเครอื ข่ายอนิ เตอรเ์ นต็ (2) เพ่ิมจานวนผู้เขา้ ใช้งานศนู ย์พัฒนาการกฬี ากอลฟ์ จังหวดั มุกดาหารให้ มากยิง่ ขนึ้ (3) ผู้เข้าใช้งานเว็บไซต์ศูนย์พัฒนาการกีฬากอล์ฟจังหวัดมุกดาหาร มีความพึงพอใจในการเขา้ ใชง้ านอยู่ในระดับมาก 1.3.2 ขอบเขตของโครงกำร 1.3.2.1 สว่ นระบบ Admin สามารถจัดการไดด้ ังน้ี - เขา้ สรู่ ะบบ - เพ่ิมขอ้ มลู ขา่ วสาร - ตรวจสอบขอ้ มลู สมาชกิ - ตอบกลบั การติดต่อของสมาชิก - ออกจากระบบ 1.3.2.2 หน้าเว็บไซต์ทัง้ หมด - หนา้ แรก - ขา่ วสาร - บคุ ลากร - ตดิ ต่อเรา - แอดมนิ 1.4 แผนงำนและระยะเวลำดำเนินกำร เวลาเริ่มต้นการทางานในแต่ละวันไม่แน่นอน โดยเฉลี่ย 1 วัน ทางาน 4 ชั่วโมง รวมทั้งสิ้น ในการศึกษาและการพัฒนาเว็บไซต์ใช้เวลาโดยประมาณ 4 เดือน (1 กรกฎาคม 2563 ถึง 23 ตุลาคม 2563) ซึ่งสามารถแสดงรายละเอียดตารางแผนการดาเนินงาน ดังต่อไปน้ี

3 ตำรำงท่ี 1.1 ตารางแสดงแผนการดาเนินงาน กิจกรรม/ ระยะเวลำดำเนินงำน (สัปดำหท์ ่ี) ขนั้ ตอนกำรดำเนินงำน กรกฎำคม สงิ หำคม กนั ยำยน ตุลำคม ขนั้ เตรียมกำร สอบเค้าโครง 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ศึกษาขอ้ มูล ขัน้ ดำเนินกำร สร้างช้ินงาน ตรวจสอบความสมบรู ณ์ ขนั้ สรุปและประเมินผล สรุปผล จัดทารูปเล่ม นาเสนอ/เผยแพร่ 1.5 ประโยชน์ท่ีคำดวำ่ จะไดร้ บั 1.5.1 ได้เว็บไซตศ์ ูนย์พฒั นาการกีฬากอลฟ์ จังหวดั มุกดาหาร 1.5.2 ไดเ้ ผยแพร่ประชาสัมพันธ์ขอ้ มลู ข่าวสารของศนู ยพ์ ฒั นาการกีฬากอลฟ์ จงั หวดั มุกดาหาร 1.5.3 ได้ระดับความพึงพอใจของผู้ใช้บริการเว็บไซต์ศูนย์พัฒนาการกีฬากอล์ฟจังหวัด มุกดาหาร 1.6 นิยำมศพั ท์เฉพำะ เวบ็ ไซต์ (Website, Web site) หมายถึง หน้าเวบ็ เพจหลายหนา้ ซ่ึงเช่ือมโยงกันผ่านทาง ไฮเปอร์ลิงค์ส่วนใหใ่จัดทาข้ึนเพื่อนาเสนอข้อมูลผ่านคอมพิวเตอร์โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หนา้ แรกของเวบ็ ไซตท์ ี่เก็บไว้ท่ชี ่ือหลักจะเรียกวา่ โฮมเพจ Photoshop คือ เป็นโปรแกรมในตระกูล Adobe ท่ีใช้สาหรับตกแต่งภาพถ่ายและภาพ กราฟฟิก ได้อย่างมีประสิทธิ์ภาพ ไม่ว่าจะเป็นงานด้านส่ิงพิมพ์ นิตยสาร และงานด้านมัลติมีเดีย อกี ทั้งยังสามารถ retouching ตกแต่งภาพและสร้างภาพ ซ่ึงกาลังเป็นทน่ี ยิ มสงู มากในขณะนี้ Dreamweaver คือ โปรแกรมสร้างเว็บเพจแบบเสมือนจริง ของค่าย Adobe ซ่ึงช่วย ให้ผู้ท่ีต้องการสร้างเว็บเพจไม่ต้องเขียนภาษา HTML หรือโค๊ดโปรแกรมเอง หรือที่ศัพท์เทคนิค เรียกว่า \"WYSIWYG \" โปรแกรม Dreamweaver มีฟังก์ชันท่ีทาให้ผู้ใช้สามารถจัดวางข้อความ

4 รูปภาพ ตาราง ฟอร์ม วิดีโอ รวมถึงองค์ประกอบอ่ืน ๆ ภายในเว็บเพจได้อย่างสวยงามตามที่ผู้ใช้ ต้องการ Appser คือ ชดุ โปรแกรมในลักษณะของ WAMP ในการสร้างเวบ็ เซิร์ฟเวอร์สาเร็จรูปบน ระบบปฏบิ ัตกิ ารไมโครซอฟท์ วนิ โดวส์ Localhost หมายถึง ช่ือแม่ข่ายมาตรฐานที่กาหนดให้กับตาแหน่งของส่วนต่อประสาน เครือข่ายวงย้อนกลับ (loopback) เม่ือผู้ใช้ส่งข้อมูลไปยังโลเคิลโฮสต์ พวกเขาจะได้รับข้อมูลของ ตวั เองกลับมา หรอื พดู อกี นัยหนึ่งคือ เครือ่ งคอมพิวเตอร์ตวั มนั เอง โดเมนเนม (อังกฤษ: domain name) หมายถึง ชื่อที่ใช้ระบุลงในคอมพิวเตอร์ (เช่น เป็นส่วนหน่ึงของที่อยู่เว็บไซต์ หรืออีเมล์แอดเดรส) เพื่อไปค้นหาในระบบโดเมนเนมซีสเทม เพ่ือระบุถึงเลขที่อยู่ไอพี ของช่ือนั้น ๆ เป็นช่ือที่ผู้จดทะเบียนระบุเว็บไซต์ของตน บางครั้งอาจใช้ \"ท่ีอยู่เว็บไซต์\" แทนได้ ช่ือโดเมนเป็นช่ือที่ต้ังข้ึนเพ่ือให้ง่ายต่อการจดจา เนื่องจากไอพีแอดเดรสนั้น จดจาได้ยากกว่า และเมื่อการเปล่ียนแปลงไอพีแอดเดรส ผู้ใช้ไม่จาเป็นต้องรับรู้หรือจดจาไอพี แอดเดรสใหม่ ยงั คงใช้โดเมนเนมเดมิ ได้ต่อไป AppServ หมายถึง เว็บเซิร์ฟเวอร์ทาหน้าที่จัดเก็บและประมวลผลข้อมูล เพื่อแสดงผล ข้อมูลผ่านทางเว็บไซต์ ภาษาที่ใช้เขียนเว็บ เช่น php ระบบฐานข้อมูล เช่น MySQL เครื่องมือที่ใช้ บรหิ ารจดั การระบบฐานขอ้ มูล เชน่ phpMyAdmin ทส่ี าคัใเป็น Open Source Software PHP MySQL หมายถึง โปรแกรมระบบจัดการฐานข้อมูล มีหน้าที่เก็บขอ้ มูลอย่างเป็นระบบ รองรับคาส่ังเป็นเครื่องมอื สาหรับเก็บข้อมูล ทีต่ ้องใช้ร่วมกับเคร่ืองมือหรอื โปรแกรมอ่ืนอยา่ งบูรณาการ เพ่อื ให้ไดร้ ะบบงานท่ีรองรบั ความตอ้ งการของผู้ใช้ PHP MyAdmin หมายถึง เคร่อื งมอื ซอฟตแ์ วรฟ์ รีท่ีเขยี นข้ึนใน PHP ซง่ึ phpMyAdmin มีวัตถุประสงค์เพื่อรองรับการจัดการ MySQL ผ่านเว็บ phpMyAdmin สนับสนุนการดาเนินการต่าง ๆ บน MySQ การดาเนินงานท่ีใช้บ่อย phpMyAdmin สามารถดาเนินการผ่านอินเทอร์เฟซผู้ใช้ โฮมเพจ (Home Page) คอื เว็บเพจหน่ึงหน้าที่มักเป็นหน้าแรก และหน้าหลักเมอ่ื เขา้ ชม โดยมักแสดงถึงภาพรวมของเนื้อหาทั้งหมดว่ามีอะไรบ้าง และทาหน้าท่ีเชื่อมโยงไปยังเว็บเพจ อื่น ๆ ทเ่ี กี่ยวขอ้ งในเว็บไซต์ เว็บเซิร์ฟเวอร์ (Web Server) คือ เครื่องคอมพิวเตอร์ที่เก็บข้อมูลของเว็บไซต์ และทาหน้าที่ส่งข้อมูลกลับไปยังเว็บเบราว์เซอร์ของเครื่องรับบริการ (Client) เม่ือได้รับการร้องขอ ข้อมูล ขอ้ มูลทง้ั หมดทีใ่ ช้งานผ่านเวลิ ดไ์ วด์เวบ็ จะดงึ มาจากเว็บเซิร์ฟเวอร์ เว็บโฮสต้ิง (Web Hosting) คือ พื้นที่บนเครือข่ายที่ว่าง และเปิดให้บริการสาหรับเก็บ ข้อมูลท่ีแสดงบนเว็บไซต์ โดยจะมีท้ังในรูปแบบฟรีและรูปแบบที่ต้องเสียค่าบริการ โดยจะมีข้อดี ขอ้ เสียแตกต่างกันไป

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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