[FUNDAMENTOS DE PROGRAMACION WEB] HTML

Insertando imágenes
En toda página Web lo que llama más la atención viene a hacer imágenes que insertamos ya sea animada o no
animada, para ello podemos utilizar la etiqueta que es justo lo que me sirve para insertar imágenes.

Cuando estamos eligiendo la ruta aparecerá un botón examinar vea la imagen siguiente

Y elegimos dicha imagen que se mostrara en nuestro navegador

También podemos insertar una imagen utilizando la barra Insertar

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 1

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Si no aparece dicha barra insertar, seguro aparecerá el panel Insertar

Con el cual también podemos realizar lo mismo, pero si buscamos tener la barra insertar solo debemos cambiar
nuestro espacio de trabajo, el cual lo vimos en la parte inicial.

Asignando propiedades a nuestra imagen

Nuestra imagen insertada tiene las propiedades de tamaño (ancho, alto), borde, posición, etc. veamos que para
agregar dicha propiedades simplemente hay que agregarle propiedades, es decir, hacer un espacio como se
menciono en la parte inicial del tema de las etiquetas.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 2

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Estas propiedades también pueden ser modificadas desde el panel de propiedades, pero hay que tener presente de
elegir el objeto deseado, en este caso la imagen.

Como también el tamaño de la imagen se puede modificar jalando desde cada uno de los 3 tiradores que tiene, ver
imagen.

En el panel de propiedades aparece la opción Alt, es para escribir un comentario sobre la imagen que se muestra
veamos:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 3

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Hay que tener presente que esta opción Alt no funcionara en algunos navegadores, por ejemplo Mozilla Firefox,
Opera, etc.

También podemos editarlo dicha imagen, usando la suite que viene incorporado ahora dependiendo puede aparecer
el logo de photoshop o el logo de firework.

Pero también tenemos:

1.- Editar configuración de la imagen , cuando elegimos se mostrara la siguiente imagen.

2.- Recorte , cuando seleccionamos dicha opción se mostrara así:

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 4

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Y después de hacer clic sobre el cuadro de color blanco, automáticamente se recortara dicha imagen.

3.- Brillo y contraste , cuando elegimos esta opción nos da la opción de cambiar tal y cual dice el nombre.

4.- Perfilado , cuando elegimos dicha opción la imagen comienza a perfilarse.

Nuestra imagen como vínculo a una página Web

Para que una imagen sirva de vinculo hacia otra página o hacia otra imagen solo deberemos elegir una URL dentro de
la opción (ver imagen)

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 5

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Por ejemplo si buscamos que sirva de enlace hacia una página de nuestro sitio, podemos realizarlo de 2 maneras:

1.- utilizando la mira y seleccionar el archivo que buscamos que se cargue (ver imagen).

Igualmente podemos realizarlo pero, haciendo clic en , se mostrara los documentos en una ventana y elegiremos
el documento a cargar.

2.- La otra forma es digitarlo nada más, por ejemplo puede escribir así: ejemplo1.html como también se puede
escribir esta otra URL http://www.google.com.pe .

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 6

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Cualesquiera que sea su elección surtirá el mismo resultado. Por defecto cargara la página en sí mismo (self), pero
podemos cambiar, esta opción es Destino

Veamos el resultado

Colocando una imagen por debajo de otro objeto

Para poder realizar colocar una imagen por debajo de algún objeto solo bastara agregar una propiedad a la imagen,
dicha propiedad es z-index.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 7

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Efecto roIlover de una imagen

Este efecto, se crea con javascript, pero Dreamweaver nos da una opción mucho más fácil, este es imagen de
sustitución consiste en mostrar un evento al pasar el mouse por encima de una imagen y este cambiara por otra
imagen.

Debemos elegir esta opción desde el panel Insertar, ver imagen

Se mostrara la siguiente ventana

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 8

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Elija la imagen original, que es la que se mostrara como primera imagen, y después escoja la imagen de sustitución
que es la imagen que se mostrara cuando se pase el mouse por encima

