TIP # 1: TABLA INVISIBLE
Si deseas utilizar un background con borde, es importante que hagas
una tabla para que tu texto quede fuera de los márgenes. Se supone que hagas una
tabla invisible, pero en esta página le puse un borde para mostrarte cómo queda.
Si deseas puedes copiar el siguiente código y colocarlo en tu
página. Fíjate que el lugar donde vas a escribir en tu página está identificado
en el código con la palabras "TEXTO AQUI". Simplemente
borra esas dos palabras y escribe tus propias palabras.
En este ejemplo yo coloqué un 72% de "width",
este es el ancho de la tabla que utilizé en esta página, pero dependiendo del background
que utilizes ésto puede variar. En todos las páginas que muestran los backgrounds
de borde que hice, utilizé desde 65% hasta 90% dependiendo del ancho del borde. A
menor el ancho del borde, mayor debe ser el porciento.
El "border" debe ser "0" para que tu tabla sea
invisible.
El "cellpadding" puede variar según tu gusto. En el
código yo coloqué "0", pero en la tabla de esta página yo puse
"10". Esto sirve para que el texto o las imágenes tanto a los lados como
en la parte de arriba y la de abajo, no queden muy cerca del borde.
El "cellspacing" en una tabla invisible no es tan importante,
puede quedar en "0", pero para mostrarte lo que significa, en la tabla de esta
página ves doble borde. Esto es porque puse un "cellspacing"
de "10". Si hubiera puesto "0" sólo se distinguiría un borde.
El "cellspacing" es el espacio entre borde interior y
borde exterior.
Ahora bien, esta manera es la más sencilla y funciona muy bien, pero sólo lo verán
igual correctamente aquellas personas que utilizan la misma resolución que tú en tu
computadora. Ejemplo, mis tablas sólo la verán bien aquellas personas que tienen
una resolución de 800 x 600.
Existe otra manera de lograr que todos vean tu página correctamente en cualquier
resolución. Esto es haciendo una tabla con dos columnas y colocar en la columna de
la izquierda un gif invisible con las medida de ancho que mide el borde de tu background.
Para esto necesitarás saber con exactitud la medida en pixeles de cada imagen.
Es un poco más complicado si no tienes un editor de gráficas que te dice estas
medidas.
Aquí colocaré para ti el código y un gif invisible que puedes
guardar haciendo click con el botón derecho del mouse, en el menú escoge "Save
image as..." y luego busca un lugar de tu hardisk para guardarlo. El gif se
encuentra en la siguiente tabla, se llama "invisible.gif". (Ojo! No
lo ves, es invisible!!! jeje... pero está ahí, créeme...)
Este es el código que puedes utilizar. Más adelanto te
explico...
Este código tiene una tabla con dos columnas. En la columna de
la izquierda va el gif invisible. En este caso coloqué un número "215"
de "width", esta es la medida del ancho del borde que utilizé
en esta página, más o menos. Puede variar según tu gusto, pero yo coloqué este
número porque me pareció que quedaba bien. No todos los bordes tienen la misma
medida. Más adelante en el código ves esto: <img
src="invisible.gif" width="215" height="100"
border="0">. Asegúrate de poner el src correcto, o sea, el
directorio donde se encuentra tu gif invisible, puede ser algo como image/invisible.gif u
otro directorio donde hayas colocado tu imagen. El width es como ya vimos antes el
ancho de los márgenes de mi background, donde está la imagen. Yo quiero ese
espacio que quede libre de texto, pues bien, por eso coloqué ese número. El "height"
no es tan importante, puede ir desde 1 hasta 100 o el número que gustes. El borde
siempre debe ir en "0".
En el código también coloqué las palabras "TEXTO AQUI" para que sepas
en el lugar exacto donde debes escribir, pero recuerda borrar esas dos palabras.
Si deseas ver un ejemplo de cómo quedan las dos columnas y el gif invisible, ve a esta página. Le coloqué bordes (que deberían ir siempre
en "0" para que puedas ver cómo quedan.)
Esto es todo en cuanto a las tablas invisibles: pero algo que
no puedo dejar de decirte es que los backgrounds con bordes que hice, son todos con un
ancho de 810. O sea, que aquellos que usen resoluciones mayores, no las verán
bien... uff.. pero... tengo la esperanza de que la mayoría de la gente utilize
resolución 800 x 600 o menor. =)
TIP # 2: BORDE ANIMADO
Si deseas que tu background de borde sea animado, como el
de esta página, puedes utilizar el siguiente Java Script.
Cópialo y pégalo entre los tags <body></body>
de tu página. Puedes utilizarlo tanto para backgrounds con
borde como los de mozaico (tiled).
[ Backgrounds imágenes ] [ Backgrounds abstractos ]
[ Backgrounds abstractos II ]
[ Backgrounds de bordes I ] [ Backgrounds
de bordes II ]
[ Backgrounds de bordes transparentes ]
[ Backgrounds de bordes transparentes II ]
[ Inicio ] [ Tips ]
Ultima actualización: June 21, 2002
Yaz © 06/18/01
|
