1. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 5 การใส่ภาพกราฟิกในเว็บไซต์
ใบเนื้อหา หน้าที่
แผ่นที่ :
หน่วยที่ 5
การใส่ภาพกราฟิกในเว็บไซต์
สาระการเรียนรู้
5.1 ลักษณะของภาพกราฟิกบนเว็บเพจ
5.2 การเตรียมรูปภาพสาหรับเว็บเพจ
5.3 การใส่รูปภาพบนเว็บเพจ
5.4 การปรับแต่งรูปภาพบนเว็บเพจ
วัตถุประสงค์เชิงพฤติกรรม
5.1 บอกลักษณะของภาพกราฟิกบนเว็บเพจได้
5.2 อธิบายวิธีการเตรียมรูปภาพสาหรับเว็บเพจได้
5.3 อธิบายวิธีการใส่รูปภาพบนเว็บเพจได้
5.4 อธิบายการปรับแต่งรูปภาพบนเว็บเพจได้

2. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 5 การใส่ภาพกราฟิกในเว็บไซต์
ใบเนื้อหา หน้าที่
แผ่นที่ :
รูปภาพที่ใช้งานด้านการทาเว็บเพจโดยทั่วไปแบ่งออกเป็น 2 ประเภท คือ
1. ภาพจริง(Physical Image) เป็นภาพที่เกิดจากวัตถุของจริง เช่น ภาพถ่าย เป็นต้น
2. ภาพกราฟิก(Computer Graphic) เป็นภาพที่เกิดจากเป็นการสื่อความหมายด้านการใช้ภาพวาด ภาพสเกต ด้วยการใช้เส้น
ภาพวาด สัญลักษณ์ ภาพถ่าย กราฟ แผนภูมิ การ์ตูน ฯลฯ หรือด้วยการวาดในโปรแกรมคอมพิวเตอร์ เช่น Illustrator เป็นต้น
ภาพกราฟิกที่ใช้กับคอมพิวเตอร์ เป็นภาพที่เกิดบนจอคอมพิวเตอร์ เกิดจากการทางานของโหมดสี RGB ซึ่งประกอบด้วย สีแดง
(Red) สีเขียว (Green) และสีนาเงิน (Blue) โดยใช้หลักการยิงประจุไฟฟ้าให้เกิดการเปล่งแสงของสีทัง 3 สี มาผสมกันทาให้เกิดเป็นจุดสี
เล็ก ๆ ที่เรียกว่า พิกเซล (Pixel) โดยพิกเซลจะมีหลากหลายสี เมื่อนามาวางต่อกันจะเกิดเป็นรูปภาพ ซึ่งภาพที่ใช้กับเครื่องคอมพิวเตอร์
มี 2 ประเภท คือ
ภาพแบบบิตแมป (Bitmap) หรือ ภาพแบบราสเตอร์ (Raster) คือ ภาพที่เกิดจากการรวมกันของพิกเซล ซึ่งถูกกาหนดความ
ละเอียดไว้คงที่ตายตัว ไฟล์ภาพมีหลายรูปแบบ อาทิ เช่น BMP, TIF, JPG, PCT ฯลฯ
•ข้อดีของภาพแบบ บิตแมป คือ ภาพมีความสวยงามเป็นธรรมชาติ
•ข้อเสียของภาพแบบบิตแมป คือ เมื่อขยายภาพแล้วความสวยงามจะลดลงเพราะเห็นจุดสีใหญ่ขึนนั่นคือมีความละเอียดลดลง
แต่ถ้ากาหนดความละเอียดไว้สูงๆ ก็จะเปลืองหน่วยความจา
ภาพแบบเวกเตอร์ (Vector) หรือ ภาพแบบเชิงวัตถุ (Object-Oriented Graphic) คือ รูปภาพที่สร้างจากคอมพิวเตอร์ โดย
ให้แต่ละส่วนของภาพได้แก่ เส้น รูปทรง ที่เป็นอิสระต่อกัน นามาวางประกอบกันเป็นภาพ
•ข้อดีของภาพแบบเวกเตอร์คือเมื่อขยายภาพแล้วความละเอียดจะยังคงเดิม และประหยัดหน่วยความจากว่าภาพแบบบิตแมป
•ข้อเสียของภาพแบบเวกเตอร์ คือ ภาพเกิดจากการสังเคราะห์ อาจจะดูไม่สวยงามดั่งธรรมชาติ
ภาพเปรียบเทียบความแตกต่างระหว่าง Bitmap และ Vector
ภาพกราฟิกที่นิยมนามาใช้บนเว็บเพจ โดยมากจะมี 3 นามสกุล คือ .jpeg, .gif, .png ซึ่งมีรายละเอียดของภาพดังนี
.lpeg เป็นไฟล์ที่มีการบันทึกข้อมูลแบบสูญเสียข้อมูล ภาพที่ได้นามาใช้งานทั่ว ๆไป ไฟล์ประเภทนีจะตัดรายละเอียดของภาพ
บางส่วนออก ซึ่งเป็นรายละเอียดที่ไม่สามารถมองเห็นสีได้มากนัก เหมาะสาหรับนาไปลงอินเทอร์เน็ต
.gif เป็นไฟล์ที่มีการบีบอัดข้อมูลสูง แต่จะให้ความละเอียดของภาพมาก ทาให้ไฟล์มีขนาดเล็กมาก มักนามาใช้งานบนอินเทอร์เน็ต
มากที่สุด เพราะไฟล์ที่มีขนาดเล็กทาให้ไม่เสียเวลาในการเปิดหน้าเว็บไซต์ที่มีรูปภาพประกอบได้ในเวลาอันรวดเร็ว
.png เป็นไฟล์ที่มีความยืดหยุ่นสูง ใช้งานได้กับเครื่องที่มีการเปลี่ยนแพลตฟอร์มการทางาน และสามารถทางานข้าม
ระบบปฏิบัติการ เช่น Linux และ Windows การแสดงผลจะทาได้รวดเร็วกว่า .Jpeg และสามารถทาแบบโปร่งแสงได้
5.1 ลักษณะของภาพกราฟิกบนเว็บเพจ

3. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 5 การใส่ภาพกราฟิกในเว็บไซต์
ใบเนื้อหา หน้าที่
แผ่นที่ :
การเลือกภาพให้เหมาะสมกับเว็บเพจ
1. จานวนภาพ ไม่มากหรือน้อยจนเกินไป มีประโยขน์ต่อเว็บเพจมองแล้วเกิดความสวยงามไม่เกะกะหรือรุงรัง
2. ขนาดภาพ ควรกาหนดขนาดภาพให้เหมาะสมกับเว็บเพจ
3. ความสวยงามของภาพ จัดเป็นองค์ประกอบที่สาคัญอีกอย่างหนึ่งที่ทาให้ผู้เข้าใช้งานเว็บไซต์ รู้สึกหน้าเข้ามาศึกษา เรียนรู้
4. ควรกาหนดหน่วยวัดมาตรฐานของภาพให้เป็นมาตรฐานเดียวกัน
5. ควรความละเอียดของภาพ ไม่ให้เกิดปัญหาภาพแตกหรือสื่อความหมายของภาพผิดไป
5.3.1 การแทรกภาพ มีวิธีการ ดังนี
1. คลิกเลือกตาแหน่งที่ต้องการวางภาพ คลิกที่เมนูคาสั่ง Insert > Image
จะปรากฏหน้าต่าง Select Image Source ดังภาพ ทาการเลือกโฟลเดอร์ในช่อง Look in เลือกไฟล์ภาพที่ต้อง
แล้วคลิกปุ่ม OK
5.2 การเตรียมรูปภาพสาหรับเว็บเพจ
5.3 การใส่รูปภาพบนเว็บเพจ

4. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 5 การใส่ภาพกราฟิกในเว็บไซต์
ใบเนื้อหา หน้าที่
แผ่นที่ :
ถ้ามีหน้าจอนีปรากฏขึนให้กาหนดคุณสมบัติของ Image Tag ให้คลิก OK
ภาพที่เลือกจะแทรกอยู่ในเว็บเพจ ดังภาพ

5. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 5 การใส่ภาพกราฟิกในเว็บไซต์
ใบเนื้อหา หน้าที่
แผ่นที่ :
5.4.1 การปรับขนาดภาพ
ภาพที่แทรกในเว็บเพจอาจมีขนาดใหม่หรือเล็กจนเกินไป สามารถปรับขนาดด้วยการใช้จุดยึด(Handle) และ Property
Inspector ดังนี
1. ปรับขนาดด้วยการใช้จุดยึด(Handle)
คลิกที่รูปภาพจะปรากฏกรอบสี่เหลี่ยมรอบรูป คลิกที่จุดยึด ลากเม้าส์ย่อ ขยายขนาดภาพ ทาได้ทังด้านบน ด้านล่าง
และตามแนวทแยงมุม
2. ปรับขนาดด้วยการใช้ Property Inspector
ปรับความกว้าง(W) และสูง(H) ของภาพตามความเหมาะสม หากต้องการให้ภาพกลับไปเป็นขนาดเดิม
ในคลิกปุ่ม Reset Size
จะได้ภาพที่ปรับขนาดแล้ว
5.4 การปรับแต่งรูปภาพ
คลิกปุ่ม Reset Size

6. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 5 การใส่ภาพกราฟิกในเว็บไซต์
ใบเนื้อหา หน้าที่
แผ่นที่ :
5.4.2 การวางตาแหน่งรูปภาพ
การวางตาแหน่งรูปภาพในเว็บเพจเป็นการจัดให้วางบนเว็บเพจ การจัดชิดซ้าย(Left) กึ่งกลาง(Center) ชิดขวา(Right)
และเสมอขอบ(Justify) ทาได้ ดังนี
1. คลิกที่ภาพ แล้วเลือกลักษณะการวางโดยคลิกคาสั่ง Fomat > Align แล้วทาการเลือกคาสั่งที่ต้องการ
5.4.3 การใส่เส้นขอบให้กับรูปภาพ
1. คลิกที่รูปภาพที่ต้องการใส่เส้นขอบ
2. ไปที่ Property Inspector ในช่อง Border ให้ใส่ขนาดเส้นขอบของรูปภาพตามความต้องการ
จะได้ภาพที่มีเส้นขอบตามขนาดที่ต้องการ
ใส่ขนาดเส้นขอบ

7. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 5 การใส่ภาพกราฟิกในเว็บไซต์
ใบเนื้อหา หน้าที่
แผ่นที่ :
5.4.4 การนารูปภาพมาใส่พื้นหลัง(background)
วิธีการนารูปภาพมาใส่พืนหลังมีดังนี
1. เลือกคาสั่ง Modify > Page Properties
จะปรากฏหน้าต่าง Page Properties
2. คลิก Browse ที่ background Image Source > เลือกภาพที่ต้องการ >คลิกปุ่ม OK

8. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 5 การใส่ภาพกราฟิกในเว็บไซต์
ใบเนื้อหา หน้าที่
แผ่นที่ :
จะได้ภาพพืนหลังดังภาพ
5.4.5 การแก้ไขรูปภาพ
การนาภาพมาใช้ในเว็บเพจสามารถแก้ไขโดยใช้เครื่องมือ Property Inspector ในการปรับแต่งภาพ ดังนี
แก้ไขภาพด้วยโปรแกรมอื่น
ลดขนาด/ทาให้ภาพโปร่งใส
ปรับขนาดภาพต้นฉบับ
ตัดภาพ
ปรับค่าความสว่างของภาพ
ปรับค่าความคมชัดของภาพ

9. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 5 การใส่ภาพกราฟิกในเว็บไซต์
ใบเนื้อหา หน้าที่
แผ่นที่ :
5.4.6 การจองพื้นที่วางภาพบนเว็บเพจ
1. คลิกเลือกตาแหน่งที่จะวางภาพ
2. เลือกคาสั่ง Insert > Image Objects > Image Placeholder
3. จะปรากฏหน้าต่าง image Placeholder ขึนมาให้กาหนดรายละเอียด แล้วคลิก OK
จะปรากฏพืนที่ว่างบนเว็บเพจในตาแหน่งที่เลือกไว้

10. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 5 การใส่ภาพกราฟิกในเว็บไซต์
ใบเนื้อหา หน้าที่
แผ่นที่ :
5. เมื่อได้ภาพแล้วสามารถแทรกภาพด้วยการ คลิกที่ตาแหน่งภาพ แล้วทาการเลือกภาพที่ต้องการวาง คลิก OK
ภาพที่แทรกเข้ามาจะมาปรากฏตรงบริเวณตาแหน่งให้วางภาพ