สร้าง Spry Tabbed Panel ใน Dreamweaver CS3

เป็นการสร้างเว็บเพจที่แบ่งข้อมูลเป็นแท็ป
1. สร้างเว็บเพจใหม่ตั้งชื่อว่า Index_sprytab.php แล้วดับเบิ้ลคลิกเปิดไฟล์ขึ้นมา
2. คลิกตำแน่งที่จะวาง Spry Tabbed แล้วคลิกปุ่ม Spry Tabbed Panel
3. คลิกและพิมพ์ชื่อเช่น Tabbedpanels
4. พิมพ์ข้อมูลลงไป
5. คลิกชื่อด้านล่างสุด Tab2
6. คลิกบวกเพิ่มแท็ป
7. เพิ่มจำนวนแท็ปตามตัวอย่าง

 

 

8. แก้ไขชื่อตามตัวอย่าง
9. คลิกรูปตา เพื่อแสดงเนื้อหาของแท็ปนั้นๆ ซึ่งจะทำให้สามารถพิมพ์ข้อมูลเข้าไปได้ เช่น Home
10. ลบคำว่า Content 1 ออกไป แล้วพิมพ์เนื้อหาลงไป

11. ABOUT US เกี่ยวกับเรา ให้คลิกรูปตา แล้วพิมพ์เนื้อหาลงไป
12. เสร็จแล้วคลิกไฟล์ Save
13. จะปรากฏกรอบข้อความเกี่ยวกับไฟล์เสริมที่ต้องใช้ในเว็บเพจแบบนี้ ก็คลิก OK
14. ทั้งสองไฟล์นี้ ต้องก็อปปี้เข้าไปไว้ในเว็บไซต์ด้วย เว็บเพจจึงจะใช้งานได้

 

15. แท็ปอื่นที่เหลือก็พิมพ์ข้อมูลลงไป

16. ผลงานเมื่อดูผ่านเว็บบราวเซอร์

การแก้ไข
แก้ไขด้วยวิธีการเดียวกัน คือแก้ไขที่ CSS Style
1. คลิก + หน้า Spry Tabbed Panel.css
2. ดับเบิ้ลคลิกชื่อสไตล์ที่ต้องการแก้ไขได้ตามต้องต้องการ