เริ่มต้นใช้ css กับ 960 grid system

เริ่มต้นใช้ css กับ 960 grid system

อาจจะเป็นเรื่องที่เสียเวลา และปวดหัว กับการวางโครงสร้างหน้าเว็บโดยอาศัย CSS เพราะคนที่ทำเว็บมานาน ก็จะคุ้นเคยแต่การวางด้วย table มาโดยตลอด

แต่วันนี้เราจะมา Change กัน เราจะก้าวเข้าสู่คนทำเว็บยุคใหม่ (ซึ่งมันเริ่มมาประมาณ 2 ปีเห็นจะได้แล้วนะ) และไม่เพียงแค่นั้น (อย่างน้อยอีก3ปี)ในอนาคตก็ยังคงเป็นแบบนี้ด้วย

เข้าเรื่องกันเลยนะครับ ก็คือ 960 Grid system เนี่ย มันคือ CSS Framework ที่เราเอามาต่อยอดได้ง่ายและเร็ว โดยมีการวางพื้นฐานมาเพื่อการจัด layout โดยเฉพาะ โดยมี css ให้ download มาใช้ (ที่ติดตัว CSS reset มาด้วย) และนอกเหนือจากนั้นก็ยังมี layout design สำหรับคนที่ทำงาน design ติดมาด้วย ไม่ว่าจะเป็น Photoshop, Firework, Illustrator และโปรแกรมอื่นๆอีกมากมาย เรียกว่าเตรียมพร้อมกันทั้ง design และ คน coding เลยทีเดียว

สำหรับเนื้อหานี้ อาจจะยาวหน่อย แต่จะพูดให้ครบทั้งหมดของ 960 Grid system เลย

ทำความเข้าใจกับ พื้นฐาน 960 gird system ก่อน โดยเจ้าตัวนี้ จะขนาดกว้างรวม 960 Pixel ซึ่งดูสวย ในหน้าจอที่มีขนาดตั้งแต่ 1024 x 768 หรือใหญ่กว่า (ถือว่าเป็นคนส่วนใหญ่ในปัจจุบัน) โดยความกว้างนี้ เราจะสามารถแบ่ง column ได้หลายแบบ ตั้งแต่ 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 และ 480 ช่องเลย (ละเอียดจริงๆ) แต่ว่าคนส่วนใหญ่ ก็จะใช้การแบ่งที่ 12 หรือ 16 ช่อง

สำหรับการเริ่มใช้งาน 960 grid system ไม่ยากเลย ถ้าคนที่ไม่รู้ว่า เอา CSS มาใช้งานกับหน้าเว็บอย่างไร ก็อ่านบทความเก่าของเราได้ครับ มีลงไว้โดยละเอียดแล้ว (ในหมวด css)

ตอนนี้ก็ให้ download กันมาก่อนครับที่ http://960.gs/

เมื่อเราแตกไฟล์ออกมา เราจะได้ไฟล์เยอะแยะ ให้หาแฟ้มที่ชื่อ code ครับ ซึ่งในนี้จะมีตัวอย่างการใช้งานอยู่ด้วย แต่ต้องแกะโค้ดเอาเองนะ แต่จะมาอธิบายให้ฟัง โดยให้เรา copy เอาเฉพาะ แฟ้มที่ชื่อ css ออกมา วางไว้ในแฟ้มเดียวกับหน้าเว็บเลย

ให้เราทำการเรียก css เข้าหน้าเว็บ ด้วยโค้ดนี้

<link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/text.css" /> <link rel="stylesheet" type="text/css" href="css/960.css" />

เท่านี้เราก็พร้อมเต็มที่แล้ว ต่อจากนี้คือการใช้งานแบบเต็มๆแล้วครับ ให้เริ่มจากการวาง div แรกเป็นพื้นฐานก่อนคือ

<div class="container_12"> .... </div>

โดย content ทุกอย่าง เราจะวางใน div นี้เท่านั้นนะครับ  และจุดนี้ มีข้อสังเกตุคือ _12 ที่แปลว่าเราจะใช้การแบ่ง 12 column นั่นเอง

สำหรับการแบ่ง column  เพื่อวางเนื้อหาเว็บ จะมีการแบ่งได้ 3 แบบหลัก เราก็จะพูดทั้งสามแบบเลย

การแบ่ง column แบบที่ 1 แบ่งโดยการนับ เพื่อให้ครบ column แล้วใช้ clear คั่น
วิธีนี้เราจะเอามาใช้ ในกรณีที่ แบ่ง column ตามแนวตั้งครับ

<div class="grid_3">  <p>  220  </p>  </div>  <div class="grid_9">  <p>  700  </p>  </div>  <div class="clear"></div>

โค้ดด้านบนคือ แบ่ง ซ้าย กับ ขวานะครับ โดยซ้ายกว้าง 3 column และขวา กว้าง 9 column

<div class="grid_4">  <p>  1  </p>  </div>  <div class="grid_4">  <p>  2  </p>  </div>  <div class="grid_4">  <p>  3  </p>  </div>  <div class="clear"></div>

