ต้องรู้
- ไปที่ Insert > Form > Form คลิกเส้นประสีแดงบนแบบฟอร์ม แล้วไปที่ Insert > Form > List/Menu เลือกตัวเลือกการเข้าถึง
- คลิกเมนูและเลือกคุณสมบัติ จากนั้นเลือก รายการค่า เพื่อเพิ่มรายการเมนูใหม่ คลิก เครื่องหมายบวก เพื่อเพิ่มรายการเพิ่มเติม
- เพิ่มค่าของรายการและเลือกรายการเริ่มต้น หากต้องการเพิ่มการดำเนินการ ให้ไป Insert > Form > Jump Menu เพิ่มรายการในเมนู Jump และบันทึก
Dreamweaver ทำให้การสร้างเมนูแบบเลื่อนลงสำหรับเว็บไซต์ของคุณเป็นเรื่องง่าย แต่เช่นเดียวกับแบบฟอร์ม HTML ทั้งหมด มันอาจจะยุ่งยากเล็กน้อย บทแนะนำนี้จะแนะนำคุณเกี่ยวกับขั้นตอนต่างๆ ในการสร้างเมนูแบบเลื่อนลงใน Dreamweaver
เมนู Jumpweaver Jump
Dreamweaver 8 ยังมีวิซาร์ดสำหรับสร้างเมนูข้ามสำหรับการนำทางในเว็บไซต์ของคุณ ต่างจากเมนูแบบเลื่อนลงพื้นฐาน เมนูนี้จะทำอะไรบางอย่างเมื่อคุณทำเสร็จแล้ว คุณไม่จำเป็นต้องเขียน JavaScript หรือ CGI เพื่อให้แบบฟอร์มแบบเลื่อนลงทำงาน บทช่วยสอนนี้ยังอธิบายวิธีใช้ตัวช่วยสร้าง Dreamweaver 8 เพื่อสร้างเมนูข้ามด้วย
ขั้นแรก สร้างแบบฟอร์ม
ยกเว้นตัวช่วยสร้างพิเศษ เช่น เมนูข้าม Dreamweaver ไม่ได้ช่วยให้คุณสร้างรูปแบบ HTML "ใช้งานได้" สำหรับสิ่งนี้ คุณต้องมี CGI หรือ JavaScript
เมื่อคุณเพิ่มเมนูดรอปดาวน์ลงในเว็บไซต์ของคุณ อย่างแรกที่คุณต้องมีคือแบบฟอร์มเพื่อล้อมรอบ ใน Dreamweaver ให้ไปที่เมนูแทรกแล้วคลิกแบบฟอร์ม จากนั้นเลือก "แบบฟอร์ม"
แสดงแบบฟอร์มในมุมมองการออกแบบ
Dreamweaver แสดงตำแหน่งแบบฟอร์มของคุณในมุมมองการออกแบบ คุณจึงรู้ว่าควรวางองค์ประกอบแบบฟอร์มไว้ที่ใด เนื่องจากแท็กเมนูแบบเลื่อนลงไม่ถูกต้อง (และจะไม่ทำงาน) นอกองค์ประกอบแบบฟอร์ม ดังที่คุณเห็นในภาพ แบบฟอร์มคือเส้นประสีแดงในมุมมองการออกแบบ
เลือกรายการ/เมนู
เมนูดรอปดาวน์เรียกว่า "รายการ" หรือ "เมนู" ใน Dreamweaver ดังนั้นหากต้องการเพิ่มแบบฟอร์ม คุณต้องไปที่เมนูแบบฟอร์มในเมนูแทรก แล้วเลือก "รายการ/เมนู" ตรวจสอบให้แน่ใจว่าเคอร์เซอร์ของคุณอยู่ภายในเส้นประสีแดงของกล่องแบบฟอร์มของคุณ
หน้าต่างตัวเลือกพิเศษ
ในตัวเลือก Dreamweaver จะมีหน้าจอสำหรับการเข้าถึง เมนูแบบเลื่อนลงของคุณจะเข้าถึงได้ง่ายกว่าเว็บไซต์อื่นๆ ในทันที หากคุณกรอกห้าตัวเลือกนี้
การเข้าถึงแบบฟอร์ม
ตัวเลือกการเข้าถึงคือ:
ฉลาก
ช่องป้ายกำกับแสดงเป็นข้อความข้างองค์ประกอบแบบฟอร์มของคุณ พิมพ์ชื่อเมนูที่ขยายลงมา. อาจเป็นคำถามหรือวลีสั้นๆ ที่เมนูแบบเลื่อนลงจะตอบ
สไตล์
HTML มีแท็กป้ายกำกับเพื่อระบุป้ายกำกับแบบฟอร์มของคุณไปยังเว็บเบราว์เซอร์ ตัวเลือกของคุณคือห่อเมนูแบบเลื่อนลงและข้อความป้ายกำกับด้วยแท็ก ใช้แอตทริบิวต์ "for" บนแท็กป้ายกำกับเพื่อระบุว่าแท็กรูปแบบใดอ้างอิง หรือไม่ใช้แท็กป้ายกำกับเลย
ตำแหน่ง
คุณสามารถติดป้ายกำกับก่อนหรือหลังเมนูแบบเลื่อนลง
คีย์การเข้าถึง
ผู้เข้าชมสามารถใช้คีย์การเข้าถึงกับ "รูปภาพ" หรือปุ่มตัวเลือกเพื่อไปยังช่องแบบฟอร์มนั้นโดยตรง แป้นพิมพ์ลัดนี้ทำให้แบบฟอร์มของคุณใช้งานง่ายมากโดยไม่ต้องใช้เมาส์ alt="
ดัชนีแท็บ
ดัชนีแท็บคือวิธีที่ผู้ใช้ควรเข้าถึงฟิลด์แบบฟอร์มเมื่อใช้แป้นพิมพ์เพื่อแท็บผ่านหน้าเว็บ
เมื่อคุณอัปเดตตัวเลือกการเข้าถึงแล้ว ให้คลิกตกลง
เลือกเมนู
เมื่อคุณแสดงเมนูแบบเลื่อนลงในมุมมองการออกแบบ Dreamweaver แล้ว คุณจะต้องเพิ่มองค์ประกอบต่างๆ ขั้นแรก เลือกเมนูแบบเลื่อนลงโดยคลิกที่มัน Dreamweaver จะใส่เส้นประอีกเส้นรอบเมนูแบบเลื่อนลงเพื่อแสดงว่าคุณได้เลือกมันแล้ว
คุณสมบัติของเมนู
เมนูคุณสมบัติจะเปลี่ยนเป็นคุณสมบัติรายการ/เมนูสำหรับเมนูแบบเลื่อนลงนั้น ที่นั่น คุณสามารถกำหนด ID ให้กับเมนูของคุณ (โดยที่ระบุว่า "เลือก") ตัดสินใจว่าคุณต้องการให้เป็นรายการหรือเมนู กำหนดคลาสสไตล์จากสไตล์ชีตของคุณ และกำหนดค่าให้กับเมนูแบบเลื่อนลง
รายการกับเมนูต่างกันอย่างไร
Dreamweaver เรียกเมนูแบบเลื่อนลงเมนูแบบเลื่อนลงที่อนุญาตให้เลือกได้เพียงรายการเดียวเท่านั้น "รายการ" ให้หลายตัวเลือกในรายการแบบเลื่อนลงและสามารถมีได้มากกว่าหนึ่งรายการ
หากคุณต้องการให้เมนูดรอปดาวน์สูงหลายบรรทัด ให้เปลี่ยนเป็นประเภท "รายการ" และไม่ต้องกาช่อง "การเลือก"
เพิ่มรายการใหม่
หากต้องการเพิ่มรายการใหม่ให้กับเมนูของคุณ ให้คลิกที่ปุ่ม "รายการค่า…" ซึ่งจะเปิดหน้าต่างด้านบนขึ้นมา จากนั้นพิมพ์ป้ายกำกับรายการของคุณในช่องแรก มันจะแสดงบนหน้า
เพิ่มและจัดลำดับใหม่
คลิกที่ไอคอนบวกเพื่อเพิ่มรายการเพิ่มเติม หากคุณต้องการเรียงลำดับใหม่ในกล่องรายการ ให้ใช้ลูกศรขึ้นและลงทางด้านขวา
ให้ทุกรายการมีค่า
ถ้าคุณปล่อยค่าว่างไว้ ป้ายกำกับจะไปที่แบบฟอร์ม แต่คุณสามารถกำหนดค่าไอเท็มทั้งหมดของคุณ - เพื่อส่งข้อมูลอื่นไปยังแบบฟอร์มของคุณ คุณจะใช้สิ่งนี้เป็นจำนวนมากสำหรับสิ่งต่างๆ เช่น เมนูข้ามและไฮเปอร์ลิงก์
เลือกค่าเริ่มต้น
หน้าเว็บเริ่มต้นที่จะแสดงรายการแบบหล่นลงใด ๆ ที่ระบุไว้ก่อนเป็นรายการเริ่มต้น แต่ถ้าคุณต้องการเลือกรายการอื่น ให้ไฮไลต์ในกล่อง "เลือกเริ่มต้น" บนเมนูคุณสมบัติ
ดูรายการของคุณในมุมมองการออกแบบ
เมื่อคุณแก้ไขคุณสมบัติเสร็จแล้ว Dreamweaver จะแสดงรายการดรอปดาวน์ของคุณโดยเลือกค่าเริ่มต้นไว้
ดูรายการของคุณในมุมมองโค้ด
หากคุณเปลี่ยนไปใช้มุมมองโค้ด คุณจะเห็นว่า Dreamweaver เพิ่มเมนูแบบเลื่อนลงด้วยโค้ดที่สะอาด คุณลักษณะพิเศษเพียงอย่างเดียวคือตัวเลือกการช่วยสำหรับการเข้าถึง รหัสมีการเยื้องทั้งหมดและอ่านและเข้าใจง่ายมาก
บันทึกและดูในเบราว์เซอร์
หากคุณบันทึกเอกสารและดูในเว็บเบราว์เซอร์ คุณจะเห็นว่าเมนูแบบเลื่อนลงของคุณดูเหมือนกับที่คุณคาดหวัง
แต่มันไม่ช่วยอะไร…
เมนูที่เราสร้างด้านบนนั้นดูดี แต่ไม่ได้ทำอะไรเลย คุณต้องตั้งค่าการดำเนินการของแบบฟอร์มในแบบฟอร์มเพื่อให้ทำงานบางอย่างได้
โชคดีที่ Dreamweaver มีเมนูแบบเลื่อนลงในตัวซึ่งคุณสามารถใช้งานได้ทันทีบนไซต์ของคุณโดยไม่จำเป็นต้องเรียนรู้เกี่ยวกับแบบฟอร์ม, CGI หรือสคริปต์ เรียกว่า Jump Menu
เมนูกระโดดของ Dreamweaver จะสร้างเมนูแบบเลื่อนลงพร้อมชื่อและ URL จากนั้น คุณสามารถเลือกรายการในเมนู และหน้าเว็บจะย้ายไปยังตำแหน่งนั้น เหมือนกับว่าคุณได้คลิกลิงก์
ไปที่เมนูแทรกแล้วเลือกแบบฟอร์มแล้วเลือกเมนูข้าม
หน้าต่างเมนูกระโดด
ไม่เหมือนกับเมนูดรอปดาวน์มาตรฐาน เมนู Jump จะเปิดหน้าต่างใหม่เพื่อให้คุณตั้งชื่อรายการเมนูและเพิ่มรายละเอียดเกี่ยวกับวิธีการทำงานของแบบฟอร์ม
สำหรับรายการแรก ให้เปลี่ยนข้อความ "un titled1" เป็นสิ่งที่คุณต้องการให้อ่านและเพิ่ม URL
เพิ่มรายการในเมนูกระโดดของคุณ
คลิกที่เพิ่มรายการเพื่อเพิ่มรายการใหม่ในเมนูข้ามของคุณ เพิ่มรายการได้มากเท่าที่คุณต้องการ
ตัวเลือกเมนูกระโดด
เมื่อคุณเพิ่มลิงก์ทั้งหมดที่ต้องการแล้ว คุณควรเลือกตัวเลือกของคุณ:
เปิด URL ใน
ถ้าคุณมีเฟรมเซ็ต คุณสามารถเปิดลิงก์ในเฟรมอื่นได้ หรือคุณสามารถเปลี่ยนตัวเลือกของหน้าต่างหลักเป็นเป้าหมายพิเศษเพื่อให้ URL นั้นเปิดขึ้นในหน้าต่างใหม่หรือที่อื่นได้
ชื่อเมนู
ให้เมนูของคุณ ID ที่ไม่ซ้ำกันสำหรับหน้า จำเป็นเพื่อให้สคริปต์ทำงานได้อย่างถูกต้อง นอกจากนี้ยังช่วยให้คุณมีเมนูข้ามหลายรายการในรูปแบบเดียว - ตั้งชื่อที่แตกต่างกันทั้งหมด
ใส่ปุ่ม Go หลังเมนู
ฉันชอบเลือกสิ่งนี้เพราะบางครั้งสคริปต์ไม่ทำงานเมื่อเมนูเปลี่ยนไป นอกจากนี้ยังสามารถเข้าถึงได้มากขึ้น
เลือกรายการแรกหลังจากเปลี่ยน URL
เลือกตัวเลือกนี้หากคุณได้รับข้อความแจ้ง เช่น "เลือกหนึ่งรายการ" เป็นรายการเมนูแรก เพื่อให้แน่ใจว่ารายการนั้นเป็นค่าเริ่มต้นบนหน้า
มุมมองการออกแบบเมนูข้าม
เช่นเดียวกับเมนูแรกของคุณ Dreamweaver ตั้งค่าเมนูกระโดดของคุณในมุมมองการออกแบบโดยมองเห็นรายการเริ่มต้น จากนั้นคุณสามารถแก้ไขเมนูแบบเลื่อนลงได้เหมือนกับที่ทำอย่างอื่น
หากคุณแก้ไข อย่าลืมเปลี่ยนรหัสในรายการ มิฉะนั้น สคริปต์อาจไม่ทำงาน
ข้ามเมนูในเบราว์เซอร์
การบันทึกไฟล์และกด F12 จะแสดงหน้าในเบราว์เซอร์ที่คุณต้องการ คุณสามารถเลือกตัวเลือก คลิก "ไป" และเมนูข้ามจะทำงาน