การตกแต่งเว็บเพจ

เทคนิคและวิธีใช้รูปภาพบนเว็บ        
 
            ไฟล์รูปภาพประเภทใดบ้างที่นำมาใช้บนเว็บ
                                    ไฟล์รูปภาพนั้นมีหลายประเภท หลายนามสกุล แต่ก็มีเพียงไม่กี่ประเภทเท่านั้นที่เราสามารถนำมา
ใช้งานบนเว็บได้ ซึ่งได้แก่  * .gif, * .jpg  และ *  .png  ถ้าเรามีรูปภาพที่สวยถูกใจแต่ไฟล์รูปภาพ
ดังกล่าวไม่ได้อยู่ในประเภทที่นำมาใช้งานบนเว็บได้ไม่ต้องกลุ้มใจ  เพราะเราสามารถนำไฟล์รูปภาพไปแปลงให้เป็นประเภท
ที่ต้องการได้ด้วยโปรแกรมกราฟิกหรือโปรแกรมสำหรับดูภาพกราฟิก  GIF (Graphic Interchange Format)
                           ไฟล์ประเภทนี้เป็นที่นิยมใช้กันมากเนื่องจากมีขนาดไฟล์ที่เล็ก และโดยส่วนใหญ่รูปภาพบนเว็บเพจก็จะเป็น
รูปภาพที่ไม่ต้องใช้สีมากนักคือ ไม่เกิน 256 สี (8 บิต) ซึ่งไฟล์ GIF สามารถรองรับได้พอดี ตัวอย่างของรูปภาพที่
เหมาะกับไฟล์ประเภทนี้คือ รูปการ์ตูน   รูปโลโก้ รูปไอคอน    รูปตัวหนังสือ   และรูปปุ่มต่างๆ   ซึ่งสามรถเห็นได้ในเว็บไซต์
ทุกแห่ง ไฟล์  GIF มีอยู่  2รูปแบบเรียกว่า  GIF87และ  GIF89a โดยไฟล์  GIFที่เราใช้กันอยู่ก็คือ  GIF89a
ซึ่งมีคุณสมบัติเพิ่มขึ้นจาก   GIF87 ดังนี้
 
           Interlaced
                              ไฟล์    GIFใดที่มีคุณสมบัตินี้จะทำให้รูปภาพที่ปรากฏบนเว็บเพจค่อยๆ  ปรากฏจากรูปภาพที่มีความ
ละเอียดต่ำจนกระทั่งได้รูปภาพที่มีความละเอียดปกติซึ่งจะช่วยให้ผู้ใช้รู้สึกว่าเวลาที่จะต้องรอให้รูปภาพปรากฏอย่างสมบูรณ์นั้น
สั้นลงและรู้สึกว่าบราวเซอร์กำลังดาวน์โหลดรูปภาพมาแสดงให้เห็นโดยที่บราวเซอร์ไม่ได้แฮ็งค์หรือการเชื่อมต่อกับอินเตอร์
เน็ตมีปัญหา แต่ข้อเสียของคุณสมบัตินี้ก็คือ จะทำให้ไฟล์ที่ได้มีขนาดใหญ่ขึ้น             
                      
            Transparency
                        คุณสมบัตินี้จะช่วยทำให้พื้นหลังของรูปภาพไม่ปรากฏจึงมีประโยชน์มากในการแสดงรูปภาพบนเว็บเพจที่มีรูปพื้นหลังเป็นลวดลาย หรือใช้รูปภาพที่มีรูปร่างไม่ใช่สีเหลี่ยมเพื่อทำให้ผู้ใช้มองไม่เห็นขอบเขตของรูปส่งผลให้การนำรูปภาพไปตกแต่งเว็บเพจมี
ความสวยงามมากขึ้น 
                                                                                                                                                                                              
     GIF Animation
          GIF Animation ก็คือ   รูปภาพที่เคลื่อนไหวได้โดยใช้วิธีเก็บรูปภาพจำนวนหนึ่งซึ่งเป็นรูปภาพ
ที่มีการกระทำต่อเนื่องกันเป็นขั้นตอนไว้ในไฟล์เดียว (เรียกว่า 1ไฟล์มีหลายเฟรม)โดยมีการกำหนดเวลาในการหมุนเวียน
กันขึ้นมาแสดงและแสดงในลักษณะวนซ้ำ JPG,JPEG (joint photographic Expert Group)
  
                       ไฟล์    JPG เป็นอีกทางเลือกหนึ่งของนักสร้างเว็บเมื่อต้องการแสดงภาพเหมือนจริงหรือภาพภายในเว็บเพจ
เนื่องจากไฟล์   JPG   มีคุณสมบัติที่สามรถแสดงสีได้ถึง   16.7 ล้านสี  (24 บิต)โดยมีขนาดไฟล์ไม่ใหญ่มากนัก
เนื่องจากใช้เทคนิคบีบอัดขนาดไฟล์เข้ามาช่วย ซึ่งเราก็สามารถกำหนดไว้ว่าต้องการมากน้อยแค่ไหนมีคุณภาพของไฟล์เป็น
ปัจจัยที่ต้องการพิจารณาร่วมด้วย เพราะยิ่งกำหนดให้บีบอัดมากเท่าใดคุณภาพของรูปที่ได้ก็จะลดลงเท่านั้น  คุณสมบัติที่หน้า
สนใจของไฟล์   JPG ก็คือ  คุณสมบัติ  Progressive ซึ่งมีลักษณะการทำงานเหมือนคุณสมบัติ  Interlaced
ในไฟล์    GIF
 
  PNG( portable Network Graphics )
                        สำหรับไฟล์ประเภทนี้เรายังไม่ค่อยได้เห็นว่ามีการนำมาใช้งานบนเว็บเพจกันมากนัก อาจจะเป็นเพราะว่าเป็น
ไฟล์ที่เกิดขึ้นมาได้ไม่นาน ดังนั้นจึงมีปัญหากับผู้ใช้ที่ยังใช้บราวเซอร์เวอร์ชั่นเก่า ๆ  อยู่ สำหรับจุดประสงค์ในการสร้างไฟล์
PNG ขึ้นมาก็คือ เพื่อนำมาใช้ทดแทนไฟล์   GIF ซึ่งมีข้อเสียตรงที่ผู้พัฒนาโปรแกรมกราฟิกจะต้องเสียค่าลิขสิทธิ์เพื่อให้
มีสิทธิ์ใช้ไฟล์   GIF ไฟล์   PNG มีคุณสมบัติ   Interlaced และ  Transparency เช่นเดียวกับไฟล์
GIF และยังได้รับการพัฒนาความสามารถอื่นๆ เพิ่มเติมให้เหนือกว่าไฟล์   GIF อีกด้วย เช่น สามารถแสดงสีได้มากถึง
16.7 ล้านสี (24 บิด) เช่นเดียวกับไฟล์   JPG และถ้าเราลองแปลงไฟล์จาก  GIF เป็น   PNG จะพบว่าบาง
ครั้งขนาดไฟล์ของรูปภาพที่ได้จะลดลงจากเดิมแต่ทั้งนี้ก็ขึ้นอยู่กับว่าเราได้เลือกใช้โปรแกรมใดในการแปลงไฟล์ด้วย จุดที่ไฟล์
PNG ด้อยกว่าไฟล์    GIF ก็มีเช่นนั้นคือ ไฟล์    PNG ไม่มีคุณสมบัติ    Animation นั่นเอง

 แสดงรูปภาพบนหน้าเว็บเพจ     
 
                        การกำหนดให้รูปภาพปรากฏในหน้าเว็บเพจนั้นเป็นวิธีหนึ่งที่ช่วยตกแต่งให้เว็บเพจของเราดูหน้าสนใจมากขึ้น
อีกทั้งรูปภาพยังช่วยให้การนำเสนอข้อมูลที่มีเนื้อหาเกี่ยวกับการอธิบายเรื่องราวเป็นไปโดยง่ายอีกด้วย
 
            แท็กที่ใช้สำหรับแสดงรูปภาพก็คือ   <IMG> ซึ่งมีรูปแบบการใช้งานดังนี้
 
 ชื่อแท็ก:            IMG
 รูปแบบ:           <IMG  SRC=”ชื่อไฟล์รูปภาพ”> </img>
 ตัวอย่างการใช้:        <img  src=”office.gif”> </img>
 ตำแหน่งที่ใช้:         ระหว่าง    <BODY>…</BODY>
 
1.ใช้  <IMG> เพื่อกำหนดให้แสดงรูปภาพที่ต้องการ โดยเราจะพิมพ์  <IMG>ไว้ระหว่าง<BODY>…</BODY>
2.กำหนดชื่อไฟล์รูปภาพที่ต้องการให้กับแอตทริบิวต์   SRC

 การปรับแต่ง    <IMG>    
 
                        เราได้ทราบแล้วว่าการกำหนดให้รูปภาพปรากฏบนเว็บเพจนั้นได้ด้วย  <IMG> ซึ่งมีรูปแบบการใช้ดังนี้

 
 รูปแบบ :        <IMG  SRC=”ชื่อไฟล์รูปภาพ”></IMG>
 ตัวอย่างการใช้ :     <img  src=”cat.jpg”></img>
 
 ผลจากการกำหนดด้วยรูปแบบข้างต้นจะทำให้รูปภาพปรากฏขึ้นมาในขนาดจริง  ซึ่งถ้าเราต้องการปรับแต่ง
