Frame: ¿qué es? Estructura y creación de cuadros

Tabla de contenido:

Frame: ¿qué es? Estructura y creación de cuadros
Frame: ¿qué es? Estructura y creación de cuadros
Anonim

Un marco es un área en un sitio (ventana) en la que se ve otra página web. Los webmasters aprovechan esta oportunidad para mostrar la página de inicio de los sitios de sus amigos o socios. Se utiliza la misma técnica para mostrar el formulario de búsqueda en las casillas con el resultado al lado, etc.

Pero la mayoría de los marcos se utilizan en la creación de grandes portales web, donde se requiere una cantidad considerable de elementos de menú y submenús. Suelen decir sobre esas personas: "sitio web en marcos". Se requiere un buen conocimiento de HTML para crear dicho recurso.

Creación de marcos en el creador de sitios web

Algunos creadores de sitios web brindan generación automática de dicho código. Por lo general, el botón Agregar marco se encuentra en el menú principal del programa. Primero debe colocar el cursor en el lugar correcto de la página, luego hacer clic en el botón, se abrirá una ventana (como se muestra en la captura de pantalla). En él, puede establecer la dirección de la página que se abrirá en el marco y ajustar las dimensiones: ancho y alto.

Pero la mayoría de los marcos se utilizan en la creación de grandes portales web, donde se requiere una cantidad considerable de elementos de menú y submenús. Suelen decir sobre esas personas: "sitio web en marcos". Para crear tal recurso se requiere un buen conocimientoLenguaje HTML.

creando marcos
creando marcos

Con la ayuda de este "servicio" es posible crear varios marcos en la página, pero no obtendrá elementos interconectados de esta manera.

Marcos en CMS

En muchos programas para crear sitios web, es posible instalar el módulo correspondiente. Por ejemplo, para Joomla, un marco es un módulo "envoltorio".

enmarcalo
enmarcalo

Se puede encontrar y crear en el panel de control de Joomla CMS: "Extensiones" - "Administrador de módulos" - "Crear" (un botón naranja redondo con un signo más adentro). En la ventana emergente, en la lista, verá el módulo "Wrapper".

Si no está aquí, no está incluido. Para usarlo, primero debe activarlo aquí: pestaña "Extensiones", luego "Administrador de extensiones", luego la pestaña "Administración". Y estamos buscando en la lista que se abre, para una búsqueda rápida en el campo "Filtro", ingrese la palabra: Wrapper. Frente a este módulo debe haber un icono verde con una marca de verificación dentro. Un círculo rojo con un punto dentro significará que este complemento está deshabilitado.

Después de este procedimiento, puede volver al "Administrador de módulos", crear un marco y establecer sus parámetros.

que es un marco
que es un marco

Como puede ver en la imagen, el módulo le permite configurar: el título sobre el marco, la posición del módulo, seleccione las páginas del sitio en las que se mostrará. Y también ajusta el ancho, la altura; agregar un marco y en realidadenlace a una página web. Si en un marco desea mostrar la página principal de un sitio en todo el ancho, entonces el 100%, configurado de manera predeterminada, no será suficiente. Inmediatamente puede poner con seguridad 400%. Una altura de 200 suele ser suficiente para mostrar el menú superior de la página. El resto del contenido será visible si el usuario (visitante del sitio web) utiliza la barra de desplazamiento.

Aquí hay un ejemplo de lo que es un marco en Joomla.

ejemplos de marcos
ejemplos de marcos

El módulo Jumla para crear un marco es muy conveniente y fácil de usar. Sin embargo, sus capacidades son limitadas, al igual que las capacidades del constructor.

Historia y realidades

