Diseño de goma HTML. Diseño de goma de tres columnas. Problema de escala en navegadores móviles

Diseño de "goma"

Todas las plantillas que creamos tenían un ancho fijo: es decir, el ancho de unidades, columnas, áreas, etc. permanece constante cuando se cambia el tamaño de la ventana del navegador. La mayoría de los sitios web de éxito comercial han utilizado este principio desde la llegada de Internet. Este enfoque resultó ser el más método efectivo diseño que le permite crear un diseño de calidad en un entorno que no siempre es amigable para los diseñadores.

Sin embargo, no puedo evitar considerar diseño de "goma"– crear páginas que cambian de tamaño según el área de visualización.

Los diseñadores quieren crear sitios que realmente tengan en cuenta las preferencias del usuario. Por lo tanto, no podemos descartar argumentos convincentes dirigidos a contra páginas de ancho fijo e intermedias para diseño de "goma". En esencia, el ancho fijo de una página web refleja la inclinación del diseñador por el control. uso real, mientras que las páginas que cambian según la ventana gráfica tienen en cuenta primero las necesidades del usuario.

Se puede decir que cuando gran tamaño pantalla, el sitio debe ocupar toda el área disponible, y cuando tamaño pequeño– disminuir en consecuencia. No sería del todo justo decir que el diseño “fluido” intenta adaptarse a todos los usuarios, pero su tarea se acerca a eso. Internet es un conglomerado de muchos sistemas que sirven grupos amplios usuarios de la manera que mejor se adapte a sus necesidades individuales. Acepta que la misma percepción del contenido o funcionalidad del mismo sitio es imposible. Por qué apariencia¿Debería ser igual para todos? El diseño fluido es más adecuado para Internet y tiene mejor en cuenta sus puntos fuertes y debilidades que las páginas de tamaño fijo. Como se señaló anteriormente, cuanto más natural sea la solución, más eficaz será.

Hasta hace poco, las capacidades del diseño web no nos permitían disfrutar plenamente del diseño "fluido". Las nuevas capacidades del navegador, junto con innovaciones en CSS y JavaScript para dispositivos, permiten a los diseñadores crear páginas mucho más dinámicas.

Los diseñadores innovadores ahora pueden participar en el llamado diseño web "responsive". Ethan Marcotte, un firme defensor, sostiene que este enfoque abre nuevas posibilidades:

Puede hacer que el sitio sea conveniente y atractivo en apariencia utilizando tecnologías estándar para que el sitio no solo sea más flexible, sino que también se adapte al entorno en el que se implementa.

Estas tecnologías se están desarrollando increíblemente rápido, por lo que decidí no abordarlas en mi libro. Mejores prácticas en el campo del diseño web responsivo aún no se han encontrado.

Sin embargo, los principios básicos del diseño siguen siendo válidos independientemente del desarrollo de un nuevo enfoque. También es cierto que los diseñadores deberían seguir compartiendo el control sobre sus propias creaciones con los usuarios que quieran controlar sus acciones. Sería un error pensar que el diseño web responsivo significa dar a los usuarios un control total, porque en realidad sólo necesitan algunas funciones. Los usuarios esperan que los diseñadores no sólo les proporcionen algo de shell, sino que también lo refinen lo suficiente como para que sea manejable.

El diseñador debe tomar algunas decisiones por el usuario, pero no todas, sino sólo aquellas que ayuden en la percepción. El diseñador permite al usuario controlar los aspectos de la percepción que son más importantes para sus objetivos, pero el usuario aún debe sentirse estable y confiable.

El diseño web responsivo no facilita esta tarea. De hecho, lo complica. Habrá aún más situaciones que habrá que tener en cuenta, más combinaciones de elementos interfaz de usuario V varias combinaciones, lo que dificultará la percepción de los sitios. Por lo tanto, la cuadrícula se vuelve aún más importante para diseño general; Crear una cuadrícula sólida en el centro del diseño web responsivo lo hará más sólido y confiable.

Los mismos principios de diseño basados ​​en cuadrículas se pueden utilizar tanto en el diseño fluido como en el diseño web responsivo. Las unidades se pueden combinar en columnas y áreas, y los tamaños de los elementos se pueden cambiar según los parámetros básicos de la cuadrícula. Estos elementos deberían crecer y reducirse según estos mismos parámetros, pero es importante recordar que no es necesario cambiar todo. Algunos elementos pueden y deben permanecer sin cambios. En un entorno donde los elementos cambian de tamaño sin cesar, es muy importante mantener la coherencia y proporcionar a los usuarios algún tipo de referencia. A medida que se desarrolle esta teoría, surgirán nuevas oportunidades para los diseñadores que trabajan en este campo. Pero el papel central del diseñador seguirá siendo el mismo: la persona que gestiona la percepción del usuario.

Del libro Adobe InDesign CS3 de Zavgorodniy Vladimir

Diseño de varias columnas La característica principal del diseño de cualquier periódico es el diseño de varias columnas. Dado que es difícil imaginar una línea del largo de una página entera de periódico, el diseñador divide la página en columnas separadas; su número depende del formato del periódico. Cuándo.

Del libro 300 mejores programas para todas las ocasiones autor Leontyev Vitaly Petrovich

Diseño con ilustraciones Otra característica del diseño de revista que es importante recordar es más imágenes. Si para un artículo de periódico (más corto, que ocupa parte de la página) una o dos ilustraciones son suficientes, entonces los artículos de revista más largos requieren

Del libro Lo que no escriben en los libros sobre Delfos de Grigoriev A. B.

Diseño final y maquetación del folleto La primera tarea en el diseño final del folleto es el diseño de la inscripción “Nuevo”, que probablemente ha sido una monstruosidad para nuestros lectores durante mucho tiempo. Para el diseño, elegiremos una imagen simple. Técnica que se utiliza con tanta frecuencia en

Del libro HTML 5, CSS 3 y Web 2.0. Desarrollo de sitios Web modernos.

autor Dronov Vladimir

Diseño final de la página El diseño final de la página en nuestro caso se reducirá a las siguientes operaciones: colocar información de servicio en la página (por ejemplo, encabezados y pies de página); llenar la página con texto real (programas de televisión reales, selección de programas reales

Del libro HTML 5, CSS 3 y Web 2.0. Desarrollo de sitios web modernos por Vladimir Dronov Diseño de texto La primera tarea de diseño será asignar estilos al texto importado. También debes eliminar los innecesarios.(que generalmente se usan para encabezados y barras laterales en una composición tipográfica), dejando solo una línea vacía entre el texto de la barra lateral y el siguiente texto normal

Del libro ¡Los móviles primero!

por Wróblewski Luke

Maquetación y preparación previa a la impresión del texto.

Del libro del autor. 1.3.4.2. Operaciones de línea elástica y ráster Ahora necesitamos darle al usuario la capacidad de dibujar líneas. Para ello utilizamos una línea de "goma" estándar: el usuario presiona botón izquierdo

ratón y, sosteniéndolo, mueve el ratón. Mientras se mantenga presionado el botón,

Del libro del autor Del libro del autor

Maquetación y preparación previa a la impresión del texto.

Diseño de varias columnas El diseño de varias columnas es algo que ha faltado en el diseño web durante mucho tiempo. Algunos entusiastas lo han estado implementando durante mucho tiempo usando tablas o contenedores, pero ahora tienen medios "legales" para dividir el texto en un número arbitrario de columnas. 7 Diseño PRINCIPIOS DE ORGANIZACIÓN DE CONTENIDOS y los elementos de la interfaz utilizados al desarrollar el diseño de sitios comunes sin duda pueden ser útiles al diseñar aplicaciones web móviles

01.10.2013 01:04 73845

. Pero, ¿cómo puede estar seguro de que estos principios serán relevantes para cualquier El diseño fluido de un sitio web (así como el diseño fijo) comienza con la creación del llamado esqueleto o marco para un mayor desarrollo. En absoluto, diseño html

- diseñador. Primero, se crea el contenedor principal, la base que posteriormente será responsable del ancho mínimo y máximo de todo el sitio y los límites. Si hace todo correctamente, al cambiar el tamaño máximo, puede aumentar el tamaño máximo del sitio, por ejemplo, de 1280 px a 1360 px o 1920 px, prácticamente sin modificaciones de código (y a veces sin ninguna). No debes hacer goma sin fin, ya que es ilegible en monitores grandes. La opción ideal sería un diseño html que incluya todas las resoluciones de pantalla principales, incluidas las móviles, por ejemplo, un diseño de goma para resoluciones de pantalla de 240 px a 1920 px. Hay varios tipos de html

diseño que es visualmente diferente. Echemos un vistazo breve a este tipo de diseños antes de pasar a la construcción práctica del marco:

Los tipos de diseño visualmente diferentes son: diseño fluido, diseño fijo, diseño adaptativo. El diseño adaptativo se puede combinar con un diseño fluido.
Características de cada tipo de diseño: 1) Diseño fijo: la capacidad del contenedor del sitio principal de tener el mismo ancho independientemente de la resolución del monitor. Si la pantalla es más pequeña que tamaño fijo

2) Disposición de caucho: la capacidad del contenedor del sitio principal para estirarse en ancho desde y hasta las dimensiones mínimas y máximas especificadas. El diseño fluido puede realizarse sin especificar un mínimo (no se verá muy decente en pantallas más pequeñas que Npx, los objetos estáticos pueden flotar uno encima del otro si no agrega adaptabilidad) o tamaño máximo, luego se expandirá infinitamente (imagine cómo se verá el artículo con una resolución de 7000 px, casi en una línea), por lo que buen html El diseño siempre tiene límites razonables. Por lo tanto, siempre debes comprobar el resultado del diseño en diferentes resoluciones y en diferentes navegadores.

3) Diseño adaptable: la capacidad tanto del contenedor principal como de cualquiera de los elementos del sitio de adaptarse a la resolución de la pantalla, permitiéndole cambiar el tamaño de fuente, la ubicación de los objetos, el color y todo lo que pueda desear. Además, esto se hace de forma dinámica, sin la intervención del usuario, por ejemplo, mediante consultas de medios que le permiten determinar automáticamente la resolución del monitor, el tipo de dispositivo (móvil, teléfono inteligente, tableta) y sustituirlo. valores especificados V modo automático. Esto da grandes oportunidades. Por ejemplo, al combinar un diseño fluido con uno adaptable, puede personalizar la visualización del sitio, desde las resoluciones móviles más pequeñas hasta las más monitores grandes. El diseño adaptativo no afecta las capacidades de los flexibles o fijos, los complementa.

Por lo tanto, la mejor opción hoy sería un diseño html, inicialmente creado como un diseño de goma, por ejemplo 980px-1920px, actualizado a 240px usando diseño adaptativo. Siempre debes recordar la principal diferencia:

