การใส่รูปภาพในหน้าเว็บเบื้องต้น

เขียนโดย : พรหมมาศ แซ่ลั้ว
http://www.thaisolution.net

เมื่อเราสร้างหน้าเว็บใหม่ หรือแก้ไขหน้าเว็บเดิม แล้วต้องการใส่รูปภาพประกอบเนื้อหา สามารถทำได้ดังนี้ (ในการอธิบายนี้ใช้ JCE Editor และ Plugin ของ JCE Editor ชื่อ Image Manager Extended)

ให้กดที่ปุ่ม Insert/Edit image จากแถบเครื่องมือ จะแสดงหน้าต่างดังรูปด้านล่าง

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

List View เป็นปุ่มสำหรับเปลี่ยนมุมมองในการแสดงไฟล์รูปภาพ

New Folder เป็นปุ่มสำหรับสร้างโฟลเดอร์ เพื่อจัดเก็บรูปภาพ แบ่งเป็นส่วนย่อย ๆ เพื่อไม่ให้ภาพปะปนกัน

Upload เป็นปุ่มสำหรับเลือกภาพจากเครื่องของเราส่งขึ้นไปเก็บไว้เพื่อนำไปใส่ในเนื้อหาเว็บ

Help เป็นปุ่มสำหรับแสดงวิธีใช้งานเป็นภาษาอังกฤษ

Rename File เป็นปุ่มสำหรับเปลี่ยนชื่อไฟล์ หากไม่จำเป็นไม่ควรเปลี่ยนชื่อไฟล์ อาจทำให้ลิงค์ภาพผิดพลาดได้

Delete Files เป็นปุ่มสำหรับลบไฟล์ ใช้ลบไฟล์ที่เราไม่ต้องการ

Copy Files เป็นปุ่มสำหรับคัดลอกไฟล์ (ปุ่มนี้ไม่ได้ใช้)

Cut Files เป็นปุ่มสำหรับย้ายไฟล์ (ปุ่มนี้ไม่ได้ใช้)

View File เป็นปุ่มสำหรับเปิดดูไฟล์

Insert File เป็นปุ่มสำหรับแทรกไฟล์ไว้ในเนื้อหา (ปุ่มนี้ไม่ได้ใช้)

Transform Image เป็นปุ่มสำหรับปรับขนาดภาพ

Create Thumbnail เป็นปุ่มสำหรับสร้างภาพย่อ

ขั้นตอนการใส่รูปภาพในเนื้อหา

ก่อนอื่นให้คลิกในเนื้อหาตรงตำแหน่งที่ต้องการแทรกภาพ ให้มีเคอร์เซอร์กระพริบอยู่ แล้วกดปุ่ม Insert/Edit image

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

ในการ upload ภาพให้กดที่ปุ่ม Upload จะแสดงหน้าต่างดังรูปด้านล่าง

กด Add ไปเลือกไฟล์รูปภาพที่เราเตรียมไว้ในเครื่อง เราสามารถเลือกไฟล์มาไว้ในคิวได้หลาย ๆ ไฟล์ เมื่อเลือกไฟล์ไว้ในรายการคิวเสร็จแล้วกดปุ่ม Upload ตรงด้านล่าง รอจนครบ 100 % หรือเป็นสัญลักษณ์เครื่องหมายถูกสีเขียว เมื่อเสร็จแล้วแล้วกด Cancle หรือปิดหน้าต่างนี้ได้เลย

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

การจัดตำแหน่งรูปภาพ โดย เราสามารถจะจัดได้ 3 ตำแหน่งคือ ซ้าย กลาง และขวา ให้คลิกเลือกที่ภาพจะมีปุ่มรอบ ๆ รูปภาพ จากนั้นเลือกที่ปุ่ม Align left, Align center หรือ Align right เพื่อจัดตำแหน่งภาพ

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

การลบรูปภาพ ให้คลิกเลือกที่รูปภาพจนมีปุ่มรอบ ๆ รูปภาพ เสร็จแล้วกดปุ่ม Delete บนคีย์บอร์ด

การใส่เส้นขอบของรูปภาพ ให้คลิกเลือกที่ Border และกำหนดขนาด(Width) ลักษณะเส้น(Style) และสีของเส้นขอบ(Color) ดังรูปด้านล่าง