5. Los marcos
Los marcos se utilizan para situar al mismo tiempo dos o más
ventanas en la pantalla.
Existen dos tipos de marcos:
·
estáticos: su contenido permanece siempre visible.
·
dinámicos: su contenido varía como respuesta a acciones del usuario.
Consejos de utilización:
·
Utilizarlos si contribuyen a hacer el sitio más amigable.
·
No colocar demasiados en una ventana.
·
Utilizar marcos estáticos sólo para tablas de contenido, herramientas
de navegación e identificación de sitios.
·
Reservar la mayor parte de la superficie de la pantalla para marcos dínamicos.
·
Tener presente que la mayoría de monitores son de 14 o 15 pulgadas.
Etiquetas para la creación de marcos:
| Etiquetas para marcos |
| <frameset> </frameset> |
Principio y fin de documento.
| Propiedades de la etiqueta frameset: |
| Propiedad |
Dato contenido en la propiedad |
COLS
ROWS |
Especifican el número de marcos y el tamaño de los mismos para un
grupo de marcos.
Ejemplos:
<frameset rows="15%,70%,15%> define 3 marcos horizontales que
ocupan toda la ventana del navegador, en el porcentage indicado.
<frameset cols="15%,*> define 2 marcos verticales que ocupan toda
la ventana del navegador. El primer marco ocupa el 15% y el segundo el
resto.
<frameset rows="80,120"> define 2 marcos horizontales, el primero
de 80 pixels de altura y el segundo de 120.
<frameset cols="*,2*"> define 2 marcos verticales, el de la izquierda
ocupa un tercio de la ventana del navegador y el de la derecha 2 tercios.
<frameset rows="50%,50%" cols="*,*,*"> define 6 marcos, todos del
mismo tamaño, ocupando toda la ventana del navegador y repartidos en 2
filas y 3 columnas.
Los grupos de marcos se pueden anidar para conseguir divisiones
más complejas.
|
| FRAMEBORDER |
Determina el tamaño del borde de los marcos. Un frameborde 0 elimina
el borde de los marcos. |
|
| <frame> </frame> |
Principio y fin del marco.
| Propiedades de la etiqueta marco: |
| Propiedad |
Dato contenido en la propiedad |
| SRC |
Especifica el URL de cada página que aparezca inicialmente en el grupo
de marcos. |
| NAME |
Asigna un nombre al marco. |
| SCROLLING |
Determina si el marco debe tener barras de desplazamiento.
Valores: yes | no | auto.
|
| NORESIZE |
No tiene ningún valor. No permite la modificación del tamaño del marco.
|
| MARGINWIDTH |
Especifica, en pixels, los márgenes izquierdo y derecho de las imágenes
o el texto dentro del marco. |
| MARGINHEIGHT |
Igual que MARGINWIDTH respecto a los márgenes superior e inferior. |
|
Ejemplo:
| Dos marcos en columnas |
<html>
<head>
<title> Marcos </title>
<frameset cols="15%,85%">
<frame src="navegacion.html">
<frame src="contenido.html">
</frameset>
</head>
</html>
|
Ver ejemplo
|
Ejercicio:
Mediante la utilización de marcos crea la siguiente estructura:
Consideraciones:
- El marco superior ocupa 50 pixels y contiene la página con la identificación del sitio.
- El marco de la izquierda ocupa una tercera parte de lo que ocupa el
de la derecha y contiene la tabla de contenidos.
- El marco de la derecha contiene la información seleccionada en la
tabla de contenidos.
Contesta a las siguientes preguntas:
- ¿Has necesitado utilizar marcos anidados?
- En que consisten los marcos anidados?
La estructura de la página es similar a la siguiente:
Identificación del sitio |
Tabla de contenidos |
Contenido página |
Grabad el ejercicio con el nombre ej15_marcos.html.
Carga de contenidos
| Carga de contenidos en ventanas existentes |
| En la ventana actual |
Insertar un hipervínculo normal. |
| En una ventana diferente |
Se utiliza el nombre del marco para selecionar la ventana.
Añadir al hipervínculo el atributo Target con el nombre del marco.
Ejemplo:
<a href="pag_a_cargar.html" target="nombre_marco">Vínculo</a>
|
| Carga de contenidos en una ventana nueva |
| Creación de una ventana nueva |
Poner en el atributo Target un nombre distinto al de los marcos.
Abre una nueva ventana del navegador en la que aparece la página vinculada.
|
| Valores predefinidos de la propiedad TARGET |
| Valor |
Función |
| _blank |
La página vinculada se carga en una nueva ventana.
La ventana nueva no tiene ningún nombre asociada a ella.
|
| _self |
La página vinculada se carga en la ventana o marco que contiene el vínculo. |
| _parent |
Se eliminan todos los marcos y se carga la página vinculada en la totalidad de la pantalla
del navegador.
Si no hay marcos se comporta igual que _self.
|
| _top |
Carga la página vinculada en la primera ventana de la jerarquia.
|
|
Ejercicio:
Dota de contenido el ejercicio ej15_marcos.html implementando las
diferentes posibilidades que ofrece la propiedad target.
Grabad el ejercicio con el nombre ej16_marcos.html.
