Tutoriales de Diseño de Páginas Web por FerCyborg

Con este manual completo y gratuito podrás aprender cómo usar DreamWeaver y HTML para crear páginas y sitios web.

Contenido:

• 1-Introducción

El "truco" de los fondos de celda para crear botones

En una página web, normalmente necesitaremos un menú para que los visitantes puedan elegir la página que desean ver.

Estos menús pueden realizarse con texto o con gráficos. Crear un menú de texto es muy sencillo, porque sólo hace falta teclear el texto deseado y asignarle un enlace (En DreamWeaver se usa la casilla "Vínculo" del inspector de propiedades).

En cambio, para crear un menú gráfico (usando imágenes como enlaces -"botones"-), necesitaremos primero crear las imágenes con un programa adecuado, como PhoShotop, Paint Shop Pro o similares (hasta el simple Paint bastaría, en el peor de los casos).

Esto requiere un conocimiento suficiente del programa de edición de gráficos, y un mayor esfuerzo, puesto que debemos crear cada gráfico "por separado". Además, si en el futuro creamos nuevas páginas o secciones en la web, tendremos que crear nuevos botones gráficos para ampliar el menú.

Podemos simplificar esta tarea, con resultados relativamente parecidos, siguiendo el método que describimos a continuación:

La idea es: en vez de crear botones gráficos diferentes para cada opción del menú, hacer un sólo botón gráfico "vacío" (sin texto), y escribir los enlaces como textos que aparecerán "por encima".

Por supuesto, necesitamos un diseño de botón "vacío", que podemos crear nosotros mismos, o descargar alguno gratuito de Internet, pero sólo con uno podremos crear cuantos botones necesitemos.

Si no quieres sabes cómo crear tus propios botones, puedes usar los siguientes:

(descárgalos haciendo clic derecho y elige "Guardar imagen como...")

Si quieres más, puedes encontrarlos en la siguiente página: botones vacíos para usar en tu página web.

Para que el texto quede por encima, hay que crear una tabla y poner los botones gráficos como fondo de celda, y ajustar el tamaño de la misma para que se vean enteros y sin repetirse. Después escribiremos los textos deseados, y les asignaremos los vínculos.

Veamos sus ventajas e inconvenientes:

NOTA: para que el gráfico del botón salga entero y sin repetirse, puede ser necesario eliminar los bordes de la tabla, dejar a 0 los parámetros "Relleno de Celda" y "Espacio de Celda" y ajustar numéricamente el ancho y alto de las celdas (o incluso el de la tabla).

A continuación, varios ejemplos de este sistema:

En este caso, la imagen de fondo es:

que al colocarla como fondo de celda en la tabla, y eliminando el borde de la tabla, así como el espaciado de celda, queda así (se consigue el aspecto gráfico deseado sin que se note que es una tabla):

A menudo interesará centrar los textos dentro de las celdas para un mejor efecto visual. Si fuera necesario, podemos cambiar la colocación vertical y horizontal mediante el inspector de propiedades de las celdas (seleccionando varias a la vez).

Si deseamos dejar espacio entre un botón y otro, al crear la imagen, dejaríamos un espacio vacío por debajo, es decir: el archivo de la imagen sería unos pixels más alto que el dibujo del botón en sí.:

en vez de: , usaremos: (se ha rellenado de azul el hueco para poder verlo, pero en realidad habría que hacerlo transparente, para lo que no sirven gráficos JPG. Los formatos GIF y PNG sí soportan transparencia):

En este caso, nótese que los textos no quedan del todo centrados (en vertical), por lo que podríamos dejar parte de la zona transparente arriba y parte abajo, para mejorar el centrado vertical.

En el caso siguiente, aunque no se lee bien la letra, sí se vería si usamos hojas de estilo para indicar colores claros en los textos vínculados (o si cambiamos el color de los enlaces en las propiedades de la página).

Puedes ver el resultado de cambiar las propiedades de la página para ver una posible combinación de colores más efectiva (se abre en una ventana nueva).

El menú también puede usarse en una tabla en horizontal:

En este caso, es importante ajustar numéricamente el ancho y alto de las celdas y el de la tabla. El ancho de la tabla debe coincidir con la suma de los anchos de todas las celdas. En este ejemplo, la imagen de fondo (el botón) mide 90x32; como tenemos 5 botones, el ancho de la tabla debe ser el producto de 90 por 5, es decir, 450.

No es necesario que el botón sea rectangular, puede tener cualquier aspecto, pero en este caso, es preferible que sea un GIF o PNG transparente, para que combine bien con cualquier fondo.

En el ejemplo siguiente, he usado "huecos" (imágenes totalmente transparentes) para que el texto se colocara en la parte rectangular, y no sobre la estrella.

Otros ejemplos:

eMule DVDShrink Ares Flash Bajar MP3 PowerPoint

eMule Ares DVDShrink Flash Bajar MP3

En el tercer ejemplo, hemos usado como fondo

También podemos hacer enlaces totalmente gráficos, usando imágenes transparentes sobre el fondo, como éstas:

con este fondo:

quedaría así:

otro ejemplo: usando como fondos: y , y como imágenes: ,y :