Dreamweaver CS

Spry Tabbed Panel

Tab เหมือนแฟ้มเอกสารเราสามารถแบ่งข้อมูลเดียวกันเป็นหมวดย่อยๆได้เพื่อความง่ายในการอ่าน

แสดงผลข้อมูลแบบ Tab เป็นการแสดงผลข้อมูลที่มีประสิทธิภาพมากวิธีหนึ่ง ผู้ใช้งานสามารถเลือกหัวข้อด้านบน เนื้อหาจะถูกแสดงผลด้านล่างของหัวข้อทันที

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

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

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



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


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

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


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



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

1. ช่องซ้ายบน ใส่ชื่ออ้างอิงให้กับ Tabbed Panel

2. Panels เลือกเพิ่มหรือลบ Tab โดยคลิกที่เครื่องหมาย + และ -

3. Default Panel เลือก Tab ที่ต้องการให้แสดงผลก่อน

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



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




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