Τι πρέπει να γνωρίζετε
- Μεταβείτε στο Insert > Form > Φόρμα. Κάντε κλικ στη διακεκομμένη κόκκινη γραμμή στη φόρμα και μεταβείτε στο Insert > Form > Λίστα/Μενού. Επιλέξτε επιλογές προσβασιμότητας.
- Κάντε κλικ στο μενού και επιλέξτε τις ιδιότητές του και, στη συνέχεια, επιλέξτε Λίστα τιμών για να προσθέσετε νέα στοιχεία μενού. Κάντε κλικ στο σύμβολο συν για να προσθέσετε περισσότερα στοιχεία.
- Προσθέστε τιμές στοιχείων και επιλέξτε ένα προεπιλεγμένο στοιχείο. Για να προσθέσετε ενέργειες, μεταβείτε Insert > Form > Μενού Μετάβασης. Προσθέστε στοιχεία στο μενού Μετάβαση και αποθηκεύστε.
Το Dreamweaver διευκολύνει τη δημιουργία αναπτυσσόμενων μενού για τον ιστότοπό σας. Αλλά όπως όλες οι φόρμες HTML, μπορεί να είναι λίγο δύσκολες. Αυτό το σεμινάριο θα σας καθοδηγήσει στα βήματα για τη δημιουργία ενός αναπτυσσόμενου μενού στο Dreamweaver.
Dreamweaver Jump Menu
Το Dreamweaver 8 παρέχει επίσης έναν οδηγό για τη δημιουργία ενός μενού μετάβασης για πλοήγηση στον ιστότοπό σας. Σε αντίθεση με τα βασικά αναπτυσσόμενα μενού, αυτό το μενού θα κάνει κάτι όταν τελειώσετε. Δεν θα χρειαστεί να γράψετε JavaScript ή CGI για να λειτουργήσει η αναπτυσσόμενη φόρμα σας. Αυτό το σεμινάριο εξηγεί επίσης πώς να χρησιμοποιήσετε τον οδηγό Dreamweaver 8 για να δημιουργήσετε ένα μενού μετάβασης.
Πρώτα, δημιουργήστε τη φόρμα
Εκτός από ειδικούς οδηγούς όπως το μενού μετάβασης, το Dreamweaver δεν σας βοηθά να κάνετε τις φόρμες HTML να "λειτουργούν". Για αυτό, χρειάζεστε ένα CGI ή JavaScript.
Όταν προσθέτετε ένα αναπτυσσόμενο μενού στον ιστότοπό σας, το πρώτο πράγμα που χρειάζεστε είναι μια φόρμα που να τον περιβάλλει. Στο Dreamweaver, μεταβείτε στο μενού Εισαγωγή και κάντε κλικ στο Φόρμα και μετά επιλέξτε "Φόρμα".
Εμφανίσεις φόρμας στην προβολή σχεδίασης
Το Dreamweaver εμφανίζει την τοποθεσία της φόρμας σας οπτικά στην προβολή σχεδίασης, ώστε να γνωρίζετε πού να τοποθετήσετε τα στοιχεία της φόρμας σας, επειδή οι ετικέτες του αναπτυσσόμενου μενού δεν είναι έγκυρες (και δεν θα λειτουργούν) εκτός του στοιχείου φόρμας. Όπως μπορείτε να δείτε στην εικόνα, η φόρμα είναι η κόκκινη διακεκομμένη γραμμή στην προβολή σχεδίασης.
Επιλογή λίστας/μενού
Τα αναπτυσσόμενα μενού ονομάζονται στοιχεία "λίστας" ή "μενού" στο Dreamweaver. Επομένως, για να προσθέσετε ένα στη φόρμα σας, πρέπει να μεταβείτε στο μενού Φόρμα στο μενού Εισαγωγή και να επιλέξετε "Λίστα/Μενού". Βεβαιωθείτε ότι ο κέρσορας ήταν εντός της κόκκινης διακεκομμένης γραμμής του πλαισίου της φόρμας.
Παράθυρο ειδικών επιλογών
Στις Επιλογές Dreamweaver, υπάρχει μια οθόνη για την Προσβασιμότητα. Τα αναπτυσσόμενα μενού σας θα είναι αμέσως πιο προσβάσιμα από άλλους ιστότοπους, εάν συμπληρώσετε αυτές τις πέντε επιλογές.
Form Accessibility
Οι επιλογές προσβασιμότητας είναι:
Label
Το πεδίο ετικέτας εμφανίζεται ως κείμενο δίπλα στο στοιχείο της φόρμας. Πληκτρολογήστε ένα όνομα για το αναπτυσσόμενο μενού σας. Μπορεί να είναι μια ερώτηση ή μια σύντομη φράση που θα απαντήσει το αναπτυσσόμενο μενού.
Style
Το HTML περιλαμβάνει μια ετικέτα ετικέτας για την αναγνώριση των ετικετών φορμών στο πρόγραμμα περιήγησης ιστού. Οι επιλογές σας είναι να τυλίξετε το αναπτυσσόμενο μενού και το κείμενο της ετικέτας με την ετικέτα, να χρησιμοποιήσετε το χαρακτηριστικό "για" στην ετικέτα ετικέτας για να προσδιορίσετε ποια ετικέτα φόρμας αναφέρεται ή να μην χρησιμοποιήσετε καθόλου την ετικέτα ετικέτας.
Θέση
Μπορείτε να τοποθετήσετε την ετικέτα σας πριν ή μετά το αναπτυσσόμενο μενού.
Κλειδί πρόσβασης
Οι επισκέπτες μπορούν να χρησιμοποιήσουν ένα κλειδί πρόσβασης με τα πλήκτρα "Image" ή Option για να μεταβούν απευθείας σε αυτό το πεδίο φόρμας. Αυτή η συντόμευση πληκτρολογίου κάνει τις φόρμες σας πολύ εύκολες στη χρήση χωρίς ποντίκι. alt="
Ευρετήριο καρτελών
Το ευρετήριο καρτελών είναι ο τρόπος με τον οποίο οι χρήστες πρέπει να έχουν πρόσβαση στα πεδία φόρμας όταν χρησιμοποιούν το πληκτρολόγιο έως την καρτέλα μέσω της ιστοσελίδας.
Όταν ενημερώσετε τις επιλογές προσβασιμότητας, κάντε κλικ στο OK.
Επιλέξτε το μενού
Μόλις εμφανιστεί το αναπτυσσόμενο μενού στην προβολή σχεδίασης Dreamweaver, πρέπει να προσθέσετε τα διάφορα στοιχεία. Αρχικά, επιλέξτε το αναπτυσσόμενο μενού κάνοντας κλικ σε αυτό. Το Dreamweaver θα τοποθετήσει μια άλλη διακεκομμένη γραμμή γύρω από το αναπτυσσόμενο μενού για να δείξει ότι το επιλέξατε.
Ιδιότητες μενού
Το μενού ιδιοτήτων θα αλλάξει σε ιδιότητες λίστας/μενού για αυτό το αναπτυσσόμενο μενού. Εκεί μπορείτε να δώσετε στο μενού σας ένα αναγνωριστικό (όπου λέει "επιλογή"), να αποφασίσετε αν θέλετε να είναι μια λίστα ή ένα μενού, να του δώσετε μια κατηγορία στυλ από το φύλλο στυλ σας και να εκχωρήσετε τιμές στο αναπτυσσόμενο μενού.
Ποια είναι η διαφορά μεταξύ λίστας και μενού;
Dreamweaver καλεί ένα αναπτυσσόμενο μενού κάθε αναπτυσσόμενο μενού που επιτρέπει μόνο μία επιλογή. Μια "λίστα" επιτρέπει πολλαπλές επιλογές στο αναπτυσσόμενο μενού και μπορεί να έχει περισσότερα από ένα στοιχεία.
Αν θέλετε ένα αναπτυσσόμενο μενού να έχει πολλές γραμμές ύψος, αλλάξτε το σε τύπο "λίστα" και αφήστε το πλαίσιο "επιλογές" μη επιλεγμένο.
Προσθήκη νέων στοιχείων λίστας
Για να προσθέσετε νέα στοιχεία στο μενού σας, κάντε κλικ στο κουμπί "Λίστα τιμών…", το οποίο ανοίγει το παραπάνω παράθυρο. Στη συνέχεια, πληκτρολογήστε την ετικέτα του αντικειμένου σας στο πρώτο πλαίσιο. Θα εμφανιστεί στη σελίδα.
Προσθήκη περισσότερων και επαναπαραγγελία
Κάντε κλικ στο εικονίδιο συν για να προσθέσετε περισσότερα στοιχεία. Εάν θέλετε να τα ταξινομήσετε ξανά στο πλαίσιο λίστας, χρησιμοποιήστε τα πάνω και κάτω βέλη στα δεξιά.
Δώστε τιμές σε όλα τα είδη
Αν αφήσετε την τιμή κενή, η ετικέτα θα μεταβεί στη φόρμα. Αλλά μπορείτε να δώσετε σε όλα τα στοιχεία σας τιμές - για να στείλετε εναλλακτικές πληροφορίες στη φόρμα σας. Θα το χρησιμοποιήσετε πολύ για πράγματα όπως τα μενού μετάβασης και η υπερσύνδεση.
Επιλογή προεπιλογής
Οι ιστοσελίδες από προεπιλογή εμφανίζουν όποιο αναπτυσσόμενο στοιχείο αναφέρεται πρώτο ως το προεπιλεγμένο στοιχείο. Αλλά αν θέλετε να επιλεγεί ένα διαφορετικό, επισημάνετε το στο πλαίσιο "Αρχικά επιλεγμένο" στο μενού Ιδιότητες.
Δείτε τη λίστα σας στην προβολή σχεδίασης
Μόλις ολοκληρώσετε την επεξεργασία των ιδιοτήτων, το Dreamweaver θα εμφανίσει την αναπτυσσόμενη λίστα με επιλεγμένη την προεπιλεγμένη τιμή.
Δείτε τη λίστα σας στην Προβολή κώδικα
Εάν μεταβείτε στην προβολή κώδικα, μπορείτε να δείτε ότι το Dreamweaver προσθέτει το αναπτυσσόμενο μενού σας με καθαρό κώδικα. Τα μόνα επιπλέον χαρακτηριστικά είναι οι επιλογές προσβασιμότητας. Ο κώδικας έχει όλες τις εσοχές και είναι πολύ εύκολος στην ανάγνωση και κατανόηση.
Αποθήκευση και προβολή στο πρόγραμμα περιήγησης
Εάν αποθηκεύσετε το έγγραφο και το προβάλετε σε ένα πρόγραμμα περιήγησης ιστού, μπορείτε να δείτε ότι το αναπτυσσόμενο μενού σας μοιάζει ακριβώς όπως θα περιμένατε.
Αλλά δεν κάνει τίποτα…
Το μενού που δημιουργήσαμε παραπάνω φαίνεται καλό, αλλά δεν κάνει τίποτα. Για να το κάνετε να κάνει κάτι, πρέπει να ρυθμίσετε μια ενέργεια φόρμας στην ίδια τη φόρμα.
Ευτυχώς, το Dreamweaver διαθέτει μια ενσωματωμένη φόρμα αναπτυσσόμενου μενού που μπορείτε να χρησιμοποιήσετε αμέσως στον ιστότοπό σας χωρίς να χρειάζεται να μάθετε για φόρμες, CGI ή δέσμες ενεργειών. Ονομάζεται μενού μετάβασης.
Το Dreamweaver Jump Menu δημιουργεί ένα αναπτυσσόμενο μενού με ονόματα και διευθύνσεις URL. Στη συνέχεια, μπορείτε να επιλέξετε ένα στοιχείο στο μενού και η ιστοσελίδα θα μετακινηθεί σε αυτήν την τοποθεσία, όπως και αν είχατε κάνει κλικ σε έναν σύνδεσμο.
Μεταβείτε στο μενού Εισαγωγή και επιλέξτε Φόρμα και μετά Μενού Μετάβασης.
Παράθυρο μενού μετάβασης
Σε αντίθεση με το τυπικό αναπτυσσόμενο μενού, το μενού Μετάβαση ανοίγει ένα νέο παράθυρο για να ονομάσετε τα στοιχεία του μενού σας και να προσθέσετε λεπτομέρειες σχετικά με τον τρόπο λειτουργίας της φόρμας.
Για το πρώτο στοιχείο, αλλάξτε το κείμενο "un titled1" σε αυτό που θέλετε να διαβάσει και προσθέστε μια διεύθυνση URL.
Προσθήκη αντικειμένων στο μενού μετάβασης
Κάντε κλικ στο στοιχείο προσθήκης για να προσθέσετε ένα νέο στοιχείο στο μενού μετάβασης. Προσθέστε όσα στοιχεία θέλετε.
Επιλογές μενού μετάβασης
Μόλις προσθέσετε όλους τους συνδέσμους που θέλετε, θα πρέπει να επιλέξετε τις επιλογές σας:
Άνοιγμα URL σε
Εάν έχετε σύνολο πλαισίων, μπορείτε να ανοίξετε τους συνδέσμους σε διαφορετικό πλαίσιο. Ή μπορείτε να αλλάξετε την επιλογή του Κύριου παραθύρου σε έναν ειδικό στόχο, έτσι ώστε η διεύθυνση URL να ανοίγει σε νέο παράθυρο ή αλλού.
Όνομα μενού
Δώστε στο μενού σας ένα μοναδικό αναγνωριστικό για τη σελίδα. Απαιτείται για να λειτουργεί σωστά το σενάριο. Σας επιτρέπει επίσης να έχετε πολλά μενού μετάβασης σε μία μορφή - δώστε τους όλα διαφορετικά ονόματα.
Εισαγωγή κουμπιού μετάβασης μετά το μενού
Μου αρέσει να το επιλέγω γιατί μερικές φορές το σενάριο δεν λειτουργεί όταν αλλάζει το μενού. Είναι επίσης πιο προσιτό.
Επιλογή πρώτου στοιχείου μετά την αλλαγή διεύθυνσης URL
Επιλέξτε αυτό εάν έχετε ένα μήνυμα όπως "Επιλέξτε ένα" ως πρώτο στοιχείο μενού. Αυτό θα διασφαλίσει ότι αυτό το στοιχείο παραμένει προεπιλεγμένο στη σελίδα.
Προβολή σχεδίασης μενού μετάβασης
Ακριβώς όπως με το πρώτο σας μενού, το Dreamweaver ρυθμίζει το μενού μετάβασης σε προβολή σχεδίασης με το προεπιλεγμένο στοιχείο ορατό. Στη συνέχεια, μπορείτε να επεξεργαστείτε το αναπτυσσόμενο μενού όπως θα κάνατε οποιοδήποτε άλλο.
Εάν το επεξεργαστείτε, φροντίστε να μην αλλάξετε κανένα αναγνωριστικό στα στοιχεία. Διαφορετικά, το σενάριο ενδέχεται να μην λειτουργεί.
Μενού μετάβασης στο πρόγραμμα περιήγησης
Αποθηκεύοντας το αρχείο και πατώντας F12 θα εμφανιστεί η σελίδα στο πρόγραμμα περιήγησης που προτιμάτε. Εκεί μπορείτε να επιλέξετε μια επιλογή, κάντε κλικ στο "Μετάβαση" και το μενού μεταπήδησης λειτουργεί.
