Dreamweaver CS

Spry Accordion Panel

ข้อมูลในหมวดเดียวกันบางที่ถ้าเราแสดงทั้งหมดทำให้เราอ่านหัวข้อมันได้ยาก เช่น FAQ ถ้าเราแสดงทั้งคำถามและคำตอบด้วยกันหน้าเว็บเพจจะยาวมากส่งผลให้อ่านคำถามได้ยากการใช้ Accordion ทำให้เราสามารถย่อคำตอบแล้วแสดงเฉพาะคำถามได้ง่ายขึ้น

สร้างการแสดงผลแบบพับได้ Spry Accordion จะสร้างการแสดงผลในแบบที่เราสามารถแบ่งหมวด และให้ผู้ใช้งานสามารถกดเพื่อแสดงผลตามหมวดที่ต้องการได้

ขั้นตอนการใช้งาน Spry Accordion Panel

1. เปิดเว็บเพจที่ต้องการแทรก Accordion ขึ้นมา จากนั้นทำการ save ให้เรียบร้อย

2. คลิกตำแหน่งที่ต้องการวาง Accordion Panel จากนั้นคลิกที่ Spry Accordion Panelดังรูป



3. เมื่อคลิกแล้วจะแสดงผลดังรูป


เราสามารถแก้ไขข้อความได้โดยตรงจากหน้าที่แสดงผลได้ทันที

4. การแก้ไขหัวข้อต่อไปให้เราวางเมาส์เหนือหัวข้อที่ต้องการ จะมีรูปตาขึ้นมา ให้คลิกที่รูปตานั้นก็จะสามารถแก้ไขเนื้อหาในหัวข้อนั้นได้


5. Property inspector เมื่อเราทำการแก้ไข Accordion Panel จะเป็นดังรูป



มีรายละเอียดดังนี้

1. ช่องซ้ายมือบนสุด ใส่ชื่ออ้างอิง Accordion Panel

2. Panels รายชื่อหัวข้อใน Acordion panel สามารถเพิ่มหรือลบด้วยการคลิกที่ เครื่องหมาย + หรือ -

6. เราสามารถกำหนดรูปแบบที่ใช้แสดงผลของ navigation ได้โดยไปที่ CSS panel ทางขวามือ จะมีรายการแสดงดังรูป



7.เมื่อแสดงผลผ่าน Browser จะเป็นดังภาพ




เลื่อนขึ้นด้านบน