CSS Website Layout

ในเนื้อหาส่วนนี้จะเป็นตัวอย่างการออกแบบโครงสร้างเว็บไซต์ และการจัดวางองค์ประกอบ (element) ของเว็บไซต์แบบพื้นฐาน ซึ่งเว็บไซต์ทั่วไปจะประกอบไปด้วยส่วนของ header , menu, content และ footer เป็นหลัก

ภาพที่ 1 เค้าโครงเว็บไซต์

ตัวอย่างการเขียนโค้ดตามแบบโครงร่างภาพที่ 1 

ขั้นที่ 1 สร้างส่วนของ header

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      .header {
        background-color:rgb(70,143,255);
        padding: 20px;
        text-align: center;
        color:white;
      }
    </style>
  </head>
  <body>

    <div class="header">
      <h1>Header</h1>
    </div>

  </body>
</html>

 

ขั้นที่ 2 สร้างส่วนของเมนูหลังต่อท้ายส่วน header

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      .header {
        background-color:rgb(70,143,255);
        padding: 20px;
        text-align: center;
        color:white;
      }
      .navbar {
        overflow: hidden;
        background-color: #333;
      }

      .navbar a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      .navbar a:hover {
        background-color: #ddd;
        color: black;
      }
    </style>
  </head>
  <body>

    <div class="header">
      <h1>Header</h1>
    </div>
    
    <div class="navbar">
      <a href="#">Menu</a>
      <a href="#">Menu</a>
      <a href="#">Menu</a>
    </div>

  </body>
</html>

 

ขั้นที่ 3 สร้างส่วนของการแสดงผลเนื้อหาหลักของเว็บไซต์

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      .header {
        background-color:rgb(70,143,255);
        padding: 20px;
        text-align: center;
        color:white;
      }
      .navbar {
        overflow: hidden;
        background-color: #333;
      }

      .navbar a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      .navbar a:hover {
        background-color: #ddd;
        color: black;
      }
      
      .content {
        padding: 15px;
        background-color:rgb(190,189,189);
      }
    </style>
  </head>
  <body>

    <div class="header">
      <h1>Header</h1>
    </div>
    
    <div class="navbar">
      <a href="#">Menu</a>
      <a href="#">Menu</a>
      <a href="#">Menu</a>
    </div>
    
    <div class="content">
      <h2>Content</h2>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
    </div>


  </body>
</html>

 

 

ขั้นที่ 4 เพิ่มส่วนของ footer

<html>
  <head>
    <style>
      body {
        margin: 0;
      }

      .header {
        background-color:rgb(70,143,255);
        padding: 20px;
        text-align: center;
        color:white;
      }
      .navbar {
        overflow: hidden;
        background-color: #333;
      }

      .navbar a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      .navbar a:hover {
        background-color: #ddd;
        color: black;
      }
      
      .content {
        padding: 15px;
        background-color:rgb(190,189,189);
      }
      .footer{
      	padding:5px;
        background-color:rgb(70,143,255);
        text-align:center;
      	color:#fff;
      }
    </style>
  </head>
  <body>

    <div class="header">
      <h1>Header</h1>
    </div>
    
    <div class="navbar">
      <a href="#">Menu</a>
      <a href="#">Menu</a>
      <a href="#">Menu</a>
    </div>
    
    <div class="content">
      <h2>Content</h2>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
      <p>.</p>
    </div>

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

  </body>
</html>

ขั้นที่ 5 ทำเว็บให้เป็น Responsive Website หมายถึงเว็บไซต์ท่ที่สามารถปรับการแสดงผลให้เหมาะสมกับอุปกรณ์ที่ใช้ในการแสดงผล (รองรับการแสดงผลที่สวยงามในทุกอุปกรณ์) โดยเพิ่มแท็ก <meta name=”viewport” content=”width=device-width, initial-scale=1″>  ไว้ภายในแท็ก <head> และเพิ่ม  @media screen and (max-width: 400px) { .navbar a { float: none; width: 100%; } }  ไว้ใน style

<html> 
  <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style> 
    body 
    { margin: 0; } 
    .header { background-color:rgb(70,143,255); padding: 20px; text-align: center; color:white; } 
    .navbar { overflow: hidden; background-color: #333; } 
    .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } 
    .navbar a:hover { background-color: #ddd; color: black; } 
    .content { padding: 15px; background-color:rgb(190,189,189); } 
    .footer{ padding:5px; background-color:rgb(70,143,255); text-align:center; color:#fff; } 
    @media screen and (max-width: 400px) {
      .navbar a {
        float: none;
        width: 100%;
      }
    }
    </style> 
  </head> 
  <body> 
    <div class="header"> <h1>Header</h1> </div>
    
    <div class="navbar"> 
      <a href="#">Menu</a> 
      <a href="#">Menu</a> 
      <a href="#">Menu</a> 
    </div> 

    <div class="content"> 
      <h2>Content</h2>
      <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> <p>.</p> 
    </div>
    
    <div class="footer"> 
      <h2>Footer</h2> 
    </div> 
  </body>
</html>

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: