Cómo diseñar una barra de navegación Sprite CSS

sprites CSS pueden ayudar a los desarrolladores Web aumentan la velocidad a la que sus cargas sitio web mediante el uso de un solo archivo de imagen que contiene varios gráficos . Una barra de navegación puede cargar como una sola imagen cuando la página web se representa , pero aún contienen imágenes individuales que se pueden editar y decoradas por sí solos en la barra de navegación . El navegador web sólo tiene que descargar una imagen en lugar de varias imágenes que representen cada uno de los elementos de navegación en la barra de navegación . Cosas que necesitará hotel Adobe Photoshop
texto editor de aplicaciones
Ver Más instrucciones
1

lanzamiento de Adobe Photoshop y abrir el archivo de imagen que ha diseñado para ser utilizado como barra de navegación del sitio web. Usted tendrá que hacer referencia a este archivo para determinar las anchuras de píxeles a medida que avanza a escribir el código CSS que definirá cómo se utiliza la barra de navegación .
2

Inicie una aplicación de editor de texto y abra la archivo CSS de la página web que recibe la barra de navegación de sprites . Si usted no tiene un programa de codificación de la especialidad a la mano , puede utilizar el Bloc de notas de Microsoft Windows o TextEdit en Mac OS X.
3

Volver a la imagen en Photoshop y seleccione " , la imagen " de la lista de opciones disponibles en la parte superior de la ventana de la aplicación Photoshop. Seleccione "Propiedades" y tomar nota de la altura y la anchura de la imagen de barra de navegación tal como se define en píxeles . El código CSS utilizará estas definiciones píxeles.
4

Volver al archivo CSS en el editor de texto y agregue el código siguiente . Modificar la altura , el ancho , el nombre de archivo de la imagen y los valores de margen para cumplir con el tamaño y las especificaciones de la imagen

* {margin : 0px ; padding : 0px ;} . # Nav {background : url ( navbarsprite.png ) , altura : 35px ; ancho : 800px ; margin: 0 auto; # nav lapso {display : none;}
5

Dar la barra de navegación una orientación adecuada en su página mediante las siguientes líneas de código CSS y añadirlos al documento CSS :

# nav li { tipo list-style : none ; float : left; } # nav a {height : 38px ; display: block ;}

6

Haga clic en "Ver" en Photoshop , y luego " Agregar gobernantes " para añadir un conjunto de reglas que aparecen en pantalla a la ventana en la que aparece la imagen de barra de navegación. Zoom sobre la imagen y medir el ancho de cada botón de navegación en la barra de navegación.
7

Agregue el siguiente código a su archivo CSS , utilizando las mediciones de píxeles individuales de cada elemento. Por ejemplo :

# list1 {width : 110px ; } # list2 {width : 110px ; } # list3 {width : 125px ; } # list4 {width : 123px ; } # List5 {width : 131px ;}
8

Guarde el archivo CSS modificado y cargar la imagen de barra de navegación y en el servidor Web para comenzar a utilizarlo en el entorno de producción de la página web.