หากเราต้องการสร้างเว็บไซต์ ที่มีเนื้อหาแบ่งเป็น 2 column แบบ Fix Layout ความกว้างของเว็บไซต์ 960 พิกเซล และให้อยู่กลางหน้าจอเสมอ โดยกำหนดให้มีส่วนหัว (header) ส่วนเนื้อหา (main content) และ ส่วนท้าย (footer) จะเริ่มต้นอย่างไร
เริ่มต้น
สร้าง html เปล่า โดยกำหนด doctype ให้เป็นแบบ XHTML 1.0 Transitional (ใช้ dreamweaver สร้าง)
จะได้ code html ดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>การนำเสนอเนื้อหา แบบโครงสร้าง 2 Column (Fixed Layout)</title>
</head>
<body>
</body>
</html>
เริ่มเขียนโครงสร้างหลัก3 ส่วน คือ header, main content และ footer โดยใช้ div ในการแบ่งโครงสร้าง
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>การนำเสนอเนื้อหา แบบโครงสร้าง 2 Column (Fixed Layout)</title>
</head>
<body>
<div class="header">
<h1>การนำเสนอเนื้อหา แบบโครงสร้าง 2 Column (Fixed Layout)</h1>
</div>
<div class="maincontent">
<h2>เนื้อหา</h2>
</div>
<div class="footer">
<p>By Corporate UI & Design</p>
</div>
</body>
</html>
ในส่วนของเนื้อหา กำหนดให้เป็น 2 Column
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>การนำเสนอเนื้อหา แบบโครงสร้าง 2 Column (Fixed Layout)</title>
</head>
<body>
<div class="header">
<h1>การนำเสนอเนื้อหา แบบโครงสร้าง 2 Column (Fixed Layout)</h1>
</div>
<div class="maincontent">
<div class="left">
<h2>Left Column</h2>
</div>
<div class="content">
<h2>Content</h2>
</div>
</div>
<div class="footer">
<p>By Corporate UI & Design</p>
</div>
</body>
</html>
สร้างไฟล์ external style sheet เปล่า ชื่อ main.css และ ลิ้งค์ไว้ใน
….
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>การนำเสนอเนื้อหา แบบโครงสร้าง 2 Column (Fixed Layout)</title>
<link href="cs/main.css" rel="stylesheet" type="text/css" media="screen" />
</head>
…
เขียน css เพื่อจัดหน้าตาเว็บไซต์ โดยเริ่มกำหนดค่าเริ่มต้นก่อน
@charset "utf-8";
/* CSS Document */
/*Reset*/
* { margin: 0; padding: 0; }
body { font-family: tahoma; font-size: 13px; color: #101010; }
เขียนโครงสร้างของ 3 ส่วนหลัก
.header, .maincontent { width: 960px; margin: 0 auto 15px; }
.footer { width: 960px; margin: 0 auto; }
จัดโครงสร้างในส่วนของ main content
.maincontent { overflow: hidden; }
.left { float: left; width: 300px; }
.content { margin: 0 0 0 315px; }
