Page 44 - การสร้างเว็บไซต์
P. 44
่
่
�
สำมำรถดำวน์โหลดโค้ดโปรแกรมได้ทีhttp:/c.mc.ac.thเพือนำโปรแกรมมำใช ้ในกำรทด
้
ั
ลองและศึกษำกำรท�ำงำนของโปรแกรมส�ำหรับกำรออกแบบส่วนต่ำงๆ ของโฮมเพจนน ได้มีกำรวำง
้
่
่
่
โครงร่ำง ซึงได้มีกำรสร ้ำงโครงร่ำงขึนมำโดยให้มีชือในทุกๆส่วนซึงจะท�ำให้ง่ำยต่อกำรวำงอิไมนต์
็
ต่ำงๆ ให้เปนไปตำมต้องกำรและสำมำรนำไปเขียน CSS ได้
�
่
็
ู
่
เมือออกแบบต�ำแหนงในกำรวำงข้อมลต่ำงๆ ของโฮมเพจแล้ว ต่อไปกจะเริมเขียนตัวควบคุมกำร
้
แสดงผลของเวบเพจ โดยเปดโปรแกรม Notrpad++ ขึนมำแล้วสร ้ำงไฟล์ไหมเพือเขียน CSS โดย
่
็
ิ
่
่
็
ใช ้ชือว่ำ syle.css และเกบไฟไว้ทีโฟลเดอร ์
่
็
็
็
เมือเขียน CSS เสร็จแล้ว ต่อไปกจะเปนกำรสร ้ำงเวบเพจโดยกำรเขียนด้วยภำษำ HTML
ซึงยังใข้โปรแกรม Notepad++ เปนโปรแกรมหรือเปนอิติเตอร ์ส�ำหรับเขียนเหมือนเดิม โดย กำร
็
็
้
้
่
่
้
่
่
ี
ี
สร ้ำงไฟล์ใหมขึนมำอีก 1 ไฟส์ โดยให้ไฟส์นมีชือว่ำ index htm! สำเหตุทีใช ้ชือนเพรำะว่ำต้องกำร
้
่
้ ่
็
็
ให้เปนหน้ำแรกของโฮมเพจซึงทุกครังทีมีคนเข้ำมำดูเวบไซต์หน้ำนกจะถูกเรียกมำแสดงเปนหน้ำ
็
ี
็
่
่
็
็
แรก ก่อนทีจะลิงกไปยังหน้ำต่อๆ ไปทีมีกำรลิงก์ในเวบไซต์ โดยสำมำรถเขียนได้ดังน ี ้
่
่
่
็
เมือเขียนโปรแกรม HTMLเสร็จแล้วกทดสอบดูผลทีแสดงออกมำว่ำเปนไปตำมทีได้ออกแบบ
็
่
่
่
็
ไว้หรือไม โดยเปดทีโปรแกรมเบรำว์เซอร ์ใดๆ กได้ เช่น IE, Chrome, Firefox เปนต้น ซึงเมือรัน
็
ิ
่
โปรแกรมแล้ว
สรุป
�
cSS ย่อมำจำกคำว่ำ cascading Style Sheer หรือเรียกว่ำสั้นๆ ว่ำ สโตล์ซีต (Style Sheet)
�
็
ั
คือสีพื้นหลัง กำรกำหนดชนิดของตัวอักษร กำรจดวำงข ้อควำม เปนต ้น
ภำษำที่ใช ้ ในกำรจดรูปแบบกำรแสดงผลของเอกสำร Html เขน กำรใสสีให ้ข ้อควำม กำร
ั
กำหนดในกำรกำหนดรูปแบบน้นจะใช ้ หลักกำรของกำรแยกเนื้อหำเอกสำร Html ออกจำกคำ
�
�
�
ั
�
สั่งกับเนื้อหำของเอกสำร ทำให ้ง่ำยต่อกำรจดรูปแบบกำรแสดงผลลัทธ์ของเอกสำร HกmIl
ั
ั
โดยเฉพำะที่ใช ้ ในกำรจดรูปแบบ ส�ำหรบรูปแยบของกำรแสดงผลน้นจะอยู่ในส่วนของ Syle ซึ่ง
ั
ั
จะไมขึ้นอยู่ถ ้หำกในกรณที่มีกำรเปลี่ยนแปลงเนื้อหำเอกสำร แต่ต ้องกำรให ้รูปแบบเปนเหมือน
ี
็
็
�
เติมก็ทำใด ้โดยแก ้เนื้อหำเพียงอย่ำงเดียว รูปแบบกำรแสดงผลเอกสำร Html กจะเหมือนเดิม
�
ั
ี
cSS ถูกนำมำใช ้ คร้งแรกใน Html 40 เมื่อป ฟ.ศ. 2539 ในรูปแบบของ cSS level l
Recommendations ซึ่งถูกกำหนดโดยองค์กร Warld Wide Web coasorlum หรือ W3c
�
�
�
ประโยชน์ของ cSS คือ สำมำรถนำมำใช ้ ร่วมกับเอกสำรหลำยไพได ้ กำหนดรูปแบบ
�
คร้งเดียวก็มีผลกับกำรแสดงผลทั้งหมด ทำให ้เวลำแก ้ใขหรือปรบปรุงทำได ้สะดวก ไมต ้องไถ่
�
ั
ั
ตำมแก ้ในต่ำงๆ ทั่วทั้งเอกสำร สำมำรถกำหนดรูปแบบกำรแสตงผลได ้ง่ำยและสะดวก
�
ปจจุบัน cSS ได ้มีบทนำทส�ำคัญเปนอย่ ำงมำกส�ำหรบกำรสร ้ำงเวบไซด์ด ้วยภำษำ HtmI
ั
ั
็
็
ั
็
็
�
็
เปนคำสังที่ใช ้ คู่กับ Html เพื่อใช ้ จดรูปแบบของเวยเพจและแก ้ไขเวบเพจได ้ง่ำยขึ้น
44
