iSchool เรียน web design, graphic design, final cut studio

Posts tagged column

ค้นหาพัฒนาการแห่ง Layout

Aug 15th

Posted by kwanjai in เริ่มต้นกับ CSS

12 comments

CSS Layout คือการจัดรูปหน้าเวปโดยการจัดวาง div และส่วนประกอบต่างๆของหน้าเวบนั้นๆ ให้อยู่ในจุดที่ต้องการ

การจัดตำแหน่งสามารถทำได้โดยการกำหนด position หรือการใช้เทคนิคการ float-clear

นอกจากนั้นยังต้องคำนึงถึง CSS Box Model ด้วย

Layout หลักๆในหนึ่งหน้า xhtml ที่มีความหมาย semantic (การเขียนหน้าเว็บตามความหมายของ tag) ที่ถูกต้องแก่การใช้งานได้แก่

header
navigation
content
footer

ซึ่งจากพื้นฐานนี้เราจะสามารถกำหนดรายละเอียดเพิ่มเติม ให้หน้าเว็บของเราต่อไปได้ว่า เราเลือกที่จะให้หน้าเว็บมีเนื้อหากี่ส่วนกี่คอลัมน์ คอลัมน์ไหนเป็นคอลัมน์หลักหรือคอลัมน์รอง เลือกที่จะมี navigation กี่ส่วนแบบไหน แล้วก็ควรจะตั้งชื่อ div ให้ตรงตามความหมายกับเนื้อหาทุกอย่างที่ใส่ไปด้วย การเพิ่ม div เข้าไปเพื่อจุดประสงค์ของการจัดรูปหน้าเพียงอย่างเดียว โดยไม่ได้เกี่ยวข้องกับเนื้อหาเป็นการประนีประนอมยอม แลกความถูกต้องทาง semantic(ความหมาย) กับการจัดรูปแบบเสมอ

เราควรใช้ div ที่มีจุดประสงค์เพื่อการจัดรูปหน้าอย่างเดียวให้น้อยที่สุด เท่าที่จะทำได้เพื่อรักษาความถูกต้องทาง semantic(ความหมาย) ไว้ให้ได้มากที่สุดเพื่อผลประโยชน์ทาง SEO ไม่ได้หมายความว่าเราควรหลีกเลี่ยงการใช้ div โดยสิ้นเชิง แค่ควรหลีกเลี่ยงการใช้ div ที่ไม่มีความหมายทาง semantic เท่านั้น
Read more…