การใส่รูป และการจัดตำแหน่งของรูป

Dreamweaver

    ในหัวข้อนี้จะไม่พูดถึงเรื่องพื้นฐาน ผู้ที่อ่านหัวข้อนี้ควรผ่านหัวข้อพื้นฐานมาแล้ว หรือเคยใช้ Dreamweaver มาก่อนมิเช่นนั้นอาจข้ามขั้นตอนสำคัญต่างๆในหัวข้อพื้นฐานได้

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

** หมายเหตุ ** อย่าลืมว่าไฟล์รูปที่นำมาใช้นั้นต้องอยู่ใน local root folder เท่านั้น

การใส่รูปในเว็บเพจนั้นทำได้หลายวิธี ดังนี้

    1.ลากรูปลงไปใน document window ได้ทันที โปรแกรมจะทำการ save รูปไว้ใน default images folder ให้เอง

    2.ไปที่ file panel ด้านขวามือแล้วลากไฟล์จากใน panel ไปที่ document window ได้เลย



    3.คลิกพื้นที่ใน document window ที่คุณต้องการแทรกรูปลงไป จากนั้นไปที่ Insert Bar หา icon ดังรูปด้านล่าง เมื่อคลิกก็จะมีหน้าต่างขึ้นมาให้เลือกรูป แค่นี้ก็สามารถใส่ภาพในเว็บเพจได้แล้ว



ไม่ว่าเราจะแทรกรูปด้วยวิธีไหนก็ตาม จะมีหน้าต่างดังภาพด้านล่าง สำหรับใส่ Alternate Text ซึ่งเอาไว้สำหรับเป็นคำบรรยายภาพ จะแสดงแทนภาพเมื่อภาพที่เรากำหนดโหลดขึ้นมาแสดงไม่ได้ หรือสำหรับ ie จะแสดงเมื่อมีเมาส์ไปอยู่เหนือ ถ้าเราเขียนคำบรรยายไว้ในไฟล์อื่นก็สามารถทำลิงค์ไปหาได้โดยเลือกจากหัวข้อ long description



** หมายเหตุ ** อย่าลืมว่าเว็บเพจที่เราต้องการจะใส่รูปลงไปนั้นต้องทำการ save ให้อยู่ใน Local root folder ก่อน มิฉนั้นจะเกิดข้อผิดพลาดในการใส่รูปได้

การจัดตำแหน่งรูปในเว็บเพจ

    เรื่องของการจัดตำแหน่งของรูปหรือข้อความต่างๆ จริงๆแล้วใช้ CSS จะทำงานได้ดีกว่าและเกิดปัญหาน้อยกว่า แนะนำให้อ่านหัวข้อ CSS , CSS layout ใน Dreamweaver จะทำให้การทำเว็บไซต์ง่ายและสนุกยิ่งขึ้น

การจัดตำแหน่งรูปให้เข้ากึ่งกลางเว็บเพจ

    1.เลือกรูปที่ต้องการจัด จากนั้นไปที่ Property inspector

    2.คลิกที่รูปเครื่องมือจัดเข้ากึ่งกลางดังรูปด้านล่าง



    การจัดโดยใช้ Align drop-down ด้านล่าง ให้ผลที่แตกต่างกัน เพราะมีการใช้ code <p> tag ในการจัดรูปแบบทำให้ไม่สามารถจัดรูปได้ ในการจัดตำแหน่งของรูปควรใช้ CSS ในการจัดเพราะจะทำให้ได้ผลลัพธ์ที่ถูกต้องกว่า

การจัดตำแหน่งรูปให้อยู่ในเนื้อหา

    การแทรกรูปให้อยู่ในเนื้อหา โดยจัดให้รูปอยู่ทางซ้ายมือของเนื้อหา สามารถทำได้ดังนี้

    1.พิมพ์เนื้อหาให้เรียบร้อย จากนั้นคลิกที่ จากนั้นคลิกตำแหน่งที่ต้องการจะแทรกรูป

    2.เมื่อเลือกตำแหน่งที่ต้องการจะวางรูปได้แล้ว ให้ทำการแทรกรูปโดยไปที่ Insert > image หรือไปที่ Insert bar คลิกที่ไอคอนดังรูปด้านล่าง



    3.ในรูปตัวอย่างด้านล่างทำการแทรกรูปที่บรรทัดแรกของข้อความ



    4.ไปที่ Align drop-down เลือก left ดังรูปด้านล่าง เราสามารถปรับให้ตัวอักษรอยู่ห่างจากรูปได้โดยกรอกค่าที่ V space เป็นระยะห่างในแนวบนล่าง และ H space เป็นระยะห่างซ้ายและขวา



การจัดชิดขวา ก็สามารถทำได้โดยในขั้นตอน Align drop-down ให้เลือก right ก็สามารถจัดรูปให้ชิดขวาได้แล้ว

การจัดตำแหน่งรูปในบทความนี้นั้น ในการทำเว็บเพจจริงๆนั้นเราจะไม่ใช้วิธีนี้ เพราะจะทำให้การแสดงผลไม่ถูกต้อง แต่จะจัดโดยใช้ตาราง หรือ CSS layout แทน แต่ในบทความนี้นำเสนอเพื่อให้ทราบถึงเครื่องมือ align เท่านั้น