Dreamweaver CS

แนะนำ CSS Layouts

CSS Layout คือะไรทำไม่ต้องใช้มีข้อดีข้อเสียอย่างไร

การเขียนเว็บเพจนั้น ถ้าเราต้องการจัดหน้าเว็บเพจเช่น จัดตำแหน่งของรูป จัดตำแหน่งของตัวอักษร หรือการจัดวางทั้งหมดของหน้าเว็บเพจ เมื่อก่อนเราจะใช้คำสั่ง table

ข้อเสียของการใช้คำสั่ง table คือ

1. การแสดงผลไม่ตรงกับที่เราต้องการ การแสดงผลของคำสั่ง table จะเปลี่ยนแปลงตามวัตถุที่อยู่ภายในตาราง เช่น เรากำหนดให้ตารางมีความยาวขนาด 100px แต่ถ้าเราใส่รูปมีขนาด 200px ลงไปก็จะทำให้ตารางเปลี่ยนแปลงขนาดทั้งหมดทันที ทำให้การแสดงผลของเราผิดพลาด
แต่ในกรณีที่เราใช้ CSS เราสามารถปรับเปลี่ยนได้ว่าให้แสดงรูปทั้งหมด หรือแสดงเฉพาะในส่วน 100px เท่านั้น

2. การแสดงผลของเว็บเพจในแต่ละ browser จะไม่ตรงกัน เช่นถ้าเราใช้ Internet Explorer การแสดงผลก็อาจไม่เหมือนกับที่แสดงใน Firefox ก็ได้
การใช้ CSS layouts ถือเป็นการแก้ไขปัญหาส่วนนี้ได้อย่างดี มีหนังสือบางเล่มถึงกับเขียนว่า การใช้ CSS layouts เป็นทางออกสุดท้ายของเรื่องนี้

3. การแก้ไขหน้าเว็บเพจทำได้ง่ายมาก และทำได้รวดเร็วกว่าเดิมมากเพียงแค่เราแก้ไขไฟล์ CSS ต้นฉบับเพียงไฟล์เดียว เว็บเพจ ทั้งเว็บไซต์ของเราก็จะเปลี่ยนแปลงไปในพริบตา (ดูตัวอย่างได้ที่นี่) ด้วยเหตุนี้ทำให้ ผู้ออกแบบชอบการใช้งาน CSS layouts เป็นอย่างมากจะเห็นได้ว่ามีเว็บไซต์ในปัจจุบันมากมายที่หันมาจัดหน้าเว็บเพจด้วยการใช้ CSS layouts

4 .ทำให้เวลาในการแสดงผลหน้าเว็บเพจเร็วขึ้น อย่างที่เราทราบกันอยู่แล้วว่า เวลาในการแสดงผลเว็บเพจที่ช้ามีผลมากจากความซับซ้อนของ Code ด้วย การใช้งานคำสั่ง table นั้นจะทำให้ความซับซ้อนของ Code มีมากขึ้นเนื่องมาจากการจัดหน้าต้องใช้คำสั่ง table ซ้อนกันมากมาย แต่การใช้งาน CSS นั้นจะทำให้ความซับซ้อนลดน้อยลงอย่างมาก

5.ทำให้การใช้งานพื้นที่ในเว็บเพจมีประสิทธิภาพมากขึ้น ทุกวันนี้หน้าจอมีขนาดต่างๆกันมากมาย ทำให้ผู้ออกแบบเว็บไซต์ จำใจที่จะต้องเลือกขนาดของเว็บเพจเพียงขนาดเดียว เช่น 800x600px ทำให้เหลือพื้นที่ในการแสดงผลมากสำหรับผู้ที่ใช้หน้าจอขนาดใหญ่ ( 15 นิ้วขึ้นไป) แต่ถ้าเราใช้คำสั่ง CSS ปัญหาเหล่านี้จะหมดไป เพราะ CSS สามารถปรับขนาดของเว็บเพจตามขนาดหน้าจอได้อัตโนมัติ

นี่เป็นตัวอย่างของเว็บไซต์ที่จัดหน้าเว็บเพจด้วย CSS http://th.yahoo.com/

หน้าตาเว็บเพจเมื่อจัดหน้าด้วย CSS layouts



หน้าตาเว็บเพจเมื่อสั่งให้ไม่แสดงผลไฟล์ CSS
(เฉพาะ firefox เท่านั้นที่ทำได้โดยให้ไปที่ View > Page style > No style ) จะเห็นได้ว่าเมื่อไม่แสดงผล CSS หน้าเว็บเพจก็จะมีเพียง เนื้อหาเรียงกันเท่านั้น



การเขียนเว็บเพจโดยใช้ CSS layouts นั้นถือเป็นสิ่งที่เข้ามาแก้ไขปัญหาการจัดหน้าเว็บเพจที่มีประสิทธิภาพเป็นอย่างมาก จะเรียกว่าเป็นการเขียนเว็บที่พัฒนาต่อมาจากการใช้คำสั่ง table ก็ว่าได้ คาดว่าในอนาดตเว็บไซต์ทั่วไปก็จะหันมาใช้ CSS layouts กันหมด

สำหรับใน Dreamweaver นั้นคำสั่งพึ่งเข้ามาทำให้สามารถใช้งานได้เฉพาะใน Dreaweaver CS3 เป็นต้นไปเท่านั้น


เลื่อนขึ้นด้านบน