ขนาดหรือลักษณะอื่นๆ ก็สามารถทำได้โดย
 
 กำหนดขนาดของรูปภาพ
                        ความกว้างและความสูงของรูปภาพสามารถกำหนดได้ด้วยแอตทริบิวต์  WIDTH  และ  HEIGHT  ของ   <IMG>  โดยถ้ากำหนดเพียงขนาดด้านใดด้านหนึ่ง ขนาดในด้านที่ไม่ได้กำหนดก็จะเพิ่มขึ้นหรือลดลงเป็นสัดส่วนกับขนาดในด้านที่กำหนด
  ชื่อแอตทริบิวต์:      WIDTH,  HEIGHT
 รูปแบบ:         <IMG WIDTH=”เปอร์เซ็นต์หรือิกเซล”HEIGHT=”เปอร์เซ็นต์หรือกเซล”>  </IMG>
 ตัวอย่างการใช้:      <img  width=”90%” height=”150”></img>
 ตำแหน่งที่ใช้:        ภายในแท็กเปิดของ   <IMG> 
 
        การกำหนดทั้งความกว้างและความสูงทำได้โดย
             1.เมื่อกำหนดชื่อไฟล์รูปภาพที่ต้องการแล้วกำหนดความกว้างเป็น   “75%” ของความกว้างบราวเซอร์ในขณะนั้น
             2.กำหนดความสูงเป็น  100  พิกเซล

          จัดตำแหน่งของรูปภาพรวมกับข้อความ          
  ชื่อแอตทริบิวต์:         ALIGN                     
 รูปแบบ:           <IMG ALIGN=”top  หรือ    middle หรือ  bottom   หรือ        

                       left   หรือ right”></IMG>
 ตัวอย่างการใช้:        <img  align=”left”></img>
 ตำแหน่งที่ใช้:         ภายในแท็กเปิดของ       <IMG>             
 
       ขั้นตอนการกำหนดตำแหน่งของรูปภาพรวมกับข้อความทำได้ดังนี้
1.กำหนดให้รูปภาพอยู่ด้านซ้ายข้อขอความโดยกำหนดค่า  “left” ให้แอตทริบิวต์  ALIGN
 
 ปรับระยะห่างระหว่างรูปภาพกับข้อความ           
            เราสามารถกำหนดขนาดของช่องว่างระหว่างรูปภาพกับข้อความได้ทั้งแนวตั้งและแนวนอนในรูปแบบดังนี้
 
            ชื่อแอตทริบิวต์:       VSPACE ,HSPACE
             รูปแบบ:          <IMG VSPACE=”ระยะห่างในแนวตั้ง  “HSPACE=”ระยะห่างใน 
                                                        แนวนอน “></IMG>
            ตัวอย่างการใช้:       <img vspace=”10”  hspace=”20”></img>
            ตำแหน่งที่ใช้:         ภายในแท็กเปิดของ    <IMG>
  
 กำหนดเส้นขอบของรูปภาพ       
 
        โดยปกติรูปภาพจะไม่มีเส้นขอบล้อมรอบ แต่ถ้าเราต้องการให้เส้นขอบปรากฏก็สามารถทำได้โดยใช้แอตทริบิวต์  BORDER
  ในรูปแบบ
 
 ชื่อแอตทริบิวต์:      BORDER
 รูปแบบ:          <IMG  BORDER=”ขนาดเป็นพิกเซล”></IMG>
 ตัวอย่างการใช้:       <img  border=”7”></img>
 ตำแหน่งที่ใช้:        ภายในแท็กเปิดของ    <IMG>
 
 ถ้าต้องการให้ปรากฏเส้นขอบขนาด  7  พิกเซลล้อมรอบรูปภาพให้ทำดังนี้
      1.กำหนดค่าให้แอตทริบิวต์   BORDER   เท่ากับ   “7”
 

 แสดงข้อความแทนเมื่อรูปภาพไม่ปรากฏ                      
 
 นอกจากรูปหรือสัญลักษณ์ที่ปรากฏขึ้นมาเองแล้วเรายังสามารถเพิ่มข้อความเข้าไปได้อีกโดยแอตทริบิวต์ ALT
 
 ชื่อแอตทริบิวต์:     ALT
 รูปแบบ:        <IMG  ALT=”ข้อความที่ต้องการ “></IMG>
 ตัวอย่างการใช้:     <img  alt=” ลูกสุนัขที่น่ารัก“></img>
 ตำแหน่งที่ใช้:      ภายในแท็กเปิดของ    <IMG>

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

%d bloggers like this: