การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป

งานนำเสนอเรื่อง: "การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป"— ใบสำเนางานนำเสนอ:

1 การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป
By Juthawut Chantharamalee Suan Dusit Rajabhat University (Computer Science)

2 บทที่ 6 การใส่รูปลงในเส็บเพจ
บทที่ 6 การใส่รูปลงในเส็บเพจ บทที่ 2 Suan Dusit Rajabhat University (Computer Science)

3 บทนำ ภายในเว็บเพจของเรานอกจากจะมีเนื้อหาที่มีประโยชน์แก่ผู้เข้าชมแล้ว หากมีการเพิ่มรูป ภาพกราฟิกต่างๆ ก็จะช่วยให้เว็บเพจมีสีสันสวยงามน่าสนใจมากยิ่งขึ้น ดังนั้นเราจะเห็น ได้ว่าเว็บไซต์จำนวนมากจึงนิยมนำรูปภาพมาใช้ตกแต่งและอธิบายเนื้อหาเพื่อให้ผู้เข้ามา เยี่ยมชมเว็บไซต์ได้เห็นภาพและเข้าใจเนื้อหามากขึ้น Suan Dusit Rajabhat University (Computer Science)

4 ข้อพิจารณาในการเลือกใช้รูปภาพ
ในการนำภาพมาประกอบข้อความบนเว็บเพจนั้น ควรพิจารณาและเลือกรูปภาพที่นำมาใช้ให้ เหมาะสมโดยมีข้อพิจารณาดังนี้ 1. ไม่ควรเน้นรูปภาพภายในเว็บเพจมากจนเกินไป ควรจะมีข้อความและรูปภาพที่สมดุลกัน 2. การใช้รูปภาพที่เป็นไฟล์ขนาดใหญ่จะทำให้การโหลดเว็บเพจใช้เวลานานกว่าจะแสดงภาพ ดังนั้นจึงควรใช้ภาพที่มีพอเหมาะกับสิ่งที่เราต้องการสื่อกับผู้ชม หรืออาจใช้โปรแกรมทาง กราฟิก เช่น Photoshop หรือ ACDSee ทำการลดขนาดภาพ (Resize) ก่อนนำมาลงบนเว็บเพจก็ได้ 3. ปัจจุบันการนำรูปภาพลงเว็บเพจควรคำนึงถึงที่มาและลิขสิทธิ์ของรูปภาพนั้นด้วย แต่ บางเว็บไซต์ก็มีการแจกรูปภาพให้ฟรี ซึ่งสามารถนำมาใช้ประโยชน์โดยไม่ต้องเสียค่าลิขสิทธิ์ 4. ควรเลือกใช้ภาพที่มีโทนเดียวกับส่วนประกอบอื่นภายในเว็บเพจ เพื่อความกลมกลืนไม่ แตกต่างกัน Suan Dusit Rajabhat University (Computer Science)

5 ชนิดของรูปภาพที่ใช้ในเว็บเพจ
ชนิดของรูปภาพที่ใช้ในเว็บเพจมีอยู่ 3 ชนิดด้วยกัน ดังนี้ GIF (Graphic Interchange Format) นับเป็นไฟล์ภาพที่สามารถ แสดงผลกับเบราเซอร์ได้ทุกชนิด จึงได้รับความนิยม โดยส่วนมากมักจะใช้รูปภาพไฟล์ .gif กำหนดฉากหลังหรือพื้นที่โปรงใส การใช้ทำภาพเคลื่อนไหว (Animation) ภาพโลโก้ ตัวการ์ตูน ภาพตัวอักษรลายเส้นต่างๆ JPG (Joint Photographic Expert Group) เป็นไฟล์ภาพที่แสดงสีได้ ถึง 16.7 ล้านสี เหมาะสำหรับภาพที่ใช้สีจำนวนมาก ภาพที่มีการไล่ระดับสีอย่างต่อเนื่อง หรือภาพถ่ายทั่วไป Suan Dusit Rajabhat University (Computer Science)

6 ชนิดของรูปภาพที่ใช้ในเว็บเพจ
PNG (Portable Network Graphic) เป็นไฟล์ภาพที่ไม่ได้รับความนิยม มากนักเมื่อเทียบกับ GIF, JPG เนื่องจากเป็นรูปแบบใหม่ จึงไม่สามารถแสดงผลได้ ทุกเบราเซอร์ Suan Dusit Rajabhat University (Computer Science)

7 การใส่รูปภาพลงบนเว็บ
Suan Dusit Rajabhat University (Computer Science)

8 การจัดการเกี่ยวกับรูปภาพ
เมื่อเรานำรูปภาพมาวางไว้ในเว็บเพจแล้ว หากเราต้องการจัดเกี่ยวกับรูปภาพในลักษณะ ต่างๆ เช่น การปรับขนาด การจัดวางรูป การใส่ข้อความอธิบายรูปภาพ การใส่กรอบ ให้รูปภาพ การกำหนดระยะห่างระหว่างรูปภาพ เป็นต้น เราสามารถจัดการเกี่ยวกับ รูปภาพได้โดยใช้ Suan Dusit Rajabhat University (Computer Science)

9 การจัดการเกี่ยวกับรูปภาพ
Suan Dusit Rajabhat University (Computer Science)

10 การจัดการเกี่ยวกับรูปภาพ
เราสามารถจัดวางรูปภาพประกอบข้อความบนหน้าเว็บเพจให้มีความสวยงาม เป็นที่น่าดู ของผู้เข้ามาเยี่ยมชมเว็บไซต์ โดยมีขั้นตอนดังนี้ Suan Dusit Rajabhat University (Computer Science)

11 ในการจัดวางรูปภาพประกอบข้อความมีรายละเอียดดังนี้
Default เป็นการจัดเรียงแบบปกติ Baseline เป็นการจัดให้ขอบล่างของรูปภาพอยู่แนวเดียวกับบรรทัดของข้อความ Top เป็นการจัดให้ขอบบนของรูปภาพอยู่แนวเดียวกันกับบรรทัดของข้อความ Middle เป็นการจัดให้ตรงกลางของรูปภาพอยู่แนวเดียวกันกับบรรทัดของข้อความ Bottom เป็นการจัดให้ขอบล่างของรูปภาพอยู่แนวเดียวกันกับบรรทัดของข้อความคล้ายการจัดแบบ Baseline  Text Top เป็นการจัดให้ขอบบนของรูปภาพอยู่แนวเดียวกับบรรทัดของข้อความคล้ายการจัดแบบ Top Absolute Bottom เป็นการจัดให้ขอบล่างของรูปภาพอยู่แนวเดียวกับส่วนกลางของบรรทัดข้อความ Left เป็นการจัดให้รูปภาพอยู่ทางซ้ายมือของบรรทัดข้อความ Right เป็นการจัดให้รูปภาพอยู่ทางขวามือของบรรทัดข้อความ Suan Dusit Rajabhat University (Computer Science)

12 การใส่รูปภาพเป็นฉากหลัง
การใส่รูปภาพเป็นฉากหลัง (Background) ถือว่าเป็นการเพิ่มความสวยงามและ น่าสนใจให้กับเว็บเพจ ซึ่งภาพที่น่าจะนำมาเป็นฉากหลังต้องไม่มีลวดลายหรือสีสันมาก เกินไป เพื่อไมให้ผู้ชมเว็บไซต์สับสนหรือสีของพื้นหลังอาจตัดกับสีของข้อความทำให้ ลำบากในการอ่านได้ ดังนั้นภาพที่นำมาเป็นฉากหลังต้องเป็นสีที่กลมกลืนกับข้อความ หรือรูปภาพที่วางไว้ในเว็บเพจ ซึ่งการใส่รูปภาพเป็นฉากหลังมีขั้นตอนดังนี้ Suan Dusit Rajabhat University (Computer Science)

13 การใส่รูปภาพเป็นฉากหลัง
Suan Dusit Rajabhat University (Computer Science)

14 The End Unit 6 Suan Dusit Rajabhat University (Computer Science)