ใบความรู้ที่ 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 ขึ้นมา

เลข 1 Image - จะแสดงขนาดไฟล์ของรูปภาพนี้ ให้ ใส่ชื่อของรูปภาพ ลงไปในช่องตามต้องการ จะใส่หรือไม่ใส่ก็ได้
เลข 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

รูปที่ 3.5.5

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

รูปที่ 3.5.6

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

การใช้งานตัวอักษร (Text or Font)

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

การพิมพ์ตัวอักษร
การพิมพ์ตัวอักษรใน Dreamweaver เหมือนกับการใช้ Microsoft Word หากเคยใช้มาบ้างก็จะเป็นการง่ายในการ ทำความเข้าใจ

การพิมพ์ข้อความ
สามารถพิมพ์เข้าไปในหน้า Document ได้เลย และลอง Preview ดูโดยการกด F12 ( เป็นการจำลอง Browser ) เราจะเห็นได้ว่า ตัวอักษรที่พิมพ์จะเหมือนกันกับที่ Preview ทุกประการ นอกจากนั้นยังมีคุณสมบัติพิเศษที่สามารถปรับแต่งได้ โดยการใช้ Property Inspector

วิธีใช้
- Format เป็นรูปแบบของอักษรสามารถเลือกได้ตามต้องการ

- Paragraph

- Size

-

ตัวเสริม (สำหรับ Dreamweaver MX)

- การจัดให้ ชิดซ้าย ชิดขวา หรือกึ่งกลาง ( เหมือน Word ทุกประการ ) ตัวสุดท้ายเป็นการจัดให้ขอบตัวอักษรทางด้านซ้าย - ขวา เท่ากัน (justify)

- การใช้หัวข้อย่อย จะเป็นจุดหรือตัวเลขก็ได้

- เปลี่ยนสีตัวอักษร Click ที่ช่องสี่เหลี่ยมจะมีจานสีให้เลือก (สีไม่ชัดเท่าไหร่ เพราะผมกลัวว่าหากสีชัด จะทำให้ load หน้าเว็บเพจนาน)

Tip & Trick                   
เนื่องจากการพิมพ์ไม่สามารถเว้นวรรคตัวอักษรได้เกินหนึ่งตัวอักษร ทำให้การจัดรูปแบบการย่อหน้า ไม่สามารถทำได้

- การขึ้นบรรทัดใหม่โดยการกด Enter ในโปรแกรมจะเป็นการเว้น 2 บรรทัด

- ถ้าหากต้องการเว้นหนึ่งบรรทัดสามารถทำได้โดยการใช้ Character ในหัวข้อ BR ( Line Break ) หรือกด Shitf ค้างพร้อมทั้งกด Enter

-

Websafe color
คือ สีที่ใช้ในการสร้างเวบเพจ HTML ซึ่งเป็นสีที่ถูกระบุเป็นรหัสเลขฐานสิบหก หรือ Hexadecimal value เช่น #FF0000 หรือชื่อสีธรรมดาเช่น RED ตามปกติสีที่ใช่ใน Netscape และ Internet explorer เมื่อใช้ค่าสีใน 256 สี จะเรียกได้ว่าเป็น ค่าสีที่ปลอดภัย ( สามารถดูได้ทุกเครื่องทุกระบบโดยสีไม่ผิดเพี้ยน ) ซึ่งจริงๆ แล้วสีที่ใช้ได้มีเพียงแค่ 212 สีเท่านั้นเอง

การจัดรูปแบบอักษร

เครื่องมือในหมวด Characters

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

Format การจัดรูปแบบตัวอักษร
การจัดรูปแบบตัวอักษรหรือเรียกว่า Format ใน Dreamwearver มีการใช้คำสั่งเหมือนกับ Microsoft word การ Format text ใน Dreamweaver มีสองรูปแบบคือ HTML Tags กับ Style Sheet โดย Css หรือ Style Sheet จะใช้เฉพาะ Browser 4.0 ขึ้นไปเท่านั้น แต่จะขอแนะนำให้ใช้ค่า Css จะดีกว่าการใช้ค่า Css มาช่วยในการทำเวบเพื่อช่วยประหยัดเวลาในการเซ็ท Font ทีละย่อหน้า และเป็นการบังคับให้ผู้ชมเวบใช้ Font ที่เรากำหนดเท่านั้น
Formatting text wirh html tags
คือการเขียน Tags HTML เพื่อช่วยจัดย่อหน้า และขนาดหัวเรื่องเท่านั้นเองการนำไปประยุกต์ใช้งานค่อนข้างจำกัด แต่มีข้อดีคือ Browser ทุกรุ่นจะสามารถ Format ด้วย Tags เหล่านี้ได้
การเรียกใช้ Formatting text with HTML tags
ให้ทดลองพิมพ์ข้อความอะไรก็ได้ลงในหน้าเวบเพจ แล้วลองมาจัดระเบียบด้วยวิธีนี้

Style เป็นลักษณะของตัวอักษรเหมือนกับ word เช่น ตัวหนา ตัวเอียง ขีดเส้นใต้ หรือว่าอาจจะใช้ Property inspector สามารถเรียกใช้โดย กด Ctrl + F3 จะปรากฎภาพดังรูปนี้ครับ

** ส่วนมากนั้นผมก็ใช้ตัวนี้เป็น หลักครับ **
Format with Style sheets
Style sheets ก็เหมือนการเก็บค่า Format ในรูปแบบสไตล์ของเราเอาไว้หลาย ๆ แบบไม่ว่าจะ Font, ขนาด, สีที่ใช้, การจัดย่อหน้า (ใช้จดจำโค้ด HTML บางอย่างได้อีกด้วย) เมื่อเราเก็บไว้หลาย ๆ แบบย่อหน้านี้ เราต้องการสไตล์ไหนก็คลิกเลือกได้เลย เมื่อเวบเพจเขียนเสร็จแล้วจะดึงมาเฉพาะค่า Css ที่เราเรียกใช้เท่านั้น Cssจึงนำมาช่วยการออกแบบให้สะดวกมากขึ้น

 - พิมพ์ข้อความ ป้ายทับข้อความที่ต้องการจัด
- การเรียกใช้ โดยการเลือกที่เมนู Text > Styles หรือคลิกขวาที่ข้อความ
- Align เป็นการจัดข้อความให้ชิดซ้าย กลาง หรือขวาการเว้นวรรคแบบไม่จำกัดทำได้โดยการเลือกที่ Non Breaking Space ดังรูปด้านล่าง หรือกด Ctrl+Shift+space barการใช้ตัวหนา และตัวเอน ตัวหนา Click ที่ B และ ตัวเอน Click ที่ ตัว Iขนาดของตัวอักษร (ขนาดปกติที่ผมใช้ คือ 2 )การพิมพ์แบบต่อเนื่อง
- Heading 1-6 การพิมพ์หัวข้อเรื่องตามขนาด Heading 1 เป็นขนาดใหญ่ที่สุดเรียงตามลำดับ การใช้เลือกก่อนพิมพ์ หรือถ้าพิมพ์ไปแล้วจะใช้ได้โดยการ Click Mouse ค้างแล้วป้ายทั้งข้อความที่ต้องการจากนั้นมาเลือกที่ Propreties > Format ตัวอักษรก็จะเปลี่ยนตาม ส่วนตัวอักษรที่ไม่ได้เลือกก็จะไม่มีการเปลี่ยนแปลง
- ในหน้า Document เดียวกันเราสามารถใช้ ตัวอักษรหลายแบบโดย Click ที่ลูกศรในช่อง Default Font จะมี Font อื่นให้เลือก         ส่วนค่า Default Font จะเป็น Font ที่ได้ทำการ Set ไว้ในตอนต้น