El diseño fluido funciona solo con contenedores, mientras que el diseño adaptativo funciona tanto con contenedores como con su contenido, lo que le permite cambiar objetos como fuentes, reemplazar un objeto por otro y mucho más según la resolución de la pantalla o el dispositivo. Por lo tanto, trate de tener en cuenta este matiz al planificar y crear sus proyectos, y recuerde que hoy en día el diseño fluido en combinación con el diseño adaptable se considera una buena forma en la creación de sitios web, y mañana puede convertirse en un estándar tácito. Por lo tanto, para no tener que ponerse al día más tarde, es mejor salir adelante hoy, haciendo de la combinación anterior la norma para usted.

También vale la pena considerar la validez del sitio durante el diseño. Existe la opinión de que hoy en día la validez ya influye en el rendimiento, al menos en los motores de búsqueda. sistema de google. Por eso, a la hora de crear un proyecto, siempre conviene mirar el validador online y comprobar la validez y, si es posible, minimizar la presencia de errores. Generalmente se verifica su validez pagina de inicio sitio. Es habitual utilizarlo para determinar la validez de un sitio. También vale la pena mencionar que la mayoría de los CMS tienen código en algunos lugares que no pasa la validación.

Muy a menudo esto se puede observar en las noticias completas, donde hay editor visual, especialmente con el uso excesivo de formato y varios tipos de resaltado utilizando el propio editor. Pero no hay ningún lugar sin esto, por lo que si la página principal del sitio pasa la validación, entonces será un resultado bastante digno, y paginas internas puedes pasar si es posible. A veces hay que editar incluso en el motor, lo que no todo el mundo puede hacer, por lo que se necesita una medida razonable en todo, y la validez debe ser algo común para el maquetador, una norma cotidiana, pero al mismo tiempo no convertirse en una manía que te obliga a hacer la validez por la validez. Solo necesita intentar hacerlo de la manera más eficiente posible y reducir la cantidad de errores al mínimo, dentro de sus capacidades. Al final, si hay una docena o dos de errores, el sitio no dejará de funcionar, por lo que tampoco debes entrar en pánico por ellos.

Ahora pasemos directamente a la creación de un marco de sitio web que utilice un diseño de goma:
Primero, debemos crear un estándar general, como siempre, un tipo de documento, etiquetas de servicio y colocar el contenido del futuro sitio entre las etiquetas. Dado que el propósito de esta lección no es describir cada etiqueta y su propósito, sino mostrar el método en la práctica, no entraré en la descripción de las etiquetas de servicio, sino que simplemente daré un ejemplo de fuente HTML estándar para cualquier sitio, en nuestro caso html5.

Disposición del marco

Así es como se ve el cuerpo inicial del sitio, incluso sin marco ni bloques internos. es simple información necesaria para navegador, biblioteca en línea para la percepción de html5, ya que todavía es solo una recomendación, y la especificación sigue siendo html 4.1, aunque el uso generalizado de html5 ya está en pleno apogeo. También en las etiquetas de servicio hay metaetiquetas, título y archivo adjunto. estilos css Para diseño visual nuestro marco.

Para crear el marco principal, que disminuirá a 240 px y aumentará a 1920 px, y con una resolución superior a 1920 px se alineará hacia el centro, debe colocar el contenedor inmediatamente después de la etiqueta del cuerpo y cerrarlo antes del cierre. uno etiqueta del cuerpo. Todo el resto del relleno hay que implementarlo en su interior.

Por lo general, este contenedor recibe nombres similares, como envoltura, envoltura, etc., lo que significa que es un bloque envolvente que incluye todo el contenido del diseño principal, los bloques y el contenido. Por lo tanto, no reinventaremos la rueda, sino que intentaremos utilizar nombres de clases generalmente aceptados.
Una clase es una especie de apodo para cualquier contenedor que puede registrarse una vez y usarse en cualquier lugar. cantidad ilimitada una vez.

Por ejemplo, si escribe una clase en estilos CSS, digamos redblock, y le asigna un fondo rojo, cualquier bloque al que le asigne esta clase tendrá un fondo rojo. Asignar una clase es muy sencillo. entre comillas el bloque deseado esta prescrito nombre deseado, por ejemplo redblock o wrapper, o privetvasya. Este clase abstracta, que se te ocurre a ti mismo, como un apodo para un cachorro.
Por lo tanto, nuestro contenedor contenedor, al que decidimos asignar la clase contenedora, podría verse así:

Pero, como estamos seguros de que tendremos un solo contenedor de sobres en todo el sitio, es más recomendable asignarle un identificador en lugar de una clase. La diferencia entre un identificador y una clase es que una clase se puede utilizar tantas veces como se quiera, pero sólo puede haber un identificador en una página. El identificador tiene mayor prioridad ya que es uno, se puede direccionar específicamente. Esto se puede comparar con una cola en una estación de tren. Todos escucharon el anuncio en la estación de tren, por ejemplo, la ciudadana Kutuzova Adelina Matveevna, diríjase al despachador...

EN en este caso dirigirse a un ciudadano por su nombre completo es un análogo de un identificador en html (también dicen id, id, ID). Y un mensaje como: queridos pasajeros, salida del tren...
Será equiparable a la clase, ya que el llamamiento se dirige a todos los pasajeros, sin un llamamiento específico.

La presencia de un identificador no prohíbe el uso de una clase, y el mismo nombre de clase y el identificador (ID) son diferentes, y se puede acceder a dicho bloque ya sea por clase o por identificación.
Por ejemplo:

Un hecho común que le permite acceder este bloque de varias maneras. Pero esta información plano general, para calentar. Esta lección asume que ya tiene al menos una comprensión teórica y una comprensión de lo anterior.
Esto significa que no complicaremos el proceso llamado diseño del sitio web, según el cual nuestro bloque seguirá teniendo una identificación y no una clase, es único, pero no necesitamos una clase adicional aquí. Por tanto, que sea así:

