CSS

หน้าเว็บแบบ 1 คอลัมน์ เลย์เอ้าท์

กำหนดความกว้าง คืออย่างแรกที่ผมนึกถึง ในการคิดวางโครงสร้าง เลยย์เอ้าท์ ให้กับหน้าเว็บ  ในเรื่องแรกสุดนี้ จะเริ่มจากง่ายๆ ก่อนครับกับ 1 คอลัมน์ เลย์เอ้าท์ จัดตรงกลาง

ส่วนใหญ่แล้วความกว้างของหน้าเว็บนั้นจะขึ้นอยู่กับคนเขียนแหละครับว่า คิดว่ากลุ่มเป้าหมายของเว็บที่เรากำลังทำนั้นหน้าจออยู่ที่ขนาดเท่าไหร่ หรือแล้วแต่ความชอบใจ แต่ผมจะยกตัวอย่างกรณี ที่ความกว้าง 800px

ถ้าไอเดียเริ่มแรกของเราคิดออกมาได้ประมาณว่า หน้าเว็บกว้าง 800px พื้นหลังสีเทา พื้นที่ของข้อมูลสีขาว ตัวหนังสือสีน้ำเงิน มีเส้นขอบบางๆ ทั้งซ้ายและขวาข้างละสัก 1px กำลังพอเหมาะ เว้นระยะห่างระหว่าง เส้นขอบสัก 4px กำลังดี

1 คอลัมน์ พร้อม Header และ Footer

โดยทั่วไปแล้ว เราจะเห็นเว็บในลักษณะ 3 ส่วนแบบนี้คือ มีส่วนหัว คือส่วนบนสุด ส่วนเนื้อหา และส่วนล่างสุดคือส่วนรายละเอียด เกี่ยวกับเว็บไซท์ ลิขสิทธิ์ เบอร์โทรติดต่อ ฯลฯ

2 คอลัมน์เลย์เอ้าท์ พร้อม header และ footer

ก่อนหน้านี้เราได้รู้แล้วว่าการทำหน้าเว็บแบบ 1 คอลัมน์เลย์เอ้าท์ พร้อม หัวและท้ายนั้นทำยังไง คราวนี้ลองมาแยกคอลัมน์ สำหรับใส่ข้อมูลลทำเป็น คอลัมน์เมนูด้านซ้ายมือกันดูครับ ว่าจะทำยังไง และจะให้มันแสดงผลออกมายังไง

การวางแบบ เลย์เอ้าท์ ขึ้นแรกสุดที่ผมอยากแนะนำไว้ตรงนี้ก่อนสักนิดนึงนะครับ เพื่อให้เป็นการง่ายในการเขียนโค้ด CSS ท่านลองหลับตานึกก่อนว่า จะให้ หน้าเว็บแสดงผลออกมาในลักษณะ อย่างไร

เช่น ผมนั่งหลับตานึกๆ แล้ว ได้ประมาณว่า อยากให้เว็บมี header มีตรงกลางแสดงผลข้อมูล แล้วก็ แบ่งพื้นที่ไว้ทำเมนูด้านซ้ายมือ เหมือนเว็บทั่วๆ ไป ส่วนฝั่งขวาเอาไว้แสดงผลข้อมูล แล้วก็มีไฟล์ footer เพื่อแสดงรายละเอียดเกี่ยวกับหน้าเว็บสักเล็กน้อย

ถ้าคิดอยากให้เป็นได้ลักษณะนี้แล้ว ต่อไปก็ลุยโค้ด css ได้เลยครับ หลักๆ สำหรับ หน้าเว็บแบบ 2 คอลัมน์และมีหัวท้ายนี่ จะใช้ DIV tag id 3 ตัว และ DIV class 2 ตัว

Pseudo-classes อย่างไรกับ Link หลากสี

Pseudo-classes ไม่จำเป็นต้องมีเพียงคลาสเดียวใน CSS ไฟล์ ได้ แต่ชื่อคลาสต้องไม่ซ้ำกัน ซึ่งในเรื่องน้ำ ผมขอยกตัวอย่างการใช้ Pseudo-classes หลายๆแบบให้เห็นสักเล็กน้อย สำหรับผู้ที่ยังมึนงงอยู่ ว่าจะจัดการกับ ตัวหนังสือที่เป็นลิงค์ในหน้าเดียวกัน แต่ยากให้มันมีหลายๆ สียังไง,/p>

ในการเขียน CSS ของผมไม่ว่าจะนำไปใช้สำหรับเว็บใด หรือหน้าเพจพิเศษ ไหนก็ตาม ผมจะกำหนด Pseudo-classes หลักเพื่อให้เป็น ฐานของการลิงค์ ของเว็บเสมอ คือ ถ้าในคลาสอื่นๆ ไม่ได้มีการเรียกใช้ Pseudo-classes พิเศษใดๆ ที่เฉพาะเจาะจงออกไปแล้ว ลิงค์ ทุกลิงค์ จะแสดงผลออกมาลักษณะเหมือนกัน

เริ่มเขียน CSS | selector { property: value;}

Selector

คือส่งแรกที่สุดที่ควรรู้ แล้วคืออะไรหว่า ชื่อคลาส ชื่อไอดี หรือ [X]HTML tag ใดๆ ใน CSS นั้น เรียกว่า Selector ครับ

โดย คลาส นั้นใช้ . (ดอท) ในการบ่งบอกว่าเป็นคลาส ส่วน ไอดี นั้นใช้ # (ชาร์พ) เป็นตัวบอกว่านี่คือไอดีนะ ส่วน html tag หรือ ใส่มันลงไปโต้งๆ เลยครับ เช่น body (ส่วนของ body) หรือ img (รูปภาพ)

Property

คือชื่อคุณสมบัติของ css เช่น width, height, position ฯลฯ

Values

คือค่าของ property นั้นๆ ครับ เช่น 500px สำหรับความกว้าง

Back to Top