En este tema vamos a ver cómo insertar imágenes en un documento. También veremos
cómo crear algunas imágenes especiales, como es el caso de los Rollovers y los
botones flash, que ayudan a mejorar la apariencia de nuestras páginas.
Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen.
Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana.
1) Vamos a insertar dentro de la página index.html de nuestro sitio web DREAM unas
cuentas imágenes. Éstas deberán guardarse previamente dentro de una carpeta llamada
IMAGENES que deberás crear dentro del sitio web DREAM. Las imágenes a insertar
las tienes dentro de la carpeta C:\ ALUMNO \ RECURSOS PARA EL ALUMNO \
IMÁGENES:
AERONAVE.JPG ARCO.JPG AVION.JPG CADENA.JPG
Ponerlas una debajo de la otra centradas, utilizando el botón centrar y guardar la página
‘index.html’
Cambiar el tamaño de una imagen
Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Dicho cambio
de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía
es la visualización de la imagen dentro de la página (por lo tanto no es recomendable).
Es muy probable que la imagen resultante no sea de buena calidad, en comparación de
como podría quedar modificándola desde un editor externo, como Photoshop o Gimp.
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa al
icono de Dreamweaver y modificamos su tamaño de varias formas diferentes:
Imagen original
Imagen con tamaño modificado
Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en
ocasiones puede resultar útil modificar el tamaño de algunas imágenes aunque esto
implique perder calidad.
Existen dos formas de modificar el tamaño:
- Una de ellas es, una vez seleccionada la imagen, arrastrar con el
puntero alguno de los recuadros negros que aparecen alrededor de la
imagen.
- La otra es a través de la ventana de propiedades, cambiando los
campos An (anchura) o Al (altura). Estos campos aparecerán en el
inspector cuando sea seleccionada alguna imagen.
Para cambiar la alineación de la imagen (izquierda, centrada, derecha) podemos hacerlo
igual que hicimos con el texto, utilizando las opciones de alineación de la ventana de
propiedades.
Pueden crearse vínculos y comportamientos sobre partes de una imagen, sin la
necesidad de que sea sobre toda ella. A esto se le conoce como mapa de imagen.
2) Vamos a abrir la página web “index.html” y modificaremos el tamaño de las
imágenes que antes insertamos, de forma que queden con el siguiente tamaño y
alineación:
IMAGE ANCHURA (AN) ALTURA (AL) ALINEACIÓN
AERONAVE.JPG 600 200 Derecha
ARCO.JPG 150 500 Centrada
AVION.JPG 300 300 Izquierda
CADENA.JPG 500 100 Derecha
3) Ahora crearemos dentro de nuestro sitio web DREAM, tres páginas más, llamadas
“valencia.htm”, “andalucia.htm” y “madrid.htm”. Éstas tendrán el siguiente texto
dentro:
- valencia.htm = “Página principal de la Comunidad Valenciana” , con fondo amarillo
- andalucia.htm = “Página principal de la Comunidad Andaluza”, con fondo rojo
- madrid.htm = “Página principal de la Comunidad de Madrid”, con fondo naranja
4) A continuación, guarda las páginas anteriores y crea una página web nueva
llamada “mapa.htm”, donde añadiremos una imagen del mapa de España (que
previamente los debes bajar de Google).
Seguidamente definiremos sobre ella un mapa de imagen. Esto significa
que dependiendo de la zona de la imagen donde pinchemos podremos abrir
un hipervínculo diferente. Para ello utilizaremos la herramienta
Dibujar con esta herramienta el contorno de la Comunidad
Valenciana y luego donde pone vínculo, establece la
página ‘valencia.htm’.
Haz lo mismo con el resto de Comunidades, guardar los cambios y comprueba que
todo funciona correctamente pulsando sobre F12.
Guarda los cambios a la página “mapa.htm”.Mucho Éxito!!!
No hay comentarios:
Publicar un comentario