El marco está listo, ahora según reglas html 5, utilizaremos etiquetas semánticas que faciliten a los motores de búsqueda comprender la estructura, para que lo principal no pase desapercibido. Nuevamente, repito, no estaremos cargados de descripciones de etiquetas en esta lección; para esto hay una sección especial en la que se describen en detalle las etiquetas html, con una demostración y la oportunidad de experimentar por su cuenta.

Me gustaría llamar su atención sobre el hecho de que inicialmente se acostumbrará a la regla principal: la parte del contenido a los ojos de los motores de búsqueda tiene más peso cuanto más alto esté en la estructura. Por tanto, a la hora de maquetar es necesario tener esto en cuenta, siguiendo esta regla:

Las barras laterales y el pie de página deben estar en código fuente inferior a la parte principal, que debe resaltarse con la etiqueta del artículo, indicando el contenido principal al motor de búsqueda. Además, utilizaremos etiquetas: encabezado, principal, artículo, aparte, pie de página, cuyo propósito es, en primer lugar, mostrar el significado semántico y las prioridades en la estructura. Por lo tanto, el diseño de nuestro diseño aún no caucho, después de agregar estas etiquetas, se verá así:

código HTML

Mostrar código

Diseño del marco del sitio web Plantilla de marco de encabezado Para el futuro sitio web

contenido

Barra lateral izquierda Barra lateral derecha Pie de página

Así es como se verá nuestra plantilla html, pero para visualizar nuestro diseño, necesitamos aplicar estilos CSS. Para hacer esto, incluimos nuestro archivo de estilo CSS en head, como se esperaba. Ahora podemos pasar a cada bloque.

Para ello, les asignamos clases e identificadores arriba, para no confundir un div con otro. Algunas etiquetas semánticas que tenemos en singular, esto no es relevante, ya que podemos referirnos a ellos por su nombre como una etiqueta, incluso sin una clase e identificación. Esto reducirá el tamaño del archivo de estilos y no afectará el resultado.

Entonces, con código html Oh, creo que todo está claro, este es solo un futuro marco sin rostro, y el diseño de goma se logra manipulando con clases css. El diseño adaptativo tiene las mismas raíces, es CSS. Le permiten hacer que el diseño sea animado y responda al tamaño de la pantalla. Es por eso, acciones adicionales Se producirá con un archivo de estilo CSS.

No cubriremos todas las entradas ya que es un estándar que se encuentra en todas las hojas de estilo. Nos centramos solo en el método que permite que las barras laterales permanezcan fijas, y al mismo tiempo la parte central se extiende desde el ancho mínimo al máximo, que estableceremos nosotros mismos, y estará en el rango de 240px - 1920px.

Ahora antes de comenzar la revisión. codigo css y (en el que no hay nada superfluo, dejé solo lo necesario para esta lección, además para visibilidad agregué un fondo para los bloques, y una altura mínima para que los bloques se puedan ver claramente), prestemos atención a algunos matices:

1) Si miras de cerca, el pie de página se encuentra fuera del contenedor principal. Esto no es accidental, ya que esta disposición permitirá presionar el pie de página hasta el fondo. Creo que mucha gente ha visto en los sitios web un pie de página que permanece en la parte inferior a cualquier escala. Y muchos querían saber cómo se hacía. Por lo tanto, explicaré el mecanismo a lo largo del camino, después de lo cual todo quedará claro.

2) Muchos, habiendo visto en el sitio un pie de página y un encabezado 100% extensibles y un centro de goma, ya lo consideran diseño adaptativo. Esto no es del todo cierto, la adaptabilidad es un concepto más amplio y de transformaciones más avanzadas, pero en esta lección esto no se considera. Sin embargo, el diseño de goma puede ser varios tipos, incluido el tipo anterior. Por eso, modernicemos inmediatamente nuestra plantilla para que al final el encabezado y pie de página estén siempre al 100%, pero al mismo tiempo parte visible el contenido que contenían era de 240px a 1920px y estaba centrado.
Este es el método que utilicé en este sitio.

3) Por lo tanto, necesitamos agregar algo más a nuestro diseño para implementar las ideas descritas en el segundo párrafo. Entonces, para que nuestro pie de página y encabezado estén siempre al 100% (normalmente estos bloques se rellenan con fondo, imágenes, etc.) y al mismo tiempo su relleno no sobrepase los 1920px, haremos lo siguiente:

1) Colóquelo encima del contenedor envolvente, justo en frente del cuerpo.
2) Creemos varios bloques con la misma clase, por ejemplo, normalmente lo llamo .maxw, así no me desviaré de mis reglas. Agreguémoslo al encabezado y pie de página y asignaremos esta clase a nuestra sección principal con la clase .section. También agregaremos una condición para versiones anteriores de IE, con una llamada a un conjunto de reglas si inicia sesión desde IE.< 9 (если такие пользователи еще есть), и специальный метатег meta name =" viewport " для корректного соотношения масштаба на устройствах типа планшет, смартфон, и тд (такие пользователи точно есть).
3) Para controlar el comportamiento de nuestros bloques en resoluciones de pantalla inferiores a 980 px, agregaremos reglas @media al final del archivo de estilo, en el que registraremos los cambios necesarios para ciertos bloques, en nuestro caso para las barras laterales. Obligémoslos, cuando la resolución de la pantalla sea inferior a 980 px, a moverse debajo de la parte del contenido y alinearse con el centro.
Como resultado, nuestro diseño html se verá así:

