Πώς να δημιουργήσετε μια γραμμή πλοήγησης από μια μη προσαρμοσμένη λίστα συνδέσεων στο Dreamweaver - dummies

Εδώ είναι ένα τέλειο CSS τέχνασμα για τη μετατροπή μιας λίστας με κουκκίδες σε μια γραμμή πλοήγησης στο Dreamweaver με ένα απλό αποτέλεσμα ανατροπής. Η χρήση μιας λίστας με κουκκίδες για τις γραμμές πλοήγησης είναι μια καλά αποδεκτή σύμβαση για ιστότοπους που πληρούν τα τρέχοντα πρότυπα προσβασιμότητας.

Πίστωση: Φωτογραφίες από istockphoto. com

Οι ίδιοι σύνδεσμοι εξακολουθούν να περιέχονται στη λίστα, αλλά η εφαρμογή των στυλ αλλάζει δραματικά την εμφάνισή τους.

Πίστωση: Φωτογραφίες από istockphoto. com

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

1. Κάντε κλικ για να τοποθετήσετε τον κέρσορα όπου θέλετε να δημιουργήσετε τη γραμμή πλοήγησης στη σελίδα.

2. Εισαγάγετε το κείμενο που θέλετε να εμφανίζεται ως σύνδεσμος, διαχωρίζοντας το κάθε ένα πατώντας το πλήκτρο Return ή Enter για να δημιουργήσετε μια επιστροφή παραγράφου.

   Για να μορφοποιήσετε τους συνδέσμους ως μη ταξινομημένη λίστα, διαχωρίστε κάθε γραμμή κειμένου που θέλετε να συνδέσετε με μια ετικέτα

3. Δημιουργήστε συνδέσμους επιλέγοντας κάθε κομμάτι κειμένου με τη σειρά του, κάνοντας κλικ στο εικονίδιο υπερσύνδεσης στον πίνακα Common Insertion και επιλέγοντας τη σελίδα με την οποία θέλετε να συνδεθείτε ή να καταχωρίσετε μια διεύθυνση URL.

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

   Ένα κουκκίδα εμφανίζεται στην αρχή κάθε συνδέσμου. Αν κάποιος σύνδεσμος δεν έχει συμψηφιστεί με μια ξεχωριστή σφαίρα, κάντε κλικ για να διαγράψετε το διάστημα μεταξύ αυτού και του συνδέσμου πριν από αυτό και, στη συνέχεια, πατήστε Return ή Enter για να διαχωρίσετε τους συνδέσμους με μια επιστροφή παραγράφου.

   

5. Για να προσθέσετε μια ετικέτα γύρω από μια λίστα συνδέσμων (ή οποιοδήποτε άλλο περιεχόμενο που υπάρχει ήδη σε μια σελίδα), επιλέξτε το περιεχόμενο και, στη συνέχεια, κάντε κλικ στο εικονίδιο Div στο πλαίσιο Common Insertion.

   Ανοίγει το παράθυρο διαλόγου Insert Div.

   Η προσθήκη μιας ετικέτας γύρω από τη λίστα των συνδέσμων που δεν είναι διευθετημένη είναι χρήσιμη αν θέλετε να προσθέσετε μορφοποίηση.

6. Επιλέξτε Επιλογή περιτύλιξης γύρω από την αναπτυσσόμενη λίστα Εισαγωγή.

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

   

7. Πληκτρολογήστε ένα όνομα στο πεδίο Class ή στο πεδίο ID.

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

8. Στο κάτω μέρος του πλαισίου διαλόγου Εισαγωγή διαιρέτησης, κάντε κλικ στο κουμπί Νέο κανόνα CSS.

   Το νέο όνομα κανόνα CSS προστίθεται στη λίστα των ονομάτων στυλ στον πίνακα επιλογών σχεδιαστή CSS.

9. Στον πίνακα "Ιδιότητες", καθορίστε τις επιθυμητές ρυθμίσεις για το χρώμα, το φόντο, το μέγεθος, τα περιθώρια και την επένδυση.

   Η μορφοποίηση στυλ εφαρμόζεται αυτόματα στο περιεχόμενο της ετικέτας επειδή εφαρμόσατε το στυλ όπως δημιουργήσατε στα βήματα 5-7.

10. Για να δημιουργήσετε ένα σύνθετο στυλ που θα διαμορφώσει τη λίστα με μη ταξινομημένα μόνο όταν χρησιμοποιείται στη γραμμή πλοήγησης, δημιουργήστε ένα σύνθετο στυλ που περιλαμβάνει το όνομα της κλάσης. Navbar:

    1. Τοποθετήστε το δρομέα σας οπουδήποτε στη λίστα με κουκκίδες.

    2. Κάντε κλικ στο σύμβολο συν (+) στο επάνω μέρος του πλαισίου επιλογών.

    3. Στο πεδίο Όνομα επιλογέα, βεβαιωθείτε ότι το Dreamweaver έχει εισαχθεί αυτόματα. Navbar ul ως το όνομα ενός νέου στυλ στον πίνακα επιλογών.

    4. Στον πίνακα "Ιδιότητες", ορίστε τα περιθώρια και την επένδυση σε 0.

11. Δημιουργήστε ένα σύνθετο στυλ για να επαναπροσδιορίσετε τις ετικέτες στοιχείου λίστας:

    1. Τοποθετήστε τον κέρσορα σας οπουδήποτε στη λίστα με κουκκίδες.

    2. Κάντε κλικ στο σύμβολο συν στο επάνω μέρος του πίνακα επιλογής.

    3. Στο πεδίο Όνομα επιλογέα, βεβαιωθείτε ότι το Dreamweaver έχει εισαχθεί αυτόματα. Navbar ul li ως το όνομα ενός νέου στυλ στον πίνακα επιλογών.

    4. Στον πίνακα "Ιδιότητες", ορίστε την ένδειξη εμφάνισης σε γραμμή εισόδου.

    5. Αλλάξτε τον τύπο στυλ λίστας σε Κανένα για να καταργήσετε τη σφαίρα.

    6. Ρυθμίστε τα αριστερά και δεξιά περιθώρια σε 20 pixels.

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

12. Δημιουργήστε ένα στυλ για να επαναπροσδιορίσετε την ετικέτα σύνδεσης:

    1. Κάντε κλικ για να τοποθετήσετε τον κέρσορα μέσα σε ένα σύνδεσμο στη γραμμή πλοήγησης.

    2. Κάντε κλικ στο σύμβολο συν στο επάνω μέρος του πίνακα επιλογής.

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

    4. Στην ενότητα Κείμενο στον πίνακα Ιδιότητες, ορίστε την επιλογή Διακόσμηση κειμένου σε Κανένα.

    5. Ακόμα στην ενότητα Κείμενο, επιλέξτε ένα χρώμα από το χρώμα καλά για να καθορίσετε το χρώμα των συνδέσμων όταν φορτώνονται σε μια σελίδα.

13. Δημιουργήστε ένα νέο στυλ για να επαναπροσδιορίσετε την ετικέτα hover-link έτσι ώστε το χρώμα σύνδεσης να αλλάζει όταν ένας χρήστης μετατοπίζει ένα δρομέα πάνω από το σύνδεσμο:

    1. Κάντε κλικ στο σύμβολο συν στο επάνω μέρος του πίνακα επιλογής.

    2. Στο πεδίο Όνομα επιλογέα, πληκτρολογήστε. πλοήγηση.

    3. Στην ενότητα Κείμενο στον πίνακα Ιδιότητες, ορίστε την επιλογή Διακόσμηση κειμένου σε Κανένα.

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

14. Δημιουργήστε ένα νέο στυλ για να επαναπροσδιορίσετε την ετικέτα συνδέσμου επισκέψεων έτσι ώστε το χρώμα του συνδέσμου να αλλάζει αφού ένας χρήστης κάνει κλικ σε έναν σύνδεσμο:

    1. Κάντε κλικ στο σύμβολο συν στο επάνω μέρος του πίνακα επιλογών.

    2. Στο πεδίο Όνομα επιλογέα, πληκτρολογήστε. navbar a: επισκέφθηκε.

    3. Στην ενότητα Κείμενο στον πίνακα Ιδιότητες, ορίστε την επιλογή Διακόσμηση κειμένου σε Κανένα.

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

15. Κάντε κλικ στο κουμπί Live στο επάνω μέρος του χώρου εργασίας ή κάντε κλικ στο κουμπί Προεπισκόπηση για να προβάλετε τη σελίδα σε ένα πρόγραμμα περιήγησης για να δείτε την επίδραση των στυλ συνδέσμων.