วันเสาร์, ธันวาคม 5

5-8 การจัด Layout ด้วยตาราง

สวัสดีครับ
หัวข้อนี้ก็เป็นหัวข้อสุดท้าย ของเนื้อหาในสัปดาห์ที่5กันแล้วนะครับ
ซึ่งในหัวข้อนี้นักศึกษาจะได้เรียนรู้การนำเอาตาราง เข้าไปช่วยในการจัด Layout ของเนื้อหาบนหน้าเว็บ หลังจากที่เราเรียน การใช้ CSS ในการจัด Layout มาแล้ว ซึ่งลักษณะของการใช้ตารางเข้ามาช่วยในการจัด Layout ก็จะใช้ประกอบกับแท็ก พื้นฐานต่างๆที่ใช้ในการจัดLayout ไม่ว่าจะเป็น header footer nav หรืออื่นๆ ซึ่งเราจะต้องอาศัยการ ออกแบบ ว่าเราต้องการแบ่งเนื้อหาเป็นกี่แถวกี่คอลัมน์ แล้วเราก็จะสร้างตารางลักษณะไหนเข้าไป ซึ่งนักศึกษาจะได้ ฝึกปฎิบัติเเละทำความเข้าใจกัน
ถ้านักศึกษาพร้อมแล้วเข้าโปรแกรมNetBeansได้เลย พอเราเข้ามาในโปรแกรมNetBeansกันแล้ว โดยอันดับแรกอาจารย์จะใส่ รูปภาพเป็นพื้นหลังให้กับตัวเว็บไซต์ก่อน ก็คือใช้แท็ก body แล้วก็ใส่ Background – images url จากนั้นก็ใส่ชื่อรูปภาพ แล้วก็ save แล้วก็ลองรันดู นี่คือภาพพื้นหลังที่อาจารย์ใส่เข้าไปก่อน จากนั้นเราก็จะมาสร้างตาราง ตามที่เราจะวางเนื้อหาลงบนหน้าเว็บ อันนี้ว่าต้องการสร้างกี่แถวกี่คอลัมน์ขึ้นมา อาจารย์ก็ไปสร้างตารางขึ้นมาใช้เเท็ก tabel สมมุติเอาลักษณะมีเส้นขอบก่อน border = 1 จากนั้นก็สร้างแถวขึ้นมา สมมุติอาจารย์จะจัดวางเนื้อหาอยู่ 4แถว แถวที่ 1 คือ วางตัว Banner หรือ logo ของเว็บไซต์ แถวที่2 จะจัดวางพวกระบบนำทางเมนูต่างๆ แถวที่3ก็จะเป็นพวกเนื้อหา แถวที่4ก็จะเป็น ตัว footer 4 แถว
ดังนั้นเนื้อหาอาจารย์จะวางอยู่ 2 คอลัมน์นะครับ
เราก็จะวางอยู่2คอลัมน์ จากนั้น เราจะมาปรับเเต่งตัวตารางกันก่อนนะครับ
ก็คืออาจารย์จะให้ตาราง มีความกว้าง เท่ากับหน้าเว็บเลยก็คือตัว100เปอร์เซ็นต์ จากนั้น ความสูงของเเต่ละเเถว อาจารย์ให้เป็น 50 Pixels แล้วก็ใส่รูป Background เป็นรูปภาพพื้นหลังเข้าไป url Multimedia แล้วก็เป็น Gray_ pad โอเค อันนี้คือเริ่มต้นนะครับ
เราต้องการจัดวางเนื้อหายังไงเราก็ดีไซน์ตารางขึ้นมาก่อน ว่าต้องการกี่แถวกี่คอลัมน์ จัดวางให้เป็นลักษณะเป็นส่วนๆไป จากนั้นเราก็จะมาปรับตารางอีกนะครับ
แถวเเรกอาจารย์ต้องการวาง Banner หรือเป็น Header ของหัวเว็บไซต์
ดังนั้นก็จะถูกรวมเหลือคอลัมน์เดียว แถวที่2ต้องการวางเมนูระบบนำทาง ก็จะถูกรวมเหลือเพียงคอลัมน์เดียว เเถวที่4 ก็จะถูกรวมเหลือคอลัมน์เดียวต้องการวางfooter แล้วก็ไปปรับแก้กัน แถวที่1ต้องการรวมเราก็ใส่ Colspan "2" เข้าไป จากนั้นคอลัมน์นี้ก็ไม่มีเเล้ว แถวที่2เหมือนกันนะครับ
Constan คอลัมน์นี้ก็ไม่มีแล้ว แถวที่3ไม่ต้อง มาทำแถวที่4ได้เลย Colspan คอลัมน์นี้ก็ไม่มี แล้วก็ลองรันดู ก็จะถูกต้องตามที่เราต้องการแล้ว คราวนี้ตัวคอลัมน์ในแถวที่3 อาจารย์ต้องการให้ด้านซ้าย มีเนื้อที่น้อยกว่าด้านขวา ด้านขวาจะใส่เนื้อหาหลักๆ เราก็จะไปปรับโดยใช้ css เหมือนเดิม อาจารย์สร้างเป็น class แล้วกัน td1ต้องการความกว้างแค่ เอาสัก 20% จากนั้นก็เลือกใช้ td1ที่แถวที่3 คอลัมน์นี้ แล้วก็ลองรันโปรแกรมดู ก็จะเห็นว่าถูกปรับมาเท่า กับที่อาจารย์ต้องการแล้วนะครับ
จากนั้นพอเราดีไซน์ตารางได้ตามที่เราต้องการเเล้ว เราก็จะมาไล่ใส่เนื้อหาในเเต่ละส่วนเเต่ละเเถว ในเเต่ละคอลัมน์กัน เริ่มจากแถวที่1ก็ก็คือใส่ ตัว Banner เข้าไป อาจารย์ก็ใส่เป็น images src = Multimedia จากนั้น ชื่อว่าman Bizcom_Header .jpg ก็จะได้ขึ้นมาเเล้ว แถวที่1 เป็นตัวของBanner แถวที่2เป็นระบบนำทาง เราก็มาใส่ในแถวที่2 ระบบนำทางก็ใช้พวกลิงก์เชื่อมโยง ในการเปลี่ยนหน้าเข้ามาช่วย จากนั้นต้องการให้เมนูอยู่ที่ด้านขวา เราก็ใส่คำสั่ง css เข้าไป ก็เป็นเเท็ก right-alisgn จากนั้นลองรันโปรแกรม ก็จะเห็นว่าเมนูชิดด้านขวาแล้ว คราวนี้มาใส่เนื้อหาส่วนที่3กันบ้าง เราก็เลื่อนลงไปที่แถวที่3 จากนั้นอาจารย์ต้องการใส่ข้อความloremแล้วกัน เราก็ใส่สัก3 เราก็เอาสัก2ย่อหน้าแล้วกันเป็นแท็กdiv จากนั้นอาจารย์ต้องการแบ่ง จัดlayoutของ ข้อความlorem112
00:08:23,520 –> 00:08:29,840
ให้เป็น2ย่อหน้าโดยใช้คำสั่ง displayเข้ามาช่วย table Cell แล้วเราก็เลือกใช้ class td2 อีกตัวนึง class td2 ลองรันโปรแกรม ก็จะได้ข้อความloremส่วนที่เป็นเนื้อหาขึ้นมา2ย่อหน้าแล้ว จากนั้นใส่วีดีโอในคอลัมน์ด้านซ้ายของแถวที่3 video src = Multimedia ชื่อvideoชื่อว่าvideo Intol.mp4 ใส่ controls เข้าไปด้วย แล้วก็ลองปรับขนาดความกว้าง200 ความสูง300 เอา200ละกัน แล้วลองรันโปรเเกรม ก็จะได้เนื้อหา พอเราใส่เนื้อหาครบเเล้ว เราก็เอาตัว เส้นขอบออก ตัวborder ตรง teble เอา border ออก แล้วลองรันโปรแกรมดูอีกที ก็จะได้เนื้อหาใส่ตามตำแหน่งที่เราต้องการ อันนี้คือการใช้ตารางเข้ามาช่วยในการจัดวาง layout เราก็กำหนดส่วนต่างๆแล้วก็วางเนื้อหาลงไป เป็นยังไงกันบ้างครับ
สามารถใช้ตารางในการจัดวาง layoutกันได้เเล้วใช่ไหมครับ
อันนี้คือเนื้อหาในหัวข้อที่5ของสัปดาห์สุดท้ายแล้ว
ดังนั้นก่อนที่นักศึกษาจะไปศึกษาเนื้อหาในสัปดาห์ที่6ginjv' การใช้งาน joomla และvirturemart ให้นักศึกษาไปลองทบทวนในเอกสาร ทำแบบฝึกหัดและแบบทดสอบกันด้วยนะครับ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *