ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
หน่วยการเรียนรู้ การเขียนโปรแกรมภาษาขั้นพื้นฐาน เรื่อง การตกแต่ง HTML 5 ด้วย CSS รหัส รายวิชา ง23102 การงานอาชีพและเทคโนโลยี 6 กลุ่มสาระ การงานอาชีพและเทคโนโลยี ชั้น มัธยมศึกษาปีที่ 3 จำนวน 2 คาบ โรงเรียน เตรียมอุดมศึกษาพัฒนาการ
2
CSS คืออะไร CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่มีรูปแบบการเขียนที่เฉพาะ ใช้สำหรับตกแต่งเอกสาร HTML5ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ ตามที่ต้องการ การใช้งาน CSS จะแบ่งได้ 2 แบบคือ 1. การเขียน CSS ในเอกสาร HTML ของเราเลย 2. การเขียน CSS ในเอกสารแยกเป็นอีก 1 ไฟล์
3
โครงสร้างคำสั่ง CSS การเขียน CSS ในเอกสาร HTML ของเราเลย
<selector style="property:value"> <selector style="property1:value1;property2:value2"> 1 2 Selector คือ คำสั่ง HTML element/tag ธรรมดา ที่เราต้องการให้แสดงผล Property คือ คุณสมบัติที่เราต้องการให้แสดงผล เช่น สีตัวอักษร สีพื้นหลัง เป็นต้น Value คือ ค่าที่เราต้องการให้แสดง เช่น ตัวอักษรสีแดง พื้นหลังสีดำ เป็นต้น ตัวอย่าง <body style="background-color:blue"> <h3 style="color:green;font-family:sans-serif"> 1 2
4
การจัดรูปแบบ ตัวอักษร ข้อความ
1. ขนาด ตัวอักษร Font-size 2. ตำแหน่ง ของข้อความ Text-align 3. สี ตัวอักษร Color 4. เงา ของตัวอักษร Text-shadow 5. รูปแบบ ตัวอักษร Font-family
5
1. ขนาดตัวอักษร Font-size
<selector style="font-size:200%"> <selector style="font-size:20px">
6
2.ตำแหน่งของข้อความ Text-align
<selector style="text-align:center"> <selector style="text-align:left"> <selector style="text-align:right"> text-align รูปแบบการจัดข้อความ left center right
7
3. สี ตัวอักษร Color <selector style="color:pink">
<selector style="color:#FF0000"> <selector style="color:rgb "> การกำหนดสี มี 3 รูปแบบ คือ 1. การระบุชื่อสีโดยตรง 2. การกำหนดสีในแบบ Hexadecimal 3. การกำหนดสีในแบบ RGB ศึกษาเพิ่มเติม
8
4. เงา ของตัวอักษร Text-shadow
กำหนดเงาให้กับข้อความ โดยค่าที่กำหนดได้ คือ <ระยะเหลื่อมในแนวนอน><ระยะเหลื่อมในแนวตั้ง><สี> <ระยะเหลื่อมในแนวนอน><ระยะเหลื่อมในแนวตั้ง><ระยะการเบลอของเงา><สี> style="text-shadow: 2px 2px red" style="text-shadow: 2px 2px 50px pink"
9
5. รูปแบบลักษณะของตัวอักษร Font-family
style="font-family:ชื่อ Font " ตัวอย่าง style="font-family:FontNongnam"
10
การจัดรูปแบบ รูปภาพ 1. การกำหนด ขนาดรูปภาพ width height การกำหนดภาพ พื้นหลัง background-image 3. การกำหนดสี พื้นหลัง background color 4. การกำหนดเส้นขอบของภาพ border-style
11
1. การกำหนด ขนาดรูปภาพ width height
<figure> <img src="ชื่อโฟลเดอร์เก็บรูปภาพ/ชื่อไฟล์รูปภาพ.นามสกุลภาพ" </figure> width="20" height="20" > นักเรียนสามารถกำหนดค่าด้านใดด้านหนึ่งได้ โดยอีกด้านจะกำหนดให้สมดุลเองโดยอัติโนมัติ
12
คำสั่งที่เกี่ยวข้องกับการกำหนดภาพพื้นหลัง
2. การกำหนดภาพ พื้นหลัง background-image style="background-image:url(ชื่อโฟร์เดอร์เก็บรูป/ชื่อไฟล์รูปภาพ.นามสกุล)" คำสั่งที่เกี่ยวข้องกับการกำหนดภาพพื้นหลัง background-repeat การกำหนดให้พื้นหลังนำรูปมาใช้ซ้ำ background-attachment กำหนดพื้นหลัง ให้อยู่กับที่ หรือเคลื่อนตาม background-position การกำหนดตำแหน่งเรูปภาพ
13
background-repeat style="background-image:url(image/dog.jpg); background-repeat:repeat-y” repeat-x : รูปจะถูกใช้จนเต็มใน แนวนอน repeat-y : รูปจะถูกใช้จนเต็มใน แนวตั้ง no-repeat : รูปจะถูกใช้ ครั้งเดียว repeat-y repeat-x no-repeat
14
นักเรียนสามารถเปลี่ยนสีพื้นอีกส่วนได้ โดยใช้คำสั่ง background-color
style="background-image:url(image/dog.jpg); background-repeat:repeat-x; background-color:pink”
15
background-attachment
style="background-image:url(image/dog.jpg); background-attachment:fixed” รูปจะไม่เลื่อน ตาม scroll bar รูปจะอยู่กับที่
16
background-position style="background-image:url(image/dog.jpg); background-position:right center” background-position:right center background-position:50% 50% background-position:20px 40px
17
3. การกำหนดสี พื้นหลัง background color
style="background-color:ชื่อสี"
18
4. การกำหนดเส้นขอบของภาพ border-style
style="border-style:ชื่อลักษณะเส้นขอบ"
20
การกำหนดสี style="border-style:solid;border-color:orange"
21
การกำหนดสี และ เส้นกรอบ
บน ขวา ล่าง ซ้าย style="border-style:solid;border-color:#99CC66 blue green black" style="border-style:dashed dotted solid double;border-color:#FF6633"
22
ลองทำดู รู้ปฏิบัติ ให้นักเรียนเปิดไฟล์งาน เว็บไซต์ประวัติส่วนตัวนักเรียน ที่มีเมนูเชื่อมโยงแล้ว ( ที่ทำสัปดาห์ที่แล้ว ) ตกแต่งเว็บไซต์ของนักเรียน โดยใช้ CSS3 ทั้งการจัดรูปแบบตัวอักษร ข้อความ และ การจัดรูปแบบรูปภาพ ให้เหมาะสม ชัดเจน อ่านง่าย น่าสนใจ
งานนำเสนอที่คล้ายกัน
