Diseños típicos de páginas web. Diseños HTML. Diseño de pie de página
Esta subsección describe los diseños de sitios web populares que se utilizan con mayor frecuencia en el diseño, así como varias técnicas que les dan una apariencia más atractiva. Los diseños se crean utilizando , por lo que necesitará conocimientos de estos idiomas para comprender completamente el principio de diseño. Si los conoce, sabrá que en HTML y CSS se puede lograr el mismo resultado de formas completamente diferentes. Aquí sólo se muestran algunos de los métodos posibles.
Los diseños se dividen en tres tipos principales:
- Fijado- estos son diseños con ancho fijo(CSS) optimizado para adaptarse a la mayoría monitores modernos usuarios o con un ancho “flotante”, que tiene restricciones en el ancho de página máximo (CSS) y mínimo (CSS). Normalmente, el contenido en tales casos se encuentra en el centro, pero algunos webmasters prefieren presionar las páginas del sitio hacia un lado de la ventana del navegador.
- Goma- diseños que tienen redimensionable, adaptándose a la ventana del navegador y ocupando todo su ancho disponible. Sin embargo, al igual que los fijos, a menudo también se les asigna un máximo y/o ancho mínimo. Una opción para lograr este efecto sería enmarcar los bloques de página HTML en un bloque contenedor adicional (si aún no hay uno en el diseño), a la manera de diseños fijos, al que luego se aplican las propiedades de ajuste de ancho. Esto es necesario para que cuando se reduce la ventana del navegador, las columnas no se superpongan ni se deslicen hacia abajo.
- Con contenido por delante- ¿son de goma o diseños fijos, en el que la columna con el contenido principal de la página (contenido) aparece más arriba en el código HTML que la mayoría de los demás elementos. Esto se hace para que en los navegadores con CSS deshabilitado, los usuarios puedan ver primero lo que vinieron a buscar, y solo luego la navegación y otros elementos menores de la página HTML. Sin embargo, el diseño de dichos diseños es algo más difícil de implementar y requiere que el diseñador tenga un cierto nivel de habilidades y conocimientos necesarios para mostrar el sitio de manera idéntica en diferentes navegadores.
Además de las columnas, los diseños contienen parte superior(encabezado) y abajo (pie de página), ya que durante mucho tiempo han sido una parte familiar e integral de casi todos los sitios de Internet. Por lo mismo, aquí encontrarás ejemplos que permiten pie de página de prensa al final de la página y haga columnas de la misma altura.
Tenga en cuenta que en casi todos los diseños puede intercambiar algunas columnas sin cambiar el código HTML de las páginas. Por lo tanto, en primer lugar, basándose en estos diseños, puede crear algunas de sus propias opciones y, en segundo lugar, si resulta que ya
¿Dónde suele comenzar el proceso de diseño? Comienza estudiando el diseño o diseños del futuro sitio. La mayoría de las veces, estos diseños se crean en el programa. Adobe Photoshop Por lo tanto, usted, como diseñador de diseño, debe poder utilizar este programa, es decir, poder cortar imágenes del diseño, medir las sangrías entre elementos, calcular los tamaños y parámetros de varios componentes de la futura página web, etc. . Primero que nada, configuremos el espacio de trabajo en programa adobe Photoshop para facilitar su uso.
Todos los ejemplos se mostrarán en el programa. Adobe Photoshop CS5, con interfaz en inglés.
Cuando abras Adobe Photoshop, verás algo como esto:
- Barra de menú principal;
- Panel de opciones;
- Barra de herramientas;
- Paneles adicionales.
Necesitamos configurar un conjunto de paneles adicionales. Para comenzar, vaya al menú Ventana – Nuevo espacio de trabajo:
Introduzca un nombre para el nuevo espacio de trabajo, por ejemplo, mi espacio de trabajo y presione Ahorrar. Ahora necesitamos seleccionar los paneles necesarios para trabajar. Vaya a Ventana y marque las casillas junto a Historia, Información, capas, Navegador, Opciones, Herramientas. Puede desmarcar los paneles restantes si están marcados.
Ahora necesitamos asegurar estos paneles. Para hacer esto, haga clic en la parte superior del panel y arrástrelo a la ubicación deseada para que su espacio de trabajo termine luciendo así:
Cuando aparezca una franja azul transparente, suelte el cursor para acoplar el panel en esa ubicación:
Para cerrar pestañas innecesarias, haga clic en el icono de la derecha esquina superior pestañas y seleccione el elemento en el menú desplegable Cerca:
El primer diseño que crearemos se llama texto_simple.psd, se encuentra en la carpeta plantillas. Ábrelo en Adobe Photoshop manteniendo presionadas las teclas. Ctrl+O(o a través del menú Archivo – Abierto) y seleccione el archivo.
Enciende la regla usando teclas de acceso rápido Ctrl+R o a través del menú Vista – gobernantes:
Ahora haga doble clic en la regla y abra la pestaña Unidades y reglas para configurar las unidades de medida. Seleccionar en bloque Unidades Para gobernantes Y Tipo unidades de medida píxeles:
Ahora que todo está listo, puedes empezar a diseñar el diseño.
Crear una estructura de página web
Crea una carpeta en tu escritorio y dale un nombre texto sencillo. En esta carpeta crea dos archivos. índice.html Y estilo.css.
Como recordarás, creamos la estructura de la página web en lenguaje HTML. Entonces primero abrimos el archivo. índice.html y escribe el código original en él:
Ahora entre etiquetas
crear un bloque usando una etiqueta :
Etiqueta
Escribamos en este bloque los elementos que están presentes en el diseño, es decir, el título y los párrafos:
Agregue texto entre estas etiquetas usted mismo.
Ahora en un contenedor
escriba la ruta al archivo con estilos:
Diseñar una página web
si abres índice.html en el navegador, verá una página web escrita en HTML puro. Es muy diferente al que se muestra en el modelo. Arreglaremos esto con mesas en cascada estilos.
Abra su archivo style.css y restablezca todo el relleno usando el selector de asterisco universal:
* ( margen: 0; relleno: 0; )
Ahora escribamos las propiedades de la etiqueta.
:Cuerpo (color de fondo: #e35b5b; tamaño de fuente: 16px; altura de línea: 24px; color: blanco; familia de fuente: Arial;)
¿Cómo encontrar el color de fondo de una página web en Adobe Photoshop? Para ello, haga clic en uno de los dos cuadrados con un color:
Luego haga clic en el fondo del diseño con un cuentagotas y copie código hexadecimal, presentado en la ventana Selector de color :
¿Cómo puedo saber el tamaño, el interlineado, el estilo, la familia de fuentes y el color del texto? Para hacer esto, seleccione la capa con el texto, luego abra el panel Personaje. Este panel mostrará siguientes parámetros:
Tenga en cuenta que para el color del texto, en lugar de un código hexadecimal, escribimos el nombre del tono: color: blanco; . Es conveniente utilizar nombres de tonos para negro y blanco white , ya que el nombre es mucho más rápido de escribir que el código hexadecimal. Todos los nombres de los tonos de color se pueden encontrar en esta tabla.
Propiedades del bloque
Para este bloque, especificaremos el ancho, así como el relleno superior, izquierdo y derecho:
Para muchas propiedades verás valores escritos en los siguientes formatos:
- margen: valor1 valor2 valor3 valor4;
- margen: valor1 valor2 valor3;
- margen: valor1 valor2;
- margen: valor1;
En el primer caso especificamos valores para cada uno de los cuatro lados, por ejemplo, margen: 10px 12px 20px 15px; : 10px – relleno superior, 12px – relleno derecho, 20px – relleno inferior, 15px – relleno izquierdo. Esta notación se suele utilizar cuando las sangrías de cada lado son diferentes.
En el segundo caso se escriben tres valores, por ejemplo, margen: 10px 12px 20px; : 10px – relleno superior, 12px relleno derecho e izquierdo, 20px – relleno inferior. Esta notación es conveniente de usar cuando los valores de la derecha y de la izquierda son iguales, pero los valores de arriba y de abajo son diferentes. El valor automático se utiliza cuando desea que el navegador calcule automáticamente el relleno izquierdo y derecho.
En el tercer caso se utilizan dos valores, por ejemplo, margen: 10px 12px; : margen superior e inferior 10px, margen derecho e izquierdo 12px. Si las sangrías de arriba y de abajo son iguales, y las sangrías de derecha e izquierda son iguales entre sí, entonces es conveniente escribir solo dos valores, como en nuestro ejemplo.
En el cuarto caso se escribe un valor, por ejemplo, margen: 10px; : el relleno en cada lado es de 10px. Cuando los parámetros son iguales en todos los lados, es conveniente utilizar dicha notación.
¿Cómo medir el ancho o alto de un elemento en Adobe Photoshop? Consideremos una forma: tomar una herramienta Herramienta Marco rectangular ( tecla de acceso rápido METRO):
Luego seleccionamos el área, por ejemplo, necesitamos encontrar la sangría desde el borde superior del diseño hasta el comienzo del contenido, selecciónela:
en el panel Información mira los valores de altura h, o valor de ancho W. si necesitas saber el ancho de un elemento:
vamos al titulo
Aquí debemos especificar el tamaño, el interlineado, la sombra y el relleno inferior. Ya sabes cómo registrar las dos primeras propiedades.
Para especificar la sombra necesitamos la propiedad. sombra de texto:
- Aquí 0
– sangría a lo largo del eje X;
- 1px– desplazamiento a lo largo del eje Y;
- 0
– radio de desenfoque de sombras;
- rgba(0,0,0,0.3)– color de sombra. EN en este caso usamos formato RGBA, incluido un canal alfa que establece la transparencia del elemento. Entre paréntesis, los primeros tres valores responsables del color en el formato. rgb, A último valor responsable de la transparencia. Este valor se escribe en el rango de 0 a 1, donde 0 representa transparencia total y 1 representa opacidad.
¿Cómo descubrir los parámetros de sombra en Adobe Photoshop? Elegir capa deseada en el panel de capas y haga clic en el icono ƒx:
Se abre una ventana Estilo de capa
. Necesitas seleccionar una pestaña Sombra paralela:
Aquí está el parámetro Opacidad responsable de la transparencia, parámetro Distancia es responsable de la sangría a lo largo del eje Y, parámetro Tamaño es responsable del desenfoque, y el parámetro Ángulo es responsable del desplazamiento a lo largo del eje X Dado que nuestra sombra cae en ángulo recto, el desplazamiento a lo largo del eje X será cero. El color de la sombra se puede encontrar en el cuadro opuesto al parámetro. Modo de fusión:
Valor de color en formato RGB y con un canal alfa en este caso quedará así:
Sombra de texto: 0 1px 0 rgba(0,0,0,0.3);
Queda por escribir la sangría a continuación.
Si necesita escribir un valor para uno de los cuatro lados, utilice esta notación:
- margen superior– guión superior;
- margen derecho– sangría derecha;
- margen inferior– sangría inferior;
- margen izquierdo– sangría izquierda.
Como necesitamos especificar el margen inferior, escribiremos margin-bottom: 30px;
Como resultado, obtenemos este código en el archivo. estilo.css:
* ( margen: 0; relleno: 0; ) cuerpo ( color de fondo: #e35b5b; tamaño de fuente: 16 px; altura de línea: 24 px; color: blanco; familia de fuente: Arial; ) div ( ancho: 724 px; margen : 43px auto 0; ) h1 (tamaño de fuente: 60px; altura de línea: 62px; sombra de texto: 0 1px 0 rgba(0,0,0,0.3); margen inferior: 30px; )
Primer párrafo. Selectores adyacentes
Anotemos las propiedades del primer párrafo:
P (tamaño de fuente: 24px; altura de línea: 30px; color: #a42727; sombra de texto: 0 1px 0 rgba(255,255,255,0.35); margen inferior: 42px; )
Ahora, si guarda los cambios y abre el archivo índice.html En el navegador, verá que estas propiedades se aplican a todos los párrafos de la página. Como necesitamos escribir estas propiedades solo para el primer párrafo, en este caso podemos usar selectores adyacentes. ¿Qué es? EN plantilla html, etiquetas
Y
(tomemos el primer párrafo) van uno tras otro, lo que significa que son etiquetas adyacentes en CSS, los selectores adyacentes se escriben así:
H1+p (tamaño de fuente: 24px; altura de línea: 30px; color: #a42727; sombra de texto: 0 1px 0 rgba(255,255,255,0.35); margen inferior: 42px; )
Ahora, estas propiedades sólo se aplicarán al primer párrafo.
Último párrafo. clases en css
Ahora pasemos al último párrafo. Como también difiere del texto principal, le asignaremos una clase. En la plantilla html, escriba el atributo de clase para el último párrafo con el valor last-p. El nombre de la clase, así como el identificador, deben comenzar con letras del alfabeto latino:
En CSS las clases se escriben así:
P.last-p (color: #ffbfbf; alineación de texto: derecha; sombra de texto: 0 1px 0 rgba(0,0,0,0.3); )
Estas propiedades solo funcionarán para el último párrafo de nuestra plantilla.
A diferencia de los identificadores, una clase con un cierto valor Puedes usarlo tantas veces como quieras en la página.
La propiedad de alineación de texto con un valor de derecha se utiliza cuando desea alinear el texto a la derecha. También puedes usar otros valores, por ejemplo, text-align: center; en este caso el texto quedará alineado con el centro del bloque.
Otros párrafos
Para los párrafos restantes escribimos la siguiente propiedad:
P (margen inferior: 30px;)
Otras propiedades: color, familia de fuentes, tamaño, interlineado esta etiqueta heredará del elemento padre, es decir etiqueta
.
Si hacemos la ventana del navegador más pequeña, podemos ver que el contenido está pegado a los lados de la ventana. Para solucionar este problema, agregue relleno al selector div:
Selectores de agrupación
Si varios elementos de una página web contienen propiedades idénticas Con los mismos valores, por ejemplo, como en nuestro ejemplo, el título y el último párrafo tienen propiedad general es una sombra, entonces puedes agrupar estos selectores escribiéndolos separados por comas:
H1,p.last-p (texto-sombra: 0 1px 0 rgba(0,0,0,0.3); )
No olvides eliminar las propiedades de los elementos individuales; en nuestro caso, debes eliminar la sombra de los selectores h1 y p.last-p.
Vídeo de la lección
Parte 1
Marco Bootstrap: diseño adaptable rápido
Curso en vídeo paso a paso sobre los conceptos básicos diseño adaptativo en el marco Bootstrap.
Aprende a componer de forma sencilla, rápida y eficaz utilizando una potente y práctica herramienta.
Diseño para ordenar y recibir pagos.
Curso gratuito "Sitio en WordPress"
¿Quieres dominar el CMS de WordPress?
Obtenga lecciones sobre diseño y maquetación de sitios web en WordPress.
Aprenda a trabajar con temas y diseños de corte.
¡Curso en video gratuito sobre cómo dibujar, diseñar e instalar un sitio web en CMS WordPress!
*Pase el mouse sobre para pausar el desplazamiento.
Atrás Adelante
Dominar CSS: diseño de página
Uno de los principales beneficios de CSS- capacidad de controlar apariencia páginas sin usar etiquetas diseño html. Sin embargo, crear plantillas CSS tiene una reputación injusta de ser difícil, especialmente entre los desarrolladores que recién comienzan. esta tecnología. Esto se debe en parte al hecho de que no todos los navegadores interpretan CSS de la misma manera, pero aún más al hecho de que simplemente hay una gran cantidad de diferentes técnicas crear diseños utilizando hojas de estilo.
Parece que cada desarrollador web tiene sus propias técnicas de diseño CSS, y los webmasters novatos suelen utilizar una técnica sin siquiera entender cómo funciona. Este enfoque de "caja negra" para el uso de CSS ayuda, por supuesto, a obtener resultados rápidamente, pero en última instancia dificulta el desarrollo de la comprensión del lenguaje por parte del desarrollador.
Sin embargo, todas estas técnicas diferentes se basan en tres conceptos básicos: posicionamiento, envoltura y manipulación del relleno. Varias técnicas Tras una inspección más cercana, no son tan diferentes, y si domina los conceptos y conceptos básicos, le resultará relativamente fácil crear su propia plantilla de página CSS.
Centrar el diseño
Las líneas de texto largas son muy incómodas o incluso difíciles de leer. A medida que los monitores y sus resoluciones continúan creciendo, la cuestión de la legibilidad de la pantalla se vuelve cada vez más problemática. Una forma de solucionar este problema es centrar el contenido de la página. En lugar de extender el contenido a lo largo de todo el ancho de la pantalla, los diseños centrados ocupan sólo una parte de la pantalla, dando a las líneas una longitud fácil de leer.
Las páginas centradas en contenido son comunes hoy en día, por lo que aprender a crear un diseño centrado usando CSS es una de las primeras cosas que los nuevos desarrolladores web quieren aprender. Hay dos formas principales de centrar un diseño: una usa relleno automático y la otra usa posicionamiento y relleno negativo.
Centrado mediante relleno automático
Suponga que se enfrenta a una tarea típica de centrar horizontalmente un div con una identificación envoltura("envoltura").
Para hacer esto en la práctica, solo necesitas establecer el ancho del div. envoltura y establezca los márgenes horizontales en auto.
En este ejemplo, el ancho se establece en píxeles. Pero, por supuesto, también puede especificarlo fácilmente como un porcentaje del ancho del cuerpo del documento, o usar el tamaño en "em" en relación con el tamaño del texto.
Este método funciona en todos navegadores modernos, pero no en IE 6. Afortunadamente, IE interpreta la propiedad incorrectamente alineación de texto: centro, centrar alineando todo, no solo el texto. Puedes usar esto a tu favor centrando todo en la etiqueta. cuerpo, incluyendo div envoltura, luego reasignando la alineación a izquierda para bloquear contenido envoltura.
Cuerpo (alineación de texto: centro;) #wrapper (ancho: 720 px; margen: 0 automático; alineación de texto: izquierda;)
Usando la propiedad alineación de texto Esto es esencialmente un truco, pero es completamente inofensivo y no afectará negativamente a su código. Ahora nuestro bloque envoltura centrado en IE 6, al igual que en otros navegadores que cumplen más con la especificación.
Centrar un diseño usando posicionamiento y relleno negativo
El método de relleno automático es el enfoque más popular, pero requiere un truco. También requiere diseñar dos elementos en lugar de uno. Es por ello que mucha gente prefiere utilizar el posicionamiento y los márgenes negativos.
Comenzamos, como en el ejemplo anterior, estableciendo el ancho envoltura. Luego establecemos la propiedad posición Para envoltura en significado relativo y propiedad izquierda en significado 50%
. Esto nos permite posicionar el borde izquierdo del bloque. envoltura en el centro de la página.
#wrapper (ancho: 720px; posición: relativa; izquierda: 50%;)
Sin embargo, necesitamos algo un poco diferente: queremos ver el centro del bloque en el centro de la página. envoltura. Puede lograr esto aplicando relleno negativo en el lado izquierdo del bloque. envoltura igual a la mitad del ancho de este bloque. Esto moverá el bloque. envoltura la mitad de su ancho hacia la izquierda, moviéndolo hacia el centro de la pantalla:
La elección del método de centrado depende totalmente de su gusto. Sin embargo, siempre es útil conocer varios métodos y técnicas, ya que no puedes adivinar cuáles te pueden resultar útiles.
Patrones basados en envolturas
Hay varias formas de crear patrones usando CSS, incluido el posicionamiento absoluto y el relleno negativo. Creo que el método más sencillo de utilizar se basa en envolver algunos elementos con otros. Como sugiere el nombre, en este tipo de plantilla simplemente estableces el ancho de los elementos posicionados y luego los ajustas hacia la izquierda o hacia la derecha.
Dado que estos elementos "inundados" ya no ocupan ningún espacio en el flujo del documento, no tienen ningún efecto sobre su entorno. elementos de bloque. Para evitar este comportamiento, deberá desenvolverse en varios puntos de referencia tu plantilla. En lugar de aplicar y desenvolver secuencialmente, es más conveniente utilizar un enfoque ligeramente diferente: aplicar el ajuste a casi todo y luego deshacerlo una o dos veces en puntos "estratégicos" del documento, como el pie de página.
Plantilla de dos columnas usando envoltura
Para crear una plantilla simple de dos columnas usando ajuste, comenzaremos con una estructura HTML (X) básica. En nuestro ejemplo, el marco (X)HTML consta de zonas: marca, contenido, zona de navegación y pie de página. Todo esta estructura encerrado en un "envoltorio" - envoltura, que se alineará horizontalmente utilizando uno de los métodos descritos anteriormente.
...
...
La navegación principal estará a la izquierda y el contenido estará a la izquierda. lado derecho. Sin embargo, en la estructura de la página, coloqué el área de contenido encima del área de navegación. La razón principal de esto es que el contenido de la página es lo más importante y debe colocarse lo más alto posible en el documento, cerca del principio.
Por lo general, cuando las personas crean plantillas y usan envoltura, le dan la propiedad flotar significado izquierda para ambas columnas y luego cree un "margen" entre las columnas usando las propiedades de margen o relleno. Al utilizar este enfoque, los altavoces se presionan firmemente en el espacio disponible para ellos, de modo que no hay espacio para respirar. Por lo general, esto no causa problemas, pero algunos navegadores rompen este diseño "apretado", con las columnas apiladas una debajo de la otra.
Esto puede suceder en IE porque IE lo basa en el "tamaño" del contenido en lugar del elemento que lo contiene. En los navegadores basados en estándares, si el contenido no cabe en un bloque, simplemente sale del bloque. En IE, sin embargo, si el contenido no cabe en el elemento que lo contiene, "estira" el elemento, haciéndolo más grande. Si algo así sucede en un diseño estrecho y estrecho, entonces los elementos ya no tienen espacio para permanecer uno al lado del otro, y uno de ellos parece “caerse”, hundiéndose más que el otro.
Para evitar este escenario, intente no sobrecargar el bloque que contiene su diseño envolvente. En lugar de utilizar márgenes horizontales, relleno, puede crear "márgenes virtuales" dando un bloque flotador: izquierda, y al otro - flotador:derecha.
Ahora, si uno de los elementos aumenta ligeramente (dentro de unos pocos píxeles) de tamaño, en lugar de destruir todo el diseño, desplazando uno de los bloques debajo del otro, el bloque "flotará" en el territorio del "campo virtual".
El código CSS para lograr este objetivo se explica por sí mismo. Simplemente configuramos el ancho deseado para cada una de las columnas y luego especificamos para la navegación. flotador: izquierda, y para el contenido - flotador:derecha.
#content (ancho: 520px; float: derecha;) #mainNav (ancho: 180px; float: izquierda;)
Luego, para colocar correctamente el pie de página debajo de la navegación y el contenido, debes desenvolverlo.
#pie de página (claro: ambos;)
La versión básica está lista. Agreguemos un par de toques más. Relleno superior e inferior para todo el bloque de navegación y relleno izquierdo y derecho para la lista de elementos en el menú de navegación.
#mainNav ( padding-top: 20px; padding-bottom: 20px; ) #mainNav li ( padding-left: 20px; padding-right: 20px; )
También vamos a sangrar el lado derecho del área de contenido:
#content h1, h2, p (relleno-derecha: 20px;)
Eso es todo, ahora tenemos listo un diseño CSS simple de dos columnas.
Plantilla de tres columnas usando envoltura
El marco HTML para construir una plantilla de tres columnas es muy similar al que usamos con una de dos columnas, con la única diferencia de que tiene dos adicionales. bloque div: uno para el contenido principal y otro para el contenido adicional.
…
…
usando lo mismo reglas CSS, como en el caso de una plantilla de dos columnas, podemos darle el bloque de contenido principal flotador: izquierda, y el bloque adicional - flotador:derecha. Todo esto sucederá dentro del bloque de contenido principal que ya está correctamente ubicado. De esta manera dividimos la segunda columna de contenido en dos, creando un diseño de tres columnas.
Como antes, el código CSS es muy simple. Sólo necesitas especificar el ancho deseado para cada uno de los bloques y darle a cada uno su propia envoltura.
#mainContent (ancho: 320px; flotante: izquierda;) #secundarioContenido (ancho: 180px; flotante: derecha;)
Puedes limpiar un poco la plantilla quitando relleno del bloque contenido aplicándolo directamente al contenido del bloque contenido secundario:
#contenido secundario h1, h2, p (relleno-izquierda: 20px; relleno-derecha: 20px;)
Así, obtenemos este bonito diseño de tres columnas.
Andy Budd, Cameron Moll y Simon Collison: "Dominio de CSS: soluciones avanzadas de estándares web"
referencia web.com
Traducción - Dmitri Naumenko
PD Quieres más materiales para diseño aplicado? Consulte los cursos gratuitos a continuación. Esta es una serie de videos sobre diseño de goma sitio y curso gratis sobre los conceptos básicos del diseño adaptativo. Le ayudarán a adquirir rápidamente las habilidades necesarias:
¿Te gustó el material y quieres agradecerme?
¡Simplemente comparte con tus amigos y colegas!
Crear un diseño de página web Sirve para organizar elementos en el sitio. Para que el texto, las imágenes y los videos se coloquen en el sitio de manera hermosa y ordenada, es necesario crear una estructura de página.
Para hacer esto, primero dibuja una tabla y las celdas que contiene. Una tabla dividida en celdas le permite definir claramente la posición de cada elemento del sitio.
Dibujar una tabla de diseño
1. En la barra de herramientas del programa de la página principal, haga clic en " Mesa" y elige "Tablas y celdas de diseño"
Cómo crear un diseño de página web en el programa de portada
2. Aparecerá una barra de herramientas a la derecha. Presione el botón "Dibujar tabla de diseño". El cursor se convertirá en un lápiz. Ahora dibujamos un rectángulo arbitrario. A continuación, en el panel de la derecha, establezca las dimensiones: - 850, Ancho - 150, Altura- en el centro.
¡Nuestra primera mesa está lista! El encabezado del sitio se ubicará aquí. Ahora necesitamos dibujar una segunda tabla debajo del cuerpo del sitio. Contendrá la información principal del sitio.
3. Para hacer esto, siga exactamente los mismos pasos que para dibujar la primera tabla. ¡No olvides AHORRAR! Como resultado, deberías tener dos tablas idénticas:
Dibujar celdas de diseño para una página web
Ahora insertaremos una celda en la tabla superior y escribiremos el nombre de nuestro sitio.
4. Para hacer esto, seleccione la tabla No. 1. Para comprender que la mesa ha sido seleccionada, sus bordes deben volverse verdes, deben aparecer marcadores en las esquinas y en los lados deben aparecer números con las dimensiones de la mesa.
Dibujar celdas en tablas en Frontpage
5. En la barra de herramientas de la derecha, haga clic en el botón "Dibujar celda de diseño". El cursor se convertirá en un lápiz. Colócalo en la esquina de la mesa y dibuja un rectángulo. exactamente el mismo tamaño , como la mesa..
Tenga en cuenta que, a diferencia de una mesa, los bordes
las celdas están resaltadas en azul
Crear un diseño de página web: dibujar una celda en Programa de portada Después de haber dibujado una celda para la tabla superior, haga mismas acciones y dibuja una celda
para la mesa número 2 . En él se ubicará el cuerpo de nuestro sitio. ¡No olvides guardar! Después de que estés dentro Programa de portada creado
diseño de página web , pasemos al siguiente paso de crear un sitio web. Esto está creando un encabezado para el sitio. 27/02/16 4.8K En este artículo quiero hablar de cuatro
diferentes maneras
x crear diseños de varias columnas. Cada método tiene sus pros y sus contras. Para demostrar cómo funcionan y se ven estos diseños, creé un sitio simple que usa tablas HTML, la propiedad flotante de CSS, un marco CSS y Flexbox.
- Primer día de nueva vida. En este artículo utilizamos cuatro métodos diferentes de diseño de sitios web: Mesas. Ni siquiera necesitas usar
- archivo separado estilos. Y, lo más importante, no se rompen. Flotar Estamos hablando de una propiedad CSS. Esta es una forma bastante común de crear un diseño de página web. Y en este caso necesitaremos usar mesa separada.
- estilos. El archivo HTML se utiliza únicamente para definir el contenido de la página web. Si desea alinear el contenido, debe utilizar archivo css Marcos CSS. Trabajan de la misma manera Marcos de JavaScript. Conectar ), ¡y está listo para funcionar! No es necesario que establezca los valores de propiedad usted mismo. Para ello, utilice las clases que los desarrolladores del framework han preparado para usted.
- Caja flexible. Flexbox es nombre corto Módulo de diseño de caja flexible CSS. Esta es una tecnología más nueva en comparación con la propiedad flotante. El principio básico de Flexbox es darle al contenedor la capacidad de cambiar el ancho, alto y orden de los elementos que contiene. Si quieres de la mejor manera posible llenar todo espacio libre, debe usarse para diseño div caja flexible. Por ejemplo, para cubrir todos los tipos de dispositivos y tamaños de pantalla. Un contenedor flotante expandirá los elementos que contiene para llenar toda la pantalla.
Ahora es el momento de probar cada uno de ellos.
Métodos de creación
Este es el diseño de mi sitio web:
Mesas
Para crear el encabezado del sitio que utilicé propiedad de posición: relativo . Intentemos hacer esto desde cero usando el diseño de tabla.
Aquí está mi código HTML:
Cinetrón
HOGAR
ESTRENOS
TAQUILLAS
FOTOS
Y esto es lo que obtuve:
Como puedes ver, este no es el mismo sombrero. Parece familiar, pero su ubicación ha cambiado un poco. Y he aquí por qué. Sabes que las mesas son excelentes para el posicionamiento simétrico. Pero para otros fines no son tan buenos. También preste atención a la complejidad del código. Pero las tablas tienen una característica útil. Aquí hay un truco que podemos hacer: tabla, td (border-colapso: colapsar; borde: 1px rojo sólido;)
Y verás que el diseño se ve así:
De esta manera, podrás determinar fácilmente qué es y dónde si te confundes. Ahora las malas noticias. Eche otro vistazo al código HTML. Este mesa sencilla, pero imagina cómo se vería con docenas de células. eso es lo que código fuente Tengo:
Cinetrón
Todo lo que necesitas saber sobre las películas.
Y el archivo CSS:
#encabezado (altura: 230px; imagen de fondo: url(../images/header1.jpg); repetición de fondo: sin repetición; familia de fuentes: "Shift", sans-serif; ) #encabezado h2 (fuente- tamaño: 4em; posición: superior relativa: 30px; pantalla: en línea; pantalla: en línea) #menu (posición: relativa; arriba: 100px; izquierda: 340px; pantalla: bloque en línea;) #menu li(peso de fuente: negrita ; pantalla: en línea; transformación de texto: mayúscula; margen derecho: 14px; ) entrada de menú (tamaño de fuente: 0,7 em; transformación de texto: minúscula; alineación de texto: derecha; posición: relativa; arriba: -4px; )
En este caso, debe utilizar un diseño de bloques del sitio mediante CSS. Aplicando algo como esto:
div (posición: relativa; arriba: 100px; izquierda: 100px;)
Tu especificas moverte
100 píxeles hacia abajo y 100 píxeles a la derecha con respecto a su posición original. Estas propiedades facilitan el movimiento de texto en una página. Puedes moverlo de una esquina a otra para determinar qué posición es mejor. Es mejor que una mesa.
Flotar
La propiedad flotante se usa ampliamente en diseño de bloque sitio. Usaremos esta propiedad para mostrar el área de contenido principal. Un pequeño ejemplo te ayudará a comprender mejor cómo funciona:
Tiene tres elementos de diferentes colores.
. Verde para los artículos principales, rojo para los artículos de noticias y azul para el pie de página.
Y aquí está el archivo CSS:
#verde (ancho: 200 px; alto: 200 px; borde: 1 px verde sólido; flotante: izquierda; margen: 5 px; ) #red (ancho: 100 px; alto: 200 px; borde: 1 px rojo sólido; margen: 5 px; flotante: izquierda ; ) #azul (ancho: 310 px; alto: 100 px; borde: 1 px azul sólido; margen: 5 px; claro: ambos;)
Y esto es lo que obtuvimos:
Al diseñar en capas, indicas a través de la propiedad flotante cómo quieres que sea tu elemento estaba flotando. Luego estableces la dirección de desplazamiento. Suele ser float: left o float: right . Cuando señalas un elemento muévete hacia la izquierda, lo hará hasta que se acabe el espacio libre. El siguiente elemento flotante se moverá hasta encontrarse con el primero, y así sucesivamente. ¡El elemento que sigue al flotante fluirá a su alrededor como agua! Pero si no desea liberar todos sus objetos, puede utilizar la propiedad clear. Especifica qué lados de un elemento no deben rodear elementos flotantes.
Así es como se ve parte de mi diseño para el contenido principal:
Encabezado del primer artículo
Cuerpo del primer artículoLeer más
Encabezado del segundo artículo
Cuerpo del segundo artículoLeer más
Encabezado del primer artículo de noticias.
Cuerpo del primer artículo periodístico.
Encabezado del segundo artículo de noticias.
Cuerpo de la segunda noticia
Ahora hagámoslo flotar:
#contenido principal (ancho: 780 px; flotante: izquierda;) #noticias (margen izquierdo: 20 px; flotante: izquierda; ancho: 180 px;)
Tenemos bloque grande para artículos y un bloque más pequeño para noticias. También usamos la propiedad float: left para imágenes. Observe cómo están envueltos con una etiqueta. Este diseño se parece a tu revista favorita. Marcos CSS
Si eres un poco vago
Si no tienes tiempo para jugar con el código cuando diseño CSS, puede utilizar uno de los marcos CSS. En nuestro ejemplo estamos usando Bootstrap. Para hacer esto, debe descargarlo e incluirlo en un archivo HTML.
Bootstrap contiene una cuadrícula que consta de 12 columnas del mismo tamaño. Los elementos HTML están ordenados para cubrir cantidad diferente columnas. De esta manera se crean diseños personalizados. Cada pieza de contenido está alineada con esta cuadrícula a través de un número específico de columnas que se extienden.
He aquí un ejemplo:
En este ejemplo, creamos una cadena. Después de eso, se colocaron en él dos columnas del mismo tamaño. Cada uno cubre seis de las doce columnas disponibles.
código HTML:
Muy pronto:
Y esto es lo que obtuve:
Se ve bien. Y al diseñar un sitio web desde PSD, ni siquiera necesitas editar el archivo CSS. Pero no ves lo que sucede dentro. Caja flexible
Clásicos del mañana
Usaremos Flexbox para crear la sección Taquilla del sitio. Aquí está el código HTML:
- Cenicienta: 67,9 millones de dólares
- Ejecutar toda la noche: 11,0 millones de dólares
- Kingsman: El servicio secreto: 6,2 millones de dólares
- Enfoque: 5,7 millones de dólares
- Chappie: 5,7 millones de dólares
- McFarland EE.UU.: 3,6 millones de dólares
- El DUFF: 2,9 millones de dólares
- Francotirador americano: 2,8 millones de dólares
Aquí está el código CSS para el contenedor "boxoffice":
#boxoffice (ancho: 780px; alto: 500px; imagen de fondo: url(../images/box_office_cropped.jpg); repetición de fondo: portada; radio de borde: 5px; relleno: 20px;)
Ahora es el momento de crear un contenedor flexible. Para hacer esto necesita configurar para elemento de visualización:doblar. De acuerdo con las reglas de diseño, todos los elementos de Flexbox están ubicados a lo largo de los ejes principal y transversal:
Para Flexbox, se establecen dos tipos de propiedades. El primero se usa para administrar el contenedor flexible, el segundo se usa para llenar elementos flexibles. Echemos un vistazo más de cerca al primer tipo. De forma predeterminada, el eje principal es horizontal, por lo que los elementos se estirarán en una fila. Para cambiar el eje principal podemos usar la propiedad flex-direction. Puede tomar los siguientes valores: fila, fila inversa, columna y columna inversa. Usaremos el valor de la columna. agreguemos también propiedad de altura. Comprenderá por qué es necesario esto un poco más adelante:
contenedor flexible (altura: 300 px; pantalla: flex; dirección flexible: columna;)
Así luce nuestra pequeña taquilla:
Usamos la propiedad de altura porque no queremos que el contenedor flexbox se superponga a la imagen de la flecha en la parte inferior del fondo. Flexbox también le brinda la posibilidad de realizar cambios en el contenido sin cambiar el archivo HTML. Por ejemplo, si desea invertir el diseño de los elementos, puede cambiar el valor de dirección flexible a columnas inversas. Esto invertirá la dirección del flexbox. Pero también necesitarás cambiar el orden de los elementos dentro del contenedor.
Para hacer esto usamos la propiedad justify-content. Los valores disponibles para ello son flex-start, flex-end, center, space-between y space-around. Debe configurarse en justify-content, que es equivalente a flex-end.
Aquí está nuestro código:
Contenedor flexible (altura: 300 px; pantalla: flex; dirección flexible: columna inversa; justificar contenido: extremo flexible;)
Y así se reflejaron estos cambios:
También puede mover elementos a lo largo del eje transversal. Para ello se utiliza la propiedad align-items. Puede configurarlo con los siguientes valores: inicio flexible, final flexible, centro, línea base o estiramiento. Para usarlo, agregue una propiedad al selector de flexbox:
Contenedor flexible (alinear elementos: extremo flexible;)
Todos los elementos se moverán hacia el borde derecho:
Hay otra propiedad útil: flex-wrap. Imaginemos que la taquilla se expande rápidamente. ¿Qué pasa si se vuelve más grande que el contenedor? No hay nada de malo si usas la propiedad flex-wrap. Intente agregar el siguiente código:
Contenedor flexible (altura: 300 px; pantalla: flex; dirección flexible: columna; envoltura flexible: envoltura;)
Y este es el resultado:
Como puede ver, los elementos ahora están apilados en varias columnas. El valor predeterminado para esta propiedad es nowrap. Cuando se aplica, los elementos se organizarán en una columna ( o una línea - depende del valor de la dirección flexible). Puede utilizar el valor de ajuste inverso. Luego los elementos se ordenarán en orden inverso. hay muchos propiedades útiles. Con su ayuda, puedes cambiar los parámetros de cada elemento individual del contenedor. Por ejemplo, la propiedad de orden le permite cambiar el orden de los elementos sin tener que cambiar el código HTML.
¿Qué método deberías elegir?
Mesas. Las tablas no se utilizan en el diseño de página válido. Ensucian el código. Las tablas no son tan fáciles de usar como parece. Si todavía no está decidido a utilizar tablas para el diseño de su página, eche un vistazo a este sitio.
Pero pueden ser útiles si estamos hablando de sobre el diseño correos electrónicos. No hay tantos navegadores que la gente utilice hoy en día, pero simplemente hay una gran cantidad de agentes de correo electrónico. Escritorio, en línea y aplicaciones moviles Utilice diferentes motores de visualización. Las tablas HTML tienen el mismo aspecto en todos ellos. Por eso es gran opción para el diseño de correos electrónicos.
Flotar La propiedad flotante es mejor elección, si sus requisitos no son demasiado altos. Esta es una manera fácil de hacer que su sitio web sea más atractivo. Su uso para imágenes es, en mi opinión, una señal de buen gusto. Sólo necesitas recordar cómo funcionan. propiedades flotantes y claro. Esto es suficiente para empezar.
Hablando de sus desventajas, debemos admitir que los elementos flotantes están ligados al flujo del documento, y esto puede reducir significativamente su flexibilidad.
Marcos CSS. Si necesita crear un diseño rápidamente, utilice marcos. Hoy en día hay muchos de ellos. Entre ellos, elige el que más te convenga.
Caja flexible. Tendrás que dedicar algo de tiempo a aprender cómo funciona. Creo que ya comprende lo convenientes que son las cajas flexibles para administrar elementos individuales.
Gravemente
© 2024 Teléfonos móviles y comunicaciones.
Desplazarse hacia arriba
Para este bloque, especificaremos el ancho, así como el relleno superior, izquierdo y derecho:
Para muchas propiedades verás valores escritos en los siguientes formatos:
- margen: valor1 valor2 valor3 valor4;
- margen: valor1 valor2 valor3;
- margen: valor1 valor2;
- margen: valor1;
En el primer caso especificamos valores para cada uno de los cuatro lados, por ejemplo, margen: 10px 12px 20px 15px; : 10px – relleno superior, 12px – relleno derecho, 20px – relleno inferior, 15px – relleno izquierdo. Esta notación se suele utilizar cuando las sangrías de cada lado son diferentes.
En el segundo caso se escriben tres valores, por ejemplo, margen: 10px 12px 20px; : 10px – relleno superior, 12px relleno derecho e izquierdo, 20px – relleno inferior. Esta notación es conveniente de usar cuando los valores de la derecha y de la izquierda son iguales, pero los valores de arriba y de abajo son diferentes. El valor automático se utiliza cuando desea que el navegador calcule automáticamente el relleno izquierdo y derecho.
En el tercer caso se utilizan dos valores, por ejemplo, margen: 10px 12px; : margen superior e inferior 10px, margen derecho e izquierdo 12px. Si las sangrías de arriba y de abajo son iguales, y las sangrías de derecha e izquierda son iguales entre sí, entonces es conveniente escribir solo dos valores, como en nuestro ejemplo.
En el cuarto caso se escribe un valor, por ejemplo, margen: 10px; : el relleno en cada lado es de 10px. Cuando los parámetros son iguales en todos los lados, es conveniente utilizar dicha notación.
¿Cómo medir el ancho o alto de un elemento en Adobe Photoshop? Consideremos una forma: tomar una herramienta Herramienta Marco rectangular ( tecla de acceso rápido METRO):
Luego seleccionamos el área, por ejemplo, necesitamos encontrar la sangría desde el borde superior del diseño hasta el comienzo del contenido, selecciónela:
en el panel Información mira los valores de altura h, o valor de ancho W. si necesitas saber el ancho de un elemento:
vamos al titulo
Aquí debemos especificar el tamaño, el interlineado, la sombra y el relleno inferior. Ya sabes cómo registrar las dos primeras propiedades.
Para especificar la sombra necesitamos la propiedad. sombra de texto:
- Aquí 0 – sangría a lo largo del eje X;
- 1px– desplazamiento a lo largo del eje Y;
- 0 – radio de desenfoque de sombras;
- rgba(0,0,0,0.3)– color de sombra. EN en este caso usamos formato RGBA, incluido un canal alfa que establece la transparencia del elemento. Entre paréntesis, los primeros tres valores responsables del color en el formato. rgb, A último valor responsable de la transparencia. Este valor se escribe en el rango de 0 a 1, donde 0 representa transparencia total y 1 representa opacidad.
¿Cómo descubrir los parámetros de sombra en Adobe Photoshop? Elegir capa deseada en el panel de capas y haga clic en el icono ƒx:
Se abre una ventana Estilo de capa . Necesitas seleccionar una pestaña Sombra paralela:
Aquí está el parámetro Opacidad responsable de la transparencia, parámetro Distancia es responsable de la sangría a lo largo del eje Y, parámetro Tamaño es responsable del desenfoque, y el parámetro Ángulo es responsable del desplazamiento a lo largo del eje X Dado que nuestra sombra cae en ángulo recto, el desplazamiento a lo largo del eje X será cero. El color de la sombra se puede encontrar en el cuadro opuesto al parámetro. Modo de fusión:
Valor de color en formato RGB y con un canal alfa en este caso quedará así:
Sombra de texto: 0 1px 0 rgba(0,0,0,0.3);
Queda por escribir la sangría a continuación.
Si necesita escribir un valor para uno de los cuatro lados, utilice esta notación:
- margen superior– guión superior;
- margen derecho– sangría derecha;
- margen inferior– sangría inferior;
- margen izquierdo– sangría izquierda.
Como necesitamos especificar el margen inferior, escribiremos margin-bottom: 30px;
Como resultado, obtenemos este código en el archivo. estilo.css:
* ( margen: 0; relleno: 0; ) cuerpo ( color de fondo: #e35b5b; tamaño de fuente: 16 px; altura de línea: 24 px; color: blanco; familia de fuente: Arial; ) div ( ancho: 724 px; margen : 43px auto 0; ) h1 (tamaño de fuente: 60px; altura de línea: 62px; sombra de texto: 0 1px 0 rgba(0,0,0,0.3); margen inferior: 30px; )
Primer párrafo. Selectores adyacentes
Anotemos las propiedades del primer párrafo:
P (tamaño de fuente: 24px; altura de línea: 30px; color: #a42727; sombra de texto: 0 1px 0 rgba(255,255,255,0.35); margen inferior: 42px; )
Ahora, si guarda los cambios y abre el archivo índice.html En el navegador, verá que estas propiedades se aplican a todos los párrafos de la página. Como necesitamos escribir estas propiedades solo para el primer párrafo, en este caso podemos usar selectores adyacentes. ¿Qué es? EN plantilla html, etiquetas
Y
(tomemos el primer párrafo) van uno tras otro, lo que significa que son etiquetas adyacentes en CSS, los selectores adyacentes se escriben así:
H1+p (tamaño de fuente: 24px; altura de línea: 30px; color: #a42727; sombra de texto: 0 1px 0 rgba(255,255,255,0.35); margen inferior: 42px; )
Ahora, estas propiedades sólo se aplicarán al primer párrafo.
Último párrafo. clases en css
Ahora pasemos al último párrafo. Como también difiere del texto principal, le asignaremos una clase. En la plantilla html, escriba el atributo de clase para el último párrafo con el valor last-p. El nombre de la clase, así como el identificador, deben comenzar con letras del alfabeto latino:
En CSS las clases se escriben así:
P.last-p (color: #ffbfbf; alineación de texto: derecha; sombra de texto: 0 1px 0 rgba(0,0,0,0.3); )
Estas propiedades solo funcionarán para el último párrafo de nuestra plantilla.
A diferencia de los identificadores, una clase con un cierto valor Puedes usarlo tantas veces como quieras en la página.
La propiedad de alineación de texto con un valor de derecha se utiliza cuando desea alinear el texto a la derecha. También puedes usar otros valores, por ejemplo, text-align: center; en este caso el texto quedará alineado con el centro del bloque.
Otros párrafos
Para los párrafos restantes escribimos la siguiente propiedad:
P (margen inferior: 30px;)
Otras propiedades: color, familia de fuentes, tamaño, interlineado esta etiqueta heredará del elemento padre, es decir etiqueta
.Si hacemos la ventana del navegador más pequeña, podemos ver que el contenido está pegado a los lados de la ventana. Para solucionar este problema, agregue relleno al selector div:
Selectores de agrupación
Si varios elementos de una página web contienen propiedades idénticas Con los mismos valores, por ejemplo, como en nuestro ejemplo, el título y el último párrafo tienen propiedad general es una sombra, entonces puedes agrupar estos selectores escribiéndolos separados por comas:
H1,p.last-p (texto-sombra: 0 1px 0 rgba(0,0,0,0.3); )
No olvides eliminar las propiedades de los elementos individuales; en nuestro caso, debes eliminar la sombra de los selectores h1 y p.last-p.
Vídeo de la lección
Parte 1
Marco Bootstrap: diseño adaptable rápido
Curso en vídeo paso a paso sobre los conceptos básicos diseño adaptativo en el marco Bootstrap.
Aprende a componer de forma sencilla, rápida y eficaz utilizando una potente y práctica herramienta.
Diseño para ordenar y recibir pagos.
Curso gratuito "Sitio en WordPress"
¿Quieres dominar el CMS de WordPress?
Obtenga lecciones sobre diseño y maquetación de sitios web en WordPress.
Aprenda a trabajar con temas y diseños de corte.
¡Curso en video gratuito sobre cómo dibujar, diseñar e instalar un sitio web en CMS WordPress!
*Pase el mouse sobre para pausar el desplazamiento.
Atrás Adelante
Dominar CSS: diseño de página
Uno de los principales beneficios de CSS- capacidad de controlar apariencia páginas sin usar etiquetas diseño html. Sin embargo, crear plantillas CSS tiene una reputación injusta de ser difícil, especialmente entre los desarrolladores que recién comienzan. esta tecnología. Esto se debe en parte al hecho de que no todos los navegadores interpretan CSS de la misma manera, pero aún más al hecho de que simplemente hay una gran cantidad de diferentes técnicas crear diseños utilizando hojas de estilo.
Parece que cada desarrollador web tiene sus propias técnicas de diseño CSS, y los webmasters novatos suelen utilizar una técnica sin siquiera entender cómo funciona. Este enfoque de "caja negra" para el uso de CSS ayuda, por supuesto, a obtener resultados rápidamente, pero en última instancia dificulta el desarrollo de la comprensión del lenguaje por parte del desarrollador.
Sin embargo, todas estas técnicas diferentes se basan en tres conceptos básicos: posicionamiento, envoltura y manipulación del relleno. Varias técnicas Tras una inspección más cercana, no son tan diferentes, y si domina los conceptos y conceptos básicos, le resultará relativamente fácil crear su propia plantilla de página CSS.
Centrar el diseño
Las líneas de texto largas son muy incómodas o incluso difíciles de leer. A medida que los monitores y sus resoluciones continúan creciendo, la cuestión de la legibilidad de la pantalla se vuelve cada vez más problemática. Una forma de solucionar este problema es centrar el contenido de la página. En lugar de extender el contenido a lo largo de todo el ancho de la pantalla, los diseños centrados ocupan sólo una parte de la pantalla, dando a las líneas una longitud fácil de leer.
Las páginas centradas en contenido son comunes hoy en día, por lo que aprender a crear un diseño centrado usando CSS es una de las primeras cosas que los nuevos desarrolladores web quieren aprender. Hay dos formas principales de centrar un diseño: una usa relleno automático y la otra usa posicionamiento y relleno negativo.
Centrado mediante relleno automático
Suponga que se enfrenta a una tarea típica de centrar horizontalmente un div con una identificación envoltura("envoltura").
Para hacer esto en la práctica, solo necesitas establecer el ancho del div. envoltura y establezca los márgenes horizontales en auto.
En este ejemplo, el ancho se establece en píxeles. Pero, por supuesto, también puede especificarlo fácilmente como un porcentaje del ancho del cuerpo del documento, o usar el tamaño en "em" en relación con el tamaño del texto.
Este método funciona en todos navegadores modernos, pero no en IE 6. Afortunadamente, IE interpreta la propiedad incorrectamente alineación de texto: centro, centrar alineando todo, no solo el texto. Puedes usar esto a tu favor centrando todo en la etiqueta. cuerpo, incluyendo div envoltura, luego reasignando la alineación a izquierda para bloquear contenido envoltura.
Cuerpo (alineación de texto: centro;) #wrapper (ancho: 720 px; margen: 0 automático; alineación de texto: izquierda;)
Usando la propiedad alineación de texto Esto es esencialmente un truco, pero es completamente inofensivo y no afectará negativamente a su código. Ahora nuestro bloque envoltura centrado en IE 6, al igual que en otros navegadores que cumplen más con la especificación.
Centrar un diseño usando posicionamiento y relleno negativo
El método de relleno automático es el enfoque más popular, pero requiere un truco. También requiere diseñar dos elementos en lugar de uno. Es por ello que mucha gente prefiere utilizar el posicionamiento y los márgenes negativos.
Comenzamos, como en el ejemplo anterior, estableciendo el ancho envoltura. Luego establecemos la propiedad posición Para envoltura en significado relativo y propiedad izquierda en significado 50% . Esto nos permite posicionar el borde izquierdo del bloque. envoltura en el centro de la página.
#wrapper (ancho: 720px; posición: relativa; izquierda: 50%;)
Sin embargo, necesitamos algo un poco diferente: queremos ver el centro del bloque en el centro de la página. envoltura. Puede lograr esto aplicando relleno negativo en el lado izquierdo del bloque. envoltura igual a la mitad del ancho de este bloque. Esto moverá el bloque. envoltura la mitad de su ancho hacia la izquierda, moviéndolo hacia el centro de la pantalla:
La elección del método de centrado depende totalmente de su gusto. Sin embargo, siempre es útil conocer varios métodos y técnicas, ya que no puedes adivinar cuáles te pueden resultar útiles.
Patrones basados en envolturas
Hay varias formas de crear patrones usando CSS, incluido el posicionamiento absoluto y el relleno negativo. Creo que el método más sencillo de utilizar se basa en envolver algunos elementos con otros. Como sugiere el nombre, en este tipo de plantilla simplemente estableces el ancho de los elementos posicionados y luego los ajustas hacia la izquierda o hacia la derecha.
Dado que estos elementos "inundados" ya no ocupan ningún espacio en el flujo del documento, no tienen ningún efecto sobre su entorno. elementos de bloque. Para evitar este comportamiento, deberá desenvolverse en varios puntos de referencia tu plantilla. En lugar de aplicar y desenvolver secuencialmente, es más conveniente utilizar un enfoque ligeramente diferente: aplicar el ajuste a casi todo y luego deshacerlo una o dos veces en puntos "estratégicos" del documento, como el pie de página.
Plantilla de dos columnas usando envoltura
Para crear una plantilla simple de dos columnas usando ajuste, comenzaremos con una estructura HTML (X) básica. En nuestro ejemplo, el marco (X)HTML consta de zonas: marca, contenido, zona de navegación y pie de página. Todo esta estructura encerrado en un "envoltorio" - envoltura, que se alineará horizontalmente utilizando uno de los métodos descritos anteriormente.
La navegación principal estará a la izquierda y el contenido estará a la izquierda. lado derecho. Sin embargo, en la estructura de la página, coloqué el área de contenido encima del área de navegación. La razón principal de esto es que el contenido de la página es lo más importante y debe colocarse lo más alto posible en el documento, cerca del principio.
Por lo general, cuando las personas crean plantillas y usan envoltura, le dan la propiedad flotar significado izquierda para ambas columnas y luego cree un "margen" entre las columnas usando las propiedades de margen o relleno. Al utilizar este enfoque, los altavoces se presionan firmemente en el espacio disponible para ellos, de modo que no hay espacio para respirar. Por lo general, esto no causa problemas, pero algunos navegadores rompen este diseño "apretado", con las columnas apiladas una debajo de la otra.
Esto puede suceder en IE porque IE lo basa en el "tamaño" del contenido en lugar del elemento que lo contiene. En los navegadores basados en estándares, si el contenido no cabe en un bloque, simplemente sale del bloque. En IE, sin embargo, si el contenido no cabe en el elemento que lo contiene, "estira" el elemento, haciéndolo más grande. Si algo así sucede en un diseño estrecho y estrecho, entonces los elementos ya no tienen espacio para permanecer uno al lado del otro, y uno de ellos parece “caerse”, hundiéndose más que el otro.
Para evitar este escenario, intente no sobrecargar el bloque que contiene su diseño envolvente. En lugar de utilizar márgenes horizontales, relleno, puede crear "márgenes virtuales" dando un bloque flotador: izquierda, y al otro - flotador:derecha.
Ahora, si uno de los elementos aumenta ligeramente (dentro de unos pocos píxeles) de tamaño, en lugar de destruir todo el diseño, desplazando uno de los bloques debajo del otro, el bloque "flotará" en el territorio del "campo virtual".
El código CSS para lograr este objetivo se explica por sí mismo. Simplemente configuramos el ancho deseado para cada una de las columnas y luego especificamos para la navegación. flotador: izquierda, y para el contenido - flotador:derecha.
#content (ancho: 520px; float: derecha;) #mainNav (ancho: 180px; float: izquierda;)
Luego, para colocar correctamente el pie de página debajo de la navegación y el contenido, debes desenvolverlo.
#pie de página (claro: ambos;)
La versión básica está lista. Agreguemos un par de toques más. Relleno superior e inferior para todo el bloque de navegación y relleno izquierdo y derecho para la lista de elementos en el menú de navegación.
#mainNav ( padding-top: 20px; padding-bottom: 20px; ) #mainNav li ( padding-left: 20px; padding-right: 20px; )
También vamos a sangrar el lado derecho del área de contenido:
#content h1, h2, p (relleno-derecha: 20px;)
Eso es todo, ahora tenemos listo un diseño CSS simple de dos columnas.
Plantilla de tres columnas usando envoltura
El marco HTML para construir una plantilla de tres columnas es muy similar al que usamos con una de dos columnas, con la única diferencia de que tiene dos adicionales. bloque div: uno para el contenido principal y otro para el contenido adicional.
usando lo mismo reglas CSS, como en el caso de una plantilla de dos columnas, podemos darle el bloque de contenido principal flotador: izquierda, y el bloque adicional - flotador:derecha. Todo esto sucederá dentro del bloque de contenido principal que ya está correctamente ubicado. De esta manera dividimos la segunda columna de contenido en dos, creando un diseño de tres columnas.
Como antes, el código CSS es muy simple. Sólo necesitas especificar el ancho deseado para cada uno de los bloques y darle a cada uno su propia envoltura.
#mainContent (ancho: 320px; flotante: izquierda;) #secundarioContenido (ancho: 180px; flotante: derecha;)
Puedes limpiar un poco la plantilla quitando relleno del bloque contenido aplicándolo directamente al contenido del bloque contenido secundario:
#contenido secundario h1, h2, p (relleno-izquierda: 20px; relleno-derecha: 20px;)
Así, obtenemos este bonito diseño de tres columnas.
Andy Budd, Cameron Moll y Simon Collison: "Dominio de CSS: soluciones avanzadas de estándares web"
referencia web.com
Traducción - Dmitri Naumenko
PD Quieres más materiales para diseño aplicado? Consulte los cursos gratuitos a continuación. Esta es una serie de videos sobre diseño de goma sitio y curso gratis sobre los conceptos básicos del diseño adaptativo. Le ayudarán a adquirir rápidamente las habilidades necesarias:
¿Te gustó el material y quieres agradecerme?
¡Simplemente comparte con tus amigos y colegas!
Crear un diseño de página web Sirve para organizar elementos en el sitio. Para que el texto, las imágenes y los videos se coloquen en el sitio de manera hermosa y ordenada, es necesario crear una estructura de página.
Para hacer esto, primero dibuja una tabla y las celdas que contiene. Una tabla dividida en celdas le permite definir claramente la posición de cada elemento del sitio.
Dibujar una tabla de diseño
1. En la barra de herramientas del programa de la página principal, haga clic en " Mesa" y elige "Tablas y celdas de diseño"
Cómo crear un diseño de página web en el programa de portada
2. Aparecerá una barra de herramientas a la derecha. Presione el botón "Dibujar tabla de diseño". El cursor se convertirá en un lápiz. Ahora dibujamos un rectángulo arbitrario. A continuación, en el panel de la derecha, establezca las dimensiones: - 850, Ancho - 150, Altura- en el centro.
¡Nuestra primera mesa está lista! El encabezado del sitio se ubicará aquí. Ahora necesitamos dibujar una segunda tabla debajo del cuerpo del sitio. Contendrá la información principal del sitio.
3. Para hacer esto, siga exactamente los mismos pasos que para dibujar la primera tabla. ¡No olvides AHORRAR! Como resultado, deberías tener dos tablas idénticas:
Dibujar celdas de diseño para una página web
Ahora insertaremos una celda en la tabla superior y escribiremos el nombre de nuestro sitio.
4. Para hacer esto, seleccione la tabla No. 1. Para comprender que la mesa ha sido seleccionada, sus bordes deben volverse verdes, deben aparecer marcadores en las esquinas y en los lados deben aparecer números con las dimensiones de la mesa.
Dibujar celdas en tablas en Frontpage
5. En la barra de herramientas de la derecha, haga clic en el botón "Dibujar celda de diseño". El cursor se convertirá en un lápiz. Colócalo en la esquina de la mesa y dibuja un rectángulo. exactamente el mismo tamaño , como la mesa..
Tenga en cuenta que, a diferencia de una mesa, los bordes las celdas están resaltadas en azul
Crear un diseño de página web: dibujar una celda en Programa de portada Después de haber dibujado una celda para la tabla superior, haga mismas acciones y dibuja una celda
para la mesa número 2 . En él se ubicará el cuerpo de nuestro sitio. ¡No olvides guardar! Después de que estés dentro Programa de portada creado
diseño de página web, pasemos al siguiente paso de crear un sitio web. Esto está creando un encabezado para el sitio. 27/02/16 4.8K En este artículo quiero hablar de cuatro
diferentes maneras
x crear diseños de varias columnas. Cada método tiene sus pros y sus contras. Para demostrar cómo funcionan y se ven estos diseños, creé un sitio simple que usa tablas HTML, la propiedad flotante de CSS, un marco CSS y Flexbox.
- Primer día de nueva vida. En este artículo utilizamos cuatro métodos diferentes de diseño de sitios web: Mesas. Ni siquiera necesitas usar
- archivo separado estilos. Y, lo más importante, no se rompen. Flotar Estamos hablando de una propiedad CSS. Esta es una forma bastante común de crear un diseño de página web. Y en este caso necesitaremos usar mesa separada.
- estilos. El archivo HTML se utiliza únicamente para definir el contenido de la página web. Si desea alinear el contenido, debe utilizar archivo css Marcos CSS. Trabajan de la misma manera Marcos de JavaScript. Conectar ), ¡y está listo para funcionar! No es necesario que establezca los valores de propiedad usted mismo. Para ello, utilice las clases que los desarrolladores del framework han preparado para usted.
- Caja flexible. Flexbox es nombre corto Módulo de diseño de caja flexible CSS. Esta es una tecnología más nueva en comparación con la propiedad flotante. El principio básico de Flexbox es darle al contenedor la capacidad de cambiar el ancho, alto y orden de los elementos que contiene. Si quieres de la mejor manera posible llenar todo espacio libre, debe usarse para diseño div caja flexible. Por ejemplo, para cubrir todos los tipos de dispositivos y tamaños de pantalla. Un contenedor flotante expandirá los elementos que contiene para llenar toda la pantalla.
Ahora es el momento de probar cada uno de ellos.
Métodos de creación
Este es el diseño de mi sitio web:
Mesas
Para crear el encabezado del sitio que utilicé propiedad de posición: relativo . Intentemos hacer esto desde cero usando el diseño de tabla.
Aquí está mi código HTML:
| Cinetrón | |||||
| HOGAR | ESTRENOS | TAQUILLAS | FOTOS | ||
Y esto es lo que obtuve:
Como puedes ver, este no es el mismo sombrero. Parece familiar, pero su ubicación ha cambiado un poco. Y he aquí por qué. Sabes que las mesas son excelentes para el posicionamiento simétrico. Pero para otros fines no son tan buenos. También preste atención a la complejidad del código. Pero las tablas tienen una característica útil. Aquí hay un truco que podemos hacer:
tabla, td (border-colapso: colapsar; borde: 1px rojo sólido;)
Y verás que el diseño se ve así:
De esta manera, podrás determinar fácilmente qué es y dónde si te confundes.
Ahora las malas noticias. Eche otro vistazo al código HTML. Este mesa sencilla, pero imagina cómo se vería con docenas de células. eso es lo que código fuente Tengo:
Cinetrón
Todo lo que necesitas saber sobre las películas.
Y el archivo CSS:
#encabezado (altura: 230px; imagen de fondo: url(../images/header1.jpg); repetición de fondo: sin repetición; familia de fuentes: "Shift", sans-serif; ) #encabezado h2 (fuente- tamaño: 4em; posición: superior relativa: 30px; pantalla: en línea; pantalla: en línea) #menu (posición: relativa; arriba: 100px; izquierda: 340px; pantalla: bloque en línea;) #menu li(peso de fuente: negrita ; pantalla: en línea; transformación de texto: mayúscula; margen derecho: 14px; ) entrada de menú (tamaño de fuente: 0,7 em; transformación de texto: minúscula; alineación de texto: derecha; posición: relativa; arriba: -4px; )
En este caso, debe utilizar un diseño de bloques del sitio mediante CSS. Aplicando algo como esto:
div (posición: relativa; arriba: 100px; izquierda: 100px;)
Tu especificas moverte
Flotar
La propiedad flotante se usa ampliamente en diseño de bloque sitio. Usaremos esta propiedad para mostrar el área de contenido principal. Un pequeño ejemplo te ayudará a comprender mejor cómo funciona:
Tiene tres elementos de diferentes colores.
Y aquí está el archivo CSS:
#verde (ancho: 200 px; alto: 200 px; borde: 1 px verde sólido; flotante: izquierda; margen: 5 px; ) #red (ancho: 100 px; alto: 200 px; borde: 1 px rojo sólido; margen: 5 px; flotante: izquierda ; ) #azul (ancho: 310 px; alto: 100 px; borde: 1 px azul sólido; margen: 5 px; claro: ambos;)
Y esto es lo que obtuvimos:
Al diseñar en capas, indicas a través de la propiedad flotante cómo quieres que sea tu elemento
El siguiente elemento flotante se moverá hasta encontrarse con el primero, y así sucesivamente. ¡El elemento que sigue al flotante fluirá a su alrededor como agua! Pero si no desea liberar todos sus objetos, puede utilizar la propiedad clear. Especifica qué lados de un elemento no deben rodear elementos flotantes.
Así es como se ve parte de mi diseño para el contenido principal:
Encabezado del primer artículo
Cuerpo del primer artículoLeer más
Encabezado del segundo artículo
Cuerpo del segundo artículoLeer más
Encabezado del primer artículo de noticias.
Cuerpo del primer artículo periodístico.
Encabezado del segundo artículo de noticias.
Cuerpo de la segunda noticia
Ahora hagámoslo flotar:
#contenido principal (ancho: 780 px; flotante: izquierda;) #noticias (margen izquierdo: 20 px; flotante: izquierda; ancho: 180 px;)
Tenemos bloque grande para artículos y un bloque más pequeño para noticias. También usamos la propiedad float: left para imágenes. Observe cómo están envueltos con una etiqueta. Este diseño se parece a tu revista favorita.
Marcos CSS
Si eres un poco vago
Si no tienes tiempo para jugar con el código cuando diseño CSS, puede utilizar uno de los marcos CSS. En nuestro ejemplo estamos usando Bootstrap. Para hacer esto, debe descargarlo e incluirlo en un archivo HTML.
Bootstrap contiene una cuadrícula que consta de 12 columnas del mismo tamaño. Los elementos HTML están ordenados para cubrir cantidad diferente columnas. De esta manera se crean diseños personalizados. Cada pieza de contenido está alineada con esta cuadrícula a través de un número específico de columnas que se extienden.
He aquí un ejemplo:
En este ejemplo, creamos una cadena. Después de eso, se colocaron en él dos columnas del mismo tamaño. Cada uno cubre seis de las doce columnas disponibles.
código HTML:
Muy pronto:
Y esto es lo que obtuve:
Se ve bien. Y al diseñar un sitio web desde PSD, ni siquiera necesitas editar el archivo CSS. Pero no ves lo que sucede dentro.
Caja flexible
Clásicos del mañana
Usaremos Flexbox para crear la sección Taquilla del sitio. Aquí está el código HTML:
- Cenicienta: 67,9 millones de dólares
- Ejecutar toda la noche: 11,0 millones de dólares
- Kingsman: El servicio secreto: 6,2 millones de dólares
- Enfoque: 5,7 millones de dólares
- Chappie: 5,7 millones de dólares
- McFarland EE.UU.: 3,6 millones de dólares
- El DUFF: 2,9 millones de dólares
- Francotirador americano: 2,8 millones de dólares
Aquí está el código CSS para el contenedor "boxoffice":
#boxoffice (ancho: 780px; alto: 500px; imagen de fondo: url(../images/box_office_cropped.jpg); repetición de fondo: portada; radio de borde: 5px; relleno: 20px;)
Ahora es el momento de crear un contenedor flexible. Para hacer esto necesita configurar para elemento de visualización:doblar. De acuerdo con las reglas de diseño, todos los elementos de Flexbox están ubicados a lo largo de los ejes principal y transversal:
Para Flexbox, se establecen dos tipos de propiedades. El primero se usa para administrar el contenedor flexible, el segundo se usa para llenar elementos flexibles. Echemos un vistazo más de cerca al primer tipo.
De forma predeterminada, el eje principal es horizontal, por lo que los elementos se estirarán en una fila. Para cambiar el eje principal podemos usar la propiedad flex-direction. Puede tomar los siguientes valores: fila, fila inversa, columna y columna inversa. Usaremos el valor de la columna. agreguemos también propiedad de altura. Comprenderá por qué es necesario esto un poco más adelante:
contenedor flexible (altura: 300 px; pantalla: flex; dirección flexible: columna;)
Así luce nuestra pequeña taquilla:
Usamos la propiedad de altura porque no queremos que el contenedor flexbox se superponga a la imagen de la flecha en la parte inferior del fondo.
Flexbox también le brinda la posibilidad de realizar cambios en el contenido sin cambiar el archivo HTML. Por ejemplo, si desea invertir el diseño de los elementos, puede cambiar el valor de dirección flexible a columnas inversas. Esto invertirá la dirección del flexbox. Pero también necesitarás cambiar el orden de los elementos dentro del contenedor.
Para hacer esto usamos la propiedad justify-content. Los valores disponibles para ello son flex-start, flex-end, center, space-between y space-around. Debe configurarse en justify-content, que es equivalente a flex-end.
Aquí está nuestro código:
Contenedor flexible (altura: 300 px; pantalla: flex; dirección flexible: columna inversa; justificar contenido: extremo flexible;)
Y así se reflejaron estos cambios:
También puede mover elementos a lo largo del eje transversal. Para ello se utiliza la propiedad align-items. Puede configurarlo con los siguientes valores: inicio flexible, final flexible, centro, línea base o estiramiento.
Para usarlo, agregue una propiedad al selector de flexbox:
Contenedor flexible (alinear elementos: extremo flexible;)
Todos los elementos se moverán hacia el borde derecho:
Hay otra propiedad útil: flex-wrap. Imaginemos que la taquilla se expande rápidamente. ¿Qué pasa si se vuelve más grande que el contenedor? No hay nada de malo si usas la propiedad flex-wrap.
Intente agregar el siguiente código:
Contenedor flexible (altura: 300 px; pantalla: flex; dirección flexible: columna; envoltura flexible: envoltura;)
Y este es el resultado:
Como puede ver, los elementos ahora están apilados en varias columnas. El valor predeterminado para esta propiedad es nowrap. Cuando se aplica, los elementos se organizarán en una columna ( o una línea - depende del valor de la dirección flexible). Puede utilizar el valor de ajuste inverso. Luego los elementos se ordenarán en orden inverso.
hay muchos propiedades útiles. Con su ayuda, puedes cambiar los parámetros de cada elemento individual del contenedor. Por ejemplo, la propiedad de orden le permite cambiar el orden de los elementos sin tener que cambiar el código HTML.
¿Qué método deberías elegir?
Mesas. Las tablas no se utilizan en el diseño de página válido. Ensucian el código. Las tablas no son tan fáciles de usar como parece. Si todavía no está decidido a utilizar tablas para el diseño de su página, eche un vistazo a este sitio.
Pero pueden ser útiles si estamos hablando de sobre el diseño correos electrónicos. No hay tantos navegadores que la gente utilice hoy en día, pero simplemente hay una gran cantidad de agentes de correo electrónico. Escritorio, en línea y aplicaciones moviles Utilice diferentes motores de visualización. Las tablas HTML tienen el mismo aspecto en todos ellos. Por eso es gran opción para el diseño de correos electrónicos.
Flotar La propiedad flotante es mejor elección, si sus requisitos no son demasiado altos. Esta es una manera fácil de hacer que su sitio web sea más atractivo. Su uso para imágenes es, en mi opinión, una señal de buen gusto. Sólo necesitas recordar cómo funcionan. propiedades flotantes y claro. Esto es suficiente para empezar.
Hablando de sus desventajas, debemos admitir que los elementos flotantes están ligados al flujo del documento, y esto puede reducir significativamente su flexibilidad.
Marcos CSS. Si necesita crear un diseño rápidamente, utilice marcos. Hoy en día hay muchos de ellos. Entre ellos, elige el que más te convenga.
Caja flexible. Tendrás que dedicar algo de tiempo a aprender cómo funciona. Creo que ya comprende lo convenientes que son las cajas flexibles para administrar elementos individuales.
Gravemente
