Πώς να προσθέσετε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver (με εικόνες)

Πίνακας περιεχομένων:

Πώς να προσθέσετε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver (με εικόνες)
Πώς να προσθέσετε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver (με εικόνες)

Βίντεο: Πώς να προσθέσετε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver (με εικόνες)

Βίντεο: Πώς να προσθέσετε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver (με εικόνες)
Βίντεο: 3 Τρόποι Για Παθητικό Εισόδημα 2024, Μάρτιος
Anonim

Αυτό το wikiHow σας διδάσκει πώς να χρησιμοποιήσετε το Adobe Dreamweaver για να δημιουργήσετε ένα αναπτυσσόμενο πλαίσιο για μια ιστοσελίδα. Τα αναπτυσσόμενα πλαίσια είναι μενού που "πέφτουν" όταν κάνετε κλικ σε ένα στοιχείο στην ιστοσελίδα σας, παρουσιάζοντας περισσότερες επιλογές στη διαδικασία.

Βήματα

Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 1
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 1

Βήμα 1. Ανοίξτε ένα έργο Dreamweaver

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

Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 2
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 2

Βήμα 2. Δημιουργήστε μια ταξινομημένη λίστα

Για να δημιουργήσετε ένα αναπτυσσόμενο μενού, πρέπει να έχετε τουλάχιστον ένα στοιχείο κουκκίδων. Μπορείτε να δημιουργήσετε ένα σημείο κουκκίδων απενεργοποιώντας το CSS (κάντε κλικ στο Θέα στοιχείο μενού, επιλέξτε Απόδοση στυλ, και κάντε κλικ Στυλ εμφάνισης εάν είναι επιλεγμένο), κάνοντας κλικ στην τοποθεσία όπου θέλετε να προσθέσετε το σημείο, κάνοντας κλικ στο εικονίδιο σημείου κουκκίδας στο κάτω μέρος του παραθύρου και πληκτρολογώντας το όνομα του σημείου. Στη συνέχεια, θα πρέπει να ενεργοποιήσετε ξανά το CSS πριν προχωρήσετε.

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

Βήμα 3. Καθορίστε το όνομα της λίστας σας