En la práctica de crear sitios a partir de marcos, esta etiqueta (su aplicación) ha pasado a un segundo plano hace mucho tiempo. Pudieron ser reemplazados por módulos, configuraciones en programas constructores que generan código para una página web sin la participación de un creador de sitios. Sin embargo, en algunos casos esto no es suficiente. Por ejemplo, cuando un marco es una estructura holística compleja de áreas que se muestran en el navegador. Así es como lo ven los propietarios de sitios de estructura compleja. Su creación se usa solo en casos extremos, ya que los sitios marco se crean exclusivamente con la ayuda de etiquetas especializadas.

Sitios de estructura compleja

Para ellos, crear varios marcos interconectados es la mejor solución para organizar el contenido en las páginas de recursos. Estos son, por regla general, grandes portales, que se fortalecen cada año.

¿Cómo lograr el mismo resultado? ¿Cómo se crea la estructura del marco?

estructura del marco
estructura del marco

Cómoinsertar marco en la página código

Los marcos en HTML se agregan usando etiquetas:

  • marco (para una ventana separada);
  • frameset (usándolo para crear una estructura completa);
  • iframe (marco "flotante");
  • noframes (en caso de que el marco no se muestre en el navegador del usuario).

La primera etiqueta especificada siempre cabe en un par de y. Y reemplaza y. Y con la ayuda de los atributos apropiados, puede ajustar las características de cada elemento: el nombre (name=), el tamaño (cols=y rows=), la presencia de un borde (border), la apariencia de la barra de desplazamiento y, por supuesto, el enlace a la página web para mostrar.

Variaciones de diseño

Toda la página del sitio se puede dividir en áreas. Por ejemplo, así:

Izquierda Marco superior
Derecha

Tal estructura (se llama anidada) se puede obtener escribiendo el atributo cols dentro de la etiqueta, lo que significa la ubicación del marco horizontalmente y las filas verticalmente. A continuación, se pone el signo=y se prescriben las dimensiones. Por ejemplo, 60%, 40% - porcentaje (una ventana ocupará el 60% del espacio del navegador, la otra, respectivamente, el 40%). O 100, 200 - relación de aspecto en píxeles. El tamaño de uno de los marcos no se puede configurar en absoluto (se configurará de forma predeterminada). Para hacer esto, después o antes de la coma, debe especificar el símbolo.

Anidamientocada nueva área se indica mediante un nuevo conjunto de marcos.

Ejemplo de código:

Tenga en cuenta que en nuestro ejemplo, para el segundo y tercer marco, los tamaños se especifican solo una vez.

Muchas ideas te permiten completar cuadros. Se pueden dar innumerables ejemplos de su ubicación en la ventana del navegador (cambiando el código en consecuencia). Sin embargo, esta información no ha encontrado aplicación práctica durante mucho tiempo. Los marcos, si se usan hoy en día al crear sitios, solo tienen la forma de módulos en CMS gratuitos o en forma de iframe.

Marco flotante

sitio en marcos
sitio en marcos

Es extraño por qué recibió ese nombre, la palabra "incorporado" es más adecuada aquí. Este marco se crea para mostrar el contenido de un archivo. Sube cualquier documento o archivo a la base de datos, escribe la ruta usando etiquetas iframe, y los visitantes verán el texto del archivo (video o imagen). Desafortunadamente, los navegadores no siempre muestran el contenido. Para hacer esto, los creadores web ingresan la frase entre las etiquetas de apertura y cierre: "Su navegador no muestra contenido".

Por ejemplo, Seopult.ru es un servicio muy conocido para maestros de promoción. Solo que no es su sitio principal, sino un espejo I.seopult.pro, creado para los clientes del portal. El código iframe se escribe aquí de la siguiente manera:

Instrucciones

