maquetacion (capas) adicional

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

DOCENTE: Salinas Encinas, Aldo salinas282003@hotmail.com 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:

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

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.

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

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

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

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

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

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:

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

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

Note el cambio en el panel comportamientos.

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

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

[FUNDAMENTOS DE PROGRAMACION WEB] HTML

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

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