ครั้งที่แล้วผมได้แนะนำจุดเด่น 5 ของการใช้ CSS ในการทำเว็บแบบ Tableless สำหรับคนที่สนใจเรื่องของการทำเว็บไซต์ด้วย CSS และอยา่กศึกษาด้วยตัวเองในแบบภาษาไทย ก็เว็บนี้เลยครับ www.divland.com

www.divland.com

ในเว็บนี้แบ่งหมวดหมู่ออกเป็น

  • หน้า Gallery : รวมเว็บที่ใช้ CSS ในการสร้างเว็บไซต์ ซึ่งคุณก็สามารถขอเพิ่มรายชื่อเว็บได้เอง
  • Forum : สงสัยใคร่รู้ในเรื่อง CSS ก็มีคนมาให้คำตอบในแบบเว็บบอร์ด ความรู้แชร์กันได้ผ่านส่วน Forum นี้ครับ
  • My Blog : ฺความรู้ที่เจ้าของเว็บนำเสนอผ่าน Blog สอนกันตั้งแต่ CSS พื้นฐาน เช่น 10 ข้อเบสิคควรทำเมื่อเริ่มเขียน CSS จนถึงกลเม็ด CSS แบ่งเป็นหมวดหมู่ชัดเจน ได้แก่ CSS hacks,CSS techniques,CSS templates, CSS tools, Tip & Trick, Web Standards ,Webmaster talks, กฎการเขียน CSS, เริ่มต้นกับ CSS
  • CSS Archives : เว็บไซต์ไหนบ้างให้ความรู้เรื่อง CSS เข้าไปหาอ่านและคลิ๊กดูได้ครับ
  • About Us : หน้านี้บอกเล่าความตั้งใจของเจ้าของเว็บถึงที่มาของ divland อ่านจบก็แวะไปลง Guestbook ในหน้าเดียวกันนี้ได้ครับ
  • Contact Us : อึดอัดใจอยากบอก อยากถามเป็นการส่วนตัวก็เข้ามากรอก Form ในหน้านี้ ส่วนจะตอบหรือไม่ตอบ อันนี้ก็ต้องลองครับ

โดยรวมแล้ว ขอบอกว่าคุ้มที่เข้ามาอ่าน ผมก็เลยใช้เวลานานหน่อยกับบทความในส่วนของ Blog ครับ ลองเข้าไปหาดูครับ

Tags: , , , , , , , ,

ระดับเนื้อหา : Beginner (ระดับต้น) & Intermediate (ระดับกลาง)

CSS In 10 Minutesการใช้ CSS ในการกำหนด layout และตกแต่งเว็บไซต์แบบ Tableless ในบ้านเราถือว่ายังไม่แพร่หลายมากนัก ส่วนใหญ่ยังคงใช้คำสั่ง Table ในการกำหนด Layout ของเว็บ ถึงแม้จะนำ CSS มาใช้บ้างแต่ก็เป็นการผสมผสานกับการใช้ Table แต่ปัญหาที่ผมมาเมื่อครั้งยังใช้ table เป็นหลัก คือหากผมต้่องการปรับเปลี่ยน Layout หรือ หน้าตาเว็บโดยยังคงเนื้อหาเดิมไว้ ผมกลับต้องรื้อ layout ทั้งหมด และเมื่อเห็นหลายๆ เว็บของต่างประเทศที่นำ CSS มาใช้ในการทำเว็บและลองทำดูปัญหาที่เคยเจอก็หมดไป นอกจากข้อดีที่ว่าแล้ว CSS ยังมีข้อดีข้อเด่นอะไรอีกบ้าง เรามาลองดูกันครับ

จุดเ่่ด่น 5 ประการของ CSS ที่ Russ Weakley ผู้เขียนหนังสือ CSS in 10 Minute ซึ่งเป็นหนังสือเล่มแรกๆที่ผมซื้อมาเพื่อศึกษาการใช้ CSS ครับ

  • สามารถควบคุม Typography ได้ดีกว่า นั่นก็หมายความว่า การใช้ CSS ทำให้คุณกำหนดรูปแบบการแสดงผลของ Font จากไฟล์ CSS ได้ดีขึ้นเพราะหากเว็บของคุณมีรูปแบบของ fontที่เหมือนกันในทุกเว็บเพจ คุณก็กำหนดรูปแบบการแสดงผลของ Font ทั้งหมดไว้ในไฟล์ CSS และเรียกใช้มันแทนการเขียน Tag ในแต่ละเว็บเพจ
  • ขนาดของไฟล์เล็กลง เพราะเมื่อคุณใช้ CSS ในการกำหนดรูปแบบหน้าตาของเว็บ จากเดิมที่ใส่ tags อย่าง <font size=”+2″ , style=….color…> ,หรือ <table align=”center” bgcolor=”…”……. > ,ฯลฯ เต็มไปหมดในเอกสาร HTML คุณก็สามารถกำหนดรูปแบบการแสดงผลไว้ไฟล์ CSS ต่างหาก ซึ่งก็จะทำให้ ขนาดไฟล์ HTML เล็กลง
  • ปรับเปลี่ยนง่าย เมื่อคุณกำหนดรูปแบบการแสดงผลของเว็บเพจ ไว้ในไฟล์ CSS คุณก็สามารถแก้ไขรูปแบบการแสดงผลได้จาก ไฟล์ CSS แทนที่จะแก้ไขในเอกสาร HTML หลายๆหน้าเหมือนการใช้ Table
  • กำหนดรูปแบบการแสดงผลของสื่อหลากชนิด ด้วยการใช้ CSS คุณสามารถกำหนดให้การแสดงผลของเว็บแสดงออกมาในรูปแบบที่เหมาะกับสื่อชนิดต่างๆไม่ว่าจะเป็น ให้เว็บเพจหนึ่งหน้าแสดงผลที่ Browserในรูปแบบเว็บเพจบนหน้าจอแต่แสดงผลใน Mobile Device อีกแบบหนึ่งเพืื่อให้เหมาะสมหน้าจอบน PDA ที่เล็กกว่าได้ ฯลฯ โดยที่ยังคงเนื้อหาเช่นเดิม
  • เพิ่ม Accessibility ให้เว็บ Accessibility หรือการเข้าถึงข้อมูลเว็บนั้นเรามักจะนึกถึงการเข้าถึงข้อมูลเว็บของผู้มีปัญหาทางผิดปกติทางร่างกายเช่น คนตาบอด ผู้พิการอื่นๆ ฯลฯ ซึ่งคนเหล่านี้จะใช้ Software ช่วยเหลือเช่น Screen Readers(สามารถดาวน์โหลด trial screen readers software ได้ที่ http://www.freedomscientific.com/fs_downloads/jaws.asp เมื่อinstall แล้ว ให้ลองหลับตาหรือปิดมอนิเตอร์ เพื่อให้ Software อ่านให้เว็บให้เราฟัง) หลายจุดในเว็บเพจที่มีการใช้ Table ซ้อน Table อาจจะทำให้ Screen Readers อ่านข้อความผิดพลาดได้ แต่หากใช้ CSS เป็นตัวกำหนดรูปแบบ และ กำหนดเนื้อหาตัวหนังสือใน HTML เมื่อถอดตัว CSS ออกจาก HTML เอกสารก็จะแสดงผลไม่ต่างกับ Microsoft Word ที่อ่านง่ายขึ้น ทำให้การอ่านผลของ Screen Readers อ่านตัวหนังสือได้ถูกต้องยิ่งขึ้นหากคุณอยากรู้ว่าเมื่อถอด CSS ออกแล้วเป็นอย่างไร ทำได้โดยหากคุณใช้ Firefox(download) ไปที่ Toolbar เลือก View > Page Style >No Style สำหรับ IE 7 ทำได้เพียง Ignore Font size ,color และ font style เท่านั้น จึงขอแนะนำให้ใช้ Firefox ดีกว่าสำหรับเว็บที่ใช้ Table ให้เข้าไปที่เว็บไซต์ที่ผมเคยทำไว้่คือ www.thinkandclick.com/old_index.html ครับ

นอกเหนือไปจาก ข้อดีของ CSS ที่กล่าวมาแล้วการนำ CSS ยังมีผลต่อการทำ Search Engine Optimazation ในเว็บไซต์ของคุณอีกด้วย ซึ่งคุณหาอ่านได้จากเรื่อง Cascading Style Sheets และ SEO ตอนที่ 1 และ ตอนที่ 2 จาก emarketeer.in.th

Tags: , , , , , , ,