Curso de diseño web - Apuntes
Frames e iframes (marcos)
Los frames permiten armar una página con más de un archivo html. De esta manera cuando el navegador abre una página armada por ejemplo con 2 frames muestra dos archivos: uno a la izquierda para el menú y otro a la derecha para el contenido. Según el diseño esta estructura puede ser visible para el ususario o no. Lo más notorio es que cada HTML tiene un scroll independiente y esto se hace más evidente achicando la ventana del navegador.
Ventajas y desventajas:
Los frames se están usando poco. Hace unos años, las ventajas eran dos: la principal era que al resolver el menu en un solo html, las posibles modificaciones se hacían en una sola página y evitaba tener que modificar una por una las páginas de todo el sitio. Esta ventaja la reemplaza ahora el uso de plantillas de Dreamweaver. La otra ventaja que ya no tiene vigencia era que al hacer clic en un vínculo la página del menú permanecía a la vista y el navegador refrescaba sólo la de al lado, esto con las conexiones lentas era importante, pero ya no. La gran desventaja actual, que es el motivo por el cual dejaron de usarse como antes, es que el Google encuentra las páginas html por separado y el usuario que entra por Google puede abrir directamente la página del contenido sin el menu y probablemente sin el logo o sin más datos del sitio. Sólo los usuarios más avanzados saben que pueden llegar al index borrando parte de la url.
De todas maneras los frames se siguen usando para diseñar intranets (donde los usuarios no entran por Google). También se usan por otro motivo: porque un sitio armado con frames "esconde" la ruta de los archivos y se puede hacer que el usuario entre a otro sitio y no pueda ver su url verdadera porque queda enmascarada por la ruta del sitio armado con frames.
Como empezar:
Lo que hay que tener en cuenta es que un sitio armado con 2 frames, está compuesto en realidad por 3 archivos html. Se necesita un archivo más que organice los 2 html que ve el usuario en la ventana del navegador. A ese archivo se lo llama frameset o conjunto de marcos (este archivo no tiene la etiqueta <body> sino una etiqueta <frameset>).
Se puede armar de varias maneras, ésta es una:
1) crear un archivo nuevo y no guardar
2) en las herramientas diseño hacer clic en marcos, y seleccionar la opción marco izquierdo. El Dreamweaver muestra en línea punteada la ubicación de cada página
3) guardar cada una de las páginas (son 3 en total): conviene empezar por las páginas internas. Con el cursor en la página de la izquierda, guardar como menu.html. Con el cursor en la página de la derecha guardar como pagina1.html
4) guardar el frameset: seleccionando el borde alrededor de las reglas, en el menu archivo se habilita una nueva opción: guardar conjunto de marcos (frameset). Si el sitio empieza con esa estructura, entonces el frameset se guarda como index.html. Esta página no tiene contenido en sí misma (no tiene una etiqueta body). Esta página sólo define cómo se muestran los dos frames (verticales, horizontales, medidas de anchos o altos, con o sin bordes, con o sin scroll, etc) y que archivo html abre en cada uno.
5) para que los enlaces del menu carguen en el frame de la derecha, hace falta definir un nombre para este frame. Desde el menu ventana, marcos se abre una ventana con la estructura creada, seleccionando el frame de la derecha, en la ventana propiedades se le asigna un nombre, por ejemplo: contenido.
Al crear los enlaces, hay que definir el destino "contenidos" desde propiedades en el menu desplegable que está debajo del campo vínculo.
6) una vez que la estructura está resuelta se diseña cada página con todos los elementos necesarios: tablas, capas, imágenes, flash, estilos, etc.
Iframes
El iframe es una versión simplificada de los frames, sirve para cargar en una ventana de la página el contenido de otra página html, con un scroll independiente. Este mismo diseño (ventana con scroll) se puede hacer con una capa, pero el iframe permite mostrar contenidos que están en otra página. Se usa también para cargar publicidades (ver link recomendado).
Hasta el Dreamweaver 8 el iframe se insertaba desde el código html, pero en la versión más reciente CS3, se puede insertar desde un botón (en insertar/diseño/iframe). De todas maneras, hay que completar la línea por código. En el ejemplo de abajo, el iframe carga una página de este mismo sitio. De esta manera, el sitio podría tener un sólo formulario de consultas, y con un iframe, mostrarlo en todas las páginas.
El código queda así:
<iframe src="consultas.html" height="200" width="450" scrolling="auto"></iframe>