วันเสาร์ที่ 25 กันยายน พ.ศ. 2553

การใส่รูปบนเว็บเพจ

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

                      กล่องข้อความ: ข้อพิจารณาการเลือกใช้รูปภาพ
 

                      ในการนําภาพมาประกอบข้อความบนเว็บเพจนั้น ควรพิจารณาและเลือกรูปภาพที่นํามาใช้ให้เหมาะสม โดยมีข้อพิจารณาดังนี้
                                          1. ไม่ควรเน้นรูปภาพภายในเว็บเพจมากจนเกินไป ควรจะมีข้อความและรูปภาพที่สมดุลกัน
                                          2. การใช้รูปภาพที่เป็นไฟล์ขนาดใหญ่จะทําให้การโหลดเว็บเพจใช้เวลานานกว่าจะแสดงภาพ ดังนั้น จึงควรใช้ภาพที่มีพอเหมาะกับสิ่งที่เราต้องการ
                      สื่อกับผู้ชม หรืออาจใช้โปรแกรมทางกราฟิก เช่น Photoshop หรือ ACDSee ทําการลดขนาดภาพ (Resize) ก่อนนํามาลงบนเว็บเพจก็ได้
                                          3. ปัจจุบันการนํารูปภาพลงเว็บเพจควรคํานึงถึงที่มาและลิขสิทธิ์ของรูปภาพนั้นด้วย แต่บางเว็บไซต์ก็มีการแจกรูปภาพให้ฟรี
                      ซึ่งสามารถนํามาใช้ประโยชน์โดยไม่ต้องเสียค่าลิขสิทธิ์
                                          4. ควรเลือกใช้ภาพที่มีโทนเดียวกับส่วนประกอบอื่นภายในเว็บเพจ เพื่อความกลมกลืนไม่แตกต่างกัน 
                      กล่องข้อความ: ชนิดรูปภาพที่ใช้ในเว็บเพจ 
                 รูปภาพที่ใช้ในเว็บเพจมีอยู่ 3 ชนิดด้วยกัน ซึ่งแต่ละชนิดมีรายละเอียดและลักษณะที่แตกต่างกันดังนี้
                      1. GIF (Graphic Interchange Font) เป็นรูปแบบของไฟล์รูปภาพที่เป็นที่นิยมอย่างมาก
                      สามารถกําหนดสีได้สูงสุด 256 สี ทําภาพโปร่งและสร้างภาพเคลื่อนไหวได้
                      2. JPEG (Joint Photographic Experts Group) เป็นรูปแบบของไฟล์รูปภาพที่สามารถกําหนดสี ได้เป็นล้านสี
                      เหมาะสําหรับภาพถ?าย รูปภาพจากการสแกน
                      3. PNG (Portable Network Graphic) เป็นรูปแบบของไฟล์รูปภาพที่ใช้บนเว็บ แต่อาจใช้ไม่ได้ กับทุกบราวเซอร์สามารถใส่เอฟเฟ็กต์ได้
                      กล่องข้อความ: การใส่รูปภาพในเว็บเพจ 
              
                      ในตัวอย่างต่อไปนึ้ได้เก็บไฟล์ต่าง ๆเก็บไว้ที่ D:\Nfebanbung\Image\
                      1. วางเคอร์เซอร์ตรงตําแหน่งที่ต้องการใส่รูปภาพ
                      2. เลือก เมนู Insert  แล้วเลือกคำสั่ง Image                      3. ในช่อง Look in ให้เลือกโฟลเดอร์ที่เก็บไฟล์ภาพ
                      4. เลือกรูปภาพที่ต้องการ
                      5. คลิกปุ่ม OK                      6. ปรากฏหน้าต่างแสดงข้อความว่า “ให้พิมพ์ข้อความแทนรูปภาพ” เมื่อพิมพ์เสร็จ
                          คลิกปุ่ม OK
                      7. ปรับแต่งขนาดรูปภาพให้เหมาะสม
                      
 
                                รูปที่ 83 ขั้นตอนการใส่รูปภาพเว็บเพจ
 
                                                                                                                                รูปที่ 84 ตำแหน่งที่ต้องการใส่รูปภาพ
                      
                                                                                       รูปที่ 85 การเลือกรูปภาพ

                      
                                                             รูปที่ 86 ใส่ข้อความให้กับรูปภาพ
                          กล่องข้อความ:















                                รูปที่ 87 ใส่รูปภาพในตำแหน่งที่กำหนดไว้
                นอกจากนี้ยังมีอีกวิธีหนึ่งที่ค่อนข้างสะดวก รวดเร็ว ง่ายมาก โดยการทำดังนี้.-
                      1. คลิกที่ Insert
                      2.เลือก Common 
                      3. เลือกรูป 
                      4.ในช่อง Look in ให้เลือกโฟลเดอร์ที่เก็บไฟล์ภาพ
                      5. เลือกรูปภาพที่ต้องการ
                      6. คลิกปุ่ม OK
                      7.ปรากฏหน้าต่างแสดงข้อความว่า “ให้พิมพ์ข้อความแทนรูปภาพ” เมื่อพิมพ์เสร็จ
                      8. คลิกปุ่ม OK
                      9. ปรับแต่งขนาดรูปภาพให้เหมาะสม


   กล่องข้อความ:












                        รูปที่ 88 ขั้นตอนใส่รูปภาพอย่างเร็ว