código html final

Mostrar código html

Diseño del marco del sitio web Plantilla de marco de encabezado Para el futuro sitio web

contenido

Barra lateral izquierda Barra lateral derecha Pie de página

Nuestro archivo de estilo se verá así:

codigo css

Mostrar código CSS

* ( margen: 0; relleno: 0; ) html ( altura: 100%; ) encabezado, navegación, sección, principal, artículo, aparte, pie de página ( pantalla: bloque; ) cuerpo ( altura: 100%; ancho: 100%; fondo: #fefefe; ) .maxw ( margen: 0 auto; ancho mínimo: 240px; ancho máximo: 1920px; ) encabezado (ancho mínimo: 240px; ancho: 100%; alto: 220px; fondo: #74C9FF; ) #wrapper ( posición: relativa; margen: 0 auto; altura: auto !importante; altura: 100%; /*min-height: 100%; - Es necesario presionar el pie de página hasta el final */ padding: 5px 0; ) . sección ( ancho: 100%; relleno: 0 0 220px; posición: relativa; .sección:después ( contenido: ""; claro: ambos; pantalla: tabla; ) .mainwrap (ancho: 100%; flotador: izquierda; desbordamiento: oculto;) principal (relleno: 0 240px 0 240px; altura mínima: 350px; margen: 0;) artículo (relleno: 0 5px; margen: 0 5px; fondo: #EAF2F5; altura mínima: 350px;) #s_left ( flotante: izquierda; ancho: 240px; izquierda: 0; posición: fondo relativo: #E88139;

ancho: 240px; margen izquierdo: -240px; derecha: 0;

1) Movemos el encabezado hacia afuera, ya que en la primera versión estaba dentro del contenedor envolvente. Y el contenedor envolvente, a su vez, tenía un máximo de 1920px, como se dijo al principio. Esto no permitiría hacer que el encabezado tenga un ancho del 100%; descansaría en el nivel principal de 1920 píxeles. Por lo tanto, eliminamos el ancho máximo del envolvente y lo movimos fuera de él, además creamos un class.maxw, al que le asignamos este máximo de 1920px y alineación central. Ahora sabemos que cualquier bloque con clase .maxw tendrá 1920px. Por lo tanto, dentro del encabezado y pie de página colocamos un contenedor div con esta clase, de modo que todo lo que contiene se extenderá desde 240 px hasta 1920 px, y estará centrado si la resolución es superior a 1920 px. Esto se puede ver cambiando la resolución con una escala, por ejemplo, con el control deslizante en Opera.

2) Pie de página presionado hasta el fondo. Esta también es una característica importante del diseño. El secreto aquí es este:
El pie de página en sí está ubicado fuera del contenedor envolvente, que, a su vez, tiene el 100% de la altura. También la sección, que se ubica dentro del envolvente, pero envuelve las barras laterales y la parte central, da una sangría desde abajo hasta la altura del pie de página con usando relleno. Esto crea un espacio vacío en la parte inferior debajo del contenido. Dado que la altura es del 100% y el pie de página está fuera del bloque, se desplaza fuera de la vista una distancia igual a su altura. Al crear un relleno en la parte inferior usando padding:0 0 100px estamos preparando espacio para que el pie de página se mueva a una altura con un valor negativo. Esto sangrará la parte superior en orden inverso, lo que significa que se moverá hasta su altura. Como resultado, tenemos un margen inferior de 100 px, el pie de página se mueve 100 px debajo de la pantalla y esta es una posición constante. Cuando le damos al pie de página el comando margin:-100px auto 0 , lo elevamos desde debajo de la parte inferior de la pantalla hacia la cavidad creada. Como resultado, tenemos un pie de página presionado en la parte inferior de la pantalla.

3) El diseño fluido es de interés para muchos, por lo que nuestra lección está dedicada al diseño del sitio, o más precisamente, al diseño del marco del sitio, que debe tener dos barras laterales de ancho fijo, en nuestro caso es 240px, pero al mismo tiempo, en cualquier pantalla de 240 px a 1920 px, nuestro marco debe estirarse arbitrariamente a lo ancho, y el diseño html debe comprender que solo necesitamos estirar la parte central, ¡no toques la barra lateral!

Bueno, debe ser así. El diseño está listo. ¿Solo tenemos que descubrir por qué se comporta de esta manera?
Todo está claro con el contenedor envolvente, pero ¿cómo mantiene el diseño HTML las barras laterales mientras estira la parte del contenido?

Aquí no todo es tan complicado como podría parecer a primera vista. diseño CSS estilos, esto también es un diseño, lo que significa que está sujeto a ciertas reglas para el diseño de los estilos del sitio.
Papel importante Esto juega con la sangría izquierda y derecha que especificamos para la etiqueta del artículo. Si miras el código html, veremos que hay un contenedor con id=container que tiene 100% de ancho. En su interior se encuentra nuestro artículo, que tiene relleno izquierda y derecha, relleno: 10px 270px. Pero el ancho no está especificado, y teniendo en cuenta que tiene display: block (lo especificamos para elementos html5 para que dejen de estar en línea), será el ancho completo, y sin tener un ancho explícito. , la sangría estará dentro del contenedor y no detrás de él. Gracias a esta combinación tenemos id=container, dentro del cual hay un artículo con sangrías izquierda y derecha de 270px. Tenemos barras laterales de 240 px y 20 px para sangrías del artículo central.

