เรามาทำกล่องขอบโค้ง โดยใช้รูป มุมมน และเขียนแบบพื้นฐาน ด้วย html แบบ standards กัน ผมขอเสนอ วิธีที่เคยใช้ง่ายๆ 3 แบบด้วยกัน ลองนำไปใช้ ตามโอกาส

แบบที่ 1 ตัดรูป ขอบด้านบนและล่างมาแบบนี้

= curve_top.gif

= curve_bottom.gif

เขียน html ดังนี้

<div class=”curvetop”></div>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
<div class=”curvebottom”></div>

เขียน css ดังนี้
<style type=”text/css”>
.curvetop {background:url(curve_top.gif) no-repeat; height:9px; font-size:1px}

.curvebottom {background:url(curve_bottom.gif) no-repeat; height:9px; font-size:1px}

ul {background:#8ACA80; margin:0; padding:0 10px 0 10px; list-style:none; width:157px}

li {border-bottom:1px #FFFFFF dashed}
</style>

ได้ผลดังนี้

ไม่มีอะไรมาก ก็ใส่รูปที่ .curvetop และ .curvebottom แล้วก็ใส่สี ที่ ul ใส่ เส้นประที่ li ส่วนที่ว่าทำไมต้องใส่ font-size:1px อ่านอันนี้ประกอบ การจัดการกับความสูง และ อ่าน อันนี้ด้วยก็ได้ ถ้ายังไม่เข้าใจ ul li เรียนรู้การใช้ ul li step by step
อ่านต่อ คลิกที่นี่ »

ในที่สุดก็มีเว็บบอร์ดกะเค้าซักทีครับ เดิมที ผมตั้งใจจะให้เว็บนี้เป็นที่รวบรวมเรื่องราว ที่จะเป็นแรงบันดาลใจสำหรับคนทำเว็บ จึงได้ทำแกลลอรี่ และรวมลิ้งค์ที่ดีๆเอาไว้ และใส่สโลแกนไว้ใต้โลโก้ว่า The miracle land of inspiration แต่ด้วยความที่ผมทำงาน(ปัจจุบัน) ด้วยการโค้ด css เป็นหลัก โดยมี psd ที่ออกแบบมาเรียบร้อยแล้ว จากเดิมที่จะมีการใช้ photoshop Illustrator ออกแบบหน้าเว็บด้วย ทำให้บทความที่ผมเขียนส่วนใหญ่จึงเกี่ยวกับ css และเว็บนี้จึงกลายเป็นเว็บ css ไปโดยปริยาย ก็เลยไปลงที่เว็บบอร์ดนี่แหละ เป็นส่วนเสริมที่ขาดไปของ tutorail ในบล็อก จะได้มีเรื่องอื่นๆบ้าง เริ่มจาก

Divland

บอร์ด สำหรับคุยเรื่อง html xhtml structure CSS เว็บดีไซน์ยุคนี้ ต้องดีไซน์โค้ดเป็นด้วย

Div’design

บอร์ด คุยเรื่องออกแบบ เมื่อก่อน คนทำ html ก็คือคนที่ออกแบบด้วย photoshop แต่ เว็บยุคใหม่ คนออกแบบ กับคนโค้ด xhtml css แยกกันซะแล้วครับ

Divjobs

ประกาศ รับสมัครงาน ของงานไอที ทั้งหลาย

Divcenter

free lance อยากรับงาน ประกาศตน ได้ที่นี่

Divdigg

มีเรื่องราวดี ไม่ว่าจากบล็อกคุณเองหรือ เว็บไหนก็ได้ เอา ลิ้งค์มาโพสต์ได้ที่นี่ครับ ลิ้งค์คุณภาพจริงไม่มี nofollow

Div cafe’

คุยเรื่องทั่วไป สัพเหระ สบายๆ

สมัครสมาชิกแล้วเิริ่มพูดคุยกันได้ สบายๆ ครับ สมัครสมาชิกบอร์ดที่นี่

สำหรับคนที่ได้ลองเขียน css ด้วยตัวเองมาบ้างแล้ว ก็คงพอจะทราบว่า แท้จริงแล้ว หน้าเว็บก็ไม่ได้มีอะไรมากไปกว่าการทำกล่องและใส่ margin padding ซึ่งก็คือ การจัดตำแหน่งการแสดงผลของหน้าเว็บเพจ โดยใช้โค้ดที่แยกออกจากส่วน โครงสร้าง HTML เท่านั้นเอง แต่ภายใต้การกระทำที่แสนจะพื้นฐาน กลับมีเทคนิคมากมาย เพราะเบราเซอร์ที่มีในโลกนี้ ไม่ได้ทำงานไปในทิศทางเดียวกัน หากเขียน css ให้เว็บเพจดูได้สมบูรณ์ที่ เบราเซอร์เดียวแล้วละก็ เราจะไม่ต้องมีเทคนิคอะไรเลยก็ทำได้ง่ายแสนง่าย  ดังนั้นเมื่อเริ่มเขียน css สิ่งที่ควรจะระลึกไว้เสมอคือ ถ้าต้องการให้เว็บดูได้สมบูรณ์ที่ หลายๆเบราเซอร์ อย่าใช้โค้ดใหม่ (css2 , css3) หรือโค้ดเทพต่างๆให้มากนัก เพราะคุณจะประสบปัญหาการแสดงผลอย่างแน่นอน แล้วจะต้องมานั่ง hack กันให้เสียเวลา  พยายาม keep simple เข้าไว้ หรือถ้าคุณไม่แคร์ และคิดว่า จะให้เว็บดูสุดยอดที่ firefox เท่านั้น นั่นก็อีกเรื่อง ใส่กันเข้าไปให้เต็มที่ ตามใจอยาก

เข้าเรื่องที่จะพูดถึงกัน เว็บเพจโดยทั่วไปแล้ว มักจะถูกกำหนดความกว้าง (width) เป็นค่าอย่างใดอย่างหนึ่ง อาจเป็น pixel หรือ เปอร์เซ็นต์ เพราะเราไม่ต้องการให้มีการยืดที่ด้านข้าง แต่เว็บเราเลื่อนลงข้างล่าง ความสูง(height) จึงมักจะเป็นตัวแปรตาม คือไม่กำหนดค่า แล้วแต่ว่า เนื้อหาภายในมีมากน้อยเพียงใด เรามาดูว่า ปัญหาของค่า height นั้นมีอะไรบ้าง

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

สำหรับเว็บแกลลอรี่ ที่มีรูปภาพใหญ่ๆ กว่าคนที่เข้ามาจะได้ดูรูปอาจใช้เวลาโหลดนาน เราจะมาเขียน คลาสให้มี ตัวโหลดรูป เหมือน ที่ ajax เค้าใช้กัน แต่เราจะใช้ css อย่างง่ายๆ นี่แหละั

.preload{ background: url(loading.gif) no-repeat 50% 50%; }

คลาส preload จะมี แบ็คกราวน์ อยู่ตรงกลางที่ โดยเราใส่ 50% นั่นคือเลื่อนตามแนวแกน x และ y ตามความกว้างสูง ของรูป การนำไปใช้ใส่ คลาสที่ img เช่น

<img src=”test.jpg” class=”preload”>

ส่วนรูปที่จะใช้ เราทำ gif ง่ายๆ เองก็ได้ ผมมีเก็บไว้ 2 รูป ไม่รู้ที่ไหนมีให้โหลดบ้าง อยากได้อยู่เหมือนกัน หาแล้วก็ไม่เจอ ใครมีก็เอามาแจกกันมั่งนะ อันนี้ใส่ bg สีดำ ไว้ไม่งั้นไม่เห็น คลิกขวาเซฟเอาละกันนะ

ตัวอย่าง รูปที่ใช้ preload1.html ถ้าดูไม่ทัน กด Ctrl+f5 ละกันครับ มันจะได้โหลดรูปใหม่

มารู้จักกับ tag HTML กันอีก 2 ตัว เพื่อเพิ่มคุณภาพของเว็บเพจ ให้แน่นปึ้ก ตามหลักของ web standards
2 tag ที่ว่านั้นก็คือ <acronym>และ <abbr>

<acronym> มาจากคำว่า acronym แปลว่า ชื่อย่อที่ผสมมาจากตัวอักษรขึ้นต้นของแต่ละคำ เช่น

• HTML มาจาก Hypertext Markup Language
• CSS มาจาก Cascading Style Sheets

ตัวอย่างการใช้

<acronym title=”Radio Detecting And Ranging”>radar</acronym>

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