วิธีการนำรูปภาพเข้ามาใช้งานใน webpage
การทำ webpage แน่นอนสิ่งหนึ่งที่จะขาดไม่ได้นอกจากตัวหนังสือแล้ว รูปภาพก็เป็น
สิ่งจำเป็น การจะนำไฟล์รูปภาพต่าง ๆ เข้ามาใช้งานภายใน webpage เราควรจะมีขอคำนึงถึงอยู่ 2 -3
ประการด้วยกัน คือ
1. ประเภทของไฟล์รูปภาพ ไฟล์รูปภาพนั้น เราควรจะใช้เป็นนามสกุล *.gif or *.jpg จึงจะ
เหมาะสมกับงานบน website
2. ขนาดของไฟล์รูปภาพ (ไม่ใช่ขนาดของรูปภาพ) ควรมีการ Optimize ก่อนการนำมาใช้งาน
3. ควรมีการใช้งานรูปภาพเท่าที่จำเป็น อย่าใส่ให้มากเกินไป
----- 3 ประก輚รนี้ให้เราพิจารณาตามความเหมาะสมกับงานเรา -----
เอาละเกริ่นเรื่องรูปภาพไปแล้วต่อมาก็มาเริ่มใช้ DW ในการ Insert รูปภาพกันเลยค่ะ ...
วิธีการใช้งานโปรแกรม
ให้เราไปที่หน้าต่าง Insert t หรือ Objec(.v.4) จากนั้นให้เรา Click เลือกไปที่ Image ของ TAB

Common ดังในภาพ Pic.1

เมื่อ Click ไปแล้วจะปรากฏหน้าต่างใหม่ขึ้นมาเพื่อให้เราเลือกไฟล์รูปภาพที่จะนำเข้ามาใช้งาน
ภายในเพจเรา ให้ท่านเลือกไฟล์ได้ตามต้องการ เมื่อเราเลือกไฟล์ได้แล้วก็ Clcik ที่ปุ่ม OK ของ
หน้าต่างนั้นในกรณีที่ท่านเลือกไฟล์จากต่าง Folder ของ website ที่ท่านทำงานอยู่ จะเกิด PopUp แจ้งเตือนท่านว่า ท่านต้องการ Copy ไฟล์รูปนั้นเข้ามาเก็บไว้ยังเว็บไซต์ของท่านหรือไม่ ตรงนี้ให้ Click ที่ OKเพื่อนำไฟล์มาใช้ใน website ของเรา ดังภาพ Pic.2 ค่ะ
Pic.2

แต่ถ้าเป็นการเรียกใช้ไฟล์ภาพใน site ของเรา ก็จะไม่มี PopUp นี้เกิดขึ้นค่ะ
เมื่อเราไก้ไฟล์รูปภาพเข้ามาใน webpage เราแล้ว ต่อมาให้เราทำการคลิ๊กเลือกที่รูปภาพนั้น (เมื่อ
เลือกที่ภาพจะมีเส้นล้อมกรอบปรากฏขึ้น) เพื่อทำการกำหนดค่าให้แก่รูปภาพนั้น ดังนี้ค่ะ...
ให้ไปที่หน้าต่าง Properties ดูภาพ pic.3
Pic.3

ที่หน้าต่าง Properties นี้เราสามารถกำหนดค่าต่าง ๆ ได้ดังนี้
- ช่องแรก จะเป็นการกำหนดชื่ออ้างอิงของไฟล์รูปภาพ
- W จะเป็นค่าความกว้างของรูปภาพ
- H จะเป็นค่าความสูงของรูปภาพ
ทั้ง W และ H เราสามารถกำหนดได้ 2 ลักษณะคือเป็นเปอร์เซ็นต์ (%) กับเป็น pixel โดยถ้าเราใส่เป็นค่าตัวเลขลงไปอย่างเดียวจะเป็นการกำหนดแบบ Pixel แต่ถ้าเราใส่เป็น 30% จะเป็นการกำหนด
แบบ เปอร์เซ็นต์
- Scr คือตำแหน่งของรูปภาพ
- Link ถ้าต้องการทำภาพนี้ให้มีการเชื่อมโยงกับไฟล์อื่นหรือเว็บอื่นก็กำหนดค่าตรงส่วนนี้ (จะ
กล่าวถึงการทำ link ต่อไป)
- Alt คือการกำหนด Title ของรูปภาพ เมื่อเวลาเอาเมาท์วางเหนือรูปภาพจะมี PopUp แสดงข้อความ
ออกมา
- V Space คือค่าความห่างระหว่างรูปภาพกับวัตถุอื่นทางด้านบนและล่างของรูป
- H Space คือค่าความห่างระหว่างรูปภาพกับวัตถุอื่นทางด้านขวาและซ้ายของรูป
- Border คือ ค่าความหนาของกรอบรูปภาพที่ต้องการ
- Align คือการกำหนดตำแหน่งของรูปภาพ
ตัวอย่างเช่น รูป Exam.1 ด้านขวามือนี้พี่กำหนด Align เป็น Right รูปภาพจึงมาอยู่ทางขวามือ และ
ข้อความจึงอยู่ทางซ้ายมือ และมีการกำหนดค่าของกรอบ(Border) เป็น 3 จึงปรากฏกรอบรูปภาพ
ขึ้นมา เป็นต้น