Red de conocimiento informático - Conocimientos de programación - Cómo maquetar el diseño del sitio web Cómo maquetar el diseño del sitio web

Cómo maquetar el diseño del sitio web Cómo maquetar el diseño del sitio web

Como todos sabemos, los métodos de diseño de páginas web varían mucho en cuanto al tamaño de la pantalla. Al considerar el diseño de una página web, las principales consideraciones son:

Al mismo tiempo, el diseño y la implementación del diseño de una página web deben considerar de manera integral:

Aunque el ancho, la altura y el aspecto de la pantalla la proporción varía ampliamente. La organización de las páginas web se basa principalmente en la adaptación del ancho y la extensión del alto.

Por supuesto, también hay algunas páginas web que necesitan ser altamente adaptables, como la reproducción en pantalla completa de sitios web de vídeos.

La discusión principal aquí es la adaptación del ancho. La alta adaptabilidad también se puede manejar de manera similar, por lo que no entraré en detalles aquí.

Hay tres diseños básicos: diseño estático, diseño perdido y diseño flexible.

Diseño estático

El diseño estático utiliza píxeles (px) como unidad de diseño de página. Bajo diferentes anchos de visualización, el tamaño de los elementos de la página es fijo.

Diseño fluido

El diseño fluido establece el ancho de la página como porcentaje. Cuando el área de visualización cambia, el diseño de la página cambiará proporcionalmente.

El diseño de flujo enfatiza la adaptación a los cambios en el ancho de la pantalla. En aplicaciones prácticas, a menudo se configura para adaptarse al ancho, mientras que la altura permanece sin cambios. A medida que la página se hace más grande, el diseño de la página se amplía horizontalmente.

Diseño flexible

El diseño flexible utiliza unidades relativas como rem/em, que son unidades relativas y cambiarán a medida que cambie la pantalla.

El diseño flexible enfatiza que, bajo diferentes condiciones, el contenido mostrado es consistente en el diseño, excepto por los diferentes tamaños. Es decir, el ancho y el alto del diseño flexible se ampliarán proporcionalmente. Cuando se amplía una página, se amplía toda la página.

Supongamos que hay dos tamaños de pantalla, uno de 640 px y el otro de 1080 px. Hay elementos con un tamaño de 64 px debajo de la página de 640 px.

Si es un diseño estático, en una pantalla de 640px, el elemento se establece en 64px. En una pantalla de 1080 px, sigue siendo 64 px. El tamaño de los elementos permanece sin cambios.

En el caso de un diseño fluido, los elementos de la página se establecerán en el 10% del ancho de la pantalla de 640 píxeles. En una pantalla de 1080px, el 10% de la longitud se convierte en 1080px*10%=108px. El tamaño del elemento aumenta con la pantalla.

Si se trata de un diseño flexible, suponiendo que 1rem=16px está configurado en una pantalla de 640px, entonces 64px es el tamaño de 4rem. En una pantalla de 1080 px, establezca 1rem = 27 px y el tamaño de 4 rem se convierte en 4 * 27 = 108 px. El tamaño del elemento también aumenta con la pantalla.

Diseño estático

El diseño estático no puede responder a los cambios de página, lo cual es tanto una ventaja como una desventaja.

La desventaja es que habrá áreas blancas vacías cuando la pantalla se haga más grande. Cuando la pantalla se vuelve más pequeña, debe utilizar las barras de desplazamiento para explorar el contenido de la página.

La ventaja es que las páginas estáticas se pueden mostrar según el diseño de la página bajo cualquier circunstancia, con mínimos problemas de adaptabilidad y mínima carga de trabajo.

De hecho, muchos sitios web grandes utilizan actualmente un diseño estático. Debido a su amplia adaptabilidad, casi no existen problemas de adaptabilidad. A cualquier usuario que abra una página bajo cualquier circunstancia se le mostrará la misma página.

Aunque hay muchos tipos de tamaños de pantalla, hasta cierto punto, el ancho de la pantalla generalmente se encuentra dentro de un rango. Al aplicar un diseño estático, conviene renunciar a la adaptación a algunas pantallas pequeñas con menor cuota de mercado.

Diseño fluido

El diseño fluido utiliza principalmente adaptación de ancho y altura fija. En otras palabras, esta vez la página se estira o se contrae horizontalmente.

La ventaja de esto es que la página puede adaptarse al ancho de la pantalla, aprovechando al máximo el área de la pantalla y evitando una gran cantidad de espacios en blanco.

La desventaja es que si la pantalla es demasiado ancha, la página se hará más ancha, haciendo que toda la página parezca descoordinada. Cuando la pantalla es demasiado estrecha, la página se reducirá a un tamaño muy pequeño y habrá problemas con la visualización de algunos elementos.

Para evitar este problema, en realidad deberíamos hacerlo. Normalmente, se establecen los anchos de montaje máximo y mínimo. Cuando la pantalla excede el ancho máximo y mínimo, la página ya no cabe en la pantalla.

Diseño flexible

El diseño flexible adopta el método de ampliar el ancho y el alto al mismo tiempo, y se esfuerza por tener el mismo diseño de página en diferentes pantallas.

El diseño flexible tiene en cuenta las ventajas del diseño estático y el diseño fluido.

Por un lado, puede adaptarse a los cambios en la pantalla y, por otro lado, no hará que la página se ensanche horizontalmente ni provocará proporciones descoordinadas, lo que garantiza que el diseño de la página sea coherente con el diseño original hasta cierto punto.

Sin embargo, esto también trae nuevos problemas. Al ampliar la página, algunos elementos se estirarán, especialmente los elementos de la imagen, lo que provocará distorsión.

Como resultado, los diseños flexibles tienden a funcionar de la misma manera que los diseños fluidos, estableciendo un tamaño de respuesta máximo y mínimo más allá del cual no seguirá respondiendo.

Al mismo tiempo, el problema de la distorsión de la imagen se puede resolver cargando imágenes de varios tamaños. Diferentes tamaños de pantalla corresponden a diferentes imágenes. Pero también implicará mucho trabajo de mantenimiento, que es necesario sopesar.

Debido a las características del diseño estático, el diseño estático se utiliza generalmente en las siguientes situaciones:

El diseño fluido es más adecuado para páginas con fuentes. En un diseño fluido, aunque el tamaño del texto no cambia, los párrafos de texto pueden cambiar el ancho cambiando los saltos de línea.

Si el tamaño de la pantalla no cambia mucho, considere utilizar un diseño flexible. Se puede ajustar sin cambiar el diseño de la página.

De hecho, algunas páginas utilizan varios diseños diferentes. Por ejemplo, utilice un diseño estático para la barra lateral y un diseño fluido para el área principal.

Como se mencionó anteriormente, el diseño fluido y el diseño flexible no son adecuados para pantallas con un tamaño demasiado grande. Por lo tanto, se utiliza básicamente un tamaño de ajuste máximo y mínimo limitado, y dentro del rango de ajuste, se utiliza un diseño fluido o un diseño elástico para el ajuste. Si excede el rango de adaptación, se convertirá en un diseño estático y ya no responderá a los cambios de la pantalla.

El diseño básico de varias páginas web discutidas anteriormente resuelve el problema de la adaptación de la página hasta cierto punto. Sin embargo, con el desarrollo de los terminales de visualización, han aparecido pantallas como tabletas y dispositivos móviles. La llegada de estos dispositivos ha aumentado la variedad de tamaños de pantalla. Sin embargo, varios diseños de páginas web discutidos anteriormente no admiten situaciones en las que el tamaño de la pantalla es demasiado grande.

Por el contrario, el diseño adaptativo y el diseño responsivo pueden resolver mejor el problema de la extensión excesiva de la pantalla.

Diseño adaptable

