Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Introducción A Los Frames

    Încărcat de

    William Antonio Hernandez Ramos
    60 vizualizări20 pagini

    Titlu original

    Introducción a los Frames

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    60 vizualizări20 pagini

    Introducción A Los Frames

    Încărcat de

    William Antonio Hernandez Ramos

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 20

    Introduccin a los Frames

    Un frame es una especie de marco o recuadro independiente en el que podemos cargar una pagina web. Podemos as dividir una pagina web en diferentes partes o ventanas, cada una con sus propios bordes y barras de desplazamiento, pudiendo cargar dentro de cada una de ellas una pagina externa independiente. Pero los frames no se usan aisladamente, si no que una de las caractersticas mas importantes de los frames es que pulsando un enlace situado en un frame, se puede cargar en otro frame una pagina determinada. Los frames se definen en una pagina especial, que en su cdigo slo contiene la definicin de los frames o divisiones y la pagina que se va a cargar dentro de cada uno de ellos, por lo que deberemos crear aparte cada una de las paginas que van a contener los marcos. En la pagina donde hemos de definir los frames diremos el nmero de los mismos que queremos que haya, su tamao y la pagina que van a contener. La principal diferencia que va a haber a la hora de crear una pagina de frames es que en vez de utilizar la etiqueta BODY, que sirve normalmente para delimitar lo que se va a ver en la pantalla, se hace uso de la etiqueta FRAMESET . El uso de las frames es til para cierto tipo de documentos, pero puede llegar a dificultar la navegacin, ya que dentro de un documento con frames no tendran utilidad los botones de documento previo (back) ni documento siguiente (forward), ya que ambos nos trasladaran fuera del documento con frames. Para ver el documento previo en una de las frames debemos utilizar el botn derecho del ratn sobre ella y seleccionar la opcin volver en el frame (Back in Frame). Esto hace que cuando se utilicen frames haya que cuidar la correcta transicin entre documentos.

    Etiqueta <FRAMESET>
    Las etiquetas <FRAMESET></FRAMESET> son las que van a decirle al navegador dnde empiezan y dnde acaban los marcos, y el tipo y forma de estos. Entre una y otra irn las definiciones de los diferentes frames. Estas etiquetas se deben situar entre <HTML> y </HTML>, pero podemos hacerlo tambin entre </HEAD> y <BODY>, en incluso podemos no utilizar <BODY></BODY>. Sus principales atributos o parametros son: * COLS= " x,y,z,", para definir el n de columnas o marcos verticales que va a tener la ventana, y donde las variables x,y,z van a definir el tamao de cada marco vertical, pudiendo definirse en pxeles o en porcentaje. Tambin podemos fijar el tamao de una columna o columnas como * , y en este caso el tamao de

    esta sera todo aquel que quede despus de definir mediante puntos o porcentajes las demas columnas. Si definimos tamaos en pxeles, estos seran absolutos, En este caso si todas las frames se indican de este modo, los valores se ajustaran para que las frames ocupen la totalidad del espacio de la ventana del navegador, no guardando siempre la proporcin con la que se definen las frames. Por el contrario, si empleamos medidas en porcentaje, en este caso si los porcentajes suman un valor distinto del 100%, se ajustaran para que coincidan con el tamao de la ventana. Se podra combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje. Posibles combinaciones seran: 1) COLS="100,700"que nos dividira la ventana en dos columnas, una de 100 puntos y la otra de 700. 2) COLS="10%,*"que nos dara una columna con el 10% de la ventana y otra con el resto. 3) COLS="20%,*,*"obteniendo con ello una columna del 20% de la ventana y otras dos que se repartirian por igual el tamao restante. 4) COLS="*,2*"que nos creara dos columnas, teniendo la segunda el doble de ancho que la primera, es decir, la primera ocupara el 33% de la ventana y la segunda el 66% restante. * ROWS=" x,y,z,", para definir el n de filas o marcos horizontales que va a tener la ventana, y donde las variables x,y,z van a definir el tamao de cada marco horizontal, pudiendo definirse en pxeles o en porcentaje. Tambin podemos fijar el tamao de una fila o filas como * , y en este caso el tamao de esta sera todo aquel que quede despus de definir mediante pxeles o porcentajes las demas filas. Las combinaciones posibles son muchas, siendo su estructura analoga a las vistas para COLS. Si definimos tamaos en pxeles, estos seran absolutos, En este caso si todas las frames se indican de este modo, los valores se ajustaran para que las frames ocupen la totalidad del espacio de la ventana del navegador, no guardando siempre la proporcin con la que se definen las frames. Por el contrario, si empleamos medidas en porcentaje, en este caso si los porcentajes suman un valor distinto del 100%, se ajustaran para que coincidan con el tamao de la ventana. Se podra combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje. * FRAMEBORDER= " 0 / 1 / no / yes ", que nos permite definir si los marcos creados van a tener borde o no. Los valores 0 y no son equivalentes, eliminando los bordes, as como 1 y yes, que los muestran. Su valor por defecto es yes / 1 , por lo que si no especificamos nada se veran los bordes de todos los marcos.

    Si ademas queremos que no se vean los huecos que originan los bordes invisibles hay que aadir el atributo FRAMESPACING=0 para Internet Explorer y BORDER=0 para Nestcape. Ejemplo.<html> <head> <title>Mi pagina</title> </head> <frameset rows="20%,*" > <frame name="" src="a.html" marginwidth="10" marginheight="10" scrolling="auto" > <frame name="" src="b.html" marginwidth="10" marginheight="10" scrolling="auto" > </frameset> </html>
    ver resultado.

    O bien sin bordes: <html> <head> <title>Mi pagina</title> </head> <frameset rows="20%,*" frameborder="0" framespacing="0" border="0"> <frame name="" src="a.html" marginwidth="10" marginheight="10" scrolling="auto" > <frame name="" src="b.html" marginwidth="10" marginheight="10" scrolling="auto" > </frameset> </html>
    ver resultado.

    * BORDER= " n ", con n = n entero = n de pxeles. En el caso de que se haya establecido FRAMEBORDER=" 1 " o no se haya especificado, este atributo nos permite definir el grosor del borde. Slo funciona con Nestcape. * FRAMESPACING= " n ", con n = n entero = n de pxeles. Nos permite definir el espacio entre los marcos, y en el caso de que se haya establecido FRAMEBORDER=" 1 " o no se haya especificado, este atributo nos permite definir el grosor del borde. Slo funciona con Explorer. * BORDERCOLOR= " color ", donde color puede venir especificado mediante su nombre web en ingls o mediante su cdigo hexadecimal. Nos permite establecer el color de los bordes de los marcos. Ejemplo.-

    <html> <head> <title>Mi pagina</title> </head> <frameset rows="20%,*" bordercolor="red"> <frame name="" src="a.html" marginwidth="10" marginheight="10" scrolling="auto" > <frame name="" src="b.html" marginwidth="10" marginheight="10" scrolling="auto" > </frameset> </html>

    Etiqueta <FRAME>
    La etiqueta <FRAME> define cada uno de los marcos que va a haber en la ventana. Debe ir colocada siempre entre <FRAMESET> y </FRAMESET>, y debe haber tantas etiquetas como marcos hayamos definido con COLS y ROWS. Sus atributos son: Estas etiquetas se deben situar entre <HTML> y </HTML>, pero podemos hacerlo tambin entre </HEAD> y <BODY>, en incluso podemos no utilizar <BODY></BODY>. Sus principales atributos o parametros son: * SRC=" ruta pagina html", que especifica qu pagina se va a cargar en el frame. La ruta de la pagina debe especificar su localizacin en el sistema de archivos local del servidor web o una URL completa. Ejemplos.<frame src="principal.html"> <frame src="http://www.yahoo.es"> * NAME=" nombre ", que especifica qu pagina se va a cargar en el frame. La ruta de la pagina debe especificar su localizacin en el sistema de archivos local del servidor web o una URL completa. Sirve para asignar un nombre al marco. Es un atributo muy importante, ya que cuando queramos luego cargar una pagina en un marco mediante un enlace, deberemos decir en qu marco queremos hacerlo, y esto se consigue haciendo referencia al nombre del marco en el atributo TARGET de la etiqueta <A> del enlace. Este parametro TARGET esta relacionado con pulsar un enlace en un marco y cargar la pagina enlazada en otro. Su sintaxis general dentro de la etiqueta <A> es: <A HREF=" manual.html " TARGET= " cuerpo ">Manual HTML</a>

    donde cuerpo es el nombre asisnado a un frame mediante el atributo NAME. Con esto, al pulsar el enlace se cargara la pagina manual.html dentro del marco llamado cuerpo. <A HREF=" manual.html " TARGET= " _blank">Manual HTML</a> y ahora se cargara la pagina en una ventana nueva del navegador, por lo que tendremos dos ventanas abiertas. <A HREF=" manual.html " TARGET= " _self "</a> En este caso el la pagina llamada se va a cargar en el propio frame que la llama. Es equivalente a no colocar el parametro TARGET, por lo que casi no se usa. Se puede usar para modificar el valor dado por BASE. <A HREF=" manual.html " TARGET= " _parent</a> y la pagina se mostrara en el marco o <FRaMESET> que llam al documento actual. Si no hay ningn <FRAMESET> anterior, la pagina llamada se mostrara a pantalla completa, suprimiendo todos los marcos de la pantalla. Indica que se muestre en la ventana completa, eliminando la estructura de frames que tenga la ventana. <BASE TARGET= " nombre" </a> que especifica el frame en el que se mostrara por defecto todos los hiperenlaces del documento actual. Se debe especificar en la cabecera del documento (HEAD). <AREA SHAPE=RECT COORDS="x,y,..." HREF="url" TARGET="frame" </a> que en la definicin de imagenes sensibles en el cliente, indica el frame donde se vera el documento que se activa en la zona correspondiente de la imagen. <FORM ACTION="url" TARGET="nombre"</a> que indica al formulario al que se mandan los datos el frame de destino del resultado de los mismos. * MARGINWIDTH=" x ", con x = n pxeles o porcentaje. Sirve para definir el margen horizontal que queremos que haya dentro del frame, entre l os lmites de este y su contenido. que indica al formulario al que se mandan los datos el frame de destino del resultado de los mismos. * MARGINHEIGHT=" x ", con x = n pxeles o porcentaje. Nos define el margen vertical que queremos que haya dentro del frame, entre los lmites de este y su contenido. Ejemplo.-

    <html> <head> <title>Mi pagina</title> </head> <frameset rows="40%,*" > <frame src="a.html" marginwidth="50" marginheight="30"> <frame src="b.html" marginwidth="10" marginheight="0"> </frameset> </html>
    ver resultado.

    * SCROLLING= " yes / no / auto ", que nos va a permitir establecer si el marco tendra o no barra deslizadora cuando el contenido del marco exceda al tamao de este. Sus posibles valores son: - yessiempre aparecera la barra deslizadora. - nonunca aparecera. Por lo tanto, si el contenido es mayor que el texto slo podremos ver lo que quepa en el marco. - autoslo aparecera el scroll si es necesario para poder visualizar el contenido completo del marco. Este es el valor por defecto * NORESIZE. Este atributo impide que el marco pueda ser redimensionado por el visitante arrastrando su borde. Si no se indica este atributo el marco podra ser redimensionado. * BORDECOLOR= " color ", con color = nombre color web en ingls o en hexadecimal. Sirve para definir el color del borde del marco concreto al que se aplica. * FRAMEBORDER= " 1 / 0 ". Si se ha establecido BORDECOLOR, si su valor es 0 se mostrara el borde sin efecto 3D en el marco (se percibe mejor en Explorer), y si es 1 s se mostrara este efecto. ademas, si lo igualamos a cero se eliminara el borde con todos los marcos contiguos que tengan tambin este valor a cero. Ejemplos.<html> <head> <title>Mi pagina</title> </head> <frameset rows="40%,*" bordercolor="red"> <frame src="a.html" marginwidth="50" marginheight="30" frameborder="0" > <frame src="b.html" marginwidth="10" marginheight="0" frameborder="0"> </frameset> </html>
    ver resultado.

    <html> <head> <title>Mi pagina</title> </head> <frameset rows="40%,*" bordercolor="red"> <frame src="a.html" marginwidth="50" marginheight="30" frameborder="0" > <frame src="b.html" marginwidth="10" marginheight="0" > </frameset> </html>
    ver resultado.

    <html> <head> <title>Mi pagina</title> </head> <frameset rows="40%,*" bordercolor="red"> <frame src="a.html" marginwidth="50" marginheight="30" frameborder="1" > <frame src="b.html" marginwidth="10" marginheight="0" frameborder="1"> </frameset> </html>
    ver resultado.

    Etiquetas <NOFRAMES></NOFRAMES>
    Este par de etiquetas no son atributos de <FRAME>. Se utiliza para prevenir el caso de que el navegador del visitante no soporte frames. Deben situarse antes de </FRAMESET>, y dentro de ellas se incluyen <BODY> texto de aviso </BODY>. Si el navegador no reconoce los frames los ignorara, mostrando el mensaje de aviso. Este atributo esta actualmente en dehuso, ya que todos los modernos navegadores soportan frames. Un ejemplo completo de una pagina simple con frames sera: <html> <head> <title>Pagina con frames</title> </head> <frameset rows="20%,*" frameborder="yes" bordercolor="yellow" > <frame name="uno" src="a.html" marginwidth="50" marginheight="30" > <frame name="dos" src="b.html" marginwidth="30" marginheight="40" > <noframes> <body> Lo siento. Su navegador no soporta frames. Pulse <a href="noframes.html">AQU</a> para acceder a una pagina sin frames. </body> </noframes> </frameset> </html>
    Mundo Web > HTML > Frames > 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8

    Frames anidados
    Hasta ahora hemos definido frames simples, es decir, la forma de dividir una pagina en una serie de filas o de columnas que nos posibilitan cargar una pagina html independiente dentro de cada marco. Pero este diseo de pagina, aunque util, es muy simple. Podemos ir mas alla anidando frames, es decir introduciendoo frames dentro de otros previamente definidos. as, podemos dividir una fila en columnas, una columna en filas, etc. Pero este procedimiento es bastante complejo en su cdigo, por lo que es conveniente ayudarse de alguno de los muchos programas de creacin web que existen. Como ejemplo de esta tcnica veamos el siguiente cdigo: <html> <head> <title>Mi pagina</title> </head> <frameset rows="10%,*" frameborder="1" bordercolor="Green"> <frame name="top" src="top.html" marginwidth="10" marginheight="10" scrolling="no" "noresize frameborder="0"> <frameset cols="20%,*" > <frame name="a" src="a.html" marginwidth="10" marginheight="10" scrolling="no" noresize frameborder="0"> <frame name="b" src="b.html" marginwidth="10" marginheight="10" scrolling="auto" noresize frameborder="0"> </frameset > </frameset> </html>
    ver resultado.

    en la que hemos creado primero dos filas, una con el 10% del alto de ventana y otra con el resto, y luego hemos sustituido esta ltima fila por dos columnas. Otro ejemplo sera: <html> <head> <title>Mi pagina</title> </head> <frameset cols="19%,*" frameborder="1" bordercolor="Green"> <frame name="a" src="a.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="1"> <frameset rows="22%,*" > <frame name="top" src="top.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> <frameset cols="50%,*"> <frame name="b" src="b.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1">

    <frame name="c" src="c.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="1"> </frameset> </frameset > </frameset> </html>

    Frames flotantes (I)


    Es posible situar en nuestras paginas web una especie de frames o marcos "flotantes", queriendo decir con esto que son como frames pero que podemos situarlos en la posicin que queramos dentro de nuestra pagina, situando mediante coordenadas su vrtice superior izquierdo. Estas ventanas son configurables, pudiendo definir ademas de su posicin su tamao y otra serie de propiedades. El mayor inconveniente que encontramos con estas ventanas flotantes es que su implementacin es diferente en Internet Explorer y en Nestcape. Cada navegador posse una etiqueta y atributos diferentes para crear este tipo de marcos, no reconociendo uno las marcas del otro. Esta es otra de las consecuencias de la lucha entre ambas compaas, que como siempre hemos de pagar los creadores web. Internet Explorer 3.0 y superiores implementa las etiquetas <IFRAME>...</IFRAME>, que van a definir el principio y fin del marco flotante. Estas etiquetas deben situarse dentro del cuerpo de la pagina que contiene al marco, es decir, entre <BODY> y </BODY>. Los principales atributos de la etiqueta <IFRAME> son: * NAME=" nombre ", analogo al atributo de <FRAME>, sirve para identificar unvocamente al marco flotante, con vistas a referenciar su contenido mediante un enlace por medio del parametro TARGET. * WIDTH= " x ", donde x = n pxeles. Con este atributo definimos la anchura que va a tener el marco flotante. * HEIGHT= " x ", donde x = n pxeles. Con este atributo definimos la altura que va a tener el marco flotante. * ALIGN= " left / center / right ", Va a definir si el marco va a estar alineado a la izquieda en la ventana del navegador, centrado o a la derecha. Ejemplo.- (Slo para I.Explorer) <html> <head> </head> <body> <iframe align="left" src="a.html"></iframe> <iframe align="center" src="b.html"></iframe> </html>

    ver resultado.

    * FRAMEBORDER= " 0 / 1 ", Este atributo hace que el marco aparezca sin borde o con borde (valor por defecto) respectivamente. Ejemplo.- (Slo para I.Explorer) <html> <head> </head> <body> <iframe src="a.html" frameborder="0" align="center" ></iframe> </html>
    ver resultado.

    * VSPACE= " x ", donde x = n pxeles. Nos sirve para posicionar el marco, y define la distancia entre el borde superior del marco y el lmite superior de la ventana del navegador. * HSPACE= " x ", donde x = n pxeles. Nos sirve para posicionar el marco, y define la distancia entre el borde izquierdo del marco y el lmite izquierdo de la ventana del navegador. Ejemplo.- (Slo para I.Explorer) <html> <head> </head> <body> <iframe src="a.html" hspace="100" vspace="20"></iframe> </html>
    ver resultado.

    * MARGINHEIGHT= " x ", donde x = n pxeles. Nos define el espacio en pxeles que va a haber entre el borde superior del marco y su contenido. * MARGINWIDTH= " x ", donde x = n pxeles. Nos define el espacio en pxeles que va a haber entre el borde izquierdo del marco y su contenido. Ejemplo.- (Slo para I.Explorer) <html> <head> </head> <body> <iframe src="a.html" frameborder="1" marginwidth="60" marginheight="30"></iframe> </html>

    ver resultado.

    * SCROLLING= " yes / no / auto ", que nos va a definir si el marco va a tener barra deslizadora siempre, nunca o slo cuando sea necesario por exceder el contenido al tamao del mismo. Su valor por defecto es auto. * SRC= " ruta pagina html ", que nos va a definir la pagina web que se va a cargar dentro del marco flotante. Podemos especificar bien la ruta completa de la pagina en el directorio de nuestro servidor web o bien una URL completa de Internet. * STYLE= " parametro-valor / parametro-valor / ", Este atributo es una aplicacin directa de las Hojas de Estilo en Cascada (CSS), y nos permiten definir la posicin y tamao del marco en la ventana del navegador. Si el frame flotante no contiene una pagina web referenciada mediante SRC y contiene texto, tambin es posible aplicar estilos a este texto, como color, fuente, tamao, etc. Ejemplo.- (Slo para I.Explorer) <html> <head> </head> <body> <iframe src="a.html" style="position:absolute; left:100px;top:140px;width:400px;height:150px;" > </iframe> </html>
    ver resultado.

    * CLASS= " clase ". analogo al anterior, pero ahora refiriendo el estilo del marco flotante (posicin y tamao) de acuerdo con una clase de estilos definida en la seccin de la pagina que contiene al marco o en un archivo externo de extensin ".css" * ID= " identificador ". En todo semejante al anterior, pero con la diferencia que ahora el nombre de identificador asignado debe ser nico para cada marco en concreto. Tambin posibilita cambiar dinamicamente las propiedades del marco usando un lenguaje de script, como JavaScript. Si queremos, podemos colocar un texto alternativo entre las etiquetas <IFRAME>> e </IFRAME>, con el objeto de que aquellas personas cuyo navegador no soporte los marcos flotantes puedan contemplar un mensaje alternativo.

    Frames flotantes (II)


    Nestcape Navigator 3.0 y superiores implementa las etiquetas <ILAYER>...</ILAYER>, que van a definir el principio y fin del marco flotante. Estas etiquetas deben situarse dentro del cuerpo de la pagina que contiene al marco, es decir, entre <BODY> y </BODY>.

    Los principales atributos de la etiqueta <IFRAME> son: * SRC= " ruta pagina html ", que nos va a definir la pagina web que se va a cargar dentro del marco flotante. Podemos especificar bien la ruta completa de la pagina en el directorio de nuestro servidor web o bien una URL completa de Internet. * NAME=" nombre ", donde nombre va a ser la referencia que vamos a tener para cargar luego otras paginas web dentro del marco mediante enlaces con el atributo TARGET. * PAGEX= " x ", con x = n de pxeles. Define la posicin horizontal de la esquina superior izquierda del ILAYER respecto a la ventana del navegador. * PAGEY= " y ", con y = n de pxeles. Define la posicin vertical de la esquina superior izquierda del ILAYER respecto a la ventana del navegador. * LEFT= " x ", donde x = n pxeles. Es analogo a PAGEX en lo que respecta al elemento ILAYER. * TOP= " x ", donde x = n pxeles. Es analogo a PAGEY en lo que respecta al elemento ILAYER. * WIDTH= " x ", donde x = n pxeles. Con este atributo definimos la anchura que va a tener el marco flotante. * HEIGHT= " x ", donde x = n pxeles. Con este atributo definimos la altura que va a tener el marco flotante. * CLIP= " h,v ", Nos va a permitir " recortar " el marco, de tal forma que slo va a ser visible del mismo h pxeles de ancho y v pxeles de alto. Esta operacin va a ser necesaria hacerla siempre, ya que si no "recortamos" el marco flotante Nestcape va a mostrar slo aquella parte del mismo necesaria para mostrar la pagina, la imagen o el texto que contenga. Ejemplos.- (Slo paraNestcape) <html> <head> </head> <body> <ilayer src="a.html></ilayer> </body> </html>
    ver resultado.

    <html> <head> </head>

    <body> <ilayer src="a.html" clip="300,200"></ilayer> </body> </html>


    ver resultado.

    * BACKGROUND= " ruta imagen ", que nos permite definir una imagen de fondo para el marco flotante, especificando su ruta completa. La pagina cargada dentro del marco se mostrara encima de este fondo de imagen. Ejemplo.- (Slo para Nestcape) <html> <head> </head> <body> <ilayer background="images/fondo.jpg" width="200" height="150" clip="200,150"></ilayer> </html>
    ver resultado.

    * BGCOLOR= " color ", donde color viene expresado por su nombre web en ingls o por su cdigo hexadecimal, y que nos permite definir un color de fondo para el marco flotante. La pagina cargada dentro del marco se mostrara encima de este color de fondo. Ejemplo.- (Slo para Nestcape) <html> <head> </head> <body> <ilayer bgcolor="#0099ff" width="200" height="150" clip="200,150"></ilayer> </html>
    ver resultado.

    * VISIBILITY= " hide / show / inherit ", que nos va a determinar si el marco flotante sera oculto, se vera o si heredara esta propiedad del elemento que lo contiene. * Z-INDEX= " n ", que nos da una coordenada de profundidad del marco, y que sera la que determine cual marco se va a ver en el caso de que varios se superpongan. Se vera el marco que tenga mayor valor de Z-INDEX. Esta etiqueta es dificultosa de usar en los marcos flotantes, ya que Nestcape tiende a situarlos " a su aire" cuando hay varios definidos en la misma pagina. Esto es debido a que una vez que asigna un espacio de pantalla para el primer ILAYER, se resiste a situar otro en ese espacio reservado. Este paramero, Z-INDEX, adquiere todo su significado en el tratamiento de capas generadas con las etiquetas <DIV> y <SPAN>.

    * ABOVE. Indica que el ILAYER debe situarse encima de otro especificado. * BELOW. Indica que el ILAYER debe situarse debajo de otro especificado. Con todo esto podra parecer que Nestcape posee mas facilidades para crear marcos flotantes, pero no debemos dejarnos engaar por las apariencias, pus Explorer nos permite definir muchas propiedades del marco mediante CSS, cosa que no admite Nestcape. Tanto la etiqueta <FRAME> de Explorer como la <ILAYER> de Nestcape estan en dehuso, ya que lo correcto es crear cdigo til para ambos navegadores. Un truco para conseguir esto sera introducir dentro de un <IFRAME> un <ILAYER>. as, Explorer entendera la primera etiqueta e ignorara la segunda, y con Nestcape ocurrira al revs. Ejemplo.- (ambos navegadores) <head> </head> <body> <iframe src="a.html" width="300" height="150" vspace="75" hspace="150"> <ilayer src="a.html" width="300" height="150" clip="300,150" top="75" left="150"> </ilayer> </iframe> </html>
    ver resultado.

    El problema vendra a la hora de referenciar una nueva pagina para el conjunto obtenido, y nos hara falta una funcin de JavaScript que fuera cargar la pagina en los dos marcos a la vez. De todas formas, ya hemos dicho que estas etiquetas estan en dehuso, siendo sustituidas por " capas " definidas mediante CSS-P, es decir, mediante posicionamiento por Hojas de Estilo en Cascada.

    Uso de los Frames (I)


    La tcnica de los frames ha sido una de las mas empleadas a la hora de construir pginas web, debido a la facilidad que tiene para crear ventanas independientes en las que cargar pginas a partir de mens. Hasta la introduccin de HTML dinamico fu la nica herramienta de que disponamos para estos fines. Sin duda su uso nos facilita mucho la navegacin y la presentacin en un sitio web, aunque tambin origina muchos problemas secundarios. Entre los principales usos que podemos dar a los frames en nuestras pginas se encuentran: * Mens de navegacin.

    Podemos crear con frames un sistema de navegacin por nuestras pginas mediante un marco lateral en el que situamos enlaces y un marco principal en el que se iran cargando las pginas llamadas. El esquema de construccin puede ser crear tres marcos: uno superior fijo, en el que podemos situar nuestro logo y/o un bannner o mensaje, otro lateral con el menu y otro central para cargar las pginas. Para conseguir esto debemos crear 4 pginas web: 1) 2) 3) 4) pgina pgina pgina pgina index.html con la definicin de los frames. top.html con el logo, banner , etc. menu.html con los enlaces de principal.html de entrada incial en el frame central.

    Mas las diferentes pginas de nuestro sitio web, que iremos llamando desde el men lateral y cargando en el frame central. El cdigo a crear sera del tipo: pgina index.html <html> <head> </head> <frameset rows="18%,*"> <frame name="superior" src="arriba.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="1"> <frameset cols="19%,*"> <frame name="menu" src="menu2.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> <frame name="ventana" src="central_1.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> <frameset> <frameset> </html> pgina menu.html <html> <head> </head> <body> <a href="central_1.html" target="ventana">pgina 1*</a> <a href="central_2.html" target="ventana">pgina 2*</a> </body> </html> y luego creamos arriba.html, que es una pgina simple con una imagen como logo y un texto aclarativo, y central_1.html y central_2.html que son dos pginas que contendran aquellos elementos web que deseemos.
    ver resultado.

    Como podemos ver, al pinchar sobre el enlace "pgina 1*" lo que hacemos es cargar en el frame central dicha pgina, y lo mismo ocurre al pinchar el enlace "pgina 2*", con lo que sustituimos el contenido de diho frame. Y esto podemos hacerlo con todos los enlaces y pginas que deseemos. Si hablamos de proporciones de frames y ventana, lo mas comn es utilizar aproximadamente el cuarto izquierdo de la pgina para el ndice fijo y los tres cuartos restantes para la informacin, en el caso de que slo haya dos frames verticales, y si tenemos tres frames, como en el ejemplo, aproximadamente el quinto/sexto superior de la pgina para el encabezado con el logo, y de lo que resta, el cuarto izquierdo es para el men y los tres cuartos derechos para la informacin. * a partir de este esquema basico podemos extender las utilidades del men mediante frames. Por ejemplo, podemos hacer que al pinchar el enlace del men se nos cambie a la vez tanto el contenido de la ventana central como el de el marco superior, para conseguir as mostrar un mensaje o banner diferente para cada enlace pulsado. Para poder hacer esto necesitamos una funcin JavaScript actuando en la pgina menu.html y varias pginas que se vayan alternando tanto en el frame superior como en el central. Ejemplo.- ( menu.html) <html> <head> <SCRIPT language="JavaScript" type="text/javascript"> <!-function twoinone(nr){ if (nr==1){ parent.superior.location.href="superior1.html" parent.ventana.location.href="a.html" } if (nr==2){ parent.superior.location.href="superior2.html" parent.superior.location.href="b.html" } } //--> </SCRIPT> </head> <body> <a HREF="JavaScript:twoinone(1)">Link 1</a> <a HREF="JavaScript:twoinone(2)">Link 2</a> </body> </html>
    ver resultado.

    * Y siguiendo con esta tcnica podemos imaginar cualquier combinacin para montar el sistema de navegacin de nuestro sitio web. Podemos montar dos frames laterales, uno con el men y otro con informacin o enlaces relacionados. Ejemplo.-

    <html> <head> </head> <frameset rows="18%,*"> <frame name="superior" src="superior.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0"> <frameset cols="16%,*"> <frame name="menu" src="menu.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0"> <frameset cols="85%,*"> <frame name="ventana" src="principal.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0"> <frame name="lateral" src="enlaces1.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0"> </frameset> </frameset> </frameset> </html>
    ver resultado.

    * Podemos tambin utilizar la tcnica de los frames flotantes para situar uno en una zona en concreto de nuestra pgina y cargar en l, mediante enlaces, diferentes pginas. Pero nos encontramos entonces con la limitacin de Nestcape, que no permite que los <ILaYER> tengan barra de scroll, con lo que deberemos entonces fijar un tamao de marco y tener en cuenta que la pgina que se carge dentro no exceda este tamao, porque entonces no se vera completa. Con Explorer no tendremos este problema, ya que si el contenido excede al marco aparecera una barra de deslizamiento que nos permitira ver todo el contenido. Y as sucesivamente, hasta donde la imaginacin nos lo permita.

    Uso de los Frames (II)


    * adaptar nuestra pagina a la resolucin del navegador. Imaginemos que hemos creado una pagina web para una resolucin de 800x600 pxeles. Cuando la visualice un visitante con una resolucin de 640x480 no pasara nada, slo que necesitara usar las barras de desplazamiento para poder visualizarla entera. Pero si nuestro visitante esta utilizando una resolucin de 1024x768 o superior nuestra pagina, si la hemos definido con unidades absolutas, le quedara situada en la parte superior derecha de la ventana del navegador, quedando una gran parte de la pantalla vaca. Este efecto es indeseable, y podemos corregirlo usando una funcin de JavaScript que detecte la resolucin que usa el visitante. Si esta es de 640x860 de 800x600 le redireccionara a nuestra pagina original, pero si la resolucin es de 1024x768 por ejemplo, le enviara a una pagina con frames en la que en la ventana central estara cargada nuestra pagina original. Con esto la pagina quedara centrada en la pantalla. Hay otras formas de conseguir esto, pero esta con frames es totalmente viable.

    Primero necesitamos una pagina index.html, que es la que se va a encragar de detectar la resolucin y de redireccionar adecuadamente: <html> <SCRIPT language="JavaScript" type="text/javascript"> <!-var width = screen.width; var res =(((!(640-width))*1)+((!(800-width))*2)+((!(1024-width))*3)+ ((!(1152-width))*4)+((!(1280-width))*5)+((!(1600-width))*6)); if(!(res)) res = 1;if (res=='1') {window.location='800.html'} if (res=='2') {window.location=800.html} if (res=='3') {window.location='1024.html'} if (res!='1' && res!='2' && res!='3') {window.location='1024.html'} //--> </SCRIPT> </head> <body> </body> </html> y ahora creamos tres paginas: 800.html, que va a ser nuestra pagina normal, 1024.html, que va a ser una pagina con frames: <html> <head> </head> <frameset cols="300,*"> <frame name="lateral" src="nada.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0"> <frameset rows="75,*"> <frame name="superior" src="nada.html" marginwidth="10" marginheight="10" scrolling="no" frameborder="0"> <frame name="ventana" src="800.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0"> </frameset> </frameset> </html> y nada.html, que va a ser una pagina vacia. La nica condicin es que tenga el mismo color de fondo que nuestra pagina principal 800.html. podemos comprobar una aproximacin visual del efecto conseguido con esto:
    ver resultado a 800x600. ver resultado a 1024x768.

    Es decir, hemos creado una especie de "contenedor" para nuestra pagina principal a base de frames, que slo se activara en el caso de que la resolucin del navegador sea de 1024 o superior, en cuyo caso nos la situara en medio de la pantalla. Este efecto de puede conseguir de una forma mejor con Javascript puro, posicionando la pagina en la ventana segn la resolucin, pero tambin es viable hacerlo con frames, como se ha explicado.

    * Frames ocultos. Una de las posibilidades que tenemos a la hora de usar trabajar con frames es el uso de frames ocultos, es decir frames que no se van a ver en pantalla. Esto es facil de conseguir, ya que basta definir un frame horizontal o vertical que quede fuera de los lmites de la pantalla. as por ejemplo podemos crear un frame horizontal oculto mediante: <html> <head> </head> <frameset rows="100%,*"> <frame name="principal" src="a.html" marginwidth="10" marginheight="10" frameborder="0"> <frame frame name="oculto" src="b.html" scrolling="no" frameborder="0"> <frameset> </html> y queda oculto porque por propia definicin del FRaMESET el primer frame ocupara el 100% del tamao de la ventana. Lo mismo podamos heber hecho con un frame vertical, e incluso podemos definir varios frames ocultos. Una vez construido este frame escondido, lo podemos usar para diferentes fines: 1) Ocultar una clave de acceso: si queremos disponer en nuestra pagina de un control de acceso mediante claves y no queremos procesar estas en un programa en el servidor (que es lo aconsejable, por seguridad), podemos esconder las claves correctas de acceso en el frame oculto, y cuando el visitante introduzca las claves en los campos correspondientes de la pagina principal, hacer una comprobacin mediante JavaScript con las claves que tenemos escondidas. 2) Ocultar objetos o funciones de JavaScript: un ejemplo tpico de este mtodo es la creacin de mens de arbol, incluyendo en el frame aculto la funcin de JavaScript que "dibujara" el men en un frame lateral visto, de tal forma que si el visitante observa el cdigo fuente de este, slo vera cdigo HTML puro, pero no el de la funcin que lo crea. 3) almacenamiento de variables de sesin: a veces puede interesarnos ir almacenando algunas variables y valores a lo largo de la visita de una persona a nuestras paginas. Por ejeplo, podemos ir creando un perfil de usuario en unas pocas paginas iniciales, para luego dirigir a nuestro visitante a una zona en concreto de nustro sitio web. Para ello, podemos crear un frame oculto e ir " escribiendo " en l mediante JavaScript las variables que nos interesen, pudiendo recuperar su valor cuando lo necesitemos. Esto lo hacen muchas aplicaciones de todo tipo, si bien para programacin web se suelen utilizar otras tcnicas basadas en el almacenamiento de las variables en el servidor o en el equipo cliente mediante cookies, ya que si lo hacemos por el mtodo explicado en este

    apartado en cuanto el cliente refresque la pagina perderemos el valor de las variables, a no ser que le indiquemos medianto cdigo de Script qu frames debera recargar en esos casos, aunque de todas formas esta solucin es complicada. *Ocultar el cdigo fuente de la pagina. Si queremos ocultar el cdigo de nuestra pagina (por favor, deja el cdigo a la vista y claro, para que otras personas puedan aprender de t), siempre podemos crear un frame u4nico que ocupe el 100% de la pantalla, y cargar en l la pagina a la que queremos ocultarle el cdigo. El visitante, al ir al men VER > CDIGO FUENTE slo visualizara el cdigo de creacin del frame, no el de la pagina que contiene. Pero ?y si el visitante selecciona la opcin ver cdigo fuente mediante el botn derecho del ratn?. Rn ese caso todo nuestro esfurzo habra sido en vano. aunque podemos entonces crear una funcin JavaScript que desactive el botn derecho, con lo que la proteccin de nuestro cdigo sera total. ?O no es as?...!!NO!!, ya que siempre que cargamos una pagina de Internet, para poder nuestro navegador visualizarla lo primero que hace es cargarla en la cach del navegador. Por lo tanto, si queremos ver el cdigo fuente o salvar una imagen o cualquier elemento de la pagina que ya haya sido visualizado en el navegador, lo nico que tenemos que hacer es irnos al directorio WIDOWS o WINNT de nuestro odenador y buscar en la carpeta archivos temporales de Internet, y all estaran guardados todos los elementos de las paginas que hayamos visualizado, incluyendo las propias paginas con su cdigo fuente.

    S-ar putea să vă placă și