sprites CSS pueden ayudar a los desarrolladores Web aumentan la velocidad a la que sus cargas sitio web mediante el uso de un archivo de imagen que contiene varios gráficos. Una barra de navegación se puede cargar como una sola imagen cuando se representa la página Web, pero aún contienen imágenes individuales que pueden ser editados y labrados por sí solos en la barra de navegación. El navegador web únicamente tiene que descargar una imagen en lugar de varias imágenes que representaría cada uno de los elementos de navegación en la barra de navegación.
Instrucciones
1 Lanzar Adobe Photoshop y abrir el archivo de imagen que ha diseñado para ser utilizado como barra de navegación del sitio web. Usted necesitará consultar este archivo para determinar los anchos de píxeles a medida que avanza en la que escribir el código CSS que definirá cómo se utiliza la barra de navegación.
2 Lanzar una aplicación de edición de texto y, a continuación, abra el archivo CSS para la página Web que recibe la barra de navegación de sprites. Si usted no tiene una especialidad programa de codificación en 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 "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 la barra de navegación como se define en píxeles. El código CSS utilizará estas definiciones de píxeles.
4 Volver al archivo CSS en el editor de texto y agregue el código siguiente. Modificar la altura, la anchura, el nombre del archivo de imagen y los valores de margen para adaptarse al tamaño y características de la imagen.
{Margin: 0px; padding: 0px; } {nav
background: url (navbarsprite.png);
altura: 35px;
Anchura: 800px;
margin: 0 auto;
lapso de navegación {
display: none;
}
5 Dar la barra de navegación de una orientación adecuada en su página mediante el uso de las siguientes líneas de código CSS y agregarlos a su documento CSS:
li {nav
list-style-type: none;
float: left;
}
nav a {
height: 38px;
display: block;
}
6 Haga clic en "Ver" en Photoshop, y luego "Añadir gobernantes" para agregar un conjunto de reglas que aparecen en pantalla a la ventana en la que aparece la imagen de barra de navegación. Captura de la imagen y medir el ancho de cada botón de navegación en la barra de navegación.
7 Agregue el código siguiente a su archivo CSS, utilizando las mediciones de píxeles individuales de cada elemento. Por ejemplo:
lista1 {width: 110px; Lista2} {width: 110px; List3} {width: 125px; Lista4} {width: 123px; Lista5} {width: 131px;
8} Guarde el archivo CSS modificado y subirlo y la imagen barra de navegación para el servidor Web para comenzar a utilizarlo en el entorno de producción de la página web.