หน่วยที่ 6 การตกแต่งหน้าเว็บไซต์ด้วย ภาพ ข้อความ และมัลติมีเดีย

6.1 การแทรกรูปภาพให้กับเว็บไซต์

      การแทรกรูปภาพ (Image) ใสนหน่วยเรียนนี้จะได้เรียนรู้กี่ยวกับการนำรูปภาพมาปรกอบในหน้าเว็บ ซึ่งมีส่วนสำคัญอย่างยิ่งในการตกแต่งหน้าเว็บเพจ ช่วยให้เว็บเพจมีความน่าสนใจมากขึ้น

      ประเภทของไฟล์รูปภาพ สำหรับประเภทของไฟล์รูปภาพที่ใช้งานในเว็บเพจนั้น มีอยู่หลายประเภท ซึ่งจะ แยกประเภทของไฟล์เหล่านี้ด้วยนามสกุลของไฟล์ ได้แก่ .bmp, .pcx, .tix, .tga, .wmf, .gif, .jpg, .png และอื่น ๆ แต่สำหรับประเภทของไฟล์ที่สามารถนำมาใช้บนเว็บเพจและโปรแกรมเว็บบราวเซอร์โดยทั่วไปสามารถ อ่านได้มี 4 ประเภท คือ .bmp, .jpg, .gif และ .png

      วิธีที่ 1 แทรกรูปภาพโดยใช้ Icon image

          1. ที่ หน้าต่าง Insert คลิกที่แท็บ Common

          2. คลิกที่ Icon Image เพื่อแทรกรูปภาพ

          3. จะปรากฏหน้าต่างให้เลือกรูปภาพที่จัดเตรียมไว้

          4. คลิกปุ่ม Ok เพื่อแทรกรูปภาพ

                 

          5. ปรากฏกล่องข้อความสำหรับใส่ Alternate Text ซึ่งเอาไว้สำหรับเป็นคำบรรยายภาพ จะแสดงแทนภาพ เมื่อภาพที่กำหนกโหลดขึ้นมาแสดงไม่ได้ หรือสำหรับ IE จะแสดงเมื่อมีเมาส์อยู่เหนือภาพ ถ้าเขียนคำบรรยาย ไว้ในไฟล์อื่นก็สามารถทำลิงก์ไปหาได้โดยเลือกจากหัวข้อ Long description

                   

          6. คลิก OK ที่กล่องข้อความ Image Tag Accessibility Attribute

          7. รูปภาพจะถูกแทรกเข้ามา

                    

         วิธีที่ 2 การลากรูปภาพมาวางจากหน้าต่าง Local Files สามารถทำได้ดังนี้

          1. ที่หน้าต่าง Local Files เลือกรูปภาพที่ต้องการ

          2. ลากรูปภาพมาวางในตำแหน่งที่ต้องการ

                    

          3. จะปรากฏกล่องข้อความสำหรับใส่ Alternate Text ซึ่งเอาไว้สำหรับคำบรรยายภาพ

          4. คลิก OK

          5. จะปรากฏภาพที่ส่วนหัวเว็บ

                

         วิธีที่ 3 การแทรกรูปภาพโดยใช้เมนูคำสั่ง

          1. คลิกเลือกตำแหน่งที่ต้องการแทรกรูปภาพ

          2. คลิกที่เมนู File > Image หรือใช้คีย์ลัด Ctrl + Alt + I

                

          3. จะปรากฏกล่องข้อความให้เลือกแหล่งที่อยู่ของรูปภาพและเลือกรูปที่ต้องการ

          4. คลิก OK เพื่อแทรกรูปภาพ

                

          5. จะปรากฏกล่องข้อความสำหรับใส่ Alternate Text ซึ่งเอาไว้สำหรับเป็นคำบรรยายภาพ

          6. คลิก OK

                

          7. จะปรากฏภาพที่ส่วนหัวเว็บ