การเตรียมรูปภาพสำหรับใช้ในเว็บเพจ
รูปภาพนับว่าเป็นสิ่งสำคัญอย่างมากในการสร้างเว็บเพจ ทำให้ผู้อ่านเข้าใจเรื่องราวที่นำเสนอมากยิ่งขึ้น และช่วยให้เว็บเพจมีสีสันสวยงาม สิ่งที่จะต้องคำนึงถึง คือ ภาพควรจะต้องมีขนาดเล็ก เพื่อนำไปเรียกใช้บนเว็บเพจได้อย่างรวดเร็ว เช่น GIF, JPEG และ PNG เพราะแต่ละแบบมีลักษณะการบีบอัดข้อมูลและสามารถเลือกใช้ตามความเหมาะสม
การนำภาพกราฟิกมาใช้ในเว็บเพจนิยมใช้ภาพ 3 ฟอร์แมต (นามสกุล) คือ .gif , .jpg และ .png ซึ่งมีรายละเอียดของภาพแต่ละชนิด ดังนี้
1. ไฟล์ GIF (Graphics Interchange Format)
จะเป็นไฟล์ที่มีนามสกุล .gif เป็นไฟล์ชนิด บิตแมบ (Bitmap) 8 บิตสี สามารถแสดงค่าสีสูงสุดได้ 256 สีเท่านั้น เป็นไฟล์แบบบีบย่อขนาด ใช้แสดงผลภาพประเภทกราฟิกที่มีสีสันไม่มาก ภาพการ์ตูน หรือภาพชนิดเคลื่อนไหวที่มีความละเอียดไม่มากนัก
2. ไฟล์ JPEG หรือ JPG (Joint Photographic Experts Group)
จะเป็นไฟล์ที่มีนามสกุล .jpeg หรือ .jpg เป็นไฟล์ที่พัฒนาเพื่อใช้งานกับภาพที่มีสีสันสดใสและความละเอียดสูงสามารถเก็บภาพได้ 24 บิตสี สามารถแสดงสีได้ถึง 16.7 ล้านสี สำหรับการแสดงผลในเว็บเพจ ไฟล์ jpg เหมาะสำหรับไฟล์ประเภทภาพถ่ายที่มีสีสันมาก
3. ไฟล์ PNG (Portable Network Graphic)
จะเป็นไฟล์ที่มีนามสกุล .png เป็นไฟล์ที่พัฒนาขึ้นมาโดยนาเอาคุณสมบัติที่ดีเด่นของไฟล์ GIF และ JPG มารวมกัน กล่าวคือ สนับสนุนจานวนบิตสีได้ถึง 24 บิต เหมือนกับภาพแบบ JPG ในขณะที่การบีบอัดไฟล์ใช้การทางานแบบ GIF การแสดงผลในแบบ Interlace และยังสามารถทำภาพโปร่งใสได้
การใส่รูปภาพลงในเว็บเพจ
ก่อนนำรูปภาพมาใส่ในเว็บเพจ ควรเตรียมไฟล์รูปภาพที่จะใช้ก่อนโดยนาไฟล์รูปภาพที่เตรียมไว้ มารวมไว้ในโฟลเดอร์ที่เก็บรูปภาพเพื่อความสะดวกในการใช้งาน เช่นนารูปภาพมาไว้ในโฟลเดอร์ images ซึ่งอยู่ในไซต์ MySite
1. คลิกวางเคอร์เซอร์ตรงตำแหน่งที่ต้องการวางรูปภาพ
2. คลิกที่เมนู Insert แล้วเลือก Image
3. หรือ คลิกที่แถบ Insert ให้เลือก Common
4. คลิกแล้วเลือก Image
5. เลือกโฟลเดอร์ที่เก็บรูปภาพ
6. เลือกรูปภาพ ซึ่งจะแสดงภาพตัวอย่างด้านขวามือ
7. คลิกปุ่ม OK
8. ใส่คำอธิบายรูปภาพ (ไม่ใส่ก็ได้)
9. คลิกปุ่ม OK
10. รูปภาพที่เลือกจะถูกนำมาแสดงในเว็บเพจ และจัดเก็บไฟล์รูปภาพในโฟลเดอร์ที่ใช้ในเว็บไซต์ ดังรูป
การจัดตำแหน่งของรูปภาพ
รูปภาพที่ใส่ในเว็บเพจสามารถจัดตำแหน่งให้อยู่ชิดซ้าย กึ่งกลาง หรือชิดขวา ได้ตามต้องการ
1. คลิกเมาส์ที่รูปภาพ
2. คลิกเมนู Format
3. เลือกคำสั่ง Align
4. คลิกเลือกการจัดตำแหน่งของรูปภาพตามต้องการ
การกำหนดคุณสมบัติของรูปภาพ สามารถปรับรายละเอียดได้ที่ Properties Inspector
| 1. คลิกเลือกรูปภาพที่ต้องการ | 8. เปิด/แก้ไขรูปภาพด้วยโปรแกรมอื่น |
| 2. ใส่ชื่อของรูปภาพ | 9. ปรับลดความละเอียดของรูปภาพ |
| 3. แหล่งที่เก็บรูปภาพ | 10. อัพเดตรูปภาพ (กรณีไม่แสดงภาพตามต้นฉบับ เฉพาะไฟล์ .PSD) |
| 4. คำอธิบายรูปภาพ | 11. ตัดรูปภาพ |
| 5. ความสูง (H) ของรูปภาพ | 12. ปรับขนาดของรูปภาพ |
| 6. ความกว้าง (W) ของรูปภาพ | 13. ปรับค่าสี/แสงของรูปภาพ |
| 7. ไฮเปอร์ลิงค์ของรูปภาพ | 14. ปรับความคมชัดของรูปภาพ |
การปรับแต่งคุณสมบัติของรูปภาพ
การปรับขนาดของรูปภาพ
1. คลิกเมาส์ที่รูปภาพ
2. ที่พาเนล Properties กำหนดความกว้าง (W) และความสูง (H) ของรูปภาพ
3. จะได้ขนาดของภาพตามต้องการ
การตัดขอบภาพ (Crop)
ภาพที่นำมาใช้ในเว็บเพจสามารถตัดขอบภาพบางส่วนที่ไม่ต้องการออกไป ให้เหลือเฉพาะส่วนที่ต้องการได้
1. คลิกเมาส์ที่รูปภาพ
2. ที่พาเนล Properties คลิกปุ่ม Crop
3. ที่จุดแฮนเดิล คลิกลากเพื่อตัดขอบรูปตามต้องการ
4. กดแป้น Enter จะได้ขนาดภาพตามต้องการ
การจัดตำแหน่งของภาพให้เข้ากับข้อความ
1. คลิกเมาส์ขวาที่รูปภาพ
2. คลิกเลือกปุ่ม Align
3. คลิกเลือกการจัดตำแหน่งของภาพตามต้องการ
การจัดตำแหน่งของภาพให้เข้ากับข้อความมีรูปแบบดังนี้
– Browser Default การแสดงผลจะขึ้นอยู่กับบราวเซอร์ (ปกติจะเป็นแบบ Baseline)
– Baseline และ Bottom จัดขอบล่างของภาพตรงกับแนว Baseline ของตัวอักษร
– Top จัดขอบบนของภาพให้อยู่ในแนวเดียวกับส่วนบนสุดของตัวอักษร
– Middle จัดแนวกึ่งกลางของภาพให้อยู่แนวเดียวกับเส้นฐานของตัวอักษร
– Text Top จัดขอบบนของภาพตรงกับส่วนบนสุดของตัวอักษร
– Absolute Middle จัดแนวกึ่งกลางของภาพให้อยู่แนวเดียวกับกึ่งกลางบรรทัด
– Absolute Bottom จัดขอบล่างของภาพให้อยู่ในแนวล่างสุดของบรรทัด
– Left จัดภาพไว้ด้านซ้ายสุดของข้อความ
– Right จัดภาพไว้ด้านขวาสุดของข้อความ
การปรับความสว่างและคอนทราสต์ของภาพ (Brightness and Contras)
1. คลิกเมาส์ที่รูปภาพ
2. ที่พาเนล Properties คลิกปุ่ม Brightnes and Contras
3. ปรับ Brightness และContras ตามต้องการ
4. คลิกปุ่ม OK
5. จะได้ความสว่างและคอนทราสต์ของภาพตามต้องการ
การปรับความคมชัดของภาพ
1. คลิกเมาส์ที่รูปภาพ
2. ที่พาเนล Properties คลิกปุ่ม 
Sharpen
3. ปรับความคมชัดตามต้องการ
4. คลิกปุ่ม OK
5. จะได้ความคมชัดของภาพตามต้องการ
การใส่ภาพเป็นฉากหลังเว็บเพจ
1. ที่ Panel Properties คลิก Page Properties
2. ที่ Category คลิก Appearance
3. ที่ Background image คลิกปุ่ม Browse…
4. คลิกภาพที่ต้องการ
5. คลิกปุ่ม OK
6. จะได้ภาพฉากหลังเว็บเพจตามต้องการ
อ้างอิง : https://sites.google.com/site/dreamweavercs6byjatuporn/kar-prab-taeng-khunsmbati-khxng-rupphaph
