1. เอา tag <div> ที่ไม่จำเป็นออกไป สำหรับบางคน หากคิดอะไรไม่ออกก็ใช้ <div> ไว้ก่อน จนมีมากเกินไป เพราะฉะนั้นเราควรตัด <div> ให้เหลือเฉพาะส่วนที่จำเป็นเท่านั้น ทีนี้เรามาดูตัวอย่างการใช้ <div> ที่มากเกินความจำเป็นกันดีกว่า ตัวอย่างที่ 1 ตัวอย่างที่ 2 2. เลือกใช้ tag ให้เหมาะสม 3. ใช้ tag <div> ให้น้อยที่สุดและใช้งาน tag ให้ถูกความหมาย ตัวอย่างที่ 1 แทนที่เราจะใช้ <div> สำหรับ breadcrumb หรือ ข้อมูลที่เกี่ยวกับการบอกตำแหน่งที่อยู่ในเว็บไซต์ เราก็ควรจะใช้ <p> มากกว่า เพราะข้อมูลนี้ถือว่าเป็นข้อความ(paragraph) ตัวอย่างที่ 2 บางคนก็นำ <div> เพราะอยากจะให้ข้อมูลขึ้นบรรทัดใหม่โดยไม่ได้คำนึงถึงการใช้งานเลยว่า ใช้ถูกต้องตามความหมายรึเปล่า 4. จัดรูปแบบ code ให้เป็นระเบียบอยู่เสมอ ถ้าหากว่าใครใช้โปรแกรม Adobe [...]

วันนี้ผมจะมานำเสนอเกี่ยวกับ property ของ css ที่หลาย ๆ คนอาจจะงงว่า “css มันมีคำสั่งแบบนี้ด้วยเหรอ ?” property ทั้ง 5 ตัวที่ผมจะมานำเสนอวันนี้ก็คือ clip, min-height, white-space, cursor และ display ซึ่งหลาย ๆ คนมองข้ามเจ้าพวกนี้ไป ทั้ง ๆ ที่มันมีประโยชน์ในการใช้งานอยู่มากโขทีเดียว 1. CSS Property : Clip (คลิกเพื่อดูตัวอย่าง) การใช้งาน clip นั้นจะทำให้เหมือนกับมีหน้ากากมาครอบพื้นที่อยู่ (นึกภาพง่าย ๆ ก็เหมือนกับการใช้คำสั่ง crop ใน photoshop) โดยการที่เราจะสร้างหน้ากากขึ้นมาครอบนั้น เราจะต้องระบุค่าระยะห่างของด้านทั้ง 4 ก่อน(บน ขวา ล่าง ซ้าย) ตัวอย่างแรก ในตัวอย่างนี้เราจะสร้างหน้ากากให้กับรูปภาพโดยใช้คำสั่ง clip อันดับแรกเราต้องกำหนด position: relative ใน [...]

ในการเขียน CSS นั้น หลาย ๆ คนอาจจะไม่ทราบว่าสามารถย่อให้สั้นลงได้ (จริงเหรอเนี่ย !!!) โดยการใส่ค่า(value) ให้กับคุณสมบัติ(property) พร้อมกันหลาย ๆ ค่า วิธีการเช่นนี้เราเรียกว่า Shorthand นั่นเอง property แต่ละตัวเวลาเขียนแบบย่อแล้วจะเป็นอย่างไร ไปดู Font (ตัวอักษร) การใช้งานปกติ : font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif เขียนแบบย่อ : font: 1em/1.5em bold italic serif Background (พื้นหลัง) การใช้งานปกติ : background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left; background-attachment: fixed [...]

