การใส่รูป
เรื่อง :: วิธีการนำรูปภาพเข้ามาใช้งานใน 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

Pic.1

เมื่อ Click ไปแล้วจะปรากฏหน้าต่างใหม่ขึ้นมาเพื่อให้เราเลือกไฟล์รูปภาพที่จะนำเข้ามาใช้งานภายในเพจเรา ให้ท่านเลือกไฟล์ได้ตามต้องการ เมื่อเราเลือกไฟล์ได้แล้วก็ Clcik ที่ปุ่ม OK ของหน้าต่างนั้น

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

Pic.2
title

แต่ถ้าเป็นการเรียกใช้ไฟล์ภาพใน site ของเรา ก็จะไม่มี PopUp นี้เกิดขึ้นครับ

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

 

 

ให้ไปที่หน้าต่าง Properties ดูภาพ pic.3
Pic.3
Properties

ที่หน้าต่าง 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 จึงปรากฏกรอบรูปภาพขึ้นมา เป็นต้น

เป็นอันจบกระบวนการการนำรูปภาพมาใช้ใน webpage ครับ ลองทำดูครับ กำหนดนี้กำหนดนั้นไปเรื่อย ๆ จะได้เข้าใจมากขึ้นครับ...