กล่องข้อความ:











                                                            รูปที่ 89 การเลือกรูปภาพอย่างเร็ว
                                            


                                              รูปที่ 90 ใส่ข้อความให้กับรูปภาพ
กล่องข้อความ:





                                                  









                                 รูปที่ 91 ตำแหน่งรูปภาพที่กำหนด
                     กล่องข้อความ: การปรับขนาดรูปภาพในเว็บเพจ 
                     1. คลิกที่รูปภาพที่จะปรับขนาด จะปรากฏจุดยืด (Handle) ที่ขอบล่างขวา และมุมขวา ล่างของรูป
                    2. ลากจุดยืดเพื่อปรับขนาดตามต้องการ สามารถลากจุดยืดเพื่อปรับขนาดได้เล็กที่สุด 8x8 พิกเซลล์ และหาก ต้องการขนาดเล็กกว่านี้ให้
                        ใส่ค่าลงในส่วนของ W และ H ใน พาเนล Properties 


 
                                                        รูปที่ 92 การปรับรูปภาพในเว็บเพจ

                    กล่องข้อความ: การวางตำแหน่งรูปภาพในเว็บเพจ

                    1. คลิกที่รูปภาพที่จะจัดวาง
                    2. ในส่วนของ Align ของพาเนล Properties 
                    3. เลือกลักษณะการจัดวางตามต้องการ
 
                                                           รูปที่ 93 การวางตำแหน่งรูปภาพ
                                                คำอธิบาย
                                                Default                =  วางบนขอบล่าง (เป็นค่าปกติ)
                                                Baseine             =  วางขอบล่างของภาพเสมอแนวขอบล่างของข้อความ
                                                Middle                 =  วางกึ่งกลางของภาพเสมอกับขอบล่างของข้อความ
                                                Top                       =  วางขอบบนของภาพเสมอกับขอบบนที่สูงที่สุดของข้อความ
                                                Text Top            =  วางขอบบนของภาพเสมอกับขอบบนของข้อความ
                                                Absolute Middle =  วางกึ่งกลางของภาพเสมอกับกึ่งกลางของข้อความ
                                                Absolute Bottom = วางขอบล่างของภาพเสมอกับแนวขอบล่างของข้อความ
                                                Left                       =  วางภาพไว้ทางขอบซ้าย และจัดข้อความไว้ทางขอบขวา
                                                Right                   =  วางภาพไว้ทางขอบขวา และจัดข้อความไว้ทางซ้ายของภาพ

                    กล่องข้อความ: การจัดวางตำแหน่งรูปภาพ(เพิ่มเติม) 
                     1. คลิกที่รูปภาพที่จะปรับระยะให้ห่างจากข้อความ
                     2. ในพาเนล Properties กําหนดค่าในส่วนของ V Space และ H Space
กล่องข้อความ:


                                      

                              รูปที่ 94 วางตำแหน่งรูปภาพ
                     กล่องข้อความ: การใส่กรอบรูปภาพ 
                       1. คลิกที่รูปภาพที่จะใส่กรอบ
                       2. กําหนดค่าความหนาของเส้นกรอบในส่วนของ Border ในพาเนล Properties แล้ว กด Enter

                       รูปที่ 95  การใส่กรอบรูปภาพ 
                    กล่องข้อความ: การใส่รูปภาพเป็นฉากหลัง


     การใส่รูปภาพเป็นฉากหลัง (Background) ถือว่าเป็นการเพิ่มความสวยงามและน่าสนใจให้กับ เว็บเพจ ซึ่งภาพที่น่าจะนํามาเป็นฉากหลัง
ต้องไม่มีลวดลายหรือสีสันมากเกินไป เพื่อไม่ให้ผู้ชมเว็บไซต์สับสน หรือสีของพื้นหลังอาจตัดกับสีของข้อความทําให้ลำบากในการอ่านได้
      ดังนั้นภาพที่นํามาเป็นฉากหลังต้องเป็นสีที่ กลมกลืนกับข้อความหรือรูปภาพที่วางไว้ในเว็บเพจ ซึ่งการใส่รูปภาพเป็นฉากหลังมีขั้นตอนดังนี้
          1. คลิกที่เมนู  Modify >Page Properties
          2. คลิกที่หัวข้อ Apperance          3. คลิกที่ปุ่ม Browse...
          4. เลือก Look in ที่เก็บเว็บเพจ
          5. เลือกไฟล์รูปภาพที่ต้องการนํามาเป็นฉากหลัง
          6. คลิกที่ปุ่ม OK
          7. จะปรากฏไฟล์ภาพที่เลือกไว้
          8. คลิกที่ปุ่ม OK ที่หน้าต่าง Page Properties อีกครั้ง
          9. ปรากฏภาพที่นํามาเป็นฉากหลังเรียบร้อยแล้ว 
          รูปที่ 96 ขั้นตอนใส่รูปภาพฉากหลัง
 
                                                                 รูปที่ 97 การใส่รูปภาพฉากหลัง

                                                                                  รูปที่ 98 การเลือกรูปภาพฉากหลัง



                                                 รูปที่ 100 การแสดงผลเลือกรูปภาพฉากหลัง

     นอกจากนี้ยังมีอีกวิธีหนึ่งที่ค่อนข้างสะดวก รวดเร็ว ง่ายมาก โดยมีวิธีทำดังนี้.-
     1. คลิกที่ ปุ่ม Pageroptis
     2. คลิกที่หัวข้อ Apperance
     3. คลิกที่ปุ่ม Browse...     4. เลือก Look in ที่เก็บเว็บเพจ
     5. เลือกไฟล์รูปภาพที่ต้องการนํามาเป็นฉากหลัง
     6. คลิกที่ปุ่ม OK
     7. ปรากฏภาพที่นํามาเป็นฉากหลังเรียบร้อยแล้ว 
 
                                                        รูปที่ 102 ขั้นตอนเลือกรูปภาพฉากหลังอย่างรวดเร็ว

                                             รูปที่ 103 การเลือกรูปภาพอย่างเร็ว
 
                                      รูปที่ 104 การแสดงรูปภาพตามตำแหน่งที่กำหนดไว้                                                                  

ไม่มีความคิดเห็น:

แสดงความคิดเห็น