07 ใบเนื้อหา หน่วยที่ 5

กลุ่มสาระ : การงานอาชีพและเทคโนโลยี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 5 การใส่ภาพกราฟิกในเว็บไซต์

ใบเนื้อหา หน้าท่ี

แผ่นที่ :

หน่วยที่ 5 การใส่ภาพกราฟิกในเว็บไซต์

สาระการเรียนรู้ 5.1 ลักษณะของภาพกราฟิกบนเว็บเพจ 5.2 การเตรียมรูปภาพส าหรับเว็บเพจ 5.3 การใส่รูปภาพบนเว็บเพจ 5.4 การปรับแต่งรูปภาพบนเว็บเพจ

วัตถุประสงค์เชิงพฤติกรรม 5.1 บอกลักษณะของภาพกราฟิกบนเว็บเพจได ้ 5.2 อธิบายวิธีการเตรียมรูปภาพส าหรับเว็บเพจได ้ 5.3 อธิบายวิธีการใส่รปูภาพบนเว็บเพจได ้ 5.4 อธิบายการปรับแต่งรูปภาพบนเว็บเพจได้

กลุ่มสาระ : การงานอาชีพและเทคโนโลย ี ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203 หัวข้อ : หน่วยที่ 5 การใส่ภาพกราฟิกในเว็บไซต์


แผ่นที่ : รูปภาพท่ีใช้งานด้านการท าเว็บเพจโดยทั่วไปแบ่งออกเป็น 2 ประเภท คือ 1. ภาพจริง(Physical Image) เป็นภาพที่เกดิจากวัตถุของจริง เช่น ภาพถ่าย เป็นต้น 2. ภาพกราฟิก(Computer Graphic) เป็นภาพที่เกิดจากเป็นการสื่อความหมายด้านการใช้ภาพวาด ภาพสเกต ด้วยการใช้เสน้ ภาพวาด สญัลักษณ์ ภาพถ่าย กราฟ แผนภูมิ การต์ูน ฯลฯ หรือด้วยการวาดในโปรแกรมคอมพิวเตอร์ เช่น Illustrator เป็นต้น ภาพกราฟิกท่ีใช้กับคอมพิวเตอร ์เป็นภาพที่เกิดบนจอคอมพิวเตอร์ เกิดจากการท างานของโหมดสี RGB ซึ่งประกอบด้วย สีแดง (Red) สีเขียว (Green) และสีน าเงนิ (Blue) โดยใช้หลักการยิงประจไุฟฟ้าให้เกิดการเปล่งแสงของสีทั ง 3 สี มาผสมกันท าให้เกิดเป็นจุดสีเล็ก ๆ ที่เรยีกว่า พิกเซล (Pixel) โดยพิกเซลจะมหีลากหลายสี เมื่อน ามาวางต่อกันจะเกดิเป็นรูปภาพ ซึ่งภาพท่ีใช้กับเครื่องคอมพิวเตอร ์มี 2 ประเภท คือ ภาพแบบบิตแมป (Bitmap) หรือ ภาพแบบราสเตอร ์(Raster) คือ ภาพที่เกิดจากการรวมกันของพิกเซล ซึ่งถูกกาหนดความละเอียดไว้คงที่ตายตัว ไฟล์ภาพมหีลายรูปแบบ อาทิ เช่น BMP, TIF, JPG, PCT ฯลฯ •ข้อดีของภาพแบบ บิตแมป คือ ภาพมีความสวยงามเป็นธรรมชาต ิ •ข้อเสียของภาพแบบบิตแมป คือ เมื่อขยายภาพแล้วความสวยงามจะลดลงเพราะเห็นจุดสีใหญ่ขึ นนั่นคือมีความละเอียดลดลง แต่ถ้ากาหนดความละเอียดไว้สูงๆ ก็จะเปลืองหน่วยความจา ภาพแบบเวกเตอร์ (Vector) หรือ ภาพแบบเชิงวัตถ ุ(Object-Oriented Graphic) คือ รปูภาพท่ีสร้างจากคอมพิวเตอร ์โดยให้แต่ละส่วนของภาพได้แก ่เส้น รูปทรง ที่เป็นอิสระต่อกัน นามาวางประกอบกันเป็นภาพ •ข้อดีของภาพแบบเวกเตอร์คือเมื่อขยายภาพแล้วความละเอียดจะยังคงเดิม และประหยดัหน่วยความจากว่าภาพแบบบิตแมป •ข้อเสียของภาพแบบเวกเตอร์ คือ ภาพเกิดจากการสังเคราะห ์อาจจะดไูมส่วยงามดั่งธรรมชาต ิ

ภาพเปรียบเทียบความแตกต่างระหว่าง Bitmap และ Vector

ภาพกราฟิกท่ีนิยมน ามาใช้บนเว็บเพจ โดยมากจะมี 3 นามสกุล คือ .jpeg, .gif, .png ซึ่งมีรายละเอียดของภาพดังนี .lpeg เป็นไฟล์ที่มีการบันทึกข้อมูลแบบสญูเสียข้อมูล ภาพที่ได้น ามาใช้งานท่ัว ๆไป ไฟล์ประเภทนี จะตัดรายละเอียดของภาพบางส่วนออก ซึ่งเป็นรายละเอียดที่ไม่สามารถมองเห็นสไีด้มากนัก เหมาะส าหรับน าไปลงอินเทอร์เน็ต .gif เป็นไฟล์ที่มีการบีบอดัขอ้มูลสูง แต่จะให้ความละเอียดของภาพมาก ท าให้ไฟล์มีขนาดเล็กมาก มักน ามาใช้งานบนอินเทอร์เนต็มากที่สุด เพราะไฟล์ที่มีขนาดเล็กท าให้ไม่เสียเวลาในการเปดิหน้าเว็บไซต์ที่มรีูปภาพประกอบได้ในเวลาอันรวดเร็ว .png เป็นไฟล์ที่มีความยืดหยุ่นสูง ใช้งานได้กับเครื่องที่มีการเปลี่ยนแพลตฟอร์มการท างาน และสามารถท างานข้ามระบบปฏิบตัิการ เช่น Linux และ Windows การแสดงผลจะท าไดร้วดเร็วกว่า .Jpeg และสามารถท าแบบโปร่งแสงได ้

5.1 ลักษณะของภาพกราฟิกบนเว็บเพจ



แผ่นที่ : การเลือกภาพให้เหมาะสมกับเว็บเพจ 1. จ านวนภาพ ไม่มากหรือน้อยจนเกินไป มีประโยขน์ตอ่เว็บเพจมองแล้วเกิดความสวยงามไมเ่กะกะหรือรุงรัง 2. ขนาดภาพ ควรก าหนดขนาดภาพให้เหมาะสมกบัเวบ็เพจ 3. ความสวยงามของภาพ จัดเป็นองค์ประกอบท่ีส าคญัอีกอย่างหนึ่งที่ท าให้ผู้เข้าใช้งานเว็บไซต์ รูส้ึกหน้าเข้ามาศึกษา เรียนรู้ 4. ควรก าหนดหน่วยวัดมาตรฐานของภาพให้เป็นมาตรฐานเดียวกัน 5. ควรความละเอียดของภาพ ไม่ให้เกิดปญัหาภาพแตกหรือสื่อความหมายของภาพผิดไป

5.3.1 การแทรกภาพ มีวิธีการ ดังนี 1. คลิกเลือกต าแหน่งที่ต้องการวางภาพ คลิกที่เมนคู าสั่ง Insert > Image

จะปรากฏหน้าตา่ง Select Image Source ดังภาพ ท าการเลือกโฟลเดอร์ในช่อง Look in เลือกไฟล์ภาพที่ต้อง แล้วคลิกปุม่ OK

5.2 การเตรียมรูปภาพส าหรับเว็บเพจ

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



แผ่นที่ : ถ้ามีหน้าจอนี ปรากฏขึ นให้ก าหนดคณุสมบัติของ Image Tag ให้คลิก OK

ภาพที่เลือกจะแทรกอยู่ในเว็บเพจ ดังภาพ



แผ่นที่ : 5.4.1 การปรับขนาดภาพ ภาพที่แทรกในเว็บเพจอาจมีขนาดใหม่หรือเล็กจนเกินไป สามารถปรับขนาดด้วยการใช้จุดยึด(Handle) และ Property Inspector ดังนี 1. ปรับขนาดด้วยการใช้จุดยึด(Handle) คลิกท่ีรูปภาพจะปรากฏกรอบสีเ่หลีย่มรอบรูป คลิกท่ีจุดยดึ ลากเม้าสย์่อ ขยายขนาดภาพ ท าได้ทั งด้านบน ด้านล่าง และตามแนวทแยงมุม

2. ปรับขนาดด้วยการใช้ Property Inspector ปรับความกว้าง(W) และสูง(H) ของภาพตามความเหมาะสม หากต้องการให้ภาพกลับไปเป็นขนาดเดิม ในคลิกปุ่ม Reset Size

จะได้ภาพท่ีปรบัขนาดแล้ว

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

คลิกปุ่ม Reset Size



แผ่นที่ : 5.4.2 การวางต าแหน่งรูปภาพ การวางต าแหน่งรูปภาพในเว็บเพจเป็นการจดัให้วางบนเว็บเพจ การจัดชิดซ้าย(Left) กึ่งกลาง(Center) ชิดขวา(Right) และเสมอขอบ(Justify) ท าได้ ดังนี 1. คลิกท่ีภาพ แล้วเลือกลักษณะการวางโดยคลิกค าสั่ง Fomat > Align แล้วท าการเลือกค าสั่งที่ต้องการ

5.4.3 การใส่เส้นขอบให้กับรูปภาพ 1. คลิกท่ีรูปภาพที่ต้องการใส่เส้นขอบ 2. ไปท่ี Property Inspector ในช่อง Border ให้ใส่ขนาดเส้นขอบของรูปภาพตามความต้องการ

จะได้ภาพท่ีมเีส้นขอบตามขนาดที่ต้องการ

ใส่ขนาดเส้นขอบ




5.4.4 การน ารูปภาพมาใส่พื้นหลัง(background) วิธีการน ารูปภาพมาใส่พื นหลังมดีังนี 1. เลือกค าสั่ง Modify > Page Properties

จะปรากฏหน้าต่าง Page Properties

2. คลิก Browse ที่ background Image Source > เลือกภาพที่ต้องการ >คลิกปุม่ OK




จะได้ภาพพื นหลงัดังภาพ

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

แก้ไขภาพด้วยโปรแกรมอื่น

ลดขนาด/ท าให้ภาพโปร่งใส

ปรับขนาดภาพต้นฉบับ

ตัดภาพ

ปรับค่าความสว่างของภาพ

ปรับค่าความคมชัดของภาพ




5.4.6 การจองพ้ืนที่วางภาพบนเว็บเพจ 1. คลิกเลือกต าแหน่งที่จะวางภาพ 2. เลือกค าสั่ง Insert > Image Objects > Image Placeholder

3. จะปรากฏหนา้ต่าง image Placeholder ขึ นมาให้ก าหนดรายละเอียด แล้วคลิก OK

จะปรากฏพื นท่ีวา่งบนเว็บเพจในต าแหน่งที่เลือกไว ้




5. เมื่อได้ภาพแล้วสามารถแทรกภาพด้วยการ คลกิท่ีต าแหน่งภาพ แล้วท าการเลือกภาพที่ต้องการวาง คลิก OK

ภาพท่ีแทรกเข้ามาจะมาปรากฏตรงบรเิวณต าแหน่งให้วางภาพ

Documents

07 ใบเนื้อหา หน่วยที่ 5