บทที่ 3 การนำรูปภาพมาใส่ในงาน (Insert Image)

Image รูปภาพ

Dreamweaver จะสนับสนุนไฟล์ได้ทั้งรูปแบบ Jpeg และ GIF เหมือนกับ Browser นอกจากนั้น ยังมีไฟล์แบบ PNG ซึ่งต้องใช้ Browser 4.0 ขึ้นไป จึงจะสามารถดูไฟล์ PNG ได้

ไฟล์ JPG หรือ JPEG

เหมาะสำหรับรูปถ่ายจริง รูปที่ใช้สีใกล้เคียงธรรมชาติ รูปที่ใช้โทนสีจำนวนมาก และสีที่มีโทนสีต่อเนื่องเพราะ JPG มีสีหลักให้เลือก 16.7 ล้านสี

ไฟล์ GIF

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

ไฟล์ GIF มีรูปแบบพิเศษกว่าไฟล์นามสกุลอื่น คือ ไฟล์รูปแบบโปร่งแสงหรือเรียกกันว่า Transparent Image ( รูปที่ไม่มี Background เหมือนรูปบนแผ่นใส )

ไฟล์ GIF สามารถทำเป็นไฟล์ภาพเคลื่อนไหวแบบง่ายๆ หรือที่รู้จักกันว่า Animation GIF มาจากการรวมไฟล์ GIF หลายรูปเข้าด้วยกัน

ไฟล์ PNG

ไฟล์นามสกุล PNG ถูกตั้งเป้าหมายไว้ว่า จะนำมาใช้แทนไฟล์ GIF แบบไม่เป็นทางการ เนื่องจากคุณสมบัติที่กำหนดให้สร้างขึ้นมา เพื่อลบจุดด้อยของไฟล์ JPG และ GIF แต่สาเหตุที่ไฟล์รูปแบบนี้ ยังไม่เป็นที่แพร่หลาย นั้นเพราะว่ายังไม่มีโปรแกรมที่สนับสนุนไฟล์นี้มากเท่าที่ควร มีเพียงโปรแกรม Macromedia Firework

การใส่รูปใน Dreamweaver จะต้องบอกที่เก็บไฟล์เสียก่อนข้อแนะนำก็คือ ควรจะเก็บไฟล์ภาพไว้ที่เดียวกับไฟล์งาน Document ของเรา

Insert image

การใส่รูปลงใน Document ทำได้หลายวิธี แล้วแต่ความถนัดของแต่ละคน

• คลิกที่ Image จาก Object Palette

• เลือกเมนู Insert > Image

• ลากปุ่ม Object Image จาก Object Palette ไปวาง

• ลากรูปจาก Desktop มาใส่ได้เลย

ในที่นี้จะนำเสนอวิธีการใส่รูปภาพโดยการคลิกที่ Image จาก Object Palette เพราะเป็นวิธีที่ง่ายต่อการใช้งาน รวดเร็ว

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

• มาที่ Tasbar ด้านล่างของ Document คลิกที่ Show site

• เลือกที่เมนูคลิก File > New Folder จากนั้นเปลี่ยนชื่อเป็น image ดังภาพด้านล่าง Folder image นี้จะเป็นที่เก็บรูปทั้งหมดของเวบมารวมกันไว้ที่เดียวกัน ถ้าหากเราได้สร้างภาพหรือนำภาพมาจากที่อื่นให้นำมาเก็บไว้ที่ Folder image เพื่อเป็นการง่ายต่อการอ้างอิง File

• หลังจากสร้าง Folder image แล้วให้ทำการเปิด File index.html โดยการดับเบิ้ลคลิกที่ File index.html ใน Local Folder

• จากนั้นเราจะมาที่หน้า Document index.html เพื่อทำการทดลองการดึงรูปภาพมาใช้

• วิธีดึงรูป มาที่ Object palette คลิกที่ Image ( ถ้าหากไม่ปรากฎ Object palette ในหน้าจอให้ไปที่เมนู Window > Object หรือ กด F2 ) หลังจากที่คลิก image จะมี Dialog box ให้เรามาที่ Floder ที่เราได้สร้างไว้ เข้าไปใน Folder แล้วคลิกเลือก File รูปภาพที่ต้องการ คลิก Select

• หลังจากคลิก Select รูปภาพที่เลือกก็จะมาปรากฎที่หน้า Document ให้ทดลองคลิกที่รูปภาพแล้วทดลองการปรับใน Properties inspector รายละเอียดต่างๆมีดังนี้

• คลิกรูปให้ Active มาที่ Properties inspector จะแสดงรายละเอียด ( สามารถขยายขนาดของ Properties ได้โดยการ Double Click ที่ Properties inspector หรือคลิกที่ลูกศรชี้ลงด้านล่างขวาก็สามารถขยายได้เช่นกัน

• NAME ไว้ให้ตั้งชื่อของรูปภาพ

• W และ H คือค่าความกว้างและความสูงของภาพ ( ตามปกติโปรแกรม Dreamweaver จะกำหนดขนาด ตามรูปจริงอยู่แล้วดังนั้นในช่องนี้จึงเป็นการย่อขยายขนาดรูปเท่านั้น ) แต่ไม่แนะนำให้ทำการปรับขนาดหรือย่อภาพเพราะจะทำให้คุณภาพของภาพเสียหายได้ให้ใช้โปรแกรมในการ Edit ภาพโดยตรงดีกว่า อย่างเช่น Photoshop หรือ Firework

• Src เป็นช่องที่แสดงให้เห็นถึงการอ้างอิง File รูปภาพว่ามาจาก Folder ไหน

• Link เมื่อใส่ชื่อ File.html ในช่อง Link ก็จะทำให้รูปนั้นกลายเป็นปุ่ม Link ทันที (หัวข้อการ Link จะขอกล่าวถึงในการทำ Link อีกครั้งหนึ่ง)

• Align เป็นการจัดวางข้อความที่อยู่ต่อจากรูปภาพ

• Browser Default ขึ้นอยู่กับค่าที่ Browser เซ็ทไว้ (ปกติจะเท่ากับค่า baseline)

• Baseline,Bottom จะจัดข้อความให้อยู่ชิดเส้นล่าง

• Top Aligns, Text Top Align

• Middle Aligns, Absolute Middle Aligns

• Left จะบังคับรูปให้อยู่ด้านซ้ายเสมอ และทำการโยงข้อความ ไปจัดระเบียบใหม่ทางขวาให้หมด แต่ถ้าข้อความบังคับจัดซ้ายเหมือนกันจะการขึ้นบรรทัดใหม่ให้ข้อความแทน

• Right หลักการเหมือนกับ Left

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

• V space (คือระยะห่างแนวตั้ง Vertical) และ H space (คือระยะห่างแนวนอน Horizontal)

• Target เป็นการกำหนดให้ทำการเปิดหน้า Document แทนหน้าเดิมหรือเปิด Windows ขึ้นมาใหม่อีกหน้าหนึ่ง ตามปกติค่า Default จะกำหนดให้เปิดหน้า Document ขึ้นมาแทน (ส่วนรายละเอียดอื่น ๆ จะกล่าววิธีการใช้ Target link ในบท Frame)

• Low src คือการใช้รูปขาวดำ (2 BITS) ความละเอียดต่ำมาทำเป็น Preview ให้กับรูปที่กำลังโหลดอยู่เนื่องจาก File จะมีขนาดเล็กมาก และช่วยทำให้ผู้เข้าชมเวบพอจะเดาได้ว่ารูปนี้คืออะไร

• Border ขนาดกรอบรูป ถ้าไม่ต้องการให้มีกรอบให้ใส่ค่าเท่ากับ 0

• Map เรียก Image map มาใช้งาน (จะกล่าวถึงในหัวข้อของการทำ Link)

• Refresh ปุ่ม reset เพื่อคืนค่าความกว้างและความสูงไปใช้ขนาดจริงของรูป

• Edit เมื่อต้องการจะแก้ไขปรับเปลี่ยนรูปนั้น กด Edit ปุ่มนี้ จะเป็นการเรียกโปรแกรมตกแต่งภาพทางลัดโดยเปิด File รูปนี้รอให้ทันที (แต่ต้องมีการตั้งค่าโดยการเลือกที่เมนู Edit > Preferences > File Types / Editors มาที่ Extensions คลิกที่ไฟล์นามสกุลที่เราใช้ ในที่นี้เลือก .gif จากนั้นให้มาที่ Editors ด้านขวามือคลิกเครื่องหมายบวกตามลูกศร จากนั้นจะมี Dialog box ปรากฎให้ทำการเลือกไฟล์ .EXE ของโปรแกรมแต่งภาพที่ต้องการในที่นี้ใช้โปรแกรม Photoshop จากนั้นให้คลิกที่ Photoshop ในช่อง Editors แล้วคลิกปุ่ม Make Primary เพื่อเป็นการเลือกใช้โปรแกรม Photoshop แล้วคลิก ปุ่ม OK การทดสอบได้โดยการคลิกที่รูปที่ต้องการ Edit หน้า Document มาที่ Property Inspector คลิก Edit จากนั้นทางโปรแกรมจะเปิดโปรแกรม Photoshop ให้เพื่อทำการแก้ไขทันที

การใช้ Image Map หรือ Hotspot แบบอิสระ

• คลิกที่รูปภาพให้ทำงานมาที่ Properties inspector

• มาที่ Map เลือกรูปแบบที่จะทำ Hotspot มีให้เลือกแบบสี่เหลี่ยม วงกลม และรูปทรงอิสระ หลังจากเลือกได้แล้วให้มาที่รูปภาพ คลิก Mouse ค้างราก Mouse ให้เป็นรูปที่ต้องการดังภาพ

• จากนั้นให้มาที่ Properties inspector อีกครั้งจะเห็นว่า Properties inspector จะเป็น Option ของ Hotspot มีค่าต่างๆ ให้ตั้งดังนี้

• Link เลือก File ที่ต้องการ Link จะกล่าวในหัวข้อการทำ Link

• Taget กำหนดให้ทำการเปิด Window ใหม่ หรือให้แปะทับของเก่า

• Alt การบอกรายละเอียดของรูปภาพดังที่ได้กล่าวมาแล้ว