Κάντε κλικ στο Κώδικας καρτέλα και βεβαιωθείτε ότι είστε στο Πηγαίος Κώδικας ρύθμιση και, στη συνέχεια, κάντε κύλιση προς τα κάτω στον κωδικό της παραγγελίας της λίστας σας (θα είναι μεταξύ ενός"

"ετικέτα και ένα"

"ετικέτα) και αναζητήστε την ετικέτα" "πάνω από την κορυφή"

ετικέτα. Η λέξη σε εισαγωγικά είναι το όνομα της λίστας σας.

  • Εάν δεν βλέπετε ένα όνομα, εισαγάγετε την ετικέτα (όπου το όνομα αναφέρεται στο προτιμώμενο όνομα της λίστας) ακριβώς πάνω από το

    ετικέτα.

Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 4
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 4

Βήμα 4. Αφαιρέστε τα σημεία (κουκκίδες)

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

  • Κάντε κλικ + στα δεξιά της επικεφαλίδας "Επιλογείς".
  • Πληκτρολογήστε #όνομα ul όπου "όνομα" είναι το όνομα της λίστας σας.
  • Πατήστε ↵ Enter δύο φορές.
  • Κάντε κύλιση προς τα κάτω και κάντε κλικ τύπος λίστας στο παράθυρο στο κάτω μέρος του Σχεδιαστής CSS αυτί.
  • Κάντε κλικ κανένας στο αναδυόμενο μενού που προκύπτει.
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 5
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 5

Βήμα 5. Αλλάξτε τη λίστα παραγγελίας σας ώστε να εμφανίζεται οριζόντια

Να το πράξουν:

  • Κάντε κλικ + στα δεξιά της επικεφαλίδας "Selectors".
  • Πληκτρολογήστε #όνομα li όπου "όνομα" είναι το όνομα της λίστας σας.
  • Βρείτε την επικεφαλίδα "float" στο παράθυρο στο κάτω μέρος της Σχεδιαστής CSS αυτί.
  • Κάντε κλικ στο Αριστερά κουμπί αμέσως στα δεξιά της επικεφαλίδας "float".
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 6
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 6

Βήμα 6. Προσθέστε μια ενεργή ετικέτα για τη λίστα σας

Κάντε κλικ στο + κουμπί στα δεξιά του "Selectors", στη συνέχεια πληκτρολογήστε #όνομα a (όπου "name" είναι το όνομα της λίστας σας) και πατήστε ↵ Enter δύο φορές.

Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 7
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 7

Βήμα 7. Προσθέστε χρώμα φόντου

Επίλεξε το #όνομα α εάν είναι απαραίτητο, στη συνέχεια κάντε κλικ στην καρτέλα "Χρώμα φόντου" σε σχήμα πλαισίου στο επάνω μέρος του Σχεδιαστής CSS παράθυρο, επιλέξτε το χρώμα του φόντου επιλογή και επιλέξτε ένα χρώμα φόντου για χρήση.

Αυτό είναι το χρώμα που θα χρησιμοποιήσουν τα στοιχεία της αναπτυσσόμενης λίστας σας

Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 8
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 8

Βήμα 8. Κάντε τα στοιχεία της λίστας σας να χρησιμοποιούν τη μορφή "αποκλεισμού"

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

  • Βεβαιωθείτε ότι είστε #όνομα α το στοιχείο είναι επιλεγμένο στο Σχεδιαστής CSS αυτί.
  • Κάντε κύλιση προς τα κάτω στην επικεφαλίδα "οθόνη" στο παράθυρο.
  • Κάντε κλικ στην άκρη δεξιά πλευρά της επικεφαλίδας "εμφάνιση" και, στη συνέχεια, κάντε κλικ ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ στο μενού που προκύπτει.
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 9
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 9

Βήμα 9. Προσθέστε επένδυση εάν είναι απαραίτητο

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

  • Βεβαιωθείτε ότι είστε #όνομα α το στοιχείο είναι επιλεγμένο στο Σχεδιαστής CSS αυτί.
  • Κάντε κύλιση προς τα κάτω στην επικεφαλίδα "padding" στο παράθυρο.
  • Αλλάξτε τα επάνω και κάτω πεδία κειμένου "px" για να διαβάσετε τουλάχιστον 5.
  • Αλλάξτε τα αριστερά και δεξιά πεδία κειμένου "px" για να διαβάσετε τουλάχιστον 10.
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 10
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 10

Βήμα 10. Δημιουργήστε ένα χρώμα αιώρησης

Αυτό είναι το χρώμα που θα εμφανιστεί όταν τοποθετείτε τον δείκτη του ποντικιού πάνω από ένα στοιχείο στο αναπτυσσόμενο μενού:

  • Κάντε κλικ + στα δεξιά της επικεφαλίδας "Selectors".
  • Πληκτρολογήστε #nave a: hover (όπου "όνομα" είναι το όνομα της λίστας σας) και πατήστε ↵ Enter δύο φορές.
  • Κάντε κλικ στην καρτέλα "Χρώμα φόντου".
  • Επιλέγω χρώμα του φόντου και, στη συνέχεια, επιλέξτε ένα πιο ανοιχτό χρώμα από αυτό που χρησιμοποιήσατε για το χρώμα φόντου.
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 11
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 11

Βήμα 11. Απενεργοποιήστε το CSS

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

Αν το Στυλ εμφάνισης η επιλογή είναι γκρι, κάντε κλικ οπουδήποτε στο έγγραφο του Dreamweaver και δοκιμάστε ξανά.

Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 12
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 12

Βήμα 12. Δημιουργήστε τα περιεχόμενα του αναπτυσσόμενου μενού

Μπορείτε να το κάνετε αυτό προσθέτοντας υπο-σημεία κάτω από το σημείο κουκκίδων που θέλετε να χρησιμοποιήσετε ως κουμπί του αναπτυσσόμενου μενού:

  • Κάντε κλικ στα δεξιά του στοιχείου της λίστας που θέλετε να μετατρέψετε σε αναπτυσσόμενο μενού και, στη συνέχεια, πατήστε ↵ Enter.
  • Πατήστε το πλήκτρο Tab ↹.
  • Πληκτρολογήστε το όνομα του πρώτου αναπτυσσόμενου στοιχείου μενού και πατήστε ↵ Enter.
  • Πληκτρολογήστε το όνομα του επόμενου αναπτυσσόμενου μενού και, στη συνέχεια, πατήστε ↵ Enter και επαναλάβετε όπως απαιτείται.
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 13
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 13

Βήμα 13. Συνδέστε τα περιεχόμενα του αναπτυσσόμενου μενού σε ένα στοιχείο κουκκίδας

Να το πράξουν:

  • Κάντε κλικ + δίπλα στο "Selectors", στη συνέχεια πληκτρολογήστε #όνομα ul ul και πατήστε ↵ Enter δύο φορές.
  • Κάντε κύλιση προς τα κάτω και κάντε κλικ απεικόνιση, στη συνέχεια κάντε κλικ κανένας στο αναδυόμενο μενού.
  • Βρείτε και κάντε κλικ θέση, στη συνέχεια κάντε κλικ απόλυτος στο αναδυόμενο μενού.
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 14
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 14

Βήμα 14. Δημιουργήστε το ίδιο το αναπτυσσόμενο μενού

Θα πρέπει να προσθέσετε έναν άλλο επιλογέα για να το κάνετε αυτό:

  • Κάντε κλικ + δίπλα στο "Selectors", στη συνέχεια πληκτρολογήστε #όνομα ul li: hover> ul και πατήστε ↵ Enter δύο φορές.
  • Βρείτε και κάντε κλικ απεικόνιση, στη συνέχεια κάντε κλικ ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ στο αναδυόμενο μενού που προκύπτει.
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 15
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 15

Βήμα 15. Κάντε τα περιεχόμενα του αναπτυσσόμενου μενού να εμφανίζονται κάθετα

Από προεπιλογή, τα περιεχόμενα του αναπτυσσόμενου μενού θα εμφανίζονται σε μια οριζόντια γραμμή, αλλά μπορείτε να τα αναγκάσετε σε μια κάθετη στήλη κάνοντας τα εξής:

  • Κάντε κλικ + δίπλα στο "Selectors", στη συνέχεια πληκτρολογήστε #όνομα ul ul li και πατήστε ↵ Enter δύο φορές.
  • Βρείτε την επικεφαλίδα "float".
  • Κάντε κλικ στο "κανένα" () επιλογή στα δεξιά της επικεφαλίδας "float".
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 16
Προσθέστε ένα αναπτυσσόμενο πλαίσιο στο Dreamweaver Βήμα 16

Βήμα 16. Αποθηκεύστε το έργο σας

Πατήστε Ctrl+S (Windows) ή ⌘ Command+S (Mac) για να το κάνετε.

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

Συνιστάται: