Hogar › Servicios › ¿Qué son los marcos en HTML? Creando una estructura basada en Frameset y sus atributos Cols y Rows. Atributos del elemento del conjunto de marcos

¿Qué son los marcos en HTML? Creando una estructura basada en Frameset y sus atributos Cols y Rows. Atributos del elemento del conjunto de marcos

El término "marco" nos llegó desde idioma en 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. EN en este momento Esta tecnología está en desuso y los marcos normales ya no son compatibles con HTML5.

Historia de la tecnología

Hoy 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 tecnologías modernas admite el elemento IFRAME. Su uso permite insertar marcos en bloques de texto en las páginas. Además, dichos elementos se pueden alinear con respecto al texto mismo. Punto importante: En principio, es imposible cambiar el tamaño de los marcos integrados. No tienen un atributo correspondiente para cambiar el tamaño.

en el futuro sin cambios abruptos tecnología, el uso posterior de marcos es poco probable. 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 marcos

Entre las ventajas de la tecnología de marcos se encuentran la facilidad de uso, alta velocidad trabajo, la capacidad de posicionar con precisión información en ciertas áreas 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 oportunidades interesantes 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.

Puede cambiar las dimensiones dinámicamente mientras trabaja con el sitio. área separada, lo cual es difícil de implementar utilizando otras soluciones tecnológicas.

Posibles desventajas

Los problemas con los sitios web que utilizan marcos se acumularon gradualmente, pero hoy han alcanzado un nivel umbral. Entre las principales desventajas se encuentran:

Usabilidad insatisfactoria. Hoy en día, la proporción de usuarios de dispositivos móviles y tabletas con resoluciones de pantalla pequeñas está creciendo y ya supera el número de quienes visitan sitios desde computadoras de escritorio y portátiles. Y aquí el uso de marcos crea problemas serios con adaptabilidad de página cuando se muestra en varios dispositivos. Este problema no tiene hoy una solución práctica.
Deterioro de la accesibilidad del sitio para diversos programas. Aumento de cantidad programas adicionales(Por ejemplo, lectores de pantalla) revela mucho peor disponibilidad información a leer.
Las páginas no se muestran correctamente. A menudo, el diseño de páginas con esta estructura parece incorrecto en los navegadores desde el punto de vista del diseño. Y esto se debe a las peculiaridades de la tecnología. Desde el punto de vista uso de SEO marcos en el diseño HTML de la página es muy indeseable.
Disponibilidad de una única dirección para toda la estructura. Como resultado paginas internas Es imposible marcar un sitio de este tipo. Esto genera molestias a los usuarios.
Indexación incorrecta por parte de los motores de búsqueda. La presencia en el sitio de varios documentos completos, a partir de los cuales se forma una página, complica significativamente el trabajo. motores de búsqueda. Esto conduce a errores importantes durante la indexación. Como resultado, una definición incorrecta de temas y direcciones de páginas provoca la pérdida de contenido crítico en la indexación.
Falta de respeto. Este es un defecto bastante inusual para los recursos de la red. Y, sin embargo, hay que decir que el hecho de que el diseño de los sitios en marcos se esté volviendo obsoleto lleva a que los autores y propietarios de dichos recursos sean considerados retrógrados. Pero hay algunas excepciones. Incluso los sitios modernos que albergan salas de chat suelen utilizar marcos.

Marcos de indexación por motores de búsqueda.

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 cambiar a parte interior página, el usuario normalmente no ve 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, metaetiquetas de descripción y Etiqueta CONJUNTO DE CUADROS. 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 aquí robot de búsqueda Una página así casi nunca está indexada. No encuentra ningún contenido que sea útil para los visitantes. Los robots de búsqueda están configurados de tal manera que intentan obtener e indexar la información publicada en su interior. 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 vinculación correcta 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 obtienen clasificaciones altas. 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, al describirlos, utilice etiquetas especiales y parámetros. 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 cantidad en el código de la página corresponde al número. áreas individuales, que se muestra en la ventana del navegador durante la visualización.

Estas etiquetas deben colocarse en pagina de inicio sitio y luego duplicar el contenido dentro de cada uno de ellos.

A pesar de que los sitios con marcos son cada vez menos comunes, aprender HTML Estaría incompleto sin discutir el tema de los marcos. Además, los marcos, en cierto sentido, han ocupado su nicho y se utilizan para sistemas de administración y ayuda. Donde las desventajas de los marcos no son particularmente importantes, pero las ventajas, por el contrario, tienen una demanda activa.

La etiqueta se utiliza para crear un marco. , que reemplaza la etiqueta en un documento y se utiliza para dividir la pantalla en áreas. Dentro de esta etiqueta hay etiquetas , que apuntan al documento HTML que se pretende cargar en el área (Figura 13.1).

Arroz. 13.1. Ejemplo de dividir una ventana del navegador en dos marcos

Cuando se utilizan marcos, se necesitan al menos tres archivos HTML: el primero define la estructura del marco y divide la ventana del navegador en dos partes, y los dos documentos restantes se cargan en las ventanas especificadas. El número de cuadros no es necesariamente igual a dos, tal vez más, pero no menos de dos; de lo contrario, el significado de usar cuadros se pierde por completo.

Consideremos las etapas de creación de marcos según la página que se muestra en la Fig. 13.1. Necesitaremos tres archivos: index.html - define la estructura del documento, menu.html - cargado en el marco izquierdo y content.html - cargado en el marco derecho. De estos, sólo index.html difiere en la estructura de su código de otros archivos (ejemplo 13.1).

Ejemplo 13.1. archivo index.html

Marcos

En el caso de utilizar marcos, se escribe la primera línea de código. siguiente tipo documento.

Dadole dice al navegador que está tratando con marcos, esta línea de código es obligatoria. Recipiente contiene información típica como codificación de página y título del documento. Sólo tenga en cuenta que el encabezado sigue siendo el mismo siempre que los archivos HTML se abran dentro de los marcos.

EN en este ejemplo La ventana del navegador se divide en dos columnas utilizando el atributo cols, la columna de la izquierda ocupa 100 píxeles y la columna de la derecha ocupa el espacio restante especificado por el símbolo de asterisco.

El ancho o alto de los marcos también se puede establecer como un porcentaje, similar a las tablas. en la etiqueta se da nombre del archivo HTML , cargado en el área especificada usando el atributo src. Se cargará un archivo llamado menu.html en la ventana izquierda (Ejemplo 13.2) y content.html se cargará en la ventana derecha (Ejemplo 13.3). Es recomendable configurarlo para cada cuadro. nombre único.

para que los documentos se puedan cargar en la ventana especificada usando

atributo de nombre

Ejemplo 13.2. Menú de archivo.html Navegación del sitio En este ejemplo

fondo gris

en la página se configura mediante estilos, que se analizarán más adelante.

Ejemplo 13.3. Contenido del archivo.html

Contenido del sitio CONTENIDO Consideremos más

ejemplo complejo

ya con tres marcos (Fig. 13.2). Arroz. 13.2. Dividir una página en tres cuadros

En este caso, la etiqueta se vuelve a utilizar.

Marcos

, pero dos veces, con una etiqueta anidada dentro de la otra. La partición horizontal se crea mediante el atributo de filas, donde se utiliza la notación porcentual para la variedad (Ejemplo 13.4). Ejemplo 13.4. Tres cuadros Como se puede ver en este ejemplo, el contenedor con el atributo de filas primero crea dos cuadros horizontales, pero reemplaza el segundo cuadro con otro Al desplazarse y el usuario no podía cambiar de forma independiente el tamaño del marco superior, se agregaron los atributos scrolling="no" y noresize.

¡Buenos días a todos! Andréi Bernatski está con vosotros.

Antes de ir directamente al artículo, me gustaría darle un enlace a la versión en video de este tema:

En este episodio hablaremos de marcos en HTML. Marcos en esencia son muy similares a las tablas, pero a diferencia de las tablas, cada frame es independiente y cada uno de ellos puede tener una página web independiente con su propia dirección.

En la figura vemos una estructura de sitio bastante común. Se puede presentar en forma de mesa, o todo esto se puede hacer mediante marcos. En el marco superior puede cargar una página con el logo y el menú, en el izquierdo - una página con navegación del sitio, en el marco central habrá una página con el contenido principal del sitio, en el marco derecho cargaremos un página con pancartas publicitarias, y en la parte inferior, la página con Información del contacto. Esto es lo que son los marcos en pocas palabras.

Ahora veamos cómo se puede hacer todo esto.

La peculiaridad de un documento que contiene marcos es que no contiene contenedor. CUERPO. En su lugar se utiliza un contenedor. MARCO. La sintaxis general de los marcos es la siguiente:

HTML

… ….

…

….

en un contenedor …. las etiquetas están ubicadas , que definen el contenido de los marcos.

en la etiqueta hay dos parámetros:

filas = número– número de líneas (alféizares horizontales).

columnas = número– número de columnas (alféizares verticales).

En términos generales, los valores de los parámetros de filas y cols no se especifican exactamente mediante números, sino enumerando los números separados por comas. Cuantos números haya, habrá tantas filas o columnas, y los números determinan el tamaño del marco. Lo principal es que la suma de estos números sea igual a todo el ancho de la pantalla.

Miremos esto con un ejemplo y todo quedará claro. Ahora creemos un documento marco. el siguiente tipo:

El código que definirá esta estructura de marco para nosotros se verá así:

HTML

La primera línea del código anterior abre el contenedor del conjunto de marcos, el parámetro cols indica que habrá tres marcos anidados. El primero tendrá un ancho del 30% del ancho total de la pantalla. El tercero también tendrá el 30% del ancho total de la pantalla. Y el segundo cuadro ocupará todo el espacio restante. Sí símbolo "*" (asterisco) significa ocupar todo el espacio restante en la pantalla.

Por cierto, veamos cómo se pueden configurar los marcos en los parámetros de columnas y filas:

Puede establecer el tamaño simplemente ingresando un número. Este número determinará el tamaño del marco en píxeles.

Puede establecer el ancho como porcentaje. Además, si la suma de los porcentajes de todas las columnas supera el 100%, todos los fotogramas se reducirán proporcionalmente para que la suma total sea igual al 100%. La situación será similar: si la suma de los porcentajes de todas las columnas es inferior al 100%, entonces todos los fotogramas aumentarán proporcionalmente para que la suma total sea igual al 100%.

Puede establecer el tamaño del marco con un símbolo. “*” (estrella). Esto significa que el marco debe ocupar todo el espacio restante. Si se especifica, por ejemplo , es decir, dos asteriscos, todo el espacio restante se dividirá equitativamente entre estos dos cuadros (en este caso, 40%).

Puede combinar opciones para configurar tamaños de marco en HTML. Por ejemplo:

HTML

Este código significa que el primer fotograma tendrá un tamaño de 70 píxeles, el tercero tendrá el 40% del ancho de la pantalla y el segundo ocupará el espacio restante.

Descubrimos completamente la primera línea de código. Sigamos adelante.

Las etiquetas siguen . Desde separados por comas en el parámetro. columnas etiqueta conjunto de cuadros si se dan tres números (es decir, habrá tres cuadros), entonces etiquetas debe haber tres también. El valor del parámetro src es dirección web página que se cargará en este marco. La dirección, como puede verse en el ejemplo, puede ser absoluta y relativa.

Y la última línea cierra el contenedor. .

Si reemplazamos el parámetro cols con filas en la primera línea de código, obtendremos el mismo documento de marco que consta de tres marcos. Sólo la división en cuadros será vertical.

HTML

Opciones filas Y columnas no se pueden utilizar simultáneamente. Esto provoca errores y una visualización incorrecta del contenido.

Ahora todos tienen una pregunta sobre cómo crear dicha estructura, de la que hablé al principio del artículo. Volveremos a esto un poco más tarde, pero por ahora veamos lo que está sucediendo en nuestro navegador.

En el navegador vemos tres páginas, cada una de las cuales está en su propio marco.

Al mismo tiempo, moviendo el cursor del mouse a los bordes de los cuadros, podemos cambiar el tamaño de las barras de desplazamiento y los bordes entre cuadros también son visibles. Esto no siempre es necesario; de hecho, no es necesario en absoluto. Y todo esto se puede controlar gracias a los parámetros de la etiqueta. marco Y conjunto de cuadros.

Opciones de etiqueta marco Y conjunto de cuadros:

src="url"– parámetro requerido. Especifica la dirección de la página que se mostrará dentro del marco. Usado solo para marco.

noresize– cancela la capacidad de cambiar el tamaño. Sólo usado para marco.

desplazamiento = "sí/no/auto"– determina la presencia de barras de desplazamiento. El valor sí – indica la presencia de barras de desplazamiento. El valor no especifica que no habrá barras de desplazamiento. Cuando se configura en automático, el propio navegador determina si habrá barras de desplazamiento. Sólo usado para marco.

nombre="nombre-marco"– nombre del marco. Este parámetro Se utiliza para la interacción entre marcos. Hablaremos más sobre esto un poco más adelante. Sólo usado para marco.

borde=número– espesor de los bordes entre marcos. Si toma el valor 0, entonces los bordes entre fotogramas no se muestran. Usado solo para cuadro.

espacio entre cuadros="número"– distancia entre marcos. Usado solo para cuadro.

Con estos parámetros, puede obtener una página en la que no se muestran los bordes entre cuadros, no hay forma de cambiar el tamaño de los cuadros y el desplazamiento está prohibido en los dos últimos cuadros. El código para dicha página se ve así:

HTML

Hay algunas otras opciones, pero claramente no funcionan, por lo que creo que tiene sentido ni siquiera mencionarlas en el comunicado.

Quizás eso sea todo con los parámetros. Miramos un ejemplo de cómo usarlos.

Ahora creemos la estructura del marco de la que hablé al principio del lanzamiento.

Para ello, creamos una estructura de tres cuadros divididos verticalmente.

HTML

En consecuencia, en lugar de la etiqueta , tenemos que insertar otro contenedor .. con tres columnas y escriba la dirección de su página en cada una. Verás, nada complicado, simplemente usamos una etiqueta en su lugar. Insertar el nuevo contenedor que necesitamos. .. .

HTML

"../lección3/Sin título-1.html" />

Después de esto, insertamos nuestro tercer cuadro con información de contacto y cerramos el contenedor principal.

HTML

El código completo de esta página se encuentra a continuación:

HTML

"../lección3/Sin título-1.html" />

Por supuesto, tomé las direcciones de los marcos de ediciones anteriores del boletín y no vimos ningún menú, logotipo, navegación, etc. aquí. Pero conseguimos la estructura que necesitábamos. Pero si creas real páginas requeridas, entonces puedes obtener una hermosa estructura.

Lo que obtuvimos al final. Si esto es conveniente o inconveniente, depende de usted decidir, pero con una estructura de marco, todos nuestros marcos siempre permanecen en la página. Independientemente del tamaño del contenido, siempre veremos el logotipo y el menú del sitio, la parte inferior del sitio con información de contacto, el bloque de navegación y los banners. Ésta, en general, es la esencia y el significado de los marcos.

Existe la posibilidad de interacción entre fotogramas. Puedes hacer que al hacer clic en un enlace en un cuadro, la información aparezca en otro. Ahora veremos cómo se hace esto.

Creemos un marco como este:

Nuestros enlaces estarán ubicados en el marco izquierdo. Y a la derecha están las páginas a las que conducen estos enlaces.

