Banner extensible

Kompozer: Banner extensible

Una de las partes más características de una web es su cabecera o banner. Éste puede ser de un ancho fijo o medir un tanto por ciento del ancho de la resolución del monitor del visitante. Para este caso necesitamos un banner que actúe como una goma pero sin que se deforme el gráfico.
Aquí lo vamos a hacer con un engaño basado en crear el banner en tres imágenes, de las cuales la del medio es un patrón que se repetite las veces necesacias para unir las dos de los extremos. Estas son nuestras imágenes.

Para la parte izquierda:

Para la parte central que se repetirá las veces que sea necesario para ajustarse:

Para la parte de la derecha:

Mediante el uso de DIVs y CSS vamos a conseguir que se dilate o contraiga la parte central para que se adapte según lo explicado anteriormente:

Comenzamos.
Una vez que creamos nuestro nuevo documento HTML en KompoZer generamos un DIV con Formato/Párrafo/Contenedor genérico (DIV) que se hará visible en la interfaz con un contorno punteado de color rojo que abarca el 100% del ancho de la resolución. Como el cursor se encuentra dentro del DIV pulsamos "Intro" para que se cree una nueva línea y poder así crear dentro de ese DIV otros dos (uno encima del otro) por el mismo método de antes.

El resultado en la interfaz gráfica de KompoZer sería este:

La cuestión ahora está clara: el DIV contenedor incluirá la imagen central que se repite y los otros dos DIVs incluirán las dos imágenes que se colocarán a los extremos.
Lo necesario ahora es que cada uno d elos DIV tenga du propia identidad ID para que podamos editar sus características a nivel individual.
En la parte baja de la interfaz, hacemos clic derecho sobre la primera etiquera <div>...

...y escogemos Propiedades avanzadas. Esto nos conduce a un cuadro en el que escogemos como atributo id y como valor escribimos centro.
Luego nos aseguramos de poner el cursor en el interior del DIV de arriba que se encuentra dentro de centro y hacemos lo mismo pero dándole un valor izquierda; al de abajo le damos un valor derecha.

Guardamos nuestro proyecto y después acudimos al editor de CSS (si no hemos guardado con anterioridad KompoZer nos pedirá que lo hagamos ahora) con Herramientas/Editor CSS

Creamos tres reglas con los nombre de los valores de antes y precedidos de # (si escogemos la opción adecuada, KompoZer nos ofrecerá un menú con todas las id que hay en el documento)

#centro
#izquierda
#derecha

Es el momento de comenzar a dar estilo. Empezamos por #centro:

Fondo:cargamos la imagen que hará de patrón. Escogemos repetir horizontalmente
Caja: Le damos una Anchura en % de un valor de 90%. La culpa de esto la tienen las esquinas redondas que le he puesto a las imágenes de los lados. Luego veremos por qué. En la altura escogemos un valor en píxeles de 241px, que es el tamaño del bitmap que he creado. En los Márgenes le damos un valor, tanto a Derecha como a Izquierda, de Auto para que se centre en la página. Este DIV se llevará consugo a los dos que tiene cdentro.

#izquierda:

Fondo: la imagen del coche con la particularidad de que no se repita ni horizontal ni verticalmente.
Caja: igual que antes el alto es de 241px y ahora el ancho es 353px (el ancho es necesario para que los Float de más adelante funciones bien)

#derecha:

Fondo: La imagen del texto
Caja: la misma altura de antes y un ancho de 341px

Tenemos esto:

La cosa marcha.
Aparentemente sólo hay un hecho a tener en cuenta y es la localización del bitmap del DIV de abajo. Esto se soluciona editando la Caja de #izquierda con Flotar a la izquierda y #derecha con Flotar a la derecha.

Los gráficos se colocan en su sitio pero surge el problema de las esquinas redondeadas de los bordes. Es necesario que los gráficos laterales se desplacen ligeramente para evitar eso. Así que vamos a la Caja de #izquierda y le creamos un margen izquierdo de -15px (negativo). Con el gráfico de la derecha hacemos lo mismo pero le editamos el margen derecho en -15px (negativo).

En realidad este último problema podía solucionarse con el esquinazo de color en lugar de transparente. Pero esa opción sólo es válida si el fondo de la web es uniforme.

Este es el código final:

#centro {
background-image: url(patron.png);
background-repeat: repeat-x;
height: 241px;
width: 90%;
margin-right: auto;
margin-left: auto;
}
#izquierda {
background-image: url(img_izq.png);
height: 241px;
background-repeat: no-repeat;
width: 353px;
float: left;
margin-left: -15px;
}
#derecha {
background-image: url(img_der.png);
background-repeat: no-repeat;
height: 241px;
width: 341px;
float: right;
margin-right: -15px;
}

Para conocer más tutoriales visite
El Blog de Joaclint Istgud

Y hasta aquí el tutorial. Si considera que está incompleto, que tiene errores o quiere aportar alguna mejora, deje su sugerencia aquí

Joaclint Istgud con