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

 

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


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

1. ประเภทของภาพกราฟิกในภาษา HTML
2. การจัดการรูปภาพในภาษา HTML
3. คุณสมบัติของภาพชนิด JPG และ GIF ในภาษา HTML

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

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

             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

 

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

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

1. อธิบายประเภทของภาพกราฟิกในภาษา HTMLได้
2. อธิบายและจัดการรูปภาพในภาษา HTMLได้
3. อธิบายคุณสมบัติของภาพชนิด JPG และ GIF ในภาษา HTMLได้

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

 
 

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

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


             ภาพกราฟิกแบ่งออกเป็น  2  ประเภทหลัก  คือ  ภาพประเภทบิทแมพ  (Bitmap)  จะมีภาพชนิด GIF และ JPG ซึ่งใช้การบีบอัดข้อมูลเพื่อลดพื้นที่ในการจัดเก็บข้อมูลขนาดของไฟล์สึงมีขนาดเล็กกว่าและภาพประเภทเวคเตอร์  (Vactor)  จะเป็นภาพ SWF, AI, PDF, WMF

รายละเอียดของเนื้อหามีดังนี้

1. รูปภาพประเภทบิทแมพ (Bitmap)

1.1 ภาพชนิด GIF

1.2 ภาพชนิด JPG

2. รูปภาพประเภทเวคเตอร์ (Vactor)

 

arrow1 สรุปเนื้อหา

            ภาพประเภทบิทแมทมีด้วยกัน 2 ชนิด คือ ภาพชนิด  GIF  มีข้อจำกัด คือ สีสูงสุด 256 สีน้อยมากสำหรับการสร้างเว็บไซต์​​​​​​​​​​​​​​​​​​​​​​จึงไม่นิยมในการนำมาสร้างเว็บเพราะภาพกราฟิกชนิด GIF ใช้การบีบอัดข้อมูลเพื่อลดพื้นที่การจัดเก็บข้อมูลการบีบอัดข้อมูลแต่จะเหมาะกับภาพการ์ตูน หรือโลโก้ ภาพชนิด  JPEG  เป็นภาพถ่ายหรือภาพวาดมีจำนวนสีมากสามารถแสดงสีได้สูงสุด  16.7  ล้านสี  ภาพชนิด  JPEG ไฟล์นามสกุลจะเป็น  .jpg,  ภาพชนิด  PNG  ไฟล์นามสกุลจะเป็น  .png,  ภาพชนิด  GIF  ไฟล์นามสกุลจะเป็น  .gif และภาพประเภทเวคเตอร์เป็นทีเ่กิดจากเส้นส่วนโค้งและรูปทรงเรขาคณิตเก็บในรูปของคำสั่งโปรแกรมและค่าตัวเลขนำคำสั่งและค่ามาคำนวณเพื่อสร้างเป็นภาพจริงภาพประเภทเวคเตอร์ (Vactor)  SWF, AI, PDF, WMF

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

1.  ให้นักเรียนตอบคำถามดังต่อไปนี้

     1.1  อธิบายรูปภาพประเภทบิทแมท 

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

     1.2  อธิบายรูปภาพประเภทเวคเตอร์

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

.............................................................................................................................................................

2.  เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้วส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน

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

เกณฑ์
การประเมิน

รายละเอียดเกณฑ์การให้คะแนน

5

(ดีมาก)

4

(ดี)

3

(ปานกลาง)

2

(พอใช้)

1

(ปรับปรุง)

0

(ไม่ผ่าน)

อธิบายรูปภาพประเภทบิทแมท

เขียนได้ถูกต้องครบทุกประเด็นตามลำดับ

เขียนได้ถูกต้องครบ 4 ประเด็น

เขียนได้ถูกต้องอย่างน้อย 3ประเด็น

เขียนได้ถูกต้องอย่างน้อย 2 ประเด็น

เขียนได้ถูกต้องอย่างน้อย 1 ประเด็น

เขียนไม่ตรงประเด็น