Creemos un marco como este:

HTML

Entonces, las monturas… ¿para qué sirven y qué beneficios aportan? Intentaré hablar sobre esto en este capítulo y, por supuesto, sobre cómo implementarlos y trabajar con ellos.

A menudo, al crear un sitio web, es necesario abrir varios documentos HTML al mismo tiempo en una ventana del navegador... por eso se crearon marcos para definir las áreas de trabajo de cada documento. Además, los marcos son una buena herramienta con la que puedes diseñar una página y sirven como una valiosa “alternativa”; método tabular diseño de página... Pongo la palabra "alternativa" entre comillas porque es una forma completamente diferente de crear un sitio web con sus propias ventajas y desventajas y es bastante difícil compararla con la construcción de sitios web hasta ahora familiar... pero lo primero es lo primero. ..

Bueno, ¿empezamos? Digamos que necesitamos abrir tres documentos HTML a la vez en una ventana del navegador y organizarlos, por ejemplo, de esta manera:

¿Qué necesitamos para esto? Para empezar, naturalmente, necesitamos crear tres documentos HTML separados, que en realidad abriremos en una ventana y dejaremos que el primer documento los contenga. imagen grafica y actuará como un logotipo, llamémoslo logotype.html, el segundo documento será algo de contenido... llamémoslo menu.html, y el tercer documento con un montón de texto. texto.html. Por supuesto, puedes inventar tus propios nombres, así como el contenido de los documentos, pero por ahora es mejor copiar el mío... será más conveniente tanto para mí como para ti.

Entonces, hay tres archivos logotype.html, menu.html y text.html... que necesitamos colocar bajo un mismo techo, pero aún no tenemos un techo...

Escribimos “techo”, el documento principal al que conectaremos nuestros archivos. Como será el principal, le damos el nombre index.html.

marcos

Aquí está la estructura del documento que nos resulta familiar y que analizamos al principio de nuestra formación. ¡Los marcos rompen los estereotipos existentes! La estructura del marco del documento se ve así:

marcos

Sin etiqueta compensa nueva etiqueta - instale un marco o un conjunto de marcos... de hecho, trabajaremos más con este tipo.

Etiqueta tiene atributos filas Y columnas- estos atributos le dicen al navegador cómo colocar marcos en la ventana del navegador

filas- horizontalmente columnas- verticalmente

En nuestro caso, necesitamos la colocación horizontal de los marcos... así que escribimos así:

marcos

filas="15%,15%,70%">

Los porcentajes después del signo igual no son más que los tamaños de nuestras ventanas de marco en una ventana grande del navegador, asumimos colocación de tres también hay tres ventanas; por lo tanto, también hay tres valores separados por comas. Recuerde cómo configuramos los tamaños de celda para la tabla, aquí se aplica el mismo principio. Como en el caso de las celdas de la tabla, los tamaños de los marcos se pueden especificar como un porcentaje del área total y en píxeles.

A continuación se muestran algunos ejemplos de escritura:
- esta entrada indica que habrá tres ventanas horizontales donde la última ocupará el 70% del área de la ventana del navegador y las dos primeras ocuparán el 15%.
- Aquí hay tres ventanas ubicadas verticalmente, cuyo ancho se indica en píxeles.
- Tal entrada significa que la primera y tercera ventana tendrán un ancho de 100 y 180 píxeles respectivamente, y el segundo cuadro ocupará toda el área restante.

Ya terminamos de colocar los documentos, ahora solo queda conectarlos y disfrutar del primer resultado.

Etiqueta y su atributo src indicará al navegador la ruta al documento html que deberá abrirse en el espacio habilitado para ello. Tenemos tres documentos separados logotype.html, menu.html y text.html, ahora necesitamos especificar una ruta para cada uno, que es lo que realmente hacemos. (Supongo que los cuatro archivos están en la misma carpeta y las rutas a ellos tienen la notación más simple como: )

archivo index.html

marcos

Archivo logotipo.html

