Marcos html listos para usar. El concepto de marco en HTML.
07.12.2015
Aún no
¡Hola a todos!
Seguimos estudiando diligentemente los conceptos básicos de HTML. Me alegro que no abandones tus lecciones.
En esta lección veremos qué son los marcos y cómo se crean en HTML.
Entonces, definamos qué son los marcos en HTML.
Los marcos son la división de una ventana del navegador en áreas separadas en las que se pueden cargar documentos HTML individuales.
Creo que entiendes que gracias a los marcos, puedes ver varias páginas web a la vez en una ventana del navegador.
A modo de ejemplo, para comprender cómo funciona el marco en la práctica, sugiero mirar un ejemplo. Haz un par de transiciones allí:
Bueno, ¿a ti te gusta? ¿Quieres aprender a crear esto? Ahora aprenderemos cómo insertar marcos en un documento html.
Un marco en una página web se crea usando el siguiente diseño:
Atención: el diseño del código del marco se inserta en el documento html en lugar de la etiqueta:
Marcos○ etiqueta de conjunto de marcos
Este es el contenedor principal para crear un marco, dentro del cual están contenidos otros elementos.
La etiqueta de cierre es obligatoria.
*Atributos de la etiqueta frameset:
- Columnas - verticales
- Filas - horizontales
filas - horizontalmente
columnas - verticales
Los atributos cols y rows indican en cuántas partes se debe dividir la ventana del navegador. Por ejemplo, para dividir la ventana del navegador en dos partes verticales, debe escribir así:
El lado izquierdo de la pantalla tendrá un tamaño del 30% y el lado derecho tendrá un tamaño del 70%.
Si desea dividir el navegador en varias partes más, agregue dimensiones adicionales separadas por comas, por ejemplo, así:
Como resultado, la primera columna vertical tendrá un ancho del 30%, la segunda, el 20%, la tercera, el 10% y la cuarta, el 40%.
¿Entiendo?
Lo mismo ocurre con el diseño horizontal:
La primera columna horizontal tendrá un ancho del 30%, la segunda el 20%, la tercera el 10% y la cuarta el 40%.
○ etiqueta de marco
La etiqueta de marco especifica qué documento HTML debe cargarse en la ventana del navegador.
Por ejemplo, necesitamos cargar tres páginas diferentes "1.html", "2.html", "3.html" en una ventana del navegador. La etiqueta del marco se verá así:
Resumamos el conocimiento sobre marcos. Entonces, la tarea: debe dividir la ventana del navegador en dos partes y cargar dos páginas web en estas partes: "1.html" en un 30%, "2.html" en un 70%.
Aquí está el código terminado:
El resultado será así:
* Atributos de etiqueta de marco
- src – dirección de la página web. src="1.html" ;
- ancho de margen: margen dentro del marco a lo ancho. Ejemplo: ancho de margen="10" ;
- marginhight: margen de altura dentro del marco. Ejemplo: margenalto="10" ;
- desplazamiento: desplazar el marco a través del desplazamiento.
- Sí, el pergamino estará presente en el marco. Ejemplo: desplazamiento = "sí" ;
- no: el desplazamiento no estará presente en el marco. Ejemplo: desplazamiento="no" ;
- automático: el desplazamiento estará presente en el marco si es necesario. Ejemplo: desplazamiento = "auto" ; - noresize: prohíbe mover los bordes del marco.
- nombre – nombre del marco. Especifica en qué ventana se deben abrir otros marcos. Ejemplo: nombre = "sitio" ;
Si no especifica un nombre para el marco en el atributo "nombre", cuando haga clic en el enlace, se abrirá un nuevo marco en la ventana donde estaba el enlace:
Aquí hay un ejemplo si agrega el atributo "nombre":
¿No es eso mejor?
Para cualquier marco, agregue el atributo "nombre" donde desee que se abran otros documentos HTML.
El nombre en el atributo "nombre" puede ser cualquier cosa. Pero en el futuro, si le das nombres a otras etiquetas de “marco”, recuerda que cada una debe ser única:
página 2 página 3
La “Página 1”, la “Página 2” se abrirán en una ventana donde especificó el nombre del marco “nombre = sitio "" y la “Página 3" se abrirá en otro marco donde el nombre era “nombre = bloggood-ru”. ""
PRÁCTICA
Tarea: necesitas crear marcos usando este diseño:
Primero, creemos tres marcos horizontales:
Ahora agreguemos "top.html" y "footer.html".
El resultado hasta ahora será así:
Ahora entre “top.html” y “footer.html” agregaremos “menu.html” y “content.html”:
Código listo:
Marcos
Guarde el archivo como "index.html"
Crea las páginas “top.html”, “footer.html”, “menu.html” y “content.html”:
Código de archivo "top.html"
encabezado del sitio web sitio web
Código del archivo "footer.html"
Archivo footer.html StepkinBlog.com © 2015
Código de archivo "menú.html"
Archivo menu.html – menú del sitio
- pagina de inicio
- Sobre el autor
Código del archivo "content.html":
Página de inicio Página de inicio Contenido del sitio - "Página de inicio (content.html)"
Código del archivo "autor.html":
Este es el resultado que obtuve:
Usemos los atributos de "marco" y deshabilitemos el estiramiento manual de cuadros y eliminemos el desplazamiento en el archivo "index.html".
○ ¿Qué hacer si el navegador no admite marcos?
Puede mostrar un mensaje al usuario indicando que su navegador no admite marcos. Para hacer esto, inserte la etiqueta dentro de la estructura:
○ Marco flotante
Si necesita insertar una ventana iframe directamente en una página que no tiene una estructura de marco, existe una etiqueta "iframe" para ello.
* atributos de etiqueta “iframe”
- src - ruta a la página para abrir
- ancho - ancho del marco flotante
- altura - altura del marco flotante
- desplazamiento - barra de desplazamiento
- no - nunca mostrar la barra de desplazamiento
- si - mostrar siempre
- auto - mostrar si es necesario - alinear - alineación de marco flotante
- izquierda – izquierda
- derecha - a la derecha
- arriba – más alto
- abajo - abajo - frameborder - borde alrededor del marco flotante
- 1 - enciende el marco
- 0 - apaga el marco
Así se verá la etiqueta “iframe” con atributos:
Si su navegador no soporta marcos, puede insertar el texto " ¡UPS! Su navegador no soporta marcos."entre etiquetas.
Se verá así:
¡UPS! Su navegador no soporta marcos.
Por ejemplo, agreguemos un iframe al archivo "content.html":
Página de inicio Página de inicio Contenido del sitio - "Página de inicio (contenido.! Su navegador no admite marcos.
Publicación anterior
Próxima entrada
El término “frame” nos viene del idioma inglés. Traducido, esta palabra significa "marco" y representa un área separada de la ventana. En su estructura, dicha sección es un documento HTML completamente terminado.
Los marcos individuales dividen las ventanas del navegador en secciones que se colocan una al lado de la otra. En este caso, cada fotograma se carga con su propia página completa. La tecnología de marcos todavía causa mucha controversia, pero hay que decir que el pico de su popularidad ya ha pasado. Esta tecnología ahora está en desuso y los marcos normales ya no son compatibles con HTML5.
Historia de la tecnologíaHoy podemos afirmar que finalmente se ha tomado la decisión de dejar de trabajar con tecnología de marcos. El sitio https://www.w3.org/TR/html5-diff/#obsolete-elements establece claramente que las etiquetas habituales frame, frameset y noframes para crear dicha estructura están en desuso. Como argumento se aportan datos de que el uso de dicha estructura afecta negativamente a la usabilidad de los sitios y su accesibilidad en Internet.
Pero las tecnologías modernas apoyan el elemento IFRAME. Su uso le permite insertar marcos en bloques de texto en las páginas. Además, dichos elementos se pueden alinear con respecto al texto mismo. Un punto importante: en principio, no se puede cambiar el tamaño de los marcos integrados. No tienen un atributo correspondiente para cambiar el tamaño.
En el futuro, sin avances tecnológicos, es poco probable que se sigan utilizando marcos. Y vale la pena recordar que la organización líder en la estandarización de las tecnologías de Internet, el W3C, ha indicado claramente que los desarrolladores de sitios web no deben utilizar tales estructuras.
Es decir, los marcos, en principio, no deben utilizarse para estructurar páginas al crear nuevos recursos. Pero con el apoyo y la mejora de los sitios existentes, el conocimiento de las características de la tecnología y su uso será muy útil y productivo.
Beneficios de los marcosEntre las ventajas de la tecnología de marcos se encuentran la facilidad de uso, la alta velocidad y la capacidad de colocar información con precisión en determinadas ubicaciones de la ventana.
El uso de marcos proporciona ahorros en el volumen de tráfico transmitido mientras se trabaja con el sitio. Después de todo, al acceder a otra sección de información, normalmente solo se actualiza una sección de la página y no todo su código.
Esta estructura proporciona interesantes opciones de navegación a través del contenido de los recursos. Después de todo, dentro de la ventana del navegador, en marcos adyacentes, puede ver varios bloques de información. Es importante que los usuarios sepan que buscar dentro de un marco equivale a realizar dicha operación en una página separada.
Mientras trabaja con el sitio, puede cambiar dinámicamente el tamaño de una sección separada, lo cual es difícil de implementar utilizando otras soluciones tecnológicas.
Posibles desventajasLos problemas con los sitios web que utilizan marcos se acumularon gradualmente, pero hoy han alcanzado un umbral. Entre las principales desventajas se encuentran:
La información que proviene de los motores de búsqueda nos dice claramente que los sitios con marcos se indexan notablemente más lento. En este caso, a menudo surgen errores relacionados con la propia estructura. Después de todo, cada cuadro muestra una página de Internet completa. Y precisamente esa parte del sitio puede incluirse en la base de datos de indexación.
El aspecto negativo de dicha indexación es que al acceder al interior de la página, el usuario normalmente no ve los menús ni otros mecanismos de navegación. Y esto no es sorprendente. Debe comprender que actualizar el marco no es una solución al problema en este caso. Después de todo, todos los mecanismos de navegación se colocan en otro contenedor.
Otro problema es que a menudo la página principal de una estructura contenedora solo contiene un título, etiquetas de meta descripción y una etiqueta FRAMESET. Y esto parece lógico: después de todo, el contenido significativo se coloca en documentos separados. Son estos los que el visitante del sitio verá en la página en marcos.
Pero un robot de búsqueda casi nunca indexa una página así. No encuentra ningún contenido que sea útil para los visitantes. Los robots de búsqueda están configurados de tal manera que intentan recuperar e indexar información colocada dentro de la etiqueta del cuerpo. Aquí es donde se produce la búsqueda de contenidos útiles para el usuario. Pero en la página del marco no existe tal etiqueta; se reemplaza por FRAMESET.
Este problema se puede resolver parcialmente utilizando NOFRAMES. Pero en muchos sitios, al acceder a ellos, solo se proporciona información de que el navegador no admite marcos. Y para ver la página necesitas usar otro programa.
Estos casos crean muchos problemas a los usuarios que, al visitar un sitio, no ven el menú ni otra información que debería mostrarse. Si se colocan marcos en un sitio web, sus parámetros desde el punto de vista SEO se reducen. Al mismo tiempo, las estadísticas sobre el comportamiento de los usuarios indican que la autoridad del recurso entre los motores de búsqueda está cayendo. Esto definitivamente tiene un impacto negativo en el tráfico del sitio web.
Es especialmente difícil para los motores de búsqueda y los robots de indexación procesar estructuras de personal múltiples y anidadas. El hecho de que cada contenedor tenga todas las características de un documento independiente, pero no contenga información completa de navegación ni otro tipo de información, complica aún más la situación.
Puede facilitar el trabajo de los motores de búsqueda utilizando enlaces correctos en las páginas. En este caso, debe duplicar todos los enlaces del menú para que se puedan encontrar en cada parte individual de la página. Pero esto complica y ralentiza significativamente el trabajo de optimización del sitio y actualización de la información.
La experiencia de muchos optimizadores y webmasters también sugiere que las páginas en marcos no reciben clasificaciones altas en los resultados de búsqueda. Esto sucede incluso si están incluidos en la base de datos de indexación.
Características de la promoción de sitios web en marcos.Algunos motores de búsqueda indexan archivos enmarcados de forma incorrecta o muy incorrecta. Como resultado, la base de datos del índice no se llena con las direcciones de los recursos principales (como debería ser), sino con enlaces a sitios secundarios.
Para minimizar los problemas de indexación de sitios basados en marcos, se utilizan etiquetas y parámetros especiales al describirlos. El elemento principal de la estructura del contenedor es el conjunto de marcos. Es él quien reemplaza el cuerpo estándar; Cada contenedor individual de la estructura está descrito por un marco. Su número en el código de la página corresponde al número de secciones individuales que se muestran en la ventana del navegador cuando se visualiza.
Estas etiquetas deben colocarse en la página principal del sitio y luego duplicar el contenido dentro de cada una de ellas.
Los marcos son áreas rectangulares de la pantalla y cada una contiene su propio documento HTML. Los marcos son excelentes para formatear los siguientes documentos:
Actualmente, los marcos regulares se consideran tecnología obsoleta y no son compatibles con HTML5.
¡No utilices marcos normales en tus proyectos! En HTML5, las etiquetas frame, frameset y noframes simplemente ya no existen; en su lugar, se proporciona una única etiqueta iframe (marco flotante o en línea).Etiqueta
Etiqueta: reemplaza la etiqueta y se usa para dividir la pantalla. Tiene etiqueta de cierre.COLOR DEL FRONTERA. Define el color de los marcos. De forma predeterminada (si se utiliza el esquema de color estándar de Windows), los bordes de los marcos tienen un tinte gris opaco. Pero si lo deseas puedes elegir cualquier otro color. Al definir un color, puedes elegir tanto su nombre como su equivalente numérico en el sistema RGB. Por ejemplo, AZUL o #0000FF.
En una etiqueta separada, tiene sentido usar solo uno de los atributos: COLS o ROWS. Esto significa que la estructura del marco constará solo de columnas o solo de filas. Para crear filas dentro de columnas o columnas dentro de filas, necesitará contenedores anidados....
Ejemplo
Resultado:
¡No utilices marcos normales en tus proyectos! En HTML5, las etiquetas frame, frameset y noframes simplemente ya no existen; en su lugar, se proporciona una única etiqueta iframe (marco flotante o en línea).Tenga en cuenta también la diferencia en el orden de numeración de los fotogramas.
Etiqueta: reemplaza la etiqueta y se usa para dividir la pantalla. Tiene etiqueta de cierre.
El siguiente ejemplo divide la pantalla en dos áreas verticales. El lado izquierdo más pequeño contiene la tabla de contenido y el lado derecho cargará todos los demás documentos HTML. El archivo de tabla de contenido contiene hipervínculos de texto simples a las secciones relevantes. Para que todo funcione, es necesario crear documentos HTML en los archivos cosm.htm, eat.htm, perf.htm, masaje.htm y manic.htm.
Contenidos de ejemplo- Bienes
- Productos cosméticos
- Suplementos nutricionales
- Perfumería
- Servicios
- Masaje
- Manicura
La etiqueta le evitará tener que repetir el atributo TARGET en cada hipervínculo individual si todos apuntan a la misma ventana de marco. Para hacer esto, necesita colocar una etiqueta con el atributo TARGET en el contenedor....
El uso de la etiqueta permitirá reducir el tamaño del archivo de tabla de contenidos left.htm del ejemplo anterior.
Contenidos de ejemplo- Bienes
- Productos cosméticos
- Suplementos nutricionales
- Perfumería
- Servicios
- Masaje
- Manicura
El atributo TARGET de cada enlace específico reemplaza el atributo de etiqueta del mismo nombre.
Contenidos de ejemplo- Bienes
- Productos cosméticos
- Suplementos nutricionales
- Perfumería
- Servicios
- Masaje
- Manicura
Como ya se mencionó, los nombres de los marcos no pueden comenzar con un guión bajo, ya que comienzan con nombres de servicios que transmiten información especial al navegador. Los siguientes son nombres especiales, cada uno utilizado para lograr un efecto específico.
Básicamente, estos nombres de servicios tienen como objetivo "salir" de la estructura de marco actual de una forma u otra. Experimente con ellos para ver cómo puede cargar documentos en diferentes ventanas.
EtiquetaHTML 4.0 introdujo marcos flotantes (o en línea). Con la etiqueta, puede colocar un solo marco en un documento HTML normal. Además, aquí no se necesita un contenedor...
¡La etiqueta de cierre es obligatoria!
AtributosEtiqueta
Determina qué se mostrará en la ventana del navegador si no admite marcos.
¡Su navegador no soporta marcos flotantes!¿Cómo cargar un marco sin archivos adicionales? Para cargar un marco sin utilizar archivos externos, debe colocar el código HTML del marco en una variable y luego especificar "javascript:parent" como etiqueta SRC.".
nombre de la variable
var varFrame = "código HTML";...
Problema de la barra de direcciones con una estructura de sitio marco
...
Después de cargar esta página, la información se carga en marcos. Todas las transiciones de los usuarios a través de las páginas del sitio ocurren dentro de estos marcos. La barra de direcciones siempre muestra solo la ruta a la página de inicio, que no cambia mientras navega. El visitante no sabe dónde se encuentra en estos momentos.
Si un visitante no llega inmediatamente a la página principal del sitio (por ejemplo, desde un motor de búsqueda), esto no conduce a la reconstrucción de la estructura general de los marcos. Esta es la razón por la que el propietario del sitio no puede proporcionar la dirección de la página interna del sitio.
Hay varias soluciones a este problema.
Anteriormente, se consideró un ejemplo de estructura de marco. Consideraremos varias formas de resolver este problema usándolo.
La idea es la siguiente: al cargar una página que contiene una parte de información, verificaremos el entorno de la página y, si falta la estructura de marco requerida, la crearemos usando un script.
Son posibles tres casos:
En el primer caso, no es necesario realizar ninguna acción una vez finalizada la verificación. El segundo y el tercero son casi idénticos, por lo que consideraremos solo el segundo caso.
Y así, el visitante acaba “donde no debe”. Al principio de la página insertamos un script que creará una estructura de marco.
La solución se puede implementar tanto del lado del cliente como del lado del servidor. La principal desventaja de la implementación del lado del cliente es obvia: la dependencia de las capacidades y configuraciones del cliente. Por ejemplo, está prohibido ejecutar scripts en la computadora del usuario. La segunda opción no funcionará si el servidor no soporta PHP.
Solución JavaScript.Este enfoque tiene una limitación: no todos los navegadores admiten JavaScript y, en algunos casos, los propios usuarios desactivan los scripts.
Primero, verificamos el entorno de la página y luego, si la estructura de marco requerida no existe, la creamos.
Creemos un archivo marco.js :
If (ventana.nombre != "principal") ( ventana.nombre="raíz"; documento.write(""); documento.write(""); documento.write(""); documento.write("" ; )
Primero comprobamos el nombre de la ventana en la que está cargada la página: si (ventana.nombre! = "principal"). Si el nombre de la ventana y el nombre del marco no coinciden, entonces necesita crear una estructura de marco. Esto se hace dinámicamente utilizando el método de escritura del objeto del documento.
Conectamos un archivo a cada página del sitio. marco.js. Ahora las páginas del sitio tendrán la siguiente estructura:
... ...
Con este enfoque para resolver este problema, desaparece la necesidad de un archivo que contenga la estructura del marco.
solución PHPCon este enfoque, el sitio será accesible a un mayor número de visitantes.
Verificaremos el entorno de la página de manera diferente (no es lo mismo que cuando usamos JavaScript). Cargaremos el documento en un marco con el parámetro frames=yes. Al abrir la página, verificamos este parámetro y, si es necesario, creamos dinámicamente una estructura de marco. A continuación se muestra el código responsable de esto.
Poner el código en un archivo marcos.php. Ahora necesita conectarlo a cada página del sitio. A continuación se muestra un ejemplo de dicha página.
marcos...
En este caso, al igual que con la implementación en el lado del cliente, no es necesario crear por separado un documento HTML que describa la estructura del marco.
.
Una ventana del navegador se puede dividir en partes llamadas marcos, a veces marcos; También puedes llamarlos alféizares. En cada una de esas partes de la ventana del navegador, es decir. marco, se puede cargar un documento HTML independiente. Veamos un ejemplo de una ventana del navegador con tres marcos.
En este caso, para mayor claridad, cada cuadro se carga con un documento HTML simple que indica el número de cuadro y el nombre del archivo que almacena su contenido. Si se carga en el marco un documento real que no cabe completamente en él, entonces el marco (¡atención, no toda la ventana!) tendrá barras de desplazamiento verticales y/u horizontales dependiendo de si el contenido no cabe horizontalmente y/o o documentar verticalmente.
Por ejemplo, el diseño y la estructura de su sitio son tales que se repiten los mismos elementos en cada página del sitio: el título, el menú de navegación, la dirección al final de la página o algunos otros elementos similares. Sólo cambia el contenido de las secciones. Luego, las páginas se pueden dividir en partes para que las partes no modificables se coloquen en marcos separados, y se puede asignar otro marco para que el contenido de la sección deseada se cargue en él después de hacer clic en el enlace correspondiente, por ejemplo, desde un menú. .
Esto ahorra velocidad de carga, ya que partes idénticas de las páginas del sitio no se recargan, sino que simplemente se muestran todo el tiempo en los marcos que se les asignan.
La estructura del diseño de la ventana se almacena en un documento HTML separado, llamado documento enmarcado. La estructura del marco se forma utilizando un elemento especial FRAMESET. Un documento normal tiene una sección HEAD y una sección BODY, mientras que en un documento con marcos, la sección BODY se reemplaza por una descripción de la estructura de los marcos, es decir sección CONJUNTO DE MARCOS.
Se puede agregar un elemento NOFRAME a la sección FRAMESET con contenido alternativo para mostrar en navegadores que no admiten marcos o en navegadores que no admiten marcos. Estos navegadores simplemente no entenderán las estructuras FRAMESET y NOFRAME, pero mostrarán el texto colocado dentro de ellas.
Tenga en cuenta que la sección BODY falta por completo en el documento y que el elemento NOFRAMES está contenido en la sección FRAMESET.
La estructura del marco en sí se forma dividiendo la ventana del navegador en partes: filas y columnas; Hasta cierto punto, esto no parece crear tablas. Para hacer esto, el elemento FRAMESET tiene atributos cols y filas, que especifican la división en columnas y filas, respectivamente.
Las unidades de medida en las que se pueden establecer los tamaños de fotograma son, como es habitual, píxeles y porcentajes. También existe la posibilidad de establecer el tamaño en una unidad de medida nueva para nosotros, que en términos generales se puede llamar "parte" de la ventana. Los valores de los atributos cols y filas se especifican enumerando los tamaños de las áreas correspondientes, separados por comas. Puede combinar diferentes métodos de tareas. Veamos algunos ejemplos, partiendo del supuesto de que el tamaño de la ventana del navegador es de 800x600 píxeles.
Este código dividirá la ventana horizontalmente en dos marcos (filas) de igual altura. Si configura el atributo cols="50%, 50%", obtendrá dos columnas del mismo ancho.
. . . continuando definiendo la estructura del marco. . .Con este código obtenemos tres columnas de fotogramas: la de la izquierda tiene 120 píxeles de ancho, la del medio tiene 400 píxeles de ancho y la tercera columna contiene todo lo que queda de las dos primeras columnas en el atributo este valor está indicado por el; símbolo de asterisco “*”.
. . . continuando definiendo la estructura del marco. . .Este código creará dos columnas de marco. El ancho del primero se toma como uno (esto se denota como 1 * o simplemente *), el ancho del segundo es cuatro veces mayor. Así, el ancho del primero será el 20% y el ancho del segundo el 80% del ancho total de la ventana del navegador.
. . . continuando definiendo la estructura del marco...La medida anterior combina los tres métodos para especificar dimensiones. El ancho de la primera columna será de 100 píxeles, a la segunda se le asignará el 40% del ancho restante (800 - 100 = 700) y a la tercera será todo lo que no esté ocupado por la primera y la segunda columna.
Una sección FRAMESET puede contener secciones FRAMESET anidadas, lo que le permite crear una estructura de marco bastante compleja. Digamos que necesitamos dividir la ventana en 4 cuadros de la siguiente manera:
Primero necesitas organizar 2 columnas de esta manera:
cols= "100, * "Luego divide la segunda columna en tres líneas así:
filas="80, *, 30"Un marco separado, o más bien su descripción, está especificado por el elemento FRAME y sus atributos: hablaremos de ello más adelante. Volvamos a los elementos FRAMESET anidados. Veamos un código de ejemplo que crea una estructura de marco como esta:
Parece que hemos descubierto cómo se divide una ventana en marcos. Al crear marcos, puede asegurarse de que el borde entre marcos no sea visible. Como probablemente ya habrás adivinado, esto se hace usando el atributo de borde y su valor debe ser cero. Pero el hecho es que para los marcos este atributo no lo percibe el navegador Internet Explorer, pero sí lo admite el navegador Netscape Navigator. Para Internet Explorer, el borde entre marcos se especifica mediante el atributo frameborder, que no es compatible con el navegador Netscape Navigator. Resulta que es necesario establecer los mismos valores para ambos atributos para que ambos navegadores interpreten el código HTML de la misma manera y el grosor de los bordes entre marcos sea el mismo.
El grosor de los bordes o, en otras palabras, la distancia entre fotogramas también se puede ajustar mediante el atributo de espacio entre fotogramas, cuyo valor se especifica en píxeles. Todos los atributos del elemento FRAMESET se muestran en la tabla.
| Atributo | Descripción | En una etiqueta separada, tiene sentido usar solo uno de los atributos: COLS o ROWS. Esto significa que la estructura del marco constará solo de columnas o solo de filas. Para crear filas dentro de columnas o columnas dentro de filas, necesitará contenedores anidados.... |
| filas | Define el número y tamaño de los marcos horizontales (marcos de líneas) en la ventana del navegador. El valor es una lista de tamaños de fotograma separados por comas. Métodos para establecer dimensiones: a) como porcentaje de la altura del área de trabajo de la ventana del navegador, por ejemplo: “30%, 30%, 40%”; b) en forma de signo “*” (asterisco), que indica que el marco ocupa todo el espacio libre de la ventana del navegador que no está ocupado por otros marcos con tamaños explícitamente especificados, por ejemplo, el asterisco en la entrada “25 %, 25%, *” equivale a 50%; c) en píxeles por ejemplo: "75, *" . Los tres métodos se pueden combinar. |
filas = "25%, 25%, *" |
| columnas | Determina el número y tamaño de los marcos verticales (marcos de columnas) en la ventana del navegador. como valor Se especifica una lista de tamaños de fotograma separados por comas. Las dimensiones se configuran de la misma manera que en el parámetro FILAS anterior. |
cols= "265, *" |
| borde | Especifica el ancho de los bordes del marco en píxeles. Esta opción sólo funciona en navegadores Netscape. | Borde="0" |
| borde del marco | Este parámetro es válido sólo en los navegadores Internet Explorer y determina la presencia de marcos para los marcos contenidos dentro del elemento FRAMESET. Valores posibles: Sí, marcos de visualización; No o 0 no muestran marcos. | Borde de marco="0" |
| espacio de fotogramas | Define la distancia (la llamada "área gris") entre fotogramas en píxeles. Esta opción también es necesaria para crear marcos sin bordes. | espacio entre cuadros = "0" |
Ahora volvamos al elemento FRAME, que describe un solo marco dentro de toda la estructura. Un parámetro requerido es el atributo src, que especifica la URL HTML del documento o imagen que se mostrará en este marco. También es mejor darle un nombre al marco usando el atributo de nombre. Esto le permitirá usar este nombre como valor del atributo de destino del elemento A y controlar en qué marco se debe cargar el enlace. Los nombres de los cuadros no pueden comenzar con números; solo se permiten letras del alfabeto latino (az, AZ) como caracteres iniciales.
Cuando una estructura de marco no define un borde entre marcos, sus contenidos pueden estar demasiado adyacentes entre sí, lo que no se verá muy bien. Si desea expandir el contenido de los marcos y aún no incluir la visualización de los límites entre ellos, puede hacerlo estableciendo sangrías dentro de los marcos. El tamaño de estas sangrías se establece en píxeles y en pares: para sangrías en la parte superior e inferior con el atributo marginheight,
y para sangrías a derecha e izquierda con el atributo marginwidth. Entonces la distancia entre los contenidos de cuadros adyacentes será igual a la suma de las sangrías correspondientes de estos cuadros.
Si se debe mostrar un borde alrededor de un marco en particular está determinado por su atributo frameborder. El valor sí (o 1) indica que debería haber un borde, el valor no (o 0) indica que no debería haber ningún borde.
El usuario puede cambiar el tamaño de los marcos creados por el documento HTML. Para hacer esto, simplemente mueva el cursor del mouse al borde de los marcos (no importa si estos bordes son visibles o no) y cambie el tamaño de la ventana usando el método estándar del sistema operativo.
En Windows, el cursor del mouse aparecerá como una flecha negra de dos puntas. Al hacer clic con el botón izquierdo del mouse, puede mover el borde de la ventana. De manera similar, puedes cambiar el tamaño del marco, ya que un marco también es una ventana. Si ha calculado los tamaños de sus marcos y no desea que el usuario los cambie, configure el atributo noresize. Como resultado, se prohibirá el cambio de tamaño.
Como dijimos anteriormente, las barras de desplazamiento aparecen en un marco si su contenido no encaja completamente dentro de sus límites especificados. La presencia de barras de desplazamiento está controlada por el atributo de desplazamiento. Los tres valores permitidos son sí, no y auto.
El valor automático hace que las barras de desplazamiento aparezcan automáticamente en los casos en que realmente se necesitan. Si el contenido es visible de todos modos, no hay barras de desplazamiento; si parte del contenido no encaja, aparece la barra de desplazamiento requerida.
Un valor de sí habilita ambas barras de desplazamiento, sean necesarias o no. A veces puede que no se vea muy bien.
El valor no impide que se muestren las barras de desplazamiento. Tenga cuidado con este valor porque especificarlo puede impedir que el usuario vea todo el contenido del marco cuando no encaja completamente dentro del marco. Todos los atributos del elemento FRAME se muestran en la tabla.
| Atributo | Descripción | En una etiqueta separada, tiene sentido usar solo uno de los atributos: COLS o ROWS. Esto significa que la estructura del marco constará solo de columnas o solo de filas. Para crear filas dentro de columnas o columnas dentro de filas, necesitará contenedores anidados.... |
| src | Parámetro requerido. Especifica la dirección HTL (URL) archivo mostrado en este marco |
src="marco2.html" |
| nombre | Define el nombre de este marco, que luego se utilizará para hacer referencia a él desde otros documentos utilizando el atributo de destino (ver elemento A). El valor debe ser cualquier nombre sin espacios usando caracteres latinos y números. (Los caracteres iniciales sólo pueden ser letras del alfabeto latino: a-z, A-Z). El nombre no debe comenzar con números ni caracteres especiales. Los nombres de fotogramas reservados comienzan con un guión bajo. |
nombre="menú1" |
| ancho de margen | Especifica el ancho (en píxeles) de los márgenes izquierdo y derecho del marco. Si no se especifica el parámetro, el navegador determinará automáticamente el tamaño de sangría óptimo. | ancho de margen="0" |
| altura del margen | Especifica el ancho, en píxeles, de los márgenes superior e inferior del marco. Si no se especifica el parámetro, el navegador determinará automáticamente el tamaño de sangría óptimo. | altura del margen="0" |
| desplazamiento | Determina si el contenido del marco tiene barras de desplazamiento. Valores posibles: sí: muestra barras de desplazamiento; no: no muestra barras de desplazamiento; automático: muestra barras de desplazamiento si es necesario (si el documento especificado en el parámetro SRC no cabe en el marco) |
desplazamiento = "automático" |
| noresize | No permite cambiar el tamaño del marco. Este parámetro es una bandera y no requiere un valor. | noresize |
| borde del marco | Determina si un marco tiene bordes. Valores posibles: sí o 1 — marcos de visualización; no o 0: no muestra marcos. |
borde de marco = "0" |
En cualquier editor de texto, cree un nuevo archivo de texto.
Introduzca las etiquetas principales, sin contar las etiquetas que no se utilizan en el archivo que describe los fotogramas. En las etiquetas del título, indique - SD Company:
Empresa SD
En lugar de etiquetas en el archivo que describen los marcos, se utilizan un par de etiquetas con los atributos de filas o columnas, que determinan cómo se divide la pantalla: horizontal o verticalmente. Como valores de estos atributos, puede utilizar el valor numérico del alto o ancho del marco en píxeles o como un porcentaje del 1% al 100%. Por ejemplo, si desea dividir la ventana del navegador horizontalmente en dos marcos del mismo tamaño, entonces el código HTML debería ser así:
Tenga en cuenta: los valores de los atributos están separados por una coma.
División del marco verticalPara dividir la ventana del navegador verticalmente en dos cuadros de 200 y 600 píxeles de ancho, debes escribir:
Pero el ancho y alto real de la ventana del marco depende de la resolución actual del monitor. Por lo tanto, si el usuario tiene una resolución configurada, por ejemplo, 1024 x 768 píxeles, en otras palabras, el ancho de la pantalla es 1024 píxeles, entonces parte de la pantalla puede permanecer en blanco. Por lo tanto, se recomienda establecer los tamaños de fotograma como porcentajes para que su suma sea igual al 100%. Si aún necesita especificar un tamaño fijo en píxeles para una de las ventanas, entonces no puede especificar el tamaño de la otra ventana, reemplazando su valor con el logotipo *. En este caso, el propio navegador seleccionará el tamaño adecuado para la segunda ventana.
Hagamos dos marcos verticales para mostrar nuestro sitio WEB. Para el primer fotograma en el que se mostrará el menú, estableceremos un ancho fijo de 160 píxeles y dejaremos que el navegador encuentre el tamaño del segundo reemplazándolo por un asterisco *.
En el editor de texto, inserte una línea en blanco después de la etiqueta de cierre e ingrese el siguiente código:
De esta manera, especificamos que la ventana del navegador debería dividirse verticalmente en dos marcos. Para describir cada cuadro por separado, se utilizan etiquetas individuales, que deben estar dentro del elemento.... Un atributo indispensable de la etiqueta es src, su valor es la dirección del documento que debe estar en este marco. Debido a que el primer cuadro contendrá el archivo menu.html, esta etiqueta debe escribirse así:
Inserte una línea en blanco después de la etiqueta de apertura e ingrese la etiqueta designada.
El archivo other.html debe cargarse en el segundo fotograma, por lo que la segunda etiqueta quedará así:
Cómo hacer un menú usando marcosPara que todas las demás páginas del sitio WEB (list.html y otras que se puedan crear) también puedan cargarse en el segundo marco, es necesario utilizar el atributo de nombre para asignar un nombre a este marco, que, al estar indicado en los enlaces de cualquier documento ya que el valor del atributo de destino determinará en qué marco específico se debe cargar el documento. Te recordamos que por lo general, al seguir un enlace, se abre un nuevo documento en la misma ventana. Específicamente, para que cuando siga los enlaces en nuestro menú, las páginas no se abran en el primer cuadro en el que se encuentra el menú, sino en el segundo, utilizamos en experiencias anteriores en enlaces de menú el atributo de destino con el valor "marco". : target="frame", donde "frame" es el nombre del segundo frame. Y ahora se debe asignar el nombre "marco" al segundo cuadro, en el que se debe expandir el archivo other.html. Por lo tanto, la segunda etiqueta en su forma final debería escribirse así:
Ingrese este código insertando una línea en blanco antes de la etiqueta de cierre.
Montaje del marco principalGuarde el archivo en la carpeta WEB con el nombre index.html.
Se debe asignar el nombre index.html al archivo con la página principal de cada sitio WEB. Este archivo en particular se abre de forma predeterminada al acceder a un nodo WEB, a menos que se especifique un nombre de archivo diferente. En algunos sitios WEB, el nombre de la página principal puede ser index.htm y index.html no se muestra como una página, sino como una carpeta con nombres de archivos. Esto debe aclararse con el administrador del sitio.
Ahora puedes ver cómo se ven los marcos creados.
Abra el archivo index.html de la carpeta WEB de su navegador. Verás que la ventana del visor está dividida verticalmente en dos cuadros. El marco izquierdo muestra el menú y el marco derecho muestra el archivo other.html.
Tenga en cuenta que cada cuadro tiene sus propias barras de desplazamiento. Puede cancelar su visualización según sea necesario. Para hacer esto, simplemente especifique el atributo scrolling=no en la etiqueta.
Agregue el atributo scrolling=no a la etiqueta que describe el primer fotograma:
Verá, los marcos son un medio conveniente para colocar información en páginas WEB. Pero al usarlo no se debe perder el sentido de la proporción. Un número muy grande de ventanas en la pantalla no mejora la percepción de la información. No tengas más de tres cuadros en tu pantalla y trata de no usarlos innecesariamente.
Las principales desventajas de los marcos.La principal desventaja de utilizar marcos es que los motores de búsqueda no pueden encontrar dicha página y no atraerá visitantes a dicha página. Ésta es la principal desventaja. Los fotogramas también ejercen presión sobre la potencia de procesamiento de la computadora. Naturalmente, esto no es muy relevante en nuestro tiempo, pero sí lo es para los dispositivos móviles, donde la velocidad de dibujo de páginas WEB aún se ve afectada. Permítanme recordarles que a finales de 2010, el uso de WEB a través de dispositivos móviles fue de aproximadamente un 10% y esta cifra crece cada año.
ResultadoEntonces, el primer paso de nuestro trabajo está completo: creamos un sitio WEB a partir de dos páginas WEB. Ahora, para que esté disponible para todos, es necesario colocarlo en Internet en uno de los servidores World Wide WEB.
Cómo hacer una página con marcos.En FrontPage, los marcos se denominan marcos. La forma más sencilla es crear una página con marcos basada en una de las plantillas listas para usar disponibles en el programa FrontPage.
Seleccione el comando de menú Archivo - Crear (Archivo - Nuevo). Aparecerá un Panel de tareas con la Nueva tarea activa en la parte derecha de la ventana de trabajo del programa.
En la sección Nueva página del Panel de tareas, haga clic en el enlace Más plantillas de página. El cuadro de diálogo Plantillas de página aparecerá en la pantalla.
Seleccione la pestaña Páginas de marcos.
Esta pestaña contiene un conjunto de plantillas para crear páginas con marcos. Cuando selecciona una plantilla, la vista inicial de la página se muestra a la derecha en el campo Vista previa y se muestra una descripción de la plantilla en el campo Descripción.
Seleccione una de las plantillas, por ejemplo Contenido, y haga clic en Aceptar. Se creará una nueva página con marcos según la plantilla seleccionada.
En la parte inferior de la pestaña new_page_1.htm recién creada (new_page_1.htm) aparecerá un botón adicional Sin marco. Al hacer clic en él, veremos cómo se verá la página en un navegador que no admite trabajar con marcos. De forma predeterminada, allí se coloca el texto del mensaje sobre la imposibilidad de mostrar marcos.
Cuando un navegador carga una página con marcos, lee información sobre los marcos y luego carga la página original en cada marco. Por lo tanto, después de crear una página con marcos, debe configurar las páginas originales para los marcos.
En el modo de edición de Diseño de la vista Página, los botones se muestran en marcos vacíos.
Haga clic en el botón Nueva página en cada cuadro. Se crearán nuevas páginas dentro de los marcos.
Usando otro botón, Establecer página inicial, puede seleccionar una de las páginas creadas anteriormente para el marco como la inicial.
Seleccione el comando de menú Archivo - Guardar (Archivo - Guardar) para guardar nuevas páginas. Los cuadros de diálogo habituales para guardar archivos, Guardar como, aparecerán en la pantalla uno por uno para cada página en la que necesite especificar nombres de archivos. Especifique, por ejemplo, el nombre LeftFrame para la página de origen del marco izquierdo, el nombre RightFrame para la página de origen del marco derecho y el nombre FrameContainer para la página con marcos.
Si elige la plantilla Contenido al desarrollar una página con marcos, entonces ya tiene una conexión establecida entre los marcos: activar un enlace colocado en el marco izquierdo hará que las páginas que muestra el enlace se carguen en el marco derecho. En este caso, el cuadro correcto se denomina cuadro motivado (cuadro objetivo).
Para comprobar cómo funciona la conexión entre marcos, coloquemos dos enlaces de texto en la página del marco izquierdo. Deje que uno de ellos enlace, por ejemplo, a la página original del marco derecho y el otro a la página principal del sitio WEB.
Coloque el cursor de texto al principio de la página en el marco izquierdo y escriba la frase Enlace a la página principal.
Seleccione la frase escrita con el mouse o el teclado y seleccione el comando de menú Insertar - Hipervínculo. Aparece el cuadro de diálogo Crear hipervínculo en la pantalla.
En la lista de archivos del sitio WEB, seleccione el archivo de índice de la página de inicio y haga clic en Aceptar. La frase ingresada se convertirá en un enlace.
Seleccione la frase escrita con el mouse o el teclado y haga clic en el botón Agregar hipervínculo en la barra de herramientas Estándar. Aparece el cuadro de diálogo Crear hipervínculo en la pantalla.
En la lista de archivos del sitio WEB, seleccione RightFrame y haga clic en Aceptar. La frase ingresada se convertirá en un enlace.
Cambie al modo de vista previa haciendo clic en el botón Vista previa en la parte inferior de la pestaña FrameContainer.htm.
Si es necesario, puede cambiar el marco motivado para un solo enlace o para todos los enlaces en el marco actual.
En el modo de edición de diseño de la vista Página, haga clic con el botón derecho en uno de los enlaces en el marco izquierdo y seleccione Propiedades del hipervínculo en el menú contextual que aparece. Aparece el cuadro de diálogo Editar hipervínculo en la pantalla.
(Marco objetivo). El cuadro de diálogo Marco de destino aparece en la pantalla.
En el campo Configuración de objetivos, puede especificar un marco motivado o seleccionar una de las opciones en la lista de objetivos comunes. El indicador Establecer como página predeterminada le permite utilizar un marco motivado seleccionado para todos los enlaces en una página donde obviamente no se especifica ningún otro.
Haga clic en Aceptar para cerrar el cuadro de diálogo Marco de destino y luego haga clic en Aceptar en el cuadro de diálogo Editar hipervínculo.
Aunque los marcos no contienen sus propias partes visuales, la página con marcos y los propios marcos tienen una serie de opciones que le permiten controlar su visualización.
Haga clic derecho en cualquier lugar de uno de los marcos y seleccione Propiedades del marco en el menú contextual que aparece. El cuadro de diálogo Propiedades del marco aparece en la pantalla.
El campo Nombre indica el nombre interno del marco; también se utiliza al seleccionar un marco motivado para un enlace. El campo Página inicial especifica la página que se muestra en el marco cuando se carga. En el grupo de partes de control Tamaño del marco, puede especificar el ancho (Ancho) y el alto (Alto) del marco en relación con los marcos adyacentes (Relativo), en relación con el tamaño de la ventana del navegador en porcentaje (Porcentaje) o un tamaño fijo. en píxeles (Píxeles). En el grupo Márgenes de partes de control, se determinan los valores de sangría desde los límites vertical (Ancho) y horizontal (Alto) del marco hasta el contenido dentro del marco. Si se establece la opción Redimensionable en el navegador, un visitante del sitio WEB puede cambiar el tamaño del marco moviendo el separador entre marcos adyacentes con el mouse. En la lista desplegable Mostrar barras de desplazamiento, puede configurar el modo de visualización de la barra de desplazamiento: si es necesario, en otras palabras, cuando la página no cabe completamente en el marco, nunca (Nunca) o siempre (Siempre).
Haga clic en el botón Página de marcos. El cuadro de diálogo Propiedades de página aparece con la pestaña Marcos abierta.
La bandera Mostrar bordes determina si se mostrarán los bordes del marco. Si se borra la bandera, las franjas que separan los marcos no serán visibles en el navegador. En el campo Espaciado de cuadros, establece el ancho de los bordes que separan los cuadros adyacentes.
Haga clic en Aceptar para cerrar el cuadro de diálogo Propiedades de página y luego haga clic en Aceptar en el cuadro de diálogo Propiedades del marco.
Puede agregar nuevos marcos o eliminar los existentes de la página.
En el modo de edición de página, seleccione uno de los marcos haciendo clic en él.
Seleccione el comando de menú Marcos - Dividir marco
(Marcos - Marco dividido). El cuadro de diálogo Dividir marco aparece en la pantalla.
Usando uno de los interruptores, seleccione la opción de división: Dividir en columnas o Dividir en filas.
Haga clic en Aceptar. El área del marco actual se dividirá en dos partes y se agregará un nuevo marco a la página.
También se puede crear un nuevo marco si, en el modo de edición de página, mueve el separador de marco con el mouse mientras mantiene presionado el botón Ctrl.
Para eliminar un marco, selecciónelo haciendo clic en él con el mouse y, en el menú del programa, seleccione el comando Marcos - Eliminar marco. El marco será eliminado.
Eliminar un marco no elimina la página que se mostraba en él. El último fotograma de la página no se puede eliminar.
En la lista desplegable Guardar como tipo, seleccione Plantillas de FrontPage.
En el campo de entrada Nombre de archivo, ingrese el nombre del archivo de plantilla y haga clic en el botón Guardar. El cuadro de diálogo Guardar como plantilla aparecerá en la pantalla.
En el campo de entrada Título, especifique el título de la plantilla, que se mostrará en la lista de plantillas al desarrollar una nueva página. En el campo de entrada Descripción puede describir brevemente el propósito y el tipo de la plantilla.
Haga clic en Aceptar. La plantilla se guardará.
Ahora puede usar su plantilla al desarrollar una nueva página con marcos seleccionándola en la lista de plantillas en el cuadro de diálogo Plantillas de página. Si, al guardar la plantilla, las páginas originales se instalaron en marcos, se utilizarán de forma predeterminada para todos los marcos creados según la plantilla.
Los marcos son cómodos de usar para navegar por un sitio WEB o una sección de un sitio WEB. Por lo general, se coloca una lista de enlaces en forma de texto o imágenes en uno de los marcos y las páginas se cargan en el otro cuando se seleccionan los enlaces del primer marco. Otra opción es implementar bordes y menús de navegación comunes, que ya cubrimos. No se recomienda de inmediato el uso de marcos y límites generales; esto puede hacer que la navegación por el sitio WEB sea confusa.
