วิธีการนำรูปภาพเข้ามาใช้งานใน Web Page ด้วย Dreamweaver [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 บางครั้งเราอาจจะมีความต้องการดึงดูดผู้ที่เข้...  

การ Insert ไฟล์ Flash Video มาใช้กับเว็บ (FLV)

เรื่อง : การ Insert ไฟล์ Flash Video มาใช้งานกับเว็บเพจด้วย Dreamweaver Dreamweaver สามารถนำไฟล์ Media...  

การกำหนด Properties หรือคุณสมบัติของตาราง

เรื่อง : การกำหนดคุณสมบัติ หรือ Properties ให้แก่ตาราง (Table) ในบทก่อนได้กล่าวถึงการสร้างตารางไปแล้ว และได้อธิบายถึงกา...  

การสร้าง Form และ Input สำหรับกรอกข้อมูล

เรื่อง : การสร้าง Form และ Input เพื่อให้ผู้ใช้เว็บกรอกข้อมูลโดยใช้ Dreamweaver Form หรือ ฟอร...