ใบความรู้ที่ 4
การนำภาพลงเว็บเพจ (Insert Image)
บทที่ 4
การนำภาพลงเว็บเพจ (Insert Image)
หลังจากที่คุณนั้นได้สร้างภาพมาเรียบร้อยแล้ว
สาเหตุที่ภาพไม่ปรากฏ 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
1. คลิกขวาที่รูปภาพ แล้วเรียกคำสั่ง Properties ก็จะขึ้นมาแบบนี้ครับ
2. ตรงที่ผมนั้นทำ Highlight คือ ที่อยู่ของ URL ของรูปภาพเราให้เรานั้นทำการ copy URL ไปวางแทนที่อยู่ของรูปเดิม แล้วทำการ upload webpage นั้นใหม่อีกครั้ง ว่าได้หรือไม่ (แต่ว่าการทำแบบนี้เมื่อมาแสดงบนที่เครื่องของเรา ขณะที่เครื่องของเราไม่ได้จำลอง server รูปภาพจะไม่ขึ้น และเมื่อทำการ upload ขึ้น Internet แล้วขึ้นแสดงว่าตรงนี้ก็ไม่มีปัญหาแล้วนะครับ)
สาเหตุที่ 2
ดังรูปเรานั้นเรียกที่อยู่ของรูปภาพที่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 ตัวนี้ก็ย่อมไม่สามารถให้ภาพปรากฏมาได้
สาเหตุที่ 3
สาเหตุที่ 4
การปรับเปลี่ยนคุณสมบัติของรูปภาพ
1. ใส่รูปภาพลงในเว็บเพจ
2. คลิกที่รูปเพื่อปรับเปลี่ยนคุณสมบัติเปิดหน้าต่าง Properties ขึ้นมา
เลข 1 Image - จะแสดงขนาดไฟล์ของรูปภาพนี้ ให้ ใส่ชื่อของรูปภาพ ลงไปในช่องตามต้องการ จะใส่หรือไม่ใส่ก็ได้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
ถ้าผมเลือกหมายเลข 4 (Middle) จะได้รูปแบบดังรูป 3.5.3
รูปที่ 3.5.3
ถ้าผมเลือกหมายเลข 7 (Absolute Middle) จะได้รูปแบบดังรูป 3.5.4
รูปที่ 3.5.4
ข้อความระวัง : รูปที่ 3.5.3 กับ 3.5.4 ตำแหน่งจะคล้าย ๆ กัน แต่รูปที่ 3.5.3 นั้นข้อความจะยังไม่อยู่กึ่งกลางของรูปภาพสักเท่าไหร่ แต่รูปที่ 3.5.4 ข้อความจะอยู่กึ่งกลางรูปภาพพอดี ดังนั้นต้องสังเกตให้ดี
ถ้าผมเลือกหมายเลข 9 (Left) จะได้รูปแบบดังรูป 3.5.5
ถ้าผมเลือกหมายเลข 9 (Left) จะได้รูปแบบดังรูป 3.5.5
รูปที่ 3.5.5
ถ้าผมเลือกหมายเลข 10 (Right) จะได้รูปแบบดังรูป 3.5.6
รูปที่ 3.5.6
เลข 9 Border - เป็นการใส่ขอบให้กับรูปภาพ ถ้าใส่เลข 0 ภาพจะไม่มีขอบ ถ้าใส่ตั้งแต่เลข 1 ขึ้นไป ขอบจะหนาเรื่อย ๆ ครับ
ตัวอย่าง
ตัวอย่าง
เมื่อใส่ค่า border=0 | เมื่อใส่ค่า border=5 |
เลข 10 เป็นการจัดตำแหน่งของรูปภาพ
การทำ Rollover Image 
วิธีทำ
1. คลิกที่ Insert > Interactive Images > Rollover Image หรือคลิกที่
ซึ่งอยู่บนแท็บ Common ของ Object Panel (Ctrl+F2 = เรียก Object Panel) แล้วก๋จะปรากฏภาพ ดังนี้ครับ
ซึ่งอยู่บนแท็บ Common ของ Object Panel (Ctrl+F2 = เรียก Object Panel) แล้วก๋จะปรากฏภาพ ดังนี้ครับImage Name : ชื่อของภาพ
Original Image : ภาพแรกที่จะแสดงบนเว็บเพจเมื่อยังไม่มีเมาส์มากระทำ
Rollover Image : เปลี่ยนเป็นภาพอื่นเมื่อนำเมาส์เหนือรูปภาพ
Alternate Text : ข้อความบรรยายภาพเมื่อเราเอา mouse วางเหนือภาพ
When Clicked To URL : URL หรือว่า Link ที่เรานั้นต้องการ
Original Image : ภาพแรกที่จะแสดงบนเว็บเพจเมื่อยังไม่มีเมาส์มากระทำ
Rollover Image : เปลี่ยนเป็นภาพอื่นเมื่อนำเมาส์เหนือรูปภาพ
Alternate Text : ข้อความบรรยายภาพเมื่อเราเอา mouse วางเหนือภาพ
When Clicked To URL : URL หรือว่า Link ที่เรานั้นต้องการ
หลังจากที่คุณนั้นได้สร้างภาพมาเรียบร้อยแล้ว
วิธีทำ
บน Object Panel (หรือ Insert > Image หรือ กด Ctrl+Alt+i)สาเหตุที่ภาพไม่ปรากฏ 1
- คุณได้ save file แล้วหรือยัง บางครั้งเมื่อไม่ได้ save ก็มีภาพปรากแต่บางครั้งอีกละครับก็ไม่มีภาพปรากฎ แต่ที่ภาพไม่ปรากฑส่วนมากนั้นก็คือ เราไป copy ภาพมาจาดที่อื่น แต่หากว่าคุณทำตามขั้นตอนที่ผมบอกนั้นก็จะมีภาพปรากฎ ครับ แนะนำเฉยๆ ครับตรงนี้
- หลังจากที่คุณได้ save flie แล้ว ปรากฎว่าเมื่อคุณมาเปิดดูภาพทาง Browser ไม่ได้ปรากฎภาพ อาจจะไปได้ว่า คุณนั้นได้ save file และ ภาพ ไว้ใน folder เดียวกัน หากต้องการให้ภาพนั้นปรากฎคุณต้องให้ ภาพ และ file ที่คุณ save นั้นไว้ใน folder ที่ย่อยลงมาอีก โดยการสร้าง new folder แล้วก็นำภาพไปเก็บไว้ใน new folder ที่คุณได้สร้างขึ้นไว้ แต่ว่า file ที่คุณสร้างขึ้นมานั้นต้องอยู่ใน folderหลัก พูดไปผมก็เริ่มงงงั้นมาดูรูปประกอบดีกว่าครับ
สาเหตุที่เรียกภาพขึ้นมาไม่ได้
สาเหตุที่ 1
1. คลิกขวาที่รูปภาพ แล้วเรียกคำสั่ง Properties ก็จะขึ้นมาแบบนี้ครับ
2. ตรงที่ผมนั้นทำ Highlight คือ ที่อยู่ของ URL ของรูปภาพเราให้เรานั้นทำการ copy URL ไปวางแทนที่อยู่ของรูปเดิม แล้วทำการ upload webpage นั้นใหม่อีกครั้ง ว่าได้หรือไม่ (แต่ว่าการทำแบบนี้เมื่อมาแสดงบนที่เครื่องของเรา ขณะที่เครื่องของเราไม่ได้จำลอง server รูปภาพจะไม่ขึ้น และเมื่อทำการ upload ขึ้น Internet แล้วขึ้นแสดงว่าตรงนี้ก็ไม่มีปัญหาแล้วนะครับ)
สาเหตุที่ 2
ดังรูปเรานั้นเรียกที่อยู่ของรูปภาพที่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 ตัวนี้ก็ย่อมไม่สามารถให้ภาพปรากฏมาได้
สาเหตุที่ 3
สาเหตุที่ 4
การปรับเปลี่ยนคุณสมบัติของรูปภาพ
1. ใส่รูปภาพลงในเว็บเพจ
2. คลิกที่รูปเพื่อปรับเปลี่ยนคุณสมบัติเปิดหน้าต่าง Properties ขึ้นมา
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 - สำหรับจัดตำแหน่งรูปภาพให้สัมพันธ์กับข้อความที่อยู่ใกล้กัน ซึ่งถ้าเราเลือกเป็น
เลข 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.3 กับ 3.5.4 ตำแหน่งจะคล้าย ๆ กัน แต่รูปที่ 3.5.3 นั้นข้อความจะยังไม่อยู่กึ่งกลางของรูปภาพสักเท่าไหร่ แต่รูปที่ 3.5.4 ข้อความจะอยู่กึ่งกลางรูปภาพพอดี ดังนั้นต้องสังเกตให้ดี
ถ้าผมเลือกหมายเลข 9 (Left) จะได้รูปแบบดังรูป 3.5.5
หากว่าเว็บของเรามีแต่ข้อความก็ทำให้ไม่เป็นที่น่าสนใจเท่าไหร่ เมื่อนำภาพมาใส่ลงในเว็บก็ทำให้ เกิดความสวยงามขึ้นอีกในระดับหนึ่ง แต่ว่าเวลาที่เรานั้นต้องการที่จะทำ link จากภาพ แล้วเมื่อเอาmouse ไปวางไว้บนภาพแล้วจะทำให้ภาพเปลี่ยนไปเป็นภาพใหม่นั้น ก็ต้องทำให้เว็บของเรามีจุดเด่นเพิ่มขึ้น ซึ่งขั้นตอนการทำนั้นมี ดังต่อไปนี้ครับ
วิธีทำ
1. คลิกที่ Insert > Interactive Images > Rollover Image หรือคลิกที่ ซึ่งอยู่บนแท็บ Common ของObject Panel (Ctrl+F2 = เรียก Object Panel) แล้วก๋จะปรากฏภาพ ดังนี้ครับ
รูปที่ 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 ขึ้นไป ขอบจะหนาเรื่อย ๆ ครับ
ตัวอย่าง
เลข 9 Border - เป็นการใส่ขอบให้กับรูปภาพ ถ้าใส่เลข 0 ภาพจะไม่มีขอบ ถ้าใส่ตั้งแต่เลข1 ขึ้นไป ขอบจะหนาเรื่อย ๆ ครับ
ตัวอย่าง
เมื่อใส่ค่า border=0 เมื่อใส่ค่า border=5
เลข 10 เป็นการจัดตำแหน่งของรูปภาพ
การทำ Rollover Image
วิธีทำ


























ไม่มีความคิดเห็น:
แสดงความคิดเห็น