marcos

Menú de archivo.html

marcos

Menú:

sopa de champiñones
Frijoles en una olla, al estilo italiano
Ensalada de verano australiana
... ... ...

Archivo texto.html

marcos

sopa de champiñones

mucho texto..

En este ejemplo, presenté los cuatro documentos HTML, donde index.html es el principal y los otros tres son páginas complementarias, cada una de las cuales, en principio, puede funcionar de forma autónoma y contener lo que desee, imágenes, tablas, textos, enlaces... Lo hice. Esto es para que comprendas el principio de trabajar con marcos. En más ejemplos, publicaré solo el archivo principal con marcos (de lo contrario, todos ocuparán demasiado espacio en la página), y sabes que tengo "en algún lugar" todos los demás archivos que contienen gráficos, textos, tal vez algo así. de lo contrario... bueno, no te quedes atrás, edita lentamente tus propias páginas para el futuro sitio de capacitación... No sé sobre qué vas a escribir el tuyo, pero prometí ayudar a una chica a escribir un sitio dedicado. a cocinar..)) así que decidí, por así decirlo, apuntar a dos pájaros de un tiro.. la conejita y el sitio..)) algo como esto..))

En el ejemplo anterior, colocamos todas las ventanas horizontalmente, cambiando el atributo filas en columnas puedes organizarlos verticalmente. Pero ¿y si necesitas colocar nuestras ventanas?

¿Así?: ¿O así?: ¿O incluso así?:

Hay una salida. Veamos ejemplos.

Empecemos por el primer caso… ¿qué vemos? Y vemos dos líneas, donde la segunda se divide en dos columnas.

Y ahora, en orden:

- divide la ventana del navegador en dos líneas
- carga nuestro logo en la primera línea
- y divide la segunda fila en dos columnas
- en el primero habrá un menú
- y en el segundo hay mucho texto
- cerrar la etiqueta de división de columnas
- cerrar la etiqueta de división de línea

En general es incorrecto decir columnas y filas, ya que los marcos no tienen nada que ver con las tablas más que la similitud visual es correcto decir marcos horizontales y verticales.. bueno, lo digo así para que quede; mas claro para ti..

Bien, veamos un ejemplo:

marcos

En el segundo caso, tenemos dos columnas en las que la segunda se divide en dos líneas, así que escribiremos así:

- divide la ventana en dos columnas
- el primero contendrá el contenido
- y divide el segundo en dos líneas
- logotipo
- y texto principal
- cerrar la división de línea
- cerrar la división en columnas

marcos

El tercer caso es un poco más complicado, pero no debes tener miedo... sobre todo porque yo personalmente elegí este tipo de construcción para un sitio sobre arte culinario, te explico a continuación; ¿Qué tenemos? tres columnas, y la segunda columna contiene esencialmente nuestro primer caso.

- divida la ventana en tres columnas (tenga en cuenta que la segunda columna ocupa exactamente 800 píxeles y las dos exteriores no tienen un tamaño exacto y dividirán el espacio restante por la mitad)
-en la primera columna cargamos un documento html que realizará una función puramente decorativa

-
-
- En la segunda columna insertamos nuestro "primer caso"
-
-
-
-

- en la tercera columna cargamos el mismo archivo con decoraciones
- portazo

Mire el ejemplo y luego explicaré por qué elegí la ruta de cinco ventanas.

marcos