El diseño adaptable prepara múltiples soluciones para diferentes tamaños de pantalla y determina un conjunto de soluciones de visualización según diferentes tamaños de pantalla. Específico para cada plan, puede utilizar el diseño de página web básico anterior para realizar la adaptación. Puede verse como un conjunto de planos que consta de una serie de diseños básicos.

Generalmente, el diseño adaptativo diseñará varios esquemas de adaptación, como pantalla ancha, pantalla estrecha, terminal móvil, etc., y luego establecerá el rango de adaptación de la pantalla. Al visualizar, se seleccionará un grupo de soluciones para su visualización según el tamaño de la pantalla que coincida con el rango de adaptación.

Sin embargo, el diseño adaptativo normalmente no cambia la estructura de la página. Cuando se reduce la página, optará por reducir, reemplazar y ocultar algunos elementos horizontales de la página para lograr el propósito de adaptación. Existen algunos tratamientos comunes:

Diseño responsivo

El diseño responsivo consiste en configurar un conjunto de esquemas y ajustar la visualización de filas y columnas para adaptarlos. Cuando la pantalla es más grande, cada elemento se muestra en una fila, cuando la pantalla es más pequeña, cambia a mostrarse en columnas.

El diseño responsivo se adapta a la pantalla ya que requiere saltos de línea. Entonces, en el proceso de reducción de página, el diseño de la página cambiará. Cuando se reduce la página, la página se reducirá inicialmente en forma de diseño fluido o diseño flexible hasta que el ancho de la página ya no pueda caber, y los elementos mostrados horizontalmente se cambiarán a visualización vertical.

Diseño adaptable

El diseño adaptable requiere una serie de diseños de página. Por tanto, el diseño y la implementación requieren más tiempo.

Pero debido a que puede diseñar diferentes soluciones para diferentes pantallas, las soluciones son relativamente independientes. Tiene menos restricciones y más libertad.

Sin embargo, tenga en cuenta que la adaptación no es una combinación de varias soluciones completamente diferentes. En general, las partes principales son las mismas. Sólo algunos elementos horizontales se diseñan de forma independiente.

Diseño responsivo

El diseño responsivo solo requiere un diseño de página para completar la adaptación de la pantalla y su carga de trabajo de implementación es relativamente pequeña. Sin embargo, es necesario tener una solución que se adapte a todos los tamaños de pantalla. Por eso hay muchos factores a considerar al diseñar.

En términos generales, el diseño adaptativo es adecuado para páginas complejas y el diseño responsivo es adecuado para páginas con una estructura de página simple.

Porque existen enormes diferencias entre el terminal móvil y el terminal PC, incluido el tamaño de la pantalla y los métodos de funcionamiento. Otra solución es diseñar cada página individualmente.

La ventaja de esta solución es que cada terminal de visualización se puede diseñar libremente según sus propias condiciones, diseñando así una solución específica para cada terminal de visualización. Sin duda, esto aporta enormes beneficios a los diseñadores y a la experiencia del usuario.

Sin embargo, esta solución conlleva una doble carga de trabajo de diseño e implementación. Al mismo tiempo, una vez que el producto se pone en uso, se requieren dos grupos de personas para mantener su contenido.

Si tienes las siguientes situaciones, puedes plantearte utilizar un diseño que separe los terminales móvil y PC:

Escríbelo al final

No hay plano perfecto. Es la última palabra a elegir según tu propia situación.

Como diseñador, no olvide la carga de trabajo posterior del operador en materia de implementación técnica, pruebas y mantenimiento. Al mismo tiempo, no olvide la dificultad de las iteraciones posteriores del proyecto. En definitiva, elegir el adecuado es lo más importante.

Debes saber que todavía existen muchas aplicaciones para diseños estáticos aparentemente toscos. Nunca diseñes demasiado.

¿Cuáles son los métodos de diseño de páginas web?

1. Diseño estático

En el diseño web tradicional, el tamaño de todos los elementos de la página web es px.

1. Funciones de diseño

