Αυτό το wikiHow σας διδάσκει πώς να χρησιμοποιήσετε το Adobe Dreamweaver για να δημιουργήσετε ένα αναπτυσσόμενο πλαίσιο για μια ιστοσελίδα. Τα αναπτυσσόμενα πλαίσια είναι μενού που "πέφτουν" όταν κάνετε κλικ σε ένα στοιχείο στην ιστοσελίδα σας, παρουσιάζοντας περισσότερες επιλογές στη διαδικασία.
Βήματα
Βήμα 1. Ανοίξτε ένα έργο Dreamweaver
Κάντε διπλό κλικ στο αρχείο του έργου για να το κάνετε αυτό. Εάν θέλετε να δημιουργήσετε ένα νέο έργο Dreamweaver, θα ανοίξετε το Dreamweaver, κάντε κλικ Αρχείο, Κάντε κλικ Νέος, και ακολουθήστε τυχόν προτροπές στην οθόνη.
Βήμα 2. Δημιουργήστε μια ταξινομημένη λίστα
Για να δημιουργήσετε ένα αναπτυσσόμενο μενού, πρέπει να έχετε τουλάχιστον ένα στοιχείο κουκκίδων. Μπορείτε να δημιουργήσετε ένα σημείο κουκκίδων απενεργοποιώντας το CSS (κάντε κλικ στο Θέα στοιχείο μενού, επιλέξτε Απόδοση στυλ, και κάντε κλικ Στυλ εμφάνισης εάν είναι επιλεγμένο), κάνοντας κλικ στην τοποθεσία όπου θέλετε να προσθέσετε το σημείο, κάνοντας κλικ στο εικονίδιο σημείου κουκκίδας στο κάτω μέρος του παραθύρου και πληκτρολογώντας το όνομα του σημείου. Στη συνέχεια, θα πρέπει να ενεργοποιήσετε ξανά το CSS πριν προχωρήσετε.
- Το όνομα του σημείου εδώ θα χρησιμεύσει ως ενεργοποιητής του αναπτυσσόμενου μενού σας (π.χ., το κουμπί πάνω από το οποίο κάποιος τοποθετεί τον δείκτη του ποντικιού ή πατά για να ανοίξει το αναπτυσσόμενο μενού).
- Παραλείψτε αυτό το βήμα εάν έχετε ήδη ένα στοιχείο λίστας που θέλετε να μετατρέψετε σε αναπτυσσόμενο μενού.
Βήμα 3. Καθορίστε το όνομα της λίστας σας
Κάντε κλικ στο Κώδικας καρτέλα και βεβαιωθείτε ότι είστε στο Πηγαίος Κώδικας ρύθμιση και, στη συνέχεια, κάντε κύλιση προς τα κάτω στον κωδικό της παραγγελίας της λίστας σας (θα είναι μεταξύ ενός"
"ετικέτα και ένα"
"ετικέτα) και αναζητήστε την ετικέτα" "πάνω από την κορυφή"
ετικέτα. Η λέξη σε εισαγωγικά είναι το όνομα της λίστας σας.
-
Εάν δεν βλέπετε ένα όνομα, εισαγάγετε την ετικέτα (όπου το όνομα αναφέρεται στο προτιμώμενο όνομα της λίστας) ακριβώς πάνω από το
ετικέτα.
Βήμα 4. Αφαιρέστε τα σημεία (κουκκίδες)
Βεβαιωθείτε ότι βρίσκεστε στο σωστό μέρος κάνοντας κλικ στο Σχέδιο καρτέλα και στη συνέχεια κάντε κλικ στο Σχεδιαστής CSS στην επάνω δεξιά γωνία του παραθύρου και, στη συνέχεια, κάντε τα εξής:
- Κάντε κλικ + στα δεξιά της επικεφαλίδας "Επιλογείς".
- Πληκτρολογήστε #όνομα ul όπου "όνομα" είναι το όνομα της λίστας σας.
- Πατήστε ↵ Enter δύο φορές.
- Κάντε κύλιση προς τα κάτω και κάντε κλικ τύπος λίστας στο παράθυρο στο κάτω μέρος του Σχεδιαστής CSS αυτί.
- Κάντε κλικ κανένας στο αναδυόμενο μενού που προκύπτει.
Βήμα 5. Αλλάξτε τη λίστα παραγγελίας σας ώστε να εμφανίζεται οριζόντια
Να το πράξουν:
- Κάντε κλικ + στα δεξιά της επικεφαλίδας "Selectors".
- Πληκτρολογήστε #όνομα li όπου "όνομα" είναι το όνομα της λίστας σας.
- Βρείτε την επικεφαλίδα "float" στο παράθυρο στο κάτω μέρος της Σχεδιαστής CSS αυτί.
- Κάντε κλικ στο Αριστερά κουμπί αμέσως στα δεξιά της επικεφαλίδας "float".
Βήμα 6. Προσθέστε μια ενεργή ετικέτα για τη λίστα σας
Κάντε κλικ στο + κουμπί στα δεξιά του "Selectors", στη συνέχεια πληκτρολογήστε #όνομα a (όπου "name" είναι το όνομα της λίστας σας) και πατήστε ↵ Enter δύο φορές.
Βήμα 7. Προσθέστε χρώμα φόντου
Επίλεξε το #όνομα α εάν είναι απαραίτητο, στη συνέχεια κάντε κλικ στην καρτέλα "Χρώμα φόντου" σε σχήμα πλαισίου στο επάνω μέρος του Σχεδιαστής CSS παράθυρο, επιλέξτε το χρώμα του φόντου επιλογή και επιλέξτε ένα χρώμα φόντου για χρήση.
Αυτό είναι το χρώμα που θα χρησιμοποιήσουν τα στοιχεία της αναπτυσσόμενης λίστας σας
Βήμα 8. Κάντε τα στοιχεία της λίστας σας να χρησιμοποιούν τη μορφή "αποκλεισμού"
Αυτή η μορφή διασφαλίζει ότι όταν κάποιος πάει να κάνει κλικ ή να πατήσει σε ένα στοιχείο στη λίστα, μπορεί να το ανοίξει επιλέγοντας ελαφρώς πάνω ή κάτω από αυτό αντί να χρειάζεται να επιλέξει ακριβώς το κείμενο:
- Βεβαιωθείτε ότι είστε #όνομα α το στοιχείο είναι επιλεγμένο στο Σχεδιαστής CSS αυτί.
- Κάντε κύλιση προς τα κάτω στην επικεφαλίδα "οθόνη" στο παράθυρο.
- Κάντε κλικ στην άκρη δεξιά πλευρά της επικεφαλίδας "εμφάνιση" και, στη συνέχεια, κάντε κλικ ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ στο μενού που προκύπτει.
Βήμα 9. Προσθέστε επένδυση εάν είναι απαραίτητο
Εάν παρατηρήσετε ότι τα στοιχεία της λίστας σας είναι μπλεγμένα μεταξύ τους, μπορείτε να τοποθετήσετε λίγο χώρο μεταξύ τους κάνοντας τα εξής:
- Βεβαιωθείτε ότι είστε #όνομα α το στοιχείο είναι επιλεγμένο στο Σχεδιαστής CSS αυτί.
- Κάντε κύλιση προς τα κάτω στην επικεφαλίδα "padding" στο παράθυρο.
- Αλλάξτε τα επάνω και κάτω πεδία κειμένου "px" για να διαβάσετε τουλάχιστον 5.
- Αλλάξτε τα αριστερά και δεξιά πεδία κειμένου "px" για να διαβάσετε τουλάχιστον 10.
Βήμα 10. Δημιουργήστε ένα χρώμα αιώρησης
Αυτό είναι το χρώμα που θα εμφανιστεί όταν τοποθετείτε τον δείκτη του ποντικιού πάνω από ένα στοιχείο στο αναπτυσσόμενο μενού:
- Κάντε κλικ + στα δεξιά της επικεφαλίδας "Selectors".
- Πληκτρολογήστε #nave a: hover (όπου "όνομα" είναι το όνομα της λίστας σας) και πατήστε ↵ Enter δύο φορές.
- Κάντε κλικ στην καρτέλα "Χρώμα φόντου".
- Επιλέγω χρώμα του φόντου και, στη συνέχεια, επιλέξτε ένα πιο ανοιχτό χρώμα από αυτό που χρησιμοποιήσατε για το χρώμα φόντου.
Βήμα 11. Απενεργοποιήστε το CSS
Κάντε κλικ στο Θέα στοιχείο μενού, επιλέξτε Απόδοση στυλ, και κάντε κλικ στο Στυλ εμφάνισης επιλογή στο αναδυόμενο παράθυρο.
Αν το Στυλ εμφάνισης η επιλογή είναι γκρι, κάντε κλικ οπουδήποτε στο έγγραφο του Dreamweaver και δοκιμάστε ξανά.
Βήμα 12. Δημιουργήστε τα περιεχόμενα του αναπτυσσόμενου μενού
Μπορείτε να το κάνετε αυτό προσθέτοντας υπο-σημεία κάτω από το σημείο κουκκίδων που θέλετε να χρησιμοποιήσετε ως κουμπί του αναπτυσσόμενου μενού:
- Κάντε κλικ στα δεξιά του στοιχείου της λίστας που θέλετε να μετατρέψετε σε αναπτυσσόμενο μενού και, στη συνέχεια, πατήστε ↵ Enter.
- Πατήστε το πλήκτρο Tab ↹.
- Πληκτρολογήστε το όνομα του πρώτου αναπτυσσόμενου στοιχείου μενού και πατήστε ↵ Enter.
- Πληκτρολογήστε το όνομα του επόμενου αναπτυσσόμενου μενού και, στη συνέχεια, πατήστε ↵ Enter και επαναλάβετε όπως απαιτείται.
Βήμα 13. Συνδέστε τα περιεχόμενα του αναπτυσσόμενου μενού σε ένα στοιχείο κουκκίδας
Να το πράξουν:
- Κάντε κλικ + δίπλα στο "Selectors", στη συνέχεια πληκτρολογήστε #όνομα ul ul και πατήστε ↵ Enter δύο φορές.
- Κάντε κύλιση προς τα κάτω και κάντε κλικ απεικόνιση, στη συνέχεια κάντε κλικ κανένας στο αναδυόμενο μενού.
- Βρείτε και κάντε κλικ θέση, στη συνέχεια κάντε κλικ απόλυτος στο αναδυόμενο μενού.
Βήμα 14. Δημιουργήστε το ίδιο το αναπτυσσόμενο μενού
Θα πρέπει να προσθέσετε έναν άλλο επιλογέα για να το κάνετε αυτό:
- Κάντε κλικ + δίπλα στο "Selectors", στη συνέχεια πληκτρολογήστε #όνομα ul li: hover> ul και πατήστε ↵ Enter δύο φορές.
- Βρείτε και κάντε κλικ απεικόνιση, στη συνέχεια κάντε κλικ ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ στο αναδυόμενο μενού που προκύπτει.
Βήμα 15. Κάντε τα περιεχόμενα του αναπτυσσόμενου μενού να εμφανίζονται κάθετα
Από προεπιλογή, τα περιεχόμενα του αναπτυσσόμενου μενού θα εμφανίζονται σε μια οριζόντια γραμμή, αλλά μπορείτε να τα αναγκάσετε σε μια κάθετη στήλη κάνοντας τα εξής:
- Κάντε κλικ + δίπλα στο "Selectors", στη συνέχεια πληκτρολογήστε #όνομα ul ul li και πατήστε ↵ Enter δύο φορές.
- Βρείτε την επικεφαλίδα "float".
- Κάντε κλικ στο "κανένα" () επιλογή στα δεξιά της επικεφαλίδας "float".
Βήμα 16. Αποθηκεύστε το έργο σας
Πατήστε Ctrl+S (Windows) ή ⌘ Command+S (Mac) για να το κάνετε.