บทที่ 4

การตกแต่งด้วยภาพ

1.ภาพกราฟิกที่เหมาะสมกับเว็บเพจ

 กราฟิกที่เหมาะสมในการใช้ประกอบเว็บเพจ มี 2 ชนิดคือ

1.  GIF (Graphic Interchange Format) มีนามสกุลไฟล์เป็น .gif สามารถแสดงสีได้เพียง 256 สี (ข้อมูลสี 8 บิต) เหมาะสำหรับใช้เป็นโลโก้ การ์ตูนภาพลายเส้น และภาพตัวอักษร ที่มีลักษณะเป็นสีทึบ ไม่มีการไล่ระดับสีมากนัก และมีขอบที่คมชัด นอกจากนี้ยังสามารถใช้เป็นพื้นหลังโปร่งใส (Transparent) และสร้างภาพเป็นภาพเคลื่อนไหว (Animation) ได้

2.  JPG (Joint Photographic Expert Group) มีนามสกุลของไฟล์เป็น .jpg หรือ .jpeg สามารถแสดงสีได้ 16.7 ล้านสี (ข้อมูลสี 24 บิต) เหมาะสำหรับภาพถ่าย หรือภาพที่ใช้สีจำนวนมาก และมีการไล่ระดับสีอย่างต่อเนื่อง

2.ปรับแต่งคุณสมบัติของไฟล์ภาพ

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

3.ปรับแต่งคุณสมบัติของภาพ

        1.  Image Name (Name) กำหนดชื่อให้กับรูป ใช่สำหรับเมื่อเราเขียน script อ้างอิงรูป
        2.  W (Width) กำหนดความยาวของรูปที่ต้องการให้แสดงผล โดยไม่มีผลกับไฟล์รูปเดิม
        3.  H (Height) กำหนดความสูงของรูปที่ต้องการให้แสดงผลโดยไม่มีผลกับไฟล์รูปเดิม
        4.  Src (Source) บอก folder ที่ใช้เก็บไฟล์รูปที่เราเลือก
        5.  Link (Hyperlink) ใช้กำหนด hyperlink ของรูป
        6.  Alt (Alternate Text) คำบรรยายรูปจะปรากฏก็ต่อเมื่อรูปไม่แสดงผล และนำเมาส์ไปอยู่เหนือรูป สำหรับเบราว์เซอร์ Internet Explorer
        7.  Edit ประกอบด้วยเครื่องมือเหล่านี้ เครื่องมือของ Adobe Dreamweaver จะทำการแก้ไขที่ไฟล์รูปโดยตรง    

• Fireworks แก้ไขรูปด้วย โปรแกรม Fireworks
• Optimize แก้ไขขนาดไฟล์ของรูป
• Crop ใช้ตัดรูปให้ได้ขนาดที่ต้องการ
• Brightness and Contrast ปรับความสว่างของรูป
• Sharpen ใช้แก้ไขความคมชัดของรูป

        8.  V Space (Vertical Space) กำหนดระยะห่างระหว่างรูปกับวัตถุอื่น ในส่วน บนและล่างของรูป
        9.  H Space (Horizontal Space) กำหนดระยะห่างระหว่างรูปกับวัตถุอื่น ในส่วน ซ้ายและขวาของรูป
        10. Low Src (Low Source) ในกรณีที่รูปของเราไฟล์ใหญ่มากต้องใช้เวลาโหลดนาน เราอาจกำหนดให้มี รูปที่ขนาดเล็กๆ รูปอื่นโหลดขึ้นมาก่อน โดยใช้ตัวเลือกนี้
        11. Border (Image Border) ใช้กำหนดขนาดของขอบรูป
        12. Align (Alignment) ใช้กำหนดตำแหน่งของรูปเช่น ชิดซ้าย ขวา บน ล่าง
        13. Class (CSS Setting) ถ้าเราเขียน CSS เอาไว้ตัวเลือกนี้จะใช้กำหนด CSS ที่เราเขียนไว้
        14. Map (Map Name) ใช้กำหนดชื่อให้กับ Map image จะกล่าวถึงในบทอื่น
        15. Hot spot tool (Name) เป็นเครื่องมือที่ใช้ร่วมกับ Map Name จะกล่าวถึงในบทอื่น คู่มือการใช้งาน DREAMWEAVER CS3 หน้า 13 / 34
        16. Target (Name) กำหนดตัวเลือกของหน้าที่จะเปิด link จะกล่าวถึงในบทอื่น หลายคนคงสงสัยว่า การ เปลี่ยนขนาดรูปด้วยการกำหนด W,H (width , height) ต่างกับการใช้คำสั่ง Edit อย่างไรคำตอบคือ ถ้าเรากำหนดด้วย W,H จะ ไม่เปลี่ยนขนาดของรูปจริง แต่จะมีผลต่อการแสดงผลใน browser เท่านั้น ซึ่งในความจริงแล้วเราจะไม่นิยมแก้ไขขนาดของ รูปด้วยวิธีนี้เพราะนอกจากจะมีผลต่อความคมชัดของรูปแล้ว อาจทำให้สัดส่วนของรูปผิดไปได้การแก้ไขด้วยคำสั่ง Edit จะ แก้ไขที่ไฟล์รูปโดยตรงทำให้การแสดงผลตรงตามที่เราแก้ไข ในบทความนี้เป็นเพียงพื้นฐานการใส่รูปในเว็บเพจคุณสามารถศึกษารายละเอียดโดยเลือกหัวข้อ “ใส่ภาพในเว็บเพจ ” จากเมนูหัวข้อทางขวามือ

4.กำหนดชื่อภาพ

        ชื่อภาพบนพาเนล PROPERTIES เป็นชื่อที่ใช้อ้างอิงสำหรับคำสั่งภาษาสคริปต์ในเว็บเพจ เช่น ในกรณีใช้เอฟเฟกต์ swap image เป็นต้น (ไม่ได้เป็นชื่อของไฟล์ภาพ) ซึ่งสามารถ   ตั้งขึ้นเองได้โดยใช้ตัวอักษรภาษาอังกฤษหรือตัวเลขเท่านั้น และห้ามเว้นวรรคหรือใช้สัญลักษณ์ใดๆ

1.  คลิกที่ภาพ

2.  ตั้งชื่อภาพ

5.ปรับขนาดภาพ

      ขนาดความกว้าง และความสูง ของภาพในโปรแกรม Adobe  Dreamweaver มีหน่วยเป็นพิกเซล ซึ่งปรับขนาดได้โดยกรอกตัวเลขใหม่ลงไป หรือใช้แฮนเดิลที่กรอบภาพปรับให้ไดขนาดที่ต้องการ นอกจากนี้ถ้าต้องการปรับขนาดภาพให้ได้สัดส่วนเดิมให้กดคีย์ Shift พร้อมกับการคลิกลากแฮนเดิล และถ้าต้องการให้ภาพที่ปรับขนาดไปแล้วกลับสู่ขนาดเดิม ให้คลิกไอคอน  ,  ดังรูป

6.สุ่มข้อมูลภาพใหญ่

      การปรับขนาดภาพตามขั้นตอนข้างต้นเป็นเพียงการย่อ-ขยายภาพเพื่อแสดงบนเว็บเพจเท่านั้นไม่ได้ทำให้ไฟล์ต้นฉบับถูกปรับเปลี่ยนแก้ไขขนาดไปด้วย ซึ่งในโปรแกรม Dreamweaver มีเครื่องมือ Resample ที่ช่วยปรับขนาดภาพ รวมถึงขนาดไฟล์ต้นฉบับไปด้วย โดยมีวิธีดังนี้

7.เปลี่ยนไฟล์ภาพ

8.ปรับระยะห่างของภาพ

9.กำหนดขนาดเส้นกรอบภาพ

ภาพที่แทรกไว้ในเว็บเพจนั้น สามารถใส่เส้นกรอบเพื่อให้เห็นภาพที่ชัดเจนขึ้นได้โดยกำหนดขนาดเส้นกรอบที่มีหน่วยเป็นพิกเซลได้บนพาเนล  Properties  ได้ดังนี้

1.  คลิกภาพ                                                                                                                                                                                                                                                                                     

2.  ใส่ขนาดเส้นกรอบ (หน่วยเป็นพิกเซล)

10.กำหนดข้อความอธิบาย

 หลักการแทรกรูปภาพทุกครั้ง จะมีไดอะล็อกบ็อกซ์ที่ให้ใส่ข้อความอธิบายภาพลงไปได้ในกรณีที่ไม่ได้ใส่ข้อความใดๆลงไปในตอนนั้น หากต้องการแทรกข้อความอธิบายภาพนั้นภายหลังก็สามารถแทรกหรือแก้ไขข้อความได้จากพาเนล PROPERTIES ดังนี้

1.  คลิกที่รูป

 2.  ใส่ข้อความอธิบายภาพได้ทั้งภาษาไทยและภาษาอังกฤษ

11.ปรับแต่งภาพด้วยเครื่องมือ Dreamweaver

หากเราต้องการปรับแต่งภาพที่นำมาประกอบบนเว็บเพจ ก็สามารถทำได้บน Dreamweaver โดยตรง โดยมีเครื่องมืออำนวยความสะดวกในการปรับแต่งภาพ เช่น  Crop  (ตัดภาพ),  Sharpen (ปรับความคมชัด)  เป็นต้น

1  ตัดภาพ (Crop)

ภาพที่ลงเว็บเพจ หากมีขนาดใหญ่มากหรือต้องการตัดรายละเอียดอื่นเพื่อเน้นจุดสำคัญของภาพ สามารถตัดภาพเพื่อให้ได้ส่วนที่ต้องการโดยใช้เครื่องมือ Crop       บนพาเนล   โดยมีขั้นตอนดังนี้

2.  ปรับความสว่างและคอนทราสต์ของภาพ

12.  ปรับความชัดของภาพ