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

5-6 การจัด Layout ด้วย CSS3

สวัสดีครับ
ในหัวข้อนี้นะครับ
จะเป็นการใช้คำสั่ง CSS3 ในการจัด Layout ของเนื้อหาที่เราใส่ลงเว็บไซต์นะครับ
ซึ่งในการจัด Layout ของเนื้อนะครับ
มันมีหลาย คำสั่งที่สามารถใช้ในการจัด Layout ได้นะครับ
ซึ่งอาจารย์หยิบยกมา 2คำสั่ง
ถ้านักศึกษาพร้อมแล้วในไปในโปรเเกรม NetBeans ได้เลยนะครับ
เมื่อเข้ามาในโปรเเกรม NetBeans กันแล้วนะครับ
เราจะลองใส่เนื้อหาที่เป็นข้อความกันก่อนนะครับ
เพื่อฝึกในการจัด Layout กันนะครับ
ซึ่งข้อความเราก็จะอาศัยข้อความ lorem เหมือนเดิมนะครับ
ก็ไปที่เมนู source นะครับ
เลือกที่ insert code แล้วก็คลิกที่ข้อความ lorem นะครับ
สมมุติอาจารย์เอาเเค่ 1 paragraphก่อนนะครับ
เป็น tag div แล้วก็ Generate ไป จากนั้นเราจะไปปรับเเต่งตัว tag div ตัวนี้กันก่อนนะครับ
อาจารย์ต้องการให้ความกว้างของตัวนี้มีเเค่ 30% ของหน้าจอนะครับ
แล้วก็ใส่ Background color นะครับ
เป็นสีชมพูนะครับ
จากนั้นลองรันโปรเเกรมดูก่อน นักศึกษาก็จะเห็นว่านะครับ
ข้อความ lorem ของเราจะมีขนาดความกว้างเเค่ 30% นะครับ
แล้วก็มีสีพื้นสีชมพู
ดังนั้นซึ่งในลักษณะการวางเนื้อหานะครับ
ลักษณะเนื้อหาจะถูกวางในลักษณะที่เป็นบล็อกเเต่ละบล็อกอยู่แล้วนะครับ
ซึ่งเราสามารถจัดวางตำแหน่งของบล็อกเเต่ละบล็อกได้นะครับ
ซึ่งเราจะอาศัยคำสั่งแรกก็คือคำสั่ง float นะครับ
ในการจัดวาง Layout ซึ่งในคำสั่ง float นะครับ
จะเป็นตัวบอกว่า เนื้อหาในบล็อกนี้จะถูกวางไว้ที่ตำแหน่งไหนนะครับ
เราก็ลองพิมพ์คำสั่ง float ลงไปเช่นอาจารย์บอกว่าบล็อกนี้ต้องการให้อยู่ด้านขวานะครับ
เราก็ใส่ตำแหน่งเป็น right แล้วเราก็รันโปรเเกรมดูนะครับ
นักศึกษาก็จะเห็นว่านะครับ
ตัวบล็อกของข้อความ lorem ที่เราใส่คำสั่ง float ลงไปนะครับ
ก็จะถูกจัดวางอยู่ด้านขวาของหน้าเว็บไซต์ นี่คือการจักวางโดยอาศัยคำสั่ง float ในการทำงานนะครับ
วางซ้ายก็ได้วางขวาก็ได้นะครับ
เราสามารถกำหนด float ได้ทั้งหมดนะครับ
คราวนี้เราจะมาลองอีกคำสั่งหนึ่งที่ใช้ในการจัด Layout ได้เหมือนกันนะครับ
ก็คือคำสั่ง display นะครับ
ให้นักศึกษาเพิ่มข้อความ lorem เข้าไปก่อนนะคับ สมมุติอาจารย์สร้าง CSS ขึ้นมาแล้วเป็น left center right แล้วก็ c1 นะครับ
อาจารย์เอาไปกำหนด section ที่อาจารย์สร้างขึ้นมาจากนั้นลองรันโปรเเกรม ตอนนี้สีพื้นได้ถูกเปลี่ยนตามที่อาจารย์คำสั่ง CSS ไว้แล้วนะครับ
เเต่เนื้อหาของเรายังคงอยู่เป็นเเนวตั้งลงมาเหมือนเดิม
ถ้าอาจารย์ต้องการจัดเนื้อหานะครับ
ให้เป็นลักษณะให้เป็น 3 คอลัมน์นะครับ
เราก็จะอาศัยคำส่ง CSS ที่ชื่อว่า display เข้ามาช่วยนะครับ
ในการทำงาน โดยเราใส่ที่ตัว left ก่อนนะครับ
display แล้วก็เป็น table-cell นะครับ
center ก็เป็น display เหมือนกันนะครับ
table-cell right ก็เป็น display นะครับ
table-cell จากนั้น save แล้วลองรันโปรเเกรมนะครับ
นักศึกษาก็จะเห็นว่านะครับ
จากที่เราเรียงลงมาตามเเนวตั้งในลักษณะของข้อความนะครับ
เราต้องการแบ่งให้มันเป็น 3 คอลัมน์ เราก็จะใช้คำสั่ง display เข้ามาช่วยนะครับ
โดยใช้ลักษณะของ table-cell table-cell ก็คือจะมีการวางตัวของเนื้อหาเรียงกันไปเรื่อยๆนะครับ
แล้วก็จะแบ่ง บล็อกของเเต่ละเนื้อหา ตามที่เราจัดวางเข้าไปนะครับ
อันนี้คือลักษณะของ table-cell
ดังนั้น
ถ้าเรา table-cell เนื้อหาไป 10 พารากราฟมันก็จะเรียงไป 10 คอลัมน์ในเเถวเดียวกันนะครับ
อันนี้คือลักษณะการในการใช้ตัว display ในการจัดวางนะครับ
ซึ่งตัว display นะครับ
เราสามารถปรับความกว้างนะครับ
ในการเเสดงเนื้อหาของเเต่ละคอลัมน์ได้นะครับ
สมมุติเอาด้านซ้ายเป็น 20 นะครับ
ด้านขวาเป็น 20 แปลว่าเราจะเหลือตรงกลางอยู่ 60 นะครับ
ก็จะเป็นเนื้อที่ที่ใหญ่นะครับ
เป็นไงครับ
เห็นความเเต่กต่างแล้วใช่มั้ยครับ
ด้านซ้าย 20 ด้านขวา 20 ก็จะเหลือเนื้อหาตรงกลาง 60 นะครับ

