บทที่ 3 ตกแต่งเว็บเพจด้วยรูปภาพ วิธีนำรูปภาพมาใส่ในเว็บ
1.คลิกวางเคอร์เวอร์ตรงบริเวณที่เราต้องการจะวาง
2.คลิกที่ปุ่มคำสั่ง Image
3. เลือกไฟล์ภาพที่ต้องการ
4.คลิกปุ่ม OK
5.มีข้อความเตือนให้ save ก่อน ให้คลิก OK
เมื่อเรานำรูปมาลงในหน้าจอการทำงานเรียบร้อยแล้ว เรายังสามารถที่จะปรับเปลี่ยนขนาดของรูปได้โดยการ
1.คลิกที่รูปที่ต้องการปรับขนาด
2.เลื่อนเมาส์บริเวณมุมของภาพเพื่อย่อ หรือขยายภาพตามต้องการ
3.รูปภาพถูกย่อขนาดลงแล้ว
ภาพที่อยู่ในเว็บไซต์ต่างๆ เมื่อเรานำกลับเมาส์ไปวางแล้วจะพบคำข้อความบนภาพนั้นๆออกมา มีวิธีการทำง่ายๆ ดังนี้
1.คลิกรูป ที่อยู่บนหน้าจอการทำงาน
2.ที่แถบ
ให้พิมพ์ข้อความลงไป
3.ทดสอบกับ Browser ดดยกด F12
การนำภาพมาใส่พื้นหลัง เป็นอีกวิธีหนึ่งในการตกแต่งเว็บเพจที่คนนิยมใช้กันมาก มีขั้นตอนทำง่าย ดังนี้
1.คลิกที่ปุ่ม

หรือกด Ctrl+J เพื่อเปิดหน้าต่าง Page Properties
2.คลิกที่ปุ่ม

ในช่อง Background Image
3.เลือกไฟล์รุปที่ต้องการ แล้วคลิกปุ่ม
4.คลิกปุ่ม

ที่หน้า Page Properties อีกครั้ง
5.ภาพที่เลือกไว้เปลี่ยนเป็นพื้นหลังเรียบร้องแล้ว
ในกรณีที่เราอยากจะให้รูปภาพเรามีกรอบด้วย ให้ทำดังนี้
1. คลิกที่รูป
2.ใส่ตัวเลขในช่อง

เพื่อกำหนดขนาดของกรอบ รูปที่ต้องการ
3.คลิกบริเวณที่ว่างของหน้าต่าง Document จะเห็นได้ว่ามีกรอบที่รูปภาพแล้ว
การปรับระยะห่างของรูปแบบละเอียด สามารถทำได้โดย
1.คลิกที่รูป
2.ใส่ตัวเลขในช่อง

เพื่อเพิ่มระยะห่างแนวตั้ง หรือช่อง

เพื่อเพิ่มระยะห่างแนวนอน
3.คลิกบริเวณที่ว่างของหน้าต่าง Document จะเห็นว่ามีระยะห่างของภาพมากขึ้น
การจัดวางตำแหน่งของรูปแบบทั่วไป จะคล้ายคลึงกับการจัดข้อความ ซึ่งมีวิธีการดังต่อไปนี้
1.คลิกที่รูป
2.ที่แถบคำสั่ง Picture Properties ให้เลือกคลิกปุ่ม

จัดวางไปทางซ้ายสุด

จัดวางไว้ตรงกลาง

จัดวางไว้ทางขวาสุด
ในบางครั้งที่เราต้องการจัดให้มีข้อความ แล้วมีรูปประกอบด้วย สามารถดังนี้
1.คลิกที่รูป
2.เลือกไปที่

จะมีลักษณะการจัดเรียงให้เลือกดังต่อไปนี้
-Default เป็นการจัดเรียงแบบอัตโนมัติ (ปกติ)
-Baseline จัดให้ขอบล่างของรูปอยู่แนวเดียวกับบรรทัดข้อความ
-Top จัดให้ขอบบนของรูปอยู่แนวเดียวกับบรรทัดข้อความ
-Middle จัดให้ตรงกลางของรูปอย่แนวเดียวกับข้อความ
-Bottom จัดให้ขอบล่างของรูปอยู่แนวเดียวกับบรรทัดของความ
-Text Top จัดให้ขอบล่างของรูปอยู่แนวเดียวกับบรรทัดข้อความ
-Absolute Middle จัดให้กึ่งกลางของรูปอยู่แนวเดียวกับส่วนกลางบรรทัดข้อความ
-Left จัดให้รูปภาพอยู่ซ้ายสุดของบรรทัดข้อความ
-Right จัดให้รูปภาพอยู่ขวาสุดของบรรทัดข้อความ
3.ภาพจะถูกจัดวางตมคำสั่ง ในตัวอย่างจะมีให้เลือกการจัดวางแบบ Left
ที่ผ่านมา เราได้ทดลองนำภาพมาทำเป็นพื้นหลังกันแล้ว คราวนี้เรามาทดลองตกแต่งภาพหลังให้มันดูเหนือขั้นกว่าที่เป็นบ้าง
1.วางเคอร์เซอร์ที่หน้าจอการทำงาน
2.คลิกที่ปุ่ม
หรือกด Ctrl+J
3. เลือกไปที่ Tracing Image
4.เลือกไฟล์ภาพที่ต้องการ โดยกดปุ่ม
5.ปรับแต่งค่าความโปร่งใส (Transparency) และค่าความมัว (Opaqute)
6.คลิกปุ่ม

หรือถ้าต้องการทดสอบดูก่อนให้กดปุ่ม Apply
ขอบคุณครับ ที่รับ ชม อัพครั้งต่อไป วัน ถัดไปครับ ขอบคุณครับ