Ahora recuerda lo que escribí arriba sobre el pie de página prensado. Y si lo olvidó: regrese y vuelva a leerlo, el diseño de goma no es un crucigrama, no es necesario que lo adivine, el diseño html requiere precisión y cuidado. Entonces, el diseño de goma utiliza el mismo principio que el pie de página presionado hasta la parte inferior, solo que había un desplazamiento vertical y aquí había un desplazamiento horizontal.

Se cierra delante de los lados izquierdo y derecho, por lo que quedan debajo del principal, que ya ha hecho sangrías de 240 px a la izquierda y a la derecha, es decir, como en el caso del pie de página presionado hacia abajo, tenemos un espacio vacío de 240 px. a la izquierda y a la derecha, y las barras laterales están inmediatamente debajo de la barra lateral izquierda, ambas. Simplemente les gusta que la regla predeterminada sea la izquierda. esquina superior. Teniendo en cuenta lo que está encima de ellos, el lugar de la izquierda debajo seguirá las reglas. Este diseño es muy astuto y el diseño de goma es aún más astuto. Pero existe una cura para esto y la estamos discutiendo. Por lo tanto, para nosotros es sólo diseño.

El toque final es colocar correctamente nuestras barras laterales para que entiendan que somos conscientes de cuál es el diseño del sitio web y se colocan donde nosotros decimos. Para hacer esto, puedes conectar la lógica. Si el bloque no se ajusta al ancho, se desplaza hacia abajo. Y si son apoyados números negativos en el posicionamiento, lo que significa que podemos hacer que el efecto funcione a la inversa.

Izquierda el bloque viene el primero, así que démosle un margen negativo por margin-left:-100% , y se burlará de sí mismo apareciendo exactamente en el espacio vacío que nos ha preparado el artículo. El diseño es bueno, el diseño de goma es aún mejor y el diseño terminado es aún mejor, especialmente después de largas batallas. Por lo tanto, un golpe de control a nuestro oponente llamado diseño de goma es un desplazamiento de la barra lateral derecha hacia la izquierda en su propio ancho. ¿Por qué se fue?
Sí, porque estaba a la derecha, no encajaba en 240px y se desplazó hacia la esquina izquierda, todo está de acuerdo con las reglas, HTML no tiene la culpa aquí, pero CSS también tiene carácter. Por lo tanto, margin-left:-240px resolverá el problema restante moviendo el bloque derecho exactamente al espacio vacío preparado a la derecha del lado.

Bueno, hemos examinado y resuelto todos los lugares oscuros en el diseño de goma del diseño. Verificamos todo usando el ejemplo, se adjuntan las fuentes. El diseño es algo que requiere habilidades constantes, ya sea de goma o fijo. El diseño adaptativo es un tema aparte. Quizás en la próxima lección no hagamos un marco desde cero, ya lo tenemos. Sería mejor si añadimos adaptabilidad a la existente, jugamos con la fuente, cambiamos el fondo, las imágenes en función de la resolución de la pantalla y, en general, analizamos en detalle los matices del diseño, o más bien del diseño adaptativo. Y no olvides comprobar validez html Una vez diseñado el sitio, definitivamente no empeorará.

A continuación se muestra el código fuente con el diseño terminado, que se puede descargar. Si desea cambiar algo, como la cantidad de barras laterales o su ID, la altura del encabezado o pie de página y otros cambios, simplemente puede usar la herramienta gratuita generador en línea disposición del marco. Puede crear un marco con un diseño fijo u obtener un diseño flexible + condiciones prescritas para el diseño adaptable.
Todo esto se puede hacer en nuestro generador de plantillas.

Diseño de goma

• Tema: HTML y CSS
• Duración del vídeo: 00:22:38
• Dificultad: media
• Programas de aplicación: Dreamweaver CS4

En esta lección analizaremos a fondo todo trampas parecería concepto simple, como el ancho del elemento. Entendamos en qué consiste y qué representa realmente. También consideraremos el trabajo. propiedades flotantes. Veamos un ejemplo de por qué los elementos flotantes se mueven a nueva linea, y resolveremos este problema. Consideremos y resolvamos el problema del colapso de los límites de los bloques.

Técnica 2: crear un menú de goma usando listas

• Tema: HTML y CSS
• Duración del vídeo: 00:16:13
• Dificultad: media
• Aplicaciones: Dreamweaver CS4

La navegación es quizás la parte más importante del sitio. Y un sitio de caucho, por regla general, también tiene navegación de caucho. Crear menú de goma Usar tablas no será difícil. Pero cuando se trata de crear un menú de este tipo mediante listas, surgen muchas preguntas. En este tutorial crearemos un menú elástico usando listas. Veamos la teoría detrás de la creación de dicho menú. Identificaremos y solucionaremos posibles problemas.

Técnica 3. Ordenar elementos por posicionamiento

• Tema: HTML y CSS
• Duración del vídeo: 00:23:39
• Dificultad: media
• Aplicaciones: Dreamweaver CS4

A menudo surgen situaciones en las que es necesario superponer elementos. O forzar que el elemento se ubique, por ejemplo, en la esquina inferior derecha, independientemente de cómo estén ubicados los bloques circundantes. este problema mejores resuelve propiedad de posición. En este tutorial veremos los elementos de posicionamiento. Trabajemos en elementos superpuestos usando propiedades del índice z. averigüemos condición necesaria para que funcione la propiedad del índice z.

Técnica 4: centrar un elemento de ancho variable

• Tema: HTML y CSS
• Duración del vídeo: 00:11:45
• Dificultad: media
• Aplicaciones: Dreamweaver CS4

