03 diciembre 2006

Dreamweaver: Marcos (vulgarmente llamados "Frames")

Los marcos son muy útiles a la hora de diseñar páginas güev (o sea, la versión mexicana de la "web", jeje) de todo tipo. Básicamente es una zona de la página que contiene otra página y su contenido es independiente de los otros elementos en la ventana del navegador. Podemos hacer páginas web que definan un conjunto de marcos y jugar entre ellos con ligas y muchas otras cosas divertidas.

Antes de empezar con todo el choro mareador que traigo, quiero que recuerdes que los marcos no son la solución definitiva para todo tipo de formatos chidos en páginas web. De hecho, pese a que antes eran muy usados, han comenzado a caer en desuso. Pero yo los explico aquí y ya es bronca tuya si los usas o no o como los uses o porque los usas o donde los usas o con quien los usas... en fin, ahi va.

Para este experimento, empecé haciendo una nueva página HTML. El archivo lo llamé "marcos.html". Lo voy a ir transformando en un archivo que defina 3 marcos: uno arriba uno estrecho a la izquierda y otro de todo el espacio que queda.

Para insertar un marco, pongo el cursor (o sea la rayita vertical que parpadea, no la del mouse) en la página o marco donde deseo añadir uno. Una vez situado, posicionado y listo para la acción, voy en los menús Insert>HTML>Frames (o Insertar>HTML>Marcos si estás usando la versión en español). Allí hay varias opciones de marcos a insertar. Yo comencé insertando un marco en la parte superior de la ventana (o sea la opción top). Al darle eso, me apareció la siguiente ventana que me pide que le de un nombre al marco. Es necesario, nuestro deber y salvación ponerle un nombre en todo lugar, bueno en todo marco (eso se escuchó medio hereje... sorry, solo era una bromita) porque si no tiene nombre, ¿dónde sé que se va a poner en cada marco? Imagínate que vas a una pachanga y conoces a 3 chicas (o chicos) super guapas(os). Si no sabes el nombre de cada uno, te vas a meter en broncas porque no vas a saber como llamarle a cada uno. Si dices "mi amor", sepa cuál va a voltear (si es que alguno voltea). Y como esto, mil otras broncas.

Ya divagué bastante. Regresando a la materia, despues de mi lapsus brutus, en la ventana que aparece (Frame Tag Accessibility Attributes) le tengo que decir cuál ventana (en mi caso, elegí topFrame, o sea el marco de arriba arribototota) y le puse el nombre MarcoSuperior (uy, que original...). Así se ve desde lejos, en la lontananza:


Una vez que le piqué al Ok, mi página y la barra de propiedades (que cambia según lo que tengo seleccionado) se ven así:


En mi página se ve una raya que divide verticalmente a la página en 2. Una vez hecho esto, voy a agregar un marco en el lado izquierdo, abajo del marco superior. Para esto, le doy click al marco inferior (para posicionar allí el cursor) y voy a Insert>HTML>Frames>Left. Ahora la ventana que me pide el nombre tiene 3 opciones: ponerle nombre al topFrame (que ya se llama MarcoSuperior), al leftFrame (el de la izquierda) y al mainFrame (lo que queda). Al leftFrame le puse como nombre "MarcoIzquierdo" y al mainFrame lo nombré "MarcoDerecho" (bueno, no soy muy original para nombrar marcos...). Ahora mi ventana se ve así:


Ahora, si son muy observadores, verán que en la pestaña que indica la ventana en que estoy trabajando (esquina superior izquierda de la ventana) dice marcos.html* (el * quiere decir que no lo he guardado desde la última modificación). Pero si pongo mi cursor en el marco superior o izquierdo, cambia de nombre. Se debe a que estoy creando un documento que tiene marcos y cada marco es independiente de los otros, tiene un archivo HTML diferente al de los demás. Por lo tanto, nuestro marcos.html ha quedado relegado al marco "MarcoDerecho".

Ahora solo resta ponerle contenido a los marcos (es decir, crear los archivos HTML de cada marco). Para esto, hago lo mismo en cada marco que haría en cualquier página (inserto imágenes, tablas, escribo texto, etc.). Sin embargo, al final cuando quiero guardar todo, sucede algo inesperado: de pronto quiere guardar un tal UntitledFrameset-2.html (que yo guardé como "defineframes.html"), un UntitledFrame-3.html (que yo le puse "izq.html") y UntitledFrame-4.html (que yo puse "arriba.html") y marcos.html. Conste que los nombres pueden variar un poco.

Ahora voy a "ligar" entre los marcos. Si se recuerdan (y si no se recuerdan, se las recuerdo, perdón, les recuerdo el concepto) cuando especifico un vínculo para un texto o imágen, hay una propiedad llamada Target que me permite poner donde quiero que se abra la liga. Ahora, trabajando en defineframes.html, aparece en el combobox Target las opciones mainFrame, leftFrame y topFrame, como podrás ver en la siguiente imagen. De esta manera puedes definir en que marco quieres que aparezca la página que quieres "ligar".



Creo que con eso tienen para seguir experimentando. ¡Hasta la próxima!
Publicar un comentario
Related Posts Plugin for WordPress, Blogger...