การตกแต่งเว็บไซต์

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

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

 

แกดเจ็ตคืออะไร??? มาทำความรู้จักกับแกดเจ็ตกันดีกว่า

 

 

1. ในหน้าต่าง Text Editor ให้เลือกเครื่องมือ btnInsertImg (Insert/Edit Image) 

img02

 

 

2. จะปรากฏหน้าต่าง Insert/Edit Image ขึ้นมา ให้คลิกที่ปุ่ม btnBrowse (Browse) ที่อยู่หลังกล่องข้อความ Image URL

img03

 

 

3. จะปรากฏหน้าต่างสำหรับอัปโหลดไฟล์ขึ้นมา คลิกที่ "อัปโหลด" 

img04

 

 

4. เลือกไฟล์ที่ต้องการอัปโหลดจากเครื่องคอมพิวเตอร์ของคุณ แล้วกดปุ่ม "Open"

img05

 

 

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

img06

 

 

6. จะเห็นว่าจะมี URL ของรูปภาพปรากฏขึ้นมา ให้คลิกที่ปุ่ม btnInsert เพื่อทำการแทรกรูปภาพ และหน้าต่างนี้จะถูกปิดไป

 

img07

 

 

เราสามารถปรับขนาดของรูปภาพได้ที่เมนู "Appearance" ที่หัวข้อ Dimemsion ใส่ความสูงในช่องแรก และใส่ความสูงในช่องที่ 2 (ถ้าต้องการให้ภาพมีความกว้างและความสูงที่สมดุลกัน ก็ใส่เฉพาะความกว้างในช่องแรก และติ๊กเลือก Constrain Proportions ดังตัวอย่างภาพประกอบข้างล่างนี้)

img10

 

 

7. ที่หน้าต่าง Text Editor จะเห็นได้ว่าเราได้ทำการแทรกรูปภาพเข้ามาแล้ว เมื่อเราจัดการข้อมูลต่างๆ ตามที่ต้องการแล้ว ก็คลิกที่ปุ่ม btnSubmit

img08

 

 

 

 

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

img09