. ¿Dónde está la etiqueta

  • se creó para definir un elemento de lista. Compatible con todos los navegadores.

    En la propia página espejo, puede ver la palabra "Instrucción" en forma de botón. Al hacer clic en él en el centro de la ventana del navegador, se abre la presentación.

    Todo grandelos sitios para ver películas y series se crean utilizando iframes (por ejemplo, "Imhonet"), así como redes sociales. Incluso la página principal de "Yandex" contiene esta etiqueta y más de un par.

    Cómo escribir un iframe

    Puede cargar un documento en forma de ventana con una barra de desplazamiento en cualquier lugar del sitio. Por lo general, las etiquetas se colocan dentro del cuerpo. Más allá del estándar

    y, como se muestra en el ejemplo anterior, también se puede usar la etiqueta de lista -

    • Los atributos se agregan al iframe:

      • ancho (ancho) y alto (alto=);
      • alineación de bordes align;
      • sangrías que pueden especificarse o no: el valor predeterminado es 6; esto es suficiente;
      • usando allowtransparency, puede establecer la transparencia del área del marco para que se pueda ver el fondo de la página;
      • más el familiar scr, nombre, desplazamiento, borde.

      Navegando con un iframe

      La habilidad de encuadre más interesante es escribir código que le permita abrir contenido en una ventana mediante un enlace, que es lo que hicieron los creadores del espejo de Seopult, solo que con varios enlaces a la vez (disponibles simultáneamente para el usuario en la misma página).

      Para esto, se toma un iframe, el nombre se escribe adicionalmente en él a través de name=. Por ejemplo, encabezado. Además, antes de que en las etiquetas y los enlaces se escriban a través de un HREF=con la indicación obligatoria del atributo después de ellos. Antes de usar la etiqueta de cierre a, se indica una inscripción que servirá como botón de enlace. Etiquetas "a" apertura y cierreestán encerrados en la etiqueta p.

      Puede escribir varias líneas de este tipo en el código para eventualmente obtener varios botones de enlace en una fila en el sitio, haciendo clic en qué contenido diferente se mostrará en la ventana de abajo.

      El código se verá así:

      Publicar un anuncio

      Ver anuncios

      Image
      Image

      Cómo se verá en el sitio web:

      Cómo insertar un iframe en un sitio Joomla

      Como estándar, el panel de control de Joomla tiene un módulo de "código HTML" habilitado (listo para usar). Con él, puede insertar cualquier código en cualquier lugar del sitio. Sin embargo, ignora obstinadamente el código con la etiqueta iFrem. Por lo tanto, utilizaremos un módulo Jumi especial.

      En primer lugar, debe descargarlo de Internet e instalarlo a través del panel administrativo de Joomla: "Extensiones" - "Administrador de extensiones" - "Seleccionar archivo". Especifique la ruta al archivo descargado y haga clic en "Descargar".

      Después de una instalación exitosa, vaya al "Administrador de módulos" y cree uno nuevo. Seleccione el tipo de Jumi. En la ventana que se abre, en el campo "Código personalizado", ingrese el iFrem preparado, como se muestra en el párrafo anterior del artículo. Asigne un título al módulo, especifique la posición de ubicación y las páginas del sitio. Haz clic en guardar y compruébalo.

      Navegadores y marcos

      Todos los navegadores populares muestran bien el contenido de las ventanas de marco: Chrome, Safari, Firefox, Android, iOS. Internet Explorer y Opera tienen una tasa particularmente alta en este sentido. Y sin embargo no hay garantíaque el visitante de su sitio verá el contenido de todas las ventanas. En este caso, debe dejar un mensaje usando la etiqueta noframe (apertura y cierre). Puede ingresar lo siguiente: "Su navegador está desactualizado. Actualice la versión para mostrar el contenido del sitio". Si el navegador del usuario muestra los cuadros correctamente, no verá este mensaje.

      Entonces, un marco es un área o ventana de un sitio que tiene su propia URL. Se utiliza para mostrar varias páginas web o documentos independientes en un campo del navegador a la vez, que también tienen su propia URL. A pesar de que los marcos te permiten organizar bien un sitio complejo, no se han utilizado durante mucho tiempo, a excepción del iframe. El uso de esta etiqueta sigue siendo relevante para cargar presentaciones, un reproductor de video, documentos de texto en una ventana específica. Es utilizado activamente por recursos web grandes y conocidos.

Recomendado: