ใบความรู้ที่ 4

การนำภาพลงเว็บเพจ (Insert Image)

คุณคงได้เคยเห็นหลาย web ที่เขาแทรกภาพลง web ของแต่ละที่ ซึ่งภาพนี้มันจะทำให้ web ของเราดูมีชีวิตชีวามากขึ้น ในตอนแรกที่ผมได้แทรกภาพลงบน web สรุปแล้วว่าภาพมันไม่ปรากฎ มาบน web ดังนั้นหากว่าคุณต้องเป็นมือใหม ่คุณต้องทำความเข้าใจเกี่ยวกับเรื่องของการแทรกภาพลงบน web ให้ดีนะครับ ไม่ต้องไปตกใจว่ามันจะทำยากอะไรครับ มันไม่อยากหากครับ มันก็มีสิ่งที่คุณนั้นต้องจำอยุ่ประมาณ 1 - 2 อย่างเท่านั้นเองครับ เรามาเริ่มทำเลยครับ

หลังจากที่คุณนั้นได้สร้างภาพมาเรียบร้อยแล้ว

วิธีทำ

- เลือก  บน Object Panel (หรือ Insert > Image หรือ กด Ctrl+Alt+i)
- จะปรากฎ Dialog Box ขึ้นมาแล้วให้เรานั้นเลือกรูปที่ต้องการ

- หลังจากที่เลือกรูปที่ต้องการได้แล้วก็ click select แล้วก็จะมีรูปลงใน dreamweaver แล้วของ browser (กด F12 ) ดูสิครับว่ามีรูปที่คุณเลือกไว้ปรากฎไหม หากไม่ปรากฎรูปก็ลองอ่านตรงข้างล่างนี้ดูครับ

สาเหตุที่ภาพไม่ปรากฏ 1
- คุณได้ save file แล้วหรือยัง บางครั้งเมื่อไม่ได้ save ก็มีภาพปรากแต่บางครั้งอีกละครับก็ไม่มีภาพปรากฎ แต่ที่ภาพไม่ปรากฑส่วนมากนั้นก็คือ เราไป copy ภาพมาจาดที่อื่น แต่หากว่าคุณทำตามขั้นตอนที่ผมบอกนั้นก็จะมีภาพปรากฎ ครับ แนะนำเฉยๆ ครับตรงนี้
- หลังจากที่คุณได้ save flie แล้ว ปรากฎว่าเมื่อคุณมาเปิดดูภาพทาง Browser ไม่ได้ปรากฎภาพ อาจจะไปได้ว่า คุณนั้นได้ save file และ ภาพ ไว้ใน folder เดียวกัน หากต้องการให้ภาพนั้นปรากฎคุณต้องให้ ภาพ และ file ที่คุณ save นั้นไว้ใน folder ที่ย่อยลงมาอีก โดยการสร้าง new folder แล้วก็นำภาพไปเก็บไว้ใน new folder ที่คุณได้สร้างขึ้นไว้ แต่ว่า file ที่คุณสร้างขึ้นมานั้นต้องอยู่ใน folder หลัก พูดไปผมก็เริ่มงงงั้นมาดูรูปประกอบดีกว่าครับ

- สมมุติว่า file (1) นั้นคือ fileที่คุณได้ save เอาไว้ แต่ภาพของคุณนั้นได้เก็บไว้ที่ folder tx ครับ แล้วคุณลองแก้ไข file เดิมของคุณได้ใช้ dreamewaver ทำการแทรกภาพใหม่ตามขั้นตอนในนี้ใหม่ดูครับ รับรองว่าปรากฎภาพแน่นอนครับ หากมีตชมิอะไรก็ mail มาหาผมตาม mail ข้างล่างนี้ครับ
- อ้อลืมไปคุณสามารถดู code ของภาพคุณ นั้นได้จาก code ตัวนี้ครับ

ส่วนบนของฟอร์ม

ส่วนล่างของฟอร์ม

สาเหตุที่เรียกภาพขึ้นมาไม่ได้

 
สาเหตุที่ 1
สำหรับบทความนี้นั้นคนที่เริ่มสร้างเว็บใหม่ ๆ คงจะเคยเจอกับปัญหาที่ว่าทำไมทั้ง ๆ ที่เราใช้ Dreamweaver แทรกภาพในโปรแกรมนั้นก็ Show ภาพอยู่ แล้วเมื่อทำการกด F12 ดูเว็บเพจรูปภาพก็ปรากฎอยู่ แต่ว่าเมื่อนำไปขึ้นไว้บน Internet (Server) ของผู้ให้บริการ แล้วทำไมมันไม่ขึ้น
หากว่าเกิดจากสาเหตุนี้ก็เพราะว่า เราทำการเรียก URL ผิด ครับ การแก้ไขก็โดยการดู URL ของรูปภาพ ซึ่งสามารถทำได้ ดังนี้
1. คลิกขวาที่รูปภาพ แล้วเรียกคำสั่ง Properties ก็จะขึ้นมาแบบนี้ครับ

2. ตรงที่ผมนั้นทำ Highlight คือ ที่อยู่ของ URL ของรูปภาพเราให้เรานั้นทำการ copy URL ไปวางแทนที่อยู่ของรูปเดิม แล้วทำการ upload webpage นั้นใหม่อีกครั้ง ว่าได้หรือไม่ (แต่ว่าการทำแบบนี้เมื่อมาแสดงบนที่เครื่องของเรา ขณะที่เครื่องของเราไม่ได้จำลอง server รูปภาพจะไม่ขึ้น และเมื่อทำการ upload ขึ้น Internet แล้วขึ้นแสดงว่าตรงนี้ก็ไม่มีปัญหาแล้วนะครับ)

สาเหตุที่ 2
เกิดจากการที่เรานั้นมาเรียก file รูปภาพที่อยู่บนเครื่องของเรา (ดังรูปจะเป็นการเรียกรูปภาพ โดยเป็นที่อยู่ของครื่องเรา) เมื่อไปแสดงที่ Internet มันก็ย่อมไม่สามารถแสดงรูปภาพได้ครับ

ดังรูปเรานั้นเรียกที่อยู่ของรูปภาพที่ file:///D:/webmaster/dreamwaver/mx/view_database_files/live_data.png สมมุติว่า website ของคุณคือ http://www.pyayam.com แล้วมาเรียก ที่อยู่ของเว็บไซต์เป็น file:///D:/webmaster/dreamwaver/mx/view_database_files/live_data.png ตัวนี้ก็ย่อมไม่สามารถให้ภาพปรากฏมาได้
ผมขอยกตัวอย่างของ url ที่สามารถจะทำให้เรียกรูปภาพใแล้วปรากฏบน internet ได้ครับ คือ http://www.pyayam.com/live_data.png (ชื่อและนามสกุลของรูปภาพ) แบบนี้ค่อยมีโอกาสที่ภาพขึ้นได้ครับ
หากว่าเมื่อเราเรียกรูปภาพครั้งไหนก็เจอแต่ file:///D:/webmaster/dreamwaver/mx/view_database_files/live_data.png นี้ให้เรานั้นทำการ define site ก่อนนะครับ
สาเหตุที่ 3
เกิดจากการที่เรานั้นใส่นามสกุลของ รูปภาพผิด หากว่ารูปภาพนั้นนามสกุล .gif (ตัวเล็ก) แต่ว่าเรานั้นไปใส่เป็น .GIF (ตัวใหญ่) แบบนี้ก็ป็นสาเหตที่ทำให้ภาพไม่สามารถปรากฎได้เหมือนกันนะครับ
สาเหตุที่ 4
สาเหตุนี้ที่ผมนะอธิบายอาจจะเป็นเพราะว่า Server ของผู้ให้บริการป้องกันไว้ เช่น ของ Geocities.com หากว่าเว็บของเรานั้นคือ www.geocities.com/tanapolchk หากว่าเรานั้นต้องการที่จะแลกลิงค์ดกับคนอื่น แล้วไปนำภาพที่มาจาก www.geocities.com/pyayam แบบนี้ภาพก็ไม่สามารถแสดงได้นะครับ

การปรับเปลี่ยนคุณสมบัติของรูปภาพ

1. ใส่รูปภาพลงในเว็บเพจ
2. คลิกที่รูปเพื่อปรับเปลี่ยนคุณสมบัติเปิดหน้าต่าง Properties ขึ้นมา

            

ต้องการ จะใส่หรือไม่ใส่ก็ได้
เลข 2 , 3 W-H - ช่องกำหนดขนาดของรูปภาพ ใส่เลขขนาด ลงไปในช่อง W และ H ซึ่งมีหน่วยเป็น px ถ้าหากภาพมีขนาดพอดีก็ไม่ต้องแก้ไขอะไร เพราะจะทำให้ภาพแตก ดูไม่สวยงาม
เลข 4 Src  จะ เป็นที่อยู่ของรูปภาพ หากต้องการอ้างอิงจากเว็บไซต์อื่นก็ต้องเปลี่ยนที่อยู่ของภาพเป็น http://www.thai.net/dreamweaver4/images/logo001.gif
เลข 5 Link - จะกำหนดให้รูปภาพเป็นจุดลิงค์
เลข 6 Target - เลือกรูปแบบการแสดงผลของลิงค์
เลข 7 Align - สำหรับจัดตำแหน่งรูปภาพให้สัมพันธ์กับข้อความที่อยู่ใกล้กัน ซึ่งถ้าเราเลือกเป็น

ถ้าผมเลือกหมายเลข 1,2,5,8 (Broswer Default,Baseline,Bottom,Absolute Bottom) จะได้รูปแบบดังรูป 3.5.1

รูปที่ 3.5.1

ถ้าผมเลือกหมายเลข 3,6 (Top,TextTop) จะได้รูปแบบดังรูป 3.5.2

รูปที่ 3.5.2

    ถ้าผมเลือกหมายเลข 7 (Absolute Middle) จะได้รูปแบบดังรูป 3.5.4

    ถ้าผมเลือกหมายเลข 4 (Middle) จะได้รูปแบบดังรูป 3.5.3

                            

                                                        รูปที่ 3.5.3

รูปที่ 3.5.4

    ข้อความระวัง : รูปที่ 3.5.3 กับ 3.5.4 ตำแหน่งจะคล้าย ๆ กัน แต่รูปที่ 3.5.3 นั้นข้อความจะยังไม่อยู่กึ่งกลางของรูปภาพสักเท่าไหร่ แต่รูปที่ 3.5.4 ข้อความจะอยู่กึ่งกลางรูปภาพพอดี ดังนั้นต้องสังเกตให้ดี


ถ้าผมเลือกหมายเลข 9 (Left) จะได้รูปแบบดังรูป 3.5.5

ถ้าผมเลือกหมายเลข 10 (Right) จะได้รูปแบบดังรูป 3.5.6

รูปที่ 3.5.6

เลข 8 Alt - จะเป็นการใส่คำอธิบายให้กับรูปภาพ   <-- ลองเอาเมาส์มาวางบรูปซิครับ
เลข 9 Border - เป็นการใส่ขอบให้กับรูปภาพ ถ้าใส่เลข 0 ภาพจะไม่มีขอบ ถ้าใส่ตั้งแต่เลข 1 ขึ้นไป ขอบจะหนาเรื่อย ๆ ครับ
ตัวอย่าง

                           

 เมื่อใส่ค่า border=0    เมื่อใส่ค่า border=5

เลข 10 เป็นการจัดตำแหน่งของรูปภาพ

การทำ Rollover Image

หากว่าเว็บของเรามีแต่ข้อความก็ทำให้ไม่เป็นที่น่าสนใจเท่าไหร่ เมื่อนำภาพมาใส่ลงในเว็บก็ทำให้ เกิดความสวยงามขึ้นอีกในระดับหนึ่ง แต่ว่าเวลาที่เรานั้นต้องการที่จะทำ link จากภาพ แล้วเมื่อเอา mouse ไปวางไว้บนภาพแล้วจะทำให้ภาพเปลี่ยนไปเป็นภาพใหม่นั้น ก็ต้องทำให้เว็บของเรามีจุดเด่นเพิ่มขึ้น ซึ่งขั้นตอนการทำนั้นมี ดังต่อไปนี้ครับ
วิธีทำ
1. คลิกที่ Insert > Interactive Images > Rollover Image หรือคลิกที่ ซึ่งอยู่บนแท็บ Common ของ Object Panel (Ctrl+F2 = เรียก Object Panel) แล้วก๋จะปรากฏภาพ ดังนี้ครับ