โดย เมื่อ 2007-08-31 08:34:00 ดูทั้งหมด 240 ครั้ง
ก่อนหน้านี้เราได้รู้แล้วว่าการทำหน้าเว็บแบบ 1 คอลัมน์เลย์เอ้าท์ พร้อม หัวและท้ายนั้นทำยังไง คราวนี้ลองมาแยกคอลัมน์ สำหรับใส่ข้อมูลลทำเป็น คอลัมน์เมนูด้านซ้ายมือกันดูครับ ว่าจะทำยังไง และจะให้มันแสดงผลออกมายังไง
การวางแบบ เลย์เอ้าท์ ขึ้นแรกสุดที่ผมอยากแนะนำไว้ตรงนี้ก่อนสักนิดนึงนะครับ เพื่อให้เป็นการง่ายในการเขียนโค้ด CSS ท่านลองหลับตานึกก่อนว่า จะให้ หน้าเว็บแสดงผลออกมาในลักษณะ อย่างไร
เช่น ผมนั่งหลับตานึกๆ แล้ว ได้ประมาณว่า อยากให้เว็บมี header มีตรงกลางแสดงผลข้อมูล แล้วก็ แบ่งพื้นที่ไว้ทำเมนูด้านซ้ายมือ เหมือนเว็บทั่วๆ ไป ส่วนฝั่งขวาเอาไว้แสดงผลข้อมูล แล้วก็มีไฟล์ footer เพื่อแสดงรายละเอียดเกี่ยวกับหน้าเว็บสักเล็กน้อย
ถ้าคิดอยากให้เป็นได้ลักษณะนี้แล้ว ต่อไปก็ลุยโค้ด css ได้เลยครับ หลักๆ สำหรับ หน้าเว็บแบบ 2 คอลัมน์และมีหัวท้ายนี่ จะใช้ DIV tag id 3 ตัว และ DIV class 2 ตัว
คือ
1. id แรก จัดให้เป็น div header
2. id ที่ สอง จะให้เป็น div wrapper (เพื่อไว้แสดงผลข้อมูลและเมนู)
3. id ที่สาม กำหนดให้เป็น div footer
**id ทั้ง 3 กว้าง 800px
สำหรับ class ทั้ง 2 ตัว ที่จะนำมาใช้ นั้น ใช้ควบคุม 2 คอลัมน์ที่ซ้อนอยู่ใน id wrapper นั่นเองครับ
1. กำหนดคลาสสำหรับ tag div ฝั่งซ้ายให้ชื่อ content-left (200px)
2. กำหนดคลาสสำหรับ tag div ฝั่งขวาชื่อ content-right (600px)
เมื่อได้รูปแบบแนวคิดการเขียนมาแล้ว เริ่มละเลง css กันได้เลยครับ
ตัวอย่าง และโค้ด สามารถ Save ได้จาก Link นี้ครับ
http://www.thaicss.com/lessons/layouts/2chf.php
Tags:
Unknown Version Unknown
