Download - 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:
[FUNDAMENTOS DE PROGRAMACION WEB] HTML
DOCENTE: Salinas Encinas, Aldo [email protected] 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 [email protected] 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 [email protected] 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 [email protected] 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 [email protected] 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 [email protected] 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 [email protected] Página 8
El código que se necesito para realizar dicha maquetación fue: