ทำเว็บไซต์จากแม่แบบฟรี 6 (โค๊ด html แทรกรูปภาพ)
<img src="images/prod2.gif"/> โค๊ดนี้ใช้สำหรับการแทรกรูปภาพภายในเว็บเพจ
<img src="โฟลเดอร์/ไฟล์รูปภาพ.gif"/> เดี๋ยวผมสาธิตการเปลี่ยนรูปภาพให้ดูนะครับ
โค๊ดที่เห็นในรูปที่ 6.1 ก็คือโค๊ดที่เราเขียนในหน้า html editor แล้วไปแสดงรูปภาพในหน้าเว็บเบราเซอร์ ดังรูปภาพที่ 6.2
การที่เราจะเปลี่ยนรูปภาพในเว็บเพจก็เพียงแค่ Copy รูปที่ต้องการ มาใส่ในโฟลเดอร์ images ของแฟ้มข้อมูลแม่แบบนั้น ตามรูปที่ 6.3 ผมจะทำการเปลี่ยนรูปภาพเพื่อเป็นแนวทางนะครับ
จากภาพที่ 6.3 ผมเข้าไปเลือกรูปที่ My Document ที่ผมเก็บเอาไว้
ในที่นี้ผมเลือกได้รูปแมวเล่นกับนกฮูก แล้วผมก็ Copy รูปภาพ
รูปที่ 6.4 แสดงถึงการนำภาพที่คัดลอกจาก My Document มาวางลงใน โฟลเดอร์ Images ภายในโปรแกรม eclipse
จากนั้นก็ทำการเปลี่ยนชื่อของรูปภาพเราลงไปแทน
นี่คือรูปภาพนกฮูกเล่นกับแมวที่ผมเลือก และที่ด้านล่างของรูปภาพให้เพื่อน ๆ สังเกต จะเป็นชื่อและนามสกุลของรูปภาพครับ
ให้เพื่อน ๆ ย้อนกลับไปดูโค๊ดเดิมที่รูปภาพ 6.1 ครับ แล้วกลับมาดูการเปลี่ยนแปลงของโค๊ดที่รูปภาพด้านล่าง
จากรูปที่ 6.5 ผมได้ทำการเปลี่ยนโค๊ด ชื่อและนามสกุลของรูปนกฮูกเล่นกับแมว ลงไปแทนที่ชื่อและนามสกุลของรูปภาพเดิมแล้ว จากนั้นกดปุ่ม Refresh ตรง Browser เพื่อดูการเปลี่ยนแปลง
รูปที่ 6.6 แสดงให้เห็นถึงรูปภาพเก่า และกดปุ่ม refresh เพื่อดูการเปลี่ยนแปลงหลังแก้ไขโค๊ด เมื่อกดปุ่ม refresh แล้วก็จะได้ตามรูปที่ 6.7
จากรูปที่ 6.7 แสดงการเปลี่ยนแปลงหลังเปลี่ยนโค๊ดแล้ว แต่อยากให้เพื่อน ๆ ดูรูปนี้ แล้วย้อนกลับไปสังเกตดูรูปที่ 6.2 อีกครั้ง จะเห็นว่า มันผิดเพี้ยนไปใช่มั๊ยครับ
นั้นสืบเนื่องมาจาก รูปภาพที่ผมเอามาเปลี่ยนลงไปแทนที่นี้ มันมีขนาดที่ใหญ่กว่าอันเดิม ซึ่งผมยังไม่ได้ทำการเปลี่ยนขนาดของรูปภาพ
เพราะฉนั้น ให้เพื่อน ๆ ใช้โปรแกรมแต่งภาพคู่ใจทำการย่อหรือขยายภาพให้มีขนาดเท่ากัน หรือใกล้เคียงกับขนาดรูปภาพที่มีอยู่เดิมเสียก่อน (หรือบางที่เราอาจจะทำให้ภาพใหญ่ขึ้นมากกว่าเดิม ดัดแปลงเป็นรูปแบบใหม่ไปเลยก็ได้ เพราะแม่แบบทุกแบบเราสามารถแก้ไขได้ตามความเหมาะสมของเราอยู่แล้ว)
<img src="โฟลเดอร์/ไฟล์รูปภาพ.gif"/> เดี๋ยวผมสาธิตการเปลี่ยนรูปภาพให้ดูนะครับ
 |
| รูปภาพที่ 6.1 โปรแกรม eclipse |
โค๊ดที่เห็นในรูปที่ 6.1 ก็คือโค๊ดที่เราเขียนในหน้า html editor แล้วไปแสดงรูปภาพในหน้าเว็บเบราเซอร์ ดังรูปภาพที่ 6.2
 |
| รูปภาพที่ 6.2 โปรแกรม eclipse |
การที่เราจะเปลี่ยนรูปภาพในเว็บเพจก็เพียงแค่ Copy รูปที่ต้องการ มาใส่ในโฟลเดอร์ images ของแฟ้มข้อมูลแม่แบบนั้น ตามรูปที่ 6.3 ผมจะทำการเปลี่ยนรูปภาพเพื่อเป็นแนวทางนะครับ
 |
| รูปภาพที่ 6.3 โปรแกรม eclipse |
จากภาพที่ 6.3 ผมเข้าไปเลือกรูปที่ My Document ที่ผมเก็บเอาไว้
ในที่นี้ผมเลือกได้รูปแมวเล่นกับนกฮูก แล้วผมก็ Copy รูปภาพ
 |
| รูปภาพที่ 6.4 โปรแกรม eclipse |
รูปที่ 6.4 แสดงถึงการนำภาพที่คัดลอกจาก My Document มาวางลงใน โฟลเดอร์ Images ภายในโปรแกรม eclipse
จากนั้นก็ทำการเปลี่ยนชื่อของรูปภาพเราลงไปแทน
 |
| catand.jpg |
นี่คือรูปภาพนกฮูกเล่นกับแมวที่ผมเลือก และที่ด้านล่างของรูปภาพให้เพื่อน ๆ สังเกต จะเป็นชื่อและนามสกุลของรูปภาพครับ
ให้เพื่อน ๆ ย้อนกลับไปดูโค๊ดเดิมที่รูปภาพ 6.1 ครับ แล้วกลับมาดูการเปลี่ยนแปลงของโค๊ดที่รูปภาพด้านล่าง
 |
| รูปภาพที่ 6.5 โปรแกรม eclipse |
จากรูปที่ 6.5 ผมได้ทำการเปลี่ยนโค๊ด ชื่อและนามสกุลของรูปนกฮูกเล่นกับแมว ลงไปแทนที่ชื่อและนามสกุลของรูปภาพเดิมแล้ว จากนั้นกดปุ่ม Refresh ตรง Browser เพื่อดูการเปลี่ยนแปลง
 |
| รูปภาพที่ 6.6 โปรแกรม eclipse |
รูปที่ 6.6 แสดงให้เห็นถึงรูปภาพเก่า และกดปุ่ม refresh เพื่อดูการเปลี่ยนแปลงหลังแก้ไขโค๊ด เมื่อกดปุ่ม refresh แล้วก็จะได้ตามรูปที่ 6.7
 |
| รูปภาพที่ 6.7 โปรแกรม eclipse |
จากรูปที่ 6.7 แสดงการเปลี่ยนแปลงหลังเปลี่ยนโค๊ดแล้ว แต่อยากให้เพื่อน ๆ ดูรูปนี้ แล้วย้อนกลับไปสังเกตดูรูปที่ 6.2 อีกครั้ง จะเห็นว่า มันผิดเพี้ยนไปใช่มั๊ยครับ
นั้นสืบเนื่องมาจาก รูปภาพที่ผมเอามาเปลี่ยนลงไปแทนที่นี้ มันมีขนาดที่ใหญ่กว่าอันเดิม ซึ่งผมยังไม่ได้ทำการเปลี่ยนขนาดของรูปภาพ
เพราะฉนั้น ให้เพื่อน ๆ ใช้โปรแกรมแต่งภาพคู่ใจทำการย่อหรือขยายภาพให้มีขนาดเท่ากัน หรือใกล้เคียงกับขนาดรูปภาพที่มีอยู่เดิมเสียก่อน (หรือบางที่เราอาจจะทำให้ภาพใหญ่ขึ้นมากกว่าเดิม ดัดแปลงเป็นรูปแบบใหม่ไปเลยก็ได้ เพราะแม่แบบทุกแบบเราสามารถแก้ไขได้ตามความเหมาะสมของเราอยู่แล้ว)
ความคิดเห็น
แสดงความคิดเห็น