Durante el diseño modelos de goma, a menudo surge una situación en la que es necesario centrar un elemento. Cuando se conoce la anchura del elemento a centrar no surgen problemas. La cosa se complica más cuando se desconoce o puede variar el ancho del bloque que hay que centrar. En esta lección veremos un ejemplo de cómo centrar un bloque de ancho variable, usando el ejemplo de creación de navegación de página.

Técnica 5. Alinear los bloques al ancho del bloque de goma.

• Tema: HTML y CSS
• Duración del vídeo: 00:16:00
• Dificultad: media
• Aplicaciones: Dreamweaver CS4

A veces surge una tarea cuando es necesario colocar varios bloques en todo el ancho del bloque principal. Es decir, el primer bloque debe estar en el borde izquierdo, último bloque debe estar en el borde derecho. Y las distancias entre los demás elementos deben ser las mismas. Esto es fácil de lograr cuando se diseña un diseño de ancho fijo. Pero complicaremos el problema y lo resolveremos en una lección sobre un bloque de goma.

programa educativo

Diseño de goma Se denomina diseño en el que el sitio se escala según el ancho del navegador.

En nuestra opinión, el diseño de caucho de alta calidad es un signo de la habilidad del diseñador y maquetador. Al desarrollar y mantener un sitio web lánguido, los diseñadores, tecnólogos y editores enfrentan muchos desafíos. En primer lugar, las imágenes y el texto deben comportarse adecuadamente y seguir siendo legibles en cualquier resolución. En segundo lugar, no debe haber agujeros en el diseño.

Ventaja principal El diseño de goma es que el propio usuario decide en qué forma ver el sitio. Tiene en sus manos una herramienta con la que puede ajustar el ancho máximo de los sitios que le convenga: un navegador cuyo tamaño siempre se puede cambiar.

El problema más común con los diseños de goma es que son difíciles de leer. bloques de texto, se estiró demasiado en resoluciones altas. Jakob Nielsen, en su libro Diseño web, describe detalladamente este problema y sus causas: los estudios han demostrado que a los usuarios les resulta difícil leer textos en los que la vista no recorre toda la línea. hecho conocido que los periódicos limiten el ancho de una columna de texto. Por supuesto, vale la pena hacerlo en Internet.

Hay dos razones por las que no quieren fabricar “caucho”: estéticas y tecnológicas.

Respuesta a los estetas

La “desventaja” estética es que algunos desarrolladores consideran que un diseño fijo es más estable y, por lo tanto, parece “nativo” y “acogedor” para el usuario. Pero la “percepción emocional” de un sitio no es en lo que deberían centrarse los desarrolladores de interfaces; a menudo es muy subjetiva;

Luchamos contra los miedos de los tecnólogos

La razón tecnológica se reduce a un conjunto de miedos.

¿Qué hacer con los vacíos emergentes?

Hay bastantes sitios de caucho bien diseñados donde se resuelve este problema. La publicación en línea “Vremya-n” amplía las imágenes a altas resoluciones. Google Imágenes utiliza bloques que saltan de una línea a otra en diferentes anchos del navegador.

¿Qué hacer con bloques de texto anchos?

Puede utilizar una estructura de varias columnas. En este caso, los bloques, mientras se estiran, siguen siendo legibles. Este método se implementa en Lenta.ru. Pero incluso en un sitio web normal de tres columnas se puede lograr la legibilidad del texto.

La mayoría de los sitios de caucho que recordamos se construyeron a principios de la década de 2000, cuando no había tantas oportunidades como ahora. Los sitios web de esa época estaban “pegados” a los bordes de la pantalla y se extendían únicamente a través de la columna central. Al mismo tiempo, el texto, por supuesto, estaba terriblemente extendido.

Diagrama del sitio con columnas centrales extensibles y laterales fijos.
A resoluciones más altas, la columna central se estira desproporcionadamente.

Una opción más eficaz sería estirar, si es posible, todas las columnas y, lo más importante, los márgenes entre ellas y hasta los bordes del navegador. En pocas palabras, las columnas y las distancias entre ellas deberían cambiar de tamaño proporcionalmente. En este caso, el sitio se verá bien incluso con resoluciones más altas.

Diagrama de sitio con columnas que se estiran proporcionalmente y distancias entre ellas.
Con este esquema, la columna central es notablemente más estrecha que en la versión anterior.

¿Qué hacer con las imágenes?

Muchos sitios creados con gráficos se reparan, pero en vano. Por ejemplo, el sitio web Drive.ru, a pesar de que su encabezado consta únicamente de imágenes, se siente muy bien en cualquier resolución. Y Autorambler, cuya esencia es mostrar una imagen cruciana, simplemente la estira hasta ocupar toda la pantalla. Navegadores modernos Pueden comprimir y estirar imágenes de manera bastante eficiente.

Si el diseño incluye un hermoso encabezado gráfico de ancho completo, esto tampoco es un obstáculo para hacer un diseño de goma. Basta con pedirle al diseñador que dibuje un encabezado de 2000 píxeles de ancho. El diseño recortará la imagen en resoluciones bajas y en foto grande será casi completamente visible.

Diagrama del sitio con encabezado gráfico recortado.

Excepciones a las reglas.

A la mayoría de los sitios no les importará ser gomosos. Pero, aún así, hay opciones en las que no se necesita "goma". Por ejemplo, no se pueden arrastrar tablas de datos: las columnas anchas son difíciles de leer. Y si todo el sitio consta de tablas de este tipo, entonces tiene sentido arreglarlo.

En algunos casos, es posible llegar a un acuerdo cuando el sitio sólo se extiende hasta ciertos tamaños. Por ejemplo, en blogs donde mayoría El contenido de la página es una publicación o en sitios de noticias (Lenta.ru).

