วิธีสร้างเมนูแบบเลื่อนลงใน Dreamweaver

Dreamweaver ทำให้ง่ายต่อการสร้างเมนูแบบเลื่อนลงสำหรับเว็บไซต์ของคุณ แต่เช่นรูปแบบ HTML ทั้งหมดพวกเขาสามารถเป็นบิตหากิน บทแนะนำนี้จะแนะนำขั้นตอนในการสร้างเมนูแบบเลื่อนลงใน Dreamweaver

เมนูข้าม Dreamweaver

Dreamweaver 8 ยังมีวิซาร์ดเพื่อสร้างเมนูแบบกระโดดสำหรับการนำทางในเว็บไซต์ของคุณ เมนูแบบเลื่อนลงพื้นฐานนี้จะทำอะไรเมื่อคุณทำเสร็จแล้ว คุณจะไม่ต้องเขียน JavaScript หรือ CGI เพื่อให้ได้แบบฟอร์มแบบหล่นลงเพื่อใช้งาน บทแนะนำนี้อธิบายถึงวิธีใช้ตัวช่วยสร้าง Dreamweaver 8 เพื่อสร้างเมนูกระโดด

01 จาก 20

สร้างฟอร์มก่อน

หมายเหตุสำคัญเกี่ยวกับฟอร์ม HTML และ Dreamweaver:

ยกเว้นสำหรับพ่อมดพิเศษเช่นเมนูแบบเลื่อนลง Dreamweaver ไม่ได้ช่วยให้คุณสามารถสร้างแบบฟอร์ม HTML ได้ "ทำงาน" สำหรับสิ่งนี้คุณต้องมี CGI หรือ JavaScript โปรดดูบทแนะนำของฉันการทำแบบฟอร์ม HTML ทำงานสำหรับข้อมูลเพิ่มเติม

เมื่อคุณเพิ่มเมนูแบบเลื่อนลงลงในเว็บไซต์ของคุณสิ่งแรกที่คุณต้องการก็คือรูปแบบที่ล้อมรอบ ใน Dreamweaver ให้ไปที่เมนูแทรกแล้วคลิกแบบฟอร์มจากนั้นเลือก "แบบฟอร์ม"

02 จาก 20

การแสดงฟอร์มในมุมมองการออกแบบ

Dreamweaver แสดงตำแหน่งรูปแบบของคุณในมุมมองการออกแบบเพื่อให้คุณทราบตำแหน่งที่จะวางองค์ประกอบของฟอร์ม นี่เป็นเรื่องสำคัญเนื่องจากแท็กเมนูแบบเลื่อนลงไม่ถูกต้อง (และจะไม่ทำงาน) ด้านนอกขององค์ประกอบแบบฟอร์ม ดังที่คุณเห็นในรูปภาพรูปแบบคือเส้นประสีแดงในมุมมองการออกแบบ

03 จาก 20

เลือกรายการ / เมนู

เมนูแบบเลื่อนลงเรียกว่ารายการ "list" หรือ "menu" ใน Dreamweaver คุณต้องเข้าไปที่เมนูแบบฟอร์มในเมนูแทรกและเลือก "รายการ / เมนู" ตรวจสอบให้แน่ใจว่าเคอร์เซอร์อยู่ภายในเส้นประสีแดงของกล่องแบบฟอร์ม

04 จาก 20

หน้าต่างตัวเลือกพิเศษ

ในตัวเลือก Dreamweaver มีหน้าจอสำหรับการเข้าถึง ฉันเลือกที่จะให้ Dreamweaver แสดงคุณลักษณะการเข้าถึงทั้งหมด และหน้าจอนี้เป็นผลมาจากที่ แบบฟอร์มเป็นสถานที่ที่หลายเว็บไซต์หล่นลงในการเข้าถึงและโดยกรอกห้าตัวเลือกเหล่านี้เมนูแบบเลื่อนลงของคุณจะสามารถเข้าถึงได้ทันที