อธิบายรูปภาพประเภทเวคเตอร์

เขียนได้ถูกต้องครบทุกประเด็นตามลำดับ

เขียนได้ตรงถูกต้องครบ 4 ประเด็น

เขียนได้ถูกต้องอย่างน้อย 3ประเด็น

เขียนได้ถูกต้องอย่างน้อย 2 ประเด็น

เขียนได้ถูกต้องอย่างน้อย 1 ประเด็น

เขียนไม่ตรงประเด็น

 

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

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


             การจัดการรูปภาพในภาษา HTML มีการแทรกภาพรูปภาพ การกำหนดขนาดกรอบรูปภาพ วิธีการกำหนดตำแหน่งข้อความกับรูปภาพ การกำหนดภาพบนพื้นหลังหน้าเว็บเพจ

             รายละเอียดของเนื้อหามีดังนี้

1. การแทรกรูปภาพ

2. กำหนดข้อความกำกับภาพ

3. การกำหนดขนาดของรูปภาพ

4. การกำหนดกรอบรูปภาพ

5. การกำหนดตำแหน่งข้อความกับรูปภาพ

5.1 การกำหนดระยะห่างของรูปภาพ

5.2 การกำหนดระยะข้อความให้พ้นขอบเขตรูปภาพ

6. การกำหนดพื้นหลังบนเว็บ

arrow1 สรุปเนื้อหา

             การแทรกรูปภาพในภาษา HTML กำหนดด้วยแท็ก <img src="/ชื่อไฟล์รูปภาพ"> การใส่ข้อความกำกับภาพ (alternative text) เป็นการอธิบายไม่พบไฟล์ภาพหรือเกิดความผิดพลาดของบราวเซอร์ไม่สามารถแสดงผลรูปภาพ สามารถใช้แอตทริบิวต์  width  และ  height การจัดวางรูปในตำแหน่งต่างๆ  ใช้แอตทริบิวต์  align คือ top, middle, bottom, left, right การเว้นระยะห่างให้กับรูปภาพการจัดเรียงไม่ชิดติดกันใช้แอตทริบิวต์ในการกำหนด คือ  vspace  การกำหนดระยะห่างแนวตั้ง  (vertical space)  ด้านบนและล่าง  hspace  การกำหนดระยะห่างแนวนอน  (horizontal space)  ด้านซ้ายและขวา การกำหนดข้อความให้พ้นระยะขอบเขตของรูปภาพใช้แอตทริบิวต์  clear การกำหนดพื้นหลังให้เป็นรูปภาพใช้แอตทริบิวต์  background และการกำหนดภาพพื้นหลังให้คงที่ใช้แอตทริบิวต์  bgproperties

arrow1กิจกรรม/ใบงานที่ 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.  เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้วส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน

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

คะแนน/คุณภาพ

เกณฑ์การประเมินผล

5 : ดีมาก

ทำกิจกรรมถูกต้อง 9-10 ข้อ

4 : ดี

ทำกิจกรรมถูกต้อง 7-8   ข้อ

3 : ปานกลาง

ทำกิจกรรมถูกต้อง 5-6   ข้อ

2 : พอใช้

ทำกิจกรรมถูกต้อง 3-4   ข้อ

1 : ปรับปรุง

ทำกิจกรรมถูกต้อง 1-2   ข้อ

0 : ไม่ผ่าน

ทำกิจกรรมถูกต้อง 0      ข้อ

 

