หน้าแรก บริการของ dwthai.com เกี่ยวกับ dwthai.com ติดต่อ dwthai.com
พื้นฐานการใช้งาน การใช้งานที่มากกว่างาน Design ขยายความสามารถให้ DW เรื่องของ Script บทความน่ารู้
มุม Download
พูดคุยสนทนาตามประสาคนทำเว็บ
หาเพื่อนคุยคอเดียวกันกับ MSN
ติ-ชมเราบ้าง

 

:: ติดต่อเรา ::
webmaster_dwthai@yahoo.com
webmaster@dwthai.com

08 - 9495 - 7296
-------
-----------------------------------

 

This website best view with
Internet Explorer 5.5 up
or
Netscape version.7 up
  

เรื่อง : สร้าง POPUP Menu ด้วย Spry Menu (CS3)

Spry เป็น FrameWork ของ Adobe ที่ช่วยในการพัฒนางานเว็บไซต์ที่ทาง Adobe จับใส่มาให้เราใช้งานกับโปรแกรม Dreamweaver version CS3 ในบทความนี้ผมจะมาแนะนำให้ใช้ Spry ที่มีมากับตัวโปรแกรม สัก 1 ประเภทกันครับ คือ การสร้าง POPUP Menu ด้วย Spry Menu ซึ่งแต่เดิม การที่เราจะสร้าง POPUP Menu ขึ้นมา เราต้องใช้งานในส่วนของ Behaviors ของโปรแกรม แต่กับเวอร์ชั่น CS3 ที่ออกมาใหม่นี้ ทางเจ้าของโปรแกรมแนะนำว่าให้สร้าง POPUP Menu ด้วย Spry ที่เขาใส่มาให้นะ ก็เห็นว่ามีประโยชน์ และการใช้งานค่อนข้างง่าย จึงขอนำเสนอมาเป็นบทความแนะนำครับ มาลองอ่านกันดู

 

................................................................................................................................................................................

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

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

2. จากนั้นไปที่ TAB Spry ของโปรแกรม แล้วเลือกที่ Spry Menu Bar ดังรูป

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

................................................................................................................................................................................

BACK TOP


สงวนลิขสิทธิ์ © 2546-2550 โดย dwthai.com ห้ามการ copy ส่วนใดส่วนหนึ่งของเว็บไซต์แห่งนี้.
Copyright ©2003-2007 dwthai.com. All rights reserved. This website was created by : S.raksasuk.