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> แสดงให้เห็นว่าองค์ประกอบ เหล่านั้นเกี่ยวข้องกัน และยังช่วยให้เราจัดรูปแบบย่อหน้าที่อยู่ในกลุ่มนี้ให้แตกต่างไปจาก ย่อหน้าอื่น ๆ บนหน้าเว็บได้โดยง่าย
ตัวอย่างการแบ่งเนื้อหาที่ยาว ๆ ออกเป็นตอน ๆ เพื่อการจัดหน้า
11.2 องค์ประกอบของหน้ำาในเชิงดวามหมาย (Semantic Page Elements)
การจัดหน้าแบบแบ่งส่วนด้วยแท็กคำสั่ง <div> นั้นมักใช้ในการแบ่งส่วนเป็นการทั่วไปไม่ได้ สื่อความหมายใด ๆ ว่าส่วนนั้นคืออะไร แต่ใน HTML5 ได้กำหนดแท็กคำสั่งสำหรับองค์ประกอบ ของหน้าในเชิงความหมายออกมาไว้ให้ ซึ่งแท็กคำสั่งเหล่านี้จะไม่ได้มีไว้เพียงเพื่อแสดงผล แต่ละส่วนที่ถูกจัดแบ่งไว้ว่าหน้าตาเป็นอย่างไร แต่จะเป็นตัวที่สื่อถึงความหมายของส่วนของ เนื้อหานั้น ๆ ด้วย เช่น ส่วนนี้เป็นส่วนหัวของหน้า, ส่วนนี้เป็นเป็นเนื้อหาหลัก, เนื้อหารอง เป็นตัน
หากเราใช้แท็กเชิงความหมายของ HTML5 ในการจัดหน้า แต่มีผู้ใช้บางรายที่เข้ามาดูด้วย เว็บเบราว์เซอร์ที่ไม่รองรับ HTML5 หน้าที่เราจัดไว้จะไม่ถูกแสดงเหมือนกับที่เราตั้งใจไว้ เพราะโปรแกรมเบราว์เซอร์จะข้ามแท็กดำสั่งที่ไม่รู้จักไป ดังนั้นการจัดหน้าด้วยแท็กคำสั่ง <div จึงยังเป็นวิธีที่ปลอดภัยอยู่ แต่อย่างไรก็ดีการเรียนรู้ถึงแท็กคำสั่งเชิงความหมาย ก็ยังเป็นสิ่งจำเป็นสำหรับอนาคต
1 1.2. 1 แท็กเชิงดวามหมาย (Semantic Tags) ใน HTMLS
แท็กเชิงความหมาย (Semantic tag) เป็นแท็กที่ชื่อของมันจะสื่อความหมายถึงจุดประแงค์ ของส่วนของเนื้อความนั้น ๆ ซึ่งหลัก ๆ แล้วจะมีดังนี้
<address>
ใช้กำหนดส่วนของข้อมูลที่อยู่ที่ใช้ในการติดต่อกับเจ้าของเว็บเพจ เช่น
<address>
90/371 หมู่บ้านมัณฑนา ถ.พระยาสุเรนทร์ <br>
บางชัน คลองสามวา กทม. 10510
</address>
เบราว์เซอร์ส่วนใหญ่จะแสดงที่อยู่ในแท็ก caddr๒ss> นี้ด้วยอักษรตัวเอน
<header>และ <footer>
<header>
ใช้กำหนดส่วนของหัวเรื่องของหน้า ใช้แทน <div id ="header> ใน HTML4 โดยทั่วไปมักจะเหมือนกันทุกหน้า แต่ก็ไม่จำเป็น เช่น
<header>
<h1>This is my header</h1>
</header>
<footer>
ใช้กำหนดข้อความส่วนล่างของหน้า เช่น ข้อมูลการติดต่อ เว็บ, ข้อมูลลิขสิทธิ์ เช่น
<footer>
<h2>Footer</h2>
<address>
SoftPress <br>
<a href = "mailtositt999@gmail.com"> sitt999@gmail.com</a>
</address>
</footer>
<article> และ <section>
<article>
ใช้กำหนดกลุ่มของข้อความที่เป็นส่วนของเนื้อเรื่อง เช่นบทความ. เรื่องราว, หรือข่าวสาร มักใช้ในการแสดงบทความที่เราจึงมาจาก แหล่งข้างนอก
<section>
ใช้ในการแบ่งเนื้อความออกเป็นส่วน ๆ เช่นเดียวกับหนังสือที่ถูก แบ่งออกเป็นบท ๆ ในแต่ละส่วนมักจะขึ้นต้นด้วยหัวเรื่อง เช่น <h2> แล้วตามด้วยเนื้อความ
ตัวอย่างต่อไปนี้จะแสดงการวาง โครงสร้างของแท็กเชิงความหมาย <article> และ <section>
บทความในบล็อก (Weblog article)
จะวางโครงสร้างของแท็กดังนี้
Webloc article
Content...
Heading
วางแท็กดังนี้ <article> <h1>Heading</h1> <p>Content...</p> </article>
บทความยาว ๆ ที่แบ่งออกเป็นส่วน ๆ
จะวางโครงสร้างของแท็กดังนี้
วางแท็กดังนี้
<article> <h1>Heading</h1>
<section>
<h2>Section heading</h2> <p>Content</p>
</section>
<section>
<h2>Section heading</h2> <p>Content</p>
</section>
<section>
<h2>Section heading</h2> <p>Content</p>
</section>
</article>
<aside>
ใช้กำหนดกลุ่มของข้อความที่เกี่ยวข้องกับเนื้อความหลัก แต่ถูกแยก ออกมา เช่น หมายเหตุ บันทึก, เทลนิดเล็ก ๆ หรือคำเตือน เป็นต้น ส่วนของ aside นี้มักจะถูกจัดวางเป็น แถบต้านข้างที่เรียกว่า Sideber โดยไม่ไปรบกวนเนื้อความ หลัก เช่น
<aside>
This is a secondary commen
</asides>
<nav>
ใช้กำหนดส่วนของหน้า เพื่อใช้เป็นส่วนที่แสดงการเลือกไปยังส่วน ต่าง ๆ ในหน้าเว็บ (Page navigation) โดยทั่วไปมักเรียกว่า เมนู ใช้แทน เท็ก <div id = "กav'> ใน HTML 4 และ XHTML เช่น
เมนูในแนวตั้งแบบ List
<nav>
<h2>Main navigation</h2>
<ul>
<lix ca href="I>Home </a> </lix >
<lis<a href-"/blog/">Weblog</a></li>
<liz<a href="/about/">About</a> s/li> <lix <a href="/contact/">Contact </a> </li>
</ul>
</nav>
หรือ เมนูในแนวนอน
<nav>
<hr>
<sp style="margin: Opx">
<a href-"index.htm">Home></a>
<a href= products.htm">Products</a>  
<a hret-"about htm"> About Our Store</a>  .
<a hret- contact.htm">contact Us-la>s shp
</nav>
Main navigation
Home
Weblog
About
Contact
Hame Products About Our Store Contact Us
11.2.2 โตรงสร้างทั่ว์ไปในการ์ใช้เท็กเชิงความหมาย
การวางโครงสร้างของแท็กเชิงความหมายใน HTML5
วางแท้กได้ดังนี้
<IDOCTYPE htmls <html
<langa"en">
<chead>
<meta charset="utt-8'>
<title>Artice (HTMLS) -/title> </head>
<body>
<headerid#"branding"> <!. ส่วนหัวขงหน้า > <h1>xSite namec/his <อ่นห้วชื่น ๆ เช่น ไอได้-- <Mheader <naV> <ux<lixMain navigationc/izcAuts kinav> cartide> (!- เนื้อหานลัก (ด้วบทลวม > cheader chl>Artide titleくhis cp>Article metadata </p> </header <p>Artice content/p> <footer Article footer/Tooter </artice> <asdeidะ "sidebar > <.เพื่อหารม ch3 Sidebartitle4/h3s <p>Sidebar content</p> lasides dooter id"tooterfocter/looter- 4!-อ่นถ้ำแขขบา Pbady
11.3 การจัดวางส่วนของเนื้อดวามบนหน้าเว็บ
เราสามารถจัดวางส่วนของเนื้อความบนหน้าเว็บได้ 2 วิธีด้วยกัน คือ การใช้สไตล์ foat และสไตล์ postion ซึ่งใช้ได้ทั้งส่วนของเนื้อความที่ถูกกำหนดด้วย div2 และแท็กเชิงความหมาย ทั้งหลาย
1 1 .3.1 การจัดวางส่วนของเนื้อด้วามไว้ทางซ้ายหรือขวาด้วยสไตล์ float
การจัดวางที่ง่ายที่สุดก็คือการใช้สไตล์ f0at ซึ่งสามารถกำหนดให้จัดวางไว้ทางซ้าย (en หรือขวา (right) ตัวอย่างเช่น
<div id= "topnav" style= "width: 150px;
หรือ
<nav style= "width: 150px; float: left">
หากกำหนดไว้ในสไตล์ชีท เป็นแท็ก <dง= ต้องกำหนดเป็น selector แบบ ID โดยนำหน้าด้วย เครื่องหมาย # เช่น #topnav (width: 150px; float; left) หรือหากกำหนดให้กับแท็กเชิงความหมาย เช่น <กลข> จะเป็นดังนี้ nav (width: 150px; float: left float: left">
11.3.2 การจ์ดวางส่วนของเนื้อความด้วยสไตล์ position
หากต้องการจัดวางลงในตำแหน่งที่ต้องการโดยเฉพาะ ให้ใช้สไตล์ position ในการกำ คำแหน่ง ซึ่งกำหนดได้ 3 แบบคือ
position: absolute
ใช้กำหนดตำแหน่งแบบคงที่โดยเทียบกับองค์ประกอบหลัก ซึ่งปกติแล้วก็คือแท็ก sbodys ดังนั้นตำแหน่งจึงถูกเทียบกับมุมบนซ้ายของหน้าเว็บ
position: relative ช้กำหนดตำแหน่งโดยระบุเบีนระยะห่างจากตำแหน่งขององค์ประกอบปกติ โดยไม่กระทบ กับองค์ประกอบอื่นในหน้านั้น แม้ว่าตำแหน่งนั้นจะทำให้เกิดการเกยซ้อนกัน
position: fixed ใช้กำหนดตำแหน่งแบบองที่ในหน้าต่างเว็บเบราว์เซอร์ ซึ่งจะไม่เปลี่ยนแปลงแม้ว่าจะเลื่อน กรวมสดงผสขึ้นหรือ แง แดี Internet Explorer ยังไม่รองรับค่านี้
การกำหนดดำการจัดวางเหล่านี้ จะต้องใช้ร่วมกับคุณลักษณะ top, right, bottom, และ! หรือ left เพื่อกำหนดตำแหน่ง ตัวอย่างเช่น การวาง <div> ชื่อ main ในตำแหน่งที่แน่นอนตรง ตำแหน่ง 100 พิกเซลจากด้านบนและ 200 พิกเซลจากด้านซ้ายของหน้า จะเขียนสไตล์ได้ดังนี้
#main (position: absolute; top: 100px; left: 200px)
หรือ การกำหนดตำแหน่งให้กับ Navigation bar ดังนี้
#topnav (position: nav (position: absolute; top: aiE e 150px)
11. 4 การจัตรูปแนให้กับส่วนของเนื้อความ
เราสามารถจัดรูปแบบให้กับส่วนของเนื้อความได้เช่นเดียวกับองค์ประกอบอื่น ๆ ที่เคยทำมา เช่น สามารถจัดรูปแบบข้อความด้วย font family, font style, font weight, alignment, color, และ อื่น ๆ ที่กล่าวไว้ใน CSS หรือใส่สีพื้นให้กับแต่ละส่วนด้วย background-color เป็นต้น
ตัวอย่างเช่น การกำหนดสีพื้นเป็นสีเหลืองให้กับส่วนของ Navigation bar ดังนี้
nav float: left; width: 150px; padding-top: 15px; background-color: yellow)
ตัวอย่างการจัดรูปแบบให้กับแท็กเชิงความหมาย
ผลที่ได้บนเบาเซอร์
ตัวอย่างการจัดหน้าโดยใช้แท็กเชิงความหมาย
bottom of page