การวางเลย์เอาท์ (Layout) ด้วยวิธีต่างๆใน CSS







 
ในช่วงก่อนๆนั้นการวาง Layout มักจะใช้คำสั่ง Table ในการจัดวาง เพื่อออกแบบเค้าโครงของหน้าเว็บเพจ หรือทั้งเว็บไซต์ วิธีการนี้เพียงแค่เราเข้าใจคำสั่งที่เกี่ยวกับตาราง (Table) อันได้แก่ table , tr , td เป็นต้น ก็จะสามารถสร้างหรือออกแบบโครงสร้าง หรือเลย์เอาท์
(Layout) ได้ดั่งใจ
                  
  
แต่ปัญหาคือเมื่อเพจนั้นถูกเปิดขึ้น มันจะแสดงเนื้อหาหลังจากที่โหลด Table เสร็จเสิ้น หรือจะอ่านขึ้นมูลจากด้านบนลงสู่ด้านล่าง และการใช้ Table ในการจัด Layout ทำให้ใช้เวลาในการโหลดหน้าเว็บพอสมควร เว็บโปรแกรมเมอร์ส่วนใหญ่จึงหันมาใช้แท็กง่ายๆอย่างแท็ก DIV หรือแท็ก P แทน และใช้ CSS ในการกำหนดว่าจะใช้บล็อกไหนเป็น Header บล็อกไหนเป็น Footer ดังภาพ

ใช้ DIV & CSS ในการจัดวาง Layout 

วิธีการนี้เป็นการจัดวางเลย์เอาท์(layout)เพื่อออกแบบเว็บไซต์ที่เป็นที่นิยมในปัจจุบัน โดยวิธีการนี้เราจะใช้ DIV Tag ในภาษา HTML ทั้งหน้าเว็บเพจ จากนั้นจึงใช้ CSS ในการกำหนดหรือจัดวางเลย์เอาท์ได้ตามใจเรา

ตัวอย่าง layout_design.html

<html>
<head>
<link type="text/css" rel="stylesheet" href="css_layout.css">
</head>
<body>
<div id="all">
    <div id="header"><h1>CSS&amp;HTML&nbsp;Layout</h1></div>
    <div id="left"><b>This is left side.</b>    
    </div>  
     <div id="content">
           <p>การจัดวางโครงสร้าง (Layout) ของเว็บ ถือเป็นจุดเริ่มต้นและจุดสำคัญมากในการออกแบบ ก่อนที่จะสร้างส่วนอื่นๆ เว็บโปรแกรมเมอร์ส่วนใหญ่มักออกแบบเค้าโครงของเว็บเพจไว้ก่อนเสมอ จากนั้นจึงกำหนดโครงสร้างอื่นๆต่อไป
            </p>
            <p>ตัวอย่างนี้ผู้เขียนได้ออกแบบ Layout อย่างคร่าวๆ โดยใช้แท็ก DIV ใน HTML พร้อมกับใช้ CSS ในการจัดการให้ข้อมูลออกมาในรูปแบบที่ต้องการ
            </p>
       </div>
       <div id="right"><b>This is right side.</b></div>
       <div id="footer"><b>This is footer</b></div>
</div>
</body>
</html>

 
 
ผลลัพธ์ที่ได้เมื่อยังไม่มีคำสั่ง CSS ที่เอาไว้ควบคุมลักษณะ หรือการจัดวางเลย์เอาท์ต่างๆ จะแสดงเพียงแค่ text ข้อความธรรมดาเมื่อรันผ่านแต่ละบราวเซอร์ ดังภาพ
 
ขั้นตอนต่อไปเป็นการสร้างไฟล์ CSS อีก 1 ไฟล์ (แทรกแบบ External) โดยมีชื่อไฟล์ว่า css_layout.css ดังนี้
  
 ตัวอย่าง css_layout.css 

* { margin: 0; padding: 0; }
#all{ width:980px; height:100%; margin:0px auto; position:relative; }
#header{ background-color:#ec8000; height:100px; padding:8px; }
#left{ background-color:#80ec00; height:100%; width:200px; position:absolute;}
#content{ position:absolute; margin:0 250px 0 200px; padding:8px; }
#right{ background-color:#8080ec; height:100%; width:250px; position:absolute; right:0; }
#footer{ position:absolute; background-color:#808080; height:100px; text-align:center; bottom:-120px; width:100%; }








   
ผลลัพธ์ที่ได้จะเป็นการจัดเลย์เอาท์ (Layout) โดยแบ่งเป็น Header , Left side , Right side , Content และ Footer ดังภาพ

  
หวังว่านักศึกษาทุกท่านคงพอจะเข้าใจในบทนี้ ผู้เขียนต้องการจะสื่อให้เห็นว่าในการจัดวางเลย์เอาท์ในปัจจุบันไม่ควรใช้ Table หรือให้พยายามใช้แท็ก DIV ใน HTML แทน เพราะข้อดีที่สำคัญคือทำให้เว็บโหลดได้เร็วขึ้น ซึ่ง CSS กับ HTML ทุกวันนี้สามารถประยุกต์ใช้งานได้อย่างกว้างขวางมากกว่า 
อย่างไรก็ตามขึ้นอยู่กับนักออกแบบเองว่าควรเลือกใช้ TAG ใด หรือจะออกแบบให้ Layout มีความสวยงามแตกต่างกับเว็บไซต์อื่นๆอย่างไร ซึ่งตรงจุดนี้ก็เป็นความสามารถเฉพาะของนักออกแบบและพัฒนาซอฟแวร์
  

 
 

 
MrPandaman


( Last update on 2014-04-29 )

ตรงนี้ถ้าเราชนะ
ไปที่ไหนเราก็ชนะ

 Artticle |  Email |  Facebook

2,183 : 2,700