Submit Search
Upload
Session4Part1.pptx
•
Download as PPTX, PDF
•
0 likes
•
2 views
P
pinglada1
Follow
Session4Part1.pptx
Read less
Read more
Education
Report
Share
Report
Share
1 of 15
Download now
Recommended
Session4 part1
Session4 part1
sangkeetwittaya stourajini
ว่าด้วยเรื่องทำเว็บไซต์ภาษาHTML
บทที่ 9 แต่งเติมเว็บเพจด้วยกราฟิก
บทที่ 9 แต่งเติมเว็บเพจด้วยกราฟิก
Nattipong Siangyen
แต่งเติมเว็บเพจด้วยกราฟิก
Session4 part1
Session4 part1
banputer
Chapter4
Chapter4
aumtall
Lernning 14
Lernning 14
Mayuree Janpakwaen
Avicii_Heaven_WIP.pdf
Avicii_Heaven_WIP.pdf
pinglada1
dj avicii
Avicii_-_You_be_love_feat._billy_raffoul.pdf
Avicii_-_You_be_love_feat._billy_raffoul.pdf
pinglada1
avicii
Avicii_Medley.pdf
Avicii_Medley.pdf
pinglada1
avicii
Recommended
Session4 part1
Session4 part1
sangkeetwittaya stourajini
ว่าด้วยเรื่องทำเว็บไซต์ภาษาHTML
บทที่ 9 แต่งเติมเว็บเพจด้วยกราฟิก
บทที่ 9 แต่งเติมเว็บเพจด้วยกราฟิก
Nattipong Siangyen
แต่งเติมเว็บเพจด้วยกราฟิก
Session4 part1
Session4 part1
banputer
Chapter4
Chapter4
aumtall
Lernning 14
Lernning 14
Mayuree Janpakwaen
Avicii_Heaven_WIP.pdf
Avicii_Heaven_WIP.pdf
pinglada1
dj avicii
Avicii_-_You_be_love_feat._billy_raffoul.pdf
Avicii_-_You_be_love_feat._billy_raffoul.pdf
pinglada1
avicii
Avicii_Medley.pdf
Avicii_Medley.pdf
pinglada1
avicii
avicii_levels.pdf
avicii_levels.pdf
pinglada1
avicii
Avicii_-_X_You_D_Major_Piano_Duet.pdf
Avicii_-_X_You_D_Major_Piano_Duet.pdf
pinglada1
dj avicii
08CHAPTER_4.pdf
08CHAPTER_4.pdf
pinglada1
08CHAPTER_4.pdf
หนังสือ การจัดโต๊ะหมู่บูชา.docx
หนังสือ การจัดโต๊ะหมู่บูชา.docx
pinglada1
หนังสือ การจัดโต๊ะหมู่บูชา.docx
เหนือ -เที่ยว ต.ค..docx
เหนือ -เที่ยว ต.ค..docx
pinglada1
เหนือ -เที่ยว ต.ค..docx
ละครพันทาง.doc
ละครพันทาง.doc
pinglada1
ละครพันทาง.doc
เหนือ-เที่ยว1.docx
เหนือ-เที่ยว1.docx
pinglada1
เหนือ-เที่ยว1.docx
สารานุกรมเยาวชนไทย ตอนดนตรีไทย.pdf
สารานุกรมเยาวชนไทย ตอนดนตรีไทย.pdf
pinglada1
สารานุกรมเยาวชนไทย ตอนดนตรีไทย.pdf
ลิเก.doc
ลิเก.doc
pinglada1
ลิเก.doc
วันสำคัญทางศาสนาพุทธ.docx
วันสำคัญทางศาสนาพุทธ.docx
pinglada1
วันสำคัญทางศาสนาพุทธ.docx
สังคีตที่ยิ่งใหญ่.docx
สังคีตที่ยิ่งใหญ่.docx
pinglada1
สังคีตที่ยิ่งใหญ่.docx
โลกของดนตรีไทย พื้นที่เล็กๆที่รวบรวมความรู้เกี่ยวกับดนตรีไทยเพื่ออนุรักษ์เผย...
โลกของดนตรีไทย พื้นที่เล็กๆที่รวบรวมความรู้เกี่ยวกับดนตรีไทยเพื่ออนุรักษ์เผย...
pinglada1
โลกของดนตรีไทย พื้นที่เล็กๆที่รวบรวมความรู้เกี่ยวกับดนตรีไทยเพื่ออนุรักษ์เผยแพร่.docx
ศาสนาพุทธ.docx
ศาสนาพุทธ.docx
pinglada1
ศาสนาพุทธ.docx
สังคีตวิทยา.docx
สังคีตวิทยา.docx
pinglada1
สังคีตวิทยา.docx
หอเกียรติยศ.doc
หอเกียรติยศ.doc
pinglada1
หอเกียรติยศ.doc
ละครรำ.docx
ละครรำ.docx
pinglada1
ละครรำ.docx
เรียนรู้เกี่ยวกับแผนภูมิ.docx
เรียนรู้เกี่ยวกับแผนภูมิ.docx
pinglada1
เรียนรู้เกี่ยวกับแผนภูมิ.docx
หุ่นกระบอก.doc
หุ่นกระบอก.doc
pinglada1
หุ่นกระบอก.doc
ละครชาตรี.docx
ละครชาตรี.docx
pinglada1
ละครชาตรี.docx
หอศิล.doc
หอศิล.doc
pinglada1
หอศิล.doc
More Related Content
More from pinglada1
avicii_levels.pdf
avicii_levels.pdf
pinglada1
avicii
Avicii_-_X_You_D_Major_Piano_Duet.pdf
Avicii_-_X_You_D_Major_Piano_Duet.pdf
pinglada1
dj avicii
08CHAPTER_4.pdf
08CHAPTER_4.pdf
pinglada1
08CHAPTER_4.pdf
หนังสือ การจัดโต๊ะหมู่บูชา.docx
หนังสือ การจัดโต๊ะหมู่บูชา.docx
pinglada1
หนังสือ การจัดโต๊ะหมู่บูชา.docx
เหนือ -เที่ยว ต.ค..docx
เหนือ -เที่ยว ต.ค..docx
pinglada1
เหนือ -เที่ยว ต.ค..docx
ละครพันทาง.doc
ละครพันทาง.doc
pinglada1
ละครพันทาง.doc
เหนือ-เที่ยว1.docx
เหนือ-เที่ยว1.docx
pinglada1
เหนือ-เที่ยว1.docx
สารานุกรมเยาวชนไทย ตอนดนตรีไทย.pdf
สารานุกรมเยาวชนไทย ตอนดนตรีไทย.pdf
pinglada1
สารานุกรมเยาวชนไทย ตอนดนตรีไทย.pdf
ลิเก.doc
ลิเก.doc
pinglada1
ลิเก.doc
วันสำคัญทางศาสนาพุทธ.docx
วันสำคัญทางศาสนาพุทธ.docx
pinglada1
วันสำคัญทางศาสนาพุทธ.docx
สังคีตที่ยิ่งใหญ่.docx
สังคีตที่ยิ่งใหญ่.docx
pinglada1
สังคีตที่ยิ่งใหญ่.docx
โลกของดนตรีไทย พื้นที่เล็กๆที่รวบรวมความรู้เกี่ยวกับดนตรีไทยเพื่ออนุรักษ์เผย...
โลกของดนตรีไทย พื้นที่เล็กๆที่รวบรวมความรู้เกี่ยวกับดนตรีไทยเพื่ออนุรักษ์เผย...
pinglada1
โลกของดนตรีไทย พื้นที่เล็กๆที่รวบรวมความรู้เกี่ยวกับดนตรีไทยเพื่ออนุรักษ์เผยแพร่.docx
ศาสนาพุทธ.docx
ศาสนาพุทธ.docx
pinglada1
ศาสนาพุทธ.docx
สังคีตวิทยา.docx
สังคีตวิทยา.docx
pinglada1
สังคีตวิทยา.docx
หอเกียรติยศ.doc
หอเกียรติยศ.doc
pinglada1
หอเกียรติยศ.doc
ละครรำ.docx
ละครรำ.docx
pinglada1
ละครรำ.docx
เรียนรู้เกี่ยวกับแผนภูมิ.docx
เรียนรู้เกี่ยวกับแผนภูมิ.docx
pinglada1
เรียนรู้เกี่ยวกับแผนภูมิ.docx
หุ่นกระบอก.doc
หุ่นกระบอก.doc
pinglada1
หุ่นกระบอก.doc
ละครชาตรี.docx
ละครชาตรี.docx
pinglada1
ละครชาตรี.docx
หอศิล.doc
หอศิล.doc
pinglada1
หอศิล.doc
More from pinglada1
(20)
avicii_levels.pdf
avicii_levels.pdf
Avicii_-_X_You_D_Major_Piano_Duet.pdf
Avicii_-_X_You_D_Major_Piano_Duet.pdf
08CHAPTER_4.pdf
08CHAPTER_4.pdf
หนังสือ การจัดโต๊ะหมู่บูชา.docx
หนังสือ การจัดโต๊ะหมู่บูชา.docx
เหนือ -เที่ยว ต.ค..docx
เหนือ -เที่ยว ต.ค..docx
ละครพันทาง.doc
ละครพันทาง.doc
เหนือ-เที่ยว1.docx
เหนือ-เที่ยว1.docx
สารานุกรมเยาวชนไทย ตอนดนตรีไทย.pdf
สารานุกรมเยาวชนไทย ตอนดนตรีไทย.pdf
ลิเก.doc
ลิเก.doc
วันสำคัญทางศาสนาพุทธ.docx
วันสำคัญทางศาสนาพุทธ.docx
สังคีตที่ยิ่งใหญ่.docx
สังคีตที่ยิ่งใหญ่.docx
โลกของดนตรีไทย พื้นที่เล็กๆที่รวบรวมความรู้เกี่ยวกับดนตรีไทยเพื่ออนุรักษ์เผย...
โลกของดนตรีไทย พื้นที่เล็กๆที่รวบรวมความรู้เกี่ยวกับดนตรีไทยเพื่ออนุรักษ์เผย...
ศาสนาพุทธ.docx
ศาสนาพุทธ.docx
สังคีตวิทยา.docx
สังคีตวิทยา.docx
หอเกียรติยศ.doc
หอเกียรติยศ.doc
ละครรำ.docx
ละครรำ.docx
เรียนรู้เกี่ยวกับแผนภูมิ.docx
เรียนรู้เกี่ยวกับแผนภูมิ.docx
หุ่นกระบอก.doc
หุ่นกระบอก.doc
ละครชาตรี.docx
ละครชาตรี.docx
หอศิล.doc
หอศิล.doc
Session4Part1.pptx
1.
Orjix www.RongRean.com หลักสูตร สร้างเว็บด้วย HTML:
Session ที่ 4 ตอนที่ 1
2.
www.rongrean.com Orjix Contents รู้จักกับภาพกราฟฟิ กชนิดต่างๆ 1 แสดงภาพบนเว็บ
<img> 2 การใส่ข้อความกากับภาพ 3 ปรับขนาดรูปภาพ 4 การใส่กรอบให้รูปภาพ 5 การจัดตาแหน่งรูปภาพ 6 เพิ่มระยะระหว่างรูปกับข้อความ 7
3.
Contents www.rongrean.com Orjix การทิ้งระยะระหว่างข้อความให้พ้นขอบเขตรูป <br> 8 แสดงภาพเป็นฉากหลัง
<body> 9 แสดงภาพฉากหลังอยู่กับที่ 10
4.
รู้จักกับภาพกราฟิ กชนิดต่างๆ ภาพกราฟิกมีรูปแบบการจัดเก็บอยู่หลายชนิด โดยแต่ละชนิดจะแตกต่างกันในเรื่องของ ขนาดไฟล์
และจานวนสีที่แสดงได้ สาหรับเว็บนั้นส่วนใหญ่เป็นชนิด GIF(.gif) และ JPEG(.jpg) www.rongrean.com Orjix ภาพชนิด GIF คิดค้นโดยบริษัท Compuserve แสดงรูปบนเครื่องที่แตกต่างกันได้ โดยสามารถแสดงสีได้256 สี ภาพรูปแบบนี้จะ ใช้การบีบอัดไฟล์เพื่อลดพื้นที่ในการเก็บ ข้อมูล จะใช้ได้ผลดีกับกราฟิกที่มีสีสม่าเสมอกัน เช่นภาพการตูน หรือโลโก้ที่มีการใช้สีไม่มากนัก ภาพชนิด JPEG พัฒนาโดย Joint Photographic Experts Group เป็น กราฟิกที่สามารถทางานกับเครื่องต่างแบบต่างรุ่นได้เช่นกัน สามารถแสดงสีได้สูงสุด 16.7 ล้านสี แต่อาจทาให้สูญเสียรายละเอียดไปบ้างจากการบีบอัดข้อมูลเพื่อลดขนาดภาพ ภาพ JPEG เหมาะสาหรับแสดงภาพที่มีสีสันมาก และต้องการประหยัดเนื้อที่ในการ เก็บ ภาพ แบบ GIF ภาพ แบบ jpeg
5.
แสดงภาพบนเว็บ <img> www.rongrean.com Orjix การแสดงภาพเราจะใช้แท็ก
<img/> ในการทางานดังนี้ <body> <img src="band.jpg"/> <img src="847000.gif"/> </body> ภาพแบบ jpeg ภาพแบบ gif *สังเกตว่าการแสดงเฉดสีของภาพ รูปแบบ jpeg จะมีสีสันมากกว่า ภาพรูปแบบ gif
6.
การใส่ข้อความกากับภาพ ข้อความกากับภาพ (alternate text)
จะปรากฏขึ้นมาเมื่อบราวเซอร์ไม่สามารถ แสดงภาพขึ้นมาได้ เพื่อให้ผู้ใช้ทราบว่าภาพนั้นคืออะไร www.rongrean.com Orjix <body> <img alt="band" src="band.jpg"/> <img alt="847000" src="847000.gif"/> </body> *สาเหตุที่แสดงภาพไม่ได้อาจเป็นเพราะเกิดข้อผิดพลาดในการเชื่อมโยง เช่น ภาพเสียหาย ถูกลบ หรือว่าย้าย directory ไป ในกรณีนี้ หากไม่มีข้อความกากับภาพไว้ ผู้ใช้จะไม่มีทางรู้ได้เลยว่าภาพนั้นเป็น ภาพอะไร *ประโยชน์อีกอย่างของข้อความกากับภาพคือ ในบางบราวเซอร์ถ้าเรานาเม้าส์ไปวางไว้บนรูปภาพก็จะแสดง ข้อความกากับภาพขึ้นมาให้เห็นด้วย
7.
ปรับขนาดรูปภาพ บางครั้งภาพที่เรานามาแสดงในเว็บก็อาจมีขนาดใหญ่หรือเล็กมากเกินไป เราสามารถ กาหนดขนาดของภาพได้โดยการระบุ width
และ height ของภาพ www.rongrean.com Orjix <body> <img src="band.jpg"/> <img src="band.jpg" width="300px" height="200px"/> </body> ภาพขนาดปรกติ ภาพขนาด width=“300px” height=“200px”
8.
การใส่กรอบให้รูปภาพ การใส่กรอบให้รูปภาพบางครั้งทาเพื่อเน้นรูปนั้น หรือแยกรูปออกจากข้อความให้ชัดเจน ทาได้โดยใช้ attribute
‘border’ ภายใต้แท็ก <img> www.rongrean.com Orjix <body> <img src="band.jpg"/> <img src="band.jpg" border="5px"/> </body> Border=“5px” Border=“none”
9.
การจัดตาแหน่งรูปภาพ การจัดตาแหน่งใช้เพื่อทาให้รูปภาพมีตาแหน่งเข้ากับข้อความที่มีอยู่เดิม โดยใช้ attribute ‘align’ www.rongrean.com
Orjix <table border="1px" width="100%" height="100%"> <tr> <td><img src="band.jpg" align="bottom"/>bottom</td> <td><img src="band.jpg" align="left"/>left</td> <td><img src="band.jpg" align="middle"/>middle</td> </tr> <tr> <td><img src="band.jpg" align="right"/>right</td> <td><img src="band.jpg" align="top"/>top</td> <td></td> </tr> </table> bottom ขอบล่างของภาพเสมอขอบล่างของข้อความ left จัดภาพอยู่ทางซ้าย middle กึ่งกลางของภาพเสมอกึ่งกลางของข้อความ right จัดภาพอยู่ทางขวา top ขอบบนของภาพเสมอขอบบนของข้อความ
10.
การจัดตาแหน่งรูปภาพ ตัวอย่าง www.rongrean.com Orjix
11.
เพิ่มระยะระหว่างรูปกับข้อความ ภาพที่แสดงปรกติจะถูกวางชิดกับข้อความ เราสามารถเพิ่มระยะห่างของภาพกับข้อความ เพื่อเพิ่มความสวยงามได้ โดยใช้
attribute ‘vspace’ และ ‘hspace’ www.rongrean.com Orjix <body> <img src="band.jpg" vspace="50px" hspace="50px" align="left" border="1px"/> rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com <br> </body> ภาพดั้งเดิม vspace vspace hspace hspace
12.
การทิ้งระยะระหว่างข้อความให้พ้นขอบเขตรูป <br> การจัดรูปร่วมกับข้อความ ส่วนของข้อความจะถูกพิมพ์ต่อเนื่องไปเรื่อยๆ
ซึ่งบางครั้งดูไม่ งามซักเท่าไหร่ สามารถแก้ไขได้ด้วยการทิ้งระยะข้อความให้พ้นขอบเขตรูปด้วย attribute ‘clear’ ประกาศไว้ภายใต้แท็ก <br> www.rongrean.com Orjix <body> <img src="band.jpg" align="left" border="1px"/> rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com <br clear="left"> rongrean.com rongrean.com rongrean.com rongrean.com rongrean.com </body> ใช้<br> ธรรมดา ใช้<br clear=“left”>
13.
•ตัวอย่าง การทิ้งระยะระหว่างข้อความให้พ้นขอบเขตรูป <br> all ขึ้นบรรทัดใหม่ในบริเวณที่ด้านซ้ายและขวาไม่มีวัตถุใดขวางอยู่ left
ขึ้นบรรทัดใหม่ในบริเวณที่ด้านซ้ายไม่มีวัตถุใดขวางอยู่ right ขึ้นบรรทัดใหม่ในบริเวณที่ด้านขวาไม่มีวัตถุใดขวางอยู่ none ขึ้นบรรทัดใหม่แบบปรกติ เป็นค่า default อยู่แล้ว www.rongrean.com Orjix
14.
แสดงภาพเป็นฉากหลัง <body> เราสามารถตกแต่งเว็บเพจให้มีภาพเป็นพื้นหลังได้ โดยใส่
attribute ‘background’ ไว้ภายใต้แท็ก <body> www.rongrean.com Orjix <body background="4008482.jpg"> <p>rongrean.com rongrean.com rongrean.com <br> rongrean.com rongrean.com rongrean.com rongrean.com <br> rongrean.com rongrean.com rongrean.com rongrean.com <br> rongrean.com rongrean.com rongrean.com rongrean.com <br></p> </body>
15.
แสดงภาพฉากหลังอยู่กับที่ นอกจากใส่ภาพเป็นฉากหลังแล้ว เรายังสามารถเพิ่มลูกเล่นให้กับฉากหลังได้อีก โดยทาให้ ฉากหลังอยู่กับที่ขณะที่เราเลื่อนแถบเลื่อน(scroll
bar) ไปเรื่อยๆ <body background="4008482.jpg" bgproperties="fixed"> 1<br> 2<br> 3<br> … 30<br> </body> สังเกตว่าเวลาเลื่อน แถบเลื่อน(scroll bar) พื้นหลังจะ ไม่เลื่อนตาม
Download now