หน้าหลัก ผลการเรียนรู้ที่คาดหวัง คู่มือการใช้งาน ผู้จัดทำ


ชนิดของรูปภาพ / ขั้นตอนการแทรกรูปภาพ / คุณสมบัติของภาพกิจกรรมลองทำดู


ชนิดของรูปภาพที่นำมาใช้ในเว็บเพจ


         รูปภาพที่นำมาใช้ในการสร้างเว็บเพจนั้นควรมีขนาดเล็ก  เพื่อให้ผู้ชมสามารถดาวน์โหลดมาแสดงบน
เว็บบราวเซอร์ได้อย่างรวดเร็ว ภาพที่ใช้ในเว็บเพจนั้น มี 3 ชนิด ได้แก่
         1.  ภาพชนิด  jpeg  (Joint  Photographic  Export  Group) เป็นแฟ้มภาพที่มีความละเอียดของสีเหมือนกับรูปภาพจริงมากที่สุด เหมาะสำหรับภาพถ่ายบุคคล วัตถุ สิ่งของ หรือภาพวิว ธรรมชาติ  มีส่วนขยายเป็น  jpg
        2.  ภาพชนิด  gif  (Graphic  Interchange  Format)  เป็นแฟ้มภาพที่มีความละเอียดของสีไม่เกิน  256  สี  เหมาะสำหรับภาพการ์ตูน  ภาพเคลื่อนไหว  หรือตัวอักษร  มีส่วนขยายเป็น  gif
        3.  ภาพชนิด  png  (Portable  Network  Graphics)  สามารถแสดงสีได้มากกว่า  256  สี  การบีบอัดภาพน้อยกว่า  ภาพชนิด  jpeg  ทำให้แสดงผลได้เร็ว  แต่เว็บบราวเซอร์รุ่นต่ำ ๆ อาจแสดงผลไม่ได้

top



ขั้นตอนการแทรกรูปภาพลงในเว็บเพจ

        1.  คลิกเลือกเมนู  Insert -> Image...  หรือ  คลิกที่    บนแถบเครื่องมือ จะปรากฏหน้าต่าง Image Properties ดังนี้

คลล2.  เลือกที่แท็บ Location  คลิกที่  ในส่วนท้ายของ Image Location :  เพื่อค้นหาและเลือกรูปภาพจากแหล่งที่เก็บข้อมูล เมื่อเลือกรูปภาพได้แล้วในส่วนของ Image Preview จะแสดงตัวอย่างและขนาดของรูปภาพ

3. ให้เลือกตัวเลือกใดตัวเลือกหนึ่งดังต่อไปนี้
   -  Altenate text : คือ การกำหนดให้มีข้อความ
ปรากฏเมื่อเลื่อนเมาส์มาวางบนรูปภาพนั้น
   -  Don't use altenate text :  ไม่ต้องการให้ปรากฏข้อความใด เมื่อเลื่อนเมาส์มาวางบนรูปภาพนั้น

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

top


การกำหนดคุณสมบัติให้กับรูปภาพ

     ในระหว่างที่แทรกรูปภาพลงในเว็บเพจ  สามารถกำหนดคุณสมบัติเพิ่มเติมได้ดังนี้

การกำหนดขนาดของรูปภาพ
    ให้เลือกแท็บ  Dimensions  ผู้ใช้สามารถเลือกกำหนดขนาดของรูปภาพได้ 2 ลักษณะ
  • Actual Size
    กำหนดตามขนาดจริงของรูปภาพ

  • Custom Size
    กำหนดความกว้าง (Width) และความสูง (Height) ตามความต้องการของผู้ใช้
    หากต้องการให้รูปภาพปรับสัดส่วน
    ของความกว้างหรือความสูงให้คงที่
    เมื่อมีการกำหนดค่าอย่างใดอย่างหนึ่งใหม่ จะต้องคลิกเลือกที่ Constrain
การกำหนดตำแหน่งของรูปภาพ
    ให้เลือกแท็บ Appearance ผู้ใช้สามารถเลือกกำหนดตำแหน่งของรูปภาพได้ 4 ลักษณะ
  • Left and right :
    กำหนดตำแหน่งห่างจากขอบซ้าย
    และขอบขวา  มีหน่วยเป็น pixels


  • Top and Bottom :
    กำหนดตำแหน่งห่างจากขอบบน
    และขอบล่าง  มีหน่วยเป็น pixels

  • Solid Border :
    กำหนดความหนาของกรอบภาพ
    มีหน่วยเป็น pixels

  • Align Text to Image :
    กำหนดการจัดตำแหน่งระหว่างข้อความ
    และภาพ

Tip :  หากต้องการปรับเปลี่ยนคุณสมบัติของภาพในภายหลังจากแทรกรูปภาพเรียบร้อยแล้ว
         สามารถคลิกขวา เลือก Image Properties...


   กิจกรรมลองทำดู
ให้นักเรียนเปิดเว็บเพจที่ชื่อว่า index.html ที่สร้างไว้มาแก้ไขเพิ่มเติม ดังนี้
1.  แทรกรูปภาพหน้าคำว่า  ประวัติส่วนตัว  ซึ่งอาจจะเป็นภาพการ์ตูน,  
     ภาพสัญลักษณ์ต่าง ๆ ที่มีขนาดเล็ก มีส่วนขยายเป็น gif
2.  จัดตำแหน่งระหว่างภาพและข้อความ เป็นแบบกึ่งกลาง
3.  แทรกรูปภาพของนักเรียนไว้ท้ายสุดของหน้าเว็บเพจ
     (หากไม่มีรูปภาพจริงอาจใช้ภาพอื่น ๆ แทนได้) มีส่วนขยายเป็น jpg
4.  บันทึกไว้ในชื่อ index.html เหมือนเดิม


เลือกบทเรียน 1  ¦  2  ¦  3  ¦  4  ¦  5  ¦  6  ¦  7  ¦  8

ดูดีดูสวยที่  1024 x 768 Text Size :  Medium
ติดต่อเราที่นี่  nescoffee12@hotmail.com