Το Dreamweaver διευκολύνει τη δημιουργία αναπτυσσόμενων μενού για τον ιστότοπό σας. Αλλά όπως όλες οι φόρμες HTML, μπορεί να είναι λίγο περίπλοκες. Αυτό το σεμινάριο θα σας καθοδηγήσει στα βήματα για τη δημιουργία ενός αναπτυσσόμενου μενού στο Dreamweaver.
Μενού Dreamweaver Jump
Το Dreamweaver 8 παρέχει επίσης έναν οδηγό για τη δημιουργία ενός άλματος μενού για πλοήγηση στον ιστότοπό σας. Σε αντίθεση με τα βασικά αναπτυσσόμενα μενού, αυτό το μενού θα κάνει κάτι όταν τελειώσετε. Δεν θα χρειαστεί να γράψετε JavaScript ή CGI για να λειτουργήσει η αναπτυσσόμενη φόρμα. Αυτό το σεμινάριο εξηγεί επίσης πώς να χρησιμοποιήσετε τον οδηγό Dreamweaver 8 για να δημιουργήσετε ένα άλμα μενού.
Αρχικά, Δημιουργήστε τη φόρμα
Εκτός από ειδικούς μάγους όπως το άλμα μενού, το Dreamweaver δεν σας βοηθά να κάνετε τις φόρμες HTML «να λειτουργούν». Για αυτό, χρειάζεστε CGI ή JavaScript. Όταν προσθέτετε ένα αναπτυσσόμενο μενού στον ιστότοπό σας, το πρώτο πράγμα που χρειάζεστε είναι μια φόρμα για να την περιβάλλετε. Στο Dreamweaver, μεταβείτε στο μενού Εισαγωγή και κάντε κλικ στη φόρμα και, στη συνέχεια, επιλέξτε «Φόρμα».
Εμφανίζει φόρμα σε προβολή σχεδίασης
Το Dreamweaver εμφανίζει οπτικά τη θέση της φόρμας σας στην προβολή σχεδίασης, οπότε ξέρετε πού να τοποθετήσετε τα στοιχεία της φόρμας σας επειδή οι ετικέτες του αναπτυσσόμενου μενού δεν είναι έγκυρες (και δεν θα λειτουργούν) εκτός του στοιχείου φόρμας. Όπως μπορείτε να δείτε στην εικόνα, η φόρμα είναι η κόκκινη κουκκίδα στη σχεδίαση.
Επιλέξτε Λίστα / Μενού
Τα αναπτυσσόμενα μενού ονομάζονται στοιχεία «list» ή «menu» στο Dreamweaver. Έτσι, για να προσθέσετε ένα στη φόρμα σας, πρέπει να μεταβείτε στο μενού Φόρμα στο μενού Εισαγωγή και να επιλέξετε «Λίστα / Μενού». Βεβαιωθείτε ότι ο δρομέας σας βρισκόταν εντός της κόκκινης διάστικτης γραμμής του πλαισίου φόρμας.
Παράθυρο Ειδικών Επιλογών
Στις επιλογές του Dreamweaver, υπάρχει μια οθόνη για την προσβασιμότητα. Τα αναπτυσσόμενα μενού σας θα είναι άμεσα πιο προσβάσιμα από άλλους ιστότοπους, εάν συμπληρώσετε αυτές τις πέντε επιλογές.
Προσβασιμότητα στη φόρμα
Οι επιλογές προσβασιμότητας είναι:
Επιγραφή
Το πεδίο ετικέτας εμφανίζεται ως κείμενο δίπλα στο στοιχείο φόρμας. Πληκτρολογήστε ένα όνομα για το αναπτυσσόμενο μενού. Μπορεί να είναι μια ερώτηση ή μια σύντομη φράση που θα απαντήσει στο αναπτυσσόμενο μενού.
Στυλ
Το HTML περιλαμβάνει μια ετικέτα ετικέτας για την αναγνώριση των ετικετών φόρμας στο πρόγραμμα περιήγησης ιστού. Οι επιλογές σας είναι να τυλίξετε το αναπτυσσόμενο μενού και το κείμενο της ετικέτας με την ετικέτα, να χρησιμοποιήσετε το χαρακτηριστικό «για» στην ετικέτα ετικέτας για να προσδιορίσετε ποια ετικέτα φόρμας αναφέρεται ή να μην χρησιμοποιήσετε καθόλου την ετικέτα ετικέτας.
Θέση
Μπορείτε να τοποθετήσετε την ετικέτα σας πριν ή μετά το αναπτυσσόμενο μενού.
Κλειδί πρόσβασης
Οι επισκέπτες μπορούν να χρησιμοποιήσουν ένα κλειδί πρόσβασης με τα πλήκτρα Alt ή Option για να μεταβούν απευθείας σε αυτό το πεδίο φόρμας. Αυτή η συντόμευση πληκτρολογίου καθιστά τις φόρμες σας πολύ εύχρηστες χωρίς ποντίκι.
Ευρετήριο καρτελών
Το ευρετήριο καρτελών είναι ο τρόπος με τον οποίο οι χρήστες πρέπει να έχουν πρόσβαση στα πεδία φόρμας όταν χρησιμοποιούν το πληκτρολόγιο για καρτέλα μέσω της ιστοσελίδας. Όταν ενημερώσετε τις επιλογές προσβασιμότητας, κάντε κλικ στο OK.
Επιλέξτε το μενού
Μόλις εμφανιστεί το αναπτυσσόμενο μενού στην προβολή σχεδίασης του Dreamweaver, θα πρέπει να προσθέσετε τα διάφορα στοιχεία. Αρχικά, επιλέξτε το αναπτυσσόμενο μενού κάνοντας κλικ πάνω του. Το Dreamweaver θα βάλει μια άλλη διάστικτη γραμμή γύρω από το αναπτυσσόμενο μενού για να δείξει ότι το έχετε επιλέξει.
Ιδιότητες μενού
Το μενού ιδιοτήτων θα αλλάξει σε λίστα / ιδιότητες μενού για αυτό το αναπτυσσόμενο μενού. Εκεί μπορείτε να δώσετε στο μενού σας ένα αναγνωριστικό (όπου λέει «select»), να αποφασίσετε αν θέλετε να είναι λίστα ή μενού, να του δώσετε μια κλάση στυλ από το φύλλο στυλ σας και να εκχωρήσετε τιμές στο αναπτυσσόμενο μενού.
Ποια είναι η διαφορά μεταξύ λίστας και μενού;
Το Dreamweaver καλεί ένα αναπτυσσόμενο μενού κάθε αναπτυσσόμενου μενού που επιτρέπει μόνο μία επιλογή. Η «λίστα» επιτρέπει πολλές επιλογές στο αναπτυσσόμενο μενού και μπορεί να έχει υψηλότερο από ένα στοιχείο. Εάν θέλετε ένα αναπτυσσόμενο μενού να έχει πολλές γραμμές, αλλάξτε το σε έναν τύπο «λίστας» και αφήστε το πλαίσιο «επιλογές» μη επιλεγμένο.
Προσθήκη νέων στοιχείων λίστας
Για να προσθέσετε νέα στοιχεία στο μενού σας, κάντε κλικ στο κουμπί «Λίστα τιμών …», το οποίο ανοίγει το παραπάνω παράθυρο. Στη συνέχεια, πληκτρολογήστε την ετικέτα του αντικειμένου σας στο πρώτο πλαίσιο. Θα εμφανιστεί στη σελίδα.
Προσθήκη περισσότερων και αναδιάταξη
Κάντε κλικ στο εικονίδιο συν για να προσθέσετε περισσότερα στοιχεία. Εάν θέλετε να τα παραγγείλετε ξανά στο πλαίσιο λίστας, χρησιμοποιήστε τα πάνω και κάτω βέλη στα δεξιά.
Δώστε όλες τις τιμές τιμών
Εάν αφήσετε την τιμή κενή, η ετικέτα θα μεταβεί στη φόρμα. Αλλά μπορείτε να δώσετε όλες τις τιμές των αντικειμένων σας – για να στείλετε εναλλακτικές πληροφορίες στη φόρμα σας. Θα το χρησιμοποιήσετε πολύ για πράγματα όπως μενού άλματος και υπερσύνδεση.
Επιλέξτε μια προεπιλογή
Οι ιστοσελίδες είναι προεπιλεγμένες για την εμφάνιση οποιουδήποτε αναπτυσσόμενου στοιχείου εμφανίζεται πρώτα ως προεπιλεγμένο στοιχείο. Αλλά αν θέλετε να επιλέξετε ένα διαφορετικό, επισημάνετε το στο πλαίσιο «Αρχικά επιλεγμένο» στο μενού Ιδιότητες.
Δείτε τη λίστα σας σε προβολή σχεδίασης
Μόλις ολοκληρώσετε την επεξεργασία των ιδιοτήτων, το Dreamweaver θα εμφανίσει την αναπτυσσόμενη λίστα σας με την προεπιλεγμένη τιμή επιλεγμένη.
Δείτε τη λίστα σας σε προβολή κώδικα
Εάν μεταβείτε σε προβολή κώδικα, μπορείτε να δείτε ότι το Dreamweaver προσθέτει το αναπτυσσόμενο μενού σας με καθαρό κώδικα. Τα μόνα επιπλέον χαρακτηριστικά είναι οι επιλογές προσβασιμότητας. Ο κώδικας είναι εσοχή και είναι πολύ εύκολο να διαβαστεί και να κατανοηθεί.
Αποθήκευση και προβολή στο πρόγραμμα περιήγησης
Εάν αποθηκεύσετε το έγγραφο και το προβάλετε σε πρόγραμμα περιήγησης ιστού, μπορείτε να δείτε ότι το αναπτυσσόμενο μενού σας μοιάζει ακριβώς όπως θα το περιμένατε.
Αλλά δεν κάνει τίποτα …
Το μενού που δημιουργήσαμε παραπάνω φαίνεται εντάξει, αλλά δεν κάνει τίποτα. Για να κάνει κάτι, πρέπει να ρυθμίσετε μια ενέργεια φόρμας στην ίδια τη φόρμα. Ευτυχώς, το Dreamweaver διαθέτει μια ενσωματωμένη φόρμα αναπτυσσόμενου μενού που μπορείτε να χρησιμοποιήσετε αμέσως στον ιστότοπό σας χωρίς να χρειάζεται να μάθετε για φόρμες, CGI ή scripting. Ονομάζεται Jump Menu. Το Dreamweaver Jump Menu δημιουργεί ένα αναπτυσσόμενο μενού με ονόματα και διευθύνσεις URL. Στη συνέχεια, μπορείτε να επιλέξετε ένα στοιχείο στο μενού και η ιστοσελίδα θα μετακινηθεί σε αυτήν την τοποθεσία, όπως εάν κάνατε κλικ σε έναν σύνδεσμο. Μεταβείτε στο μενού Εισαγωγή και επιλέξτε Φόρμα και μετά Μεταβείτε στο Μενού.
Παράθυρο μενού μετάβασης
Σε αντίθεση με το τυπικό αναπτυσσόμενο μενού, το μενού Μετάβαση ανοίγει ένα νέο παράθυρο για να ονομάσετε τα στοιχεία του μενού σας και να προσθέσετε λεπτομέρειες σχετικά με τον τρόπο λειτουργίας της φόρμας. Για το πρώτο στοιχείο, αλλάξτε το κείμενο «Untitled1» σε αυτό που θέλετε να διαβάσει και προσθέστε μια διεύθυνση URL.
Προσθήκη αντικειμένων στο άλμα μενού
Κάντε κλικ στο στοιχείο προσθήκης για να προσθέσετε ένα νέο στοιχείο στο μενού μετάβασής σας. Προσθέστε όσα αντικείμενα θέλετε.
Μεταβείτε στις επιλογές μενού
Μόλις προσθέσετε όλους τους συνδέσμους που θέλετε, πρέπει να ορίσετε τις επιλογές σας:
Άνοιγμα διευθύνσεων URL σε
Εάν έχετε ένα σύνολο πλαισίων, μπορείτε να ανοίξετε τους συνδέσμους σε διαφορετικό πλαίσιο. Εναλλακτικά, μπορείτε να αλλάξετε την επιλογή του Κύριου παραθύρου σε έναν ειδικό στόχο, ώστε η διεύθυνση URL να ανοίξει σε νέο παράθυρο ή αλλού.
Όνομα μενού
Δώστε στο μενού σας ένα μοναδικό αναγνωριστικό για τη σελίδα. Απαιτείται έτσι ώστε το σενάριο να λειτουργεί σωστά. Σας επιτρέπει επίσης να έχετε πολλαπλά μενού άλματος σε μία φόρμα – δώστε τους όλα τα διαφορετικά ονόματα.
Εισαγωγή κουμπιού μετάβασης μετά το μενού
Μου αρέσει να το επιλέγω γιατί μερικές φορές το σενάριο δεν λειτουργεί όταν αλλάζει το μενού. Είναι επίσης πιο προσβάσιμο.
Επιλέξτε Πρώτο στοιχείο μετά την αλλαγή διεύθυνσης URL
Επιλέξτε αυτό εάν έχετε ένα μήνυμα όπως «Επιλογή ενός» ως το πρώτο στοιχείο μενού. Αυτό θα διασφαλίσει ότι το στοιχείο παραμένει προεπιλεγμένο στη σελίδα.
Προβολή σχεδίασης μενού μετάβασης
Όπως και με το πρώτο σας μενού, το Dreamweaver ρυθμίζει το άλμα του μενού σε προβολή σχεδίασης με το προεπιλεγμένο στοιχείο ορατό. Στη συνέχεια, μπορείτε να επεξεργαστείτε το αναπτυσσόμενο μενού όπως θα κάνατε με οποιοδήποτε άλλο. Εάν το επεξεργαστείτε, φροντίστε να μην αλλάξετε αναγνωριστικά στα στοιχεία. Διαφορετικά, το σενάριο ενδέχεται να μην λειτουργεί.
Μεταβείτε στο μενού του προγράμματος περιήγησης
Αποθηκεύοντας το αρχείο και πατώντας F12 θα εμφανιστεί η σελίδα στο πρόγραμμα περιήγησης που προτιμάτε. Εκεί μπορείτε να ορίσετε μια επιλογή, κάντε κλικ στο «Μετάβαση» και το μενού άλματος λειτουργεί.