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

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

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

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

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

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

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

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

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

ετικέτα.

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

Σύρετε για να επιλέξετε ολόκληρο το σύνολο συνδέσμων και, στη συνέχεια, κάντε κλικ στο εικονίδιο Unordered List στο Property inspector.

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

Για να προσθέσετε ένα

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

Ανοίγει το πλαίσιο διαλόγου Εισαγωγή Div.

Προσθήκη α

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

Επιλέξτε Wrap Around Selection από την αναπτυσσόμενη λίστα Εισαγωγή.

Για πιο ακριβή έλεγχο σχετικά με το πού προσθέτετε ένα νέο

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

Εισαγάγετε ένα όνομα στο πεδίο Class ή στο πεδίο ID.

ΕΝΑ

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

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

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

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

Η μορφοποίηση στυλ εφαρμόζεται αυτόματα στο περιεχόμενο του

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

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

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

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

Στο πεδίο Όνομα επιλογής, βεβαιωθείτε ότι το Dreamweaver εισήγαγε αυτόματα .navbar ul ως όνομα ενός νέου στυλ στον πίνακα Επιλογείς.

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

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

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

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

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

Στον πίνακα Ιδιότητες, ορίστε την Οθόνη σε Ενσωματωμένη.

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

Ορίστε το αριστερό και το δεξί περιθώριο στα 20 pixel.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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