วิธีการนำรูปภาพเข้ามาใช้งานใน Web Page [Article ID : 103]

เรื่อง : การใส่รูปภาพให้กับ Web Page ด้วยโปรแกรม Dreamweaver

การจัดทำ Web Page แน่นอนสิ่งหนึ่งที่จะขาดไม่ได้นอกจากตัวหนังสือหรือข้อความแล้ว รูปภาพ (Images) ก็เป็นสิ่งจำเป็น เช่นเดียวกัน การที่จะนำไฟล์รูปภาพต่าง ๆ เข้ามาใช้งานภายใน Web Page นั้น เราควรจะมีข้อคำนึงถึงในเบื้องต้นอยู่ 2 -3 ประการด้วยกัน คือ
1. ประเภทของไฟล์รูปภาพ ไฟล์รูปภาพนั้น เราควรจะใช้เป็นนามสกุล *.gif or *.jpg or *.png จึงจะเหมาะสมกับงานบน Website
2. ขนาดของไฟล์รูปภาพ (ไม่ใช่ขนาดของรูปภาพ) ควรมีการ Optimize ก่อนการนำมาใช้งาน
3. ควรมีการใช้งานรูปภาพเท่าที่จำเป็น อย่าใส่ให้มากเกินไป เพราะจะทำให้เว็บเพจโหลดนานขึ้น
* 3 ประการนี้ให้เราพิจารณาตามความเหมาะสมกับงานของเรา

วิธีการใช้โปรแกรม Dreamweaver ในการ Insert Image

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

1. นำ Cursor ไปวางไว้ในตำแหน่งที่เราต้องการใส่รูปภาพให้ปรากฎบนเว็บเพจ
2. จากนั้นไปที่หน้าต่าง Insert เลือกที่ Image: Image ดังรูป 3. เมื่อคลิกตามข้อ 2 แล้ว โปรแกรมจะเปิดหน้าต่างขึ้นมาเพื่อให้เราเลือกไฟล์รูปภาพที่ต้องการ ให้เราทำการเลือกรูปภาพตามต้องการ ดังรูป เมื่อเลือกได้แล้ว กดที่ปุ่ม OK

4. โปรแกรมจะทำการใส่รูปภาพให้เรายังตำแหน่งที่ Cursor ที่เราวางไว้ตามข้อ 1 ดังรูป

ถ้าเป็นการเลือกไฟล์รูปภาพจากภายนอกไซต์

ในตัวอย่างข้างต้นเป็นการเลือกไฟล์รูปภาพที่ได้วางไว้ใน Folder เดียวกับไซต์งานของเรา ซึ่งจะสามารถเลือกรูปภาพมาใช้ได้โดยง่าย แต่ถ้าหากเราทำการเลือกไฟล์รูปภาพที่อยู่ภายนอกไซต์ หรือเป็นไฟล์ที่ไม่ได้อยู่ใน Folder เดียวกับเว็บไซต์ โปรแกรม Dreamweaver จะมีการแจ้งเตือนขึ้นมา ดังรูป ที่หน้าต่างแจ้งเตือนดังรูปนี้ เป็นการแจ้งให้เรา Copy ไฟล์รูปภายนอกเข้ามาไว้ภายในไซต์
ให้ทำการกดที่ปุ่ม Yes เท่านั้นครับ ห้ามกดที่ปุ่มอื่น เนื่องจาก ไฟล์รูปภาพจะเกิดปัญหาในการใช้งานได้ครับ ทำการกดปุ่ม Save เพื่อบันทึกไฟล์ลงไซต์ของเรา

การกำหนดคุณสมบัติของรูปภาพที่ Insert เข้ามา

หากต้องการกำหนดค่าคุณสมบัติต่าง ๆ ของรูปภาพ เช่น กำหนดค่าความกว้าง-สูง เราสามารถกำหนดค่าได้ที่หน้าต่าง Properties ดังนี้

1. เลือกที่รูปภาพที่ต้องการกำหนดคุณสมบัติ
2. จากนั้นไปที่ Properties Panel ทำการกำหนดคุณสมบัติตามต้องการ ดังรูป จากรูปข้างต้น มีการกำหนดคุณสมบัติของรูป ดังนี้
- ID : img1
- W : 80% *Width
- H : 80% *Height
ซึ่งเป็นการกำหนดคุณสมบัติเบื้องต้น

คลิปประกอบบทความ

*คลิกที่โลโก้ YouTube เพื่อเข้าดูที่ยูทูปนะครับ จะสามารถขยายจอดูได้

เนื้อหาบทความข้างต้น เป็นภาพรวมของการ Insert ไฟล์รูปภาพนำมาใช้งานกับเว็บเพจด้วยโปรแกรม Dreamweaver ซึ่งรายละเอียดปลีกย่อยต่าง ๆ นั้น ท่านลองศึกษาการใช้ด้วยตัวท่านเองได้ต่อไป และเว็บ DwThai.Com ก็จะค่อย ๆ มีบทความแนะนำการใช้งานต่อ ๆ ไปครับ คอยติดตามกันครับ.

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

การใส่เสียงเพลงประกอบเว็บเพจ หรือไฟล์ Audio ให้กับเว็บ (HTML5)

เรื่อง : วิธีการใส่เสียงเพลง (Audio) ประกอบหน้าเว็บด้วยโปรแกรม Dreamweaver CC บางครั้งเราอาจจะมีความต้องการดึงดูดผู้ที่เข้...  

การใช้ CSS กับโปรแกรม Dreamweaver CC

เรื่อง : สร้าง CSS ด้วยโปรแกรม Dreamweaver CC CSS ย่อมาจาก Cascading Style Sheets ...  

การสร้างจุด Link (Text Link)

การสร้าง Link ในแบบ Text Link Link หรือ ลิงค์ เป็นจุดเชื่อมโยงที่ปรากฎบนหน้าเว็บ เพื่อให้ผู้ใช้งานเว็บสามารถคลิกหรือกด...  

สร้างจุด Link ภายในเว็บเพจเดียวกัน (Named Anchor)

เรื่อง : การสร้างจุด Link ภายในเว็บเพจเดียวกันด้วย Dreamweaver Web Page เราสามารถกำหนดจุด หรือตำแห...