อาจจะมี web designer บางคน ที่ออกแบบเว็บไซต์ แล้วอยากจะได้ กรอบ แบบใสๆ เห็นพื้นหลัง แต่ปัญหาที่ทำให้เรา ต้องเลิกใช้มัน ก็คือ

1. ถ้าทำให้ใส ด้วยภาพ ชนิด png มันจะใช้ได้เฉพาะ browser ใหม่ๆ IE6 ไม่ใสด้วย
2. ทำให้ใสด้วยโค้ด css เช่น Microsoft.gradien, filter ต่างๆ ก้ใช้ได้เฉพาะ IE เบราเซอร์อื่นไม่เล่นด้วย
3. ใช้ภาพ png แล้วใช้โค้ด png ie fix ก็ได้เหมือนกัน แต่ต้องใช้ png รูปใหญ่มาก ไฟล์หนัก โหลดช้า ไม่คุ้มค่าการใช้งาน

เว็บไซต์ เดลินิวส์ ในส่วน เมนูบาร์ใช้โค้ด css ทำให้ใส

แอบเข้าไปดู css หน่อยซิว่าเขียนอะไรยังไง ใช้ web delveloper toolbar เจอแล้วเขียนแบบนี้น่ะเอง อ่านต่อ คลิกที่นี่ »

เทคนิค ตอนนี้ ยังคงเป็นเรื่อง การใช้ รูปภาพแทนที่ text  จากที่เราเคยใช้ tag <span> กันไปแล้วในตอน ซ่อน h1 แล้วสวยด้วย images  แต่การแทนที่คราวนี้จะไม่ใช้ tag <span>  และเราจะให้ภาพนั้นเป็น link ได้ด้วย  >-

สมมติว่าเราทำลิ้งค์ไว้แบบนี้

<a href=”http://www.divland.com/”>email video to friends</a>

หน้าตามันก็จะเป็นลิ้งค์ ธรรมดา แบบนี้

email video to friends

อ่านต่อ คลิกที่นี่ »

เห็นมีคนถามกันเข้ามาเยอะเลยว่า ในเว็บไซต์ ต่างประเทศ เค้าทำ div ให้เป็น scroll ได้  อยากทำได้บ้าง จริงๆแล้วไม่ยากเลย ใช้แค่ property ตัวเดียวเท่านั้นเอง สามารถนำไปใช้แทน <iframe> ได้เลยครับ

เขียน css ดังนี้
<style type=”text/css”>
.longtext{width:250px;height:150px;overflow:scroll;}
</style>

html ดังนี้
<div class=”longtext”>
เนื้อหา text
</div>

ตัวอย่างดูด้านใน
อ่านต่อ คลิกที่นี่ »

หากคุณเป็นคนหนึ่งที่ใส่ใจใน seo (search engine optimization) ก็ย่อมจะทราบความสำคัญของแท็ก <h1> ซึ่งมีความสำคัญ ต่อหน้าเว็บเพจ เป็นที่สำหรับ keyword แต่ h1, h2มันก็เป็น text ตัวใหญ่ที่ตกแต่งได้เพียงใส่สีขีดเส้นใต้เท่านั้น คงขัดใจ webdesigner อยู่ไม่น้อยทีเดียว ทางเลือกสำหรับการอยู่ร่วมกันอย่างสันติ ระหว่าง web seo และ web design ก็คือ ใช้ css เข้าช่วย อย่างไรนั้นมาดูกัน

รูปนี้ผมเซฟมาจากหน้าเว็บ playpark.com ซึ่งใช้รูปนี้เป็นหัวข้อและลิ้งค์

PLAY CLUB

ส่วนอันนี้เป็นหัวข้อที่ใช้ แท็ก <h2>PLAY CLUB</h2> เราจะจับนำมารวมกัน

เขียน html ดังนี้ อ่านต่อ คลิกที่นี่ »