imkopkap

#5 สร้างเว็บไซต์ภาษา html : จัด layout ด้วย div

ใช้เวลา 12 นาที 11/08/2014

ในเว็บไซต์ของเว็บต่างๆแล้ว จะสังเกตได้ว่าแต่ละเว็บนั้นจะถูกจัดแบ่งเป็นอย่างดี เช่น logo ต้องอยู่บนสุด เมนูต้องอยู่ด้านบนบ้าง ด้านข้างบ้างหรือจะล่างสุดของเว็บ และมีเนื้อหาอยู่กลางๆริมๆ ของเว็บ ทำไมเว็บไซต์ถึงได้อยู่กันเป็นระเบียบแบบนั้น ? แน่นอนครับว่าใน html แล้วจะต้องมีแท็กสำหรับการจัดการเว็บไซต์แบบนั้นอยู่ ซึ่งการจัดแบบนั้นในภาษาเว็บไซต์เขาเรียกกันว่า layout

 

 

Layout ดียังไง?

layout หรือ เลย์เอ้าท์ ก็จะประโยชน์อย่างมากในด้านการจัดแบ่ง การทำหน้าตา UI ( User interfect ) ให้สวยงาม แบ่งให้รู้ว่าส่วนนี้คืออะไร ทำงานยังไง และส่วนนี้จะอยู่ตรงไหน User ต้องเข้าไปยังไง ถ้าเว็บถูกจัด layout ไว้เป็นอย่างดี User สามารถรู้ได้เลยว่าส่วนไหนคืออะไร แล้วจะสามารถใช้งานได้อย่างไร แบบนี้เขาเรียกว่า UX  ( User experience ) ซึ่งจะทำให้เว็บข้องเราได้รับความนิยม เป็นอย่างมาก ( ถ้าเว็บเราน่าสนใจและมีประโยชน์ )

 

การใช้ Tag div

เจ้าแท็ก div ก็จะช่วยให้เราจัดการกับ layout ได้ ซึ่ง div ก็คือ box การแบ่งกล่องเป็นช่องๆ เรียงกันให้สวยงามตามใจผู้พัฒนาถือว่ามีประโยชน์มากๆ แต่แท็กของ html5 นั้นก็จะพัฒนาแทน div บางส่วน ก็คือ จาก <div id=”header”> ใน html5 จะใช้แค่ <header> อะไรแบบนี้ครับ ลองศึกษาเพิ่มเติมได้ที่ w3schools.com ในเรื่องของ html5 นะครับ แต่คลิปนี้จะพูดให้ดูในเรื่องของ div ก่อน

 

div

 

เจ้า div ได้กำหนดว่ามันเป็น box ตัวนึง ซึ่งเราสามารถกำหนดมันได้เช่น ส่วน header เราก็สร้างกล่องให้มันซะคือ <div class=”header”> ในส่วนอื่นๆ เราก็แค่เปลี่ยนชื่อ class ( ชื่อ class จะตั้งเป็นอะไรก็ได้แต่ ณ ที่นี้ตั้งให้เข้าใจง่ายจะดีที่สุด , class ใช้สำหรับอ้างอิงใน css )  อะไรแบบนี้ ถ้า html5 จะทำได้แบบนี้ <header id=”header>

<!DOCTYPE html>
<html>
<head>
  <title>Tag Div</title>

  <style type="text/css">
    .header {width: 700px; height: 100px; background-color: #000; color:#fff;}
    .Article {float:right; width: 70%; height:500px; background-color: #e2421e;}
    .aside {width: 30%; background-color: #ff6c00; float: left; height:500px;}
    .footer {background-color: #64a74a; height: 200px; clear: both;}

  </style>
</head>
<body>

<div style="width:700px; margin:0 auto;">
  
  <div class="header">
    <p>Header</p>
  </div>

  <div class="Article">
    <p>Article</p>
  </div>

  <div class="aside">
    <p>Aside</p>
  </div>

  <div class="footer">
    <p>Footer</p>
  </div>

</div>

</body>
</html>

 

มีอะไรสอบถามได้ในแฟนเพจนะครับ Kopkap

บันทึกแนะนำ