Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Frames HyV PDF

    Cargado por

    Alvarado Serrano Nallely
    12 vistas26 páginas
    Este documento explica cómo crear y utilizar marcos (frames) en una página web para dividir la pantalla en secciones independientes. Define las etiquetas <frameset> y <frame> y sus atributos rows y cols para crear marcos horizontales u verticales. Muestra cómo crear tres páginas con diferentes colores de fondo y luego vincularlas a marcos mediante hipervínculos para que se carguen en las secciones correspondientes cuando se hace clic en el menú.

    Descripción original:

    Título original

    frames-HyV.pdf

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Este documento explica cómo crear y utilizar marcos (frames) en una página web para dividir la pantalla en secciones independientes. Define las etiquetas <frameset> y <frame> y sus atributos rows y cols para crear marcos horizontales u verticales. Muestra cómo crear tres páginas con diferentes colores de fondo y luego vincularlas a marcos mediante hipervínculos para que se carguen en las secciones correspondientes cuando se hace clic en el menú.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    12 vistas26 páginas

    Frames HyV PDF

    Cargado por

    Alvarado Serrano Nallely
    Este documento explica cómo crear y utilizar marcos (frames) en una página web para dividir la pantalla en secciones independientes. Define las etiquetas <frameset> y <frame> y sus atributos rows y cols para crear marcos horizontales u verticales. Muestra cómo crear tres páginas con diferentes colores de fondo y luego vincularlas a marcos mediante hipervínculos para que se carguen en las secciones correspondientes cuando se hace clic en el menú.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 26

    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

    También podría gustarte