Ahora si desea que le sirva de enlace hacia otro lugar, solo podemos realizarlo en URL.

Marcador de posición de imagen

Esta opción que nos presenta Dreamweaver consiste en crear una imagen al cual podemos agregarle las propiedades
de una imagen.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 9

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Se mostrara el siguiente cuadro en el cual hay que llenar los datos, que nos piden

Nombre de la imagen

Dimensiones
de la imagen

Color de la imagen

Texto de la imagen

Colocando la información pedida se mostrara como se ve

Así se verá en una

página Web

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 10

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Ahora como es una imagen tendrá las propiedades de una, veamos el panel de propiedades

Efectos de una imagen

En si son efectos creados en Javascript , pero Dreamweaver nos presenta de manera sencilla con solo un clic
podemos crear efectos muy complejos.
Para poder realizar (utilizar) dichos efectos debemos tener abierto el panel Comportamientos

Una vez con nuestra ventana comportamientos abierta ya podemos agregar efectos, veamos

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 11

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

1.- Agitar, se mostrara el siguiente cuadro

Seguro se mostrara el siguiente cuadro (ver imagen), solo debemos aceptar, ya que son los códigos javascript para
que funcione el efecto seleccionado

Ahora veamos el resultado de haber seleccionado Agitar, notara que se mueve de derecha a izquierda la imagen
seleccionada.

2.- Aparecer/desvanecer, en el podemos seleccionar cual de las dos opciones buscamos que se ejecute primero,
veamos el cuadro que aparece.

Alternar entre
aparecer y
desvanecer

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 12

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Nótese como la imagen está

desapareciendo y cuando
haya desaparecido volvemos
hacer clic y volverá aparecer.

3.- Arrinconar, este efecto arrincona la imagen al pulsar clic sobre la imagen, veamos

El resultado en el navegador, será:

Nótese como la imagen

se arrincona al hacer clic
sobre la imagen.

Nota

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 13

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Aunque en todos los casos hemos utilizado el mismo comportamiento , pero hay más comportamientos
el cual le podemos elegir otros, haciendo clic encima de dicho comportamiento.

Hay que tener presente que a cada imagen, le podemos agregar más efectos, se le sugiere ir utilizando otros efectos y
ver cuál de todos es posible aplicar y cual no, se verá más adelante el porqué?.

Zona interactiva a una imagen

Agregar zona interactiva a una imagen significa crear un área exclusivamente que me sirve de enlace (vinculo).

Zona interactiva poligonal

Zona interactiva circular

Zona interactiva rectangular

Puntero de zona interactiva

Por ejemplo vamos a utilizar la herramienta zona interactiva rectangular, comenzamos haciendo clic y arrastrar sin
soltar y se irá formando un rectángulo (ver imagen).

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 14

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Y con el puntero de zona interactiva podemos mover dicha zona

Lo mismo se utiliza para la herramienta zona interactiva circular, es decir clic y arrastrar, pero en cambio la
herramienta zona interactiva poligonal, hay que empezar haciendo clic en un punto e ir haciendo clic en otro punto
hasta rodear la zona que deseamos, veamos la siguiente imagen

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 15

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

En cualquiera de los casos, se presentara las mismas propiedades que debemos cambiar

Vínculo o hipervínculo

Nota
Podemos recordar el tema de vínculos
que vimos anteriormente.

Aunque el código no es tan sencillo de escribirlo, pero daremos una explicación, sin embargo, la sugerencia es utilizar
mejor la herramienta de diseño.

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 16

 [FUNDAMENTOS DE PROGRAMACION WEB] HTML

Zona interactiva
rectangular

Zona interactiva
circular

Zona interactiva
poligonal

Explicaremos cada una de las zonas interactivas

- Zona interactiva rectangular 

- Zona interactiva circular 

- Zona interactiva poligonal 

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 17