Το Dreamweaver διευκολύνει τη δημιουργία αναπτυσσόμενων μενού για τον ιστότοπό σας. Αλλά όπως όλες οι μορφές HTML μπορεί να είναι λίγο δύσκολο. Αυτό το σεμινάριο θα σας καθοδηγήσει στα βήματα για να δημιουργήσετε ένα αναπτυσσόμενο μενού στο Dreamweaver.
Μενού Jump Dreamweaver
Το Dreamweaver 8 παρέχει επίσης έναν οδηγό για να δημιουργήσετε ένα μενού άλματος για πλοήγηση στον ιστότοπό σας. Σε αντίθεση με τα βασικά αναπτυσσόμενα μενού, αυτό το μενού θα κάνει πραγματικά κάτι όταν τελειώσετε. Δεν θα χρειαστεί να γράψετε JavaScript ή CGI για να φτάσετε στην αναπτυσσόμενη φόρμα σας. Αυτό το σεμινάριο εξηγεί επίσης πώς μπορείτε να χρησιμοποιήσετε τον οδηγό του Dreamweaver 8 για να δημιουργήσετε ένα μενού άλματος.
01 από 20
Πρώτα δημιουργήστε τη φόρμα
Σημαντική σημείωση Σχετικά με τα έντυπα HTML και το Dreamweaver:
Εκτός από τους ειδικούς μάγους όπως το μενού άλματος, το Dreamweaver δεν σας βοηθά να κάνετε τις φόρμες HTML "εργασία". Για αυτό χρειάζεστε ένα CGI ή JavaScript. Ανατρέξτε στο εκπαιδευτικό μου εγχειρίδιο Δημιουργία φόρμας HTML για περισσότερες πληροφορίες.
Όταν προσθέτετε ένα αναπτυσσόμενο μενού στον ιστότοπό σας, το πρώτο πράγμα που χρειάζεστε είναι μια φόρμα για να το περιβάλλετε. Στο Dreamweaver, μεταβείτε στο μενού Εισαγωγή και κάντε κλικ στην επιλογή Φόρμα, στη συνέχεια επιλέξτε "Μορφή".
02 από 20
Εμφανίζεται φόρμα στην προβολή σχεδίασης
Το Dreamweaver εμφανίζει οπτικά τη θέση της φόρμας στην προβολή σχεδίου, έτσι ώστε να γνωρίζετε πού να τοποθετήσετε τα στοιχεία της φόρμας. Αυτό είναι σημαντικό, επειδή οι ετικέτες του αναπτυσσόμενου μενού δεν είναι έγκυρες (και δεν θα λειτουργούν) εκτός του στοιχείου φόρμας. Όπως μπορείτε να δείτε στην εικόνα, η φόρμα είναι η κόκκινη διακεκομμένη γραμμή στην προβολή του σχεδίου.
03 από 20
Επιλέξτε Λίστα / Μενού
Τα αναπτυσσόμενα μενού ονομάζονται στοιχεία "λίστας" ή "μενού" στο Dreamweaver. Για να προσθέσετε ένα στη φόρμα σας, πρέπει να μεταβείτε στο μενού Φόρμα στο μενού Εισαγωγή και να επιλέξετε "Λίστα / Μενού". Βεβαιωθείτε ότι ο δρομέας σας ήταν μέσα στην κόκκινη γραμμή του κουτιού φόρμας.
04 από 20
Παράθυρο ειδικών επιλογών
Στις επιλογές Dreamweaver υπάρχει μια οθόνη σχετικά με την Προσβασιμότητα. Επιλέγω να μου δείξει Dreamweaver όλα τα χαρακτηριστικά προσβασιμότητας. Και αυτή η οθόνη είναι το αποτέλεσμα αυτού. Τα έντυπα είναι ένας τόπος όπου πολλές τοποθεσίες Web πέφτουν στην προσβασιμότητα και συμπληρώνοντας αυτές τις πέντε επιλογές, τα drop-down μενού σας θα είναι άμεσα πιο προσιτά.
05 από 20
Προσπελασιμότητα φόρμας
Οι επιλογές προσβασιμότητας είναι:
Επιγραφή
Αυτό είναι το όνομα για το πεδίο. Θα εμφανιστεί ως κείμενο δίπλα στο στοιχείο της φόρμας.
Γράψτε τι θέλετε να καλέσετε το αναπτυσσόμενο μενού σας. Αυτό μπορεί να είναι μια ερώτηση ή μια σύντομη φράση που θα απαντήσει το αναπτυσσόμενο μενού.
Στυλ
Το HTML περιλαμβάνει μια ετικέτα ετικέτας για τον προσδιορισμό των ετικετών φόρμας στο πρόγραμμα περιήγησης. Οι επιλογές σας είναι να επικαλύψετε το αναπτυσσόμενο μενού και το κείμενο της ετικέτας με την ετικέτα, για να χρησιμοποιήσετε το χαρακτηριστικό "για" στην ετικέτα ετικέτας για να προσδιορίσετε ποια ετικέτα φόρμας αναφέρει ή να μην χρησιμοποιήσει καθόλου την ετικέτα ετικέτας.
Προτιμώ να χρησιμοποιήσω το χαρακτηριστικό για το, όπως τότε αν χρειαστεί να μετακινήσω την ετικέτα για κάποιο λόγο θα εξακολουθεί να είναι προσαρτημένο στο σωστό πεδίο φόρμας.
Θέση
Μπορείτε να τοποθετήσετε την ετικέτα σας πριν ή μετά το αναπτυσσόμενο μενού.
Κλειδί πρόσβασης
Αυτό είναι το κλειδί που μπορείτε να χρησιμοποιήσετε μαζί με τα πλήκτρα Alt ή Option για να μεταβείτε απευθείας σε αυτό το πεδίο φόρμας. Αυτό κάνει τις φόρμες σας πολύ εύκολο στη χρήση χωρίς να χρειάζεται ποντίκι. Πώς να ρυθμίσετε ένα κλειδί πρόσβασης σε HTML
Ευρετήριο καρτελών
Αυτή είναι η σειρά με την οποία θα πρέπει να αποκτάτε πρόσβαση το πεδίο φόρμας όταν χρησιμοποιείτε το πληκτρολόγιο στην καρτέλα μέσω της ιστοσελίδας. Κατανόηση του Tabindex
Όταν ενημερώσετε τις επιλογές προσβασιμότητας, κάντε κλικ στο OK.
06 από 20
Επιλέξτε το Μενού
Μόλις εμφανιστεί το αναπτυσσόμενο μενού στην προβολή σχεδίασης, θα πρέπει να προσθέσετε τα διάφορα στοιχεία σε αυτό. Πρώτα επιλέξτε το αναπτυσσόμενο μενού κάνοντας κλικ πάνω του. Το Dreamweaver θα βάλει μια άλλη διακεκομμένη γραμμή γύρω από το αναπτυσσόμενο μενού, για να δείξει ότι το έχετε επιλέξει.
07 από 20
Ιδιότητες μενού
Το μενού ιδιοτήτων θα αλλάξει στις ιδιότητες λίστας / μενού για αυτό το αναπτυσσόμενο μενού. Εκεί μπορείτε να δώσετε στο μενού σας ένα αναγνωριστικό (όπου λέει "επιλέξτε"), να αποφασίσετε αν θέλετε να είναι lis ή μενού, να του δώσετε μια κλάση στυλ από το φύλλο στυλ σας και να αντιστοιχίσετε τιμές στο αναπτυσσόμενο μενού.
Ποια είναι η διαφορά μεταξύ της λίστας και του μενού;
Το Dreamweaver καλεί ένα αναπτυσσόμενο μενού από κάθε αναπτυσσόμενο μενού που επιτρέπει μόνο μία επιλογή. Μια "λίστα" επιτρέπει πολλαπλές επιλογές στο αναπτυσσόμενο μενού και μπορεί να είναι πάνω από ένα στοιχείο υψηλό.
Αν θέλετε ένα αναπτυσσόμενο μενού να είναι πολλαπλάσιες γραμμές, αλλάξτε τον σε έναν τύπο "λίστας" και αφήστε το πεδίο "επιλογές" ανεξέλεγκτο.
08 από 20
Προσθήκη στοιχείων νέας λίστας
Για να προσθέσετε νέα στοιχεία στο μενού σας, κάντε κλικ στο κουμπί "Λίστα τιμών ...". Αυτό θα ανοίξει το παραπάνω παράθυρο. Πληκτρολογήστε την ετικέτα του στοιχείου σας στο πρώτο πλαίσιο. Αυτό θα εμφανιστεί στη σελίδα. Εάν αφήσετε την τιμή κενή, αυτό θα είναι και αυτό που θα σταλεί στη φόρμα.
09 από 20
Προσθήκη περισσότερων και αναδιάταξη
Κάντε κλικ στο εικονίδιο συν για να προσθέσετε περισσότερα στοιχεία. Αν θέλετε να τα παραγγείλετε ξανά στο πλαίσιο λίστας, χρησιμοποιήστε τα επάνω και κάτω βέλη στα δεξιά.
10 από 20
Δώστε τις τιμές όλων των αντικειμένων
Όπως ανέφερα στο βήμα 8, αν αφήσετε την τιμή κενή, η ετικέτα θα σταλεί στη φόρμα. Αλλά μπορείτε να δώσετε όλες τις τιμές των στοιχείων σας - για να στείλετε εναλλακτικές πληροφορίες στη φόρμα σας. Θα το χρησιμοποιήσετε πολύ για πράγματα όπως τα μενού άλματος.
11 από 20
Επιλέξτε μια προεπιλογή
Οι προεπιλεγμένες ιστοσελίδες για την εμφάνιση του στοιχείου που εμφανίζεται ως προεπιλεγμένο στοιχείο. Εάν όμως θέλετε να επιλέξετε διαφορετικό, επισημάνετε το στο "Αρχικά επιλεγμένο" πλαίσιο στο μενού Ιδιότητες.
12 από 20
Δείτε τη λίστα σας στην προβολή σχεδίασης
Μόλις ολοκληρώσετε την επεξεργασία των ιδιοτήτων, το Dreamweaver θα εμφανίσει την αναπτυσσόμενη λίστα σας με την προεπιλεγμένη τιμή που έχετε επιλέξει.
13 από 20
Δείτε τη λίστα σας στην προβολή κώδικα
Αν μεταβείτε στην προβολή κώδικα, μπορείτε να δείτε ότι το Dreamweaver προσθέτει το αναπτυσσόμενο μενού σας με πολύ καθαρό κώδικα. Τα μοναδικά επιπλέον χαρακτηριστικά είναι αυτά που προσθέσαμε με επιλογές προσβασιμότητας. Ο κώδικας είναι ολόγραμμα και είναι πολύ εύκολο να το διαβάσεις και να καταλάβεις. Καταχωρεί ακόμη και το επιλεγμένο = "επιλεγμένο" χαρακτηριστικό επειδή έχω πει στο Dreamweaver ότι προεπιλογής γράφω το XHTML.
14 από 20
Αποθήκευση και προβολή σε πρόγραμμα περιήγησης
Εάν αποθηκεύσετε το έγγραφο και το προβάλετε σε ένα πρόγραμμα περιήγησης στο Web, μπορείτε να δείτε ότι το αναπτυσσόμενο μενού σας μοιάζει με αυτό που θα το περιμένατε.
15 από 20
Αλλά δεν κάνει τίποτα
Το μενού που δημιουργήσαμε παραπάνω φαίνεται καλό, αλλά δεν κάνει τίποτα. Για να το κάνετε να κάνει κάτι, πρέπει να δημιουργήσετε μια ενέργεια φόρμας στην ίδια τη φόρμα, η οποία είναι ένα εντελώς άλλο φροντιστήριο.
Ευτυχώς, το Dreamweaver διαθέτει ενσωματωμένη μορφή drop-down μενού που μπορείτε να χρησιμοποιήσετε αμέσως στον ιστότοπό σας χωρίς να χρειάζεται να μάθετε για φόρμες, CGI ή δέσμες ενεργειών. Ονομάζεται Μενού Μετάβασης.
Το μενού Μετάβαση Dreamweaver δημιουργεί ένα αναπτυσσόμενο μενού με ονόματα και διευθύνσεις URL. Στη συνέχεια, μπορείτε να επιλέξετε ένα στοιχείο από το μενού και η ιστοσελίδα θα μετακινηθεί σε εκείνη τη θέση, ακριβώς σαν να είχατε κάνει κλικ σε ένα σύνδεσμο.
Μεταβείτε στο μενού Εισαγωγή και επιλέξτε Μορφή και, στη συνέχεια, Μετάβαση μενού.
16 από 20
Παράθυρο μενού μενού
Σε αντίθεση με το τυπικό αναπτυσσόμενο μενού, το μενού Jump ανοίγει ένα νέο παράθυρο για να ονομάσετε τα στοιχεία του μενού σας και να προσθέσετε λεπτομέρειες σχετικά με τον τρόπο με τον οποίο πρέπει να λειτουργήσει η φόρμα.
Για το πρώτο στοιχείο, αλλάξτε το κείμενο "untitled1" σε αυτό που θέλετε να το διαβάσετε και προσθέστε μια διεύθυνση URL στην οποία πρέπει να μεταβεί ο συγκεκριμένος σύνδεσμος.
17 από 20
Προσθέστε τα στοιχεία στο μενού μετάβασης
Κάντε κλικ στο στοιχείο προσθήκης για να προσθέσετε ένα νέο στοιχείο στο μενού μετάβασης. Προσθέστε όσα στοιχεία επιθυμείτε.
18 από 20
Επιλογές μενού μεταπήδησης
Μόλις προσθέσετε όλους τους συνδέσμους που θέλετε, θα πρέπει να επιλέξετε τις επιλογές σας:
Ανοίξτε τις διευθύνσεις URL στο
Αν έχετε ένα σύνολο πλαισίων, μπορείτε να ανοίξετε τους συνδέσμους σε διαφορετικό πλαίσιο. Ή μπορείτε να αλλάξετε την επιλογή του Κύριου παραθύρου σε έναν ειδικό στόχο, έτσι ώστε η διεύθυνση URL να ανοίγει σε ένα νέο παράθυρο ή αλλού.
Όνομα μενού
Δώστε στο μενού σας ένα μοναδικό αναγνωριστικό για τη σελίδα. Αυτό απαιτείται, ώστε το σενάριο να λειτουργεί σωστά. Σας επιτρέπει επίσης να έχετε πολλαπλά μενού άλμα σε μια μορφή - απλά δώστε τους όλα τα διαφορετικά ονόματα.
Εισαγωγή κουμπιού μετά από το μενού
Μου αρέσει να το επιλέγω επειδή μερικές φορές το σενάριο δεν λειτουργεί όταν αλλάζει το μενού. Είναι επίσης πιο προσιτό.
Επιλέξτε το πρώτο στοιχείο μετά την αλλαγή διεύθυνσης URL
Επιλέξτε αυτό, αν έχετε ως ερώτημα "Επιλέξτε ένα" ως το πρώτο στοιχείο του μενού. Αυτό θα διασφαλίσει ότι το συγκεκριμένο στοιχείο παραμένει προεπιλεγμένο στη σελίδα.
19 από 20
Προβολή σχεδίασης μενού μενού
Όπως ακριβώς και με το πρώτο σας μενού, το Dreamweaver δημιουργεί το μενού άλματος στην προβολή σχεδίασης με το προεπιλεγμένο στοιχείο ορατό. Στη συνέχεια, μπορείτε να επεξεργαστείτε το αναπτυσσόμενο μενού όπως θα κάνατε άλλο.
Αν το επεξεργαστείτε, βεβαιωθείτε ότι δεν έχετε αλλάξει τα αναγνωριστικά στα στοιχεία, διαφορετικά μπορεί να μην λειτουργήσει το σενάριο.
20 από 20
Μετάβαση μενού στο πρόγραμμα περιήγησης
Εάν αποθηκεύσετε το αρχείο και πατήσετε το F12, θα εμφανιστεί η σελίδα στο προτιμώμενο πρόγραμμα περιήγησης. Εκεί μπορείτε να επιλέξετε μια επιλογή, κάντε κλικ στο "Go" και το μενού άλματος λειτουργεί!