d11 960gs css grid framework

[CSS Framework] 960.gs Grid System มาลองใช้กริดดีไซน์หน้าเว็บไซด์กัน!!

เอนทรีนี้เป็นเอนทรีแรกที่เขียนบทความขึ้นมาเองครับ เนื่องจากไม่นานมานี้ได้ไปลอง CSS Framework ตัวหนึ่ง (จริง ๆ แล้วอาจจะเล็กเกินกว่าจะเรียกว่า Framework) นั่นคือ 960.gs ซึ่งพอเข้าเว็บไปอ่านข้อมูลตอนแรกก็ยังงง ๆ อยู่ แต่พอดู Screencast (หรือวีดิโอ) ของ NetTuts แล้วก็กระจ่างขึ้นมาทันทีเลยครับ โดยส่วนตัวคิดว่าเป็น CSS Framework เบา ๆ ที่ใช้งานง่ายมาก ๆ

ก่อนอื่นขอบอกไว้ก่อนว่า ถ้าจะใช้ CSS Framework จะต้องเขียน CSS เป็นในระดับหนึ่งก่อนนะครับ ไม่ต้องถึงขนาดเก่งเทพก็ได้ครับ เอาพอรู้ว่า class/id ใน CSS เป็นยังไง แล้วก็เอามาใช้ยังไง แค่นั้นก็พอแล้วครับ

เว็บไซด์ที่ทำด้วย 960.gs

ก่อนจะทำก็ต้องรู้ก่อนใช่มั้ยครับว่า 960.gs เนี่ยทำเว็บไซด์หน้าตาประมาณไหน อันนี้เป็นตัวอย่างจากเว็บ 960.gs ครับ:

OneHub 960.gs Sample

ข้อดี/ข้อเสียของ  960.gs

ข้อดี

  • ใช้ง่าย เรียนรู้ได้เร็ว
  • แบ่งเป็น 12-column กับ 16-column เลือกได้ว่าจะให้ layout ละเอียดแค่ไหน
  • ช่วยให้การออกแบบเว็บไซด์เร็วขึ้นมาก ถ้าทำเว็บที่หน้าตาเหมาะกับ Grid System อันนี้
  • หน้าตาเว็บเหมือนกันทุก Browser ทำให้ไม่ต้องกังวลว่าไปเปิดใน IE6 แล้วจะเจอบั๊กรอดักควาย
  • ขนาดไฟล์เล็กมาก ถ้าแบบ Compress (บีบอัดแล้ว) แล้วไม่เกิน 5 kb ส่วนแบบ Uncompress ไม่เกิน 8 kb

ข้อเสีย

  • ขนาดเว็บไซด์มีความกว้างอยู่ที่ 960 px เท่านั้น (เป็นตัวเลขที่สวยอยู่แล้ว) ซึ่งถ้าอยากได้ความกว้างขนาดอื่นจะใช้ไม่ได้
  • ขาดความอิสระใน Layout ของเว็บไซด์ลงไปอีกหน่อย (อันนี้เป็นเรื่องธรรมดาของการใช้ Framework อยู่แล้ว)

Grid Overlay

ระหว่างที่ทำเว็บด้วย 960.gs ก็คงต้องมีบ้างแหละครับ ที่อยากลองเอา Grid มาทาบใส่เว็บเรา หรือเวลาไปเยี่ยมชมเว็บอื่นที่ใช้ 960.gs ก็คงอยากลองเอากริดมาทาบดูว่าเค้าแบ่งช่องยังไงใช่มั้ยครับ มีคนทำโค้ด Javascript สำหรับกดใช้เพื่อแสดงกริดใส ๆ มาทับบนเว็บ เราจะได้เห็นกันชัด ๆ ไปเลยว่าเว็บนี้แบ่งช่องยังไงบ้าง

วิธีใช้ในเว็บบราวเซอร์ก็คือ >> แดรกลิงค์ที่เค้ากำหนดไว้ไปใส่ ในแถบบุ๊กมาร์ค หรือแอด Favorite เอาไว้ ครับ พอจะใช้ก็ไปที่เว็บที่ต้องการใช้ แล้วคลิกลิงค์บุ๊กมาร์กนั้น มันจะรัน Javascript ที่แสดงกริดทับบนเว็บนั้นทันทีครับ (ถ้าเน็ตอืดอาจต้องรอสักพัก)

ผมเจอคนทำโค้ดแบบนี้ออกมาสองคนครับ เลือกใช้ได้เลย: 960 Gridder, Grid960

แหล่งข้อมูลสำหรับ 960.gs

สำหรับคนที่ยังใช้ไม่เป็นเลย เริ่มจาก Screencast ของ NetTuts น่าจะดีที่สุดครับ เพราะเค้าโชว์แบบ Step by Step ตั้งแต่ดาวน์โหลด 960.gs มาจากเว็บเลยทีเดียว

A Detailed Look at the 960 CSS Framework

ถ้าดูอันข้างบนแล้วยังไม่สะใจ ก็สามารถอ่าน บทความจาก NetTuts ได้ครับ อันนี้จะสอนใช้ 960.gs แบบ Step by Step เช่นกัน แต่จะเป็นแบบตัวหนังสือล้วน ๆ แล้วก็สอนทำเว็บที่หน้าตาดูดีกว่าวีดิโอด้านบนครับ

Prototyping With The Grid 960 CSS Framework

พร้อมแล้วสามารถไปดาวน์โหลด 960 Grid System มาใช้กันได้จาก 960.gs Official Website เลยครับ!

ถ้าเกิดลองแล้วสงสัยตรงไหนก็โพสถามทิ้งไว้ได้ครับ แต่ผมก็เพิ่งเริ่มลองใช้เหมือนกันครับ อาจตอบไม่ได้ทุกอย่างแต่จะพยายามหามาตอบให้นะครับ







There are 22 comments

Add yours
  1. Little_Tall

    เป็นหน้าม้า เจ้าของเว็บสั่งมาให้มาเจิม
    สาธุขอให้เว็บล่ม อิอิ

  2. เต่า

    ผมใช้ 960 แล้วรู้สึกมันแคบไป สำหรับเว็บคนไทยที่ ค่อนข้างเน้น content เยอะๆ

    เลยหันมาใช้ 1000 จะพอดีกับ หน้าจอ 1024 พอดีแป๊ะ
    ส่วน margin / padding ก็ใช้ 20 เป็นระยะที่เวิคที่สุดแล้วละ 20 เนี้ย

  3. admin

    เห็นด้วยครับ คนไทยเน้นเว็บข้อมูลเยอะ (อย่างพวกเว็บวาไรตี้) เฟรมเวิร์กตัวนี้น่าจะไม่เหมาะกับเว็บไซด์ประเภทนั้นเท่าไร

    ว่าแต่คุณเต่าใช้ Framework ตัวไหนครับนี่? เข้าใจว่าเขียนมือทั้งหมดสินะครับ (เห็นไม่ได้บอกไว้)

  4. ์NaiTan

    สาระดีๆ ทั้งนั้น
    ไม่เคยพบมาก่อน เปิดกว้างความรู้ดีครับ

  5. admin

    ขอบคุณครับ อยากได้เนื้อหาแบบไหนรีเควสได้นะครับผม

  6. Designil

    ใช้ไม่ยากครับ ลองใช้ดูครับ ถ้าสงสัยตรงไหนถามได้เลยนะครับ ^^

  7. oxygenyoyo

    ผมไปเจอเจ้าตัวนี้ ตอนที่ติดปัญหา design เพื่อเจ้า IE เนี้ยแหละครับ

    ใช้แล้วก็โอเค ข้อดีข้อเสียก็คงต้องมีเป็นธรรมดาแต่ถ้าทำเว็บแบบไม่ต้องการเน้น content มากมาย

    อย่างที่ด้านบนบอก ผมคิดว่าเป็นทางเลือกที่ดีครับ อย่างนี้แหละครับ

    ” tools มันจะดีก็ต่อเมื่อเราใช้ให้เหมาะสมกับงานครับ ^^ “

  8. ViNCeNT

    ถ้าจะออกแบบเว็บให้เหมาะสมกับหน้าจอ 1024 ความกว้างที่เหมาะสมก็คือ 960 นี่แหละครับ ดีที่สุดแล้ว
    ถ้าคุณทำหน้าจอขนาด 1000 ออกมา ระวังอาจจะเจอปัญหาเมื่อไปเปิดที่เครื่องอื่นหรือเว็บบราวเซอร์ตัวอื่นนะครับ

  9. TakoYaki

    ขอบคุณค่ะ กำลังอยากรู้จักเจ้า 960 นี้อยู่พอดีเลย ^^


Post a new comment