Download to read offline
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. โปรแกรมจะแสดงผลลัพธ์ตามรูปแบบที่เราเลือก คลิกปุ่ม เลือกรูปแบบการแสดงของเมนู แล้วคลิกเมาส์ปุ่ม ผลลัพธ์ที่ได้บนเว็บเพจ
- 3. 163 คุณสมบัติของเมนู Properties inspector เพิ่ม/ลดหัวข้อเมนู หลักจากสร้างเมนูแล้วคุณอาจจะต้องการเพิ่มหรือลดจานวนหัวข้อ(ทั้งเมนูหลักและเมนูย่อย) เพื่อให้เป็นไปตามโครงสร้างที่ได้ออกแบบไว้ 1. คลิกที่แท็บชื่อเพื่อเลือกเมนูทั้งชุด เครื่องมือเพิ่ม/ลดและ เลื่อนลาดับหัวข้อมูล คุณสมบัติของ หัวข้อเมนูที่กาลัง เลือก เปิด/ปิดสไตล์เพื่อดูโครงสร้างหรือแก้ไขเมนูตามแบบปกติ ชื่อเมนู หัวข้อเมนู ย่อยชั้นที่ 1 หัวข้อเมนู ย่อยชั้นที่ 2 หัวข้อหลัก คลิกที่แท็บชื่อเพื่อ เลือกเมนูทั้งชุด
- 4. 164 2. คลิกบน PropertiesInspector คลิกเลือกหัวข้อเมนูหลักและเมนูย่อย 3. คลิกที่ปุ่ม + เพื่อเพิ่มหัวข้อเมนูต่อจากตาแหน่งที่เลือก หรือคลิก – เพื่อลบหัวข้อที่เลือกไว้ การเปลี่ยนชื่อหัวข้อเมนู เมื่อได้จานวนหัวข้อตามโครงสร้างแล้ว คุณก็สามารถเปลี่ยนชื่อแต่ละหัวข้อได้ ดังนี้ 1. คลิกที่แท็บชื่อของ Spry Menu เพื่อให้ Properties แสดงข้อมูล บน Properties Inspector คลิก เลือกหัวข้อเมนูหลักและเมนูย่อย คลิก + เพื่อเพิ่มหัวข้อเมนูต่อจากตาแหน่งที่เลือก หรือคลิก – เพื่อลบหัวข้อที่เลือกไว้ คลิกที่แท็บชื่อเพื่อ เลือกเมนูทั้งชุด
- 5. 165 2. คลิกเลือกเมนูหลักของ SpryMenu 3. กาหนดชื่อหัวข้อของเมนูหลักในช่อง Text 4. หากต้องการเปลี่ยนหัวข้อในเมนูย่อยสามารถทาได้โดยคลิกที่หัวข้อเมนูย่อย แล้วทาการเปลี่ยน ชื่อในช่อง Text เช่นเดียวกับการเปลี่ยนหัวข้อในเมนูหลัก คลิกเลือกเมนูหลัก พิมพ์ชื่อเมนู คลิกเลือกเมนูย่อย (ถ้ามี) แล้วพิมพ์ชื่อในทานองเดียวกัน ผลลัพธ์ที่ได้ เมื่อแสดงบนบราวเซอร์
- 6. 166 สร้างลิงค์ให้กับหัวข้อเมนู เราสามารถสร้างลิงค์ให้กับหัวข้อต่างๆ ของเมนู พร้อมทั้งกาหนดข้อความที่จะแสดงเมื่อลิงค์ถูกชี้ ไม่ว่าหัวข้อนั้นจะอยู่ในเมนูหลักหรือเมนูย่อยก็ตาม 1.คลิกที่แท็บชื่อของ Spry Menu เพื่อให้ Properties แสดงข้อมูล 2. คลิกเลือกเมนูหลักของ Spry Menu 3. พิมพ์ URL ปลายทางหรือคลิก แล้วเลือกไฟล์ที่จะลิงค์ไป 4. ป้อนข้อความลงในช่อง Title เพื่อให้โปรแกรมแสดงข้อความ เมื่อนาเมาส์เลื่อนมาวางด้านบน ของเมนู 5. กาหนดวินโดว์หรือเฟรมเป้าหมายของของการเชื่อมโยงในช่อง Taget คลิกที่แท็บชื่อเพื่อเลือกเมนูทั้งชุด คลิกที่แท็บชื่อเพื่อเลือกเมนูทั้งชุด พิมพ์ URL ปลายทางหรือคลิก แล้วเลือกไฟล์ที่จะลิงค์ไป พิมพ์ข้อความที่จะแสดง เมื่อผู้ชมชี้เมาส์บนหัวข้อนี้ กาหนดวินโดว์หรือเฟรม เป้าหมายของลิงค์หา
- 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 สามารถปรับแต่งได้ดังนี้ ผลลัพธ์ที่ได้ เมื่อแสดงบนบราวเซอร์ ชื่อชุดแท็บ เครื่องมือเพิ่ม/ลดแท็บ รายชื่อของแท็บต่างๆในชุด เครื่องมือเลื่อนลาดับแท็บ เลือกแท็บเริ่มต้นที่จะให้ แสดงเมื่อผู้ชมเปิดเว็บเพจ
- 8. 168 การเพิ่มเนื้อหาลงในแท็บสามารถทาได้ตามขั้นตอนดังนี้ 1. นาเมาส์คลิกที่ SpryTabbed Panels 2. นาเมาส์คลิกที่แท็บ Tab 1 จากนั้นทาการเปลี่ยนชื่อของแท็บให้สื่อกับเนื้อหาใน Content 1 3. เพิ่มเนื้อหาหรือรูปภาพลงในส่วนของ Content 1 คลิกปุ่ม ที่แท็บ Spry Tabbed Panels คลิกแล้วใส่ข้อความหรือ รูปภาพลงในแท็บแรก เปลี่ยนชื่อแท็บ
- 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 คลิกแล้วใส่เนื้อหา ของหัวข้อนี้ คลิก ของหัวข้อถัดไป แล้วตั้งชื่อและใส่เนื้อหา คลิกแล้วตั้งชื่อหัวข้อเรื่อง
- 11.
- 12. 172 สร้างกรอบแบบซ่อนได้ด้วย Spry CollapsiblePanel Collapsible Panel เป็นเครื่องมือที่ใช้สร้างกรอบคล้ายๆกับ accordion แต่ต่างกันตรงที่ Collapsible panel จะมีขนาดที่ยืดหยุ่นไปตามเนื้อหาและมีเพียงกรอบเดียว เราสามารถกาหนดสถานะเริ่มต้นให้เปิด กรอบหรือปิดกรอบไว้ก่อนได เหมาะกับเนื้อหาที่เป็นรายละเอียดเพิ่มเติมหรือเป็นทางเลือกให้ผู้ชมดูหรือไม่ ดูก็ได้ โดยสามารถทาได้ดังนี้ 1. นาเมาส์คลิกที่ Spry Collapsible Panels 2. นาเมาส์คลิกที่แท็บ Tab จากนั้นทาการเปลี่ยนชื่อของ Tab ให้สื่อกับเนื้อหาใน Content 3. ทาการใส่เนื้อหาลงในส่วนของ Content คุณสมบัติของ Collapsible Panel บน Properties Inspector ชื่อ Collapsible panel เลือกว่าจะให้เปิดหรือปิดกรอบ ขณะที่อยู่ใน Dreamwaever เลือกสถานะเริ่มต้นว่าจะเปิดหรือ ปิดกรอบเมื่อผู้ชมเข้ามาที่เว็บเพจ ให้แสดงเอฟเฟ็คต์การ เคลื่อนไหวขณะเปิด/ปิดกรอบ
- 13.