Page 39 - การพัฒนาหนังสืออิเล็กทรอนิกส์เพื่อการศึกษา เรื่อง การสร้างเว็บไซต์
P. 39

่
                                                                            ็
 หนวยการเรียนรู้ที   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. การสร ้างหน้าโคมเหจ
 จุดประสงค์การเรียนรู้
 ้
 1. อธิบายความหมายของ CSS เบืองต้บได้
 ่
 2. บอกรูปแบบต่างๆ ของค�าสัง CSS ได้
 3. จ�าแนกรูปแบบของ Selectcr แบบต่างๆได้
 4. อธิบายการต�าหนลการณสดงผลของ CSS
 ในรูปแบบต่างๆ ได้
 5. อธิบายการสร ้างเวนไซม์ด้วยภาษHTMLได้
 ็
 34                                                         35
   34   35   36   37   38   39   40   41   42   43   44