About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





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

%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87 Popup Menu %E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2 Spry Menu Bar %28CS Only%29 [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

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



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

การลบ Tag/Code ของ HTML ที่ไม่จำเป็นออก (Clean up HTML)

เรื่อง: ลบ Tag/Code ของ HTML ที่ไม่จำเป็นออกจาก Source Code บางครั้งการสร้าง Web Page โดยใช้โปรแกรม Dreamweaver ตัวโปรแ...  

การสร้างข้อความในแบบ Tooltip กับ Dreamweaver (Spry Tooltip, CS Only)

เรื่อง : การสร้างข้อความแบบ Tooltip ด้วยโปรแกรม Dreamweaver *บทความนี้เฉพาะโปรแกรม Dreamweaver เวอร์ชั่น CS5, CS6 สำหรับ CC ไม่มีให้เรียกใ...  

สร้าง Link ต่างสีบนหน้าเว็บเพจเดียว

เรื่อง : Link ต่างสีบนหน้าเว็บเพจเดียวมีแฟนเว็บถามกันเข้ามามากว่าทำอย่างไรจะทำให้สีของ Link มีได้มากกว่า 1 สี บนหน้า...  

การเขียนโค้ดโปรแกรมด้วย PHP กับ Dreamweaver (PHP with Dreamweaver)

เรื่อง : PHP กับโปรแกรม Dreamweaver บทความนี้จะขอมาแนะนำการใช้งานโปรแกรม Dreamweaver กับการเขียนโปรแกรมด้วยภาษา PHP ครับ ...  


Copyright ©2003-2019 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*