หน่วยการเรียนรู้ 4

เตรียมภาพเพื่อใช้ในเว็บเพจ

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

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

• • .JPEG เหมาะสำหรับภาพถ่าย หรือภาพที่มีจำนวนสีมาก ๆ ถึง 16.7 ล้านสี ใช้กับภาพโปร่งแสงไม่ได้

  • .GIF ใช้สำหรับภาพที่มีลักษณะเป็นลายเส้นหรือภาพที่ต้องการสร้างเป็นภาพโปร่งใส แต่ใช้สีได้เพียง 256 สีเท่านั้น เช่น ภาพการ์ตูนและภาพเคลื่อนไหว

  • .PNG สำหรับภาพถ่ายที่ต้องการให้มีลักษณะโปร่งแสง แต่ไฟล์ที่ได้หลังการบีบอัดจะมีขนาดใหญ่และมีคุณภาพมากกว่าไฟล์ JPEG นอกจากนี้ ยังแสดงผลได้เร็วกว่าแบบ .GIF

การจัดเก็บภาพที่ใช้ในเว็บเพจ

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

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

  • หมายเลข 2 คือ โฟลเดอร์ที่เก็บภาพทั้งหมดที่จะนำมาใช้ในเว็บไซต์

  • หมายเลข 3-5 คือ ไฟล์เว็บเพจที่สร้างขึ้นในเว็บไซต์

การแทรกภาพในเว็บเพจ

การแทรกภาพในหน้าเว็บเพจ เราสามารถทำได้ โดยการคลิกที่ปุ่ม

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

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

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

• • • • ขั้นตอนที่ 1 เลือกโฟลเดอร์ images ซึ่งอยู่ในโฟลเดอร์ organization

      • ขั้นตอนที่ 2 เลือกภาพที่ต้องการ

      • ขั้นตอนที่ 3 เมื่อเลือกภาพได้แล้ว คลิกปุ่ม OK

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

การปรับแต่งรูปภาพ

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

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

• • หมายเลข 1 คือ ความกว้างของภาพ เราสามารถแก้ไขและปรับขนาดรูปโดยใส่ตัวเลขได้ตามต้องการ

  • หมายเลข 2 คือ ความสูงของภาพ เราสามารถแก้ไขและปรับขนาดรูปโดยใส่ตัวเลขได้ตามต้องการ

  • หมายเลข 3 ช่องใส่ชื่อของรูปภาพ

  • หมายเลข 4 แสดงที่เก็บไฟล์รูปภาพ

  • หมายเลข 5 ใช้กำหนดการเชื่อมโยงภาพไปยังข้อมูลหรือเว็บไซต์อื่น

  • หมายเลข 6 ไว้ใส่ข้อความกำกับภาพ

  • หมายเลข 7 กำหนดความหนาของเส้นขอบภาพโดยกำหนดเป็นตัวเลข ตั้งแต่เลข 1 จะขอบบางสุด

  • หมายเลข 8 กำหนดตำแหน่งการวางภาพ

  • หมายเลข 9 กำหนดตำแหน่งการวางภาพบนหน้าเว็บ

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

• • หมายเลข 1 ให้เราวางเมาส์ที่จุดดำที่มุมภาพด้านล่าง เมื่อเกิดลูกศรสองทางเอียงให้กดเมาส์ค้างไว้ แล้วดึงยืดหดได้ตามต้องการ แต่ถ้าต้องการให้ภาพยืดหดได้ตามสัดส่วนของภาพ ให้กด Shift ค้างไว้ ขณะยืดหดภาพ

  • หมายเลข 2 สำหรับการกำหนดขนาดภาพโดยใส่ค่าตัวเลขที่ช่อง W และ H เมื่อเปลี่ยนแปลงค่าความกว้าง ความสูงของภาพไปแล้ว ต้องการปรับภาพให้กลับมาสู่ขนาดเดิมของภาพต้นแบบที่เรานำเข้ามา ให้คลิกที่ปุ่ม

• • ที่อยู่ระหว่างช่อง W และ H ก็จะได้ขนาดของภาพเดิม

การใส่กรอบให้กับรูปภาพ

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

การจัดวางภาพให้เข้ากับข้อความ

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

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

• • Default : เป็นการจัดเรียงภาพและข้อความตามบราวเซอร์ที่ใช้

  • Baseline : ขอบล่างของภาพตรงกับแนว Baseline ของข้อความ

  • Top : ขอบบนของภาพตรงกับแนวบนสุดของของข้อความ

  • Middle : กึ่งกลางของภาพตรงกับแนว Baseline ของข้อความ

  • Bottom : ขอบล่างของภาพตรงกับแนวล่างสุดของของข้อความ

  • Text Top : ขอบบนของภาพตรงกับแนวบนสุดของข้อความ

  • Absolute Middle : กึ่งกลางของภาพตรงกับกึ่งกลางของข้อความ

  • Absolute Bottom : ขอบล่างของภาพตรงกับแนวล่างสุดของของข้อความ

  • Left : ภาพอยู่ทางซ้ายโดยมีข้อความล้อมอยู่ทางขวา

  • Right : ภาพอยู่ทางขวาโดยมีข้อความล้อมอยู่ทางซ้าย

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

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

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

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

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

การกำหนดระยะของรูปภาพจากขอบเว็บเพจหรือสื่งที่อยู่รอบ ๆ ภาพ

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

• • หมายเลข 1 คือ ระยะห่างของภาพกับหัวข้อเรื่อง

  • หมายเลข 2 คือ ระยะห่างของภาพกับตัวหนังสือด้านขวามือ

  • หมายเลข 3 คือ ระยะห่างของภาพกับตัวหนังสือด้านล่าง

  • หมายเลข 4 คือ ระยะห่างของภาพกับขอบของเว็บเพจ

• หมายเลข 5 คือ กำหนดระยะห่างของภาพกับขอบหน้าเว็บและสิ่งที่อยู่รอบภาพ โดยกำหนดระยะห่างของ V Space = 20 และ H Space = 20 ผลลัพธ์ก็จะได้ตามหมายเลข 1-4

การนำภาพมาแสดงเป็นพื้นหลังเว็บเพจ

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

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

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

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

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

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

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

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

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

การแก้ไขรูปภาพ

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

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

• • หมายเลข 1

• • หมายเลข 4

• • คือ การกำหนดให้ภาพที่ปรับขนาดแล้วเป็นภาพต้นแบบ เมื่อเราปรับขนาดภาพที่ Property Inspector ในช่อง W (ความกว้าง) และ H (ความสูง) จนเป็นที่พอใจแล้ว และต้องการภาพนี้ไปแทนภาพต้นฉบับ ให้คลิกที่

• • หมายเลข 5