About DwThai.Com 00

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖

Go to Post-iT Sign Guestbook

ค้นหาข้อมูลใน DwThai.Com

สร้าง Popup Menu ด้วย Spry Menu Bar (CS Only) [Article ID : 89]

เรื่อง : การสร้างเมนูเว็บไซต์ด้วย Spry Menu Bar

*Dreamweaver CC ไม่มีให้ใช้ครับ

Spry เป็น Framework ของ Adobe ที่ช่วยการพัฒนาเว็บไซต์ในส่วนของ Client Side ให้เป็นไปอย่างง่ายดาย ซึ่ง Adobe จับใส่มาให้เราใช้งานกับโปรแกรม Dreamweaver ในตะกูล CS สำหรับในบทความนี้จะมาแนะนำ Spry ที่มีมากับตัวโปรแกรม ซึ่งเป็นเรื่องเกี่ยวกับการสร้างเมนูเว็บ คือ การสร้าง Popup Menu ด้วย Spry Menu ใครนึกภาพคำว่า Popup Menu ไม่ออก ลองดูจากตัวอย่างด้านล่างนี้ โดยชี้เมาท์ไปที่เมนู Sevices

วิธีการสร้าง Popup Menu ด้วย Spry Menu

ก่อนอื่นให้ทำการเปิดไฟล์เว็บเพจที่เราต้องการสร้าง Popup Menu ขึ้นมา หรือจะทำการ New File ขึ้นมาใหม่เพื่อทำการทดลองก็ได้ จากนั้นปฏิบัติตามขั้นตอนต่าง ๆ ดังนี้

1. จากนั้นที่หน้าต่าง Insert เลือกที่กลุ่ม Spry แล้วเลือกที่ Spry Menu Bar ดังรูป (Insert Panel -> Spry -> Spry Menu Bar )

2. เมื่อเลือกแล้ว โปรแกรมจะแสดง Dialog ขึ้นมาให้เราเลือกว่าต้องการสร้าง Popup Menu ในแบบแนวนอน (Horizontal) หรือแนวตั้ง (Vertical) ดังรูป

*ในที่นี้เลือกที่ Horizontal
3. จากนั้นโปรแกรมจะสร้างตัวอย่าง Menu กับหน้าเว็บเพจ เพื่อให้สามารถทำการแก้ไขเพิ่มเติมเมนูได้ตามต้องการ ดังรูป

การแก้ไขเมนู

4. เมื่อโปรแกรมสร้างตัวอย่างเมนูให้เราแล้ว หากต้องการแก้ไข ให้ไปที่ Properties ดังรูป หากไม่ปรากฏลักษณะดังรูปให้เราทำการ Click เลือกไปที่แถบสีฟ้า ๆ ของเมนูก่อน 1 ครั้ง

5. การแก้ไขทำได้โดย เลือกไปที่ List ในช่อง Item ที่เราต้องการ จากนั้น หากต้องการเปลี่ยนชื่อ หรือแก้ไขข้อความที่ปรากฏบนเมนู ให้ทำการพิมพ์ข้อความใหม่ที่ต้องการในช่อง Text ดังรูป

เมื่อพิมพ์ได้ตามที่ต้องการแล้วสังเกตุที่เว็บเพจ ข้อความที่เมนูจะเปลี่ยนแปลงตามที่เราต้องการ

7. หากต้องการสร้างจุดเชื่อมโยงหรือ Link สามารถทำได้ที่ช่อง Link ดังรูป

การเพิ่ม-ลบเมนู

8. หากต้องการเพิ่มหรือลบเมนู เราสามารถทำได้โดยการคลิ๊กเลือกไปที่เครื่องหมายบวก-ลบ (+, -) ของ List Item

9. เมื่อเพิ่มแล้วจะได้รายการใหม่ดังตัวอย่าง หากต้องการเปลี่ยนแปลงแก้ไขใด ๆ ให้ทำได้ตามต้องการเหมือนดังขั้นตอนที่ 5-7 ที่กล่าวมา

การเปลี่ยนแปลงแก้ไขสีสันของเมนู

10. การเปลี่ยนแปลงแก้ไขสีสันของเมนู ไม่ว่าจะเป็นสีของพื้นหลังของเมนู หรือสีของตัวอักษรข้อความ เราสามารถเปลี่ยนได้จาก CSS Panel ดังรูป

ซึ่งรูปแบบของเมนู หรือ CSS ที่โปรแกรมสร้างขึ้นมาใช้กับ Spry Menu Bar นั้น จะถูกเก็บไว้ในไฟล์ที่ชื่อ SpryMenuBarHorizontal.css (หากสร้างแบบแนวนอน)

11. วิธีการแก้ไขก็ให้เราทำการเลือกไปที่ชื่อ Class ของสไตร์ที่เราต้องการแก้ไข ดังรูปเป็น CSS ที่ใช้ในการกำหนดสีพื้นหลังและสีของตัวอักษร เมื่อเมาท์มาวางเหนือเมนู

*การแก้ไขค่าของ CSS ก็ดังเช่นกับที่เราแก้ไข CSS ที่เราเคยใช้งานกันมาแล้ว

หากในขณะใช้ Spry Menu โปรแกรมแสดงหน้าต่างดังรูปนี้ ให้ทำการกด OK เพื่อบันทึกไฟล์ที่เกี่ยวข้องกันด้วยครับ

การนำขึ้นไปใช้งานจริงกับ Web Hosting

เว็บเพจที่ได้มีการสร้าง Popup Menu ด้วย Spry Menu Bar หากต้องการนำไปใช้งานจริงบนเว็บโฮสติ้งท นอกจากที่เราทำการอัพโหลดไฟล์เว็บเพจขึ้นไปแล้ว ยังต้องอัพโหลด Folder ที่ชื่อว่า SpryAssets ขึ้นไปวางไว้ที่โฮสต์ด้วยนะครับ จึงจะสามารถใช้งานได้ Popup Menu นี้ได้

เมื่อทำการแก้ไข-ตบแต่งเสร็จสิ้นแล้ว จะได้เมนูแบบมี Popup เมื่อมีเมาท์ไปวางเหนือเมนูหลักแล้ว ดังรูป

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver ตอนที่ 1

เรื่อง : การออกแบบ Responsive Web Design ด้วย Dreamweaver ตอนที่ 1 บทความนี้มีด้วยกัน 3 ตอนครับ จะเป็นบทความที่ว่าด้วยเรื...

สร้าง Link เปิดหน้าต่างใหม่ไม่มี Tool Bar

เรื่อง : สร้าง Link เปิดหน้าต่างใหม่ไม่มี Tool Bar มีหลายท่านสอบถามกันมาบ่อยเหลือเกินว่า อยากให้ทำการสร้าง Link ที่พอเมื่อ ...

การออกแบบเว็บเพจให้ชิดขอบของ Web Browser

เรื่อง : วิธีทำให้ Web Page ชิดขอบของ Web Browser หากการออกแบบ Web Page แล้วมีปัญหาในเรื่องของการแสดงผลว่า...ทำไมเว็บเพจ...

Upload ไฟล์เว็บไปไว้บน Web Hosting ด้วย Dreamweaver

เรื่อง : Dreamweaver กับการ Upload ไฟล์เว็บไซต์ไปยัง Web Hosting เมื่อเร็ว ๆ นี้มีน้องคนหนึ่งโทรเข้ามาสอบถามเรื่องของการใช้...