Interface del Sitio

Interface - Barra de Navegación
Federico Cargnelutti http://www.webtutorial.com.ar

Antes de comenzar a diseñar la interface del Sitio debemos tener una idea muy clara de lo que vamos a hacer. Los tres puntos más importantes a tener en cuenta son: colores, tipografías e imágenes que vamos a utilizar. A continuación se detallan los pasos a seguir para crear una barra de navegación simple, moderna e interactiva. Podes ver un ejemplo de la misma haciendo clic acá.

1. Encabezado del Sitio
2. Barra de navegación
3. Precarga
4. Interacción
5. Consejos

1. Encabezado del Sitio

a) Abrimos el Editor de imágenes (Photoshop, Photo Paint, Photo Impact, etc.) y creamos un documento nuevo.

Ancho >> 760 pixeles, Alto >> 80 pixeles, Resolución >> 72 dpi, Color >> Azul marino.

b) Diseñamos el encabezado del Sitio.

c) Redondeamos las puntas de la imagen.

d) Cortamos la imagen en 3 partes y las guardamos como: 01.gif, texto.gif y 02.gif.

e) Abrimos el Editor HTML (Dreamweaver, Front Page, etc.) y creamos una tabla con tres celdas.

Tabla: Ancho >> 760 pixeles
Celda de la izquierda: Ancho >> 39 pixeles (debe tener el mismo ancho que la imagen)
Celda de la derecha: Ancho >> 39 pixeles (debe tener el mismo ancho que la imagen)
Celda del medio: Ancho >> 682 pixeles (los pixeles que faltan para llegar a 760)

f) Insertamos las imágenes dentro de sus respectivas celdas y guardamos el documento HTML.

2. Barra de navegación

a) Abrimos nuevamente el Editor de imágenes y creamos un documento nuevo.

Ancho 76 pixeles, Alto 30 pixeles, Resolución 72 dpi, Color Negro.

b) Superponemos 4 rectángulos para darle un efecto de relieve a la barra de navegación:

c) Cortamos la última imagen en 3 partes: (1) izquierda.gif, (2) centro.gif y (3) derecha.gif.

d) Abrimos el Editor HTML y creamos otra tabla con tres celdas.

Tabla: Ancho >> 760 pixeles, Color de fondo >> Gris
Celda de la izquierda: Ancho >> 37 pixeles (debe tener el mismo ancho que la imagen)
Celda de la derecha: Ancho >> 37 pixeles (debe tener el mismo ancho que la imagen)
Celda del medio: Ancho >> 686 pixeles (los pixeles que faltan para llegar a 760)

e) Insertamos la imagen (1) izquierda.gif en la celda de la izquierda y la imagen (3) derecha.gif en la celda de la derecha.

f) Insertamos la imagen (2) centro.gif como fondo de la tabla y guardamos el documento HTML.

g) Ahora nos falta crear los botones. Abrimos el Editor de imágenes y creamos un documento nuevo.

Ancho >> 76 pixeles, Alto >> 26 pixeles, Resolución >> 72 dpi, Color >> Gris.

h) Escribimos en el documento el nombre del enlace INICIO y guardamos la imagen con el nombre de boton01.gif.

i) Repetimos los puntos G y H hasta crear todos los botones de la barra de navegación.

j) Creamos una imagen nueva para utilizar como separador. Abrimos un documento nuevo.

Ancho >> 2 pixeles, Alto >> 26 pixeles, Resolución >> 72 dpi, Color >> Gris oscuro.

El pixel de la izquierda debe ser gris oscuro y el de la derecha gris claro. Guardamos la imagen con el nombre de linea.gif

Ejemplo: Imagen ampliada:

k) Abrimos el Editor HTML e insertamos los botones dentro de la celda del medio. Para separar los botones utilizamos la imagen linea.gif. Ejemplo: linea.gif - boton01.gif - linea.gif - boton02.gif - linea.gif - boton03.gif - etc.

l) Creamos los hipervínculos. Por el momento el Encabezado y la Barra de navegación nos quedarían de la siguiente manera:

m) Creamos otra serie de imágenes que luego vamos a utilizar para crear el efecto "Roll Over". En este caso las imágenes son similares a la de los botones anteriores, pero un poco más claras.

Vamos a llamar a estas imágenes boton01a.gif - boton02a.gif - boton03a.gif - boton04a.gif

Nota: No hace falta que diseñes nuevamente las cuatro imágenes. Podes abrir las imágenes anteriores, cambiarles el brillo y guardarlas con otro nombre, de esta manera te vas a ahorrar mucho trabajo.

3. Precarga

Vamos a utilizar un JavaScript para realizar la precarga de las imágenes.

a) Abrimos el Editor HTML, nos vamos al código fuente del documento y copiamos el siguiente JavaScript dentro del tag <head>

Este Script le indica al navegador que cargue las imágenes de la Barra de Navegación antes de leer los tags que se encuentran dentro del Cuerpo del documento HTML.

4. Interacción

Vamos a utilizar dentro de los tags <img> OnMouseover y OnMouseout para que la Barra de Navegación interactúe con el puntero del mouse. A este efecto se lo conoce con el nombre de "Roll Over", que en español significa "Pasar por encima".

a) Volvemos nuevamente al código fuente, nos dirigimos al <body> del documento y dentro del tag <img> escribimos lo siguiente:

(Tomamos como ejemplo la imagen boton01.gif)

Lo que le estamos indicando al navegador es que muestre la imagen boton01.gif cuyo nombre es b01. En caso de que el puntero del mouse pase por encima de la imagen, que la cambie por boton01a.src, no te olvides que boton01a.src está definida dentro del JavaScript que insertamos en el <head> como boton01a.gif. Lo mismo sucede con OnMouseout pero a la inversa.

c) Repetimos el punto A con las demás imágenes de la Barra de Navegación. Nota: Si la primer imagen se llama b01, la segunda se deberá llamar b02 y así sucesivamente.

b) Listo, veamos como nos queda:

Podes hacer clic con el botón derecho del mouse y seleccionar "Ver código fuente" para ver la Barra de Navegación terminada dentro del código HTML.

5. Consejos

Es muy importante incluir todos los links internos dentro de cada página siempre en el mismo lugar. Si la barra de navegación está compuesta por imágenes como es en este caso, es muy importante agregar otra barra de navegación que contenga los mismos enlaces pero en forma de texto. De esta manera las personas que tengan configurado el navegador para no mostrar imágenes van a poder navegar por el Sitio sin problema.

Las imágenes se pueden guardar en formato JPG o GIF, ya que son los únicos admitidos por el navegador. Estos formatos guardan las imágenes comprimidas, por lo que hay que estar muy atentos al nivel de compresión que se puede lograr para nuestras imágenes. Cuando se trabaja con imágenes que contienen muchos colores, se recomienda guardarlas en formato JPG, y cuando se trabaja con gráficos con pocos colores se recomienda en formato GIF. No hay que olvidarse que el formato JPG no admite transparencias.

Tutorial escrito por Federico Cargnelutti

23 de Mayo de 2001