Conceptos básicos del diseño html css. Estratificación en capas: ventajas, desventajas, ámbito de aplicación. ¿Qué es el diseño válido?
Vlad Merzhevich
El diseño de páginas web significará la creación de un código HTML que le permita colocar elementos de la página web (imágenes, texto, líneas, etc.) en los lugares correctos del documento y mostrarlos en la ventana del navegador de acuerdo con el diseño diseñado.
En este caso, conviene tener en cuenta las limitaciones inherentes a HTML y CSS, tener en cuenta las características de los navegadores y conocer las técnicas de diseño que den el resultado deseado. Para dejar claro qué se incluye en el diseño y por qué se considera una etapa bastante importante y compleja en la creación de un sitio web, veamos pequeño ejemplo
. Observemos de inmediato que el diseño es un proceso creativo y aquí no existen algoritmos claros, por lo que no debe seguir los consejos y recomendaciones presentados como dogmas, esta es solo una de las formas posibles. Primero, el diseñador prepara diseños de páginas web en editor gráfico (por ejemplo Adobe Illustrator, Adobe Photoshop
), los aprueba con el cliente y los transfiere al maquetador para la generación del código HTML. El maquetador recibe el trabajo en forma de un conjunto de dibujos, donde cada uno de ellos corresponde al trazado. pagina separada con tu propio diseño. Por ejemplo, ver pagina de inicio
mostrado en la Fig. 1. Ahora necesitas analizar el dibujo y decidir cómo convertirlo en una página web. Para mayor comodidad, la imagen está lógicamente dividida en bloques separados, que vienen con trabajo adicional
. Así, según la Fig. 1, se pueden distinguir dos grandes bloques: el encabezado de la página y el contenido principal. Consideremos primero el “sombrero” que se muestra en la Fig. 2. Según la idea del diseñador, el color y raya blanca
- en la parte superior debe ocupar todo el ancho de la página web y un conjunto de íconos con el título del sitio debe estar alineado en el centro de la ventana del navegador. La posición de las imágenes entre sí no debe cambiar y cada una de ellas es un enlace a una sección específica del sitio. Teniendo en cuenta estas características, son posibles las siguientes opciones.
- Haz un dibujo y aplícale una tarjeta de imagen. Corta la imagen en fragmentos y combínalos con usando una mesa
- , mientras que los fragmentos individuales servirán como enlaces.
Utilice el posicionamiento de elementos. Cada uno de los métodos anteriores, aunque conduce a el resultado deseado
Una vez que el primer bloque esté listo e implementado en HTML, puede continuar trabajando en siguiente bloque. El texto ahora aparece aquí, por lo que se genera un archivo de estilo en el que se ven afectados los siguientes factores:
- color de fondo de la página web;
- tipo de letra de la fuente principal, su tamaño y color;
- tamaño del texto módulos individuales(noticias, por ejemplo);
- color, tamaño y tipo de fuente de los títulos;
- parámetros lineas horizontales y marcos.
Aquí es donde las aventuras apenas comienzan, porque el diseñador preparó el diseño no solo de la página principal, sino también el diseño de otras secciones. Y en apariencia son algo diferentes del trabajo ya realizado (Fig. 3).
Ahora es necesario rehacer el "encabezado" y los parámetros de los nuevos elementos que han aparecido deben incluirse en el CSS. Y así con cada sección.
Mientras se trabaja en las plantillas y al finalizar, se realiza una verificación que debería responder a las siguientes preguntas:
- ¿Se muestran las páginas correctamente? navegadores populares?
- ¿Se mantiene la integridad de los datos al cambiar el tamaño de fuente en el navegador tanto hacia arriba como hacia abajo?
- ¿Puedo seguir trabajando con el sitio si desactivo la visualización de imágenes?
- ¿Cómo afecta significativamente la resolución del monitor a la apariencia de las páginas?
También hay que tener en cuenta que los artículos pueden tener diferentes extensiones y la página web debe mantener su apariencia independientemente de ello.
Si se encuentran errores, se realizan correcciones en las plantillas teniéndolos en cuenta, y así sucesivamente hasta reducir al mínimo el número de errores.
Un maquetador, por regla general, no crea todas las páginas web de un sitio, sino varios documentos estándar, que se denominan plantilla (o plantilla, para usar una expresión de la jerga). Después de lo cual se forman páginas en base a ellas o dinámicamente usando programa de servidor, o completando la plantilla con texto y guardándola en diferentes archivos.
Cualquier sitio web es un producto complejo en el sentido de que debe resolver simultáneamente muchos problemas, a veces contradictorios. Por lo tanto, el sitio debe ser estéticamente agradable y atractivo en términos de diseño, y contener información interesante y útil. Al mismo tiempo, los motores de búsqueda deben indexarlo fácilmente, cargarlo rápidamente y ser conveniente para el autor editarlo y ampliar sus capacidades. Pero eso no es todo. El sitio debe mostrarse sin errores evidentes. diferentes navegadores, ajustar al tamaño de la ventana y demoler pacientemente
Por supuesto, de lo anterior, el diseño y los materiales del sitio están fuera del alcance de las actividades del maquetador, pero todo lo demás, de una forma u otra, está sujeto a él. Aunque el trabajo del maquetador no es visible, ya que está oculto en el código del documento, donde no todos miran, es precisamente este trabajo el que garantiza que las páginas web se muestren correctamente y se carguen rápidamente.
El arte tipográfico o simplemente la tipografía es otro ámbito que también se relaciona con el tema de la maquetación. Se trata precisamente de un arte que combina las características del diseño y la maquetación, y se basa en el conocimiento de las fuentes, la experiencia en su uso, la psicología de la percepción, el sentido del estilo, etc. De hecho, ¿qué fuente es mejor elegir para que el texto sea fácil de leer, fácil de entender al cambiar el tamaño de las letras y hacer que el sitio sea único? Al preparar materiales de impresión, la respuesta a esta pregunta se asigna al diseñador, pero al crear sitios web, el diseñador y el maquetador, por regla general, la resuelven juntos.
Esto se debe a las limitaciones inherentes de HTML en términos de trabajar con fuentes. Por ejemplo, sólo puedes utilizar unos pocos auriculares universales que están disponibles en todos plataformas informáticas . Por supuesto, puedes especificar cualquier fuente , instalado en su Sistema operativo y se mostrará correctamente en esta computadora . Pero nadie garantiza que esté exactamente la misma fuente computadora remota
usuario. CSS extendido Capacidades HTML para trabajar con texto en una página web, pero siguen siendo inferiores a los programas desarrollados para diseñar materiales de impresión. Por eso tienes que saber atributos CSS
relacionados con el diseño del texto, las características de su aplicación, las limitaciones existentes y las formas de evitarlas. Y esta ya es una tarea de diseño.
Reanudar
Inicialmente, el diseñador prepara un diseño de los documentos principales del sitio en forma de dibujos y los envía para su diseño. Después de lo cual el maquetador analiza las imágenes y decide qué método de maquetación es el más adecuado en este caso, teniendo en cuenta el tiempo dedicado al trabajo y el resultado final. El resultado del trabajo del maquetador es un conjunto de plantillas que repiten los dibujos del diseñador, pero realizadas en forma de documentos HTML. Y también archivo de estilo , que especifica no solo los atributos necesarios para el diseño, sino también los parámetros del texto principal, títulos, subtítulos y otros. elementos de texto
. Esto le permite crear cualquier cantidad de páginas web utilizando plantillas uniformes, cuyo diseño y apariencia serán las mismas.
Última actualización: 24/04/2016 varios elementos, que puede tener una estructura compleja. Por lo tanto, al crear una página web, es necesario de la manera correcta coloque estos elementos y diseñelos para que se ubiquen en la página de la manera deseada. Es decir, surge la cuestión de crear un diseño de página y su diseño.
Hay varias maneras, estrategias y tipos de maquetación. Inicialmente, el diseño basado en tablas era común. Ya que las tablas permiten, si es necesario, dividir de forma muy fácil y sencilla todo el espacio de una página web en filas y columnas. Las filas y columnas son bastante fáciles de administrar y es sencillo colocar cualquier contenido en ellas. Esto es lo que determinó la popularidad del diseño de la mesa.
Sin embargo, el diseño tabular no crea las páginas más flexibles en diseño, lo cual es un aspecto particularmente relevante en un mundo donde no existe una resolución de pantalla única, es decir pantallas grandes en televisores, pantallas pequeñas en tablets y phablets, pantallas muy pequeñas en smartphones, etc. El diseño de la mesa no podía satisfacer toda esta variedad de pantallas. Por lo tanto, fue reemplazado gradualmente por el diseño de bloques. Diseño de bloques es un nombre relativamente convencional para métodos y técnicas de diseño, cuando la mayoría de las páginas web utilizan CSS- propiedad flotante, y el principal elemento de construcción de las páginas web es el elemento
Anteriormente, en uno de los temas anteriores, se discutió el efecto de la propiedad flotante. Ahora usémoslo para crear una página web de dos columnas. Digamos que tenemos un encabezado y pie de página estándar en la parte superior e inferior, y dos columnas en el centro: una columna con un menú o barra lateral y una columna con el contenido principal.
Primero, definamos todos los bloques. Cuando se trabaja con elementos que utilizan float y la propiedad float, su orden es importante. Por lo tanto, el código para un elemento flotante que tiene su propiedad flotante establecida debe ir antes del elemento que envuelve el elemento flotante. Es decir, el bloque de la barra lateral irá antes del bloque de contenido principal:
Es decir, hasta ahora el resultado es aproximadamente la siguiente página:
Altura, borde y relleno de bloques en en este caso añadido sólo por belleza, para identificar el espacio del bloque y separarlo de los demás.
A continuación, para mover el bloque de la barra lateral a la izquierda del bloque de contenido principal y obtener un efecto envolvente, debemos especificar la propiedad float: left del bloque de la barra lateral y el ancho preferido. El ancho puede ser fijo, por ejemplo 150 px u 8 em. O también puedes usar porcentajes, por ejemplo 30% - 30% del ancho del contenedor de la carrocería. Por un lado, bloques con ancho fijo Es más fácil de administrar, pero por otro lado, los anchos porcentuales le permiten crear bloques elásticos más flexibles que cambian de tamaño a medida que cambia el tamaño de la ventana del navegador.
El último paso es establecer la sangría del bloque con el contenido principal del bloque de la barra lateral. Dado que cuando fluye, un bloque que fluye puede fluir alrededor de un elemento flotante tanto desde la derecha como desde abajo, si el elemento flotante tiene una altura menor, entonces debemos establecer el desplazamiento al menos igual al ancho del elemento flotante. Por ejemplo, si el ancho de la barra lateral es de 150 px, entonces el bloque de contenido principal se puede configurar en 170 px, lo que creará un espacio vacío entre los dos bloques.
Sin embargo, no debes especificar explícitamente el ancho del bloque de contenido principal, ya que los navegadores lo expanden automáticamente para que ocupe todo el espacio disponible.
Entonces, teniendo en cuenta todo lo anterior, cambiemos los estilos de la barra lateral y los bloques de contenido principal de la siguiente manera:
#sidebar( color de fondo: #ddd; float: izquierda; ancho: 150px; ) #main( color de fondo: #eee; alto: 200px; margen izquierdo: 170px; /* 150px (ancho de la barra lateral) + 10px + 10px (2 guiones) */ )
Como resultado, tendremos una barra lateral de lado izquierdo desde el bloque principal:
La altura de los bloques en este caso se indica de forma condicional para mayor claridad; en realidad, como regla general, la altura la establecerá automáticamente el navegador.
Crear una barra lateral derecha será similar, solo que ahora necesitamos configurar la barra lateral para que flote: derecha y el bloque de contenido principal con el relleno derecho:
#sidebar(color de fondo: #ddd; float: derecha; ancho: 150px; ) #main(color de fondo: #eee; alto: 200px; margen derecho: 170px; )
Al mismo tiempo marcado html sigue siendo el mismo, el bloque de la barra lateral aún debe preceder al bloque de contenido principal.
Originalmente, HTML estaba pensado para ser un lenguaje que no requiriera ninguna característica de diseño como color, tamaño, bordes ni nada por el estilo. Desarrollado en el Instituto Europeo de Física de Partículas (CERN), el HTML era un juguete de los científicos; estaban interesados principalmente en la lógica de la información, no en ella. representación visual. En aquella época, el concepto de diseño web y maquetación como tal aún no existía; todos los sitios eran casi idénticos en diseño, en el estilo que ahora se llama “diseño académico”. Todavía se puede ver un ejemplo en lib.ru.
Sin embargo, los usuarios predominantemente pensaban de manera diferente y, mirando hermosa foto, le dio preferencia a ella. Los desarrolladores del navegador Netscape lo entendieron perfectamente y lo introdujeron en HTML nuevo etiquetas que mejoran apariencia documento. Estas etiquetas no estaban estandarizadas y solo funcionaban en Netscape, lo que no importaba en la era del dominio generalizado de este navegador. La cuota de Netscape representa más del 90% de todos los navegadores existentes.
La influencia de Netscape resultó ser desastrosa para el diseño académico, enterrándolo efectivamente, y resultó beneficiosa para el desarrollo del diseño web. Los desarrolladores de sitios web se dieron cuenta de que el diseño no es sólo texto colorido e imágenes insertadas al azar. Esta es una oportunidad para presentar el material de manera colorida y efectiva, para darle un cierto ambiente al sitio, para interesar al visitante y mantenerlo en el recurso. El diseño se convirtió en la etapa inmediata del desarrollo de un sitio web, seguido del diseño. Los diseños dibujados en Photoshop tuvieron que convertirse de una sola imagen en un conjunto de imágenes, estilos y archivos HTML que pudieran cargarse rápidamente a través de la red, manteniendo al mismo tiempo las características del diseño.
La era de Netscape continuó hasta que Microsoft capturó parte del mercado de navegadores con su navegador. Explorador de Internet, que en última instancia sólo trajo dolores de cabeza a los desarrolladores de sitios web. Diferentes enfoques Netscape e Internet Explorer para la visualización del sitio, soporte inconsistente para estilos y etiquetas, gran número errores menores provocaron que el sitio tuviera que ser probado y depurado por mucho tiempo.
Las versiones obsoletas de los navegadores no eran totalmente compatibles con CSS (hojas de estilo en cascada, mesas en cascada estilos), por lo que el código era un hash de HTML y CSS. Esto llevó al uso de tablas con frontera invisible, que se han convertido en un estándar de facto desde hace mucho tiempo.
La siguiente etapa en el desarrollo de sitios web fue el nacimiento de una especificación llamada Hojas de estilo en cascada Nivel 2, abreviada CSS2. Luego vino la actualización Cascading Style Sheets Level 2 Revision 1 (CSS 2.1), que todavía está en uso en la actualidad. El lanzamiento de nuevas versiones de navegadores que soportan, aunque no completamente, esta especificación, ha facilitado enormemente el trabajo en los sitios web. Como resultado, comenzó a producirse una transición gradual del diseño tabular al diseño de bloques o, como también se le llama, diseño en capas, en el que la disposición de los elementos en la página y su apariencia se especifican mediante estilos.
En la actualidad ya se puede afirmar que disposición de la mesa en su mayor parte es arcaico. Sin embargo, todavía hay muchos sitios como yandex.ru, artlebedev.ru y otros, creados con ayuda de tablas. Este conservadurismo está asociado con las siguientes circunstancias.
- El diseño con capas es más difícil que con tablas, ya que requiere que el desarrollador tenga un conocimiento profundo de la especificación CSS.
- Los navegadores contienen varios errores al interpretar propiedades de estilo, por lo que debes conocer el comportamiento de los principales navegadores, sus errores y poder sortearlos.
- Casi todos los problemas se pueden resolver de varias maneras; el desarrollador debe elegir la óptima, es decir menos costoso en términos de tiempo y esfuerzo. Para evaluar la optimización es necesario experiencia practica, con el fin de tener en stock diferentes métodos utilizados en situaciones específicas.
Por lo tanto, el diseño en un sentido simple es el proceso de convertir el trabajo de un diseñador en una página web que se muestra en un navegador. Pero puedes obtener el mismo resultado. diferentes metodos y depende del maquetador cuál preferir. El resultado del sitio, la velocidad de su visualización, la accesibilidad para diferentes dispositivos y navegadores.
Recuerda que el diseño es una disciplina práctica y solo debes decidirlo tú mismo. diferentes tareas y trabajando en proyectos, puedes dominar este arte.
Anteriormente, se distribuía ampliamente en Internet. tipo tabular diseño, al que está dedicado. Sin embargo, con el tiempo, este enfoque para crear la estructura de un sitio web quedó obsoleto y fue reemplazado por el diseño de bloques.
Diferencias entre diseño de bloques y diseño tabular
Si el diseño de la tabla implica que el contenido de la página está dentro de la etiqueta Diseño de bloque carece de las desventajas de la mesa - motores de búsqueda está mejor indexado, su código no es tan extenso y los bloques La única desventaja notable del diseño de bloques es que los sitios creados en él pueden mostrarse de manera diferente en los navegadores. Para evitar esto, es necesario hacer que el diseño sea "multi-navegador", es decir, que se muestre por igual en cualquier navegador. El diseño de un sitio web se crea en un editor gráfico: se marca dónde se ubicará qué área de la página (encabezado, parte inferior, barra lateral, contenido principal) y cuánto espacio ocupará, se preparan imágenes y fondos. Cada parte de la página se coloca en su propio bloque. El documento HTML final es una colección de bloques.
, entonces el concepto de diseño de bloques se basa en el uso activo etiquetas universales
es una tabla que debe usarse para mostrar datos tabulares y nada más.
La esencia del diseño de bloques.