: เขียนโดย KrooBeer; หมวด: หน่วยที่ 5

ให้เรตสมาชิก: 0 / 5

แผนประจำหน่วยการเรียนรู้ที่ 5

เรื่อง การจัดการกราฟิกด้วยภาษา HTML เวลาเรียนจำนวน 4 ชั่วโมง

หัวเรื่อง/สาระ

1. ประเภทของภาพกราฟิกในภาษา HTML

2. การจัดการรูปภาพในภาษา HTML

3. คุณสมบัติของภาพชนิด JPG และ GIF ในภาษา HTML

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

จุดประสงค์การเรียนรู้

หลังจากศึกษาเนื้อหาในหน่วยการเรียนรู้นี้แล้วนักเรียนมีความสามารถ ดังนี้

1. อธิบายประเภทของภาพกราฟิกในภาษา HTMLได้

2. อธิบายและจัดการรูปภาพในภาษา HTMLได้

3. อธิบายคุณสมบัติของภาพชนิด JPG และ GIF ในภาษา HTMLได้

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. กำหนดสีกรอบรูปภาพ

แนวตอบ หรือแนวปฏิบัติ

คะแนน/คุณภาพ	เกณฑ์การประเมินผล
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 ในการกำหนดตำแหน่งภาพเคลื่อนไหว

แนวตอบ หรือแนวปฏิบัติ

คะแนน/คุณภาพ	เกณฑ์การประเมินผล
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 เสร็จแล้วส่งให้ครูประเมินเป็นรายบุคคล

แนวตอบ หรือแนวปฏิบัติ

work5044

เกณฑ์การประเมิน	รายละเอียดเกณฑ์การให้คะแนน
เกณฑ์การประเมิน	3 (ดี)	2 (พอใช้)	1 (ปรับปรุง)	0 (ไม่ผ่าน)
ปฏิบัติตามขั้นตอนถูกต้อง	ปฏิบัติได้ครบทุกขั้นตอนการสร้างภาพเคลื่อนไหวและการแสดงภาพเคลื่อนไหว	ปฏิบัติได้ตามขั้นตอนการสร้างภาพเคลื่อนไหวและการแสดงภาพเคลื่อนไหว	ปฏิบัติได้ไม่ครบขั้นตอนการสร้างภาพเคลื่อนไหวและการแสดงภาพเคลื่อนไหว	ปฏิบัติไม่ได้ตามขั้นตอน
ชิ้นงานถูกต้องสมบูรณ์ตามหลักการ	ชิ้นงานจัดทำเสร็จถูกต้องสมบูรณ์ตาม หลักการเขียนภาษา HTML ทั้งหมด	ชิ้นงานจัดทำเสร็จถูกต้องตามหลักการเขียนภาษา HTML บางส่วน	ชิ้นงานจัดทำเสร็จแต่ไม่ถูกต้องตามหลักการเขียนภาษา HTML	ไม่สร้างชิ้นงาน
บันทึกชิ้นงาน	บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง รวดเร็วตามคำสั่ง	บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง ตามคำสั่ง	บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานไม่ถูกต้อง	ไม่สามารถบันทึกชิ้นงานได้
เสร็จงาน ตรงเวลาที่กำหนด	งานที่ปฏิบัติเสร็จทันเวลา	งานที่ปฏิบัติเสร็จทันเวลาบางส่วน	งานที่ปฏิบัติเสร็จไม่ทันเวลา	ไม่มีงาน
มีความคิดริเริ่มสร้างสรรค์สวยงาม	ชิ้นงานแปลกใหม่สร้างสรรค์สวยงาม	ชิ้นงานแปลกใหม่สวยงาม	ชิ้นงานสวยงาม	ไม่มีงาน

การออกแบบทดสอบ

ผลการเรียนรู้

มีความรู้ความเข้าใจและสามารถจัดการกราฟิกด้วยภาษา HTML ได้

จุดประสงค์การเรียนรู้

ด้านความรู้

1. อธิบายประเภทของภาพกราฟิกในภาษา HTMLได้

2. อธิบายและจัดการรูปภาพในภาษา HTMLได้

3. อธิบายคุณสมบัติของภาพชนิด JPG และ GIF ในภาษา HTMLได้

4. อธิบายและสร้างภาพเคลื่อนไหว Gif Animation ในภาษา HTMLได้

ด้านทักษะ/กระบวนการ

1. จัดการรูปภาพในภาษา HTMLได้

2. สร้างภาพเคลื่อนไหว Gif Animation ในภาษา HTMLได้

ด้านคุณลักษณะ

1. มีวินัย

2. ใฝ่เรียนรู้

3. มุ่งมั่นในการทำงาน

แบบทดสอบ

1. แบบทดสอบก่อนเรียน มีทั้งหมด 2 ตอน จำนวน 12 ข้อ (16 คะแนน)

ตอนที่ 1 เป็นแบบทดสอบภาคทฤษฎีวัดพฤติกรรมด้านพุทธิพิสัย จำนวน 10 ข้อ (10 คะแนน) ใช้เวลา 10 นาที

ตอนที่ 2 เป็นแบบทดสอบภาคปฏิบัติวัดพฤติกรรมทักษะพิสัย จำนวน 2 ข้อ (ข้อละ 3 คะแนน) ใช้เวลา 10 นาที

2. แบบทดสอบหลังเรียน มีทั้งหมด 2 ตอน จำนวน 12 ข้อ (16 คะแนน)

เมนูหลัก

เข้าสู่ระบบ

สถิติผู้เยี่ยมชม

หน่วยที่ 5 : แผนการเรียนประจำหน่วย

แผนประจำหน่วยการเรียนรู้ที่ 5

เรื่อง การจัดการกราฟิกด้วยภาษา HTML เวลาเรียนจำนวน 4 ชั่วโมง

หัวเรื่อง/สาระ

แนวคิด หรือสาระสำคัญ

จุดประสงค์การเรียนรู้

หัวเรื่องที่ 5.1

ประเภทของภาพกราฟิกในภาษา HTML เวลาเรียน 1 ชั่วโมง

สรุปเนื้อหา

กิจกรรม/ใบงานที่ 5.1 ประเภทของภาพกราฟิกในภาษา HTML (คะแนนเต็ม 10 คะแนน) ใช้เวลาทำ 20 นาที

แนวตอบ หรือแนวปฏิบัติ

หัวเรื่องที่ 5.2

การจัดการรูปภาพในภาษา HTML เวลาเรียน 1 ชั่วโมง

สรุปเนื้อหา

กิจกรรม/ใบงานที่ 5.2 การจัดการรูปภาพในภาษา HTML (คะแนนเต็ม 10 คะแนน) ใช้เวลาทำ 20 นาที

แนวตอบ หรือแนวปฏิบัติ

หัวเรื่องที่ 5.3

คุณสมบัติของภาพชนิด JPG และ GIF ในภาษา HTML เวลาเรียน 1 ชั่วโมง

สรุปเนื้อหา

กิจกรรม/ใบงานที่ 5.3 คุณสมบัติของภาพชนิด JPG และ GIF ในภาษา HTML (คะแนนเต็ม 10 คะแนน) ใช้เวลาทำ 20 นาที

แนวตอบ หรือแนวปฏิบัติ

หัวเรื่องที่ 5.4

การสร้างภาพเคลื่อนไหว Gif Animation ในภาษา HTML เวลาเรียน 1 ชั่วโมง

สรุปเนื้อหา

กิจกรรม/ใบงานที่ 5.4 การสร้างภาพเคลื่อนไหว Gif Animation ในภาษา HTML (คะแนนเต็ม 15 คะแนน) ใช้เวลาทำ 20 นาที

แนวตอบ หรือแนวปฏิบัติ

การออกแบบทดสอบ