Πώς να δημιουργήσετε ένα μενού μετακίνησης στο Dreamweaver

Μπορείτε να τοποθετήσετε την ετικέτα σας πριν ή μετά το αναπτυσσόμενο μενού.

Κλειδί πρόσβασης

Αυτό είναι το κλειδί που μπορείτε να χρησιμοποιήσετε μαζί με τα πλήκτρα Alt ή Option για να μεταβείτε απευθείας σε αυτό το πεδίο φόρμας. Αυτό κάνει τις φόρμες σας πολύ εύκολο στη χρήση χωρίς να χρειάζεται ποντίκι.

Ευρετήριο καρτελών

Αυτή είναι η σειρά με την οποία πρέπει να αποκτήσετε πρόσβαση στο πεδίο φόρμας όταν χρησιμοποιείτε το πληκτρολόγιο για την καρτέλα μέσω της ιστοσελίδας.

Όταν ενημερώσετε τις επιλογές προσβασιμότητας, κάντε κλικ στο OK.

Επιλέξτε το Μενού

Μόλις εμφανιστεί το αναπτυσσόμενο μενού στην προβολή σχεδίασης του Dreamweaver, θα πρέπει να προσθέσετε τα διάφορα στοιχεία σε αυτό. Πρώτα επιλέξτε το αναπτυσσόμενο μενού κάνοντας κλικ πάνω του. Το Dreamweaver θα βάλει μια άλλη διακεκομμένη γραμμή γύρω από το αναπτυσσόμενο μενού, για να δείξει ότι το έχετε επιλέξει.

Ιδιότητες μενού

Το μενού ιδιοτήτων θα αλλάξει στις ιδιότητες λίστας / μενού για αυτό το αναπτυσσόμενο μενού. Εκεί μπορείτε να δώσετε στο μενού σας ένα αναγνωριστικό (όπου λέει "επιλέξτε"), να αποφασίσετε αν θέλετε να είναι lis ή μενού, να του δώσετε μια κλάση στυλ από το φύλλο στυλ σας και να αντιστοιχίσετε τιμές στο αναπτυσσόμενο μενού.

Ποια είναι η διαφορά μεταξύ της λίστας και του μενού;

Το Dreamweaver καλεί ένα αναπτυσσόμενο μενού από κάθε αναπτυσσόμενο μενού που επιτρέπει μόνο μία επιλογή. Μια "λίστα" επιτρέπει πολλαπλές επιλογές στο αναπτυσσόμενο μενού και μπορεί να είναι πάνω από ένα στοιχείο υψηλό.

Αν θέλετε ένα αναπτυσσόμενο μενού να είναι πολλαπλάσιες γραμμές, αλλάξτε τον σε έναν τύπο "λίστας" και αφήστε το πεδίο "επιλογές" ανεξέλεγκτο.

Προσθήκη στοιχείων νέας λίστας

Για να προσθέσετε νέα στοιχεία στο μενού σας, κάντε κλικ στο κουμπί "Λίστα τιμών …". Αυτό θα ανοίξει το παραπάνω παράθυρο. Πληκτρολογήστε την ετικέτα του στοιχείου σας στο πρώτο πλαίσιο. Αυτό θα εμφανιστεί στη σελίδα. Εάν αφήσετε την τιμή κενή, αυτό θα είναι και αυτό που θα σταλεί στη φόρμα.

Προσθήκη περισσότερων και αναδιάταξη

Κάντε κλικ στο εικονίδιο συν για να προσθέσετε περισσότερα στοιχεία. Αν θέλετε να τα παραγγείλετε ξανά στο πλαίσιο λίστας, χρησιμοποιήστε τα επάνω και κάτω βέλη στα δεξιά.

Δώστε τις τιμές όλων των αντικειμένων

Όπως ανέφερα στο βήμα 8, αν αφήσετε την τιμή κενή, η ετικέτα θα σταλεί στη φόρμα. Αλλά μπορείτε να δώσετε όλες τις τιμές των στοιχείων σας - για να στείλετε εναλλακτικές πληροφορίες στη φόρμα σας. Θα χρησιμοποιήσετε αυτό πολλά για πράγματα όπως μενού άλματος και υπερσύνδεση.

Επιλέξτε μια προεπιλογή

Οι προεπιλεγμένες ιστοσελίδες για την εμφάνιση του στοιχείου που εμφανίζεται ως προεπιλεγμένο στοιχείο. Εάν όμως θέλετε να επιλέξετε διαφορετικό, επισημάνετε το στο "Αρχικά επιλεγμένο" πλαίσιο στο μενού Ιδιότητες.

Δείτε τη λίστα σας στην προβολή σχεδίασης

Μόλις ολοκληρώσετε την επεξεργασία των ιδιοτήτων, το Dreamweaver θα εμφανίσει την αναπτυσσόμενη λίστα σας με την προεπιλεγμένη τιμή που έχετε επιλέξει.

Δείτε τη λίστα σας στην προβολή κώδικα

Αν μεταβείτε στην προβολή κώδικα, μπορείτε να δείτε ότι το Dreamweaver προσθέτει το αναπτυσσόμενο μενού σας με πολύ καθαρό κώδικα. Τα μοναδικά επιπλέον χαρακτηριστικά είναι αυτά που προσθέσαμε με επιλογές προσβασιμότητας. Ο κώδικας είναι ολόγραμμα και είναι πολύ εύκολο να το διαβάσεις και να καταλάβεις. Καταχωρεί ακόμη και το επιλεγμένο = "επιλεγμένο" χαρακτηριστικό επειδή έχω πει στο Dreamweaver ότι προεπιλογής γράφω το XHTML.

