| |
Como se ha podido ver anteriormente, el diseño
de una página web implica la creación
de un archivo en código HTML, pero no es lo
único que debemos crear. En la mayoría
de los casos también desearemos incluir imágenes
y para ello será necesario crear los correspondientes
archivos gráficos.
El proceso para incluir una imagen en una página
empieza por la creación de la imagen con
un programa de diseño gráfico o mediante
su digitalización con un escáner.
Será necesario que conozcamos alguno de los
programas de diseño gráfico que existen
en el mercado. Son muy interesantes Photoshop, Paint
Shop Pro o Fireworks. En un principio podremos contentarnos
con manejarlos por encima y nos resultará
muy fácil, pero según avancemos en
el camino como diseñadores web será
más necesario dominarlos para obtener resultados
más profesionales.
Los tipos de archivos gráficos que soporta
Internet son el JPG y el GIF. Tienen características
distintas y por tanto usos distintos.
Una vez que tenemos los archivos gráficos
los ponemos en el mismo directorio que los archivos
HTML o en un subdirectorio de este y en el código
de la página HTML pondremos una etiqueta
especial para incluir la imagen, o la insertaremos
con nuestro programa editor de HTML.
Lo importante de todo esto es que nos percatemos
que el sitio web está compuesto por archivos
HTML, GIFs, JPGs e incluso los correspondientes
archivos que contengan videos, animaciones Flash,
programas Java, etc. Todos estos archivos los tenemos
que tener bien localizados dentro de nuestro disco
duro y dentro de un mismo directorio. Por supuesto
el orden como estén los archivos dentro del
directorio es indiferente, pero podrá ser
interesante que incluyamos subdirectorios para que
quede todo más ordenado y su mantenimiento
sea más fácil. Por ejemplo, una técnica
muy habitual es colocar todas las imágenes
dentro de un subdirectorio llamado images.
El objetivo de tanto orden y conocimiento de la
localización de todos los archivos es que
luego tendremos que subirlos al servidor sin olvidarnos
de ninguno. En capítulos posteriores veremos
cómo se hace este paso.
Un problema típico con las imágenes
y otros archivos externos consiste en que cuando
vemos las páginas en nuestro ordenador se
ven correctamente y no falta ninguna imagen ni otros
posibles elementos. Sin embargo, cuando subimos
los archivos al servidor y vemos la página
desde Internet esta se muestra con errores en las
imágenes y otros elementos, de modo que no
se pueden ver. Esto suele llamarse tener una imagen
"rota". La razón por la que está
rota es que no puede localizarla en el servidor
y por tanto no la puede mostrar. Esto puede ser
debido a varias razones:
| * |
La imagen no ha sido subida al
servidor |
| * |
La posición relativa de la imagen con
respecto a la página no es la misma en
nuestro ordenador (local) y en el servidor (remoto).
Por ejemplo, las imágenes en local podrían
estar en el directorio images mientras que en
remoto podrían estar en el mismo directorio
que la página, lo que sería un
error. Siempre se debe respetar la estructura
de directorios que hay en local y crearla exactamente
igual en remoto. |
| * |
Trabajar siempre con una extensión
del archivo HTML específica. No mezclar
en un mismo proyecto páginas con extensión
.html y .htm. |
Hay una forma muy útil de obtener pistas acerca
del fallo de una imagen, consiste en pulsar con el
botón derecho del ratón sobre ella y
seleccionar propiedades. Esto nos muestra información
sobre la imagen y nos informa sobre el sitio donde
se está intentando encontrarla.
|