Cualquier problema con el diseño del caucho que se haya discutido alguna vez tiene solución. Hemos tocado este tema de forma superficial, pero consideramos que nuestro objetivo es crear un producto que sea lo más fácil de usar posible. Y el diseño de caucho es una de las herramientas que no queremos tener miedo de utilizar.

Querido lector, ponte cómodo y te presentaré los principios del caucho. diseño de bloque sitio.

El modelo fijo que consideramos anteriormente se convierte en uno de goma simplemente reemplazando el ancho de píxel del bloque. por porcentaje. Por lo tanto, el ancho del diseño del sitio cambiará según el tamaño de la ventana del navegador.

En el video tutorial configuro el ancho del bloque. 100% del ancho de la ventana del navegador. Puede establecer un porcentaje menor, entonces el sitio ocupará solo una parte de la ventana del navegador.

Sin ciertos estilos de alineación de bloques, el sitio colapsará lado izquierdo ventanas. Y esto, en mi opinión, es feo. Me gustaría alinear el sitio en el medio. Entonces la pregunta es: "¿cómo hacer esto?" Y aquí está la respuesta.

Alinear bloques en el medio en caso de diseño fluido en divs

Lo primero que me viene a la mente es indicar en el elemento cuerpo propiedad alineación de texto: centro. Parecería que todo, incluido el texto de la página, debería estar centrado. Y sólo entonces, para el elemento envoltura cambiar el centrado a la alineación izquierda (alineación de texto: izquierda). Pero este es el enfoque equivocado (aunque todo funcionará en IE). EN navegadores normales propiedad alineación de texto establece la alineación solo para el texto dentro del bloque al que se aplica esta propiedad.

Sería correcto indicar iguales izquierda y derecha. márgenes para elemento y su significado - auto. Si los márgenes izquierdo y derecho son iguales, entonces el elemento está alineado en el medio.

Instrucciones CSS para el bloque. envoltura se verá así:

Margen izquierdo: automático; margen derecho: automático;

O en forma abreviada:

Margen: 0 automático;

Este es el principio que se debe seguir cuando es necesario alinear el bloque con el centro del padre.

Nota para el propietario: un bloque formado por una etiqueta , de forma predeterminada se extiende a todo el ancho del padre (a pesar del ancho del contenido dentro de ese bloque). Por lo tanto, los principiantes a menudo experimentan shock cuando no se produce la alineación. Comienzan a rascarse la cabeza frenéticamente y tratan de entender por qué la respuesta correcta margen no dio el resultado deseado.

Naturalmente, no lograrás ninguna alineación, porque... los bordes del bloque centrado lindaban con los bordes del padre. Ancho del contenedor se vuelve igual al ancho del contenido solo si la propiedad se establece en este contenedor flotador: izquierda .

En caso de directiva flotador: izquierda ( o flotador:derecha) , De nuevo, no hay alineación usando el método descrito anteriormente no lo lograrás. Un bloque con esta directiva pegará su borde izquierdo (o derecho) al padre, y todos los demás bloques de flujo normal fluirán alrededor de él hacia la derecha (o izquierda).

Por lo tanto, limite el ancho del bloque por la propiedad. ancho(ya sea un ancho fijo en píxeles o porcentajes) y, para entender lo que está sucediendo en la página, rodea el bloque con un borde. Por ejemplo así:

Borde: 1px negro sólido;

En este caso, verá claramente los límites del bloque que se está escribiendo. Pero recuerde que en los navegadores normales el tamaño del borde se agregará al tamaño del bloque (el navegador IE es anormal, en el que el tamaño del borde no afecta el ancho del bloque). Esto puede hacer que el bloque delineado salte del espacio que ocuparía sin el contorno.

Ahora procede a ver el vídeo.

Lo que se discutirá en este video tutorial:

Usando el sitio http://csstemplater.com/ crearemos un marco de diseño HTML.

Echemos un vistazo más de cerca a las propiedades que restablecen la configuración predeterminada en el navegador. Estas propiedades reciben el apodo clandestino de "borrador". Le recomiendo encarecidamente que utilice el borrador en todos sus proyectos para no devanarse los sesos con la pregunta "¿por qué el diseño está distorsionado si todo está configurado correctamente en HTML y CSS?". En nuestro caso, el borrador tendrá un aspecto muy desarrollado.

Conozcamos tan interesantes. Propiedades CSS Cómo describir y modificador de pseudoclase :enfocar. Describir le permite establecer el contorno de un bloque sin cambiar su tamaño. Pseudoclase :enfocar le permite cambiar la apariencia de un elemento cuando recibe el foco de entrada. Es una pena, pero todas estas maravillosas propiedades son compatibles con el navegador IE solo a partir de la versión 8.

Analicemos en detalle una de las formas de presionar el pie de página en la parte inferior de la ventana del navegador.

Consideremos los principios para formar el contenido principal del sitio: configurar las barras laterales izquierda y derecha, configurar el área del contenido principal del sitio.

Vídeo del servicio RuTube:

La primera parte del vídeo de YouTube:

La segunda parte del vídeo de YouTube:

La tercera parte del vídeo de YouTube:

Si desea practicar, puede descargar la fuente del diseño desde Deposit Files (archivo *.zip de 3,5 KB).

Debido a los algoritmos de compresión del servicio RuTube, la calidad de la imagen se ve seriamente afectada. Si pequeños detalles son poco visibles, puede descargar el vídeo desde Deposit Files en mejor calidad (archivo *zip con archivo *wmv. Tamaño 53,9 MB).