Entonces, ¿por qué cinco ventanas? Recuerdo que ya escribí sobre el hecho de que diferentes usuarios de Internet tienen pantallas en sus monitores. diferentes resoluciones y en consecuencia en diferentes pantallas nuestro sitio se verá diferente... y si no hay tamaños específicos, todas nuestras imágenes, textos y tablas “flotarán” para aquellos usuarios cuyas resoluciones de monitor sean diferentes a las suyas. Cuando diseñamos el sitio usando una tabla, el problema con los tamaños de página se resolvió asignando un ancho y alto específicos a esta tabla. Desafortunadamente, esto no se puede hacer con marcos... incluso si especificas el ancho de los marcos que no están en; En porcentajes, pero en píxeles, la última columna se extenderá por el ancho restante de la ventana del navegador y la página, como dicen, perderá su "apariencia comercial". Entonces, ¿qué debemos hacer? Tenemos que recurrir a pequeños trucos... Al configurar la columna central (en la que en realidad tenemos toda la página) a un tamaño de 800 píxeles, determinamos de una vez por todas su ancho, y la primera y tercera columnas adimensionales, en Además de la decoración, actúan como una especie de “resortes” sobre los que se apoya la columna central. Entonces, para personas con una resolución de monitor baja, estas ventanas/campos serán estrechos, y para personas con una resolución alta, serán anchos. por lo que la columna central no se verá afectada de ninguna manera y ahora podremos colocar cualquier objeto en ella con total confianza, con referencia local precisa, sin preocuparnos por su destino futuro. Compare el primer ejemplo, donde hay tres ventanas, y el tercero, donde ya hay cinco, ¿no es mejor?

Terminaremos con la colocación y tamaños de marcos... y ya llevamos mucho tiempo estancados aquí... sigamos adelante.

Le damos a los marcos una apariencia ordenada.

En nuestro último ejemplo, lo primero que llama la atención es un montón de barras de desplazamiento que están ahí donde se necesitan y donde no se necesitan. Vamos a deshacernos de ellas, bueno, puedes dejarlas en algún lugar. Esto se hace usando el atributo desplazamiento- etiqueta , puede tener uno de tres valores:

No
Sí- mostrar siempre
auto

marcos

desplazamiento="no">

desplazamiento="no" >

desplazamiento="no">

Los campos de marco, o la distancia desde los límites del marco hasta el texto o la imagen, como en nuestro caso, se especifican en píxeles mediante atributos. ancho de margen Y altura del margen etiqueta

marcos

ancho de margen="0" altura de margen="0">

ancho de margen="10" altura de margen="10">

Hablemos un poco sobre el marco alrededor de nuestros marcos.

Si notó, en el último ejemplo, al pasar el cursor sobre el borde del marco, el cursor adquiere una apariencia diferente (agarrar y mover) y ahora este borde se puede arrastrar en cualquier dirección mientras se mantiene presionado el botón izquierdo. botón del ratón. A veces, esta "movilidad" de los límites del marco favorece al webmaster, pero lo más frecuente es que se interponga en su camino. Para evitar que el usuario juegue con los tamaños de ventana de la etiqueta se le ocurrió un atributo noresize

marcos

noresize>

noresize>

noresize>
noresize>

noresize>

Pero este es un atributo que nos resulta familiar desde hace mucho tiempo. borde establece el ancho en píxeles de estos mismos cuadros entre los cuadros... está escrito dentro de la etiqueta . Lo mismo que antes significado borde="0" nos liberará completamente de los frameworks.

marcos

borde="0">

borde="0">

borde="0">

Marcos y enlaces.

Es hora de revivir nuestro sitio con enlaces, pero aquí está el problema, el conocido enlace común y corriente. Frijoles en una olla, al estilo italiano se abrirá este documento en el mismo marco donde se ubica, en nuestro caso directamente en el marco con el contenido, y el contenido en sí al momento de hacer clic en este enlace irá al olvido.. puedes mirar el ejemplo torpe.. haz clic en cualquier enlace en él... Entonces, en el futuro esto no sucedió, es necesario decirle al navegador en qué marco abrir el documento que necesitamos, a menos que, por supuesto, realmente necesite abrirlo en el mismo marco.

Recuerdo que ya nos familiarizamos, en el capítulo dedicado a los enlaces, con los atributos. nombre- nombre y objetivo- objetivo, también se utilizan cuando se trabaja con marcos, el mecanismo ha cambiado ligeramente y es casi el mismo. En primer lugar, hay que asignar un nombre individual al marco en el que queremos abrir los documentos.