Αποθήκευση και προβολή σε πρόγραμμα περιήγησης

Εάν αποθηκεύσετε το έγγραφο και το προβάλετε σε ένα πρόγραμμα περιήγησης στο Web, μπορείτε να δείτε ότι το αναπτυσσόμενο μενού σας μοιάζει με αυτό που θα το περιμένατε.

Αλλά δεν κάνει τίποτα …

Το μενού που δημιουργήσαμε παραπάνω φαίνεται καλό, αλλά δεν κάνει τίποτα. Για να το κάνετε κάτι, πρέπει να δημιουργήσετε μια ενέργεια φόρμας στην ίδια τη φόρμα.

Ευτυχώς, το Dreamweaver διαθέτει ενσωματωμένη μορφή drop-down μενού που μπορείτε να χρησιμοποιήσετε αμέσως στον ιστότοπό σας χωρίς να χρειάζεται να μάθετε για φόρμες, CGI ή δέσμες ενεργειών. Ονομάζεται Μενού Μετάβασης.

Το μενού Μετάβαση Dreamweaver δημιουργεί ένα αναπτυσσόμενο μενού με ονόματα και διευθύνσεις URL. Στη συνέχεια, μπορείτε να επιλέξετε ένα στοιχείο από το μενού και η ιστοσελίδα θα μετακινηθεί σε εκείνη τη θέση, ακριβώς σαν να είχατε κάνει κλικ σε ένα σύνδεσμο.

Μεταβείτε στο μενού Εισαγωγή και επιλέξτε Μορφή και, στη συνέχεια, Μετάβαση μενού.

Παράθυρο μενού μενού

Σε αντίθεση με το τυπικό αναπτυσσόμενο μενού, το μενού Jump ανοίγει ένα νέο παράθυρο για να ονομάσετε τα στοιχεία του μενού σας και να προσθέσετε λεπτομέρειες σχετικά με τον τρόπο με τον οποίο πρέπει να λειτουργήσει η φόρμα.

Για το πρώτο στοιχείο, αλλάξτε το κείμενο "untitled1" σε αυτό που θέλετε να το διαβάσετε και προσθέστε μια διεύθυνση URL στην οποία πρέπει να μεταβεί ο συγκεκριμένος σύνδεσμος.

Προσθέστε τα στοιχεία στο μενού μετάβασης

Κάντε κλικ στο στοιχείο προσθήκης για να προσθέσετε ένα νέο στοιχείο στο μενού μετάβασης. Προσθέστε όσα στοιχεία επιθυμείτε.

Επιλογές μενού μεταπήδησης

Μόλις προσθέσετε όλους τους συνδέσμους που θέλετε, θα πρέπει να επιλέξετε τις επιλογές σας:

Ανοίξτε τις διευθύνσεις URL στο

Αν έχετε ένα σύνολο πλαισίων, μπορείτε να ανοίξετε τους συνδέσμους σε διαφορετικό πλαίσιο. Ή μπορείτε να αλλάξετε την επιλογή του Κύριου παραθύρου σε έναν ειδικό στόχο, έτσι ώστε η διεύθυνση URL να ανοίγει σε ένα νέο παράθυρο ή αλλού.

Όνομα μενού

Δώστε στο μενού σας ένα μοναδικό αναγνωριστικό για τη σελίδα. Αυτό απαιτείται, ώστε το σενάριο να λειτουργεί σωστά. Σας επιτρέπει επίσης να έχετε πολλαπλά μενού άλμα σε μια μορφή - απλά δώστε τους όλα τα διαφορετικά ονόματα.

Εισαγωγή κουμπιού μετά από το μενού

Μου αρέσει να το επιλέγω επειδή μερικές φορές το σενάριο δεν λειτουργεί όταν αλλάζει το μενού. Είναι επίσης πιο προσιτό.

Επιλέξτε το πρώτο στοιχείο μετά την αλλαγή διεύθυνσης URL

Επιλέξτε αυτό, αν έχετε ως ερώτημα "Επιλέξτε ένα" ως το πρώτο στοιχείο του μενού. Αυτό θα διασφαλίσει ότι το συγκεκριμένο στοιχείο παραμένει προεπιλεγμένο στη σελίδα.

Προβολή σχεδίασης μενού μενού

Όπως ακριβώς και με το πρώτο σας μενού, το Dreamweaver δημιουργεί το μενού άλματος στην προβολή σχεδίασης με το προεπιλεγμένο στοιχείο ορατό. Στη συνέχεια, μπορείτε να επεξεργαστείτε το αναπτυσσόμενο μενού όπως θα κάνατε άλλο.

Αν το επεξεργαστείτε, βεβαιωθείτε ότι δεν έχετε αλλάξει τα αναγνωριστικά στα στοιχεία, διαφορετικά μπορεί να μην λειτουργήσει το σενάριο.

Μετάβαση μενού στο πρόγραμμα περιήγησης

Εάν αποθηκεύσετε το αρχείο και πατήσετε το F12, θα εμφανιστεί η σελίδα στο προτιμώμενο πρόγραμμα περιήγησης. Εκεί μπορείτε να επιλέξετε μια επιλογή, κάντε κλικ στο "Go" και το μενού άλματος λειτουργεί!