Πώς να σχεδιάσει ένα CSS Sprite Navigation Bar

CSS sprites μπορούν να βοηθήσουν τους προγραμματιστές Web να αυξήσει την ταχύτητα με την οποία φορτία ιστοσελίδα τους, χρησιμοποιώντας ένα ενιαίο αρχείο εικόνας που περιέχει πολλά γραφικά . Μια μπάρα πλοήγησης να φορτώσετε μία εικόνα όταν η ιστοσελίδα καθίσταται , αλλά εξακολουθούν να περιέχουν μεμονωμένες εικόνες που μπορούν να επεξεργαστούν και στυλ με δική τους εντός της μπάρας πλοήγησης . Το πρόγραμμα περιήγησης στο Web έχει μόνο να κατεβάσετε μια εικόνα αντί για πολλές εικόνες που θα αντιπροσωπεύουν το καθένα τα στοιχεία πλοήγησης στη μπάρα πλοήγησης . Τα πράγματα που θα χρειαστείτε
Adobe Photoshop
εφαρμογή επεξεργασίας κειμένου
Η Εμφάνιση Περισσότερες οδηγίες
Η 1

Εκκίνηση Adobe Photoshop και να ανοίξει το αρχείο εικόνας που έχετε σχεδιάσει για να είναι χρησιμοποιείται ως γραμμή πλοήγησης της ιστοσελίδας . Θα πρέπει να αναφέρονται σ ' αυτό το αρχείο για να καθορίσει πλάτη pixel καθώς πηγαίνετε για να γράψουν τον κώδικα CSS που θα καθορίσει το πώς χρησιμοποιείται η μπάρα πλοήγησης . 2

ξεκινήσει μια εφαρμογή επεξεργασίας κειμένου και , στη συνέχεια, ανοίξτε το αρχείο CSS για την ιστοσελίδα λαμβάνει την μπάρα πλοήγησης sprite . Αν δεν έχετε ένα πρόγραμμα κωδικοποίησης ειδικότητα στο χέρι , μπορείτε να χρησιμοποιήσετε το Σημειωματάριο στα Microsoft Windows ή TextEdit σε Mac OS X.
εικόνων 3

Επιστροφή στην εικόνα στο Photoshop και επιλέξτε " ? Εικόνα " από τη λίστα των διαθέσιμων επιλογών στο πάνω μέρος του παραθύρου της εφαρμογής Photoshop . Επιλέξτε " Ιδιότητες" και να λάβει υπόψη της το ύψος και το πλάτος της εικόνας Γραμμή πλοήγησης , όπως ορίζεται σε pixels . Ο κωδικός CSS θα χρησιμοποιήσουν αυτούς τους ορισμούς pixel .
Η 4

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

* {margin : 0px? Padding : 0px? } # Nav {background : url ( navbarsprite.png ) ? ύψος: 35px ? width : 800px ? περιθώριο : 0 auto? # διάρκεια nav { display: none ? }
5

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

# nav li { list-style - type: none ? float : αριστερά? } # nav ένα { height: 38px ? display: block ? }

6

Κάντε κλικ στο "Προβολή" στο Photoshop , τότε "Προσθήκη Χάρακες " για να προσθέσετε ένα σύνολο επί της οθόνης κανόνες για το παράθυρο στο οποίο εμφανίζεται εικόνα μπάρα πλοήγησης σας . Μεγεθύνετε την εικόνα και μετρήστε το πλάτος του κάθε πλήκτρο πλοήγησης στην μπάρα πλοήγησης σας .
Η 7

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

# list1 { width : 110px ? } # List2 { width : 110px ? } # List3 { width : 125px ? } # List4 { width : 123px ? } # List5 { width : 131px ? }
Τετάρτη 8

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

Η