sprite CSS può aiutare gli sviluppatori web aumentare la velocità con cui i loro siti web carichi utilizzando un unico file di immagine che contiene più elementi grafici. Una barra di navigazione può caricare come una singola immagine quando la pagina Web è reso, ma ancora contenere immagini singole che possono essere modificati ed con uno stile in proprio all'interno della barra di navigazione. Il browser Web deve solo scaricare una immagine invece di diverse immagini che ogni rappresentano gli elementi di navigazione nella barra di navigazione.

istruzione

1 Avviare Adobe Photoshop e aprire il file di immagine che hai progettato per essere utilizzato come barra di navigazione del sito. Sarà necessario fare riferimento a questo file per determinare le larghezze di pixel, come si va a scrivere il codice CSS che definirà come la barra di navigazione viene utilizzato.

2 Avviare un editor di testo e quindi aprire il file CSS per la pagina Web che riceve la barra di navigazione sprite. Se non si dispone di una specialità di codifica programmi a portata di mano, è possibile utilizzare il Blocco note in Microsoft Windows o TextEdit in Mac OS X.

3 Torna l'immagine in Photoshop e selezionare "Immagine" dalla lista di opzioni disponibili nella parte superiore della finestra dell'applicazione Photoshop. Selezionare "Proprietà" e prendere nota di altezza e larghezza dell'immagine barra di navigazione di come definito in pixel. Il codice CSS utilizzerà queste definizioni di pixel.

4 Tornare al file CSS nell'editor di testo e aggiungere il seguente codice. Modificare l'altezza, la larghezza, il nome del file di immagine e valori dei margini di conformarsi alle dimensioni e le specifiche della vostra immagine.

{Margin: 0px; padding: 0px; } nav {

fondo: url (navbarsprite.png);
Altezza: 35px;
width: 800px;
margin: 0 auto;

arco nav {

display: none;
}

5 Dare la barra di navigazione un orientamento adeguato nella pagina utilizzando le seguenti righe di codice CSS e aggiungendoli al documento CSS:

nav li {

list-style-type: none;
float: left;

}

nav un {

height: 38px;
display: block;

}

6 Clicca su "Visualizza" in Photoshop, poi "Aggiungi governanti" per aggiungere un insieme di regole su schermo per la finestra in cui viene visualizzata l'immagine barra di navigazione. Ingrandire l'immagine e misurare la larghezza di ciascun pulsante di navigazione nella barra di navigazione.

7 Aggiungere il seguente codice al vostro file CSS, utilizzando le singole misurazioni in pixel di ogni elemento. Per esempio:

lista1 {width: 110px; } Lista2 {width: 110px; } List3 {width: 125px; } List4 {width: 123px; } List5 {width: 131px; }

8 Salvare il file CSS modificato e caricarlo e l'immagine barra di navigazione per il server Web per iniziare a utilizzarlo in ambiente di produzione del sito web.