และสำหรับโค้ดด้านบน แบ่งเป็น 3 ส่วน นะครับ ส่วนละ 4 column ง่ายมั้ยครับ นับให้ครบ 12 ก็แล้วกัน แล้วเมื่อจบ ก็ใส่ clear ลงไป

การแบ่ง column แบบที่ 2 แบ่งโดยการเว้นพื้นที่ ด้านหน้า และหลัง เพื่อให้ครบ column แล้วใช้ clear คั่น
วิธีนี้เราจะเอามาใช้กับการแสดงผล ที่มีการเว้นระยะด้านหน้า หรือ ด้านหลัง แบบว่างๆ

<div class="grid_6 prefix_3 suffix_3"> <p> 6 column </p> </div> <div class="clear"></div>

จากโค้ดนี้ เราจะได้ พื้นที่ตรงกลาง ขนาดกว้าง 6 column โดยที่มีการเว้นด้านซ้าย และ ด้านขวา ด้านละ 3 column สามารถเปลี่ยนแปลงเลขได้ โดย grid_6 ก็คือ กว้าง 6 นั่นเอง และ prefix_3 คือการเว้นพื้นที่ด้านซ้าย ขนาด 3 column และ suffix_3 คือการเว้นพื้นที่ด้านขวาขนาด 3 column และต้องไม่ลืม ก็คือ นับให้ครบ 12 ก่อนคั่นด้วย clear แต่หาก ไม่ต้องการเว้นด้านซ้าย ก็ให้ตัด prefix_3 ออกได้เลย หรือไม่ต้องการเว้นขวา ก็ตัด suffix_3 ออกได้เหมือนกัน แต่สำคัญเน้นอีกครั้ง คือต้องนับครบ 12

แบบนี้ มีความต่างจากแบบแรกตรงที่ พื้นที่ด้านซ้าย และขวา เราจะเว้นเฉยๆ ไม่ได้เอามาลง content ครับ

การแบ่ง column แบบที่ 3 แบ่งโดยการดึงเนื้อหาข้ามฝั่ง สลับซ้ายขวา จัดระยะให้ครบ แล้วใช้ clear คั่น
วิธีนี้ ค่อนข้างซับซ้อน แต่ว่าดีต่อ เวลาที่ไม่มี css เพราะว่าสามารถดึงเนื้อหา ที่อยู่ฝั่งขวา ซึ่งปกติ จะถูกเขียนอยู่ในโค้ดลำดับล่างๆ(เพราะปกติเนื้อหาจะเรียงซ้ายไปขวา และเขียนโค้ดจากบนลงล่าง) ขึ้นมาเขียนข้างบนได้ โดยเนื้อหาก็ยังปรากฏที่ฝั่งขวาเหมือนเดิม

<div class="grid_6 push_6"> <div class="grid_1 alpha">  <p>60</p> </div> <div class="grid_5 omega">  <p>380</p> </div> <div class="clear"></div> </div> <div class="grid_6 pull_6"> <div class="grid_3 alpha">  <p>220</p> </div> <div class="grid_3 omega">  <p>220</p> </div> <div class="clear"></div> </div>

โค้ดนี้ เราจะเห็นว่า เราเขียนเนื้อหาใส่ในส่วน grid_6 push_6 ก่อน แต่ว่าเนื้อหาจะปรากฏที่ฝั่งขวา แต่กลับกัน เนื้อหาที่เขียนอยู่ใน grid_6 pull_6 ที่เขียนมาทีหลัง แต่ปรากฏด้านซ้ายมือ ซึ่งถ้าเป็นการแบ่งแบบแรก เนื้อหาที่เขียนก่อน จะปรากฏฝั่งซ้าย หากสังเกตุ จะเห็นว่าเนื้อหาด้านใน นอกจากจะต้องแบ่งให้ครบเท่า ความกว้างด้านนอกแล้ว ยังต้องเติม alpha และ omega ด้วย โดย alpha จะเป็น เนื้อหาฝั่งซ้าย และ omega จะเป็นเนื้อหาฝั่งขวา (สลับกันไม่ได้นะครับ) และต้องไม่ลืม นับความกว้างรวมให้ครบด้วย  โดย grid_6 push_6 รวมได้ 12 พอดี แล้ว pull ก็เช่นกัน ทั้งนี้เนื้อหาภายในก็ต้องได้เท่าภายนอก นั่นคือ grid_5 alpha รวม grid_1 omega ก็ได้เท่ากับ grid_6 พอดีนั่นเอง

การใช้ 960 โดยสรุปแล้วก็แค่ยากตรงนับเลขนี่แหล่ะ  (ยากตรงไหน) หากนับเลขไม่ครบ โครงสร้างก็เบี้ยว

และการใช้งานจริง เราอาจจะตัดบรรทัดที่ include text.css ทิ้ง

<link rel="stylesheet" type="text/css" href="css/text.css" />

แล้วเขียน css ของตัวเอง ขึ้นมาใช้ใหม่ก็ได้ (เพราะปกติการทำเว็บ ก็ต้องเขียน CSS ใช้เองอยู่แล้ว)

คิดว่าไม่น่าจะยากจนเกินไป ทั้งนี้ต้องลองทำตามด้วยนะครับ จะได้เข้าใจ

Create: Modify : 2010-06-19 20:23:33 Read : 13943 URL :