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