Independientemente del tamaño exacto del navegador, el diseño de la página es siempre el mismo que cuando se escribió el código por primera vez. Los sitios de PC normales están diseñados estáticamente con un ancho mínimo, por lo que si el ancho es menor que este valor, se muestran barras de desplazamiento; si el ancho es mayor que este valor, el contenido se centra y se muestra el fondo. Este diseño es muy común en las PC.

2. Método de diseño

PC: Diseño central, todos los estilos usan ancho/alto absoluto (px), diseñe un diseño donde se hayan ajustado el ancho y el alto de la pantalla, use barra de desplazamiento horizontal y vertical para comprobar la sección de cobertura Dispositivos móviles: cree un sitio web móvil independiente, diseñe un diseño independiente y utilice un nombre de dominio diferente, como wap. O m.

Ventajas: este diseño es el más simple tanto para diseñadores como para autores de CSS y no tiene problemas de compatibilidad.

Desventajas: Obviamente no se puede cambiar el tamaño de la pantalla del usuario. En la actualidad, la mayoría de los sitios web de portales y la mayoría de los sitios web corporativos de publicidad de PC adoptan este diseño. Las páginas web de tamaño de píxel fijo son la forma más sencilla de hacer coincidir una pantalla de tamaño de píxel fijo. Sin embargo, este enfoque no es una forma totalmente compatible de crear futuras páginas web. Necesitamos alguna forma de adaptarnos a dispositivos desconocidos.

2. Diseño fluido

La característica del diseño líquido (también llamado "fluido") es que el ancho de los elementos de la página se ajusta según la resolución de la pantalla, pero el diseño general permanece sin cambios. . Sistema de vallado representativo (sistema de rejilla). Por ejemplo, establezca el ancho del cuerpo de la página web principal en 80 y el ancho mínimo en 960 px. Las imágenes se tratan de manera similar (ancho: 100%, el ancho máximo generalmente se establece en el tamaño de la imagen misma para evitar la distorsión debido al estiramiento).

¿Tres formatos de diseño de red?

El diseño de la página web se puede dividir aproximadamente en tipo de marco izquierdo y derecho, tipo de marco superior e inferior, tipo de marco completo, tipo de texto de título, tipo de fuente "国", tipo de esquina, tipo de portada, tipo de cambio, y tipo de Flash.

¿Cuáles son los estilos de diseño comunes de las páginas web?

Cree un archivo index.htm y un archivo main.css en el escritorio. Por supuesto, no necesita el archivo main.css, pero para facilitar la operación, será mejor que cree uno. . Simplemente guarde el bloc de notas como. Después de completar estos dos archivos, escribimos el código básico de la página web y hacemos que el archivo de índice esté controlado por main.css. Hacemos clic derecho y seleccionamos abrir el archivo de índice con el Bloc de notas para ingresar el código y escribimos en el encabezado. hágalo controlado por main.css. control css 3 Luego vamos a main.css y escribimos algunas propiedades para ver si podemos controlar el archivo de índice. Quiero que toda la página sea rosa y luzca cálida. Escribiré *{fondo:#FF66FF} en main.css para echarle un vistazo. Abramos el archivo de índice y veamos si está rosado en el navegador. Es rosa en el navegador, lo que indica que está controlado por la hoja de estilos CSS.

¿Cuáles son las estructuras de diseño de las páginas web?

Primero, el diseño de página web con fuente "国": este diseño de página web es adecuado para su uso en algunos sitios web grandes. Es simple y elegante. Este diseño de página web también se usa con mayor frecuencia en sitios web grandes. Construcción de sitios web de Beijing.

En segundo lugar, el diseño de la página web de la esquina: es muy similar al diseño en forma china, pero hay cierta conciencia de la situación y el efecto de la aplicación es mejor.

En tercer lugar, diseño de página web con texto de título: este es uno de los tipos de diseño más simples en el desarrollo de sitios web en Beijing.

Además, las empresas productoras de sitios web suelen utilizar la estructura en "T", el tipo "tres" y el tipo de contraste simétrico.