สื่อการเรียนการสอนวิชาคอมพิวเตอรและการบํารุงรักษา E-learning for teaching of computer and Maintenance นายมาวิน วงศจันทร นายพรหมพิริยะ ชูสวาง นายณัฐกิตติ์ คลายวิเชียร โครงงานนี้เปนสวนหนึ่งของการเรียนตามหลักสูตรประกาศนียบัตรวิชาชีพ สาขาวิชาคอมพิวเตอรธุรกิจ วิทยาลัยเทคโนโลยีอรรถวิทยพณิชยการ ปการศึกษา 2565
ข บทคัดยอ หัวขอโครงการ สื่อการเรียนการสอนออนไลนวิชาคอมพิวเตอรการบํารุงรักษา E- Learning for Teaching of computer and Maintenance ผูจัดทําโครงการ นายณัฐกิตติ์ คลายวิเชียร รหัสนักศึกษา 42262 นายพรหมพิริยะ ชูสวาง รหัสนักศึกษา 42714 นายมาวิน วงศจันทร รหัสนักศึกษา 42657 อาจารยที่ปรึกษาหลัก อาจารยดิฐประพจน สุวรรณศาสตร อาจารยที่ปรึกษารวม อาจารยนราภรณ เจริญชัย สาขาวิชา คอมพิวเตอธุรกิจ สถาบัน วิทยาลัยเทคโนโลยีอรรถวิทยพณิชยการ ปการศึกษา 2565 บทคัดยอ การจัดทําสื่อการเรียนการสอนวิชาคอมพิวเตอรและการบํารุงรักษา วัตถุประสงคเพื่อเปน การ เผยแพร ความรูใหกับบุคคลทั่วไป และบุคคลที่กําลังศึกษาหาความรูใหม ๆ เพื่อนําไปใชใหเกิด ประโยชนเว็บไซตสื่อการเรียนการสอนวิชาคอมพิวเตอรและการบํารุงรักษานั้นเปนสิ่งสําคํญของการ เรียน วิชาคอมพิวเตอรและการนํามาใชงานในชีวิตประจําวัน เนนการศึกษาและปฏิบัติงานจริงพรอม ทั้งบอกวิธีนําไปใชและประโยชนในการศึกษา สามารถหาวิธีและเพิ่มคุณคาใหแกตนเองและผูที่เขามา ชมสื่อการเรียน การสอน ดังนั้นทางคณะผูจัดทําจึงเรียบเรียงขอมูลเกี่ยวกับบุคลิกภาพขึ้นมาใหสะดวก ตอการศึกษาและ คนควาแลวยังสามารถทําแบบทดสอบกอนเรียนและหลังเพื่อทดสอบความรูของ ผูเรียนไดอีกดวย
ค กิตติกรรมประกาศ ขอขอบพระคุณวิทยาลัยเทคโนโลยีอรรถวิทยพาณิชยการอยางมากที่เอื้อเฟอสถานที่ใหทํา โครงการ และของขอบพระคุณอาจารยที่สอยใหไดเขาใจในการทํางานและ สอนใหรูเรื่องวิชา ความรูตาง ๆ รวม ไปถึงการทําโครงการเว็บไซตสื่อการเรียนการสอนวิชาคอมพิวเตอรและการ บํารุงรักษา โครงการเว็บไซตฉบับนี้ไดจัดทําขึ้นมาดวยความตั้งใจและ ความพยายามเปนอยางมาก โดย ไดรับความรวมมือเปนอยางดีจึงขอขอบพระคุณอาจารยดิฐประพจน สุวรรณศาสตรที่ปรึกษา หลักโคลงการและ อาจารย นราภรณ เจริญชัย ที่ปรึกษารวมที่ไดใหความสับสนุกและใหความ ชวยเหลือรวามทั้งคําปรึกษา และคําแนะนําที่ดีมาโดยตลอดการทําโครงการ รวมทั้งอาจารยใน สาขาคอมพิวเตอรธุรกิจทุกทานที่ คอยตักเตือนสวนที่ผิดพลาด พรอมทั้งขอบคุณทาน คณะกรรมการในการสอบโครงการที่ใหคําติชม เพื่อที่ไดจะนําไปปรับปรุงแกไขใน สวนที่บกพรอง ใหดีขึ้นเพื่อใหโครงการในครั้งนี้ออกมาไดสมบูรณแบบ ขอขอบพระคุณคณะอาจารย พอแม ที่คอยใหกําลังใจ รวมทั้งสมาชิกในกลุมและเพื่อนๆทุก คนที่มีความรวมมือในการทํากิจกรรมตาง ๆ โดยเฉพาะการทําโครงการครั้งนี้ ที่คอยรวมทุกขรวม สุข และผานอุปสรรคตาง ๆ มาดวยกันจนทําใหวิชาโครงการครั้งนี้สําเร็จลุลวงไปดวยดี มาวิน วงศจันทร ณัฐกิตติ์ คลายวิเชียร พรหมพิริยะ ชูสวาง
ง คํานํา การจัดทําโครงการนี้ เปนสวนหนึ่งของวิชาโครงงาน 2 รหัสวิชา 20204-8502 หลักสูตร ประกาศนียบัตรวิชาชีพ สาขาคอมพิวเตอรธุรกิจ โดยคณะผูจัดทําไดจัดทําโครงการประเภท สื่อการ เรียนการสอนผานเว็บไซตวิชา คอมพิวเตอรและการบํารุงรักษา โดยมีการสรางเว็บไซตเพื่อนําเสนอ ผลงานแกผูที่สนใจในการเรียนการสอนออนไลน เว็บไซตที่คณะผูจัดทําไดจัดทําขึ้นนั้น ประกอบดวย ความรูเกี่ยวกับคอมพิวเตอร และการ บํารุงรักษาคอมพิวเตอร โดยภายในเว็บไซตจะประกอบไปดวย เนื้อหาบทเรียนจํานวนทั้งหมด 9 บทเรียน เพื่อใหเขาใจในระบบคอมพิวเตอรสวนประกอบภายในตาง ๆ วิธีการรักษาที่ถูกตองที่ทําให สามารถใชคอมพิวเตอรไดอยางมีประสิทธิภาพสูงสุด รูจักแกไขและ ปองกันภัยคุมคามทาง คอมพิวเตอร เบื้องตนไดดีอีกดวย รวมถึงยังสามรถนําความรูที่ไดจาก การศึกษาไปประยุกตใชในชีวิตประจําวันหรือ ประกอบเปนอาชีพหารายไดเสริม หากโครงการนี้มี ขอผิดพลาดประการใด ทางคณะผูจัดทํา ตอง ขอภัยไว ณ ที่นี้และจะ ดําเนินการพัฒนาผลงาน ทางดานคอมพิวเตอรใหพัฒนาดีขึ้นไป คณะผูจัดทํา 26 กุมภาพันธ 2566
จ สารบัญ หนา หนาอนุมัติ ก บทคัดยอ ข กิตติกรรมประกาศ ค คํานํา ง สารบัญ จ สารบัญรูป ช สารบัญตาราง ญ บทที่ 1 บทนํา 1.1 ภูมิหลังและความเปนมา 1 1.2 วัตถุประสงคโครงการ 2 1.3 ขอบเขตการศึกษา 2 1.4 ประโยชนที่คาดวาจะไดรับ 2 1.5 แผนการดําเนินงาน 3 1.6 เครื่องมือที่ใชพัฒนาโปรแกรม 4 1.7 งบประมาณการดําเนินงาน 5 บทที่ 2 ระบบงานและทฤษฎีที่เกี่ยวของ 2.1 ระบบงานในปจจุบัน 6 2.2 ปญหาระบบงานในปจจุบัน 6 2.3 ทฤษฎีที่เกี่ยวของ 7 2.4 ระบบงานที่เกี่ยวของ 23 บทที่ 3 การออกแบบระบบงานดวยคอมพิวเตอร 3.1 การออกแบบผังโครงสรางเว็บไซต (Site Map) 33 3.2 การออกแบบแผนภาพแนวความคิด (Story Board Design) 34 3.3 การออกแบบสิ่งนําเขา (Input Design) 39 3.4 การออกแบบสิ่งนําออก (Output Design) 39
จ สารบัญ (ตอ) หนา บทที่ 4 การพัฒนาสื่อการเรียนการสอนคอมพิวเตอรการบํารุงรักษา 4.1 เครื่องมือและอุปกรณที่ใช 40 4.2 โปรแกรมที่ใชในการพัฒนา 40 4.3 การติดตั้งโปรแกรมและระบบ 41 4.4 วิธีการนําไปใชงาน 43 บทที่ 5 สรุปผลการทําโครงการ 5.1 สรุปผลโครงการ 45 5.2 ปญหาและอุปสรรคในการดําเนินงาน 46 5.3 สรุปเวลาการทํางานจริง (Gantt Chart) 48 5.4 สรุปคาใชจายในการดําเนินการจริง 48 บรรณานุกรม 49 ภาคผนวก 50 - ใบขอเสนออนุมัติโครงการระบบคอมพิวเตอร (ATC.01) 51 - ใบขอเสนออาจารยที่ปรึกษารวมโครงการ (ATC.02) 52 - ใบขอสอบโครงการระบบคอมพิวเตอรธุรกิจ (ATC.03) ครั้งที่ 1 53 - ใบขอสอบโครงการระบบคอมพิวเตอรธุรกิจ (ATC.03) ครั้งที่ 2 53 - ใบรายงานความคืบหนาโครงการระบบคอมพิวเตอรธุรกิจ (ATC.04) ครั้งที่ 1 54 - ใบรายงานความคืบหนาโครงการระบบคอมพิวเตอรธุรกิจ (ATC.04) ครั้งที่ 2 54 - ใบบันทึกการเขาพบที่ปรึกษาโครงการ (ATC.05) แผนที่ 1 55 - ใบขออนุญาตอาจารยที่ปรึกษารวมจัดทํา เอกสารบทที่ 4-5 (ATC.06) 61 ประวัติผูจัดทําโครงการ 66
สารบัญรูป หนา รูปที่ 2.2 แสดงตัวอยางเว็บไซตของ Adobe 7 รูปที่ 2.2 ขั้นตอนในการพัฒนาเว็บไซต 11 รูปที่ 2.1 สีขั้นที่ 1 และสีขั้นที่ 2 12 รูปที่ 2.2 สีขั้นที่ 3 และสีขั้นที่4 12 รูปที่ 2.3 การผสมแบบบวก 13 รูปที่ 2.4 การผสมแบบลบ 13 รูปที่ 2.7 การแสดงความหลากหลายของสีที่ไดจากการผสมสีกับสีขาว เทา และดํา 15 รูปที่ 2.8 ชุดสีรอน 16 รูปที่ 2.9 ชุดสีเย็น 16 รูปที่ 2.10 ชุดสีแบบเดียว 17 รูปที่ 2.11 ชุดสีแบบสามเสา 17 รูปที่ 2.12 ชุดสีที่คลายคลึงกัน 18 รูปที่ 2.13 ชุดสีตรงขาม 18 รูปที่ 2.14 ชุดสีตรงขามขางเคียง 19 รูปที่ 2.15 ชุดสีตรงกันขามขางเคียงทั้งสองดาน 19 รูปที่ 3.1 การออกแบบผังโครงสรางเว็บไซต 33 รูปที่ 3.2 หนาแรก 34 รูปที่ 3.3 หนวยการเรียนรูตางๆ 34 รูปที่ 3.4 หัวขอยอยหนวย 35 รูปที่ 3.5 หัวขอยอยหนวยที่ 1 35 รูปที่ 3.6 หัวขอยอยหนวยที่ 2 36 รูปที่ 3.7 หัวขอยอยหนวยที่ 3 36 รูปที่ 3.8 หัวขอยอยหนวยที่ 4 37 รูปที่ 3.10 แบบทดสอบหนวยตางๆ 38 รูปที่ 3.11 ผูจัดทํา 38 รูปที่ 4.3 การติดตั้งโปรแกรม 41 รูปที่ 4.2 เขาไปใน thunkable 42 รูปที่ 4.3 เริ่มตนเรียนคอมพิวเตอรการบํารุงรักษา 42 รูปที่ 4.4 คําอธิบายรายวิชา 43
สารบัญรู ป (ตอ) รูปที่ 4.4 สารบัญ 43 รูปที่ 4.5 ระบบการทํางานของคอมพิวเตอร 44 รูปที่ 5.2 สรุปเวลาการดําเนินงานจริง 46 รูปที่ 5.2 สรุปเวลาการดําเนินงานจริง (ตอ) 47 รูปที่ 5.3 สรุปคาใชจายในการดําเนินการจริง 48 รูปที่ 1 ถายภาพสถานที่ผูรับรองใชงานโปรแกรม โดยมีนักศึกษาดวย 64 รูปที่ 2 ถายภาพสถานที่ผูรับรองใชงานโปรแกรม โดยมีนักศึกษาดวย 64 รูปที่ 3 ถายภาพสถานที่ผูรับรองใชงานโปรแกรม โดยมีนักศึกษาดวย 65 รูปที่ 3 ถายภาพสถานที่ผูรับรองใชงานโปรแกรม โดยมีนักศึกษาดวย 65
1 บทที่ 1 บทนํา 1.1 ภูมิหลังและความเปนมา ยุคแรก ๆ คอมพิวเตอรมีแตเครื่องเปลา ๆ ผูใชตองเขียนโปรแกรมสั่งงาน ตรวจสอบการ ทํางาน ปอนขอมูล และควบคุมเอง ทําใหระยะแรกใชกันอยูในวงจํากัด เมื่อไมมีระบบปฏิบัติการผูใช จะตองเขียนโปรแกรมทั้งหมดตั้งแต ควบคุมเครื่อง เตรียมขอมูล ทํางานตามโปรแกรม ทําใหใช ประโยชนจากเครื่องคอมพิวเตอรไดนอยมาก ไมคุมคา และราคาก็คอนขางแพง ทําใหการใช คอมพิวเตอรอยูในวงจํากัด และตองจัดระบบ ภายหลังการใชงานดวย ดังนั้น ถาพิจารณา ความสามารถในการดูแลและควบคุมระบบจะดีกวาผูใชทั่วไป ระบบปฏิบัติการ หมายถึง โปรแกรมที่ถูกสรางโดยซอฟตแวร ( Software ) หรือเฟรมแวร ( Firmware ) ( เฟรมแวร หมายถึง โปรแกรมที่ประกอบโดยไมโครโปรแกรม ซึ่งเก็บอยูใน หนวยความจํา ROM และ PROM ) หรือทั้งซอฟตแวรหรือเฟรมแวร เพื่อใหฮารดแวรสามารถทํางาน ไดอยางเปนระบและมีความถูกตองแมนยํา ระบบปฏิบัติการ เปนไดทั้งซอฟแวร ฮารดแวร เฟรมแวร หรือผสมผสานกันก็ได โดยเปาหมายหลักของระบบปฏิบัติการ คือ สามรารถใหผูใชคอมพิวเตอรใช งานคอมพิวเตอรไดโดยที่ผูใชไมจําเปนตองทราบกลไกการทํางานของฮารดแวร ในอดีตนั้น ระบบปฏิบัติการมีไมมากนัก และพัฒนาขึ้นมาเพื่อใชกับคอมพิวเตอรเฉพาะรุนเทานั้น แตปจจุบันไดมี การพัฒนาใหสามารถใชงานกับเครื่องคอมพิวเตอรใด ๆ ก็ได ทําใหงายตอการติดตั้งและการใชงาน โดยโปรแกรมทไดรับความนิยมและมีสวนแบงการตลาดมากที่สุดในโลก คือ โปรแกรมที่รูจักในชื่อของ ระบบปฏิบัติการ Windows พัฒนาโดยบริษัทไมโครซอฟท ระบบปฏิบัติการ ( Operating System : OS ) เปนซอฟตแวรที่ใชควบคุมการทํางานของ ระบบคอมพิวเตอรใหสามารถประมวลผลไดถูกตองตามที่ตองการ ทําหนาที่เปนผูประสานระหวางผูใช คอมพิวเตอรและเครื่องคอมพิวเตอรใหสามารถทํางานรวมกันได โดยจุดประสงคของระบบปฏิบัติการ คือการจัดเตรียมสิ่งที่จําเปนในการประมวลผลแกผูใช เพื่อใหเกิดความสะดวกสบายแกผูใช และมีการ ใชทรัพยากรตาง ๆ อยางมีประสิทธิภาพ
2 1.2 วัตถุประสงคโครงการ 1. มีความรูความเขาใจเกี่ยวกับหลักการพื้นฐานของระบบคอมพิวเตอร 2. มีความรูเกี่ยวกับการทํางานของโปรแกรมระบบปฏิบัติการบนเครื่องแมขาย เครื่องลูกขาย และอุปกรณพกพา 3. มีทักษะในการติดตั้ง ใชงานระบบปฏิบัติการตาง ๆ และ โปรแกรมยูทิลิตี้ 4. มีคุณธรรม จริยธรรม และคานิยมที่ดีในการใชคอมพิวเตอร 1.3 ขอบเขตการศึกษา 1. จัดทําสื่อการเรียนการสอนในหัวขอเรื่อง “ระบบปฏิบัติการ” 2. ใชGoogle site ในการทําสื่อการเรียนการสอน 3. การทําสื่อการเรียนการสอนเกี่ยวกับผูที่สนใจศึกษาเกี่ยวกับ “ระบบปฏิบัติการ” 4. นําแหลงขอมูลและแหลงอางอิงจาก Google และ หนังสือ 5. ใชGoogle form ในการทําแบบทดสอบกอนเรียนและหลังเรียน 1.4 ประโยชนที่คาดวาจะไดรับ 1. ไดดําเนินการทําสื่อการเรียนการสอนของ “ระบบปฏิบัติการ” 2. ไดรับความรูเกี่ยวกับ “ระบบปฏิบัติการ” 3. ไดสงเสริมและพัฒนาการเรียนรูแกผูที่สนใจศึกษาของ “ระบบปฏิบัติการ” 4. ไดนําการสื่อการเรียนการสอนเกี่ยวกับ “ระบบปฏิบัติการ” มาทําใหเกิดแหลงเรียนรู 5. ไดเกิดการเรียนรูและทักษะของการใช “ระบบปฏิบัติการ” ใหเกิดประโยชนใชชีวิต ประจําวัน
3 1.5 แผนการดําเนินงาน (Gantt Chart) ตารางที่ 1.1 แผนการดําเนินงาน รายการ ภาคเรียนที่ 1 มิถุนายน 65 กรกฎาคม 65 สิงหาคม 65 กันยายน 65 ระยะเวลา 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 เสนอหัวขอ ATC.01 5-10 มิ.ย. 65 ประกาศผลรอบที่ 1 13 มิ.ย. 65 เสนอหัวขอ รอบที่2 14-16 มิ.ย 65 ประกาศผล รอบที่ 2 17 มิ.ย. 65 เสนออาจารยที่ปรึกษา รวม ATC.02 13 -30 มิถุนายน 65 สงเอกสารบทที่ 1 สมบูรณ 14- มิ.ย. 65 ถึง 8 ก.ค. 65 สงเอกสารบทที่ 2 สมบูรณ 9-31 ก.ค. 65 สงเอกสาร บทที่ 3 สมบูรณ 1-31 ส.ค. 65 สอบนําเสนอโครงงาน ATC.03 ครั้งที่ 1 5-23 ก.ย. 65 สงเอกสารโครงงาน ปก ,บทที่ 1-3 บรรณานุกรม ATC 01-05 26-30 ก.ย. 65 ติดตามความคืบหนาโปรแกรม อาจารยที่ปรึกษารวม ตุลาคม 65 รายละเอียดในการเขาพบที่ปรึกษารวม 1 2 3 4 สงความคืบหนาโปรแกรม 20 % โครงรางชิ้นงาน ออกแบบโลโกชื่อแบรนด 3-9 ต.ค. 65 สงความคืบหนาโปรแกรม 40 % การลงเนื้อหา จัดวางรูปภาพ สีที่ใช 10-16 ต.ค. 65 สงความคืบหนาโปรแกรม 60 % การเชื่อมโยง การตั้งชื่อ 17-23 ต.ค. 65 สงความคืบหนาโปรแกรม 80 % ระบบเริ่มใชงานได 24-31 ต.ค. 65
4 ตารางที่ 1.1 แผนการดําเนินงาน (ตอ) 1.2 เครื่องมือที่ใชพัฒนาโปรแกรม 1. โปรแกรม thankable ใชการออกแบบหนาแอพพลิเคชั่น 2. โปรแกรม Canva ใชในการพิมพเอกสาร 3. โปรแกรม Ocam ใชสําหรับการอัดวิดีโอการสอน รายการ ภาคเรียนที่ 2 พฤศจิกายน 65 ธันวาคม 65 มกราคม 66 กุมภาพันธ 66 ระยะเวลา 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 สงความคืบหนาโปรแกรม 100 % 1-7 พ.ย. 65 สอบนําเสนอโครงงาน ระดับปวส.2 - ปวช.3 ATC.03 ครั้งที่ 2 26 พ.ย. 65 สง ATC.06 1-16 ธ.ค. 65 สง ATC.07 1-30 ม.ค. 66 สงเอกสาร บทที่ 4 สมบูรณ 20 ธ.ค. - 23 ม.ค. 66 สงเอกสาร บทที่ 5 สมบูรณ 31 มกราคม 2566 บทคัดยอ กิตติกรรมประกาศ คํานํา 1-7 ก.พ.66 สารบัญ สารบัญรูป สารบัญตาราง 8-14 ก.พ.66 ประวัติผูจัดทํา หนาอนุมัติ 15-19 ก.พ.66 ภาคผนวก ATC.04-05 20-27 ก.พ.66 สงเลมโครงงาน 28 ก.พ.66 สงไฟลเอกสาร Word PDF โปรแกรม ไฟลรวม PDF ไมเกิน 10 มีนาคม 2566
5 1.6 งบประมาณการดําเนินงาน ตารางที่ 1.2 งบประมาณการดําเนินงาน ลําดับ รายการ จํานวน ราคา (บาท) 1 กระดาษ A4 2 รีม 300 2 ตลับหมึกพิมพ 1 ตลับ 450 3 คาเขาเลม 1 เลม 150 4 คาแฟลชไดรฟ 1 อัน 300 5 คาซองใสเอกสาร 1 ซอง 20 รวมเปนเงิน 1,220
บทที่ 2 สื่อการเรียนการสอนวิชาคอมพิวเตอรและการ บํารุงรักษา และทฤษฎีที่เกี่ยวของ 2.1 ระบบงานในปจจุบัน ปจจุบันเว็บไซตเขามาบทบาทในชีวิตประจําวันของมากขึ้น ในปจจุบันที่เทคโนโลยีมีการ พัฒนาขึ้น มีความทันสมัยมากขึ้นรองรับการใชชีวิตของคนสมัยใหม สื่อการเรียนการสอนก็มีการ พัฒนาและมีรูปแบบที่ทันสมัยขึ้นดวยเชนกัน การเรียนการสอนผานอินเทอรเน็ต การหาความรูจาก อินเทอรเน็ต อยูที่ไหนก็สมารถเรียนรูศึกษาหาขอมูลจากเว็บไซต ตาง ๆ ได จึงมีการพัฒนาและมีเว็บ ไซด ความรูคาง ๆ มากขึ้น หากคุณตองการเว็บไซตที่ตรงกับวัตถุประสงคและประสบความสําเร็จ ก็ จําเปนจําตองมีการเตรียมการที่ดี ทํางานอยางเปนขั้นตอนตลอดจนพิจารณาถึงปจจัยตาง ๆ ที่ เกี่ยวของอยางรอบดาน การสรางเว็บไซตที่มีคุณภาพมีองคประกอบที่เกี่ยวของอยูมากมายซึ่งเรา จะตองหาขอมูล วิเคราะห และตัดสินใจกอนที่จะถึงขั้นลงมือทําจริง ตัวอยางเชนวัตถุประสงคของ เว็บไซตคืออะไร ใครเปนกลุมผูชมเปาหมาย ทีมงานมีใครบางและแตละคนเชี่ยวชาญในเรื่องใด เพื่อให ศึกษาและเรียนรูหลากหลายเว็บไซต ผูใชจึงมีทางเลือกมากขึ้น ดังนั้นการออกแบบเว็บไซตจึงเปน กระบวนการสําคัญในกรสรางเว็บไซตใหประทับใจผูใช ซึ้งนอกจากตองพัฒนาเว็บไซตที่ดีมีประโยชน แลว ยังตองคํานึงถึงการแขงขันกับเว็บไซตอื่น ๆ สื่อการเรียนการสอนวิชา คอมพิวเตอรและการ บํารุงรักษาก็เปนรายวิชาที่สําคัญอยางหนึ่งทางผูจัดทําจึงใหความสําคัญและไดจัดทํามาเปนรูปแบบสื่อ การเรียนการสอนซึ่ง มีเนื้อหาประกอบไปดวย 9 บท คือเกี่ยวกับ พื้นฐานการทํางานของคอมพิวเตอร และพีซีคอมพิวเตอรการประกอบเครื่องคอมพิวเตอรระบบปฏิบัติการWindows7 และการติดตั้งการ ใชงาน อุปกรณพวงโปรแกรมติตั้งอุปกรณตอพวงการบํารุงรักษาคอมพิวเตอร โปรแกรมปองกันไวรัส คอมพิวเตอรโปรแกรมอรรถประโยชนและการสํารอง/กูคืนขอมูล การแกปญหาการใชงาน คอมพิวเตอรดวย โปรแกรมไบออสดังนั้นคณะผูจัดทําไดจัดทําเว็บไซตสื่อการเรียนการสอนวิชา คอมพิวเตอรและการบํารุงรักษาเพื่อสะดวกในสืบคนและการศึกษาเพิ่มเติมสําหรับผูที่สนใจ เพื่อ เผยแพรความรูให บุคคลทั่วไปที่ตองการจะศึกษาขอมูล
2.2 ปญหาระบบงานในปจจุบัน 1. มีที่ใหความเกี่ยวกับเรื่องคอมพิวเตอรและการบํารุงรักษาเปนพื้นฐานเดิมอยูแลว แต ขอมูลละเนื้อของแตละเว็บไซตนั้นมีไมครบถวน เราจึงจัดทําเว็บไซตนี้ขึ้น 2. ปจจุบันสื่อการเรียนการสอนคอนขางจะซับซอนในการนําเสนอขอมูลทําใหผูศึกษาสับสนใน ขอมูลที่ศึกษา 3. ปจจุบันกลุมผูที่ศึกษาและผูที่สนใจยังดูแลรักษาคอมพิวเตอรกันแบบที่ผิด ๆ 2.3 ทฤษฎีที่เกี่ยวของ รูจักกับการออกแบบเว็บไซต การออกแบบเว็บไซตนั้นไมไดหมายถึงลักษณะหนาตาของเว็บไซตเพียงอยางเดียวแต เกี่ยวของตั้งแตการเริ่มกําหนดเปาหมายของเว็บไซตระบุกลุมผูใชการจัดระบบขอมูล การสราง องคประกอบตาง ๆ ในการออกแบบหนาเว็บรวมไปถึงการใชเทคนิคพิเศษ การเลือกใชสี และการ จัดรูปแบบตัวอักษร นอกจากนั้นยังตองคํานึงถึงความแตกตางของสื่อกลางในการแสดงผลเว็บไซตดวย เชน ความละเอียดของสี ขนาดความพอดีตาง ๆ ที่ผูใชมีอยู เพื่อใหผูใชเกิดความสะดวกและความพอ ใยที่เขามาอานขอมูลในเว็บนั้น ดังนั้นทุกสิ่งทกอยางในเว็บไซตทั้งที่คุณมองเห็นและมองไมเห็นลวน เปนผลมาจากการออกแบบเว็บไซตทั้งสิ้นเว็บไซตที่ดูสวนงามหรือมีลูกเลนมากมายนั้นอาจจะไม นับเปนการออกแบบที่ดีก็ได ถาความสวยงามและลูกเลนเหลานั้นไมเหมาะสมกับเว็บไซต ดวยเหตุนี้ ตึงเปนเรื่องยากที่จะระบุวาการออกแบบเว็บไซตที่ดีนั้นเปนอยางไร เนื่องจากไมมีหลักเกณฑแนนอนที่ จะใชไดกับทุกเว็บไซต แนวทางการออกแบบบางอยางที่เหมาะสมกับเว็บไซดหนึ่งอาจจะไมเหมาะกับ อีกเว็บไซตหนึ่งก็ได ทําใหแนวทางในการออกแบบของแตละเว็บไซตนั้นแตกตางกันไปตามเปาหมาย และลักษณะของเว็บไซตนั้น เว็บไซตบางแหงอาตองการความสนุกสนาน บันเทิง ขณะที่เว็บอื่นกลับ ตองการความถูกตอง นาเชื่อถือเปนหลัก ดังนั้นอาจสรุปไดวาการออกแบบที่ดีก็คือ การออกแบบให เหมาะสมกับเปา หมายและลักษณะของเว็บไซตโดยคํานึงถึงความสะดวกในการใชงานของผูใชเปนหลักออกแบบให ตรงกับเปาหมายและลักษณะของเว็บไซต เว็บไซตเว็บไซตแตละประเภทตางมีเปาหมายและลักษณะที่แตกตางกัน ตัวอยางเชน เว็บ ไซดที่เปนเครื่องมือคนหาซึ่งเปนแหลงรวมที่อยูของเว็บไซตตาง ๆ ทําหนาที่เปนประตูไปสูเว็บไซตอื่น เว็บไซตเพื่อความบันเทิงผูใชมักดาคหวังที่จะไดพบกับสิ่งที่ตื่นเตน เรื่องราวที่สนุกสนานเพลิดเพลิน หรืออาจจะไดเรียนรูสาระบางอยางบาง
7 รูปที่ 2. แสดงตัวอยางเว็บไซตของ Adobe สวนเว็บไซตขององคกรธุรกิจที่มีเปาหมายเพื่อขายสินคาหรือบริการนั้นยิ่งจําเปนตองใหสําคัญกับการ ออกแบบเว็บไซตในอยางมากเพราะผูใชหรือลูกคาของคุณจะตัดสินใจซื้อสินคาหรือบริการ โดยดูจาก สิ่งที่พบเห็นในเว็บไซต องคประกอบของการออกแบบเว็บไซตอยางมีประสิทธิภาพ องคประกอบตอไปถือเปนพื้นฐานที่สําคัญของเว็บไซตที่ไดรับการออกแบบมาอยางมีประสิทธิภาพ 1. ความเรียบงาย (Simplicity) หลักที่สําคัญของความเรียบงาย คือ การลือสารเนื้อหาถึงผูใชโดย จํากัดองคประกอบเสริมที่เกี่ยวของกับการนําเสนอใหเหลือเฉพาะสิ่งที่จําเปนเทานั้น 2. ความสม่ําเสมอ (Consistency) ใชรูปแบบเดียวกันตลอดทั้งเว็บไซด เนื่องจากผูใชจะรูสึกกับ เว็บไซตวาเปนเสมือนสถานที่จริงถาลักษณะของแตละหนาในเว็บไซตเดียวกันนั้นแตกตางกันมาก ผูใช ก็จะเกิดความสับสนและไมแนใจวากําลังอยูในเว็บเดิมหรือไม 3. ความเปนเอกลักษณ(Identity) การออกแบบตองคํานึงถึงลักษณะขององคกรเนื่องจากรูปแบบ ของเว็บไซตสามารถสะทอนถึงเอกลักษณและลักษณะขององคกรนั้นได 4. เนื้อหาที่มีประโยชน(Useful Content) เนื้อหาถือเปนสิ่งที่สําคัญที่สุดในเว็บไซตดังนั้นเว็บไซตควร จัดเตรียมเนื้อหาและขอมูลที่ผูใชตองการใหถูกตองและสมบูรณโดยมีการปรับปรุงและเพิ่มเติมใหทัน ตอเหตุการณอยูเสมอเนื้อหาที่สําคัญที่สุดคือเนื้อหาที่สรางขึ้นมาเองโดยทีมงานของคุณและไมซ้ํากับ เว็บอื่น เพราะจะเปนสิ่งที่ดึงดูดผูใชใหเขามาในเว็บไซตอยูเสมอ 5. ระบบวิเกชันที่ใชงานงาย (User- Friendly Navigation) ระบบวิเกชันเปนองคประกอบที่ สําคัญมากของเว็บไซตจะตองออกแบบใหผูใชเขาใจไดงายและใชงานสะดวก
8 6. มีลักษณะที่นาสนใจ (Visual Appeal) เปนเรื่องที่ยากที่จะตัดสินวาลักษณะหนาตาของเว็บไซต นาสนใจหรือไมเพราะเกี่ยงของกับความชอบของแตละบุคคลอยางไรก็ตามหนาตาของเว็บไซดจะมี ความสัมพันธกับคุณภาพขององคประกอบตาง ๆ 7. การใชงานอยางไมจํากัด (Compatibility) ควรออกแบบเว็บไซตใหผูใชสวนใหญเขาถึงไดมาก ที่สุด โดยไมมีการบังคับใหผูใชตองติดตั้งโปรแกรมใด ๆ เพิ่มเติมหรือตองเลือกใชบราวเซอรชนิดใดชนิดหนึ่ง จึงจะสามารถเขาถึงเนื้อหาไดสามารถแสดงผลไดในทุกระบบปฏิบัติการและที่ความละเอียดหนาจอ ตางกันอยางไมมีปญหา 8. คุณภาพในการออกแบบ (Design Stability) ถาตองการใหผูใชรูสึกวาเว็บไซตที่มีคุณภาพ ถูกตอง และเชื่อถือได ก็ควรใหความสําคัญกับการออกแบบเว็บไซตอยางมาก 9. ระบบการใชงานที่ถูกตอง (Functional Stability) ระบบการทํางานตาง ๆ ในเว็บไซตจะตองมี ความแนนอน และทําหนาที่ไดอยางถูกตอง กระบวนการพัฒนาเว็บไซต การจัดระบบโครงการสรางขอมูล (Information Architecture) ในกระบวนการพัฒนาเว็บไซตที่จะไดศึกษาตอไปนี้ไดอาศัยหลักการจัดระบบโครงขอมูล ที่ เรียกวา Information Architecture อยูในหลาย ๆ สวนตั้งแตขั้นแรกจนถึงขั้นที่ไดเปนรูปแบบ โครงงานสุดทาย (Final Architecture Plan) ซึ่งถือเปนกระบวนการที่สําคัญมากที่จะทําใหเว็บไซต บรรลุตามเปาหมายที่ตั้งไว การจัดระบบโครงสรางขอมูล คือ การพิจารณาวาเว็บไซตควรจะมีขอมูลและการทํางาน ใดบาง ดวยการสรางเปนผังงานโครงสรางกอนที่จะเริ่มลงมือพัฒนาเว็บเพจโดยเริ่มจากการกําหนด เปาหมายเว็บไซตและกลุมผูใชเปาหมาย ตอมาก็พิจารณาถึงเนื้อหาและการใชงานที่จําเปนแลวนํามา จัดกลุมใหเปนระบบจากนั้นก็ถึงเวลาในการออกแบบโครงสรางขอมูลในหนาเว็บใหพรอมที่จะนําไป ออกแบบกราฟก และหนาตาใหสมบูรณตอไป การจัดทําระบบโครงงานขอมูลเปนพื้นฐานสําคัญในการออกแบบเว็บไซตที่ดี ที่จะชวยพัฒนา แบบแผนราบละเอียดขอมูลในการออกแบบเว็บไซต ซึ่งไดแก รูปแบบการนําเสนอ
9 ระบบการวัดขนาดของรูปภาพ เมื่อจอมอนิเตอรทําการแสดงผลรูปภาพในเว็บเพจพิกเซลในรูปภาพจะจับคูกันแบบหนึ่งตอ หนึ่งกับพิกเซลตามความละเอียดของหนาจอทําใหหนวยการวัดรูปภาพในเว็บจึงเปนพิกเซลไมใชนิ่ง หรือเซนติเมตรแตอยางใด ดังนั้นกระบวนการ ออกแบบกราฟกและรูปภาพตาง ๆ ซึ่งจะมีประโยชน ในการเปรียบเทียบขนาดกราฟกกับองคประกอบอื่น ๆ ในหนาเว็บรวมถึงขนาด วินโดของบราวเซอรอีกดวย ระบบการวัดของละเอียดของรูปภาพ เนื่องจากรูปภาพในเว็บโดยสวนใหญจะแสดงผานจอมอนิเตอร ในทางเทคนิคที่ถูกตองแลว ระบบการวัดความละเอียดของรูปภาพจึงตองเปน “Pixel per inch” (ppi) แตระบบการวัดอีกระบบ หนึ่งคือ “Dot per inch” (dpi) ที่ใชความละเอียดของภาพที่พิมพออกมา ซึ่งความละเอียดที่ไดจะ ขึ้นอยูกับประสิทธิภาพของเครื่องพิมพแตละเครื่องในทางปฏิบัติ หนวย ppi กับ dpi อาจใชแทนกันได ทําใหเปนที่ยอมรับวาความละเอียดของรูปภาพในหนาจอมีหนวยเปน dpi แทนที่จะเปน ppi ที่ ถูกตอง การออกแบบเพื่อผูใช กําหนดกลุมผูใชเปาหมาย การทําเว็บไซดจําเปนตองรูกลุมผูใชเปาหมายที่จะเขามาใชริการในเว็บไซตอยางชัดเจน เพื่อที่จะตอบสนองความตองการของผูใชไดอยางถูกตอง สิ่งที่ผูใชตองการจากเว็บไซต 1. ขอมูลและการใชงานที่เปนประโยชน 2. การตอบสนองตอผูใช 3. ความบันเทิง 4. ของฟรี ขอมูลหลักที่ควรมีอยูในเว็บไซต 1. ขอมูลเกี่ยวกับบริษัท (About the company) 2. รายละเอียดผลิตภัณฑ (Product information) 3. ขาวความคืบหนาและขาวจากสื่อมวลชน (News/Press releases) 4. คําถามยอดนิยม (Frequently asked questions) 5. ขอมูลในการติดตอ (Contact information)
10 โครงสรางระบบขอมูลแบบไฮเปอรเท็กซ(Hypertext) ไฮเปอรเท็กซเปนโครงสรางระบบขอมูลแบบใหมที่มีลักษณะคลายเครือขายโยงใยโครงสราง ระบบนี้ประกอบดวยองคประกอบ 2 สวน คือ รายการหรือกลุมขอมูลที่ถูกลิงค กับลิงคที่เชื่อมโยง ขอมูลเหลานั้น องคประกอบ 2 สวนนี้เมื่อรวมกัน จะเกิดเปนระบบการเชื่อมโยงขอมูลประเภทตาง ๆ ไมวาจะเปนตัวอักษร ขอมูล รูปภาพ เสียง หรือภาพยนตร โดยการเชื่อมโยงนั้นอาจเปนไปตามลําดับ ชั้นขอมูลหรือไมตามลําคับชั้นขอมูล หรือทั้งสองอยางรวมกันก็เปนไดความยืดหยุนอยางสูงของระบบ ไฮเปอรเท็กซ จึงเปนไปไดงายที่คุณจะทําการเชื่อมโยงซับซอนเกินไปจนทําใหผูใชสับสน กระบวนการ 1.3 ขั้นตอนในการพัฒนาเว็บไซต สิ่งที่ไดรับ Phase1: สํารวจปจจัยสําคัญ (Research) 1. รูจักตัวเอง – กําหนดเหมาะและสํารวจความพรอม 2. เรียนรูผูใช- ระบุกลุมผูใชและศึกบาดวามตองการ 3.ศึกษาคูแขง - สํารวจการแขงขันและเรียนรูคูแขง 1.เปาหมายหลักของเว็บไซต 2.ความตองการของผูใช 3.กลยุทธในการแขงขัน Phase2: พัฒนาเนื้อหา (Site Content) 4. สรางกลยุทธในการออกแบบ 5. หาขอสรุปขอบเขตเนื้อหา Phase3: พัฒนาโครงสรางเว็บไซต (Site Structure) 6. จัดระบบขอมูล 7. จัดทําโครงสรางขอมูล 8. พัฒนาระบบวิเกชัน Phase4: พัฒนาเนื้อหา (Visual design) 9. ออกแบบลักษณะหนาเว็บเพจ 10. พัฒนาเว็บตนแบบและขอกําหนดสุดทาย 1.แนวทางการออกแบบเว็บไซต 2.ขอบเขตเนื้อหาและใชงาน 3.ขอมูลที่ถูกจัดอยางเปนระบบ 1.ลักษณะหนาตาของเว็บไซต 2.เว็บเพจตนแบบที่จะใชในการพัฒนา 3.รูปแบบโครงสรางของเว็บไซต Phase5: พัฒนาเนื้อหา (Production and Operation) 11. ลงมือพัฒนาเว็บไซต 12. เปดตัวเว็บไซต 13. ดูแลและพัฒนาตอเนื่อง 1.แผนผังการสรางขอมูล 2.แนวทางการทองเว็บ 3.ขอมูลที่ถูกจัดอยางเปนระเบียบ 1.เว็บไซตที่สมบูรณ 2.เปดตัวเว็บไซตและทําใหเปนที่รูจัก 3.แนวทางการดูแลเละพัฒนาตอไป
11 รูปที่2.2 ขั้นตอนในการพัฒนาเว็บไซต โครงสรางขอมูลแบบฐานขอมูล (Database Model) โครงสรางขอมูลแบบนี้มักนําไปใชกับเว็บขนาดใหญที่มีผูรับผิดชอบเรื่องระบบฐานขอมูล โดยเฉพาะฐานขอมูลเปนการจัดระบบขอมูลที่เปนที่นิยมมากประเภทหนึ่งโดยขอมูลจะถูกจัดอยูในรูป แถวและคอลัมนดวยกฎเกณฑบางอยางที่มีการกําหนดไวเฉพาะฐานขอมูลนั้น ๆ การนําระบบ ฐานขอมูลมาใชในเว็บไซตจะชวยเพิ่มความสามารถในกรดนหาขอมูลไดอยางถูกตองและรวดเร็ว นอกจากนั้นการใชระบบฐานขอมูลยังชวยเพิ่มความสะดวกในการดูแลและปรับปรุงเนื้อหาอยางมี ประสิทธิภาพ เนื่องจากความซับชอนของกฎเกณฑและขอจํากัดตาง ๆ ในระบบฐานขอมูลจึงเปนเรื่องยากใน การจัดเนื้อหาทั้งหมดของเว็บไซตซึ่งมีทั้งตัวอักษร ลิงครูปภาพ และสื่ออื่น ๆ ไวในฐานขอมูลเดียวกัน ไดทั้งหมด หรือถาจะทําจริงที่ก็ตองใชเวลาและความพยายามอยางมากดวยเหตุดังกลาวระบบ ฐานขอมูลควรนําไปใชกับบางสวนในเว็บไซตหรือเว็บไซตยอย (Sub site) หลักการออกแบบหนา สรางลําดับชั้นความสําคัญขององคประกอบ (Visual Hierarchy) หลักสําคัญในการออกแบบหนาเว็บอยางหนึ่งก็คือการสรางสําคับชั้นความสําคัญของ องคประกอบตาง ๆ ภายในหนาเว็บ เพื่อเนนใหเห็นวาอะไรเปนเรื่องสําคัญมากสําคัญรองลงไป หรือ สําคัญนอยตามสําดับการจัดระเบียบขององคประกอบอยางเหมาะสมจะชวยแสดงถึงความสัมพันธ ระหวางองคประกอบตาง ๆ ในหนาเว็บไดในการออกแบบคุณจึงควรใหความสนใจกับปจจัยเหลานี้ ขนาดเปรียบเทียบ (relative size) ขององคประกอบตาง ๆ ในหนาเว็บจะชวยสื่อความ หมายถึงความสําคัญของสิ่งหนึ่งตอสิ่งอื่น ๆ โดยองคประกอบที่มีขนาดใหญยอมสามารถดึงความสนใจ ของผูใชไดกอน และยังแสดงถึงความสําคัญที่มีเหนือองคประกอบขนาดเล็ก ตัวอยางที่เราเห็นกันอยู ทั่วไปก็คือ การกําหนดหัวขอเรื่องตาง ๆ ใหมีขาดใหญกวาสวนของเนื้อหาเสมอ เพื่อแสดงใหผูใช มองเห็นไดชัดเจนและเขาใจจุดสําคัญของเนื้อหาไดดีขึ้น แตเมื่อใดก็ตามที่คุณกําหนดใหสวนของหัวขอ มีขนาดเล็กกวาเนื้อหาก็จะสงผลใหผูใชเกิดความสับสนไดทันที ตําแหนงและลําดับขององคประกอบ แสดงถึงลําคับความสําคัญของขอมูลที่คุณตองการใหผูใชไดรับ เนื่องจากภาษาสวนใหญรวมถึง ภาษาไทยและอังกฤษจะอานจากซายไปขวา และจากบนลงลาง คุณจึงควรจัดวางสิ่งที่มีความสําคัญไว ที่สวนบนหรือดานซายของหนาอยูเสมอ เพื่อใหผูใชมองเห็นไดกอน แตถาคุณจัดวางสิ่งสําคัญไวที่ สวนทายของหนา ผูใชจํานวนมากอาจจะไมไดรับขอมูลนั้น
12 รูปที่ 2.1 สีขั้นที่ 1 และสีขั้นที่ 2 รูปที่ 2.2 สีขั้นที่ 3 และสีขั้นที่4 การผสมสีมี 2 แบบคือ การผสมแบบบวก ( Additive mixing ) จะเปนการผสมของแสง ไมใชการผสมของวัตถุที่มี สีบนกระดาษ การนําไปใชงาน จะนําไปใชในสื่อใด ๆ ที่ใชแสงสองออกมา เชน จอโปรเจคเตอร ทีวี หรือจอมอนิเตอร
13 รูปที่ 2.3 การผสมแบบบวก การผสมแบบลบ ( Subtractive mixing ) การผสมสีแบบนี้ไมเกี่ยวของกับแสง แตจะ เกี่ยวของกับการดูดกลืน และสะทอนแสงของวัตถุ การนําไปใชงาน จะนําไปใชในสื่อที่เกี่ยวของกับ การใชวัตถุมีสี เชน ภาพวาด รูปปน หรือ สิ่งพิมพตาง ๆ รูปที่ 2.4 การผสมแบบลบ วงลอสี( Color Wheel ) เปนรูปแบบหนึ่งในการจัดเรียงสีทั้งหมดไวในวงกลม และ เปน การจัดลําดับเฉดสีอยางมีเหตุผลและ งายตอการนําไปใช - วงลอแบบลบ (SubtractiveColorWheel)
14 วงลอสีแบบบวก (Additive Color Wheel) รูปที่ 2.5 วงลอแบบลบ รูปที่ 2.6 วงลอสีแบบบวก
15 สีออน สีเขม และโทนสี ( Tint, Shade and Tone ) ในการผสมสีกลางเขากับสีบริสุทธิ์ จะเกิด เปนตาง ๆ จํานวนมากมาย - สีบริสุทธิ์ผสมกับสีขาว จะไดเปนสีออน ( Tint of the hue ) - สีบริสุทธิ์ผสมกับสีเทา จะไดโทนสีระดับตาง ๆ ( Tone of the hue ) - สีบริสุทธิ์ผสมกับสีดํา จะไดสีที่เขม ( shade of the hue ) - สีออน สีเขม และโทนสี มีประโยชนอยางมากในการจัดชุดของสี เพราะทําใหสีหนึ่ง สามารถ แสดงออกและใหความรูสึกไดหลายแบบยิ่งขึ้น รูปที่ 2.7 การแสดงความหลากหลายของสีที่ไดจากการผสมสีกับสีขาว เทา และดํา ความกลมกลืนของสี ( Color Harmony ) ความเปนระเบียบของสี ที่ทําใหผูชมรูสึกถึง สมดุล และ ความสวยงามในเวลาเดียวกัน - การใชสีที่จืดชืดไป จะทําใหเกิดความรูสึกที่หนาเบื่อ และไมสามารถดึงดูดความสนใจ จาก ผูชมได - การใชสีที่มากเกินไป ก็จะดูวุนวาย ขาดระเบียบ และอาจสรางความสับสนใหกับผูชม เปาหมายในเรื่องสี คือการนําเสนอเว็บไซตโดยใชชุดสีในรูปแบบที่เขาใจไดงาย นาสนใจ และสื่อ ความหมายไดอยางเหมาะสม ชุดสีรอน ( Warm Color Scheme ) ประกอบดวยสีมวงแกมแดง, แดงแกมมวง, แดง, สม, เหลือง และ เขียวอมเหลือง สีเหลานี้สรางความรูสึกอบอุน สบาย และรูสึกตอนรับแกผูชม
16 รูปที่ 2.8 ชุดสีรอน - ชุดสีเย็น ( Cool Color Scheme ) ประกอบดวยสีมวง, สีน้ําเงิน, น้ําเงินออน, ฟา, น้ํา เงินแกมเขียวและ สีเขียวชุดสีเย็นนี้ใหความรูสึกเย็นสบาย องคประกอบรูสึกเยนสบาย องคประกอบที่ ใชสีเย็นจะดูสุภาพเรียบรอย รูปที่ 2.9 ชุดสีเย็น - ชุดสีแบบเดียว ( Monochromatic Color Scheme ) เปนรูปแบบชุดสีที่งายที่สุดคือมี คาของสุทธิ์เพียงสีเดียว แตเพิ่มความหลากหลายโดยการเพิ่มความเขม ออน ในระดับตาง ๆ ชุดสีแบบ นี้จะคอนขางมีความกลมกลืนเปนหนึ่งเดีย
17 รูปที่ 2.10 ชุดสีแบบเดียว - ชุดสีแบบสามเสา ( Triadic Color Scheme ) เปนชุดสีที่อยูที่มุมของสามเหลี่ยมดาน เทาทั้งสาม ซึ่งเปนสีที่มีระยะในวงลอสีเทากัน จึงมีความเขากันไดอยางลงตัว รูปที่ 2.11 ชุดสีแบบสามเสา - ชุดสีที่คลายคลึงกัน ( Analogous Color Scheme ) ประกอบดวยสี 2 หรือ 3 สีที่อยู ติดกัน ในวงลอ สามารถเพิ่มเปน 4 หรือ 5 สีได แตอาจสงผลใหขอบเขตของสีกวางไป
18 รูปที่ 2.12 ชุดสีที่คลายคลึงกัน - ชุดสีตรงขาม ( Complementary Color Scheme ) คือสีที่อยูตรงขามกันในวงลอสี เมื่อนําทั้งสองสีมาใชคูกัน จะทําใหสีทั้งสองมีความสวาง และสดใสมากขึ้น รูปที่ 2.13 ชุดสีตรงขาม - ชุดสีตรงกันขามขางเคียง ( Split Complementary Color Scheme ) เปนชุดสีที่ เปลี่ยนแปลงมาจากชุดสีตรงขาม ชุดสีแบบนี้มีความหลากหลายเพิ่มขึ้น แตจะมีผลใหความสดใส ความสะดุดตาและ ความเขากันของสีลดลงดวย
19 รูปที่ 2.14 ชุดสีตรงขามขางเคียง - ชุดสีตรงกันขามขางเคียงทั้งสองดาน (Double Split Complementary Color Scheme) ดัดแปลงจากชุดสีตรงขามเชนกัน แตสีตรงขามทั้งสองสีถูกแบงแยกเปนสีดนขางทั้งสอง ดานชุดสีแบบนี้มีความหลากหลายของสีที่มากขึ้นแตจะมีความสดใส และกลมกลืนของสีที่ลดลง รูปที่ 2.15 ชุดสีตรงกันขามขางเคียงทั้งสองดาน
20 สีกับอารมณความรูสึก 1. สีแดง ความหมาย ความรัก ความหลงใหล ความตื่นเตน ความกระตือรือรน ความสนใจ ความเร็ว ไฟ ความรอน สงคราม พลัง ความมีชีวิตชีวา ความโกรธ ความกาวราว อันตราย ความมุง มาด ความเปนผูนํา ความแคน และความกลาหาญ พลังของสีแดง สีแดงจะสื่อถึงพลังงานทางเพศชาย ชวยกระตุนการเจริญอาหารและความรูสึกทางเพศ เพิ่ม การขับเหงื่อ เพิ่มอัตราการเผาผลาญ และความดันโลหิต ชวยทําใหวัตถุสิ่งของโดดเดน และสะดุดตา ทําใหประสาทสัมผัสตื่นตัว และทําใหมีปฏิกิริยาตอบสนองที่เร็วขึ้น สวนในดานความเชื่อของหลักฮวง จุย สีแดงมีพลังอํานาจปองกันพลังงานที่ไมดีหรือสิ่งชั่วรายได แตตองระวังการใชสีแดงในการเจรจา ตอรอง และสถานการณที่ตึงเครียดดวยนะคะ 2. สีน้ําเงิน – สีฟา ความหมาย ความสงบ ความเงียบ ความมั่นคง ความศรัทธา ความมี ระเบียบ ความจริง ความสุขุม ความเชื่อถือ ความจงรักภักดี ความเยือกเย็น ความราบรื่น ความเปน เอกภาพ ความเปนอนุรักษนิยม แรงบันดาลใจ พลังของสีน้ําเงิน - สีฟา โทนสีนี้จะใหความรูสึกสงบเย็นที่สุด ชวยทําใหผอนคลาย และทําใหจิตใจของเพื่อน ๆ รูสึก สงบ เนื่องจากเปนสีที่ชวยกระตุนปฏิกิริยาเคมีในรางกาย นอกจากนั้นยังเปนสีโปรดของผูคนทั่ว โลก มากกวาครึ่ง และยังถูกเลือกใหเปน ‘สีที่ปลอดภัย’ ที่สุดในกรณีที่คุณไมแนใจวาจะใชสีอะไรดีอีก โทน สีฟาจะกระตุนความคิดสรางสรรค และอิสระ สวนโทนสีน้ําเงินนั้นจะสื่อถึงฐานะของสังคมชั้นสูง และ ความร่ํารวย สีน้ําเงินเขมแสดงออกถึงความรู ความเฉลียวฉลาด ตรรกะเหตุผล และความไวเนื้อ เชื่อใจ จึงเหมาะมาก ๆ เลยคะหากจะนํามาใชเกี่ยวกับงาน หรือในสถานที่ทํางาน เพราะจะชวยสราง บรรยากาศสุขุมและเปนมืออาชีพ 3. สีเขียว ความหมาย ธรรมชาติ ชีวิต มนุษยชาติ การเริ่มตน ความสดชื่น ความปลอดภัย อาหาร ความอุดมสมบูรณ ความเปนอมตะ การเจริญงอกงาม การเติบโต การดูแล การรักษาเยียวยา ความเห็นอกเห็นใจ การควบคุม ความสมดุลทางกาย และใจ ความสัมพันธที่ดี พลังของสีเขียว สีเขียวชวยกระตุนใหเพื่อน ๆ รูสึกสดชื่น ลดความเหน็ดเหนื่อย คลายความตึงเครียด ความ ตื่นตระหนก และความวิตกกังวลลงไป อีกทั้งยังเปนสัญลักษณสากลของคําวา ‘ผาน’ หรือ ‘ไป
21 ได’ ดวยนะ สีเขียวสามารถชวยเพื่อน ๆ ผอนคลายสายตา และระบบประสาท สีเขียวเขมชวยใน เรื่องการ มองเห็น และสมาธิ นอกจากนั้นยังมีพลังชวยใหจิตใจภายในสงบ ชวยพัฒนาอารมณ และพฤติกรรม สื่อถึงเกียรติยศความร่ํารวยและเงิน สีเขียวออนนั้นจะชวยใหรูสึกสดชื่น ในขณะที่ สีเขียวมะนาวออน จะสื่อถึงความออนแรงคะ 4. สีเหลือง ความหมาย ความรื่นเริงเบิกบานใจ ความสุข ความสดใสราเริง พลัง อนาคต การ มองโลกในแงดี อุดมคติ จินตนาการ ความหวัง แสงสวาง ฤดูรอน ปญญา ปรัชญา ความคิด สรางสรรค ความไมจริงใจ ความขี้ขลาด การทรยศ ความริษยา ความเจ็บปวย อันตราย พลังของสีเหลือง สีเหลืองเปนสีที่ชวยในเรื่องของการเจริญอาหาร การกระตุนสมอง และความจํา และชวย สรางความมั่นใจ และยังเปนสีที่ชวยเรื่องการคิดวิเคราะห และการใชเหตุผลอีกดวย สีเหลืองเขม จะ ชวยเพื่อน ๆ กระตุนความรูสึก และความคิดถึงอนาคตที่สดใส และดียิ่งขึ้น แตสีเหลืองหมน จะให ความรูสึกเจ็บปวยออนแอคะ ในทางจิตวิทยาสีเหลืองชวยเชื่อมตอความคิดในจิตใตสํานึก ของเรา สี เหลืองเปนสัญลักษณสากลของการเตือนใหระวัง และเปนสีที่สงพลังงานออกไปสูสมอง ของเราไดไว ที่สุดอีก 5. สีสม ความหมาย พลัง ความกระตือรือรน ความมีชีวิตชีวา ความสนุกสนาน การผจญ ภัย ความอบอุน ความยุติธรรม ความรอบรู มารยาท ความหลงใหล ความมีเสนห ความสุข ความ มั่นใจ ความปรารถนา การเก็บเกี่ยว ฤดูใบไมผลิ พลังของสีสม สีสมเปนสีที่ชวยกระตุนพลังงาน และความสดชื่นคะ สื่อไปถึงการมองโลกในแงดี ไปจนถึง สุขภาพที่ดี เชนความฉ่ําสมบูรณของผลสม สีสมสื่อถึงรสชาติ และชวยกระตุนใหเจริญอาหาร สีสม เปนสีแหงความสนุก และการผจญภัย ทั้งยังชวยจุดประกายการสื่อสารที่ดี สีสมชวยกระตุนการ ทํางานของจิตใจ และชวยเพิ่มปริมาณการสงผานของอากาศไปสูสมอง ชวยกระตุนเรื่องการจัดระบบ หรือความเปนระเบียบสิ่งตาง ๆ นอกจากนั้นยังมีพลังดึงดูดความสนใจโดยเฉพาะเด็ก ๆ 6. สีมวง ความหมาย ฐานันดรศักดิ์ จิตวิญญาณ ความสูงสง ความหรูหรา การเฉลิมฉลอง เวทมนตรคาถาความลึกลับ ความเพอฝน สติปญญา การเปลี่ยนแปลง การหลุดพน การปรุงแตง ความโหดราย ความสงางาม ความเยอหยิ่งอวดดี ความโออวด ความเศราโศก การไวอาลัย พลังของสีมวง
22 สีมวงเปนสีที่ชวยในการทําสมาธิ และยังชวยใหนอนหลับลึกไดเปนอยางดี กระตุนความ สรางสรรคทางความฝน และสติปญญา และที่สําคัญยังชวยสงบจิตใจที่วาวุนได สีมวงเขมสื่อถึงความ หรูหรา แตก็แฝงไปดวยความรูสึกเศราโศก อาลัยอาวรณ และความขุนเคืองใจคะ ในสวนของสีมวง ออนชวยกระตุนความรูสึกความออนไหวโรแมนติก ความคิดสรางสรรค ยังไมหมดเทานี้นะคะสีมวงยัง ชวยเติมเต็มความคิดและความปรารถนาภายใน สื่อถึงความเห็นอกเห็นใจ เชื่อมโยงกับพลังงานทาง จิตวิญญาณ และพลังจิต ผูหญิงสวนใหญจะชอบสีมวงออนคะ ในขณะที่ผูชายชอบสีมวงเขมมากกวา 7. สีชมพู ความหมาย ความนุมนวล ความออนโยน ความไรเดียงสา ความออนเยาว การ ดูแลเอาใจใส การทะนุถนอม ความเอื้อเฟอเผื่อแผ จิตใจดี ความหวาน ความบอบบาง นางฟา พลังของสีชมพู สีชมพูมีพลังในการรักษา โดยเฉพาะกับผูที่มีปญหาทางอารมณคะทั้งนี้สีชมพูยังชวยใหจิตใจ สงบ ผอนคลาย และออนโยนขึ้นไดอีกดวย สีชมพูชวยกระตุนใหรูสึกถึงความรัก ความชื่นชม และ ความนาทะนุถนอม สีชมพูจะดึงดูดความออนเยาว ความมั่นใจ ความกระปรี้กระเปรา และความ สนุกสนาน สวนสีชมพูออนจะดึงดูดความออนหวาน ความสวยงาม ความเสนหาที่นุมนวล ความ ออนโยน และความรักแบบไมมีเงื่อนไข เปนสีที่นารักจริง ๆเลยนะคะเนี่ย 8. สีขาว ความหมาย ความบริสุทธิ์ สันติภาพ ความสงบสุข ความดี ความเรียบงาย ความ สะอาด ความไรเดียงสา ความออนเยาว ความหลุดพน ความวางเปลา ความเบา ความเทาเทียม การ เกิด การแตงงาน ความตาย สถานพยาบาล หิมะ การปลอดเชื้อโรค ความเย็น ฤดูหนาว พลังของสี ขาว สีขาวมีพลังชวยสรางสมดุลใหกับการตัดสินใจคะ และแนนอนคะสรางความรูสึกสะอาด ปลอดภัย และเรียบงาย โดยสีขาวจะถึงความสมบูรณแบบ ความเปดเผย ความจริง ความมีเมตตา การรักษา แงบวก ชวยชําระลางความคิด และความรูสึก รวมไปถึงจิตวิญญาณ และพลังดานลบ ชวย เพิ่มพื้นที่วางใหกับความคิดใหม ๆ แตในดานลบสีขาวยังสื่อถึงความรูสึกหนาว เบื่อหนาย จืดชืด พลังของสีขาว สีขาวมีพลังชวยสรางสมดุลใหกับการตัดสินใจคะ และแนนอนคะสรางความรูสึกสะอาด ปลอดภัย และเรียบงาย โดยสีขาวจะสื่อถึงความสมบูรณแบบ ความเปดเผย ความจริง ความมีเมตตา การรักษา แงบวก ชวยชําระลางความคิด และความรูสึก รวมไปถึงจิตวิญญาณ และพลังดานลบ ชวย เพิ่มพื้นที่วางใหกับความคิดใหม ๆ แตในดานลบสีขาวยังสื่อถึงความรูสึกหนาว เบื่อหนาย จืดชืด 9. สี ดํา ความหมาย พลังอํานาจ ความรอบรู ความลึกซึ้ง ความนาเกรงขาม ความเปน ทางการ ความ หรูหรา ความทุกข ความเศรา ความโกรธ ความตาย การมองโลกในแงราย การบังคับ ควบคุม ความ มืด ความลึกลับ ความกลัว ความชั่วราย
23 9. สีดํา ความหมาย พลังอํานาจ ความรอบรู ความลึกซึ้ง ความนาเกรงขาม ความเปน ทางการ ความหรูหรา ความทุกข ความเศรา ความโกรธ ความตาย การมองโลกในแงราย การบังคับ ควบคุม ความมืด ความลึกลับ ความกลัว ความชั่วรายพลังของสีดํา สีดําเปนสีอมตะคลาสสิค สื่อถึง ความรูสึกลึกลับ และไมเปนที่รูจัก แตก็ยังเปนสียอดนิยมของ ใครหลาย ๆ คนสีดําชวยสงเสริมเรื่อง การควบคุมตนเอง และความเปนอิสระ สื่อถึงสิ่งที่มองไมเห็น ความชั่วราย และความมืด ใน ขณะเดียวกันก็ใหความรูสึกหรูหรา ราคาแพง มีรสนิยมอีกดวย สีดําเปน สีที่ดึงดูดพลังงานดานลบ หากใชมากเกินไปจะทําใหรูสึกอึดอัด ไมสบายใจ และสามารถสราง บรรยากาศที่ไมเปนมิตร การ ครอบงํา และการสิ้นสุด 10. สีน้ําตาล ความหมาย ความเปนมิตร ความอบอุน ความจริงใจ ความแข็งแรง ความ ซื่อสัตย ความไวใจ สุขภาพ ความยั่งยืน ความทนทาน ความเรียบงาย ความเปนผูใหญ พลังของสีน้ําตาล สีน้ําตาลจะชวยสรางบรรยากาศที่อบอุนและเขาไดกับแทบทุกสี ใหความรูสึกสมบูรณ เชื่อมโยงกับธรรมชาติแวดลอม ความมั่นคง ความไมไรสาระ และความสมถะติดดิน นอกจากนั้นสี น้ําตาลสื่อถึงความเปนเจาขาวเจาของ ความพิถีพิถัน ความเปนระเบียบ ความรูสึกเปนครอบครัว การ เปนสวนหนึ่ง ความปรองดอง ความสะดวกสบาย และรสนิยมที่ดีในการใชชีวิตไปจนถึงความมีสไตล 11. สีเทา ความหมาย ความออนนอมถอมตน ศักดิ์ศรี ความเสถียร ความมั่นคง ความเปน ทางการ ความมีระเบียบ สติปญญา ความเชื่อถือ ความจงรักภักดี ความเปนผูใหญ ความมีอายุ ความ เศรา ความนาเบื่อ ความเปนอนุรักษนิยม พลังของสีเทา สีเทานี้จะคอนขางสงผลนอยกวาสีอื่น ๆ คะ สีเทามีพลังทําใหจิตใจสงบและมั่นคง แตก็อาจ ทําใหรูสึกลังเลในการตัดสินใจได สีเทาเปนสีที่ไมกอเกิดอารมณจึงอาจทําใหรูสึกดานชาไรชีวิตชีวา ทั้งนี้พลังงานที่ดึงดูดนั้นจะตางกันไปตามระดับความเขมของสี สีเทาเชื่อมโยงกับการมีไหวพริบปญญา การมีความนอบนอม การเก็บตัว และการมีวุฒิภาวะ สื่อถึงความมีศักดิ์ศรี ความสงางาม ความมีระดับ และการประนีประนอม สีเทาเปนสีที่ไมเรียกรองความสนใจ และชวยเปนพื้นหลังขับใหสีอื่นโดดเดน ซึ่งสามารถชวยสรางความรูสึกผอนคลาย และสงบเย็นใหกับจิตใจ สีเทาออนนั้นจะสื่อถึงผูหญิง ในขณะที่สีเทาเขมสื่อถึงผูชาย วรรณะของสี คือสีที่ใหความรูสึกรอน-เย็น ในวงจรสีจะมีสีรอน 7 สี และสีเย็น 7 สี ซึ่งแบงที่ สีมวงกับสีเหลือง ซึ่งเปนไดทั้งสองวรรณะ แบงออกเปน 2 วรรณะ
24 วรรณะสีรอน (Warm Tone) ประกอบดวยสีเหลือง สีสมเหลือง สีสม สีสมแดง สีมวงแดง และสีมวง สีใน วรรณะรอนนี้จะไมใชสีสดๆ ดังที่เห็นในวงจรสีเสมอไป เพราะสีในธรรมชาติยอมมีสี แตกตางไปกวาสีในวงจรสีธรรมชาติอีกมาก ถาหากวาสีใด คอนขางไปทางสีแดงหรือสีสม เชน สี น้ําตาลหรือสีเทาอมทอง ก็ถือวาเปนสีวรรณะรอน วรรณะสีเย็น (Cool Tone) ประกอบดวย สีเหลือง สีเขียวเหลือง สีเขียว สีเขียวน้ําเงิน สีน้ํา เงิน สีมวงน้ําเงิน และสีมวง สวนสีอื่น ๆ ถาหนักไปทางสีน้ําเงิน และสีเขียวก็เปนสีวรรณะเย็นดังเชน สี เทา สีดํา สีเขียวแก เปนตน จะสังเกตไดวาสีเหลือง และสีมวงอยูทั้งวรรณะรอน และวรรณะเย็น ถา อยูในกลุมสีวรรณะรอนก็ใหความรูสึกรอน และถา อยูในกลุมสีวรรณะเย็นก็ใหความรูสึกเย็นไปดวย สี เหลือง และสีมวงจึงเปนสีไดทั้งวรรณะรอน และวรรณะเย็น หลักการออกแบบหนาเว็บไซต เว็บไซตเปนสื่อที่ไดรับความนิยมเปนอยางมากบนอินเตอรเน็ต ซึ่งเว็บไซตเปนสื่อที่อยูใน ความควบคุมของผูใชโดยสมบูรณ กลาวคือ ผูใชสามารถตัดสินใจเลือกไดวาจะดูเว็บไซตใด และจะไม เลือกดูเว็บไซตใด ไดตามตองการ จึงทําใหผูใชไมมีความอดทนตออุปสรรค และปญหาที่เกิดจากการ ออกแบบเว็บไซตผิดพลาดถาผูใชเห็นวาเว็บที่กําลังดูอยูนั้นไมมีประโยชนตอตัวเขา หรือไม เขาใจวา เว็บไซตนี้จะใชงานอยางไรเขาก็สามารถที่จะเปลี่ยนไปดูเว็บไซตอื่น ๆ ไดอยางรวดเร็วเนื่องจากใน ปจจุบันมีเว็บไซตอยูมากมาย และยังมีเว็บไซตที่เกิดขึ้นใหม ๆ ทุกวัน ผูใชจึงมีทางเลือกมากขึ้น และ สามารถเปรียบเทียบคุณภาพของเว็บไซดตาง ๆ ได ดังนั้น การออกแบบเว็บไซตจึงเปนกระบวนการ สําคัญในการสรางเว็บไซต หลักการออกแบบการจัดวางเว็บเพจ 1. การวางแผน - กําหนดเนื้อหา กอนลงทําเว็บเราจะตองรูวาเราจะทําเว็บเกี่ยวกับอะไร เนื้อหาเปนอยาง ไกล เปาหมายเปนกลุมใด ทั้งนี้เพื่อที่เราจะไดนําเนื้อหา เหลานั้นมาใสในเว็บเพื่อแสดงใหรูวา เนื้อหา โดยรวมเกี่ยวกับอะไร เชน เกี่ยวกับคอมพิวเตอร ก็ตองมีขอมูลของคอมพิวเตอรแตละชนิด ลักษณะ ราคาแตละรุนและสถานที่ขาย เปนตน - กําหนดเนื้อหา กอนลงทําเว็บเราจะตองรูวาเราจะทําเว็บเกี่ยวกับอะไร เนื้อหาเปนอยาง ไกลุ เปาหมายเปนกลุมใด ทั้งนี้เพื่อที่เราจะไดนําเนื้อหา เหลานั้นมาใสในเว็บเพื่อแสดงใหรูวา เนื้อหา โดยรวมเกี่ยวกับอะไร เชน เกี่ยวกับคอมพิวเตอร ก็ตองมีขอมูลของคอมพิวเตอรแตละชนิด ลักษณะ ราคาแตละรุนและสถานที่ขาย เปนตน
25 2. การเตรียมการ - การเตรียมการดานขอมูลทั้งที่เปนเนื้อหา ภาพ เสียง หรือสิ่งจําเปนตาง ๆ ที่นักเรียนคิด วา ตองการจะนําเสนอในการทําเว็บเพจนั้น เมื่อเรารูแลววาเราจะทําเว็บเกี่ยวกับอะไร การรวบรวม ขอมูล ก็มีสวนสําคัญอยางยิ่ง เชน ถาจะทําเว็บ เกี่ยวกับ โรงเรียน สีประจําโรงเรียน ประวัติโรงเรียน ฯลฯ มา รวบรวมไว แลวหลังจากนั้นก็เอาขอมูลนั้นมาจัดรูปแบบในเว็บตอไป การหาเครื่องมือในการ จัดทํานั้น 3. การจัดทํา - เมื่อวางแผนและเตรียมการเรียบรอยแลว ก็ถึงเวลาจัดทํา อาจจะทําคนเดียว หรือทํา เปนกลุม โดยใชเครื่องมือที่เตรียมไว ซึ่งจะอธิบายถึง วิธีการจัดทําหรือวิธีการสรางเว็บเพจในลําดับ ตอไป 4. การทดสอบและการแกไข - การสรางเว็บเพจทุกครั้งควรจะมีการทดสอบกอนเผยแพรทุกครั้งเพื่อหาขอบกพรองแลว นํามาแกไขการทําเว็บนั้นเมื่อทําเสร็จและอัพโหลดไปไวในเครื่องเซิรฟเวอรแลว ใหทดลองแนะนํา เพื่อนที่สนิทชิดเชื้อและใชอินเทอรเน็ตอยู ลองเปดดูและใหบอกขอผิดพลาดมา เชน การเชื่อมโยงตาง ๆ , รูปภาพ และตัวอักษรวาถูกตองชาไปหรือเปลาหากทดสอบจากเครื่องของตนเองแลว ขอผิดพลาด ตาง ๆ มักจะไมคอยปรากฏใหเห็นเนื่องจากวาขอมูลตาง ๆ จะอยูในเครื่องของตนเอง และการ เชื่อมโยงตาง ๆ เชนกัน โปรแกรมจะทําการคนหาในเครื่องจนพบ ทําใหเราไมเห็นขอผิดพลาด หลังจากทดสอบแลวใหดําเนินการแกไขขอผิดพลาด 5. การนําเว็บเพจตาง ๆ มารวบรวมเปนเว็บไซต - เมื่อสรางเว็บเพจเสร็จ จัดรวบรวม และเรียบเรียงหนาเว็บเพจแตละหนา ทําการทดสอบ แกไขปรับปรุงเสร็จแลวก็สามารถเผยแพรเว็บเพจทั้งหมดออกสูสาธารณชนในรูปแบบของเว็บไซตได หลักการออกแบบโลโก
26 1. มีเอกลักษณโลโกคือตัวแทนของสิ่งๆ หนึ่งที่จําเปนจะตองมีความเปนชิ้นเดียว สิ่งเดียว หรือคนเดียว ฉะนั้นการออกแบบโลโกที่ดีจะตองสามารถมองแลวรูไดอยางทันทีวานี่คือโลโกอะไรและ มีหนาที่อะไร ไมวานักออกแบบจะทําการคิด รวบรวมขอมูล และสรางสรรคออกมาใหสวยงามเพียงใด 2. เรียบงาย หลายคนอาจจะคิดวาการออกแบบโลโกที่ดีนั้นจะตองมีความสวยงามที่สุด ใส ทั้งตัวหนังสือ และกราฟฟกตาง ๆ ใหเลิศหรูที่สุด แตในความเปนจริงแลวหลักการออกแบบโลโกที่ ใชไดดีและไดผลตลอดมานั่นก็คือการออกแบบใหเรียบงายที่สุดโดยความเรียบงายที่วานั้นจะตองมี ความชัดเจนและสวยงามอยางพอดี จึงจะทําใหผูพบเห็นสามารถทําเขาใจไดวานี่คือรูปอะไร มี สวนประกอบของอะไร หรืออานวาอะไรแมวาจะเห็นแคเพียงไมนานก็สามารถจดจําได 3. มีความหมาย หลักการออกแบบโลโกที่ดีนั้นโลโกจะตองสามารถสื่อความหมายได หาก คุณอยากจะใชรูปภาพหรือสัญลักษณหนึ่ง จําเปนที่จะตองสื่อใหเห็นวาโลโกนั้นมีความหมายอยางไร เชนหากตองการออกแบบโลโกรานอาหาร Good Times Burgers คุณควรจะเลือกใชสัญลักษณที่ เกี่ยวกับความดีเยี่ยมและนาฬิกา แนนอนเมื่อผูคนพบเห็นจะทําใหสามารถเขาใจไดในทันที 4. ใชสีสันใหพอดีสีสันเปนสวนสําคัญที่จะทําใหโลโกมีความสวยงามและโดดเดนขึ้นมาได แตการเลือกใชสีสันบนโลโกที่ดีที่สุด คือการเลือกใชใหพอดี เชน ใชเพียงแค 1 – 3 สีเพื่อไมทําใหเกิด ความสับสนกับลูกเลนของสีสันที่มากจนเกินไป หลักการออกแบบแบนเนอร 1. รูปภาพที่ใชในการออกแบบแบนเนอรควรใชขนาดเล็ก หากเราใสรูปภาพและสื่อมาก เทาไหรขนาดของไฟลแบนเนอรที่ออกมานั้นก็จะมีขนาดใหญขึ้นดวย ผลที่ตามมาจะทําใหการโหลด เว็บไซตของเรานั้นมีความลาชาเกิดขึ้นตามมา หากเว็บไซตของเราโหลดชาแลวก็จะมีผลทําใหผูเขามา เยี่ยมชมไมอยากจะรอ 2. ในการออกแบบแบนเนอรโฆษณาแตละครั้งนั้นควรมีการเพิ่มชื่อแบรนดและโลโกของ เรา เขาไปดวยเพราะในแบนเนอรของเราตองมีโลโกรวมถึงชื่อแบรนดดวยเสมอ เพื่อเปนการบอกให ผูอาน ไดรูวากําลังรับชมโฆษณาของแบรนดอะไร 3. ขอความเนื้อหาที่ใสในแบนเนอรนั้นควรกระชับและไดใจความ รูปภาพที่ใชในการ ออกแบบก็ไมจําเปนตองใสคําอธิบายใหเยอะมากมาย ตองใชคําที่สั้น กระชับ อานแลวเขาใจงายและ ตัดสินใจที่จะซื้อไดทันทีเพราะพื้นที่ในปายแบนเนอรมีอยูจํากัด และรูปประกอบตองเหมาะสมกับ 4. ตัวหนังสือควรอานงาย สะดุดตา การจะออกแบบแบนเนอรใหสะดุดตาและดึงดูดสายตา จากคนที่เขามาดูนั้น ขนาดของตัวหนังสือที่เราใหในการออกแบบเบนเนอรโฆษณานั้นมีความสําคัญใน การออกแบบเราตองเลือกตัวหนังสือที่อานงายเปนระบบและเขากับบทความเนื้อหาที่เราไดออกแบบ ไวและมีการจัดวางใหเหมาะสม โดดเดน หลักการการเชื่อมโยงเว็บเพจ
27 การสรางจุดเชื่อมโยง (Hyperlink) เปนการเชื่อมโยงกันจากจุดหนึ่งของเอกสารไปยังอีก ตําแหนงหนึ่งของเอกสารเดียวกันหรือตางเอกสารกันบนอินเทอรเน็ต โดยใชขอความ ภาพ หรือเมนู แบบดร็อปดาวนอยางใดอยางหนึ่งเพื่อเปนตนทางในการเชื่อมโยงไปสูเอกสารปลายทาง ซึ่งอาจเปน จุดใดจุดหนึ่งในเอกสารเดียวกัน (Named Anchor), เว็บเพจอื่น ๆ, เว็บไซต, อีเมล, หรือแมแต ไฟลขอมูลสําหรับดาวนโหลดและการรันไฟลโปรแกรม เปนตน 1. การเชื่อมโยงในเว็บเพจเดียวกัน กรณีที่เว็บเพจมีเนื้อหายาว ๆ แสดงผลไมพอกับจอภาพผูอาน จะตองเลื่อนหนาจอเพื่อดูขอมูลดานลาง ทําใหไมสะดวกเทาที่ควร ผูออกแบบเว็บเพจควรกําหนดการ เชื่อมโยง โดยสรางเปนหัวเรื่องแยกไวตางหากเมื่อผูอานตองการทราบขอมูลเรื่องนั้นสามารถคลิกที่หัว เรื่องและเชื่อมโยงไปยังเนื้อเรื่องนั้นทันที 2. การเชื่อมโยงขอมูลไปยังเว็บเพจอื่นภายในเว็บไซตเดียวกัน การเชื่อมโยงขอมูลไปยังหนาเว็บเพจ อื่นที่อยูเว็บไซตเดียวกัน เพื่อใหสามารถ เลือกดูเนื้อหาตามลิงคของเรื่องที่ตองการเยี่ยมชม 3. การเชื่อมขอมูลไปยังเว็บไซตอื่น การเชื่อมโยงขอมูลไปยังหนาเว็บไซตที่เกี่ยวของหรือนาสนใจโดย วิธีการระบุURLของเว็บไซตนั้น 4. การเชื่อมโยงดวยรูปภาพ การใชรูปภาพเปนจุดเชื่อมโยงเปนการทําใหเว็บเพจนาสนใจและ สามารถใชแทนขอความธรรมดาได 5. การเชื่อมโยงไปยังไฟลตาง ๆ เปนการเชื่อมโยงไปยังไฟลตาง ๆ เชน ไฟลภาพ ไฟลวีดิโอ ไฟล โปรแกรม ซึ่งการ เชื่อมโยงจะเหมือนการลิงคแบบธรรมดา เพียงแตระบุปลายทางไปยังไฟลอื่น ๆ โดย ระบุนามสกุล 6. การเชื่อมโยงไปยังอีเมล ( E-mail ) ใชในกรณีที่ตองการใหคนอื่นติดตอเราโดยใหสรางลิงคชี้ไปยัง อีเมลแอดเดรสของ เรา เมื่อผูใชคลิกที่ลิงคจะสงไปยังอีเมลของเราโดยอัตโนมัติ เทคนิคการตกแตงภาพลงเว็บไซต รูปแบบของไฟลภาพสําหรับเว็บไซตการนํารูปภาพมาใชในหนาเว็บเพจทําใหเกิดความ สวยงามและดึงดูดความสนใจจาก ผูใชงาน ในหนาเว็บเพจอาจมีรูปภาพที่มีลักษณะแตกตางกัน ออกไป เชน ภาพนิ่ง ภาพเคลื่อนไหว ภาพที่ผานการปรับแตงเรียบรอยแลวและภาพโปรงใส ดังนั้น การเลือกใชงานรูปภาพควรเลือกใช อยาง 1. ไฟลสกุล GIF (Graphics Interlace File)
28 - เปนรูปแบบไฟลที่มีขนาดเล็กและมีคุณภาพต่ํา เนื่องจากมีจํานวนสีนอยสามารถ เคลื่อนไหวและทําใหพื้นหลังเปนโปรงใสได เปดไดทุกเว็บบราวเซอร 2. ไฟลสกุล PNG (Portable Network Graphics) - เปนรูปแบบไฟลภาพที่นิยมนํามาใชในการปรับแตงภาพ และนํามาประยุกตใชในการ สราง เว็บไซต เพราะมีขนาดไมใหญเกินไป และสามารถทําใหพื้นหลังของภาพโปรงใสได 3. ไฟลสกุล JPEG (Joint Photographer's Experts Group) - เปนรูปแบบของไฟลภาพที่มีความละเอียดหรือคุณภาพสูง สามารถเรียกดูไดทุกเว็บ เบราวเซอร แตไฟลสกุล JPEG เปนไฟลที่มีขนาดใหญและไมสามารถทําพื้นหลังเปนโปรงใสไดจึง เหมาะสมกับการนําเสนองานดวยภาพ ทฤษฎีโปรแกรม Adobe Photoshop 2022 ความหมายโปรแกรม Adobe Photoshop 2022 คือ โปรแกรมคอมพิวเตอรที่รวบรวม เครื่องมือ สําหรับตกแตง ภาพประสิทธิภาพสูง เพื่อการทํางานระดับมาตรฐาน สําหรับนักออกแบบ มืออาชีพที่ตองการสรางงาน กราฟกที่โดดเดน ทั้งงานที่ใชบนเว็บไซตและงานสิ่งพิมพคําวา CS ยอมา จาก Create Suite ซึ่งทาง Adobe ก็มีการจัดกลุมสินคาแบงออกเปนหลาย ๆ กลุม เพื่อใหเหมาะสม กับการนําไปใชงาน แถมยัง ไดราคาที่ถูกกวาการซื้อแบบเดี่ยว ๆ อีกดวย Photoshop คือ โปรแกรม ในตระกูล Adobe ที่ใชสําหรับตกแตงภาพถายและภาพกราฟฟก ไดอยางมีประสิทธิ์ภาพ ไมวาจะเปน งานดานสิ่งพิมพ นิตยสาร และงานดานมัลติมีเดีย อีกทั้งยัง สามารถretouching ตกแตงภาพและ สรางภาพ ซึ่งกําลังเปนที่นิยมสูงมากในขณะนี้ เราสามารถนํา โปรแกรมPhotoshop ในการแตงภาพ การใส Effect ตาง ๆ ใหกับภาพและตัวหนังสือ การทําภาพ ขาวดําและการทําภาพถายเปนภาพเขียน การนําภาพตาง ๆ มารวมกัน การRetouch ตกแตงภาพ เปนตน นอกจากนี้แลว โปรแกรม Photoshop ยังเปนโปรแกรมสรางและแกไขรูปภาพอยางมืออาชีพ โดยเฉพาะนักออกแบบในทุก วงการยอมรูจักโปรแกรมตัวนี้ดี โปรแกรม Photoshop เปนโปรแกรมที่ มีเครื่องมือมากมายเพื่อ สนับสนุนการสรางงานประเภทสิ่งพิมพ งานวิดีทัศน งานนําเสนอ งาน มัลติมีเดีย ตลอดจนงาน ออกแบบและพัฒนาเว็บไซต ในชุดโปรแกรม Adobe Photoshop จะ ประกอบดวยโปรแกรมสองตัว ไดแก Photoshop และ ImageReady การที่จะใชงานโปรแกรม Photoshop ตองมีเครื่องที่มี ความสามารถสูงพอควร มีความเร็วในการประมวลผล และมี หนวยความจําที่เพียงพอ
29 2.4 ระบบงานที่เกี่ยวของ นางสาวสุพรรณษา ใสใจ, นายปฏิภาณ โฆษิตพิทักพงศ, และนายนันทิพัฒนเย็นดี (2564) การจัดทําสื่อการเรียนการสอนวิชาคอมพิวเตอรและการบํารุงรักษา วัตถุประสงคเพื่อเปนการ เผยแพร ความรูใหกับบุคคลทั่วไป และการบุคคลที่กําลังศึกษาหาความรูใหม ๆ เพื่อนําไปใชใหเกิผลป ระโยฃน นายภานุพงศ เจนสนาม, นางสาวณัฐนิชา แดงมนฑา, และนายพุทธิพงศ ทีประเทศ (2564) ในการจัดทําโครงการเลมนี้จักทําขึ้นเกี่ยวกับเว็บไซตเรียนรูเรื่อง Microsoft PowerPoint 2016 วัตถุประสงคของโครงการจัดทําขึ้นเพื่อเปนแนวทางวิธีการใชงานเกี่ยวกับโปรแกรม Microsoft PowerPoint 2016 แบบเบื้องตน นายโชค รัตนสินทร, นายพรพิพัมน ชื่นวันชัย, และนายธนิศร ตรงคณารักษ (2564) ในการ จัดทําโครงการเลมนี้จัดทําขึ้นเกี่ยวกับเว็บไซตสื่อการเรียนการสอนวิชาคอมพิวเตอรและการ บํารุงรักษา วัตถุประสงคของโครงการจัดทําขึ้นเพื่อเปนสื่อการสอนมีเนื้อหาเกี่ยวกับคอมพิวเตอรและ การบํารุงดูแลสามารถนําเปนสื่อการเรียนรูใหกับนักศึกษาและนักเรียนและผูอื่นไดดวย
บทที่ 3 การออกแบบดวยระบบคอมพิวเตอร 3.1 การออกแบบโครงสรางเว็บไซต(SITE MAP) รูปที่ 3.1 การออกแบบผังโครงสรางเว็บไซต
3.2 การออกแบบภาพแนวความคิด (Story Board Design) รูปที่ 3.3 หนวยการเรียนผูตาง ๆ รูปที่ 3.2 หนาแรก
รูปที่ 3.4 หัวขอยอยหนวย รูปที่ 3.5 หัวขอยอยหนวยที่ 1
รูปที่ 3.6 หัวขอยอยหนวยที่ 2 รูปที่ 3.7 หัวขอยอยหนวยที่ 3
รูปที่ 3.8 หัวขอยอยหนวยที่ 4 รูปที่ 3.9 หัวขอยอยหนวยที่ 5
รูปที่ 3.10 แบบทอดสอบหนวยตางๆ รูปที่ 3.11 ผูจัดทํา
3.3 การออกแบบสิ่งนําเขา (input Design) 1. หนา Home 2. หนาเนื้อหาสื่อการสอน หนวยที่1-5 3. แบบทดสอที่ 1-5 4. หนาผูจัดทํา 3.4 การออกแบบสิ่งนําออก (Output Design) 1. มีการแสดงภาพออกทางจอภาพ 2. มีการออกทางเครื่องพิมพ 3. มีการฉายโปรเจคเตอร
40 บทที่ 4 การพัฒนาสื่อการเรียนการสอนคอมพิวเตอรบํารุงรักษา 4.1 เครื่องมือและอุปกรณที่ใช 1. Asus TUF Gaming FX505Dy-AL041T 2. CPU AMD Ryzen 5 3500H 3. GPU Radeon rx560X 4. RAM 8GB DDR4 2666 MHz 5. DISPLAY 15.6 inch (1920X1080) FULL HD 6. STORAGE 512 GB SDD PCLE M.2 7. OS Windows 10 4.2 โปรแกรมทั้งหมดที่ใชในการพัฒนา 1. โปรแกรม Google ใชสําหรับ หารูปภาพ และเนื้อหาขอมูล 2. โปรแกรม Thunkable เครื่องมือสรางหนาเว็บและ ออกแบบหนาเว็บ 3. โปรแกรม Canvas ออกแบบรูป ใชสําหรับทําแบบทดสอบทายหนวย.
40 4.3 การติดตั้งโปรแกรม รูปที่ 4.1 เขาไปที่ Google ทําการคนหา 2. ใสลิ้งคแอพพลิเคชั่นลงไปในชองคนหา https://x.thunkable.com/copy/53ec3b26e79483162511a2cfc72290b0
41 รูปที่ 4.2 เขาไปในแอพ Thunkable รูปที่ 4.3 เริ่มตนเรียนคอมพิวเตอรการบํารุงรักษา
42 รูปที่ 4.4 คําอธิบายรายวิชา รูปที่ 4.4 สารบัญ