บทที่ 4 แต่งเติมเว็บเพจด้วยกราฟิก

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

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

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

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

2.จะปรากฏหน้าจอ Select Image Source ให้เลือกโฟลเดอร์ images และเลือกภาพที่ต้องการ ตามขั้นตอนดังภาพ

จะได้ภาพที่ต้องการ บนหน้าเว็บเพจ ดังภาพ

 

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

        รายละเอียดในการตกแต่งภาพสามารถกระทำได้หลายประการ ดูได้จากภาพ ดังนี้

        นอกจาก การกำหนดขนาดของภาพโดยใส่ตัวเลขที่ช่อง W และ H ดังที่ได้กล่าวมาแล้ว เรายังสามารถย่อ -ขยายขนาดของภาพได้ ดังภาพ

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


การจัดวางภาพให้เข้ากับข้อความ
        การจัดตำแหน่งของภาพให้เข้ากับข้อความที่มีอยู่ จะทำให้เว็บเพจดูสวยงาม น่าสนใจ ซึ่งเราสามารถจัดตำแหน่งของภาพได้จาก Aling ดังภาพ

    รูปแบบการวางตำแหน่งภาพ มีดังนี้

        ตัวอย่างการวางตำแหน่งภาพกับข้อความ ในลักษณะต่าง ๆ ดังนี้

  1. เลือกใช้ Default เป็นค่าปกติ ของการพิมพ์ข้อความต่อจากภาพ ดังภาพ

2.เลือกใช้ Top จะแสดงผลลัพธ์ของข้อความที่อยู่ในแนวด้านบนของขอบภาพ ดังภาพ

3.เลือกใช้ Middle จะแสดงผลลัพธ์ของข้อความที่อยู่กึ่งกลางของภาพ ดังภาพ

4.เลือกใช้ Left จะแสดงผลลัพธ์ภาพอยู่ทางซ้ายมือ และข้อความล้อมรอบอยู่ทางขวา ดังภาพ

การกำหนดระยะของรูปภาพจากขอบเว็บเพจหรือสื่งที่อยู่รอบ ๆ ภาพ
         เมื่อเราปรับขนาดของภาพได้ตามต้องการแล้ว เรายังสามารถปรับระยะห่างของรูปภาพจากขอบเว็บเพจหรือสื่งที่อยู่ล้อมรอบภาพนั้น ๆ ได้ โดยการกำหนดตัวเลขที่ช่อง V space ซึ่งเป็นระยะห่างของแนวตั้ง และ H Space เป็นระยะห่างของแนวนอน ที่ Property Inspactor ดังภาพ

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

1.ไฟล์ภาพที่จะนำมาใช้เป็นพื้นหลังของเว็บเพจ ดังภาพ

2.เลือกคำสั่ง Modify >Page Properties...หรือกด < Ctrl+j > ดังภาพ

3.หน้าจอ Page Properties จะเกิดขึ้น ต่อจากนั้น ให้คลิกปุ่ม Browse... เพื่อเลือกภาพที่จะนำมาใช้เป็นพื้นหลัง

4.จะเกิดหน้าจอ Select Images Source ให้ดำเนินการตามขั้นตอน ดังนี้

1.หมายเลข 1 เลือกโฟลเดอร์ที่เก็บเว็บไซต์

2.หมายเลข 2 จะพบโฟลเดอร์ย่อย คือ images ที่เก็บรูปภาพ ให้ดับเบิ้ลคลิกที่โฟลเดอร์นี้เพื่อเปิดหาภาพที่ต้องการ ดังภาพ

3.เมื่อได้ภาพที่ต้องการ ให้คลิกเลือกภาพ แล้วคลิก OK

5.จะเกิดหน้าจอ Page Properties อีกครั้ง ในช่อง Background Images จะปรากฏที่อยู่ของไฟล์ภาพและชื่อภาพที่เราเลือก ต่อไป ให้คลิกเมาส์ที่ปุ่ม Apply เพื่อดูผลลัพธ์ก่อนแสดงผลที่หน้าจอ ต่อจากนั้น ให้คลิกปุ่ม OK ดังภาพ


         หน้าเว็บเพจของเรา จะถูกปูพื้นหลังด้วยภาพที่เราเลือก ดังนี้

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

        จากภาพ เราจะใช้กลุ่มเครื่องมือ Edit ในการปรับแต่งแก้ไขภาพ โดยเครื่องมือแต่ละตัว มีหน้าที่แตกต่างกัน ดังนี้

                       3.ภาพจะถูกตัดส่วนที่ไม่ต้องการออก ตามที่เราเลือก ดังภาพ

 

จัดทำโดย

น.สชุติมา  ฉัตรคำ

กลับไปหน้าแรก