Lesson 8
- 1. การออกแบบเว็บเพจด้วย Spry
Spry เป็นคุณสมบัติใหม่ที่เพิ่มเติมเข้ามาใน Dreamweaver ในเวอร์ชั่น CS3 เป็นต้นมา โดยเป็นการ
ใช้เทคโนโลยีที่เรียกว่า AJAX (Asynchronous JavaScript and XML) เข้ามาช่วยเพื่อให้เว็บเพจสามารถ
โต้ตอบกับผู้ชมได้ดียิ่งขึ้น เครื่องมือต่างๆ ของ Spry ของInsert Bar โดยแบ่งเป็น 3 กลุ่มคือ
กลุ่มที่ใช้ออกแบบเว็บเพจ ประกอบด้วยเครื่องมือช่วยในการสร้างเมนู และการจัดแบ่งกลุ่ม
เนื้อหาให้เป็นระเบียบและน่าสนใจมากขึ้น รวมทั้งช่วยประหยัดพื้นที่ของเว็บเพจไว้อย่างดี
กลุ่มที่ใช้ตรวจสอบข้อมูลบนฟอร์ม เป็นเครื่องมือที่ช่วยให้คุณควบคุมรูปแบบการกรอกและ
ค่าของข้อมูลที่ผู้ชมกรอกได้อย่างละเอียดกว่าวิธีเดิมซึ่งใช้ Behavior
กลุ่มที่ใช้แสดงผลข้อมูล เป็นเครื่องมือสาหรับนาข้อมูลที่อยู่ในรูปแบบ XML มาแสดงผล
บนเว็บเพจในลักษณะต่างๆ
Spry กลุ่มที่ใช้แสดงผลข้อมูล Spry กลุ่มที่ใช้ออกแบบเว็บเพจ
Spry กลุ่มที่ใช้ตรวจสอบข้อมูลบนฟอร์ม
การออกแบบเว็บเพจด้วย Spry
- 2. 162
ออกแบบเว็บเพจด้วย Spry
เครื่องมือกลุ่มนี้จะช่วยให้เว็บเพจของคุณมีลูกเล่นมากขึ้น รวมทั้งช่วยในการจัดระเบียบเนื้อหาบน
เว็บเพจได้เป็นอย่างดี โดยมีหลายรูปแบบให้เลือกใช้ตามลักษณะเนื้อหา ดังนี้
สร้างเมนูบาร์ด้วย Spry Menu Bar
เป็นเครื่องมือที่ช่วยให้คุณสร้างเมนูสาหรับเว็บไซต์ทั้งแบบแนวตั้งหรือแนวนอนได้อย่างง่ายๆ และ
รวดเร็ว โดยสามารถซ้อนเมนูย่อยได้ถึง 3 ชั้น อย่างไรก็ตามคุณควรออกแบบโครงสร้างเมนูไว้เสียก่อน แล้ว
จึงเริ่มต้นสร้างและจัดการต่างๆ กับเมนู โดยมีขั้นตอนดังนี้
1. คลิกที่ปุ่ม Spry Menu Bar เพื่อทาการสร้างเมนูคาสั่งในหน้าเว็บเพจ
2. เลือกรูปแบบการแสดงของเมนู จากนั้นคลิกที่ปุ่ม OK
3. โปรแกรมจะแสดงผลลัพธ์ตามรูปแบบที่เราเลือก
คลิกปุ่ม
เลือกรูปแบบการแสดงของเมนู
แล้วคลิกเมาส์ปุ่ม
ผลลัพธ์ที่ได้บนเว็บเพจ
- 4. 164
2. คลิกบน Properties Inspector คลิกเลือกหัวข้อเมนูหลักและเมนูย่อย
3. คลิกที่ปุ่ม + เพื่อเพิ่มหัวข้อเมนูต่อจากตาแหน่งที่เลือก หรือคลิก – เพื่อลบหัวข้อที่เลือกไว้
การเปลี่ยนชื่อหัวข้อเมนู
เมื่อได้จานวนหัวข้อตามโครงสร้างแล้ว คุณก็สามารถเปลี่ยนชื่อแต่ละหัวข้อได้ ดังนี้
1. คลิกที่แท็บชื่อของ Spry Menu เพื่อให้ Properties แสดงข้อมูล
บน Properties Inspector คลิก
เลือกหัวข้อเมนูหลักและเมนูย่อย
คลิก + เพื่อเพิ่มหัวข้อเมนูต่อจากตาแหน่งที่เลือก
หรือคลิก – เพื่อลบหัวข้อที่เลือกไว้
คลิกที่แท็บชื่อเพื่อ
เลือกเมนูทั้งชุด
- 5. 165
2. คลิกเลือกเมนูหลักของ Spry Menu
3. กาหนดชื่อหัวข้อของเมนูหลักในช่อง Text
4. หากต้องการเปลี่ยนหัวข้อในเมนูย่อยสามารถทาได้โดยคลิกที่หัวข้อเมนูย่อย แล้วทาการเปลี่ยน
ชื่อในช่อง Text เช่นเดียวกับการเปลี่ยนหัวข้อในเมนูหลัก
คลิกเลือกเมนูหลัก พิมพ์ชื่อเมนู
คลิกเลือกเมนูย่อย (ถ้ามี) แล้วพิมพ์ชื่อในทานองเดียวกัน
ผลลัพธ์ที่ได้ เมื่อแสดงบนบราวเซอร์
- 7. 167
ปรับแต่งสไตล์ของเมนู
เมื่อเราสร้างเมนูบาร์ โปรแกรมจะสร้างสไตล์ CSS ที่ใช้จัดรูปแบบส่วนประกอบต่างๆ ของเมนูให้
โดยอัตโนมัติ ซึ่งประกอบด้วยไฟล์ SpryMenuBarHorizontal.css (สาหรับเมนูแนวนอน) และไฟล์
SpryMenuBarVertical.css (สาหรับเมนูแนวตั้ง) ดังนั้นหากเราต้องการปรับแต่งเมนู ก็สามารถแก้ไขสไตล์
เหล่านี้ได้
สร้างแท็บสาหรับแบ่งเนื้อหาด้วย Spry Tabbed Panel
Tabbed panel เป็นเครื่องมือสาหรับจัดแบ่งเนื้อหาที่มีลักษณะเป็นกลุ่มหรือหมวดหมู่ โดยนามาวาง
ซ้อนกันไว้แล้วควบคุมการแสดงผลด้วยแท็บ ซึ่งขนาดกรอบของแต่ละแท็บจะสามารถยืดหยุ่นไปตาม
เนื้อหาได้ ตามปกติผู้ชมจะเห็นเนื้อหาของแท็บแรกก่อนและเมื่อต้องการดูเนื้อหาอื่นๆ ก็คลิกชื่อแท็บที่
ต้องการ
คุณสมบัติของ Tabbed Panel บน Properties Inspector
เมื่อเราคลิกที่แท็บชื่อ Spry Tabbed Panels: TabbedPanel1 (หรือที่แท็ก <div.TabbedPanels#...>)
บน Properties inspector จะแสดงคุณสมบัติของ Tabbed panel สามารถปรับแต่งได้ดังนี้
ผลลัพธ์ที่ได้ เมื่อแสดงบนบราวเซอร์
ชื่อชุดแท็บ
เครื่องมือเพิ่ม/ลดแท็บ
รายชื่อของแท็บต่างๆในชุด
เครื่องมือเลื่อนลาดับแท็บ
เลือกแท็บเริ่มต้นที่จะให้
แสดงเมื่อผู้ชมเปิดเว็บเพจ
- 9. 169
4. คลิก ของแท็บถัดไป แล้วตั้งชื่อรวมทั้งใส่เนื้อหาเช่นเดียวกับขั้นตอนของการใส่ข้อมูลใน
แท็บแรก
5. หากต้องการเพิ่มแท็บสามารถทาได้โดยคลิกที่ Spry Tabbed Panels เพื่อให้โปรแกรมแสดง
Properties ขึ้นมา
6. จากนั้นคลิก Add Panels + เมื่อต้องการเพิ่มแท็บ
7. หากต้องการลบแท็บสามารถทาได้โดยคลิกเลือกที่แท็บที่ต้องการลบออก จากนั้นคลิกที่ปุ่ม
Remove Panel -
คลิก ของแท็บถัดไป แล้วตั้งชื่อ
และใส่เนื้อหา
- 10. 170
สร้างกรอบแบบพับไว้ด้วย Spry Accordion
Accordion เป็นเครื่องมือสาหรับสร้างกรอบแบบพับเก็บได้ ซึ่งมีลักษณะคล้ายๆกับ tabbed panel
แต่หัวเรื่องจะเรียงกันเป็นแนวตั้งและกรอบจะมีขนาดคงที่ ซึ่งถ้าเนื้อหาในกรอบใดยาวเกินขนาดที่กาหนด
ไว้ ก็จะแสดงสโครลบาร์เพื่อใช้สาหรับเลื่อนดูเนื้อหาโดยอัตโนมัติ
Accordion เป็นอีกวิธีหนึ่งที่ช่วยให้ประหยัดพื้นที่บนหน้าเว็บ และเหมาะกับการแสดงเนื้อหาที่เป็น
ข้อมูลเสริมเล็กๆน้อยๆ โดยมีวิธีสร้างดังนี้
1. นาเมาส์คลิกที่ปุ่ม Spry Accordion เพื่อทาการสร้างกรอบ
แบบพับเก็บได้
2. นาเมาส์คลิกที่แท็บ Label 1 จากนั้นทาการเปลี่ยนชื่อของ Label 1ให้สื่อกับเนื้อหาใน Content
3. หากต้องการเพิ่มเนื้อหาลงในส่วนของหัวข้อใน Label 2 คลิก ของหัวข้อถัดไป แล้วตั้งชื่อ
และใส่เนื้อหาเหมือนขั้นตอนใน Label 1
คลิกแล้วใส่เนื้อหา
ของหัวข้อนี้
คลิก ของหัวข้อถัดไป
แล้วตั้งชื่อและใส่เนื้อหา
คลิกแล้วตั้งชื่อหัวข้อเรื่อง
- 12. 172
สร้างกรอบแบบซ่อนได้ด้วย Spry Collapsible Panel
Collapsible Panel เป็นเครื่องมือที่ใช้สร้างกรอบคล้ายๆกับ accordion แต่ต่างกันตรงที่ Collapsible
panel จะมีขนาดที่ยืดหยุ่นไปตามเนื้อหาและมีเพียงกรอบเดียว เราสามารถกาหนดสถานะเริ่มต้นให้เปิด
กรอบหรือปิดกรอบไว้ก่อนได เหมาะกับเนื้อหาที่เป็นรายละเอียดเพิ่มเติมหรือเป็นทางเลือกให้ผู้ชมดูหรือไม่
ดูก็ได้ โดยสามารถทาได้ดังนี้
1. นาเมาส์คลิกที่ Spry Collapsible Panels
2. นาเมาส์คลิกที่แท็บ Tab จากนั้นทาการเปลี่ยนชื่อของ Tab ให้สื่อกับเนื้อหาใน Content
3. ทาการใส่เนื้อหาลงในส่วนของ Content
คุณสมบัติของ Collapsible Panel บน Properties Inspector
ชื่อ Collapsible panel
เลือกว่าจะให้เปิดหรือปิดกรอบ
ขณะที่อยู่ใน Dreamwaever
เลือกสถานะเริ่มต้นว่าจะเปิดหรือ
ปิดกรอบเมื่อผู้ชมเข้ามาที่เว็บเพจ
ให้แสดงเอฟเฟ็คต์การ
เคลื่อนไหวขณะเปิด/ปิดกรอบ
