top of page
บทที่ 11 การจัดหน้าเเบบเเบ่งส่วน
สาระสำคัญ
การจัดหน้าเเบบเเบ่งส่วนDivision-based layout จะเป็นการกำหนดพื้นที่บนหน้าเว็บด้วยเเท็ก<div>หรือเเท็กเชิงความหมาย(Semantic)ใหม่ๆใน HTMLเช่น<article>เเละ<aside>จากนั้นทำการจัดรูปแบบให้กับเเต่ละส่วนด้วยสไตล์ ซึ่งจะทำให้สามารถเปลี้ยนเเปลงเเก้ไขได้โดยง่ายในภายหลัง
่จุดประสงค์การเรียนรู้
1.สามารถบอกความหมายของการจัดหน้าเเบบเเบ่งส่วนและประโยชน์ที่ได้รับได้
2.อธิบายถึงองค์ประกอบของหน้าในเชิงความหมายได้
3.อธิบายในเเท็กคำสั่งเชิงความหมาย(Semantic Tag)ของHTMLได้
4.สามารถสร้างเว็บเพจโดยใช้เเท็กคำสั่งเชิงความหมายได้
5.สามารถจัดวางเเละจัดรูปแบบของส่วนต่างๆได้ตามต้องการได้
เนื้อหาสาระ
1.การจัดหน้าเเบบเเบ่งส่วน(Division-based layout)
2.องค์ประกอบของหน้าในเชิงความหมาย(Seamntic Page Elements)
3.การจัดวางส่วนของเนื้อความบนหน้าเว็บ
4.การจัดรูปแบบให้กับส่วนของเนื้อความ
11.1 การจัดหน้าเเบบเเบ่งส่วน(Division-based layout)
การจัดหน้าเเบบเเบ่งส่วน(Division-based layout)จะเป็นการกำหนดพท้นที่บนหน้าเว็บด้วยเเท็ก<div>หรือเชิงความหมาย (Semeantic tag) ใหม่ๆ ใน HTML5 เช่น<article>และ<aside>จากนั้นทำการจัดรูปแบบให้กับเเต่ละส่วนด้วยสไตล์
ประโยชน์ของการจัดหน้าเเบบแบ่งส่วนก็คือ เราสามารถกำหนดสไตล์ให้กับเเต่ละส่วนด้วย สไตล์ชีท ซึ่งจะทำให้สามารถเปลี่ยนเเปลงเเก้ไขได้โดยง่าย
11.1.1 การเเบ่งส่วนเนื้อความด้วยเเท็ก <div>
เเท็กคำสั่ง<div>จะใช้ในการเเบ่งเนื้อหาออกเป็นส่วนๆ เพื่อจัดกลุ่มของเนื้อหาที่อยู่บนหน้าเว็บ โดยมีรูปแบบดังนี้
รูปแบบ
<div class/id = "ชื่อส่วน">...เนื้อหา...</div>
โดย
ชื่อส่วน
ใช้ในการตั้งชื่อให้กับส่วนนั้น ซึ่งอาจกำหนดเป็บ Class หรือ ID ก็ได้ ขึ้นอยู่กับการใช้งานส่วนนั้น
มีชื่อส่วนบางชื่อที่นิยมใช้ในเชิงความหมายเพื่ิบอกได้ว่าเป็นส่วนหัวของหน้า เช่น header สำหรับส่วนหัวของหน้า, footer สำหรับส่วนท้ายของหน้า, nav สำหรับเเถบเมนู(Navigation ber)เป็นต้น
ตัวอย่างเช่น
ตัวอย่างการแบ่งเนื้อหาที่มีรูปภาพและข้อความ 2 ย่อหน้ามาจัดเป็นกลุ่มชื่อ "isting
การจัดองค์ประกอบเหล่านี้เอาไว้ในกลุ่มเดียวกันด้วย <dv> แสดงให้เห็นว่าองค์ประกอบ เหล่านั้นเกี่ยวข้องกัน และยังช่วยให้เราจัดรูปแบบย่อหน้าที่อยู่ในกลุ่มนี้ให้แตกต่างไปจาก ย่อหน้าอื่น ๆ บนหน้าเว็บได้โดยง่าย
ตัวอย่างการแบ่งเนื้อหาที่ยาว ๆ ออกเป็นตอน ๆ เพื่อการจัดหน้า
