ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
การสร้างพื้นหลัง (Background)
บทที่ 8 การสร้างพื้นหลัง (Background)
2
บทนำ การสร้างพื้นหลัง (Background) ปกติจะเป็นแบบโปร่งใส่ แต่จะมองเห็นเป็นสีขาวซึ่งสามารถที่จะใส่สีพื้นได้ หรือนำรูปภาพมาเป็นพื้นได้เช่นกัน การสร้างพื้นหลังมี 2 วิธี คือ การใส่สีพื้น การนำรูปภาพมาเป็นพื้น
3
กิจกรรมที่ 8.1 ให้เปิดไฟล์ชื่อ tour.html
4
การใส่สีพื้น 1. คลิกที่เมนู Modify 2. คลิกที่ Page Properties
3. จะปรากฏกรอบดังนี้
5
การใส่สีพื้น 4. คลิกที่กรอบสีของ Background Color 5. คลิกสีที่ต้องการ
6. คลิก OK 7. ทำการบันทึก ถ้าไม่เลือกสีที่ต้องการ ก็สามารถกำหนดรหัสสีเองได้ จะสังเกต ขณะที่เลื่อนเมาส์ไป ตามสีต่างๆ หน้าจอจะแสดงรหัสสีของแต่ละสีให้ด้วย ซึ่งสามารถกำหนดรหัสสี นอกเหนือจากที่มีอยู่แล้วก็ได้
6
รหัสสี R = Red (สีแดง) G = Greed (สีเขียว) B = Blue (สีน้ำเงิน)
รหัสสีมีทั้งหมด 6 ตัว 2 ตัวแรก หมายถึง สีแดง 2 ตัวกลาง หมายถึง สีเขียว 2 ตัวท้าย หมายถึง สีน้ำเงิน ค่าที่ใช้จะเป็นตัวเลข 0-9 และตัวอักษร A-F ตัวอย่างสี 00000 = สีดำ ffffff = สีขาว ff0000 = สีแดง 00ff00 = สีเขียง 000ff = สีน้ำเงิน ffff00 = สีเหลือง และ ff9933 = สีส้ม รหัสสีนี้สามารถนำไปใช้กับสีตัวอักษร หรือ สีของตารางได้อีกด้วย
7
กิจกรรมที่ 8.2 ให้เปิดไฟล์ชื่อ star1.html กำหนด Title ดาราชาย
กำหนด Left Margin = 0, Top Margin = (ในกรณีที่ยังไม่ได้ปฏิบัติตั้งแต่แรก)
8
การนำรูปมาเป็นพื้น 1. คลิกที่เมนู Modify 2. คลิกที่ Page Properties
3. จะปรากฏกรอบดังนี้ 4. คลิกที่ปุ่ม Browse ของช่อง Background Image
9
การนำรูปมาเป็นพื้น 5. เลือกแหล่งที่เก็บรูปภาพไว้ในช่อง Look in
6. คลิกชื่อรูปภาพที่ต้องการ (จะสังเกตเห็นตัวอย่างรูปในช่อง Image Preview)
10
การนำรูปมาเป็นพื้น 7. คลิกที่ปุ่ม OK
8. คลิก Yes (เพื่อตกลงที่จะทำการบันทึก)
11
การนำรูปมาเป็นพื้น 9. คลิก Save(ก่อนคลิกให้ดูว่าบันทึกในโฟล์เดอร์ที่ถูกต้องหรือไม่ ในที่นี้คือ mywork)
12
การนำรูปมาเป็นพื้น 10. คลิกที่ปุ่ม OK 11. ทำการบันทึก
จะสังเกตว่าไฟล์ที่ชื่อ bk2.gif จะอยู่โฟล์เดอร์ mywork หมายเหตุ การนำรูปมาทำเป็น Background ไม่ควรนำรูปภาพที่มีสีฉูดฉาดหรือภาพเคลื่อนไหว เพราะ จะทำให้ตัวอักษรไม่ชัดเจนและลายตา
13
กิจกรรมที่ 8.3 1. เปิดไฟล์ชื่อ star2.html ส่งสีพื้นเป็น Background
2. เปิดไฟล์ชื่อ index.html ส่งรูปภาพเป็น Background
14
The End
งานนำเสนอที่คล้ายกัน
