หน้าแรก

การสร้างเมนูแบบมีมุมโค้ง ใน dreamweaver


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

ภาพเมนูตัวอย่าง


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

1.> ขั้นตอนแรกเราจะต้องใช้โปรแกรม Photoshop หรือโปรแกรมที่เราชอบ สร้างมุมของเมนูขึ้นมาก่อน 
(แต่เราไม่ต้องสร้างใหญ่นะครับ เพราะว่าเราใช้เฉพาะส่วนมุมเท่านั้น)

ด้านซ้าย           ด้านขวา

2.> หลังจากนั้นให้เราใช้ Dreamweaver สร้างตารางขนาด 150 px หรือตามขนาดที่เราต้องการ ส่วนจำนวนแถวนั้นเราใช้เพียง 1 แถวเท่านั้นนะครับ ส่วนจำนวนคอลัมภ์นั้นเราต้องสร้างขึ้นมา 3 คอลัมภ์ เพื่อเราจะใส่รูปภาพที่มุมทั้ง 2 ด้าน


3.> หลังจากนั้นให้เรากำหนดขนาดของตารางทั้ง 2 ด้านให้เท่ากับขนาดภาพที่เราสร้างไว้ตั้งแต่แรก ในที่นี้ที่ผมสร้างไว้เป็นขนาด 10 px ผมก็จะกำหนดตามนั้น จากนั้นให้เรากำหนดที่ Properties ให้ตำแหน่ง Vert อยู่ที่ Top ทั้ง 2 ด้าน


4.> หลังจากนั้นให้เรานำภาพที่เราเตรียมไว้ใส่ลงไปทั้ง 2 ด้าน หลังจากนั้นให้เราใส่สี #0482FC ลงในตารางที่เราสรั้าง (สีที่ใส่ก็ควรเป็นสีเดียวกับภาพนะครับ)


5.> หลังจากนั้นให้เราสร้างส่วนที่เราจะใส่เมนูย่อยต่างๆ ลงไปต่อด้านล่างของตารางที่เราสร้างไว้ตั้งแต่แรกอีกทีหนึ่ง โดยกำหนดขนาดความกว้าง150 px และอย่าลืมกำหนด Border = 1 ด้วยนะครับ


6.> หลังจาดนั้นให้เรากำหนดสีให้กับตารางที่เราสร้างขึ้นโดย
ฺBorder =
 #0482FC 
Background =
 #EAFFFF
หลังจากนั้นเราก็กำหนดขนาดความสูงตามแต่เราต้องการ ดังภาพ


//เพียงเท่านี้เราก็ได้เมนูสวยและเก๋ตามที่เราต้องการแล้วครับไม่ยากเลยใช่ไหมครับ

การสร้างเมนูคล้ายๆ กับเว็บ Sanook การแทรกรูปภาพ
บทความที่เกี่ยวข้อง

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