หน้าแรก

การสร้างเมนูคล้ายๆ กับเว็บ Sanook ใน dreamweaver


หลายคนสงสัยว่าเว็บไซต์ดังๆ เขาทำเมนูกันยังไงสวยจังเลย นี่ก็เป็นอีกเว็บไซต์หนึ่งนะครับที่มีคนเข้าไปดูเยอะครับ เราก็จะมาดูกันซิว่าเขาทำเมนูกันอย่างไร

ภาพเมนูตัวอย่าง
//หรือจะเข้าไปดูที่เว็บ Sanook.com ก็ได้นะครับ


ขั้นตอนการทำ

1.> ใช้โปรแกรม
 Photoshop หรือโปรแกรมที่เราชอบสร้างรูปภาพที่เราจะนำมาใช้คั่นระหว่างเมนู (ใส่สีตามที่เราต้องการได้เลยนะครับ) ขนาดที่สร้าง กว้าง 1 px - สูง 2 px 


2.> หลังจากนั้นให้เราสร้างตารางขนาด 10 แถว x 5 คอลัมภ์ หรือตามขนาดเมนู่ที่เราต้องการ ความกว้างก็ประมาณ 120 px ก็ได้ครับ แล้วเราจะได้ตารางขึ้นมาดังภาพ


ตารางที่เราได้


3.> หลังจากที่เราสร้างตารางเสร็จแล้ว ให้เรารวมเซล์ของตารางแถวแรก และกำหนดขนาดความกว้างโดยประมาณที่ 10 px ดังภาพ


4.> หลังจากนั้นก็ทำการใส่สี #FE7474 ลงไปในตารางที่เราได้ทำการรวม


5.> หลังจากนั้นให้เรานำภาพที่เราเตรียมไว้มาใส่เป็น Background แบบสลับช่อง 



6.> หลังจากนั้นให้เรานำรูปภาพที่เราได้เตรียมไว้มาใส่ในตารางที่เราใส่ Background ไว้อีกทีหนึ่ง


7.> หลังจากนั้นให้เราทำการใส่สี #C10909
 ลงในช่องว่างที่เหลืออีกทีหนึ่ง


8.> หลังจากนั้นก็ใช้ Photoshop สร้างภาพ 3 เหลี่ยมแล้วนำมาใส่ที่มุมของตารางเพียงเท่านี้เราก็จะได้เทนูสวย ๆ มาใช้งานในเว้บเราแล้วนะครับ



จัดทำโดย : อ.บอย
ที่มา : เว็บ Sanook.com

การใส่สี Background, Border ให้กับตาราง การสร้างเมนูแบบมีมุมโค้ง
บทความที่เกี่ยวข้อง

ดูบทความ dreamweaver ทั้งหมด »