SquashUp

การทำเว็บด้วย CSS โดยไม่เข้าใจและเห็นภาพรวมของเว็บอาจจะทำให้เราทำงานมากขึ้น เนื่องจากเรื่อง xhtml validation, cross browsing  อีกทั้ง ถ้าโค้ด css ไม่ดีแล้ว อาจจะทำให้โหลดช้าพอๆ กับ table อีกด้วย บทความนี้ได้บอกถึงภาพรวมของการทำเว็บจาก หน้า design ครับ

1. ออกแบบโครงร่างต่างๆ ให้ชัดเจน

• เพื่อให้เขียนโค้ดได้ง่าย, ลดปัญหา cross browsing ถ้าเขียนเป็นก็ไม่จำเป็นต้อง hack เลยครับ

• จะได้ลดความซับซ้อนของ div ต่างๆ เพราะยิ่ง div เยอะเว็บก็จะใช้เวลาโหลดนานขึ้น วิธีการแก้ อย่างเช่น ใช้ multiclass

<div class=”class1″>
<div class=”class2″>
………
</div>
</div>

เป็น <div class=”class1 class2″>…</div>

หรือ ใช้ tag ให้เป็นประโยชน์

<div>
<ul>..
</ul>
</div>

เป็น <ul class=”myul”>…</ul>

2. วางโครงเสร็จแล้วให้เขียน xhtml ก่อนโดยลืมการแสดงผลต่างๆ ถ้าเป็นไปได้ควรเขียนตาม accessiblityและ xhtml strict

• xhtml คือ ข้อมูล ที่สำคัญของเราสำหรับ search engine ต่างๆ เนื่องจาก การเขียน html ไปพร้อมกับทำ css นั้นอาจทำให้เรื่อง accessbility เสียไปเนื่องจากไปกังวลกับการแสดงผล ซึ่งอาจทำให้เขียน tag ผิดบ้าง ทำให้บอทเก็บข้อมูลยากซึ่งจะส่งผลไปยัง SEO หรือ เขียน div มาหลายตัวซึ่งทำให้เว็บโหลดช้าลง
• ทำให้ validation ง่ายขึ้น

3. จากนั้นค่อยเขียน css ครับ เท่านี้เราก็ได้ xhtml/css เว็บที่ผ่าน validation, cross browsing และตรงตาม PSD ครับ

ดู code xhtml/css เว็บตัวอย่างได้ที่นี้

อ้างอิง : line25, apaddedcell

Related posts:

1. วิธีสร้าง Widget SideBar เพิ่ม ใน WordPress
2. WordPress Caching Plugin ไหนดีที่สุด?
3. 5 ข้อผิดพลาดในการออกแบบเว็บ E-commerce
4. หาชุดสีจากรูปภาพที่เป็นแรงบันดาลใจ