05 จาก 20

การเข้าถึงฟอร์ม

ตัวเลือกการเข้าถึงคือ:

ฉลาก

นี่คือชื่อของฟิลด์ จะปรากฏเป็นข้อความข้างๆองค์ประกอบของฟอร์ม
เขียนสิ่งที่คุณต้องการเรียกเมนูแบบเลื่อนลง นี่อาจเป็นคำถามหรือวลีสั้น ๆ ที่เมนูแบบเลื่อนลงจะตอบ

สไตล์

HTML มีแท็กป้ายกำกับเพื่อระบุป้ายกำกับฟอร์มของคุณไปยังเบราเซอร์ ตัวเลือกของคุณคือการห่อเมนูแบบเลื่อนลงและข้อความป้ายกำกับพร้อมกับแท็กเพื่อใช้แอตทริบิวต์ "for" บนแท็กป้ายกำกับเพื่อระบุแท็กรูปแบบที่อ้างอิงหรือไม่ใช้แท็กป้ายกำกับเลย
ฉันต้องการใช้แอตทริบิวต์ for เนื่องจากต้องย้ายป้ายกำกับเนื่องจากเหตุผลบางอย่างจะยังคงแนบอยู่กับฟิลด์ฟอร์มที่ถูกต้อง

ตำแหน่ง

คุณสามารถวางป้ายกำกับก่อนหรือหลังเมนูแบบเลื่อนลงได้

คีย์การเข้าถึง

นี่คือคีย์ที่สามารถใช้ได้พร้อมกับปุ่ม Alt หรือ Option เพื่อรับโดยตรงไปยังฟิลด์แบบฟอร์มนั้น ทำให้รูปแบบของคุณง่ายมากที่จะใช้โดยไม่จำเป็นต้องใช้เมาส์ วิธีตั้งค่าคีย์การเข้าถึงใน HTML

Tab Index

นี่คือลำดับที่ฟิลด์ของฟอร์มควรเข้าถึงเมื่อใช้แป้นพิมพ์กับแท็บผ่านทางเว็บเพจ การทำความเข้าใจ Tabindex

เมื่อคุณอัปเดตตัวเลือกการเข้าถึงของคุณแล้วคลิกตกลง

06 จาก 20

เลือกเมนู

เมื่อคุณมีเมนูแบบเลื่อนลงที่แสดงในมุมมองการออกแบบคุณจำเป็นต้องเพิ่มองค์ประกอบต่างๆลงไป เลือกเมนูแบบเลื่อนลงก่อนโดยคลิกที่เมนู Dreamweaver จะวางเส้นอีกจุดไว้รอบ ๆ เมนูแบบเลื่อนลงเพื่อแสดงว่าคุณได้เลือกไว้แล้ว

07 จาก 20

คุณสมบัติเมนู

เมนูคุณสมบัติจะเปลี่ยนเป็นรายการ / คุณสมบัติเมนูสำหรับเมนูแบบเลื่อนลงที่ คุณสามารถให้รหัสประจำตัวของคุณ (ระบุว่า "เลือก") เพื่อตัดสินใจว่าคุณต้องการให้เป็นเมนูหรือทำให้เป็นชั้นสไตล์จากสไตล์ชีตของคุณและกำหนดค่าให้กับเมนูแบบเลื่อนลง

ความแตกต่างระหว่างรายการกับเมนูคืออะไร?

Dreamweaver เรียกเมนูแบบเลื่อนลงเมนูใด ๆ ที่เลือกได้เพียงอย่างเดียวเท่านั้น "รายการ" ให้เลือกหลายรายการในรายการแบบเลื่อนลงและสามารถมีได้มากกว่าหนึ่งรายการ

ถ้าคุณต้องการให้เมนูแบบเลื่อนลงมีหลายบรรทัดให้เปลี่ยนเป็นประเภท "รายการ" และปล่อยให้กล่อง "การเลือก" ไม่ได้เลือก

