Inicio » HTML » Tutorial Frames

Ejemplo de Tutorial Frames

Hace muchos años escribí este tutorial para el uso y el manejo de los frames, me lo encontré navegando entre mis archivos viejos y decidí rescatarlo. Seguro les será de gran utilidad.

He visto muchas preguntas sobre los frames y me he tomado un tiempo para hacer mi primer manual para este foro sobre el uso del frameset.

1.- ¿Qué es un frameset?

Un frameset, conocido en español como conjunto de marcos, es un archivo que sirve para dividir la página en varias ventanas cuadradas debido a que manda a llamar varios archivos html independientes entre sí nombrados frames (marcos).

La ventaja de los frames es que una sección de la página queda constante y no se tiene que cargar cuando se llama a una liga, por lo tanto es ideal para colocar navegadores.

La desventaja es que ocupa un espacio de la página y no se puede quitar.

2.- El tag <frameset>

Se utiliza para definir como dividir la página en frames.

El frameset se define con una cantidad de filas y/o columnas (rows, columns)

3.- El tag <frame>

Define los documentos html a llamar por cada frame.

Ejemplo de frameset:

<frameset cols="100,*">
   <frame src="frame1.htm" name="izquierdo" scrolling="NO" noresize>
   <frame src="frame2.htm"name="principal" scrolling="AUTO" noresize>
</frameset>

Creamos un frameset horizontal que ocupa 100 pixeles de izquierda a derecha de nuestra pantalla. El otro frame ocupa el % restante. De tal forma que nuestro frame principal estará siempre fijo sin importar la resolución o el tamaño de la ventana del navegador

4.- Propiedades del <frameset>

<frameset cols="100,*" frameborder="YES" border="1" framespacing="0" bordercolor="#000033">

frameborder = Define si queremos un borde en nuestro frame (YES, NO)
border = El ancho del borde, si frameborder es igual a YES
framespacing = El espacio que deja en el borde del frame
bordercolor = El color del borde

5.- Propiedades del <frame>

src = El archivo html, asp, php que vamos a llamar.
name = El nombre de la venta que nos servirá de referencia para enviar parámetros con html o JavaScript.

scrolling = Si deseamos que salga la barra de scroll (YES, NO, AUTO) *** Auto es igual a automático, lo calcula el navegador por nosotros.
noresize = Si queremos que el frame no pueda cambiar de tamaño al mover con el mouse

6.- Cómo crear una liga

Una pregunta recurrente es:
***Cuándo creo un botón me abre la ventana en la misma ventana que mi botón***

Esto es muy simple sólo se le debe de decir al botón que ventana utilizar cuando se navega, quedando así.

<a href="frame5" target="principal">

Donde principal es la ventana más grande donde desplegamos el contenido.

Si sólo usamos 2 frames se puede utilizar este tag después del body para eliminar el target de nuestro a href.

<body>
<base target="principal">
</body>


Ejemplo de Frameset y frames:
home.html

<html>
<head>
<title>Ejemplo</title>
</head>

<frameset cols="100,*" framespacing="1" frameborder="yes" border="1"

bordercolor="#000033">
  <frame src="frame1" name="izquierdo" scrolling="NO" noresize>
  <frame src="frame2" name="principal">
</frameset>
<noframes><body>

</body></noframes>
</html>


izquierdo.html

<html>
<head>
</head>
<body>
Frame Izquierdo
<a href="
http://www.yahoo.com" target="principal">Yahoo</a>
</body>
</html>


principal.html

<html>
<head>
</head>
<body>
Frame Principal
</body>
</html>


7.- Tipos de target

Como hemos visto, se puede utilizar como target un nombre que le hemos dado a un frame, sin embargo, existen otros tipos de target que menciono a continuación.

target="_top"
target="_blank"
target="_self"
target="_parent"


_top = quita los marcos
_blank = abre una nueva ventana
_self = pone el documento en la misma ventana (funciona igual si no pones target)
_parent = abre la liga en el frameset padre (si no se tiene un padre, funciona como _top)

8.- Etiquetas para navegadores que no soportan frames

Para los navegadores que no soportan frames se pueden utilizar las etiquetas <noframes> para poner contenido en dicho caso. (esto no afecta a los navegadores que si soportan frames, que son los más usados)

<noframes>
<body>
</body>
</noframes>

¡Ayúdanos a ayudarte! Por favor comparte este artículo.

  
Por: Morris

Búsqueda:

Búsqueda personalizada

Comentarios:

  1. Muy bien explicado, excelente trabajo amigo.
    Por Frank 04.28.12 a las 10:42:17
    1. Excelentes eejemplos para empezar a encaminarse en este medio de Web.
      Por ABELL 03.25.12 a las 8:13:43
      1. hola
        Por mary 03.28.11 a las 12:16:35

      Deja un comentario

Tweet