Grass still Green

พอดีเมื่อวานนี้นั่งดู Stat ของ obbon.net แล้วไปเห็นว่ามีคนเข้า Google แล้วค้นหาด้วยคำว่า “jquery drag drop กบ” เห็นแล้วรู้สึกดีมากเลยครับ เหมือนมีคนมาตบไหล่เบาๆ แล้วพูดว่า สู้ต่อไปดิวะ ฮี่ๆ น้ำตาจะไหล เข้าเรื่องกันดีกว่าคับ

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

สิ่งที่ต้องมี

1. Blueprint CSS Framework ความจริงมันมีหลายเจ้านะคับ แต่ที่ผมเลือกตัวนี้เพราะว่า ผมเคยทำแต่ตัวนี้ …
2. ไฟล์ HTML 1 ไฟล์เอาไว้ลองคับ
3. หมดละคับ

เข้าใจ Blueprint

ก่อนอื่นเรามาทำความเข้าใจแนวคิดของคนทำ Blueprint ก่อนนะคับ
Blueprint จะมองหน้าเว็ปเพจว่ามีความกว้าง 950 px นะคับ โดยจะถูกแบ่งเป็น Grid ซึ่งมีความกว้าง 30 px จำนวน 24 Grid แต่ละ Grid มีระยะห่างกัน 10 px ตามภาพประกอบ 1.2ก นะคับ แล้วทำไมต้องรู้ด้วย เพราะว่าเวลาเราจะวางข้อมูล เราก็จะต้องวางตาม Grid นะคับ แต่สุดท้ายเราก็สามารถปรับแต่งได้อยู่ดีคับ มันช่วยให้เราวางโครงเป็นระบบมากขึ้น ทำให้เราทำงานได้เร็วขึ้น

ลงมือปฎิบัติ

1. เริ่มแรกเราต้องมีภาพเว็ปในใจแล้วนะคับ อันนี้เป็นตัวอย่างนะคับ 
2. จากนั้นเราจะต้องมองโครงสร้างในแบบของ Grid นะคับ ซึ่งก็จะได้ตามรูปนี้ 
   ต่างคน ก็อาจจะมองออกมาไม่เหมือนกันนะคับ ซึ่งไม่มีถูกผิดนะคับ แต่ถ้าทำไปเรื่อยๆ ก็จะรู้เองว่ามองแบบใหนถึงจะเหมาะสม
3. หลังจากมองโครงสร้างเรียบร้อยแล้ว ก็ได้เวลาเขียนไฟล์ HTML แล้วล่ะคับ

   
   
   
   
      
   
   
   
   
   Header
   Sidebar
   
   Column#1
   Column#2
   
   footer
   
   
   
   

   บรรทัดที่ 3-5 : เป็นการประกาศใช้ไฟล์ css ของ Blueprint คับ บรรทัดที่ 5 จะพิเศษหน่อยเพราะมันเอาไว้แก้ปัญหาการแสดงผลของ IE ตั้งแต่เวอร์ชั่น 7 ลงไปคับ
   
   บรรทัดที่ 7 : เป็นการประกาศใช้ไฟล์ css ของเราเองนะคับ Blueprint ไม่ได้ทำให้เราทุกอย่าง อะไรที่เราอยากปรับแต่งเองก็เอาใส่ไว้ในไฟล์นี้ล่ะคับ
   
   บรรทัดที่ 10 : จะเห็นว่าผมสร้าง DIV ซึ่งมีคลาสคือ container ครอบไว้ ที่ต้องทำแบบนี้เพราะ Blueprint เค้ากำหนดไว้คับ ว่าคลาสต่างๆ ที่เค้าเตรียมไว้ให้นั้น มันจะมีผลก็ต่อเมื่อมันอยู่ในคลาส container
   
   บรรทัดที่ 12 : คลาส span-24 เป็นการบอกว่า จะให้กล่องนี้มีความกว้าง 24 ช่องนะ เราเลือกได้ตั้งแต่ span-1 ถึง span-24 คับ ส่วนไอดี header ผมเอาไว้ให้ mystyle.css ใช้ในการปรับแต่งคับ
   
   บรรทัดที่ 16 : push-1 คือการขยับไปทางขวาอีก 1 ช่องด้วยการเพิ่ม margin คับ Blueprint เค้ามีคลาสอื่นๆ ให้ใช้อีกเยอะนะคับ ดูได้ใน screen.css เลยคับ ส่วนคลาส last ใส่ไว้เพื่อให้กล่องมันลงล็อคพอดีคับ เพราะว่าคลาส span โดยปกติจะมี margin-right: 10px ซึ่งถ้าเป็นแบบนี้หมด 24 อันจะเห็นว่ามันจะกลายเป็น 24 x (30 + 10) = 960 ซึ่งมันไม่ใช่ (ดูจากรูป 1.12ก นะคับ จะเห็นว่า Grid ขวาสุดจะไม่มีขอบด้านขวา) การใส่คลาส last ก็เพื่อบอกว่ามันเป็นบล็อคขวาสุดนะ ไม่ต้องมีระยะขอบ งงมั้ยเนี่ย ถ้างงกลับไปอ่านตั้งแต่บรรทัดแรก สิบรอบ ปฎิบัติ!

   /* File mystyle.css นะคับ */
   #header{
    background: #e9e7cf;
   }
   
   #footer{
    background: #eaaaaa;
   }
   
   #side_bar{
    background: #b7dcff;
   }
   
   #main_content{
    background: #b7dcff;
   }
   
   #main_content_header{
    background: #ecd4ba;
   }
   
   #column_1{
    background: #e4c8f2;
   }
   
   #column_2{
    background: #ffd7d7;
   }
   

   ไฟล์นี้คงไม่ต้องอธิบายนะคับ เพราะมันก็ไม่มีอะไรให้งง # เอาไว้บอกว่า อะไรก็ตามที่มี id นั้น ให้แสดงผลตามนี้นะ
   เช่น ในส่วน #header ก็คือการบอกว่า อะไรก็ตามที่มี id เป็น header ให้มีสีพื้นหลัง #e9e7cf นะ
   เมื่อเรียบร้อยหมดแล้ว ลองเปิด index.html ดูก็จะได้ดังรูปนี้คับ  จะเห็นว่าระยะแนวนอนนั้นถูกต้องแล้ว แต่ระยะแนวตั้งนั้นยังต้องปรับ ซึ่งอันนี้เป็นหน้าที่ของเราโดยตรงนะคับ

