In My Life

การสร้าง Tab ในโปรแกรม Dreamweaver นั้น ทำได้เฉพาะในเวอร์ชั่น CS3 เท่านั้นค่ะ

1.  ไปที่ Tab Layout หรือ Spry มองหา Icon    และคลิกลงไปเลย

2.  หากขึ้นเตือนให้ save ไฟล์ก่อน ก็ save ซะ

3.  จะประกฏ Tab สวยๆ มาอันนึง รอให้เราปรับแต่ง

4.  คลิกที่ Tab แล้วดู properties ด้านล่าง จะเห็นดังรูป (ถ้ารูปเล็กไปก็คลิกที่รูปเพื่อดูรูปใหญ่ค่ะ)

• กดปุ่ม บวก ลบ เพื่อเพิ่ม ลบ จำนวน Tab
• กดปุ่มลูกศร ขึ้น ลง เพื่อเลื่อนลำดับของ Tab
• Default panel คือ tab ที่ต้องการให้แสดงเป็น default

5.  preview ดูความสวยงาม

6.  ปรับแต่งความสวยงามเองโดยมองไปด้านขวา หาคำว่า CSS เลือก all จะเห็น rule ทั้งหมดดังรูป

7. คลิกเลือกซักอันนึง ด้านล่างจะเห็น properties เช่นสี ขนาด ตำแหน่ง ให้ปรับแต่งตามความพอใจ (ควรมีความรู้ cssซักนิด) เมื่อแก้ไขค่า จะสังเกตว่ามีไฟล์นึงโผล่ขึ้นมา ชื่อไฟล์ SpryTabbedPanels.css อย่าลืม save ไฟล์นี้ด้วยล่ะ

8. preview ดูความสวยงามเป็นระยะ ๆ

9. ปรับแต่งเนื้อหา ให้เลื่อนเมาส์ไปมาบริเวณ ชื่อ Tab จะเห็นรูปลูกตา  กดซะ แล้วก็พิมพ์ข้อความด้านล่างได้เลยค่ะ

10. เปิดดู code มองหาส่วนที่เป็นดังรูปด้านล่าง จะเห็นว่า มีการเรียกใช้ไฟล์อยู่ 2 ไฟล์

 11.  ก๊อบปี้ทั้ง 2 ไฟล์ที่เห็น มาไว้ในโฟล์เดอร์เดียวกับโปรเจคซะ แล้วจัดการแก้ไข path ที่ code นี้ด้วย ไม่งั้นเวลาเราสร้าง Tab อันอื่น แล้วแก้ไข css มันจะทับอันเดิมที่เคยทำไว้ แล้วจะมานั่งน้ำตาไหล ที่อุตส่าห์แก้ซะสวยงาม