FRAMES EN HTML
Los Frames son cuadros que nos permiten organizar contenido en una página web para darle una mejor estructuración u organización. La página web se observará con una estructura en la cual se pueden desplegar diferente contenido, esta estructura necesita que existan paginas o recursos para ser desplegados en cada cuadro.
A continuación, observaremos como se edita una página con Frames
FRAMES
Para editar las páginas con frames o cuadros utilizaremos la etiqueta frameset con sus atributos correspondientes:
Rows Determina el alto de las filas
Cols Determina el ancho de las columnas.
Framespacing Espacio entre frames
Para editar los cuadros creados se utiliza la etiqueta frame la cual tiene los siguientes atributos
- Marginheight Determina que tanto espacio vertical (en pixeles) existe entre el objeto ubicado en un marco, y los extremos superior o inferior de este.
- MarginWidth Determina que tanto espacio horizontal (en pixeles) existe entre el objeto ubicado en un marco, y los extremos izquierdo o derecho de éste.
- Name Ofrece la capacidad de Dar nombres a las ventanas o cuadros FRAME, de modo que puedan ser utilizados como destino de los hipervínculos.
- Noresize indica que el usuario no puede redimensionar el marco
- Scrolling Habilita una barra de desplazamiento para un marco. Existen tres parámetros posibles SCROLLING=YES, SCROLLING=NO y SCROLLING=AUTO que habilita la barra solo si es necesario
- SRC indica que exhiba en un marco el contenido de un documento HTML.
CRITERIOS DE DISEÑO CON FRAMES:
- Estas páginas manejan el encabezado head
- Estas páginas no tienen estructura de Body
- Estas páginas son contenedores de otras páginas web
- Frameset Esta permite dividir la pantalla en columnas o filas y dar un espacio entre los cuadros.
- La división se realiza dependiendo del porcentaje que se asigne, luego se asignan los atributos de cada cuadro con las etiquetas
- Para crear un menú la clave es nombrar los cuadros que son creados y ya que se utilizarán en la etiqueta A en el atributo Target.
- La página se estructura dependiente el primer frameset, si realizas un rows, se creará una página con una división superior y otra inferior, si comienzas primero con un cols creará una columna a la izquierda del tamaño que elijas.
- Luego de hacer el primer corte puedes hacer otra división y otra, tener en cuenta que cada vez que hagas una división necesitas una página web para cada cuadro, en el caso de hacer una división con frameset se necesitan dos páginas web, si haces 2 frameset se necesitan 3 páginas web y así para cada división.
ELABORAR FRAMES EN HTML
Para este ejemplo utilizaremos las páginas banner.html, inicio.htm y selección.html que se han desarrollado anteriormente.
PAGINA FRAMES DE DOS COLUMNAS
Código
<html>
<head> <title>Mi pagina Web</title> </head>
<frameset cols="30%,*" frameborder=1 framespacing=0 border=1>
<frame name="seleccion" src="/seleccion.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
<frame name="principal" src="/inicio.htm" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
</frameset>
<noframes>
<center>
Su navegador no puede desplegar frames.
</center>
</noframes>
</html>
PAGINA FRAMES DE DOS FILAS
Código:
<html>
<head> <title>Mi pagina Web</title> </head>
<frameset rows="30%,*" frameborder=1 framespacing=0 border=1>
<frame name="banner" src="/banner.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
<frame name="principal" src="/inicio.htm" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
</frameset>
<noframes>
<center>
Su navegador no puede desplegar frames.
</center>
</noframes>
</html>
PAGINA CON TRES COLUMNAS
Código:
l>
<head> <title>Mi pagina Web</title> </head>
<frameset cols="30%,*" frameborder=1 framespacing=0 border=1>
<frame name="pagizquierda" src="/seleccion.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
<frameset cols="50%,*" frameborder=1 framespacing=0 border=1>
<frame name="pagcentro" src="/inicio.htm" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
<frame name="pagderecha" src="/banner.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
</frameset>
</frameset>
<noframes>
<center>
Su navegador no puede desplegar frames.
</center>
</noframes>
</html>
PAGINA MIXTA 1 FILA SUPERIOR 2 COLUMNAS INFERIORES
Código:
<html>
<head> <title>Mi pagina Web</title> </head>
<frameset rows="20%,*" frameborder=1 framespacing=0 border=1>
<frame name="superior" src="/banner.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
<frameset cols="30%,*" frameborder=1 framespacing=0 border=1>
<frame name="seleccion" src="/seleccion.html" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
<frame name="principal" src="/inicio.htm" marginwidth="0"
marginheight="0" scrolling="auto" frameborder="no">
</frameset>
</frameset>
<noframes>
<center>
Su navegador no puede desplegar frames.
</center>
</noframes>
</html>
