FRAMES
VERTICALES Y HORIZONTALES
Elaborado por: Brenda Ruiz
FRAMES
Se le llama FRAME a los marcos que
vamos a definir en la pantalla.
Cada frame nos va a permitir poner
una página web distinta.
O sea, que si divido mi pantalla en 3
frames, puedo poner 3 páginas
diferentes en una misma pantalla.
Esta foto de Autor desconocido está bajo licencia CC BY-NC-ND
2
ETIQUETAS
Es la etiqueta principal, donde vamos a definir si
queremos frames horizontales (filas) o frames
verticales (columnas). Además, definimos
cuantas divisiones usaremos.
Es la etiqueta que va a cargar cada página en
el frame deseado. Necesitas una etiqueta
<frame> por cada definición en <frameset>
3
ETIQUETA FRAME
La etiqueta <frame> tiene atributos que usaremos para insertar nuestras páginas y
nombrar cada espacio.
ATRIBUTO ACCIÓN
src Permite mandar llamar a la página que queremos
insertar en ese frame
Es importante que nuestros frames tengan nombre para
name indicar en otros casos, donde se debe desplegar la
página
4
EMPECEMOS
Primero vamos a crear 3
páginas web simples, lo único
que van a tener es color de
fondo, y según su color de
fondo debe ser el nombre:
1. azul.html
2. amarillo.htm
3. verde.html
5
EMPECEMOS CON LOS FRAMES
MUY IMPORTANTE
• El archivo donde definimos los frames, es un
archivo importante y diferente.
• SIEMPRE debe llevar el nombre de INDEX.HTML
• Toma en cuenta que será el único archivo que
yo abriré, si no hay un INDEX.HTML, no voy a
estar buscando archivo por archivo cual es, así
que NO LO OLVIDES.
• El archivo index.html no lleva la etiqueta
<body>, si tu llegas a escribirla en un archivo
de frames, no vas a ver nada.
• Recuerda que todos los elementos deben
estar en la misma carpeta para que funcione.
6
FRAMES
HORIZONTALES
7
FRAMES HORIZONTALES
Cuando hablamos de divisiones horizontales,
estamos hablando de filas, entonces nuestro
atributo debe ser rows.
Los valores de rows son los porcentajes de
pantalla que ocupará cada división.
SIEMPRE DEBE SUMAR 100%. Por ejemplo, si solo
queremos 2 divisiones sería:
<frameset rows=“50%,50%”>
O
<frameset rows=“50%,*”>
Si quisiéramos 4 filas, entonces escribiremos:
<frameset rows=“30%,20%,20%,*”>
El “*” quiere decir…”lo que resta de la
pantalla”, en este caso ese * valdría 30%, pero
no es necesario que se escriba tal cual.
8
FRAMES HORIZONTALES OJO
Ve como no
tiene <body>
Se definen 3 filas, las 2
primeras abarcan el
35% de la pantalla c/u
y la última (*) índica el
resto (30%). Una etiqueta frame por cada uno
de los porcentajes
Así suma el 100% de la
pantalla.
9
FRAMES HORIZONTALES
CÓDIGO RESULTADO
10
FRAMES HORIZONTALES
Los frames horizontales se
cuentan de arriba para abajo,
por eso los nombres, para que
vean a cual hace referencia.
La primer etiqueta <frame>
siempre le va a pertenecer a
nuestro frame de hasta arriba,
y así sucesivamente hacia
abajo.
11
FRAMES HORIZONTALES
CÓDIGO RESULTADO
12
FRAMES
VERTICALES
13
FRAMES VERTICALES
Cuando hablamos de divisiones verticales, estamos
hablando de columnas, entonces nuestro atributo
debe ser cols.
Los valores de cols son los porcentajes de pantalla
que ocupará cada división.
SIEMPRE DEBE SUMAR 100%. Por ejemplo, si solo
queremos 2 divisiones sería:
<frameset cols=“50%,50%”>
O
<frameset cols=“50%,*”>
Si quisiéramos 4 columnas, entonces escribiremos:
<frameset cols=“30%,20%,20%,*”>
El “*” quiere decir…”lo que resta de la pantalla”, en
este caso ese * valdría 30%, pero no es necesario que
se escriba tal cual.
14
FRAMES VERTICALES OJO
Ve como no
tiene <body>
Se definen 3 columnas,
las 2 primeras abarcan el
35% de la pantalla c/u y
la última el resto (30%).
Una etiqueta frame por cada uno de los
Así suma el 100% de la porcentajes
pantalla.
15
FRAMES VERTICALES
CÓDIGO RESULTADO
16
FRAMES HORIZONTALES
Los frames verticales se
cuentan de izquierda a
derecha, por eso el nombre,
para que vean a cual hace
referencia.
La primer etiqueta <frame>
siempre le va a pertenecer a
nuestro frame de la izquierda y
así sucesivamente hasta el
último de la derecha.
17
FRAMES VERTICALES
CÓDIGO RESULTADO
18
VAMOS A
PONERLE
INFORMACIÓN
19
¿CÓMO SE RELACIONAN?
Ocuparemos los
frames verticales,
pero hagamos una
división que sea
30%, *
20
EN EL ARCHIVO AMARILLO.HTML
Hagamos un menú
por medio de
hipervínculos para
abrir nuestras
páginas de color en
nuestro frame
llamado “der”
21
ASÍ DEBE QUEDAR
Ahora demos
clic a cada
opción en
nuestro menú
22
ASÍ DEBE VERSE
Cuando damos clic a Cuando damos clic a Cuando damos clic a
“Página azul” “Página verde” “Página amarilla”
23
CAMBIEMOS EL COLS POR ROWS
Vean que
cambié el
name
En el index,
cambiemos cols por
rows para hacer la
misma prueba pero
en filas
24
ASÍ DEBE QUEDAR
Ahora demos clic a cada opción en
nuestro menú, además modifiqué un
poco los <br> en amarillo para que se
vean todas las opciones sin bajar con
la barra de desplazamiento
25
ASÍ DEBE VERSE
Cuando damos clic a Cuando damos clic a Cuando damos clic a
“Página azul” “Página verde” “Página amarilla”
26
