Submit Search
Upload
การแทรกรูปภาพในเว็บเพจ
•
0 likes
•
817 views
ปิยะดนัย วิเคียน
Follow
การแทรกรูปภาพในเว็บเพจ
Read less
Read more
Education
Report
Share
Report
Share
1 of 13
Download now
Download to read offline
Recommended
Lernning 14
Lernning 14
Mayuree Janpakwaen
ลักษณะของข้อมูลที่ดีและการจัดเก็บข้อมูล
ลักษณะของข้อมูลที่ดีและการจัดเก็บข้อมูล
ปิยะดนัย วิเคียน
การจัดรูปแบบข้อความ
การจัดรูปแบบข้อความ
ปิยะดนัย วิเคียน
การจัดรูปแบบข้อความ
การจัดรูปแบบหน้าเว็บเพจ
การจัดรูปแบบหน้าเว็บเพจ
ปิยะดนัย วิเคียน
การจัดรูปแบบหน้าเว็บเพจ
เริ่มต้นสร้างเว็บไซต์
เริ่มต้นสร้างเว็บไซต์
ปิยะดนัย วิเคียน
เริ่มต้นสร้างเว็บไซต์
การสื่อสารข้อมูล
การสื่อสารข้อมูล
ปิยะดนัย วิเคียน
งานนำเสนอ เรื่อง การสื่อสารข้อมูล ของนักเรียนระดับชั้นมัธยมศึกษาปีที่ 5/1 ปีการศึกษา 2559
อุปกรณ์การสื่อสาร
อุปกรณ์การสื่อสาร
ปิยะดนัย วิเคียน
งานนำเสนอ เรื่อง อุปกรณ์การสื่อสาร ของนักเรียนระดับชั้นมัธยมศึกษาปีที่ 5/1 ปีการศึกษา 2559 โรงเรียนเสริมงามวิทยาคม
การสื่อสารข้อมูล
การสื่อสารข้อมูล
ปิยะดนัย วิเคียน
งานนำเสนอ เรื่อง การสื่อสารข้อมูล จัดทำโดยนักเรียนระดับชั้นมัธยมศึกษาปีที่ 5/2 ปีการศึกษา 2559 โรงเรียนเสริมงามวิทยาคม
Recommended
Lernning 14
Lernning 14
Mayuree Janpakwaen
ลักษณะของข้อมูลที่ดีและการจัดเก็บข้อมูล
ลักษณะของข้อมูลที่ดีและการจัดเก็บข้อมูล
ปิยะดนัย วิเคียน
การจัดรูปแบบข้อความ
การจัดรูปแบบข้อความ
ปิยะดนัย วิเคียน
การจัดรูปแบบข้อความ
การจัดรูปแบบหน้าเว็บเพจ
การจัดรูปแบบหน้าเว็บเพจ
ปิยะดนัย วิเคียน
การจัดรูปแบบหน้าเว็บเพจ
เริ่มต้นสร้างเว็บไซต์
เริ่มต้นสร้างเว็บไซต์
ปิยะดนัย วิเคียน
เริ่มต้นสร้างเว็บไซต์
การสื่อสารข้อมูล
การสื่อสารข้อมูล
ปิยะดนัย วิเคียน
งานนำเสนอ เรื่อง การสื่อสารข้อมูล ของนักเรียนระดับชั้นมัธยมศึกษาปีที่ 5/1 ปีการศึกษา 2559
อุปกรณ์การสื่อสาร
อุปกรณ์การสื่อสาร
ปิยะดนัย วิเคียน
งานนำเสนอ เรื่อง อุปกรณ์การสื่อสาร ของนักเรียนระดับชั้นมัธยมศึกษาปีที่ 5/1 ปีการศึกษา 2559 โรงเรียนเสริมงามวิทยาคม
การสื่อสารข้อมูล
การสื่อสารข้อมูล
ปิยะดนัย วิเคียน
งานนำเสนอ เรื่อง การสื่อสารข้อมูล จัดทำโดยนักเรียนระดับชั้นมัธยมศึกษาปีที่ 5/2 ปีการศึกษา 2559 โรงเรียนเสริมงามวิทยาคม
กลุ่ม 1 วิวัฒนาการของการสื่อสารและเทคโนโลยี
กลุ่ม 1 วิวัฒนาการของการสื่อสารและเทคโนโลยี
ปิยะดนัย วิเคียน
วิวัฒนาการของการสื่อสารและเทคโนโลยี
ตัวอย่างเอกสารการจัดทำวีดิทัศน์และภาพยนตร์
ตัวอย่างเอกสารการจัดทำวีดิทัศน์และภาพยนตร์
ปิยะดนัย วิเคียน
ตัวอย่างเอกสารการจัดทำวีดิทัศน์และภาพยนตร์
ตัวอย่างบทวีดีทัศน์และภาพยนตร์
ตัวอย่างบทวีดีทัศน์และภาพยนตร์
ปิยะดนัย วิเคียน
ตัวอย่างบทหนังสั้น
เฉลยแบบทดสอบ html
เฉลยแบบทดสอบ html
ปิยะดนัย วิเคียน
แบบทดสอบ html เรื่อง อุปกรณ์คอมพิวเตอร์
เฉลยแบบทดสอบ
เฉลยแบบทดสอบ
ปิยะดนัย วิเคียน
เฉลยแบบทดสอบกลางภาคเรียนที่ 1 ปีการศึกษา 2557
ใบงาน
ใบงาน
ปิยะดนัย วิเคียน
รูปร่างเครือข่าย
รูปร่างเครือข่าย
ปิยะดนัย วิเคียน
เครือข่ายคอมพิวเตอร์
เครือข่ายคอมพิวเตอร์
ปิยะดนัย วิเคียน
สื่อกลางในการสื่อสารข้อมูล
สื่อกลางในการสื่อสารข้อมูล
ปิยะดนัย วิเคียน
การสื่อสารข้อมูล
การสื่อสารข้อมูล
ปิยะดนัย วิเคียน
โครงการสอน 1.56
โครงการสอน 1.56
ปิยะดนัย วิเคียน
ผลงานการออกแบบ Logo
ผลงานการออกแบบ Logo
ปิยะดนัย วิเคียน
เฉลยแบบทดสอบปลายภาค ม.5
เฉลยแบบทดสอบปลายภาค ม.5
ปิยะดนัย วิเคียน
โปรแกรมไม่พึงประสงค์
โปรแกรมไม่พึงประสงค์
ปิยะดนัย วิเคียน
ผลกระทบจากการใช้งานอินเทอร์เน็ต
ผลกระทบจากการใช้งานอินเทอร์เน็ต
ปิยะดนัย วิเคียน
บริการบนอินเทอร์เน็ต
บริการบนอินเทอร์เน็ต
ปิยะดนัย วิเคียน
เวิลด์ไวด์เว็บ
เวิลด์ไวด์เว็บ
ปิยะดนัย วิเคียน
การกำหนดที่อยู่บนอินเทอร์เน็ต
การกำหนดที่อยู่บนอินเทอร์เน็ต
ปิยะดนัย วิเคียน
อินเทอร์เน็ต
อินเทอร์เน็ต
ปิยะดนัย วิเคียน
จริยธรรมในโลกของข้อมูล
จริยธรรมในโลกของข้อมูล
ปิยะดนัย วิเคียน
More Related Content
More from ปิยะดนัย วิเคียน
กลุ่ม 1 วิวัฒนาการของการสื่อสารและเทคโนโลยี
กลุ่ม 1 วิวัฒนาการของการสื่อสารและเทคโนโลยี
ปิยะดนัย วิเคียน
วิวัฒนาการของการสื่อสารและเทคโนโลยี
ตัวอย่างเอกสารการจัดทำวีดิทัศน์และภาพยนตร์
ตัวอย่างเอกสารการจัดทำวีดิทัศน์และภาพยนตร์
ปิยะดนัย วิเคียน
ตัวอย่างเอกสารการจัดทำวีดิทัศน์และภาพยนตร์
ตัวอย่างบทวีดีทัศน์และภาพยนตร์
ตัวอย่างบทวีดีทัศน์และภาพยนตร์
ปิยะดนัย วิเคียน
ตัวอย่างบทหนังสั้น
เฉลยแบบทดสอบ html
เฉลยแบบทดสอบ html
ปิยะดนัย วิเคียน
แบบทดสอบ html เรื่อง อุปกรณ์คอมพิวเตอร์
เฉลยแบบทดสอบ
เฉลยแบบทดสอบ
ปิยะดนัย วิเคียน
เฉลยแบบทดสอบกลางภาคเรียนที่ 1 ปีการศึกษา 2557
ใบงาน
ใบงาน
ปิยะดนัย วิเคียน
รูปร่างเครือข่าย
รูปร่างเครือข่าย
ปิยะดนัย วิเคียน
เครือข่ายคอมพิวเตอร์
เครือข่ายคอมพิวเตอร์
ปิยะดนัย วิเคียน
สื่อกลางในการสื่อสารข้อมูล
สื่อกลางในการสื่อสารข้อมูล
ปิยะดนัย วิเคียน
การสื่อสารข้อมูล
การสื่อสารข้อมูล
ปิยะดนัย วิเคียน
โครงการสอน 1.56
โครงการสอน 1.56
ปิยะดนัย วิเคียน
ผลงานการออกแบบ Logo
ผลงานการออกแบบ Logo
ปิยะดนัย วิเคียน
เฉลยแบบทดสอบปลายภาค ม.5
เฉลยแบบทดสอบปลายภาค ม.5
ปิยะดนัย วิเคียน
โปรแกรมไม่พึงประสงค์
โปรแกรมไม่พึงประสงค์
ปิยะดนัย วิเคียน
ผลกระทบจากการใช้งานอินเทอร์เน็ต
ผลกระทบจากการใช้งานอินเทอร์เน็ต
ปิยะดนัย วิเคียน
บริการบนอินเทอร์เน็ต
บริการบนอินเทอร์เน็ต
ปิยะดนัย วิเคียน
เวิลด์ไวด์เว็บ
เวิลด์ไวด์เว็บ
ปิยะดนัย วิเคียน
การกำหนดที่อยู่บนอินเทอร์เน็ต
การกำหนดที่อยู่บนอินเทอร์เน็ต
ปิยะดนัย วิเคียน
อินเทอร์เน็ต
อินเทอร์เน็ต
ปิยะดนัย วิเคียน
จริยธรรมในโลกของข้อมูล
จริยธรรมในโลกของข้อมูล
ปิยะดนัย วิเคียน
More from ปิยะดนัย วิเคียน
(20)
กลุ่ม 1 วิวัฒนาการของการสื่อสารและเทคโนโลยี
กลุ่ม 1 วิวัฒนาการของการสื่อสารและเทคโนโลยี
ตัวอย่างเอกสารการจัดทำวีดิทัศน์และภาพยนตร์
ตัวอย่างเอกสารการจัดทำวีดิทัศน์และภาพยนตร์
ตัวอย่างบทวีดีทัศน์และภาพยนตร์
ตัวอย่างบทวีดีทัศน์และภาพยนตร์
เฉลยแบบทดสอบ html
เฉลยแบบทดสอบ html
เฉลยแบบทดสอบ
เฉลยแบบทดสอบ
ใบงาน
ใบงาน
รูปร่างเครือข่าย
รูปร่างเครือข่าย
เครือข่ายคอมพิวเตอร์
เครือข่ายคอมพิวเตอร์
สื่อกลางในการสื่อสารข้อมูล
สื่อกลางในการสื่อสารข้อมูล
การสื่อสารข้อมูล
การสื่อสารข้อมูล
โครงการสอน 1.56
โครงการสอน 1.56
ผลงานการออกแบบ Logo
ผลงานการออกแบบ Logo
เฉลยแบบทดสอบปลายภาค ม.5
เฉลยแบบทดสอบปลายภาค ม.5
โปรแกรมไม่พึงประสงค์
โปรแกรมไม่พึงประสงค์
ผลกระทบจากการใช้งานอินเทอร์เน็ต
ผลกระทบจากการใช้งานอินเทอร์เน็ต
บริการบนอินเทอร์เน็ต
บริการบนอินเทอร์เน็ต
เวิลด์ไวด์เว็บ
เวิลด์ไวด์เว็บ
การกำหนดที่อยู่บนอินเทอร์เน็ต
การกำหนดที่อยู่บนอินเทอร์เน็ต
อินเทอร์เน็ต
อินเทอร์เน็ต
จริยธรรมในโลกของข้อมูล
จริยธรรมในโลกของข้อมูล
การแทรกรูปภาพในเว็บเพจ
1.
ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม
https://krupiyadanai.wordpress.com การแทรกรูปภาพในเว็บเพจ นอกจากเราจะเพิ่มเนื้อหาที่เป็นข้อความในหน้าเว็บเพจแล้ว เรายังสามารถแทรกรูปภาพเพื่อให้ เนื้อหาของเว็บเพจเข้าใจง่ายมากยิ่งขึ้น สร้างความสวยงามให้กับเว็บเพจเพื่อดึงดูดความสนใจจากผู้ที่มาเยี่ยม ชมได้ นอกจากนี้เรายังสามารถประยุกต์ใช้งานรูปภาพให้กลายเป็นป้ายโฆษณาแบบแบนเนอร์ พื้นหลังหน้าเว็บ เพจ ปุ่มคลิกเพื่อเชื่อมโยง ตลอดจนสัญลักษณ์ต่าง ๆ ได้ ข้อพิจารณาในการเลือกใช้รูปภาพ ในการนาภาพมาประกอบข้อความบนเว็บเพจนั้น ควรพิจารณาและเลือกรูปภาพที่นามาใช้ให้ เหมาะสม โดยมีข้อพิจารณาดังนี้ 1. ไม่ควรเน้นรูปภาพภายในเว็บเพจมากจนเกินไป ควรจะมีข้อความและรูปภาพที่สมดุลกัน 2. การใช้รูปภาพที่เป็นไฟล์ขนาดใหญ่จะทาให้การโหลดเว็บเพจใช้เวลานานกว่าจะแสดงภาพ ดังนั้น จึงควรใช้ภาพที่มีพอเหมาะกับสิ่งที่เราต้องการสื่อกับผู้ชม หรืออาจใช้โปรแกรมทางกราฟิก เช่น Photoshop หรือ ACDSee ทาการลดขนาดภาพ (Resize) ก่อนนามาลงบนเว็บเพจก็ได้ 3. ปัจจุบันการนารูปภาพลงเว็บเพจควรคานึงถึงที่มาและลิขสิทธิ์ของรูปภาพนั้นด้วย แต่บางเว็บไซต์ก็ มีการแจกรูปภาพให้ฟรี ซึ่งสามารถนามาใช้ประโยชน์โดยไม่ต้องเสียค่าลิขสิทธิ์ 4. ควรเลือกใช้ภาพที่มีโทนเดียวกับส่วนประกอบอื่นภายในเว็บเพจ เพื่อความกลมกลืนไม่แตกต่างกัน ชนิดของไฟล์รูปภาพที่ใช้ในเว็บ รูปภาพที่ใช้ในเว็บเพจ มีอยู่ 3 ชนิดด้วยกัน ซึ่งแต่ละชนิดมีรายละเอียดและลักษณะที่แตกต่างกัน ดังนี้ 1. GIF (Graphic Interchange Font) เป็นรูปแบบของไฟล์รูปภาพที่เป็นที่นิยมอย่างมากเนื่องจาก ขนาดของไฟล์เล็กมากจึงทาให้สามารถโหลดภาพได้เร็วขึ้น สามารถกาหนดสีได้สูงสุด 256 สี เหมาะสาหรับ การทาภาพโปร่งและสร้างภาพเคลื่อนไหว 2. JPEG (Joint Photographic Experts Group) เป็นรูปแบบของไฟล์รูปภาพที่มีขนาดของไฟล์ใหญ่ กว่า GIF สามารถกาหนดสี ได้16 ล้านสีเหมาะสาหรับภาพถ่าย รูปภาพจากการสแกน 3. PNG (Portable Network Graphic) เป็นรูปแบบของไฟล์รูปภาพที่ใช้บนเว็บ แต่อาจใช้ไม่ได้กับ ทุกบราวเซอร์สามารถใส่เอฟเฟ็กต์ได้ ก่อนการแทรกรูปภาพ ก่อนที่จะแทรกรูปภาพในหน้าเว็บเพจ ควรนาไฟล์รูปภาพเหล่านั้นมาเก็บไว้ในโฟลเดอร์หรือไซต์ของ เว็บเพจที่ต้องใส่รูปภาพนั้นก่อน เช่น สร้างโฟลเดอร์ pic หรือ images เพื่อใช้เก็บรูปภาพ ทั้งนี้เพื่อเป็นการ ป้องกันการเปิดปัญหา คือ เว็บบราวเซอร์ไม่สามารถแสดงภาพได้ เนื่องจากแหล่งที่เก็บไฟล์รูปภาพกับแหล่งที่
2.
ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม
https://krupiyadanai.wordpress.com ใช้จัดเก็บเว็บเพจนั้นไม่ใช่แหล่งเดียวกัน โดยเมื่อนาไฟล์รูปภาพมาเก็บไว้ในไซต์เดียวกันกับไฟล์เว็บเพจแล้ว ไฟล์เหล่านี้จะแสดงอยู่ใน File Panel การแทรกรูปภาพ เราสามารถแทรกรูปภาพได้โดยมีวิธีการดังนี้ 1. วางเคอร์เซอร์ไว้ในตาแหน่งที่ต้องการแทรกรูปภาพ รูปที่ 1 การวางเคอร์เซอร์ไว้ในตาแหน่งที่ต้องการแทรกรูปภาพ 2. เลือกเมนู Insert > Image รูปที่ 2 การแทรกรูปภาพด้วยเมนู Insert > Image 3. จะปรากฏกรอบโต้ตอบ Select Image Source ให้เลือกรูปภาพในโฟลเดอร์ของไซต์ที่กาลังทางาน อยู่ คลิกปุ่ม OK รูปที่ 3 การเลือกรูปภาพจากโฟลเดอร์ 4. จะปรากฏกรอบโต้ตอบให้เราเลือก OK
3.
ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม
https://krupiyadanai.wordpress.com รูปที่ 4 กรอบโต้ตอบ 5. จะได้รูปภาพที่เราได้เลือกไว้ รูปที่ 5 รูปที่ได้จากการเลือก หรืออีกวิธีหนึ่งสามารถคลิกแทรกภาพได้อีกคาสั่งหนึ่งคือ คลิกที่ ที่แถบ Insert Bar หรือจะ เอาเมาส์คลิกลากจากแถบ File Panel มาวางบนพื้นที่ออกแบบก็ได้ รูปที่ 6 การแทรกรูปภาพจากแถบ File Panel
4.
ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม
https://krupiyadanai.wordpress.com การปรับแต่งคุณสมบัติของรูปภาพ 1. คลิกเลือกที่รูปภาพที่ต้องการปรับแต่งคุณสมบัติ รูปที่ 7 การเลือกรูปภาพเพื่อปรับแต่งคุณสมบัติ 2. ทาการปรับเปลี่ยนคุณสมบัติของรูปภาพตามความเหมาะสม รูปที่ 8 Panel Properties หมายเลขที่ Image Name (Name) กาหนดชื่อให้กับรูปภาพ ใช่สาหรับเมื่อเราเขียน script อ้างอิงรูปภาพ หมายเลขที่ Src แสดงที่อยู่ของรูปภาพ หมายเลขที่ Link ใช้กาหนดการเชื่อมโยงโดยใช้รูปภาพเป็นตัวเลือก ใช้ร่วมกับ Target หมายเลขที่ Alt (Alternate Text) คาบรรยายรูปจะปรากฏก็ต่อเมื่อรูปไม่แสดงผล และนาเมาส์ ไปอยู่เหนือรูป (ie) หมายเลขที่ Edit ประกอบด้วยเครื่องมือเหล่านี้ เครื่องมือของ Dreamweaver จะทาการแก้ไขที่ ไฟล์รูปโดยตรง 1. Edit ใช้ในการแก้ไขภาพในรูปแบบ File extension 2. Edit Image Settings ใช้ในการปรับรูปแบบไฟล์รูปภาพ และขนาดความ ละเอียดของรูปภาพ 3. Crop ใช้ตัดรูปให้ได้ขนาดที่ต้องการ 4. Resample ใช้ในการย้อนกลับการแก้ไขรูปภาพ 5. Brightness and Contrast ปรับความสว่างของรูป 6. Sharpen ใช้แก้ไขความคมชัดของรูป =
5.
ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม
https://krupiyadanai.wordpress.com หมายเลขที่ W (Width) กาหนดความยาวของรูปที่ต้องการให้แสดงผล โดยไม่มีผลกับไฟล์รูปเดิม H (Height) กาหนดความสูงของรูปที่ต้องการให้แสดงผล โดยไม่มีผลกับไฟล์รูปเดิม หมายเลขที่ Class (CSS Setting) ถ้าเราเขียน CSS เอาไว้ตัวเลือกนี้จะใช้กาหนด CSS ที่เรา เขียนไว้ หมายเลขที่ Map กลุ่มคาสั่ง Map ใช้ในการคลิกเลือกรูปทรงซึ่งมี 3 รูปทรง เพื่อใช้ลากเลือก พื้นที่บนรูปภาพ สาหรับการเชื่อมโยงที่ไม่ได้ใช้หมดทั้งรูป หมายเลขที่ Original ใช้เลือกภาพที่เป็นภาพต้นแบบ การใส่กรอบรูปภาพ 1. คลิกเลือกรูปภาพที่ต้องการใส่กรอบ รูปที่ 9 การเลือกรูปภาพที่ต้องการใส่กรอบ 2. คลิกเมาส์ขวา >> Edit Tag <img>… หรือ กด Shift+F5 รูปที่ 10 การปรับแต่งค่ารูปภาพ 3. ใส่ขนาดเส้นกรอบในส่วนของ Border : จากนั้นคลิก OK
6.
ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม
https://krupiyadanai.wordpress.com รูปที่ 11 การปรับแต่งค่าเส้นกรอบรูปภาพ 4. จะได้กรอบรูปภาพ ดังรูป รูปที่ 12 การแสดงกรอบรูป กาหนดระยะห่างระหว่างรูปกับวัตถุอื่น 1. คลิกเลือกรูปภาพที่ต้องการปรับระยะห่าง รูปที่ 13 การเลือกรูปภาพที่ต้องการปรับระยะห่าง
7.
ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม
https://krupiyadanai.wordpress.com 2. คลิกเมาส์ขวา >> Edit Tag <img>… หรือ กด Shift+F5 รูปที่ 14 การปรับแต่งค่ารูปภาพ 3. คลิกปรับระยะห่างระหว่างรูปกับวัตถุอื่น V Space (Vertical Space) กาหนดระยะห่างระหว่างรูปกับวัตถุอื่น ในส่วน บนและล่างของรูป H Space (Horizontal Space) กาหนดระยะห่างระหว่างรูปกับวัตถุอื่น ในส่วน ซ้ายและขวาของรูป รูปที่ 15 การปรับปรับระยะห่างระหว่างรูปกับวัตถุอื่น การจัดวางรูปภาพ 1. คลิกเลือกรูปภาพที่ต้องการจัดวางตาแหน่ง รูปที่ 16 การเลือกรูปภาพที่ต้องการจัดวางตาแหน่ง
8.
ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม
https://krupiyadanai.wordpress.com 2. คลิกเมาส์ขวา >> Edit Tag <img>… หรือ กด Shift+F5 รูปที่ 17 การการปรับแต่งค่ารูปภาพ 3. คลิกการจัดวางตาแหน่งรูปภาพและข้อความ รูปที่ 18 การจัดวางตาแหน่งรูปภาพและข้อความ Baseline : ขอบล่างของรูปภาพตรง กับแนวล่างของข้อความ Top : ขอบบนของรูปภาพตรงกับแนว บนของข้อความ
9.
ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม
https://krupiyadanai.wordpress.com Middle : กึ่งกลางของรูปภาพตรงกับ กึ่งกลางของข้อความ Bottom : ขอบล่างของรูปภาพตรงกับ แนวล่างของข้อความ Texttop : จัดให้ขอบบนของรูปภาพ อยู่ในระดับเดียวกับส่วนที่สูงที่สุดของ ข้อความในบรรทัดนั้น Absolute Middle : จัดให้กึ่งกลาง ของรูปภาพอยู่ระดับเดียวกับกึ่งกลาง ของข้อความรวมถึงตัวอักษรที่มีหาง ห้อยลงมาเช่น y ด้วย Absolute Bottom : จัดให้ขอบล่าง ของรูปอยู่ระดับเดียวกับขอบล่างของ ข้อความรวมถึงตัวอักษรที่มีหางห้อยลง มาเช่น y ด้วย Left : จัดให้รูปภาพชิดซ้ายของ ข้อความทั้งพารากราฟ
10.
ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม
https://krupiyadanai.wordpress.com Right : จัดให้รูปภาพชิดขวาของ ข้อความทั้งพารากราฟ การกาหนดให้รูปภาพเป็นพื้นหลัง การแทรกภาพเป็นพื้นหลังก็อาศัยหลักการเหมือนกับการแทรกภาพปกติ โดยต้องทาการคัดลอกภาพ มาไว้ในไซต์เสียก่อนเพื่อป้องกันความผิดพลาดเวลานาเสนอผลงาน การกาหนดรูปภาพให้เป็นพื้นหลังหรือ Background นั้นสามารถทาได้ ดังนี้ 1. คลิกเลือกเมนู Modify > Page Properties หรือกด Ctrl+J ที่แป้นพิมพ์ หรือเลือกจากแถบ Panel properties รูปที่ 19 การกาหนดให้รูปภาพเป็นพื้นหลัง 2. เลือก Category >> Appearance (CSS) หรือ Appearance (HTML) >> Background image >> Browse >> จากนั้นไปเลือกรูปภาพที่ต้องการให้เป็นพื้นหลัง >> คลิก OK รูปที่ 20 การแทรกรูปภาพพื้นหลัง
11.
ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม
https://krupiyadanai.wordpress.com 3. เลือกภาพจากแฟ้มที่เราต้องการแล้วตอบ OK รูปที่ 21 การแทรกรูปภาพพื้นหลัง 4. จะได้ภาพพื้นหลังเป็นภาพที่เราเลือก รูปที่ 22 ภาพที่ได้จากการแทรกพื้นหลัง การกาหนดค่ารูปภาพพื้นหลัง การกาหนดรูปภาพให้เป็นพื้นหลังหรือ Background นั้นสามารถทาได้ ดังนี้ 1. คลิกเลือกเมนู Modify > Page Properties หรือกด Ctrl+J ที่แป้นพิมพ์ หรือเลือกจากแถบ Panel properties รูปที่ 23 การกาหนดค่ารูปภาพพื้นหลัง
12.
ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม
https://krupiyadanai.wordpress.com 2. เลือก Category >> Appearance (CSS) หรือ Appearance (HTML) >> Repeat รูปที่ 24 การปรับแสดงผลรูปภาพพื้นหลัง Repeat ใช้กาหนดการแสดงผลของภาพพื้นหลัง โดยมีคาสั่งดังนี้ 1.no-repeat ให้แสดงผลภาพพื้นหลังเพียงครั้งเดียว 2.repeat ให้แสดงผลภาพพื้นหลังซ้ากันหลายๆครั้งจะเต็มพื้นที่เว็บเพจ 3.repeat-x ให้แสดงผลภาพพื้นหลังซ้ากันเฉพาะในแนวนอนเท่านั้น 4.repeat-y ให้แสดงผลภาพพื้นหลังซ้ากันเฉพาะในตั้งนอนเท่านั้น 3. เลือกภาพจากแฟ้มที่เราต้องการแล้วตอบ OK การสร้างภาพแบบ Rollover Image Rollover Image เป็นเทคนิคที่ช่วยเพิ่มความน่าสนใจให้กับเว็บเพจ ด้วยการทาให้รูปภาพเปลี่ยนเป็น รูปภาพอื่นเมื่อเราเลื่อนเมาส์มาที่รูปภาพที่เป็นจุดเชื่อมโยง และเมื่อเลื่อนเมาส์ออกจากจุดเชื่อมโยงก็สามารถ คืนกลับเป็นรูปภาพเดิมได้ มีวิธีการดังนี้ 1. เลือกตาแหน่งที่ต้องการสร้างภาพแบบ Rollover 2. ไปที่เมนูคาสั่ง Insert > Image Objects > Rollover Image รูปที่ 25 การสร้างภาพแบบ Rollover
13.
ครูปิยะดนัย วิเคียน โรงเรียนเสริมงามวิทยาคม
https://krupiyadanai.wordpress.com 3. จะปรากฏกรอบโต้ตอบ Insert Rollover Image Image Name : ให้ตั้งชื่อ Rollover Image ที่จะสร้างขึ้น Original image : ภาพต้นฉบับ คลิก Browse… เพื่อเลือกภาพที่ต้องการ Rollover image : ภาพที่ต้องการเปลี่ยนเมื่อคลิกเมาส์ คลิก Browse… เพื่อเลือกภาพที่ ต้องการ Alternate text : ข้อความกากับรูปภาพ จะแสดงเมื่อนาเมาส์ไปวางที่ภาพ When clicked, Go to URL : ชื่อไฟล์ที่ต้องการเชื่อมโยง รูปที่ 26 การปรับแต่ง Insert Rollover Image
Download now