Layout เว็บเพจด้วย CSS
หน้าแรก CSS Layout เว็บเพจด้วย CSS
STEP 1
หลังจากที่เราได้ทำความเข้าใจเกี่ยวกับ CSS กันไปพอสมควรแล้วกับบทความต่าง ๆ ที่นำแสนอผ่าน css.dwthai.com มาถึงบทความนี้จะมาพูดถึง การนำเอา CSS ไปใช้ในการเลย์เอาท์หรือการจัดวางหน้าเว็บเพจตามวัตถุประสงค์ของเว็บนี้เสียที ซึ่งแนวคิดของการใช้ CSS นำมาเลย์เอาท์หน้าเว็บเพจ ก็คือการที่เรานำเอาความสามารถของ CSS มาใช้ในการจัดวางองค์ประกอบต่าง ๆ แทนการใช้ตาราง (Table) ที่นักออกแบบเว็บไซต์ (Web Design) คุ้นเคยกันมาแต่เดิม ดังนั้น ใน Step แรกของการเริ่มเลย์เอาท์เว็บเพจด้วย CSS ผมจะกล่าวถึงการใช้งาน CSS แทนการใช้ตารางกันเสียก่อน เพื่อให้ท่านผู้อ่าน มองเห็นภาพการใช้งาน CSS แทนการใช้งานตารางในการเลย์เอาท์ได้ชัดเจนมากยิ่งขึ้น
..........................................................................................................................
1. จากรูป หากเราต้องการสร้างการ Display หรือแสดงผล ถ้าเราใช้ HTMLโดยใช้ Tag Table โดยปรกติทั่วไป จะได้โค้ด ดังนี้
จากโค้ดข้างต้น เป็นการกำหนดให้ตารางมีความกว้าง 450 โดยผ่าน Attibute width ของ Tag table และกำหนดให้มี 2 Rows, 2 Columns
2. จากรูปหากเราต้องการใช้ CSS แทนการใช้งานตาราง เราจะได้ Code ดังนี้
จากโค้ด CSS ข้างต้น เป็นการเรียกใช้ properties ของ CSS โดยกระทำผ่าน id ของ TAG โดยที่ id="tb" เป็น id ที่ครอบ id อื่น ๆ ไว้ ซึ่ง id="tb" ถ้าเราจะเปรียบเทียบกับโค้ดการสร้างตารางของ HTML จากข้อ 1 ที่ผ่านมา ก็คือในส่วนของ TAG tableนั้นเอง เราจะพบว่าที่ id="tb" จะมีการกำหนดความกว้างไว้ที่ 450 (width:450px;) เหมือนดังที่เรากำหนดให้ TAG table ข้างต้น
เรามาดู id อื่น ๆ ต่อไป ที่ id="td1" เป็นการกำหนดให้ id นี้อยู่ทางด้านซ้าย โดยที่ id="td2" อยู่ทางด้านขวา โดยการกำหนดให้อยู่ในตำแหน่ง ซ้าย หรือ ขวานี้ เราสามารถกำหนดได้จาก float ถ้ามีการกำหนดเป็น none นั้นคือการกำหนดให้อยู่ในตำแหน่งตรงกลาง (center) เมื่อมีการแสดงผลจากการใช้ CODE CSS ข้างต้นจะได้ ดังนี้
จะพบว่ามีการแสดงผลที่ไม่แตกต่างไปจากการที่เราใช้ Table ในการสร้างเลย ซึ่งจากคุณสมบัตินี้ ทำให้เราสามารถนำ CSS ไปใช้เป็นการเลย์เอาท์แทนการใช้งาน TABLE ที่เราคุ้นเคยกันมาแต่เดิมได้เป็นอย่างดี
....................................................................................................................................
STEP 2
บทความ Step ที่ 2 นี้ก็ยังคงอยู่ในเรื่องเดิม นั้นก็คือ การนำเอา CSS มาใช้งานแทนการใช้ TAG Table ของ HTML ซึ่งในบทความ Step 1 ผมได้กล่าวถึงการใช้งาน CSS นำมาใช้แทนตารางไปบ้างแล้ว แต่ครั้งนี้ จะกล่าวถึงให้ละเอียดลงไปกว่าเดิม ดังนี้ .............................................................................................................. การใช้ CSS แทนการใช้ Table ในแบบ 3 Columns จาก Step 1 ที่แนะนำไป เป็นการสร้าง CSS ให้มีการแสดงผลในแบบ 2 Columns ซึ่งเป็นวิธีที่ง่ายต่อความเข้าใจ เนื่องจากว่าจะมีเพียงแค่ 2 คอลัมน์ที่อยู่ในตำแหน่ง ซ้าย และขวา เท่านั้น (Left and Right) แต่ถ้าเป็นในรูปแบบ 3 Columns ละ ถ้าเราใช้ CSS ในการแสดงผลจะมีวิธีหรือหลักแนวคิดอย่างไร ลองมาทำตามกันดู 1. เป็นการสร้างการแสดงผลในแบบ 3 Columns โดยการใช้งาน CSS ซึ่งเรามีแนวคิดการใช้งานโค้ด CSS ดังนี้ container สำหรับการสร้าง TAG คลุมการแสงดผลทั้งหมด ซึ่งกำหนดความกว้างไว้ที่ 600 px 2. เมื่อเรานำมาใช้งานกับ TAG DIV จะได้ ดังนี้ ที่ DIV แรกคือบรรทัดที่ 30 ดังรูป เป็นการสร้าง TAG คลุมคอลัมน์ทั้งหมดที่เราต้องการแสดงผล โดยใช้คุณสมบัติของcontainer ใน CSS ที่เรากำหนดไว้ ดังนั้นเมื่อแสดงผล Block ที่ถูก DIV นี้คลุมไว้จะมีความกว้างที่ 600 px 3. เมื่อเราทำการแสดงผลโค้ดข้างต้นกับ Web Browser เราจะได้ผลลัพธ์ ดังนี้ นั้นก็คือ เราจะได้การแสดงผลออกเป็น 3 คอลัมน์ ซึ่งแต่ละคอลัมน์จะมีความกว้างที่เท่ากัน คือ 200 px รวมกัน 3 คอลัมน์จะได้เท่ากับ 600 px ซึ่งจะเท่ากับความกว้างที่เรากำหนดไว้ใน container ของ CSS นั้นเอง สำหรับการแบ่งคอลัมน์ออกมากกว่า 2 ของ CSS นั้น มีหลักการ คือ เราต้องแบ่งคอลัมน์ที่ได้ออกเป็น 2 ส่วนเสียก่อน จากนั้น ให้เราทำการแทรก CSS ลงไปจากส่วนที่เราแบ่งออกไว้เป็น 2 ส่วนในขั้นแรกต่อไป เนื่องจากว่าใน CSS มีแค่การกำหนด ให้คอลัมน์หรือ Block นั้นจะแสดงทางซ้านหรือขวาเท่านั้น (Left or Right) การที่เราจะแบ่งคอลัทน์ให้ได้มากกว่า 2 เราจึงต้องทำดังนี้ ...................................................................................................................................
containerLeft สำหรับคอลัมน์แรกซึ่งมีการจัดตำแหน่งไว้ซ้าย (float: lief;) มีขนาดความกว้างที่ 400 px
containerRight สำหรับคอลัมน์ที่ 2 มีการจัดตำแหน่งไว้ขวา (floatL right;) มีขนาดความกว้างที่ 200 px
col1 เป็น column แรกที่เราใช้สำหรับการแทรงลงไปที่ containerLeft ซึ่งมีตำแหน่งซ้าย ขนาดที่ 200 px
col2 เป็น column ที่สองที่เราใช้สำหรับการแทรงลงไปที่ containerLeft ซึ่งมีตำแหน่งขวา ขนาดที่ 200 px
ในบรรทัดที่ 31 เป็น DIV ที่มีการเรียกใช้ containerLeft เป็นการจัดตำแหน่งคอลัมน์ให้อยู่ทางซ้ายมือ ลแมขนาดที่ 400px ตามคุณสมบัติที่เราได้กำหนดไว้ และใน DIV นี้ เรามีการแทรก DIV เข้าไปอีก 2 ชุด คือ col1 และ col2 เพื่อทำการแบ่ง Column นี้ออกเป็น 2 คอลัมน์นั้นเอง
ในบรรทัดที่ 35 เป็น DIV ที่มีการเรียกใช้ containerRight เป็นการจัดตำแหน่งคอลัมน์ให้อยู่ทางด้านขวามือ และมีขนาดที่ 200 px ตามที่กำหนดไว้กับ CSS
ขึ้นไปด้านบน