Frames - Explicación básica

  • Por
Explicamos los detalles generales y los más básicos sobre la creación de frames. Etiquetas FRAMESET Y FRAME.
Las páginas web que están hechas con frames se componen de una declaración de los marcos y tantas páginas en formato HTML corriente como distintas divisiones hemos definido. La declaración o definición de frames es la única página que realmente debemos aprender, puesto que las páginas que se van a visualizar en cada uno de los cuadros son ficheros HTML de los que venimos aprendiendo anteriormente en este manual.

Dicha definición está compuesta por etiquetas <FRAMESET> y <FRAME>, con las que se indicamos la disposición de todos los cuadros. La etiqueta <FRAMESET> indica las particiones de la ventana del navegador y la etiqueta <FRAME> indica cada uno de los cuadros donde colocaremos una página independiente.

Las particiones que se pueden hacer con un <FRAMESET> son en filas o columnas. Por ejemplo, podríamos indicar que deseamos hacer una división de la página en dos filas, o dos columnas, tres filas, etc. Para indicar tanto la forma de partir la ventana -en filas o columnas- como el número de particiones que pretendemos hacer, se ha de utilizar el atributo COLS o ROWS. El primero sirve para indicar una partición en columnas y el segundo para una partición en filas.

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 disposiciones. Más adelante indicaremos cómo partir la ventana tanto en filas como en columnas, que se hace con la anidación de frames.

En el atributo COLS o ROWS -sólo podemos elegir uno de los dos- colocamos entre comillas el número de particiones que deseamos realizar, indicando de paso el tamaño que va a asignarse a cada una. Un valor típico de estos atributos sería el siguiente:

cols="20%,80%"
Indica que se deben colocar dos columnas, la de la izquierda tendría un 20% del espacio total de la ventana y la de la derecha un 80%.

rows="15%,60%,25%"
Así indicamos que deseamos tres filas, la de arriba con un 15% del espacio total, la del medio con un espacio correspondiente al 60% del total y la de abajo con un 25%. En total suman el 100% del espacio de la ventana.

Además del porcentaje para indicar el espacio de cada una de las casillas, también podemos indicarlo en pixeles. De esta manera.

cols="200,600"
Para indicar que la columna de la izquierda debe tener 200 pixels de ancho y la de la derecha 600. Esto está bien si nuestra ventana tiene 800 pixels de ancho, pero esto no tiene porque ser así en todos los monitores de los usuarios, por lo que este modo de expresar los marcos es importante que se indique de la siguiente manera.

cols="200,*"
Así indicamos que la primera columna ha de medir 200 pixels y que el resto del espacio disponible -que será mayor o menor dependiendo de la definición de la pantalla del usuario- se le asignará a segunda columna.

En la práctica podemos mezclar todos estos métodos para definir los marcos de la manera que deseemos, con pocentaje, con pixels o con el comodín (*). No importa cómo se definan, la única recomendación es que uno de los valores que indiquemos sea un asterisco, para que el área correspondiente a dicho asterisco o comodín sea más o menos grande dependiendo del espacio que tenga la ventana de nuestro navegador. Otros métodos de definir filas y columnas, atendiendo a este consejo, serían los siguientes:

rows="100,*,12%"
Definimos tres filas, la primera con 100 pixels de ancho, la segunda con el espacio que sobre de las otras dos, y la tercera con un 12% del espacio total.

cols="10%,50%,120,*"
Estamos indicando cuatro columnas. La primera del 10% del espacio de la ventana, la segunda con la mitad justa de la ventana, la tercera con un espacio de 120 pixels y la última con la cantidad de espacio que sobre al asignar espacio a las demás particiones.

Una vez hemos indicado el número de filas o columnas y el espacio reservado a cada una con la etiqueta <FRAMESET>, debemos especificar con la etiqueta <FRAME> la procedencia de cada uno de los frames en los que hemos partido la ventana.

Para ello, disponemos del atributo SRC, que se ha de definir para cada una de las filas o columnas. De esta manera.

<FRAME src="marco1.html">

Así queda indicado que el frame que estamos definiendo debe mostrar la página marco1.html en su interior.

Hasta ahora hemos visto bastante información teórica, la suficiente para saber construir nuestras propias estructuras de frames, pero seguro que para aclarar las cosas vendrá bien hacer alguna práctica. Así que en el próximo artículo pasaremos a la creación de frames en páginas web.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

laura lopez

16/7/2006
La página es buena, pero le faltan las partes de los frames,seria bueno si las pusieran.

DIANA CARLOINA SILVA

18/4/2007
ME ENCANTARIA QUE DISEÑARAN LAS PAGINAS,DE LOS FRAMES Y LES COLOCARAN SUS NOMBRES. GRACIAS

sombra

20/5/2009
comentario
nole entiendo nada deberian de poner mas ejemplos y menos letras solo es una sujerencia

jorge

31/10/2009
es muy bueno
Este tutorial sobre html!!

es exelente es muy bueno ayuda mucho que vien sigan haciendo nuevos y mejores tutoriaes

mich

08/12/2010
Hola
Muy buena pagina, y muy buenos tutoriales, me gusta mucho como lo explicas todo, todo muy completo y detallado. Sigue asi :D

LUCI,FER

03/6/2016
MALVADOWS
MIELDA BOLUDO