El blog de la informatica-Eneko Mardones

MARCOS Y CAPAS

Otros elementos importantes a tener en cuenta en diseño y desarrollo web son los marcos y capas.

MARCOS

Los marcos sirven para subdividir un documento HTML en áreas independientes en las que se pueden cargar otras páginas web.

A excepción de la directiva <iframe>, las demás etiquetas que se utilizan para establecer marcos no son soportadas por HTML5. No obstante, los navegadores más utilizados en la actualidad sí que la siguen interpretando correctamente.

Existen dos tipos fundamentales de marcos: <frame> e <iframe>.

FRAMES

Estos marcos subdividen todo el área de navegación en zonas donde se pueden cargar otros documentos HTML. Para insertar estos elementos se utiliza la directiva <frameset>…</frameset>, dentro de la cual se van definiendo las distintas áreas mediante la etiqueta <frame>.

Es importante tener en cuenta que, en los documentos en los que se usan “frames”, no se incluye la directiva <body>, usándose en su lugar la etiqueta <frameset>.

<frameset cols=’30%,70%’>

	<frameset cols=50%,50%’>

		<frame src=’doc1.html’>

		<frame src=’doc2.html’>

	</frameset>

	<frame src=’doc3.html’>

</frameset>

Como se puede apreciar en el código anterior, la primera línea divide el área de navegación del documento “index.html” en dos columnas o espacios diferenciados que ocuparan los porcentajes indicados respectivamente. Esto se especifica con el atributo “cols”, el cual contiene medidas en porcentajes o pixeles (se recomiendan porcentajes).

En este ejemplo, la columna más grande ”70%” se define con la línea número 6. Como se puede apreciar, la ruta de cada archivo que cargara cada uno de los “frames” se indica en el atributo “src”.

Respecto a la columna más pequeña, su contenido se ha definido con el código de las líneas número 2, 3, 4 y 5.

Esto se debe a que, dicha columna se ha dividido a su vez en dos filas, que cada una contendrá a los documentos “doc1.html” y “doc2.html”. El tamaño de las filas se establece con el atributo “rows” (ambas ocupan el 50% del alto total de la columna).

Aparte de la creación de los marcos propiamente dicha, existen muchos atributos con los que configurar su apariencia. Para ello, tanto la etiqueta <frameset> como <frame> admiten diversos atributos que permiten especificar la forma de los elementos, como los bordes de los “frames”, el margen, la existencia o no de barras de desplazamiento, etc.

ATRIBUTOS PARA <FRAMESET>

Los dos atributos principales ya vistos son “rows” y ”cols”. Hablamos de “cols” en cuanto a pixeles, por ejemplo, “cols=’200,600’”. Indica que la columna de la izquierda debe tener 200 pixeles de ancho y la de la derecha 600. Esto estará bien si nuestra ventana tiene 800 pixeles de ancho, pero no tiene que ser así siempre, por lo que se suele representar “cols=’200,*’”. Así indicamos que la primera columna ha de medir 200 pixeles y que el resto del espacio disponible (que será mayor o menor dependiendo de la definición de la pantalla del usuario) se le asignara a la segunda columna.

En la práctica se pueden mezclar todos estos métodos para definir marcos de la manera que deseamos, con porcentajes, con pixeles o con el comodín “*”.

“rows=’100,*,12%’”

En el ejemplo tres filas, la primera con 100 pixeles, la segunda con el espacio que sobra entre las dos, y la tercera con un 12% del total.

“cols=’10%,50%,120,*’”

En la anterior línea definimos cuatro columnas. La primera, 10% del espacio de la ventana, la segunda con la mitad de la ventana, la tercera con un espacio de 120 pixeles, y la última con la cantidad de espacio que sobre tras asignar las demás posiciones.

Acabamos de ver que los atributos “cols” y “rows” sirven para indicar si la distribución del marco se hará horizontalmente o verticalmente, siendo uno excluyente del otro.

OTROS ATRIBUTOS PARA <FRAMESET>

border: permite especificar de manera global para todo el “frameset” el número de pixeles que ha de tener el borde de los “frames”.
border-color: con este atributo podemos modificar el color del borde de los “frames”, también de manera global a todo el “frameset”.
frame-border: sirve para mostrar o no el borde del “frame”. Sus posibles valores son, “yes” (para que se vean), y “no” o “0” (para que no se vean). En la práctica elimina el borde, pero permanece una línea de separación de los “frames”.
frame-spacing: para determinar la anchura de la línea de separación de los “frames”. Se puede utilizar en Internet Explorer, y junto con el atributo “frame-border=’0’”, sirve para eliminar los bordes de los marcos.

ATRIBUTOS PARA <FRAME>

Para esta etiqueta, ya vimos el atributo “src” que sirve para indicar el archivo que contiene el marco, el atributo “name” daría nombre a ese marco (para luego dirigir los enlaces hacia él).

margin-height y margin-width: el segundo, define el número de pixeles que tiene el margen del “frame” donde se indica. Este margen se aplica a la página que pretendemos ver en ese marco, de modo que si colocamos “0”, los contenidos de la página en ese marco estarán pegados por completo al borde del margen, y si indicamos un valor de 10, los contenidos de la página estarían separados del borde 10 pixeles. En cuanto al primero, sería lo mismo que el atributo anterior, pero para el margen vertical.
scrolling: sirve para indicar si queremos que haya barras de desplazamiento en los marcos. Si indicamos “yes” siempre saldrán las barras, si indicamos “no” nunca, y si colocamos “auto” saldrán solo si son necesarios. Este último es el valor por defecto.
nonesize: este atributo no tiene valores, simplemente se pone o no. Es caso de que esté presente, indica que el frame no se puede redimensionar. Cuando colocamos el ratón sobre el borde de los marcos, sale un cursor que nos señala que podemos mover dicho borde y redimensionar así los “frames”. Por defecto, si no colocamos nada, los marcos si se pueden redimensionar.
frame-border: este atributo permite controlar la aparición de los bordes de los “frames”. Con este atributo igualado a “0” o “no”, los bordes se eliminan. Sin embargo, quedan los feos márgenes en el borde. Esto funciona mejor en “Netscape” que en Internet Explorer.
border-color: permite especificar el color de borde del marco

NOTA: los atributos de frames no funcionan siempre bien en todos los navegadores. Es recomendable hacer un test sobre lo que estamos diseñando en varios navegadores para comprobar que nuestros “frames” se ven bien en todos los navegadores.

ANIDAR "FRAMES"

Para crear estructuras de marcos en las que se mezcle las filas y columnas debemos anidar etiquetas <frameset>. Empezando por la partición de “frames” más general, debemos colocar dentro de las particiones de “frames” más pequeñas.

NOTA: es importante indicar que no se puede hacer una partición en filas y columnas a la vez, sino que debemos escoger en partir la ventana en una de las dos posiciones.

Ejercicio-1

Ejercicio-2

Ejercicio-3