está escrito así:

nombre="osnovnoe"> se te ocurre cualquier nombre... lo principal es no olvidarlo...

Está escrito así:

objetivo="osnovnoe">Frijoles en olla, estilo italiano

Bueno, creo que no hace falta explicarte que antes de consultar cualquier documento, debes crearlo... en mi caso, los archivos (recetas) tienen los nombres text.html, text1.html, text2.html. ...

Mira el ejemplo:

archivo index.html

marcos

nombre="osnovnoe" ancho de margen="10" altura de margen="10" noresize>

Menú de archivo.html

marcos

Menú:

objetivo="osnovnoe">Sopa de champiñones

objetivo="osnovnoe">Frijoles en olla, estilo italiano

objetivo="osnovnoe">Ensalada de verano australiana

... ... ...

Al igual que antes, el documento se puede abrir en ventana separada. Déjame recordarte que está escrito así:

objetivo="_en blanco">Frijoles en olla, estilo italiano

O asignando el atributo objetivo significado _arribaábrelo en la misma ventana del navegador, pero en pantalla completa.. “poniendo a cero” todo lo que hay allí.. está escrito así:

objetivo="_top">Frijoles en olla, estilo italiano

Así quedó el sitio... por supuesto, aún queda trabajo y trabajo por hacer... además, según mi idea, tendrá una estructura ligeramente diferente en términos de navegación por el sitio, tendrá un montón de páginas más, hermoso menú, pero en cuanto a la estructura del marco, creo que seguirá siendo la misma.

marco flotante

A veces es necesario insertar otro documento HTML o incluso una serie de dichos documentos en una página que contiene una estructura sin marco en una ventana separada. Para lograr este propósito existe una etiqueta. - el llamado marco flotante. Esta etiqueta tiene varios atributos: src - <a href="https://innovakon.ru/es/internet/yazyk-php-g-left-feedback-forma-obratnoi-svyazi-na-php-s-otpravkoi-na-e-mail-html-i-obyazatelnye-atr.html">atributo requerido</a>, indicando la ruta a la página a abrir ancho- ancho del marco flotante en píxeles o porcentajes altura- altura del marco flotante desplazamiento- mostrar barra de desplazamiento<ul><li>No- nunca mostrar la barra de desplazamiento,</li><li>Sí- mostrar siempre</li><li>auto- muéstralo si es necesario.</li> </ul>alinear- alineación del marco flotante <ul><li>izquierda- izquierda</li><li>bien- bien</li><li>arriba- más alto</li><li>abajo- abajo</li> </ul>borde del marco- presencia de un marco alrededor del marco flotante <ul><li>1 - habilitar marco</li><li>0 - apaga el marco</li> </ul>En conjunto está escrito así: <iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1" >

Documento de ejemplo con marco flotante:

marco flotante

En esta página se ha introducido el llamado "marco flotante".
En una ventana separada, abre otro documento html para su visualización.

… … …

Sin marcos

Algunos navegadores no admiten la estructura del marco del documento o la interpretan incorrectamente; además, los usuarios a menudo desactivan deliberadamente la compatibilidad con el marco en la configuración de su navegador; estructuras html documento. Y aunque el porcentaje de estos navegadores y usuarios es pequeño, existen.

Ahora imagine que ha creado su sitio web utilizando una estructura de marco y algunos visitantes, tal vez sin saber cuál es el problema, intentan abrir su sitio web y su navegador muestra un error. ¿Qué pensarán de su sitio? Pienso algo como: "Uf... algún tipo de tontería... ¡No volveré aquí otra vez!".

Para dejar claro al usuario que su navegador/la configuración del navegador no admite marcos, existe una etiqueta

El resultado del ejemplo se notará si su navegador realmente no admite marcos (esto lo pensé durante mucho tiempo... :) si es así, ¿por qué leer este capítulo?) o si desactivó la compatibilidad con marcos en su navegador como experimento.

Etiqueta