การแทรกรูปภาพในเว็บเพจ

1. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
การแทรกรูปภาพในเว็บเพจ
นอกจากเราจะเพิ่มเนื้อหาที่เป็นข้อความในหน้าเว็บเพจแล้ว เรายังสามารถแทรกรูปภาพเพื่อให้
เนื้อหาของเว็บเพจเข้าใจง่ายมากยิ่งขึ้น สร้างความสวยงามให้กับเว็บเพจเพื่อดึงดูดความสนใจจากผู้ที่มาเยี่ยม
ชมได้ นอกจากนี้เรายังสามารถประยุกต์ใช้งานรูปภาพให้กลายเป็นป้ายโฆษณาแบบแบนเนอร์ พื้นหลังหน้าเว็บ
เพจ ปุ่มคลิกเพื่อเชื่อมโยง ตลอดจนสัญลักษณ์ต่าง ๆ ได้
ข้อพิจารณาในการเลือกใช้รูปภาพ
ในการนาภาพมาประกอบข้อความบนเว็บเพจนั้น ควรพิจารณาและเลือกรูปภาพที่นามาใช้ให้
เหมาะสม โดยมีข้อพิจารณาดังนี้
1. ไม่ควรเน้นรูปภาพภายในเว็บเพจมากจนเกินไป ควรจะมีข้อความและรูปภาพที่สมดุลกัน
2. การใช้รูปภาพที่เป็นไฟล์ขนาดใหญ่จะทาให้การโหลดเว็บเพจใช้เวลานานกว่าจะแสดงภาพ ดังนั้น
จึงควรใช้ภาพที่มีพอเหมาะกับสิ่งที่เราต้องการสื่อกับผู้ชม หรืออาจใช้โปรแกรมทางกราฟิก เช่น Photoshop
หรือ ACDSee ทาการลดขนาดภาพ (Resize) ก่อนนามาลงบนเว็บเพจก็ได้
3. ปัจจุบันการนารูปภาพลงเว็บเพจควรคานึงถึงที่มาและลิขสิทธิ์ของรูปภาพนั้นด้วย แต่บางเว็บไซต์ก็
มีการแจกรูปภาพให้ฟรี ซึ่งสามารถนามาใช้ประโยชน์โดยไม่ต้องเสียค่าลิขสิทธิ์
4. ควรเลือกใช้ภาพที่มีโทนเดียวกับส่วนประกอบอื่นภายในเว็บเพจ เพื่อความกลมกลืนไม่แตกต่างกัน
ชนิดของไฟล์รูปภาพที่ใช้ในเว็บ
รูปภาพที่ใช้ในเว็บเพจ มีอยู่ 3 ชนิดด้วยกัน ซึ่งแต่ละชนิดมีรายละเอียดและลักษณะที่แตกต่างกัน ดังนี้
1. GIF (Graphic Interchange Font) เป็นรูปแบบของไฟล์รูปภาพที่เป็นที่นิยมอย่างมากเนื่องจาก
ขนาดของไฟล์เล็กมากจึงทาให้สามารถโหลดภาพได้เร็วขึ้น สามารถกาหนดสีได้สูงสุด 256 สี เหมาะสาหรับ
การทาภาพโปร่งและสร้างภาพเคลื่อนไหว
2. JPEG (Joint Photographic Experts Group) เป็นรูปแบบของไฟล์รูปภาพที่มีขนาดของไฟล์ใหญ่
กว่า GIF สามารถกาหนดสี ได้16 ล้านสีเหมาะสาหรับภาพถ่าย รูปภาพจากการสแกน
3. PNG (Portable Network Graphic) เป็นรูปแบบของไฟล์รูปภาพที่ใช้บนเว็บ แต่อาจใช้ไม่ได้กับ
ทุกบราวเซอร์สามารถใส่เอฟเฟ็กต์ได้
ก่อนการแทรกรูปภาพ
ก่อนที่จะแทรกรูปภาพในหน้าเว็บเพจ ควรนาไฟล์รูปภาพเหล่านั้นมาเก็บไว้ในโฟลเดอร์หรือไซต์ของ
เว็บเพจที่ต้องใส่รูปภาพนั้นก่อน เช่น สร้างโฟลเดอร์ pic หรือ images เพื่อใช้เก็บรูปภาพ ทั้งนี้เพื่อเป็นการ
ป้องกันการเปิดปัญหา คือ เว็บบราวเซอร์ไม่สามารถแสดงภาพได้ เนื่องจากแหล่งที่เก็บไฟล์รูปภาพกับแหล่งที่

2. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
ใช้จัดเก็บเว็บเพจนั้นไม่ใช่แหล่งเดียวกัน โดยเมื่อนาไฟล์รูปภาพมาเก็บไว้ในไซต์เดียวกันกับไฟล์เว็บเพจแล้ว
ไฟล์เหล่านี้จะแสดงอยู่ใน File Panel
การแทรกรูปภาพ
เราสามารถแทรกรูปภาพได้โดยมีวิธีการดังนี้
1. วางเคอร์เซอร์ไว้ในตาแหน่งที่ต้องการแทรกรูปภาพ
รูปที่ 1 การวางเคอร์เซอร์ไว้ในตาแหน่งที่ต้องการแทรกรูปภาพ
2. เลือกเมนู Insert > Image
รูปที่ 2 การแทรกรูปภาพด้วยเมนู Insert > Image
3. จะปรากฏกรอบโต้ตอบ Select Image Source ให้เลือกรูปภาพในโฟลเดอร์ของไซต์ที่กาลังทางาน
อยู่ คลิกปุ่ม OK
รูปที่ 3 การเลือกรูปภาพจากโฟลเดอร์
4. จะปรากฏกรอบโต้ตอบให้เราเลือก OK




3. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
รูปที่ 4 กรอบโต้ตอบ
5. จะได้รูปภาพที่เราได้เลือกไว้
รูปที่ 5 รูปที่ได้จากการเลือก
หรืออีกวิธีหนึ่งสามารถคลิกแทรกภาพได้อีกคาสั่งหนึ่งคือ คลิกที่ ที่แถบ Insert Bar หรือจะ
เอาเมาส์คลิกลากจากแถบ File Panel มาวางบนพื้นที่ออกแบบก็ได้
รูปที่ 6 การแทรกรูปภาพจากแถบ File Panel

4. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
การปรับแต่งคุณสมบัติของรูปภาพ
1. คลิกเลือกที่รูปภาพที่ต้องการปรับแต่งคุณสมบัติ
รูปที่ 7 การเลือกรูปภาพเพื่อปรับแต่งคุณสมบัติ
2. ทาการปรับเปลี่ยนคุณสมบัติของรูปภาพตามความเหมาะสม
รูปที่ 8 Panel Properties
หมายเลขที่  Image Name (Name) กาหนดชื่อให้กับรูปภาพ ใช่สาหรับเมื่อเราเขียน script
อ้างอิงรูปภาพ
หมายเลขที่  Src แสดงที่อยู่ของรูปภาพ
หมายเลขที่  Link ใช้กาหนดการเชื่อมโยงโดยใช้รูปภาพเป็นตัวเลือก ใช้ร่วมกับ Target
หมายเลขที่  Alt (Alternate Text) คาบรรยายรูปจะปรากฏก็ต่อเมื่อรูปไม่แสดงผล และนาเมาส์
ไปอยู่เหนือรูป (ie)
หมายเลขที่  Edit ประกอบด้วยเครื่องมือเหล่านี้ เครื่องมือของ Dreamweaver จะทาการแก้ไขที่
ไฟล์รูปโดยตรง
1. Edit ใช้ในการแก้ไขภาพในรูปแบบ File extension
2. Edit Image Settings ใช้ในการปรับรูปแบบไฟล์รูปภาพ และขนาดความ
ละเอียดของรูปภาพ
3. Crop ใช้ตัดรูปให้ได้ขนาดที่ต้องการ
4. Resample ใช้ในการย้อนกลับการแก้ไขรูปภาพ
5. Brightness and Contrast ปรับความสว่างของรูป
6. Sharpen ใช้แก้ไขความคมชัดของรูป
    
=




 

5. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
หมายเลขที่  W (Width) กาหนดความยาวของรูปที่ต้องการให้แสดงผล โดยไม่มีผลกับไฟล์รูปเดิม
H (Height) กาหนดความสูงของรูปที่ต้องการให้แสดงผล โดยไม่มีผลกับไฟล์รูปเดิม
หมายเลขที่  Class (CSS Setting) ถ้าเราเขียน CSS เอาไว้ตัวเลือกนี้จะใช้กาหนด CSS ที่เรา
เขียนไว้
หมายเลขที่  Map กลุ่มคาสั่ง Map ใช้ในการคลิกเลือกรูปทรงซึ่งมี 3 รูปทรง เพื่อใช้ลากเลือก
พื้นที่บนรูปภาพ สาหรับการเชื่อมโยงที่ไม่ได้ใช้หมดทั้งรูป
หมายเลขที่  Original ใช้เลือกภาพที่เป็นภาพต้นแบบ
การใส่กรอบรูปภาพ
1. คลิกเลือกรูปภาพที่ต้องการใส่กรอบ
รูปที่ 9 การเลือกรูปภาพที่ต้องการใส่กรอบ
2. คลิกเมาส์ขวา >> Edit Tag <img>… หรือ กด Shift+F5
รูปที่ 10 การปรับแต่งค่ารูปภาพ
3. ใส่ขนาดเส้นกรอบในส่วนของ Border : จากนั้นคลิก OK

6. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
รูปที่ 11 การปรับแต่งค่าเส้นกรอบรูปภาพ
4. จะได้กรอบรูปภาพ ดังรูป
รูปที่ 12 การแสดงกรอบรูป
กาหนดระยะห่างระหว่างรูปกับวัตถุอื่น
1. คลิกเลือกรูปภาพที่ต้องการปรับระยะห่าง
รูปที่ 13 การเลือกรูปภาพที่ต้องการปรับระยะห่าง

7. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
2. คลิกเมาส์ขวา >> Edit Tag <img>… หรือ กด Shift+F5
รูปที่ 14 การปรับแต่งค่ารูปภาพ
3. คลิกปรับระยะห่างระหว่างรูปกับวัตถุอื่น
V Space (Vertical Space) กาหนดระยะห่างระหว่างรูปกับวัตถุอื่น ในส่วน บนและล่างของรูป
H Space (Horizontal Space) กาหนดระยะห่างระหว่างรูปกับวัตถุอื่น ในส่วน ซ้ายและขวาของรูป
รูปที่ 15 การปรับปรับระยะห่างระหว่างรูปกับวัตถุอื่น
การจัดวางรูปภาพ
1. คลิกเลือกรูปภาพที่ต้องการจัดวางตาแหน่ง
รูปที่ 16 การเลือกรูปภาพที่ต้องการจัดวางตาแหน่ง

8. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
2. คลิกเมาส์ขวา >> Edit Tag <img>… หรือ กด Shift+F5
รูปที่ 17 การการปรับแต่งค่ารูปภาพ
3. คลิกการจัดวางตาแหน่งรูปภาพและข้อความ
รูปที่ 18 การจัดวางตาแหน่งรูปภาพและข้อความ
Baseline : ขอบล่างของรูปภาพตรง
กับแนวล่างของข้อความ
Top : ขอบบนของรูปภาพตรงกับแนว
บนของข้อความ

9. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
Middle : กึ่งกลางของรูปภาพตรงกับ
กึ่งกลางของข้อความ
Bottom : ขอบล่างของรูปภาพตรงกับ
แนวล่างของข้อความ
Texttop : จัดให้ขอบบนของรูปภาพ
อยู่ในระดับเดียวกับส่วนที่สูงที่สุดของ
ข้อความในบรรทัดนั้น
Absolute Middle : จัดให้กึ่งกลาง
ของรูปภาพอยู่ระดับเดียวกับกึ่งกลาง
ของข้อความรวมถึงตัวอักษรที่มีหาง
ห้อยลงมาเช่น y ด้วย
Absolute Bottom : จัดให้ขอบล่าง
ของรูปอยู่ระดับเดียวกับขอบล่างของ
ข้อความรวมถึงตัวอักษรที่มีหางห้อยลง
มาเช่น y ด้วย
Left : จัดให้รูปภาพชิดซ้ายของ
ข้อความทั้งพารากราฟ

10. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
Right : จัดให้รูปภาพชิดขวาของ
ข้อความทั้งพารากราฟ
การกาหนดให้รูปภาพเป็นพื้นหลัง
การแทรกภาพเป็นพื้นหลังก็อาศัยหลักการเหมือนกับการแทรกภาพปกติ โดยต้องทาการคัดลอกภาพ
มาไว้ในไซต์เสียก่อนเพื่อป้องกันความผิดพลาดเวลานาเสนอผลงาน
การกาหนดรูปภาพให้เป็นพื้นหลังหรือ Background นั้นสามารถทาได้ ดังนี้
1. คลิกเลือกเมนู Modify > Page Properties หรือกด Ctrl+J ที่แป้นพิมพ์ หรือเลือกจากแถบ
Panel properties
รูปที่ 19 การกาหนดให้รูปภาพเป็นพื้นหลัง
2. เลือก Category >> Appearance (CSS) หรือ Appearance (HTML) >> Background image
>> Browse >> จากนั้นไปเลือกรูปภาพที่ต้องการให้เป็นพื้นหลัง >> คลิก OK
รูปที่ 20 การแทรกรูปภาพพื้นหลัง

11. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
3. เลือกภาพจากแฟ้มที่เราต้องการแล้วตอบ OK
รูปที่ 21 การแทรกรูปภาพพื้นหลัง
4. จะได้ภาพพื้นหลังเป็นภาพที่เราเลือก
รูปที่ 22 ภาพที่ได้จากการแทรกพื้นหลัง
การกาหนดค่ารูปภาพพื้นหลัง
การกาหนดรูปภาพให้เป็นพื้นหลังหรือ Background นั้นสามารถทาได้ ดังนี้
1. คลิกเลือกเมนู Modify > Page Properties หรือกด Ctrl+J ที่แป้นพิมพ์ หรือเลือกจากแถบ
Panel properties
รูปที่ 23 การกาหนดค่ารูปภาพพื้นหลัง

12. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
2. เลือก Category >> Appearance (CSS) หรือ Appearance (HTML) >> Repeat
รูปที่ 24 การปรับแสดงผลรูปภาพพื้นหลัง
Repeat ใช้กาหนดการแสดงผลของภาพพื้นหลัง โดยมีคาสั่งดังนี้
1.no-repeat ให้แสดงผลภาพพื้นหลังเพียงครั้งเดียว
2.repeat ให้แสดงผลภาพพื้นหลังซ้ากันหลายๆครั้งจะเต็มพื้นที่เว็บเพจ
3.repeat-x ให้แสดงผลภาพพื้นหลังซ้ากันเฉพาะในแนวนอนเท่านั้น
4.repeat-y ให้แสดงผลภาพพื้นหลังซ้ากันเฉพาะในตั้งนอนเท่านั้น
3. เลือกภาพจากแฟ้มที่เราต้องการแล้วตอบ OK
การสร้างภาพแบบ Rollover Image
Rollover Image เป็นเทคนิคที่ช่วยเพิ่มความน่าสนใจให้กับเว็บเพจ ด้วยการทาให้รูปภาพเปลี่ยนเป็น
รูปภาพอื่นเมื่อเราเลื่อนเมาส์มาที่รูปภาพที่เป็นจุดเชื่อมโยง และเมื่อเลื่อนเมาส์ออกจากจุดเชื่อมโยงก็สามารถ
คืนกลับเป็นรูปภาพเดิมได้ มีวิธีการดังนี้
1. เลือกตาแหน่งที่ต้องการสร้างภาพแบบ Rollover
2. ไปที่เมนูคาสั่ง Insert > Image Objects > Rollover Image
รูปที่ 25 การสร้างภาพแบบ Rollover



13. ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม https://krupiyadanai.wordpress.com
3. จะปรากฏกรอบโต้ตอบ Insert Rollover Image
 Image Name : ให้ตั้งชื่อ Rollover Image ที่จะสร้างขึ้น
 Original image : ภาพต้นฉบับ คลิก Browse… เพื่อเลือกภาพที่ต้องการ
 Rollover image : ภาพที่ต้องการเปลี่ยนเมื่อคลิกเมาส์ คลิก Browse… เพื่อเลือกภาพที่
ต้องการ
 Alternate text : ข้อความกากับรูปภาพ จะแสดงเมื่อนาเมาส์ไปวางที่ภาพ
 When clicked, Go to URL : ชื่อไฟล์ที่ต้องการเชื่อมโยง
รูปที่ 26 การปรับแต่ง Insert Rollover Image