Imagen de fondo
Además de los colores seguro que has visto alguna
página que tiene una textura como fondo. Aunque
últimamente está empezando a caer en desuso puede
ser un recurso interesante para la construcción
estética de nuestro sitio WEB.
Lo que hacemos cuando elegimos una imagen para colocarla como
fondo de nuestra página es considerar la pantalla como el
suelo de una habitación que iremos rellenando desde la
esquina superior izquierda con baldosas. Las baldosas serán
tan grandes o pequeñas como la imagen que hayamos elegido.
Para elegir la imagen que deseamos
utilizar como fondo de la página accederemos al panel que ya
conocemos mediante la opción de menú .
Si la imagen se encuentra fuera de la carpeta en la que
estamos trabajando podemos tener un problema cuando se publique la
página, por lo que se recomienda que, antes de insertar
una imagen, sea como fondo o como componente de la página,
se copie a la carpeta de trabajo o a una subcarpeta que cuelgue de ella.
Si la imagen que deseamos poner de fondo se encuentra en
la carpeta o en una subcarpeta de la misma, será muy
conveniente marcar
para
que la referencia no sea la ruta
absoluta hasta ella, sino su ruta
relativa
Si la página a la que le estamos aplicando el fondo
no ha
sido guardada todavía verás que no se activa la
casilla
para indicar que la URL es relativa a la página, ya que al
no
conocer aún cuál será la
ubicación de la
misma es imposible establecer rutas relativas hacia ella.
- Ruta
absoluta:
- Llamamos de esta forma a la ruta que recoge la
ubicación de
un determinado archivo sin tener en cuenta el punto desde el que se
solicita la referencia.
Por ejemplo: http://platea.pntic.mec.es/~rluna/index.html
También sería una ruta absoluta una referencia a
un archivo dentro de nuestro disco duro del tipo
file:///F:/WEBs/HTML/imagenes/lateralespiral.gif
- Ruta
relativa:
- En este caso tenemos en cuenta el punto desde el que damos
la
referencia del tipo imagenes/lateralespiral.gif
donde hemos eliminado la referencia inicial e indicamos que, desde el
punto donde estamos, encontraremos una subcarpeta en la que
estará la imagen lateralespiral.gif
Cuando creamos un sitio WEB es importante que todas las rutas sean
relativas para que al hacer una réplica de nuestro sitio en
el servidor todas las referencias sigan siendo válidas igual
que en nuestro disco duro. Por cierto, supongo que ya te
habrás dado cuenta que todos los archivos que formen parte
del sitio WEB deben estar en la carpeta principal o en subcarpetas de
la misma. (Por utilizar la metáfora de la casa: no podemos
guardar trastos en el cuarto del ascensor porque, a lo mejor, en el
nuevo edificio que sería el servidor WEB no hay ascensor o
está en otro sitio. Todo debe estar en habitaciones situadas
de la puerta de casa hacia adentro)
Ni que decir tiene que si tenemos que enviar a alguien a la "casa de un
amigo" tendremos que darle la dirección completa para que no
se pierda, esto es, la ruta absoluta.
Para hacer la siguiente práctica puedes utilizar
alguna de las imágenes que encontrarás en la
carpeta imagenes (sin tilde para garantizar la
compatibilidad). También puedes recurrir a
cualquiera de la multitud de páginas en la red que ofrecen
la posibilidad de obtener este tipo de imágenes. Tendremos
que "bajarlas" a nuestro ordenador, para lo que pulsaremos con el
botón derecho del ratón sobre la imagen que
queramos conseguir, y copiarlas en el directorio de trabajo para poder
incluirlas en nuestra página. (Aunque se podrían
guardar en cualquier directorio resulta más
cómodo hacerlo en el directorio en el que estamos trabajando
nuestras páginas, para no tener que irlas buscando por todo
el disco duro y, además, permitir la creación de
rutas relativas que funcionen posteriormente). Puedes probar a bajar
alguna imagen para el próximo ejercicio desde ColorVivo
- En esta
práctica verás la importancia
del tamaño cuando pretendemos utilizar un fondo lateral.
- En la carpeta de "imagenes" del CD-ROM tienes tres fondos
back640.gif, back800.gif y back1200.gif que simulan la espiral de un
cuaderno y un margen. La única diferencia entre las tres es
su
longitud.
- Crea una página y aplícale como fondo
la imagen
back1200.gif. Guarda la página como actividad20a.html. Suponiendo que tu pantalla esté configurada
para
mostrar una resolución de800x600 o 1024x768
píxeles que
son las dos más habituales, o incluso si tienes hasta 1200
píxeles de ancho, no habrá ningún
problema en la
visualización.
- Cambia el fondo y utiliza la imagen back800.gif. Guarda la página como actividad20b.html. Si tu
pantalla
está a 800x600 seguirá viéndose
correctamente,
pero si tienes una resolución mayor comprobarás
que
aparece un efecto de repetición muy desagradable
- Prueba con último con la imagen back640.gif.
Guarda la página como actividad20c.html. Salvo que tu
monitor sea muy pequeño y utilice aún una
resolución de 640x480 comprobarás que nuestra
"baldosa"
se repite horizontalmente.
Ten en cuenta que ya empieza a haber monitores que utilizan
resoluciones bastante altas, por lo que cuando quieras usar una imagen
lateral será conveniente que la modifiques para hacerla
más larga y evitar las repeticiones horizontales.