ดังนั้น
ถ้าเราต้องการปรับความกว้างของเเต่ละคอลัมน์เราก็สามารถปรับได้โดยใช้คำสั่ง width ในการทำงานนะครับ
คราวนี้
ถ้าเราต้องการเเทรกเนื้อหาเพิ่มเข้าไปอีกนะครับ
ให้มันมีความซับซ้อนมากยิ่งขึ้นนะครับ
เราก็มาที่ section center จากนั้นลองรันโปรเเกรม นะครับ
ก็จะเห็นว่าข้อความเนื้อหาของเราเพิ่มขึ้นแล้ว เเต่เหมือนเดิมนะครับ
เนื้อหาที่เราวางในพื้นที่สีม่วง ยังไม่ได้ถูกจัดวางในลักษณะที่เป็น table-cell เนื้อหาก็เลยจะเรียงตามเเนวตั้งลงมาเรื่อยๆ นะครับ
คราวนี้
ถ้าเราต้องการจัดนะครับ
ให้มันเป็นลักษณะของคอลัมน์ๆ เหมือนเดิมเราก็ต้องใช้คำสั่ง table-cell display เข้ามาช่วย นะครับ
อาจารย์ก็ไปปรับเเต่งใหม่นะครับ
ใน CSS สมมุตินะครับ
ก็เป็น display table-cell นะครับ
เป็น c1 จากนั้นเราก็เอา 3 ตัวนี้นะครับ
ไปเรียกใช้ ในข้อความ lorem ที่เราเพิ่มเข้ามานะครับ
ก็เป็นตัวนี้ class c1 นะครับ
ตัวที่ 2 ก็เป็น class c2 ตัวที่ 3 ก็เป็น class c3 นะครับ
แล้วก็ลองรันโปรเเกรมดูนะครับ
เป็นไงครับ
จากที่เมื่อกี้เนื้อหาของเราเรียงเป็นเเนวตั้งลงมา ไม่ได้เเบ่งเป็นลักษณะของคอลัมน์ พอเราใส่คำสั่ง display table-cell เข้าไปนะครับ
ตรงเนื้อหาที่เราเลือกใช้ class ที่เป็น display table-cell ก็จะมีการจัดวางเป็นเซลล์เป็นคอลัมน์ต่อกันนะครับ
เราใส่ไป 3 ข้อความ lorem ก็จะเห็นว่ามีเป็น 3 คอลัมน์นะครับ
เเต่
ถ้าอาจารย์ต้องการปรับใหม่นะครับ
จาก 3 คอลัมน์ที่ใส่เข้ามาตรงนี้ อาจารย์ต้องการให้เหลืองกับเทาเป็น 2 คอลัมน์ข้างบนนะครับ
แล้วก็เเดงเป็น 1 คอลัมน์ข้างล่างเราก็สามารถทำได้นะครับ
โดยเราก็ใส่คำสั่ง <br> นะครับ
c1,c2 คือ2คอลัมน์เเรกนะครับ
ส่วน c3 เราต้องการให้ขึ้นเป็นคอลัมน์ใหม่ บรรทัดต่อไป เราก็ <br> ต่อไป ให้ขึ้นบรรทัดใหม่นะครับ
เเล้วก็ลองรันโปรเเกรม เป็นยังไงครับ
เราก็จะได้ Layout ที่มีลักษณะเป็น 2 คอลัมน์ เเละอีก 1 คอลัมน์ก็ถูกวางในเเถวใหม่ขึ้นมา นะครับ
อันนี้คือการจัดวาง Layout ด้วยคำสั่ง display table-cell นะครับ
มองลักษณะของเนื้อหาข้อมูล ให้มีลักษณะเป็นเซลล์เป็นคอลัมน์มาวางเรียงต่อกัน นะครับ
ซึ่งนักศึกษาสามารถเอาไปประยุกต์ได้หลายๆอย่างในการจัดวาง Layou นะครับ
เป็นยังไงครับ
รู้จักกับคำสั่งที่ใช้ในการจัด Layout กันแล้วใชมั้ยครับ
เเยกความเเตกต่างออกใช่มั้ยครับ
ระหว่างคำสั่ง float กับคำสั่ง display นะครับ
นักศึกษาลองซ้อมบ่อยๆ นะครับ
จะได้รู้จักคำสั่ง 2 คำสั่งนี้เป็นอย่างดีเพิ่มมากขึ้นนะครับ
ในหัวข้อถัดไปนะครับ
เราก็จะเรียนรู้ในการสร้างตารางนะครับ
นอกเหนือจากการจัด Layout ด้วยคำสั่ง CSS แล้ว เพื่อความสะดวกในการ Layout เราก็สามารถใช้ตารางเข้ามาช่วย ในการจัดวางเนื้อหาได้เป็นอย่างดีนะครับ
ซึ่ง
ถ้านักศึกษาพร้อมแล้ว คลิ้กที่หัวข้อถัดไปได้เลนนะครับ

ใส่ความเห็น

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