ใส่รูปภาพในเว็บเพจ (พื้นฐาน)

Dreamweaver

    จากบทความเรื่องการกำหนด site เราได้กำหนด local root folder ไว้เพื่อเก็บไฟล์ทั้งหมด และกำหนด default images folder สำหรับเก็บไฟล์รูปไว้ด้วย ซึ่งตามที่แนะนำไว้คือ เราจะนิยมสร้าง folder ชื่อ images ไว้ใน local root folder เพื่อเอาไว้เก็บรูป

** หมายเหตุ ** อย่าลืมว่าไฟล์รูปที่นำมาใช้นั้นต้องอยู่ใน 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

เครื่องมือที่ใช้ปรับแต่งภาพ

เมื่อเราคลิกที่ภาพ ที่ Property inspector จะปรากฏตัวเลือกที่ใช้ในการปรับแต่งภาพ ดังรูปด้านล่าง จากรูปได้ปรับคุณสมบัติของรูปให้ชิดซ้าย และปรับให้มีช่องว่างระหว่างภาพและตัวหนังสือ เท่ากับ 10 pixel

รายละเอียด Property inspector เมื่อเลือกที่รูป

1.Image Name (Name) กำหนดชื่อให้กับรูป ใช่สำหรับเมื่อเราเขียน script อ้างอิงรูป

2.W (Width) กำหนดความยาวของรูปที่ต้องการให้แสดงผล โดยไม่มีผลกับไฟล์รูปเดิม

3.H (Height) กำหนดความสูงของรูปที่ต้องการให้แสดงผล โดยไม่มีผลกับไฟล์รูปเดิม

4.Src (Source) บอก folder ที่ใช้เก็บไฟล์รูปที่เราเลือก

5.Link (Hyperlink) ใช้กำหนด hyperlink ของรูป

6.Alt (Alternate Text) คำบรรยายรูปจะปรากฏก็ต่อเมื่อรูปไม่แสดงผล และนำเมาส์ไปอยู่เหนือรูป (ie)

7.Edit ประกอบด้วยเครื่องมือเหล่านี้ เครื่องมือของ dreamweaver จะทำการแก้ไขที่ไฟล์รูปโดยตรง

         7.1 Fireworks แก้ไขรูปด้วย โปรแกรม Fireworks

         7.2 Optimize แก้ไขขนาดไฟล์ของรูป

         7.3 Crop ใช้ตัดรูปให้ได้ขนาดที่ต้องการ

         7.4 Brightness and Contrast ปรับความสว่างของรูป

         7.5 Sharpen ใช้แก้ไขความคมชัดของรูป

8.V Space (Vertical Space) กำหนดระยะห่างระหว่างรูปกับวัตถุอื่น ในส่วน บนและล่างของรูป

9.H Space (Horizontal Space) กำหนดระยะห่างระหว่างรูปกับวัตถุอื่น ในส่วน ซ้ายและขวาของรูป

10.Low Src (Low Source) ในกรณีที่รูปของเราไฟล์ใหญ่มากต้องใช้เวลาโหลดนาน เราอาจกำหนดให้มีรูปที่ขนาดเล็กๆ รูปอื่นโหลดขึ้นมาก่อน โดยใช้ตัวเลือกนี้

11.Border (Image Border) ใช้กำหนดขนาดของขอบรูป

12.Align (Alignment) ใช้กำหนดตำแหน่งของรูปเช่น ชิดซ้าย ขวา บน ล่าง

13.Class (CSS Setting) ถ้าเราเขียน CSS เอาไว้ตัวเลือกนี้จะใช้กำหนด CSS ที่เราเขียนไว้

14.Map (Map Name) ใช้กำหนดชื่อให้กับ Map image จะกล่าวถึงในบทอื่น

15.Hot spot tool (Name) เป็นเครื่องมือที่ใช้ร่วมกับ Map Name จะกล่าวถึงในบทอื่น

16.Target (Name) กำหนดตัวเลือกของหน้าที่จะเปิด link จะกล่าวถึงในบทอื่น

หลายคนคงสงสัยว่า การเปลี่ยนขนาดรูปด้วยการกำหนด W,H (width,height) ต่างกับการใช้คำสั่ง Edit อย่างไร คำตอบคือ

     ถ้าเรากำหนดด้วย W,H จะไม่เปลี่ยนขนาดของรูปจริง แต่จะมีผลต่อการแสดงผลใน browser เท่านั้น ซึ่งในความจริงแล้วเราจะไม่นิยมแก้ไขขนาดของรูปด้วยวิธีนี้ เพราะนอกจากจะมีผลต่อความคมชัดของรูปแล้ว อาจทำให้สัดส่วนของรูปผิดไปได้

    การแก้ไขด้วยคำสั่ง Edit จะแก้ไขที่ไฟล์รูปโดยตรงทำให้การแสดงผลตรงตามที่เราแก้ไข

    ในบทความนี้เป็นเพียงพื้นฐานการใส่รูปในเว็บเพจ คุณสามารถศึกษารายละเอียดโดยเลือกหัวข้อ "ใส่ภาพในเว็บเพจ " จากเมนูหัวข้อทางขวามือ