Curso de DVD Shrink - copia y graba tus DVD a DVD-R
Un Tutorial de www.GuiasyTutorialers.es por FerCyborg
© Fernando Sánchez (FerCyborg)
visitas:
Manual de Diseño Web, manual gratis y curso completode DreamWeaver, HTML, FrontPage, GoLive. Guia paso a paso por FerCyborg

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:


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:

Botones independientes
Botones de fondo de celda
hay que crearlos 1 por 1 en PhotoShop
sólo hay que crear 1
si añadimos nuevas opciones, hay que crer un nuevo botón
sólo hay que añadir una fila nueva y el texto que le corresponda
el tamaño en Kb que ocupan es el de uno de ellos multiplicado por en número de opciones
sólo hay un archivo gráfico, por lo que se ahorra mucho espacio
se cargan más lentamente
se cargan más rápidamente
se ven bien en cualquier navegador
podrían descolocarse en otros navegadores

se pueden usar imágenes de sustitución (más bonito, pero también ocupa mucho más)

no se pueden usar imágenes de sustitución, al ir al fondo
se puede hacer clic en cualquier parte de la imagen
sólo se puede hacer clic en el texto, y no en la parte del botón donde no haya texto.

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.

eMule

DVDShrink

Ares

Flash

Bajar MP3


Otros ejemplos:

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 :


más manuales de creación web en: Tutoriales de Diseño de Páginas Web

Si tienes cualquier duda sobre éste u otros programas, puedes acudir a nuestra comunidad en MSN AprendeMP3yMIDI, donde más de 2.000 personas comparten conocimientos y experiencia.

Google
 

© 2007Fernando Sánchez Gómez (FerCyborg)
Prohibida la copia. Todos los derechos reservados.