แผนประจำหน่วยการเรียนรู้ที่ 5
เรื่อง การจัดการกราฟิกด้วยภาษา HTML เวลาเรียนจำนวน 4 ชั่วโมง
หัวเรื่อง/สาระ
4. การสร้างภาพเคลื่อนไหว Gif Animation ในภาษา HTML
แนวคิด หรือสาระสำคัญ
1. ภาพประเภทบิทแมทมีด้วยกัน 2 ชนิด คือ ภาพชนิด GIF มีข้อจำกัด คือ สีสูงสุด 256 สีน้อยมากสำหรับการสร้างเว็บไซต์จึงไม่นิยมในการนำมาสร้างเว็บเพราะภาพกราฟิกชนิด GIF ใช้การบีบอัดข้อมูลเพื่อลดพื้นที่การจัดเก็บข้อมูลการบีบอัดข้อมูลแต่จะเหมาะกับภาพการ์ตูน หรือโลโก้ ภาพชนิด JPEG เป็นภาพถ่ายหรือภาพวาดมีจำนวนสีมากสามารถแสดงสีได้สูงสุด 16.7 ล้านสี ภาพชนิด JPEG ไฟล์นามสกุลจะเป็น .jpg, ภาพชนิด PNG ไฟล์นามสกุลจะเป็น .png, ภาพชนิด GIF ไฟล์นามสกุลจะเป็น .gif และภาพประเภทเวคเตอร์เป็นทีเ่กิดจากเส้นส่วนโค้งและรูปทรงเรขาคณิตเก็บในรูปของคำสั่งโปรแกรมและค่าตัวเลขนำคำสั่งและค่ามาคำนวณเพื่อสร้างเป็นภาพจริงภาพประเภทเวคเตอร์ (Vactor) SWF, AI, PDF, WMF
2. การแทรกรูปภาพในภาษา HTML กำหนดด้วยแท็ก <img src="/ชื่อไฟล์รูปภาพ"> การใส่ข้อความกำกับภาพ (alternative text) เป็นการอธิบายไม่พบไฟล์ภาพหรือเกิดความผิดพลาดของบราวเซอร์ไม่สามารถแสดงผลรูปภาพ สามารถใช้แอตทริบิวต์ width และ height การจัดวางรูปในตำแหน่งต่างๆ ใช้แอตทริบิวต์ align คือ top, middle, bottom, left, right การเว้นระยะห่างให้กับรูปภาพการจัดเรียงไม่ชิดติดกันใช้แอตทริบิวต์ในการกำหนด คือ vspace การกำหนดระยะห่างแนวตั้ง (vertical space) ด้านบนและล่าง hspace การกำหนดระยะห่างแนวนอน (horizontal space) ด้านซ้ายและขวา การกำหนดข้อความให้พ้นระยะขอบเขตของรูปภาพใช้แอตทริบิวต์ clear การกำหนดพื้นหลังให้เป็นรูปภาพใช้แอตทริบิวต์ background และการกำหนดภาพพื้นหลังให้คงที่ใช้แอตทริบิวต์ bgproperties
3. คุณสมบัติของภาพชนิด JPG สามารถใช้เทคนิคการแบ่งรูปภาพทำได้ด้วยโปรแกรม Photoshop ตัดภาพเป็นส่วนๆ ช่วยลดการประมวลผลการโหลดรูปภาพโดยภาพมีขนาดเล็ก มีลักษณะคล้ายจิ๊กซอว์ คุณสมบัติของภาพชนิด GIF แสดงผลภาพเป็นแบบโปร่งแสง (Transparency) และการแสดงภาพหยาบสู่ละเอียด (Interlaced) ช่วยในเรื่องการแสดงผลที่รวดเร็วจากจำนวนสีที่มีเพียง 256 สี สร้างภาพโดยใช้ Photoshop
4. การสร้างภาพเคลื่อนไหวง่ายๆ ด้วยโปรแกรม Photoshop และแสดงภาพเคลื่อนไหวเหมือนกับการแสดงภาพใช้แท็ก <img> สามารถกำหนดการจัดวางรูปในตำแหน่งต่างๆ ใช้แอตทริบิวต์ align โดยค่าที่ใช้กำหนด คือ center, left, right
จุดประสงค์การเรียนรู้
หลังจากศึกษาเนื้อหาในหน่วยการเรียนรู้นี้แล้วนักเรียนมีความสามารถ ดังนี้
4. อธิบายและสร้างภาพเคลื่อนไหว Gif Animation ในภาษา HTMLได้
หัวเรื่องที่ 5.1
ประเภทของภาพกราฟิกในภาษา HTML เวลาเรียน 1 ชั่วโมง
ภาพกราฟิกแบ่งออกเป็น 2 ประเภทหลัก คือ ภาพประเภทบิทแมพ (Bitmap) จะมีภาพชนิด GIF และ JPG ซึ่งใช้การบีบอัดข้อมูลเพื่อลดพื้นที่ในการจัดเก็บข้อมูลขนาดของไฟล์สึงมีขนาดเล็กกว่าและภาพประเภทเวคเตอร์ (Vactor) จะเป็นภาพ SWF, AI, PDF, WMF
รายละเอียดของเนื้อหามีดังนี้
1. รูปภาพประเภทบิทแมพ (Bitmap)
1.1 ภาพชนิด GIF
1.2 ภาพชนิด JPG
2. รูปภาพประเภทเวคเตอร์ (Vactor)
|
ภาพประเภทบิทแมทมีด้วยกัน 2 ชนิด คือ ภาพชนิด GIF มีข้อจำกัด คือ สีสูงสุด 256 สีน้อยมากสำหรับการสร้างเว็บไซต์จึงไม่นิยมในการนำมาสร้างเว็บเพราะภาพกราฟิกชนิด GIF ใช้การบีบอัดข้อมูลเพื่อลดพื้นที่การจัดเก็บข้อมูลการบีบอัดข้อมูลแต่จะเหมาะกับภาพการ์ตูน หรือโลโก้ ภาพชนิด JPEG เป็นภาพถ่ายหรือภาพวาดมีจำนวนสีมากสามารถแสดงสีได้สูงสุด 16.7 ล้านสี ภาพชนิด JPEG ไฟล์นามสกุลจะเป็น .jpg, ภาพชนิด PNG ไฟล์นามสกุลจะเป็น .png, ภาพชนิด GIF ไฟล์นามสกุลจะเป็น .gif และภาพประเภทเวคเตอร์เป็นทีเ่กิดจากเส้นส่วนโค้งและรูปทรงเรขาคณิตเก็บในรูปของคำสั่งโปรแกรมและค่าตัวเลขนำคำสั่งและค่ามาคำนวณเพื่อสร้างเป็นภาพจริงภาพประเภทเวคเตอร์ (Vactor) SWF, AI, PDF, WMF |
กิจกรรม/ใบงานที่ 5.1 ประเภทของภาพกราฟิกในภาษา HTML (คะแนนเต็ม 10 คะแนน) ใช้เวลาทำ 20 นาที
1. ให้นักเรียนตอบคำถามดังต่อไปนี้
1.1 อธิบายรูปภาพประเภทบิทแมท
.............................................................................................................................................................
.............................................................................................................................................................
.............................................................................................................................................................
.............................................................................................................................................................
.............................................................................................................................................................
1.2 อธิบายรูปภาพประเภทเวคเตอร์
.............................................................................................................................................................
.............................................................................................................................................................
.............................................................................................................................................................
.............................................................................................................................................................
.............................................................................................................................................................
2. เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้วส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน
แนวตอบ หรือแนวปฏิบัติ
เกณฑ์ |
รายละเอียดเกณฑ์การให้คะแนน |
|||||
5 (ดีมาก) |
4 (ดี) |
3 (ปานกลาง) |
2 (พอใช้) |
1 (ปรับปรุง) |
0 (ไม่ผ่าน) |
|
อธิบายรูปภาพประเภทบิทแมท |
เขียนได้ถูกต้องครบทุกประเด็นตามลำดับ |
เขียนได้ถูกต้องครบ 4 ประเด็น
|
เขียนได้ถูกต้องอย่างน้อย 3ประเด็น
|
เขียนได้ถูกต้องอย่างน้อย 2 ประเด็น |
เขียนได้ถูกต้องอย่างน้อย 1 ประเด็น |
เขียนไม่ตรงประเด็น |
อธิบายรูปภาพประเภทเวคเตอร์ |
เขียนได้ถูกต้องครบทุกประเด็นตามลำดับ |
เขียนได้ตรงถูกต้องครบ 4 ประเด็น |
เขียนได้ถูกต้องอย่างน้อย 3ประเด็น |
เขียนได้ถูกต้องอย่างน้อย 2 ประเด็น |
เขียนได้ถูกต้องอย่างน้อย 1 ประเด็น |
เขียนไม่ตรงประเด็น |
หัวเรื่องที่ 5.2
การจัดการรูปภาพในภาษา HTML เวลาเรียน 1 ชั่วโมง
การจัดการรูปภาพในภาษา HTML มีการแทรกภาพรูปภาพ การกำหนดขนาดกรอบรูปภาพ วิธีการกำหนดตำแหน่งข้อความกับรูปภาพ การกำหนดภาพบนพื้นหลังหน้าเว็บเพจ
รายละเอียดของเนื้อหามีดังนี้
1. การแทรกรูปภาพ
2. กำหนดข้อความกำกับภาพ
3. การกำหนดขนาดของรูปภาพ
4. การกำหนดกรอบรูปภาพ
5. การกำหนดตำแหน่งข้อความกับรูปภาพ
5.1 การกำหนดระยะห่างของรูปภาพ
5.2 การกำหนดระยะข้อความให้พ้นขอบเขตรูปภาพ
6. การกำหนดพื้นหลังบนเว็บ
|
การแทรกรูปภาพในภาษา HTML กำหนดด้วยแท็ก <img src="/ชื่อไฟล์รูปภาพ"> การใส่ข้อความกำกับภาพ (alternative text) เป็นการอธิบายไม่พบไฟล์ภาพหรือเกิดความผิดพลาดของบราวเซอร์ไม่สามารถแสดงผลรูปภาพ สามารถใช้แอตทริบิวต์ width และ height การจัดวางรูปในตำแหน่งต่างๆ ใช้แอตทริบิวต์ align คือ top, middle, bottom, left, right การเว้นระยะห่างให้กับรูปภาพการจัดเรียงไม่ชิดติดกันใช้แอตทริบิวต์ในการกำหนด คือ vspace การกำหนดระยะห่างแนวตั้ง (vertical space) ด้านบนและล่าง hspace การกำหนดระยะห่างแนวนอน (horizontal space) ด้านซ้ายและขวา การกำหนดข้อความให้พ้นระยะขอบเขตของรูปภาพใช้แอตทริบิวต์ clear การกำหนดพื้นหลังให้เป็นรูปภาพใช้แอตทริบิวต์ background และการกำหนดภาพพื้นหลังให้คงที่ใช้แอตทริบิวต์ bgproperties |
กิจกรรม/ใบงานที่ 5.2 การจัดการรูปภาพในภาษา HTML (คะแนนเต็ม 10 คะแนน) ใช้เวลาทำ 20 นาที
คำชี้แจง
1. ให้นักเรียนจับคู่ข้อความที่มีความสัมพันธ์กันให้ถูกต้อง โดยข้อความด้าน ก. เป็นรูปแบบแท็กสำหรับจัดการภาพกราฟิก ข้อความด้าน ข. เป็นความหมายและวิธีการกำหนดแท็กเพื่อจัดการภาพกราฟิก โดยให้เลือกข้อความด้าน ข. มาวางไว้ช่องว่างด้าน ก.
ด้าน ก. |
ด้าน ข. |
................... 1. alt= “ภาพวิว” ................... 2. width= “200” height= “300” ................... 3. border= “5” ................... 4. align= “….” ................... 5. bottom ................... 6. <img src= “ชื่อไฟล์”> ................... 7. clear= “ตำแหน่ง” ................... 8. vspace ................... 9. background= “ชื่อไฟล์” ................... 10. bgproperties= “fixed” |
A. กำหนดภาพพื้นหลัง B. กำหนดระยะห่างแนวตั้ง C. กำหนดขึ้นบรรทัดใหม่ด้านซ้าย ขวา D. กำหนดขอบล่างเสมอขอบล่างข้อความ E. กำหนดภาพพื้นหลังให้คงที่ F. กำหนดข้อความกำกับภาพ G. กำหนดตำแหน่งรูปภาพและข้อความ I. กำหนดรูปภาพ JPG และ GIF J. กำหนดขนาดกรอบรูปภาพ K. กำหนดขนาดของรูปภาพ L. กำหนดสีกรอบรูปภาพ |
2. เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้วส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน
แนวตอบ หรือแนวปฏิบัติ
คะแนน/คุณภาพ |
เกณฑ์การประเมินผล |
5 : ดีมาก |
ทำกิจกรรมถูกต้อง 9-10 ข้อ |
4 : ดี |
ทำกิจกรรมถูกต้อง 7-8 ข้อ |
3 : ปานกลาง |
ทำกิจกรรมถูกต้อง 5-6 ข้อ |
2 : พอใช้ |
ทำกิจกรรมถูกต้อง 3-4 ข้อ |
1 : ปรับปรุง |
ทำกิจกรรมถูกต้อง 1-2 ข้อ |
0 : ไม่ผ่าน |
ทำกิจกรรมถูกต้อง 0 ข้อ |
หัวเรื่องที่ 5.3
คุณสมบัติของภาพชนิด JPG และ GIF ในภาษา HTML เวลาเรียน 1 ชั่วโมง
ในภาษา HTML สามารถนำภาพ ชนิด JPG และ GIF ซึ่งเป็นภาพนิ่งมาประกอบการนำเสนอเนื้อหา การทำความเข้าใจเกี่ยวกับคุณสมบัติของภาพชนิด JPG และ GIF การทำให้การแสดงผลรูปภาพมีการแสดงผลที่เร็วขึ้นนั้นด้วยการใช้เทคนิคการแบ่งรูปภาพ (Slicing) แสดงผลภาพเป็นแบบโปร่งแสง (Transparency) และการแสดงภาพหยาบสู่ละเอียด (Interlaced)
รายละเอียดของเนื้อหามีดังนี้
1. คุณสมบัติของภาพชนิด JPG ในภาษา HTML
1.1 การใช้เทคนิคการแบ่งรูปภาพ (Slicing)
1.2 วิธีการสร้างภาพชนิด JPG ด้วยเทคนิคการแบ่งรูปภาพ
2. คุณสมบัติของภาพชนิด GIF ในภาษา HTML
2.1 การใช้คุณสมบัติการแสดงภาพหยาบสู่ละเอียด (Interlacing)
วิธีสร้างภาพชนิด GIF แบบ Interlaced
2.2 การกำหนดภาพให้เป็นแบบโปร่งแสง (Transparency)
วิธีสร้างภาพชนิด GIF แบบ Transparency
|
คุณสมบัติของภาพชนิด JPG สามารถใช้เทคนิคการแบ่งรูปภาพทำได้ด้วยโปรแกรม Photoshop ตัดภาพเป็นส่วนๆ ช่วยลดการประมวลผลการโหลดรูปภาพโดยภาพมีขนาดเล็ก มีลักษณะคล้ายจิ๊กซอว์ คุณสมบัติของภาพชนิด GIF แสดงผลภาพเป็นแบบโปร่งแสง (Transparency) และการแสดงภาพหยาบสู่ละเอียด (Interlaced) ช่วยในเรื่องการแสดงผลที่รวดเร็วจากจำนวนสีที่มีเพียง 256 สี สร้างภาพโดยใช้ Photoshop |
กิจกรรม/ใบงานที่ 5.3 คุณสมบัติของภาพชนิด JPG และ GIF ในภาษา HTML (คะแนนเต็ม 10 คะแนน) ใช้เวลาทำ 20 นาที
คำชี้แจง
1. จงใส่เครื่องหมายถูก (/) หน้าข้อความที่เห็นว่าถูก และใส่เครื่องหมายกากบาท (x) หน้าข้อความที่เห็นว่าผิด
................. 1.1 JPG เป็นกราฟิกที่มีลักษณะเป็นภาพ Vactor
................. 1.2 เทคนิค Slicing เหมาะสำหรับใช้งานกับภาพชนิด JPG
................. 1.3 ข้อจำกัดของ GIF ที่สำคัญคือ สามารถใช้สีได้สูงสุดเพียงครั้งละ 512 สีเท่านั้น
................. 1.4 GIF และ JPG เป็นกราฟิกที่เหมาะสมในการสร้างเว็บเพจ
................. 1.5 การโหลดภาพประเภท Slicing คือภาพจะถูกโหลดเข้ามาแปะบนเว็บเพจทีละชิ้นจนครบทั้งรูปภาพคล้ายจิ๊กซอว์
................. 1.6 การใช้ Interlacing จะช่วยให้ภาพถูกโหลดโดยบราวเซอร์ขึ้นมาอย่างรวดเร็วแบบไม่ชัดก่อน และค่อย ๆ ชัดขึ้น
................. 1.7 การทำ Transparency คือการกำหนดสีใดสีหนึ่งในรูปชนิด JPG ให้เป็นสีที่ไม่ถูกนำมาแสดงบนบราวเซอร์
................. 1.8 GIF สามารถนำภาพหลาย ๆ ภาพมาเรียงกันเป็นภาพเคลื่อนไหวด้วย Photoshop
................. 1.9 การแสดงภาพเคลื่อนไหวสามารถทำโดยการใช้แท็ก <img src= “ชื่อไฟล์”>
................. 1.10 ใช้แอตทริบิวต์ align ในการกำหนดตำแหน่งภาพเคลื่อนไหว
2. เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้วส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน
แนวตอบ หรือแนวปฏิบัติ
คะแนน/คุณภาพ |
เกณฑ์การประเมินผล |
5 : ดีมาก |
ทำกิจกรรมถูกต้อง 9-10 ข้อ |
4 : ดี |
ทำกิจกรรมถูกต้อง 7-8 ข้อ |
3 : ปานกลาง |
ทำกิจกรรมถูกต้อง 5-6 ข้อ |
2 : พอใช้ |
ทำกิจกรรมถูกต้อง 3-4 ข้อ |
1 : ปรับปรุง |
ทำกิจกรรมถูกต้อง 1-2 ข้อ |
0 : ไม่ผ่าน |
ทำกิจกรรมถูกต้อง 0 ข้อ |
หัวเรื่องที่ 5.4
การสร้างภาพเคลื่อนไหว Gif Animation ในภาษา HTML เวลาเรียน 1 ชั่วโมง
การสร้างภาพเคลื่อนไหวสามารถทำให้เว็บเพจน่าใจมากยิ่งขึ้น ทั้งยังช่วยในเรื่องการตกแต่งเว็บเพจให้สวยงามได้อีกด้วย ทำให้ผู้เข้าชมเว็บไซต์ไม่เกิดความเบื่อหน่ายในการรับข้อมูลข่าวสารบนหน้าเว็บเพจได้ ซึ่งลักษณะของไฟล์ภาพชนิด GIF สามารถนำภาพหลาย ๆ ภาพมารวมกันเป็นไฟล์เดียวและทำให้เคลื่อนไหวด้วยการนำภาพต่างๆมาเรียงกันและใส่ลักษณะพิเศษช่วยในการเปลี่ยนรูปภาพ หรืออาจจะนำภาพที่มีการแสดงกริยาท่าทางอาการต่าง ๆ มาเรียงต่อกันตามลำดับเมื่อรวมภาพต่าง ๆ แล้วจะมองเห็นภาพนั้นเป็นการแสดงกริยาอาการคล้ายเคลื่อนไหวได้จริง ซึ่งเรียกว่า ภาพชนิด Gif Animation และการแสดงภาพเคลื่อนไหวในหน้าเว็บเพจเหมือนกับการแสดงภาพทั่วไปใช้แท็ก <img>
รายละเอียดของเนื้อหามีดังนี้
1. การสร้างภาพเคลื่อนไหวในภาษา HTML
2. การแสดงภาพเคลื่อนไหวในภาษา HTML
|
การสร้างภาพเคลื่อนไหวง่ายๆ ด้วยโปรแกรม Photoshop และแสดงภาพเคลื่อนไหวเหมือนกับการแสดงภาพใช้แท็ก <img> สามารถกำหนดการจัดวางรูปในตำแหน่งต่างๆ ใช้แอตทริบิวต์ align โดยค่าที่ใช้กำหนด คือ center, left, right |
กิจกรรม/ใบงานที่ 5.4 การสร้างภาพเคลื่อนไหว Gif Animation ในภาษา HTML (คะแนนเต็ม 15 คะแนน) ใช้เวลาทำ 20 นาที
คำชี้แจง
1. ให้นักเรียนเปิดไฟล์ work202.html ขึ้นมาสร้างภาพเคลื่อนไหวโดยกำหนดขนาดรูปภาพให้มีขนาดความกว้างเท่ากับ 200 pixel ขนาดความสูงเท่ากับ 150 pixel ได้จากภาพถ่ายพรรณไม้ที่ได้รับมอบหมาย ดำเนินการสร้างภาพเคลื่อนไหว โดยนำภาพมาเรียงต่อกันด้วยโปรแกรม Photoshop บันทึกไฟล์ภาพเคลื่อนไหวชื่อ animation.gif และแสดงภาพเคลื่อนไหวที่กำหนดให้อยู่กึ่งกลางจอภาพ
2. เมื่อนักเรียนปฏิบัติขั้นตอนดังกล่าวเรียบร้อยแล้วให้บันทึกชิ้นงานไว้ในไดร์ฟ D: โฟลเดอร์ห้องเรียนพร้อมบันทึกชื่อไฟล์ชื่อ เลขที่_work504.html เสร็จแล้วส่งให้ครูประเมินเป็นรายบุคคล
แนวตอบ หรือแนวปฏิบัติ
เกณฑ์การประเมิน |
รายละเอียดเกณฑ์การให้คะแนน |
|||
3 (ดี) |
2 (พอใช้) |
1 (ปรับปรุง) |
0 (ไม่ผ่าน) |
|
ปฏิบัติตามขั้นตอนถูกต้อง |
ปฏิบัติได้ครบทุกขั้นตอนการสร้างภาพเคลื่อนไหวและการแสดงภาพเคลื่อนไหว |
ปฏิบัติได้ตามขั้นตอนการสร้างภาพเคลื่อนไหวและการแสดงภาพเคลื่อนไหว |
ปฏิบัติได้ไม่ครบขั้นตอนการสร้างภาพเคลื่อนไหวและการแสดงภาพเคลื่อนไหว |
ปฏิบัติไม่ได้ตามขั้นตอน |
ชิ้นงานถูกต้องสมบูรณ์ตามหลักการ |
ชิ้นงานจัดทำเสร็จถูกต้องสมบูรณ์ตาม หลักการเขียนภาษา HTML ทั้งหมด |
ชิ้นงานจัดทำเสร็จถูกต้องตามหลักการเขียนภาษา HTML บางส่วน |
ชิ้นงานจัดทำเสร็จแต่ไม่ถูกต้องตามหลักการเขียนภาษา HTML |
ไม่สร้างชิ้นงาน |
บันทึกชิ้นงาน |
บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง รวดเร็วตามคำสั่ง |
บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง ตามคำสั่ง |
บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานไม่ถูกต้อง |
ไม่สามารถบันทึกชิ้นงานได้ |
เสร็จงาน |
งานที่ปฏิบัติเสร็จทันเวลา |
งานที่ปฏิบัติเสร็จทันเวลาบางส่วน |
งานที่ปฏิบัติเสร็จไม่ทันเวลา |
ไม่มีงาน |
มีความคิดริเริ่มสร้างสรรค์สวยงาม |
ชิ้นงานแปลกใหม่สร้างสรรค์สวยงาม |
ชิ้นงานแปลกใหม่สวยงาม |
ชิ้นงานสวยงาม |
ไม่มีงาน |
การออกแบบทดสอบ
ผลการเรียนรู้
มีความรู้ความเข้าใจและสามารถจัดการกราฟิกด้วยภาษา HTML ได้
จุดประสงค์การเรียนรู้
ด้านความรู้
4. อธิบายและสร้างภาพเคลื่อนไหว Gif Animation ในภาษา HTMLได้
ด้านทักษะ/กระบวนการ
ด้านคุณลักษณะ
1. มีวินัย
2. ใฝ่เรียนรู้
3. มุ่งมั่นในการทำงาน
แบบทดสอบ
1. แบบทดสอบก่อนเรียน มีทั้งหมด 2 ตอน จำนวน 12 ข้อ (16 คะแนน)
ตอนที่ 1 เป็นแบบทดสอบภาคทฤษฎีวัดพฤติกรรมด้านพุทธิพิสัย จำนวน 10 ข้อ (10 คะแนน) ใช้เวลา 10 นาที
ตอนที่ 2 เป็นแบบทดสอบภาคปฏิบัติวัดพฤติกรรมทักษะพิสัย จำนวน 2 ข้อ (ข้อละ 3 คะแนน) ใช้เวลา 10 นาที
2. แบบทดสอบหลังเรียน มีทั้งหมด 2 ตอน จำนวน 12 ข้อ (16 คะแนน)
ตอนที่ 1 เป็นแบบทดสอบภาคทฤษฎีวัดพฤติกรรมด้านพุทธิพิสัย จำนวน 10 ข้อ (10 คะแนน) ใช้เวลา 10 นาที
ตอนที่ 2 เป็นแบบทดสอบภาคปฏิบัติวัดพฤติกรรมทักษะพิสัย จำนวน 2 ข้อ (ข้อละ 3 คะแนน) ใช้เวลา 10 นาที