maquetacion (capas) adicional

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

DOCENTE: Salinas Encinas, Aldo [email protected] Página 1

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:



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.



¿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:



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



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:



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

Note el cambio en el panel comportamientos.



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



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

maquetacion (capas) adicional

Documents