Curso de creación de sitios web - Lección 5 - Página 2
Análisis del codigo Frame
Análisis del código Frame Fijándonos en la teoría de la página anterior, podemos interpretar perfectamente qué es lo que hemos escrito en nuestro ejemplo. Esto es lo que dibujaría:
Figura 1
Analicemos ahora el código paso por paso. Nos encontramos con: <frameset rows="1*"
Define que el marco principal tendrá una sola fila, en la cual no establecemos ninguna medida. Si quisiéramos tener dos filas, entonces pondríamos algo así:
<frameset rows="60%, 40% "
lo que implicaría que el marco principal tendría en este caso dos filas, una que ocupa el 60% de la ventana y el otro el 40% de la ventana.
Seguimos leyendo esta línea y nos encontramos con:
cols="19%, 81%" border="4">
Podemos imaginarnos que define además dos columnas, una que ocupa el 19% y otra el 81%; además, los bordes tendrán un ancho de 4 pixels.
La siguiente línea es:
<frame src="menu.htm" name="menu" scrolling="auto" marginwidth="10" marginheight="14" noresize>
La etiqueta frame nos permite definir la primera de las páginas que se mostrarán, en este caso en la parte izquierda de nuestra página múltiple. Fíjate que src llama a menu.htm lo que cargará la página menu.htm en esa posición. Además, se define el nombre de dicho frame con name="menu", le decimos que las barras de desplazamiento aparezcan de forma automática con scrolling="auto" (como ya explicamos antes) y los márgenes queden como máximo a 10 pixels a lo ancho y 14 a lo alto. Además, impedimos a los usuarios redimensionar el frame con noresize.
Esta página sería la que cargaría en la posición 1, de la Figura 1.
Definimos ahora otro frameset, puesto que la parte derecha se divide en una superior y otra inferior (posiciones 2 y 3 de la Figura 1):
<frameset rows="18%, 82%" cols="1*">
En este caso hay 2 fílas (2 y 3) y una sola columna con valor 1*, no especificado o lo que es lo mismo, que ocupe todo el espacio restante.
A continuación nos encontramos con estas dos líneas:
<frame src="titulo.htm" name="titulo" scrolling="auto" marginwidth="10" marginheight="14" noresize>
<frame src="contenidos.htm" name="contenidos" scrolling="yes" marginwidth="10" marginheight="14">
Ya no nos cogen por sorpresa, pues son muy similares al anterior frame. La primera de ellas contiene la página titulo.htm con el mismo nombre, y ocupará la posición 2 de la Figura 1. El resto de atributos ya se conocen.
La segunda línea guarda la página contenidos.htm con el mismo nombre, situada por tanto en la posición 3 de la Figura 1. En este caso especificamos scrolling="yes", para que siempre se muestre la barra de desplazamiento. Presumiblemente la página de contenidos tendrá una extensión lo suficientemente amplia como para saber de antemano que el usuario deberá tener dicha barra visible, para poder leer toda la página en su extensión.
Después, cerramos con </frameset></frameset> los dos Framesets abiertos.
Y ahora es cuando viene el código que verán todos los navegadores que no interpreten correctamente los Frames:
<noframes>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p>Para ver correctamente esta página web, necesitas instalar un navegador que tenga la posibilidad de interpretar los Frames. </p>
</body>
</noframes>
Como ya dijimos anteriormente, se usan las etiquetas <noframes> y </noframes>. Dentro podemos escribir el código de una página web completa si quisiéramos (colores, tablas, imágenes), pero no merece la pena por lo general gastar tiempo en algo que con un simple aviso sería más que suficiente. Como mucho podríamos indicar las páginas web y sus respectivos enlaces a navegadores con soporte para Frames, como Internet Explorer o Mozilla.
Si nos fijamos, vemos que tiene las etiquetas <body> como si de una página normal se tratase.
Para que este código esté completo, deberíamos crear tres páginas:
- menu.htm
- titulo.htm
- contenidos.htm
y guardarlas junto a nuestra plantilla que hemos creado anteriormente. Dicha plantilla podemos darle el nombre que queramos. Al final, en una misma carpeta deberíamos tener 4 páginas html, las 3 anteriores y por ejemplo plantilla.htm, que nos permitirá mostrar simultaneamente todos los contenidos. Esto es un pequeño ejemplo de lo que sería en realidad:
Se aprecia el grosor de los bordes y los contenidos..
A continuación aprenderemos a interactuar entre las distintas páginas, algo muy importante.
Índice
Capítulo 1:
1
1A
1B
Capítulo 2:
2
2A
2B
Capítulo 3:
3
Capítulo 4:
4
4A
4B
Capítulo 5:
5
5A
5B
Capítulo 6:
6
6A
6B
6C
6D
6E
Capítulo 7:
7
7A
|
|
Estás en: