Page 33 - การสร้างเว็บไซต์

่
็
หนวยกำรเรียนรู้ที 4 cSS และโครงสร ้ำงเวบไซต์
่
ด ้วย Html เบื้องต ้น
็
cSS และกำรสร ้ำงเวบไซต์
ด ้วย Html เบื้องต ้น

้
1. css เบืองต้น

่
สำระกำรเรียนรู้ css (cascade Style Sheet) หมำยถึง ภำษำทีใช ้ก�ำหนดรูปเเบบกำรเสดงผล HTML ถูก
่
่
่
้
ู
สร ้ำงขึนเพือใช ้งำนร่วมกับ HTML ซึงโดยทัวไปเล้ว HTML ใช ้ส�ำหรับก�ำหนดรูปโครงสร ้ำงข้อมล
ส่วน css ใช ้ส�ำหรับก�ำหนดรูปเเบบกำรเเสดงผล
้
่
็
ู
ในกำรเเยกกำรเเสดงผลของเวบเพจออกจำกข้อมลในเวบเพจนน จะช่วยให้ง่ำยต่อกำรเปลียน
็
ั
้
่
่
่
1. CSS เบืองต้น เเปลงรูปเเบบต่ำงๆ ในอนำคตทีอำจจะมีกำรเปลียนรูปเเบบของเวบเพจ เช่น ถ้ำเรำต้องกำรเปลียนสี
็
่
่
่
2. รูปแบบค�ำสัง CSS ให้กับหัวข้อในเเทก <h2> ในทุกๆ เวบเพจกเพียงเเต่เปลียนรูปทีเปนไฟล์ css ด้วยกัน ในปจจุบัน
็
็
ั
็
็
่
้
่
่
3. รูปแบบของ Selector css เปนทีนยมอย่ำงมำกในกำรนำไปจัดรูปเเบบให้กับเวบเพจ ซึงก่อนทีจะมี css นนเรำใช ้ตำรำงใน
�
ิ
็
ั
็
่
่
็
4. เพก <dv> และ <sparง กำรจัดวำงต�ำเเหนงต่ำงๆในเวบเพจเเละใช ้ค�ำสัง HTML ในกำรจัดรูปเเบบของข้อมล ซึงถ้ำมีกำร
่
็
ู
่
่
5. กำรก�ำหนดหนวย เเก้ไขรูปภำพหรือมีกำรปรับปรุงเวบเพจจะเปนกำรยุงยำกมำก เพรำะต้องเเก้ไขในทุกเวบเพจเพือให้
่
็
็
็
่
6. กำรก�ำหนดสี เปนไปตำมรูปเเบบทีต้องกำร
็
7. กำรก�ำหนดรูปแบบข้อควำม ปจจุบัน CSS แบ่งเยน 4 รุ่น ได้แก่
ั
็
8. กำรก�ำหนดชนดของตัวอักษร 1) CSS 1 ยอมรับเปนมำตรฐำน ธันวำคม ค.ศ. 1996
ิ
็
่
9. CSS Box Model 2) CSS 2 เริมร่ำง ค.ศ. 1997 ยอมรับเปนมำตรฐำน ทฤษภำคม ค.ศ. 1998
็
่
10. CSS Border 3) CSS 3 เริมร่ำง ค.ศ. 1998 ยอมรับเปนมำตรฐำน ทฤศจิกำยน ค.ศ. 2011
็
้
่
11. กำรก�ำหนดรูปแบบของพืนหลัง 4) CSS 4 เริมร่ำง 29 กันยำยน ค.ศ. 2009
12. กำรจัดรำงต�ำแหนงของอิสิมนต์
่
13. กำรก�ำหนดรูปแบบของสิงก์
็
14. กำรสร ้ำงเวบไซด์ด้วยภำษำ HTML
15. กำรสร ้ำงหน้ำโคมเหจ
่
2. รูปเเบบค�ำสัง css
จุดประสงค์กำรเรียนรู้ 2.1 รูปเเบบของค�ำสัง css จะประกอบไปด้วย 2 ส่วนใหญ่ๆ คือ
่
่
่
2.1.1 Selector คือ ส่วนของค�ำสัง HTML หรือ Tag ทีเรำต้องกำรให้เเสดงผล เช่น
็
็
็
็
็
table กจะเเสดงในส่วนของตำรำง, a กจะเปนกำรลิงก์, h1 กจะเปนขนำดตัวอักษร เปนต้น
็
้
1. อธิบำยควำมหมำยของ CSS เบืองต้บได้ 2.1.2 Declaration คือ ส่วนของกำรก�ำหนดค่ำให้กับ Selector ประกอบไปด้วย 2ส่วน
่
2. บอกรูปแบบต่ำงๆ ของค�ำสัง CSS ได้ ได้เเก่ ่
ิ
3. จ�ำแนกรูปแบบของ Selectcr แบบต่ำงๆได้ 1) Property คือ ส่วนของคุณสมบัติทีเรำต้องกำรให้เเสดง เช่น สีตัวอักษร, ชนดตัวอักษร,
้
็
4. อธิบำยกำรต�ำหนลกำรณสดงผลของ CSS ขนำดตัวอักษร, สี, พืนหลัง เปนต้น ่
่
็
ในรูปแบบต่ำงๆ ได้ 2) Value คือ ค่ำทีเรำต้องก�ำหนดให้กับ Property หรือเปนค่ำทีเรำต้องกำรให้เเสดง เช่น ตัว
็
5. อธิบำยกำรสร ้ำงเวนไซม์ด้วยภำษHTMLได้ อักษรสีเขียว,ตัวอักษรเเบบ Tahoma, ตัวอักษรขนำด 10pt เปนต้น
็
32 33