Una ventana de documento del navegador solo puede mostrar un archivo de página web, pero puede mostrar más de una página en la misma ventana del navegador utilizando un marco. La página que usa un marco contiene principalmente dos partes, una es el conjunto de cuadros y el otro es el archivo de cuadro específico.
El marco se utiliza principalmente para el diseño del backend del sitio web o los sistemas de intranet.
1. Frameset (<Frameset> </ Frameset>): se usa para definir este archivo HTML como un modo de marco y establecer el archivo sobre cómo dividir la ventana. En pocas palabras, un conjunto de marco es un archivo que almacena la estructura del marco y un archivo de entrada que accede al archivo Framework. Si una página web consta de dos marcos izquierdo y derecho, además de los dos archivos de la página web izquierda y derecha, también hay un archivo de conjunto de cuadro total. En una página que usa un marco, la etiqueta del cuerpo <body> se reemplaza por la etiqueta de marco <Mrameset>. Para cada cuadro contenido en la página de cuadro, se define por la etiqueta <Frame>.Atributo de filas: ventana dividida horizontal. Una ventana dividida horizontal es cortar la página en una dirección horizontal, es decir, dividir la página en múltiples ventanas dispuestas hacia arriba y hacia abajo. Se pueden tomar múltiples valores en filas, cada valor representa el ancho horizontal de una ventana de marco, y sus unidades pueden ser píxeles o porcentajes del navegador. Sin embargo, debe tenerse en cuenta que generalmente al establecer los valores de varias filas, hay varios marcos, es decir, hay un número correspondiente de parámetros <Frame>.
<html> <fead> <title> Efecto de la ventana de división horizontal </title> </head> <frameset filas = 30%, 70%> <marca> <marca> </frameset> </html>
Propiedad Cols: ventana dividida vertical. Una ventana dividida vertical es dividir la página en múltiples ventanas en una dirección vertical, es decir, dividir la página en múltiples ventanas dispuestas a la izquierda y a la derecha. Se pueden tomar múltiples valores en COLS, cada valor representa el ancho horizontal de una ventana de marco, y sus unidades pueden ser píxeles o porcentajes del navegador. Lo mismo que la ventana de segmentación horizontal, generalmente al establecer los valores de varios cols, hay varios marcos, es decir, varios parámetros <marca>.
<html> <fead> <title> El efecto de la ventana de división vertical </title> </head> <frameset cols = 20%, 55%, 25%> <marco> <marca> <marca> <cream> </frameset> </ html>
PROPIEDAD DE MARCEBORDER: Establezca el borde. Por defecto, hay una línea de borde alrededor de la ventana de cuadro. El parámetro FrameBorder se puede usar para ajustar la visualización de la línea de borde. La sintaxis es:
<Frameset FrameBorDer = si se muestra> o <FrameframeBorder = si se muestra>. El valor de FrameBorder solo puede ser 0 o 1. Si el valor es 0, la línea de borde se ocultará; Si el valor es 1, se mostrará la línea de borde. La configuración en Frameset será válida para todo el marco, y la configuración en el cuadro solo será válida para el marco actual.
<html> <cead> <title> Establezca el efecto de visualización de borde de la ventana de cuadro </title> </thead> <frameset filas = 20%, 55%, 25%> <frameframeBorBorDer = 1> <frameset cols = 35%, 65%frameBorDer = 0> <cream> <cream> </frameset> <FrameFrameBorder = 0> </ frameset> </html>
Propiedad Framespacing: el ancho del borde del marco. El ancho del borde del cuadro es de 1 píxel de forma predeterminada, y se puede cambiar el tamaño de la espacia de marcos de parámetros.
Sintaxis: <Frameset Framespacing = Ancho de borde>
Nota: El ancho del borde es el ancho de la línea entre cada borde de la página, en píxeles. Este parámetro solo se puede usar para conjuntos de marco y no es válido para un solo marco.
<html> <fead> <title> Establezca el ancho del borde de cuadro </title> </head> <Frameset Rows = 30%, 70%FramesPacing = 10> <Frame> <frameset cols = 20%, 55%, 25%framespacing = 30> <marc> <marcadre> <marcadre> </ramset> </rampeamet> </html>
Propiedad BorderColor: el color del borde del marco. Use el parámetro BorderColor para establecer el color del borde del conjunto de cuadros.
Sintaxis: <frameset borderColor = código de color>
Nota: Este parámetro también es válido solo para todo el conjunto de marco y no es válido para un solo marco.
<html> <fead> <title> Establezca el color del borde del marco </title> </head> <frameset filas = 30%, 70%framespacing = 10 borderColor =#cc99ff> <cream> <frameset cols = 20%, 55%, 25%framespacing = 30 bordercolor =#9900ff> <rame> <marcham> </frameset <frameset <frameset <frameset> </frameset <frameset> </frameset <frameset> <frameset> <frameset <frameset <frameset> </frameset <frameset/frameset <frameset/frameset </html>2. Frame (<Frame>) y SRC Atributos.
Cada página en la estructura del marco es un texto separado, y estos archivos se establecen a través del parámetro SRC.
Sintaxis: <Frame Src = Página Dirección de archivo de origen>
Nota: El archivo de página es el contenido específico de la página de cuadro. No tiene ningún efecto en un marco sin configurar el archivo fuente y solo una página en blanco. El archivo fuente de la página puede ser un archivo HTML normal, o una imagen u otro archivo.
<html> <fead> <title> Establezca el archivo de origen de la página </title> </head> <frameset filas = 30%, 70%> <frame src = pic01.gif> <marco src = src01.html> </frameset> </html>3. <Noframes> </noframes> etiquetas
La etiqueta <noframes> </noframes> se usa para mostrar el contenido de la página cuando el navegador no admite marcos.
<html> <frameset cols = 25%, 50%, 25%> <frame src =/ejemplo/html/frame_a.html> <frame src =/ejemplo/html/frame_b.html> <frame src =/ejemplo/html/frame_b.html> <frame src =/ejemplo/html/char <noframes> <body> ¡Su navegador no puede manejar el marco! </body> </frames> </frameset> </html>2. Marco flotante (<frame>)
Un marco flotante es un marco relativamente especial. Nesta una ventana infantil en una ventana del navegador. Es decir, toda la página no es una página de cuadro, pero contiene una ventana de cuadro. Muestre el contenido de la página correspondiente en la ventana de cuadro. Los marcos flotantes también se llaman marcos en línea y, por lo tanto, se nombran.
Sintaxis: <Iframe src = archivo de fuente de página> </iframe>
Nota: Similar a la estructura del marco ordinaria, un marco flotante también puede establecer muchos parámetros, como el nombre, el desplazamiento, la framborder, etc. Sin embargo, en comparación con los marcos ordinarios, el marco flotante no contiene parámetros de espacios de marcos y bordercolor.
Atributo SRC: el parámetro más básico en un marco flotante es SRC. Se utiliza para establecer la dirección del archivo de origen de la página del marco flotante y también es un parámetro necesario para la página del marco flotante. Porque solo cuando se establece el contenido del archivo fuente, el marco flotante tiene sentido. Sintaxis: <Iframe src = archivo de origen>
Propiedades de ancho y altura: en una estructura de marco normal, dado que el marco es toda la ventana del navegador, no necesita establecer su tamaño. Sin embargo, en un marco flotante, se inserta en una página HTML normal, y todo el marco se puede cambiar el tamaño. Sintaxis: <iframe src = src = Floating Frame Page Fuente Archivo Width = Page Width Height = Page Height>, los valores de ancho y altura de la página están en píxeles.
<html> <body> <iframe src =/i/eg_landscape.jpg width = 550 altura = 310> </iframe> <p> Algunos navegadores antiguos no admiten iFrames. </p> <p> Si es compatible, el iframe no es visible. </p> </body> </html>3. Un ejemplo de un diseño de marco
<html> <fead> <title> Frame HomePage </title> </head> <frameset Rows = 20%,*> <!-frameset set, contenedor para el archivo de control-> <frame name = topfame src = 3.html noresize/> <frameset cols = 240px,*> <marco name = izquierdoframe src = 1.html/> <frameset cols = 240px,*> <name de marco = marco de src = 1.html/>> <frameset cols = 240px,*> <name de marco = marco src = 1.html/> <frameset cols = 240px,*> <name de marco = marco de src = 1.html/> <frameset cols = 240px,*> <name de marco = marco de src = 1.html/> <frameset cols = 240px,*> <nam. src = 2.html marginwidth = 20px scrolling = no/> </frameset> <noframes> <!-Las etiquetas noframes pueden contener etiquetas de cuerpo-> <body> ¡Esta página no es compatible con las etiquetas Frameset! </body> </frames> </frameset> </html>4. Cómo salir del marco de los enlaces
En el diseño de backend del sitio web, los marcos se utilizan con más frecuencia. En muchos casos, necesitamos saltar del marco y recargar la página. Entonces, ¿cómo pueden salir los enlaces del marco? De hecho, solo necesita especificar el atributo de destino de la etiqueta <a> </a> para ser _TOP. Aquí hay un ejemplo simple.
<html> <body> <p> ¿Está bloqueado en el marco? </p> <a href =/index.html Target = _TOP> ¡Haga clic aquí! </a> </body> </html>