เมนูในเว็บไซต์ต่าง ๆ นั้น แต่ละที่ก็จะมีเทคนิคในการทำไม่เหมือนกัน วันนี้ผมจะนำเสนอวิธีการทำเมนูอีกวิธีหนึ่งที่เน้นความสวยงามเป็นหลัก ข้อดีของการทำเมนูด้วยวิธีนี้คือ ตัวอักษรและพื้นหลังขอเมนูจะเป็นรูปภาพทั้งหมด ทำให้สามารถออกแบบและตกแต่งเมนูได้เต็มที่ แต่ความสวยงามที่ได้ยังอยู่บนมาตรฐานเหมือนเดิมนะครับ เพราะถึงแม้ว่าเราจะใช้รูปภาพในการทำเมนู แต่ code ที่เรานำมาใช้นั้นยังเป็นตัวอักษรเหมือนเดิม จึงทำให้เรายังหวังผล SEO จาก keyword ที่อาจจะผสมลงไปในเมนูได้เหมือนเดิม (เยี่ยมมั้ยหละ) อย่ารอช้า เราไปดูกันเลยดีกว่าครับ ในขั้นตอนแรกเราต้องออกแบบเมนูที่เราต้องการก่อนนะคับ ทำเป็นไฟล์รูปภาพไฟล์เดียวยาว ๆ เลยนะคับไม่ต้องเสียเวลาตัดแบ่งเป็นหลาย ๆ อัน อันนี้เป็นรูปภาพ(เพียงรูปเดียว)ที่นำมาใช้ทำเมนูครับ บางคนอาจจะงงนะครับว่า “เอ๊ะ ทำไมเมนูมันมีสองแถว” ก็คือรูปภาพที่นำมาใช้นี้แถวบนจะเป็นสถานะปกติของเมนู ส่วนแถวล่างจะเป็นสถานะตอน hover ครับ HTML จะเป็นแบบนี้ครับ <ul id=”example”> <li id=”home”><a href=”#” class=”current”>home</a></li> <li id=”products”><a href=”#”>products</a></li> <li id=”service”><a href=”#”>service</a></li> <li id=”blog”><a href=”#”>blog</a></li> <li id=”contact”><a href=”#”>contact</a></li> [...]

คำเตือน : เหมาะสำหรับผู้มีพื้นฐาน html/css อยู่บ้าง ไม่งั้นอาจจะงงได้ ปัจจุบันนี้ เว็บไซต์ส่วนใหญ่มักจะมีการออกแบบให้ขอบของกล่องต่าง ๆ ในเว็บไซต์มีความโค้งมนเพื่อความสวยงาม แต่การจะทำให้ขอบมีความโค้งมนนั้น แต่ละคนก็จะมีเทคนิคหรือวิธีการทำที่แตกต่างกันไป ซึ่งเทคนิคส่วนใหญ่จะเป็นการสร้างกล่องที่มีพื้นหลังเป็นรูปขอบโค้งบนและล่าง ดังภาพ ซึ่งเทคนิคนี้เป็นเทคนิคที่ค่อนข้างเปลืองโค้ด (ต้องสร้าง div เปล่าถึง 2 ที่เพื่อแสดงผลขอบโค้งบนล่าง) แถมยังไม่ได้มาตรฐานอีกต่างหาก (สร้างโค้ดโดยที่ไม่มีความหมาย) แล้วอย่างงี้เราจะใช้วิธีไหนดีหละ ? วันนี้ผมจึงขอนำเสนอวิธีการทำขอบโค้งโดยที่ไม่ต้องใช้รูปภาพกัน โดย Alessandro Fulciniti วิธีการทำกล่องขอบโค้งโดยไม่ใช้รูปภาพนี้ สิ่งที่จะต้องมีก็คือ (สามารถดาวน์โหลดไฟล์ได้ที่ข้างล่างครับ) – ไฟล์ javascript ชื่อ “niftycornerscube.js” – ไฟล์ css ชื่อ “niftycorners.css” – “javascript เฉพาะ” สำหรับหน้านั้น ๆ ขึ้นอยู่กับ selector และ keyword ที่เราต้องการ <script type=”text/javascript”> window.onload=function(){ Nifty(“selector”,”keyword”); [...]

ปกติแล้ว Sitemap ในเว็บไซต์ทั่ว ๆ ไปจะมีรูปแบบที่เรียบง่ายไม่ได้มีการตกแต่งด้วย CSS อะไรมากมาย ยิ่ง Sitemap ที่มีการแยกย่อยหลายลำดับชั้นด้วยแล้วนั้นแทบจะไม่ได้มีการตกแต่งหรือมีการตกแต่งด้วย CSS น้อยมาก เพราะฉะนั้นวันนี้เราจะมาตกแต่ง Sitemap ของเราให้ดูน่าใช้งานมากขึ้นกันครับ ก่อนอื่นเรามาดูโครงสร้างของ Sitemap ตัวอย่างที่เราจะนำมาทำกันก่อนคับ <ul id=”sitemap”> <li>Home</li> <li>Information <ul> <li>Personal</li> <li>Company Info</li> </ul></li> <li>Tutorials <ul> <li>Photoshop</li> <li>XHTML</li> <li>CSS <ul> <li>directory-like Sitemap</li> <li>Simple Horizontal Menu</li> </ul></li> <li>PHP</li> </ul></li> <li>Contact</li> <li>Links</li> </ul> ค่า Default ของ list ใน ul นั้น ในลำดับแรกคือ (disc) ลำดับที่ 2 [...]