1. การแทรกรูปภาพ
1. ลักษณะของภาพกราฟิกในเว็บเพจ
สิ่งต้องคานึงถึงในการเลือกรูปภาพ
ภาพกราฟิกหรือรูปภาพที่นามาประกอบเนื้อหาในเว็บเพจเป็นส่วนหนึ่งที่ทา
ให้ผู้ อ่านเข ้าใจเรื่องราวที่นาเสนอมากยิ่งขึ้น และช่วยให้เว็บเพจมีสีสันสวยงาม น่าอ่าน
การนาภาพกราฟิกมาประกอบเว็บเพจ มีสิ่งที่จะต ้องคานึงถึงหลัก ๆ ดังนี้
1. ความแตกต่างกันของระบบคอมพิวเตอร์
2. การเลือกใช ้ชนิดของเบราเซอร์
3. กาหนดหน่วยวัดมาตรฐานของภาพให้เป็นมาตรฐานเดียวกัน
4. ความละเอียดของรูปภาพ
5. ขนาดของไฟล์ภาพ
ชนิดของรูปภาพ
การนาภาพกราฟิกมาใช ้ในเว็บเพจนิยมใช ้ภาพ 3 ฟอร์แมต
(นามสกุล) คือ .gif , .jpg , .png ซึ่งมีรายละเอียดของภาพแต่ละชนิด ดังนี้
ภาพ GIF (Graphic Interchange Format) สามารถแสดงผลบนบราวเซอร์ได ้ทุกชนิด
มักเป็น
รูปที่มีสีพื้นเป็นส่วนใหญ่ ไม่ค่อยมีการไล่สี เช่น โลโก ้รูปการ์ตูนต่าง ๆ
ภาพ JPEG (Joint Photographic Experts
Group) สามารถแสดงผลบนบราวเซอร์ได ้ทุกชนิดเช่นกัน ส่วนใหญ่มักจะเป็นภาพถ่าย
หรือภาพที่มีรายละเอียดสีมาก ๆ

2. ภาพ PNG (Portable Network Graphic)พัฒนาขึ้นมาใช ้งานบนบราวเซอร์
แต่ขณะนี้ยังไม่ได ้ความนิยมมากนักเมื่อเทียบกับไฟล์ .gif และ .jpg
2. การเตรียมรูปภาพ
การเลือกภาพให้เหมาะสมกับเว็บเพจ
ภาพกับเว็บเพจควรออกแบบให้เหมาะสม ในแต่ละคอลัมน์ควรมีภาพประก
อบอย่างน้อย 1
ภาพ แต่ถ ้าเนื้อหายาวมาก ก็ควรเพิ่มภาพให้มากขึ้น เพื่อพักสายตาผู้อ่าน
สิ่งที่ต ้องคานึงถึงในการเลือกภาพ มีดังนี้
1. จานวนภาพ
2. ขนาดภาพ
3. ความสวยงามของภาพ
3. การใส่รูปภาพ
การนารูปภาพมาใช้งานในเว็บเพจ

3. 1. วางเคอร์เซอร์ลงบนเว็บเพจ บริเวณที่ต ้องการแทรกภาพ
2. คลิกปุ่ม Insert แล ้วเลือกคาสั่ง (Image)
1. เลือกภาพที่ต ้องการนามาแทรกในเว็บเพจ ซึ่งสามารถดูตัวอย่างภาพได ้โดยคลิ
ก
1. คลิกปุ่ม OK
การปรับขนาดรูปภาพ
เมื่อนารูปภาพมาวางในเว็บเพจแล ้ว หากมีขนาดไม่เหมาะสม เช่น รูปมีข
นาดใหญ่หรือเล็กเกินไป เราสามารถปรับขนาดรูปภาพเพื่อให้มีขนาดพอดีกับหน้าเว็บเพ

4. จ ซึ่งมีขั้นตอนดังนี้
1. คลิกเลือกรูปที่ต ้องการปรับขนาด
2. คลิกเลื่อนเมาส์ที่ขอบของภาพและย่อหรือขยายขนาด โดยกดปุ่ม <
Shift
> ค ้างไว้จะเป็นการปรับขนาดตามสัดส่วนเดิม หรือปรับค่าตัวเลขขนาดภาพตามต ้องกา
รใน Property Inspectoc
การจัดวางรูปภาพ
เมื่อได ้นารูปภาพมาใส่ลงในเว็บเพจแล ้ว สามารถจัดวางรูปในลักษณะต่าง
ๆ เช่น ชิดซ ้าย ตรงกลาง หรือชิดขวาก็ได ้ โดยการจัดวางรูปภาพมีขั้นตอนดังนี้
1. คลิกเลือกรูปที่ต ้องการจัดรูปแบบ
2. คลิกเลือกปุ่มเพื่อจัดวางให้เหมาะสมกับหน้าเว็บเพจ
(Align Left) สาหรับวางรูปชิดซ ้าย

5. (Align Center) สาหรับวางรูปตรงกลาง
(Alight Right) สาหรับวางรูปชิดขวา
4. การตกแต่งรูปภาพให้สวยงาม
การใส่กรอบให้รูปภาพ
1. คลิกเลือกรูปที่ต ้องการใส่กรอบ
2. กาหนดความหนาของกรอบลงในช่อง Border

6. 3. คลิกเมนู File >> Save เพื่อบันทึกเว็บเพจ จากนั้นกดปุ่ม < F12
> เพื่อทดสอบกับเบราเซอร์
การกาหนดระยะห่างของรูป
1. คลิกเลือกรูปที่ต ้องการกาหนดระยะห่าง
2. ในหน้าต่าง Properties Inspector ในช่อง V
space พิมพ์ตัวเลขสาหรับกาหนดระยะห่างในแนวตั้ง และที่ช่อง H
space พิมพ์ตัวเลขสาหรับกาหนดระยะห่างในแนวนอน
1. รูปจะมีระยะห่างเปลี่ยนแปลงไปตามค่าที่กาหนด

7. การปรับความคมชัดให้กับภาพ
ในกรณีที่ภาพประกอบที่เตรียมไว้แทรกในเว็บเพจยังไม่คมชัดเท่าที่ควร และไม่ต ้องการ
เสียเวลาเข ้าไปปรับแต่งในโปรแกรมกราฟิก อีกทางเลือกหนึ่งคือการปรับแต่งความคมชั
ดของภาพจาก Properties Inspector ใน Dreamwever ได ้โดยตรง ดังนี้
1. คลิกภาพที่ต ้องการปรับความคมชัด
1. คลิกปุ่ม (Sharpen) ที่ Properties Inspector
1. คลิกเลื่อนเพื่อเลือกระดับความคมชัด ซึ่งดูภาพตัวอย่างผลลัพธ์ในภาพได ้

8. 4. เมื่อได ้ระดับความคมชัดแล ้ว คลิกปุ่ม OK ภาพที่ได ้จากการปรับความ
คมชัดจะปรากฏขึ้น
การปรับความสว่างให้กับภาพ
1. คลิกภาพที่ต ้องการปรับความสว่างและคอนทราสต์
1. คลิกปุ่ม (Brightness and Contrast) ที่ Properties Inspector
3. คลิกเลื่อนเพื่อเลือกระดับความสว่าง ซึ่งดูภาพตัวอย่างผลลัพธ์ในภาพไ
ด ้
4. คลิกเลื่อนเพื่อเลือกระดับคอนทราสต์
5. เมื่อได ้รับความสว่างและคอนทราสต์แล ้ว คลิกปุ่ม OK
6. ภาพที่ได ้จากการปรับความสว่างและคอนทราสต์จะปรากฏขึ้น
การใส่รูปภาพเป็ นฉากหลัง
1. คลิกที่ปุ่ม Page Properties หรือกดปุ่ม < Ctrl + J
> เพื่อเปิดหน้าต่าง Page Properties

9. 1. คลิกที่หัวข ้อ Appearance
2. คลิกที่ปุ่ม Browse
1. เลือกไฟล์รูปภาพที่ต ้องการนามาเป็นฉากหลัง
1. คลิกที่ปุ่ม OK
2. คลิกที่ปุ่ม OK ที่หน้าต่าง Page Properties อีกครั้ง