08 จาก 20

เพิ่มรายการใหม่

หากต้องการเพิ่มรายการใหม่ลงในเมนูของคุณให้คลิกที่ปุ่ม "รายการค่า ... " ซึ่งจะเป็นการเปิดหน้าต่างข้างต้น พิมพ์ฉลากสินค้าในช่องแรก นี่คือสิ่งที่จะแสดงบนหน้าเว็บ ถ้าคุณปล่อยให้ค่าว่างเปล่านี่คือสิ่งที่จะถูกส่งไปในแบบฟอร์ม

09 จาก 20

เพิ่มและจัดเรียงใหม่

คลิกไอคอนบวกเพื่อเพิ่มรายการอื่น ๆ หากต้องการสั่งซื้อใหม่ในกล่องรายการให้ใช้ลูกศรขึ้นและลงที่ด้านขวา

10 จาก 20

ให้มูลค่าทั้งหมด

ดังที่ได้กล่าวไว้ในขั้นตอนที่ 8 ถ้าคุณปล่อยให้ค่าว่างเปล่าฉลากจะถูกส่งไปที่แบบฟอร์ม แต่คุณสามารถให้ค่าทั้งหมดของคุณ - เพื่อส่งข้อมูลอื่นไปยังแบบฟอร์มของคุณ คุณจะใช้สิ่งนี้กับเมนูกระโดดมาก

11 จาก 20

เลือกค่าเริ่มต้น

เว็บเพจที่เป็นค่าเริ่มต้นในการแสดงรายการแบบเลื่อนลงจะปรากฏเป็นรายการเริ่มต้น แต่ถ้าคุณต้องการเลือกที่แตกต่างกันให้ไฮไลต์ในช่อง "เลือกครั้งแรก" ในเมนูคุณสมบัติ

12 จาก 20

ดูรายการของคุณในมุมมองออกแบบ

เมื่อคุณแก้ไขคุณสมบัติแล้ว Dreamweaver จะแสดงรายการแบบเลื่อนลงโดยเลือกค่าเริ่มต้นไว้

13 จาก 20

ดูรายการของคุณในมุมมองโค้ด

หากคุณเปลี่ยนเป็นมุมมองโค้ดคุณจะเห็นว่า Dreamweaver เพิ่มเมนูแบบหล่นลงของคุณด้วยรหัสที่สะอาดมาก เฉพาะคุณลักษณะพิเศษเท่านั้นที่เราเพิ่มด้วยตัวเลือกการเข้าถึง รหัสนี้เว้นไว้ทั้งหมดและอ่านและทำความเข้าใจได้ง่ายมาก แม้จะใส่แอตทริบิวต์ = "selected" ที่เลือกไว้เพราะฉันได้บอก Dreamweaver ว่าฉันเริ่มต้นเขียน XHTML

14 จาก 20

บันทึกและดูในเบราเซอร์

หากคุณบันทึกเอกสารและดูในเว็บเบราเซอร์คุณจะเห็นว่าเมนูแบบเลื่อนลงมีลักษณะเหมือนกับที่คุณคาดหวัง

15 จาก 20

แต่ไม่ได้ทำอะไร

เมนูที่เราสร้างขึ้นด้านบนดูดี แต่ก็ไม่ได้ทำอะไร เพื่อที่จะให้ทำอะไรบางอย่างคุณต้องตั้งค่าการดำเนินการแบบฟอร์มบนฟอร์มเองซึ่งเป็นบทแนะนำอย่างสมบูรณ์แบบ

โชคดีที่ Dreamweaver มีเมนูเมนูแบบเลื่อนลงซึ่งคุณสามารถใช้งานได้ทันทีบนไซต์ของคุณโดยไม่จำเป็นต้องเรียนรู้เกี่ยวกับรูปแบบ CGIs หรือการเขียนสคริปต์ เรียกว่า Jump Menu

