สำหรับเพื่อน ๆ ที่ชื่นชอบการบู๊สะบั้นหั่นแหลก เผชิญหน้ากันตรง ๆ กับปัญหา วิธีนี้น่าจะเป็นวิธีที่ท้าทาย และ เป็นการประเทืองปัญญาไปในตัว ลับสมองไปกับการเขียน CSS วิธีการเขียน Style ที่ใช้ได้กับ Netscape 4 และ Style ที่ไว้ใช้สำหรับ Modern Browser ตัวอื่น ๆ ร่วมกันทำได้โดย 4 เทคนิคที่ผมจะกล่าวถึงต่อไปนี้ (รอบนี้เอาวิธีที่ 1 ก่อนนะ)
[/caption]
การใช้ css แบบ External เป็นสิ่งที่ผมอยากจะแนะนำครับ เพราะความสะดวก และง่ายในการแก้ไข เฉพาะ ไฟล์ CSS นั้นๆ ไป ไม่ต้องมัวมาเกิดหน้าเว็บ แล้วเข้ามาแก้ กรณี Internal และแก้ในแถว กรณีเขียนแบบ Inline ท่านสามารถเปิด ไฟล์ .css
การเขียน CSS มี 3 ลักษณะคือ Inline, Internal และ External
กับคำถามมากมายว่า DIV หรือ TABLE มันดีกว่ากันยังไง มันจะใช้แทนที่กันได้ยังไง หลายคนที่ยังสงสัย ตอนนี้ผมมีข้อมูลเล็กๆ น้อยๆ มาแจกจ่ายกันบ้าง อาจจะไม่กระจ่างมาก แต่คงพอถึงบางอ้อ
เรื่องมันมีอยู่ว่า
ด้วยเหตุแห่งยุคแรกเริ่มเดิมทีที่เหล่า เว็บดีไซเนอร์ พากันเรียกใช้ <table> ซึ่งเป็นตัวจัดการวางข้อมูล ออกมาใช้เป็นตัวจัดการโครงสร้างของเว็บทั้งหมด ด้วยเหตุที่ง่ายและยังไม่มีวิธีใดที่ดียิ่งกว่า TABLE จึงแพร่หลายและถูกใช้อย่างผิดๆ มาตั้งแต่นั้น
ปัจจุบัน คำว่า Tableless Design หรือการทำเว็บแบบพึ่งพา table ให้น้อยที่สุด หรือไม่ต้องใช้เลย อาจจะแพร่กระหลายในหมู่คนทำเว็บต่างประเทศอื่นๆ โดยเฉพาะฝั่งยุโรป แต่ในเมืองไทยยังไม่เป็นที่นิยมมากนัก เพราะต้องการใช้เวลาในห้วงระยะหนึ่งในการทำความเข้าใจ เรียนรู้มากพอสมควร ทั้งในเรื่องของ XHTML, XML เพื่อที่จะสามารถเข้าใจหลักการทำงานพื้นฐานได้ ถึงแม้โครงสร้างภาษาจะไม่แตกต่างจาก HTML มากมายก็ตาม
การเขียน CSS สำหรับ XHTML selector ใน css ไฟล์นั้นเหมาะกับการใช้ในกรณีที่เราต้องการ ควบคุมการแสดงผลร่วมกันในหลายๆ หน้าของเว็บเช่น การสั่ง body หรือ การสั่ง IMG การเขียน css แบบ External ที่สำคัญเราควรกำหนดค่า body, img, Pseudo-classes, table,td และอื่นๆ ที่เราต้องการไว้ก่อน
เช่น ถ้าเราเขียน
body {
background-color: #000000;
}
img {
border: 0;
} เมื่อเรานำ ไฟล์ css ไปใช้กับหน้าเว็บใดๆ แล้ว จะได้ค่า พื้นหลังของทุกหน้าเป็นสี #000000 และภาพทุกภาพที่มีอยู่ในแต่ละหน้า จะไม่มี เส้นขอบ และเมื่อเราไปใช้ tag <img src="" alt=""> เราไม่ต้องกำหนด border="0" ในแทกอีกที เพราะ css จัดการให้เรียบร้อยแล้ว และวิธีการกำหนด IMG ให้ border: 0; ใน css ไฟล์ลักษณะนี้ นอกจากจะช่วยไม่ให้ต้องเขียน border="0" ใน html แล้ว เวลาที่เราทำลิงค์จากภาพ ใน IE ก็จะไม่ปรากฎ ขอบสีน้ำเงินขึ้นด้วยครับ
กำหนดความกว้าง คืออย่างแรกที่ผมนึกถึง ในการคิดวางโครงสร้าง เลยย์เอ้าท์ ให้กับหน้าเว็บ ในเรื่องแรกสุดนี้ จะเริ่มจากง่ายๆ ก่อนครับกับ 1 คอลัมน์ เลย์เอ้าท์ จัดตรงกลาง
ส่วนใหญ่แล้วความกว้างของหน้าเว็บนั้นจะขึ้นอยู่กับคนเขียนแหละครับว่า คิดว่ากลุ่มเป้าหมายของเว็บที่เรากำลังทำนั้นหน้าจออยู่ที่ขนาดเท่าไหร่ หรือแล้วแต่ความชอบใจ แต่ผมจะยกตัวอย่างกรณี ที่ความกว้าง 800px
ถ้าไอเดียเริ่มแรกของเราคิดออกมาได้ประมาณว่า หน้าเว็บกว้าง 800px พื้นหลังสีเทา พื้นที่ของข้อมูลสีขาว ตัวหนังสือสีน้ำเงิน มีเส้นขอบบางๆ ทั้งซ้ายและขวาข้างละสัก 1px กำลังพอเหมาะ เว้นระยะห่างระหว่าง เส้นขอบสัก 4px กำลังดี