Vous êtes sur la page 1sur 8

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

CREANDO CAPAS (Maquetación 2)


¿Qué es un Iframe?

Es un contenedor al igual que una capa <div></div>, pero que sirve para
mostrar objetos que una capa no puede mostrar, por ejemplo: archivos
pdf, páginas Web, videos ya sea local, como también videos externos
como youtube. Ahora vamos a ver la sintaxis de un iframe

Sintaxis

<iframe></iframe>

¿Cómo utilizar un <iframe>?

Bueno, empecemos a crear un iframe, para ello debemos tener presente que objeto (documento PDF, pagina Web,
video interno o externo) vamos a cargar, entonces vamos a mostrar en donde se encuentra ubicado dicho archivo,
para el presente ejemplo vamos a cargar un documento PDF.

Ahora en Dreamweaver veamos cómo crear nuestro iframe:

Veamos como quedara cuando elijamos el documento a cargar:


DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com Página 1
[FUNDAMENTOS DE PROGRAMACION WEB] HTML

Debemos tener presente que las propiedades de un <iframe> son las mismas de las propiedades de una capa <div>,
por lo que podemos utilizarlo. Veamos entonces coloquemos alguna propiedades para mejorar nuestro primer
diseño.

Veamos el resultado en un navegador, para variar he escogido el navegador Google Chrome.

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


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

¿Qué más podemos cargar con un <iframe>?

Como ya mencionamos anteriormente podemos cargar a parte de documentos PDF, también podemos cargar
páginas Web internas o externas también videos internos y externos, como también imágenes; veamos algunos
ejemplos:

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


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

Colocando animación a una capa y/o iframe

Como ya habíamos visto cuando insertamos imágenes en un capítulo anterior, colocamos animaciones igualmente
vamos a colocarlos a nuestras capas y/o iframes, solo debemos aprovechar las potencialidades del software
Dreamweaver CS5, primero tenemos que ver mostrar la ventana que nos permitirá utilizar dicha animación:

Vamos a menú ventana/comportamientos

O también (Shift + F4)

Veamos en un ejemplo el uso de ello,


crearemos una capa

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


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

Ahora colocaremos comportamientos para ello nos dirigimos a la ventana mostrada anteriormente y hacemis clic en
el signo (+), ver grafico

Mostrándose la siguiente ventana:

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


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

Elegimos así como se muestra en la imagen de arriba y veamos el código generado.

Note el cambio en el panel comportamientos.

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


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

Desarrollando una página Web con capas

Ahora vamos a maquetar una página Web pero con capas, los cuales deben funcionar con Opera y Firefox , google
Chrome(al menos en sus últimas versiones) y Internet Explorer.

Vamos viendo el código que estamos generando para crear hasta este momento lo que hemos presentado
anteriormente.

Agregaremos algunas capas más y algunos iframes más con la finalidad de llegar a tener la siguiente imagen

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


[FUNDAMENTOS DE PROGRAMACION WEB] HTML

El código que se necesito para realizar dicha maquetación fue:

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