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!

4 comentarios:

GUILLERMO dijo...

Primeramente hola Tony cómo está?, cómo se la ha pasado?, espero que super chingonometricamente bn, que has hecho?, que me cuentas?, pues fujate que yo te cuento q me ha salido, surgido, un piqueño proyecto, de hacer una página Güeb, para mi papá, y me encontré con un sebero problema *chan chan chan!!! xP*, mi situación es que, quise agregarle un piqueño munú, hecho en flash, para q me hiciera las ligas entre páginas Güeb, el pex es que no pude hacer los inches vínculos, prq únicamente quiero que se actualice un frame especifico, y lo único que consigo, es q se abra otra página con el contenido que quiero en el frame, o en su defecto que se abra en el mismo frame donde tengo llos botones D=, así que estuve buscando en varios lugares de la WWW, y nel pastel, encuentro mi duda plasmada en diversos sitios, pero no he visto que la respondan ¬¬, así que me estuve rrompiendo la cabeza picandole en mil chochomil lugares e inventando código xP, y un día lluvioso, no recuerdo que puse en Google, y me apareció tú Blog!!!(***canción celestial***), y me dije prq no pensé preguntarle desde un principio?, así que aquí estoy =D, como siempre con hambre de conocimiento =D, y buscandolo donde casi estoy seguro de encontrarlo, o indicios del mismo, xP.
Algunos datos que puede que sirvan, estoy usando Flash y Dreamweaber 8, mañen(tambien) tengo el CS3, pero nc si sea con el mismo código xP.
Weno por mi parte Gracias por tu atención, estamos en contacto, por mi parte, no seás extrañado y lo digo con gusto, prq sólo se le extraña a las personas con las que es dificil tener contacto, y yo sé que te puedo encontrar en la UNIVA o en éste Chingonometrico BLOG =D

Tony Valderrama dijo...

En primer lugar me da gusto saber de ti y saber que estás aplicando algo que vimos en clase en un problema real.

De vuelta a tu problema original, yo revisaría la sintaxis de la instrucción getURL de Flash la cual te permite abrir un archivo HTML. Yo jugaría con el parámetro Window a ver que tal. Intenta poniendo allí el nombre del marco (frame) en donde quieres que aparezca la nueva página en lugar del "_blank", "_parent" o cualquiera de los otros.

Espero te sirva. Luego me das la dirección de la página finalizada para que me apantalles. ¡Saludos!

Anónimo dijo...

holaa tony...waa me da mucho gusto que nos vuelvas a dar haha...aunq ya vimos dreamweaver con claudia ps como q a veces c t olvidan las cosas vdd pero ps tu aqui nos ayudas tomandote la molestia de subir articulos, instrucciones y videos..(haha que lo tuve que ver varias veces xq los letreritos duraban mui poco tiempo jaja)..ps la vdd es q me quede hasta este temaa xq si no luego c me olvidan las cosas t prometo que luego termino de leer los demas articulos...aii aunq esta facil esto d hacer las paginas en dreamweaver, acuerdate q PACIENCIA x favor que soy lenta jeje....ahhh por cierto tu no me podrias pasar el programaa please..??....esq por alguna extrañaa razon resulta q ya no esta en mi compu; bueno, gracias nos vemos mañanaaaa...!!!
*...ViiRii...*
6º TIA
P.D: ouch q raro0 c sienteee decir "6º"... :S

Anónimo dijo...

Eres genial
Atte: Estudiante de Animación de la UNIVA

http://cachivache.tk

El Tony y sus ondas...

Related Posts Plugin for WordPress, Blogger...