เมนูทางลัดของ Dreamweaver จะตั้งค่าเมนูแบบเลื่อนลงที่มีชื่อและ URL จากนั้นคุณสามารถเลือกรายการในเมนูและเว็บเพจจะย้ายไปยังตำแหน่งดังกล่าวเช่นเดียวกับเมื่อคุณคลิกลิงก์

ไปที่เมนูแทรกและเลือกแบบฟอร์มแล้วไปที่เมนูข้าม

16 จาก 20

หน้าต่างเมนูข้าม

เมนูแบบเลื่อนลงจะไม่เหมือนเมนูแบบเลื่อนลงมาตรฐานเมนูเปิดจะเปิดหน้าต่างใหม่เพื่อให้คุณตั้งชื่อรายการเมนูและเพิ่มรายละเอียดเกี่ยวกับรูปแบบที่ควรใช้

สำหรับรายการแรกให้เปลี่ยนข้อความ "untitled1" เป็นสิ่งที่คุณต้องการให้อ่านและเพิ่ม URL ที่ลิงก์ควรไปที่

17 จาก 20

เพิ่มรายการไปยังเมนูข้ามของคุณ

คลิกที่รายการเพิ่มเพื่อเพิ่มรายการใหม่ลงในเมนูกระโดดของคุณ เพิ่มรายการได้มากเท่าที่คุณต้องการ

18 จาก 20

ตัวเลือกเมนูข้าม

เมื่อเพิ่มลิงก์ทั้งหมดที่ต้องการแล้วคุณควรเลือกตัวเลือก:

เปิด URL ใน

หากคุณมีเฟรมเซตคุณสามารถเปิดลิงก์ในเฟรมอื่นได้ หรือคุณสามารถเปลี่ยนตัวเลือกของหน้าต่างหลักเป็นเป้าหมายพิเศษเพื่อให้ URL จะเปิดขึ้นในหน้าต่างใหม่หรือที่อื่น

ชื่อเมนู

ระบุเมนูของคุณให้กับ ID ของเพจ จำเป็นเพื่อให้สคริปต์ทำงานได้อย่างถูกต้อง นอกจากนี้ยังช่วยให้คุณมีเมนูกระโดดได้หลายแบบในแบบฟอร์มเพียงระบุชื่อที่แตกต่างกันทั้งหมด

แทรกปุ่ม Go หลังจากเมนู

ฉันชอบที่จะเลือกสิ่งนี้เพราะบางครั้งสคริปต์ไม่ทำงานเมื่อมีการเปลี่ยนแปลงเมนู นอกจากนี้ยังสามารถเข้าถึงได้มากขึ้น

เลือกรายการแรกหลังจากเปลี่ยน URL

เลือกตัวเลือกนี้หากคุณมีพรอมต์เช่น "เลือกหนึ่ง" เป็นรายการเมนูแรก การทำเช่นนี้จะทำให้มั่นใจได้ว่ารายการนั้นจะเป็นค่าเริ่มต้นบนหน้า

19 จาก 20

มุมมองออกแบบเมนูกระโดด

เช่นเดียวกับในเมนูแรกของคุณ Dreamweaver จะตั้งค่าเมนูกระโดดของคุณในมุมมองการออกแบบโดยมองเห็นรายการเริ่มต้น จากนั้นคุณสามารถแก้ไขเมนูแบบเลื่อนลงได้เช่นเดียวกับที่อื่น ๆ

หากคุณแก้ไขให้ตรวจสอบว่าไม่ได้เปลี่ยนรหัสใด ๆ ในรายการมิเช่นนั้นสคริปต์อาจไม่ทำงาน

20 จาก 20

เมนูข้ามในเบราเซอร์

การบันทึกไฟล์และการกดปุ่ม F12 จะแสดงหน้าเว็บในเบราว์เซอร์ที่คุณต้องการ ที่นั่นคุณสามารถเลือกตัวเลือกให้คลิก "ไป" และเมนูกระโดดทำงานได้!