4. ในขั้นตอนนี้เราจะจัดระยะในแนวตั้งนะคับ ด้วยไฟล์ mystyle.css นั่นแหละคับ เอามาแก้ต่อได้เลย

/* File mystyle.css นะคับ */
#header{
 background: #e9e7cf;
 height: 150px;
 margin-bottom: 30px;
}

#footer{
 background: #eaaaaa;
 height: 100px;
 margin-top: 20px;
}

#side_bar{
 background: #b7dcff;
}

#main_content{
 background: #b7dcff;
}

#main_content_header{
 background-color: #ecd4ba;
 margin-bottom: 15px
}

#column_1{
 background: #e4c8f2;
}

#column_2{
 background: #ffd7d7;
}

เสร็จแล้วก็จะได้ตามรูปนี้คับ  ไม่สวยเลยใช่มั้ยคับ

นิทานเรื่องนี้สอนให้รู้ว่า

พอทำมาจนจบแล้วหลายคนอาจจะเห็นว่า ไม่เห็นสวยเลย มันดียังไงเนี่ย ห๊ะะะ ที่มันไม่สวยก็เพราะมันยังทำไม่เสร็จไงคับ ข้อดีมันมีมากมายนะคับ

• เวลาเริ่มทำเว็ปใหม่ จะไม่รู้สึกหัวโล่งๆ คิดอะไรไม่ออก อีกต่อไป เพราะเรามีแบบแผนแล้ว
• ปัญหาเรื่องการแสดงผล เรื่องขนาดอักษร และอื่นๆ จะหายไป
• มี Plugin ให้เลือกใช้อีกนะคับ เช่น plugin ที่เตรียมรูปไอคอนไว้ให้เราใช้มากมาย

เป็นอันว่าจบบทความนี้คับ มีข้อสงสัยก็คุยกันได้นะคับ อันใหนที่ผมรู้ก็จะบอก อันใหนที่ไม่รู้จะช่วยหามาตอบให้คับ

ขอขอบคุณ

http://wiki.github.com/joshuaclayton/blueprint-css/quick-start-tutorial
http://dontclickonme.com/2009/01/web-development-with-the-gimp-and-blueprint-css/

ไฟล์ตัวอย่าง

ดาวน์โหลด

Tags: blue print, css, framewrok, ความรู้

This entry was posted on Wednesday, August 26th, 2009 at 10:55 pm and is filed under Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.