17.- Marcos ( I )

Se denomina Marcos o Frames a una forma de organizar los diferentes documentos de nuestro sitio web.

Una o más partes de la pantalla permanecen con contenidos fijos y otra parte va cambiando en función de los enlaces que pulsamos en otra de las partes de la pantalla.

Veamos un aspecto de la pantalla organizada en marcos:

En este caso la pantalla se divide en tres partes:

• La parte superior en la que va el título del sitio.
• La parte de la izquierda que contiene los enlaces de los diferentes documentos que forman nuestro sitio web.
• La parte más amplia donde se van a cargar los enlaces que pulsemos.

Para ver el funcionamiento de este marco pulsa aquí.

Para crear una página con marcos, debemos saber que:

• La estructura de la página es un documento independiente.
• Cada uno de los marcos es otro documento independiente.
• Cuando se carguen los diferentes documentos, el documento inicial situado en el espacio principal (main frame), será sustituido por el enlace que haya sido pulsado.

Empezamos:

Voy a crear un sitio nuevo al que voy a llamar Ejemplo de marcos dentro de la carpeta raíz marcos que creo en el disco duro C.

Empiezo creando un nuevo archivo: Archivo > Nuevo archivo

Aparecerá el nuevo archivo al que Dreamweaver llamará untitled.htm

Hago doble clic sobre él para abrirlo:

Pulsamos Ventana > Objetos

Aparecerá el panel objetos. Pinchamos en la flechita y elegimos Marcos

Aparecerá el panel de Marcos

Colocando el cursor sobre cada uno de los iconos nos muestra los diferentes conjuntos de marcos que podemos insertar. El último icono: sirve para dividir el marco principal en cuatro partes iguales.

Una vez decidido qué conjunto de marcos vamos a utilizar hacemos un clic sobre el icono y el conjunto de marcos dividirá nuestra página. Si no estamos de acuerdo con la anchura de los marcos podemos modificarlo simplemente situándonos con el cursor en el borde y arrastrando.

En este momento, Dreamweaver ya ha creado 4 diferentes documentos: El primero que es el que contiene la estructura de los tres marcos (frameset) y uno por cada marco (el superior, el izquierdo y el principal) los frames. Podemos, ahora, escribir algo en cada una de las tres partes para identificarlas posteriormente: Por ejemplo:

• Escribimos: Frame del título.
• Frame del índice.
• Frame principal.

Algo así:

Procedemos a Guardar. Elegimos Guardar todos los marcos:

Este proceso es muy importante y te sugiero que lo hagas tal como se indica:

Aparecerá esta ventana:

Observa que a la carpeta raíz del sitio la hemos llamado marcos, luego vamos a guardar en esta carpeta los frames creados. Puede ocurrir que Dreamweaver intente guardarlo en otro sitio, en ese caso tienes que buscar la carpeta marcos dentro del disco duro C. Observa, también, que aparece, aparte de la carpeta _notes, un documento denominado untitled.htm (más adelante sabremos qué documento es éste).

Lo primero que se va a guardar es el conjunto de marcos o frameset. Dreamweaver le ha puesto un nombre: UntitledFrameset-9. Nosotros le podemos llamar conjunto o bien index porque es la página que se va a abrir al principio con todos los marcos cargados. Observa el cordón que recorre todo el espacio, eso nos indica que es el conjunto de marcos lo que estamos guardando.

Una vez cambiado el nombre y guardado, aparecerá la siguiente ventana:

Fíjate que aparece el documento index que acabamos de llamar y guardar y que será el conjunto de los tres marcos o frames.

Observa que ahora el cordón está rodeando el frame de la izquierda, el frame de los enlaces. Además, el nombre que le está poniendo Dreamweaver ya no es Frameset sino Frame. Le ponemos el nombre que nos parezca, por ejemplo, indice.

Le damos a Guardar y aparecerá la última ventana:

Ahora el cordón está rodeando al marco superior. De nuevo observamos el nombre de Dreamweaver: UntitledFrame... Estamos guardando el marco del título. Podemos llamarlo titulo.

Le damos a Guardar y ya no aparecen más ventanas. Nos falta, sin embargo, un frame por guardar el frame principal: Éste es el documento que Dreamweaver ha guardado con el nombre untitled.htm que veíamos en la carpeta marcos.

Volvemos a nuestra ventana documento:

Ahora podemos cerrar la ventana documento para ver el sitio:

Observamos que aparecen los cuatro documentos:

• index.htm con la estructura de todos los marcos.
• indice.html el marco izquierdo.
• titulo.htm el marco superior.
• untitled.htm que es el marco principal.

Podemos cambiar el nombre a este último marco y le llamamos principal.htm desde este mismo lugar. Botón derecho: Renombrar

Y le cambiamos el nombre:

Al haberle cambiado el nombre, aparecerá la siguiente ventana de actualización de los vínculos:

Le damos a Actualizar. Nuestro proceso habrá finalizado. Lo único que nos queda es modificar el texto de cada uno de los marcos con los contenidos reales que queramos colocar.