arrow1หัวเรื่องที่ 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

 

 arrow1 สรุปเนื้อหา

             คุณสมบัติของภาพชนิด JPG สามารถใช้เทคนิคการแบ่งรูปภาพทำได้ด้วยโปรแกรม Photoshop ตัดภาพเป็นส่วน​​​​​​​​ๆ ช่วยลดการประมวลผลการโหลดรูปภาพโดยภาพมีขนาดเล็ก มีลักษณะคล้ายจิ๊กซอว์ คุณสมบัติของภาพชนิด GIF แสดงผลภาพเป็นแบบโปร่งแสง (Transparency) และการแสดงภาพหยาบสู่ละเอียด (Interlaced) ช่วยในเรื่องการแสดงผลที่รวดเร็วจากจำนวนสีที่มีเพียง 256 สี สร้างภาพโดยใช้ Photoshop 

 

 arrow1กิจกรรม/ใบงานที่ 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.  เมื่อนักเรียนปฏิบัติเสร็จเรียบร้อยแล้วส่งผลการปฏิบัติงานที่ครูหน้าชั้นเรียน

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

คะแนน/คุณภาพ

เกณฑ์การประเมินผล

5 : ดีมาก

ทำกิจกรรมถูกต้อง 9-10 ข้อ

4 : ดี

ทำกิจกรรมถูกต้อง 7-8   ข้อ

3 : ปานกลาง

ทำกิจกรรมถูกต้อง 5-6   ข้อ

2 : พอใช้

ทำกิจกรรมถูกต้อง 3-4   ข้อ

1 : ปรับปรุง

ทำกิจกรรมถูกต้อง 1-2   ข้อ

0 : ไม่ผ่าน

ทำกิจกรรมถูกต้อง 0      ข้อ

 

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

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


                การสร้างภาพเคลื่อนไหวสามารถทำให้เว็บเพจน่าใจมากยิ่งขึ้น  ทั้งยังช่วยในเรื่องการตกแต่งเว็บเพจให้สวยงามได้อีกด้วย  ทำให้ผู้เข้าชมเว็บไซต์ไม่เกิดความเบื่อหน่ายในการรับข้อมูลข่าวสารบนหน้าเว็บเพจได้  ซึ่งลักษณะของไฟล์ภาพชนิด  GIF  สามารถนำภาพหลาย  ๆ  ภาพมารวมกันเป็นไฟล์เดียวและทำให้เคลื่อนไหวด้วยการนำภาพต่าง​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ๆ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​มาเรียงกันและใส่ลักษณะพิเศษช่วยในการเปลี่ยนรูปภาพ หรืออาจจะนำภาพที่มีการแสดงกริยาท่าทางอาการต่าง​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ ๆ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ มาเรียงต่อกันตามลำดับเมื่อรวมภาพต่าง  ๆ  แล้วจะมองเห็นภาพนั้นเป็นการแสดงกริยาอาการคล้ายเคลื่อนไหวได้จริง  ซึ่งเรียกว่า  ภาพชนิด  Gif Animation    และการแสดงภาพเคลื่อนไหวในหน้าเว็บเพจเหมือนกับการแสดงภาพทั่วไปใช้แท็ก <img>

             รายละเอียดของเนื้อหามีดังนี้

1. การสร้างภาพเคลื่อนไหวในภาษา HTML

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

 

arrow1 สรุปเนื้อหา

             การสร้างภาพเคลื่อนไหวง่ายๆ ด้วยโปรแกรม Photoshop และแสดงภาพเคลื่อนไหวเหมือนกับการแสดงภาพใช้แท็ก  <img>  สามารถกำหนดการจัดวางรูปในตำแหน่งต่างๆ  ใช้แอตทริบิวต์  align  โดยค่าที่ใช้กำหนด  คือ  center, left, right

 

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

คำชี้แจง

            1.  ให้นักเรียนเปิดไฟล์  work202.html  ขึ้นมาสร้างภาพเคลื่อนไหวโดยกำหนดขนาดรูปภาพให้มีขนาดความกว้างเท่ากับ 200  pixel  ขนาดความสูงเท่ากับ  150 pixel  ได้จากภาพถ่ายพรรณไม้ที่ได้รับมอบหมาย  ดำเนินการสร้างภาพเคลื่อนไหว  โดยนำภาพมาเรียงต่อกันด้วยโปรแกรม  Photoshop  บันทึกไฟล์ภาพเคลื่อนไหวชื่อ  animation.gif และแสดงภาพเคลื่อนไหวที่กำหนดให้อยู่กึ่งกลางจอภาพ

            2.  เมื่อนักเรียนปฏิบัติขั้นตอนดังกล่าวเรียบร้อยแล้วให้บันทึกชิ้นงานไว้ในไดร์ฟ  D:  โฟลเดอร์ห้องเรียนพร้อมบันทึกชื่อไฟล์ชื่อ  เลขที่_work504.html  เสร็จแล้วส่งให้ครูประเมินเป็นรายบุคคล  

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

 work5044

เกณฑ์การประเมิน

รายละเอียดเกณฑ์การให้คะแนน

3

(ดี)

2

(พอใช้)

1

(ปรับปรุง)

0

(ไม่ผ่าน)

ปฏิบัติตามขั้นตอนถูกต้อง

ปฏิบัติได้ครบทุกขั้นตอนการสร้างภาพเคลื่อนไหวและการแสดงภาพเคลื่อนไหว

ปฏิบัติได้ตามขั้นตอนการสร้างภาพเคลื่อนไหวและการแสดงภาพเคลื่อนไหว

ปฏิบัติได้ไม่ครบขั้นตอนการสร้างภาพเคลื่อนไหวและการแสดงภาพเคลื่อนไหว

ปฏิบัติไม่ได้ตามขั้นตอน

ชิ้นงานถูกต้องสมบูรณ์ตามหลักการ

ชิ้นงานจัดทำเสร็จถูกต้องสมบูรณ์ตาม

หลักการเขียนภาษา HTML ทั้งหมด

ชิ้นงานจัดทำเสร็จถูกต้องตามหลักการเขียนภาษา HTML บางส่วน

ชิ้นงานจัดทำเสร็จแต่ไม่ถูกต้องตามหลักการเขียนภาษา HTML

ไม่สร้างชิ้นงาน

บันทึกชิ้นงาน

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง รวดเร็วตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานได้ถูกต้อง ตามคำสั่ง

บันทึกนามสกุล*.html และตั้งชื่อชิ้นงานไม่ถูกต้อง

ไม่สามารถบันทึกชิ้นงานได้

เสร็จงาน
ตรงเวลาที่กำหนด

งานที่ปฏิบัติเสร็จทันเวลา

งานที่ปฏิบัติเสร็จทันเวลาบางส่วน

งานที่ปฏิบัติเสร็จไม่ทันเวลา

ไม่มีงาน

มีความคิดริเริ่มสร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สร้างสรรค์สวยงาม

ชิ้นงานแปลกใหม่สวยงาม

ชิ้นงานสวยงาม

ไม่มีงาน

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

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

มีความรู้ความเข้าใจและสามารถจัดการกราฟิกด้วยภาษา 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  คะแนน)

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

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

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

             ชนิดภาพกราฟิกที่นิยมใช้สำหรับการสร้างเว็บมักจะเป็นชนิด​​​​​​  GIF​​​​​  และ  JPEG  ซึ่งแต่ละชนิดมีลักษณะที่แตกต่างกัน  ทั้งนี้ควรเลือกใช้อย่างเหมาะสมตามคุณลัษณะของภาพกราฟิกแต่ละชนิดนั้น  ๆ  โดยเนื้อหาเว็บสวยด้วยกราฟิกเบื้องต้นนี้ยังสามารถแทรกภาพและข้อความกำกับภาพ  กำหนดขนาดรูปภาพและกรอบรูปภาพ  กำหนดตำแหน่งข้อควมกับรูปภาพ  กำหนดภาพบนพื้นหลัง  โดยมีภาพใช้ประกอบบนเว็บเพจไม่ใช่มีแต่เพียงข้อความอย่างเดียว  ทำให้เว็บมีความสวยงาม  น่าสนใจมากยิ่งขึ้น  ทั้งยังทำให้เกิดความเข้าใจในเนื้อหาที่นำเสนอบนเว็บเพิ่มขึ้นอีกทางหนึ่งด้วย