Maquetación Web

Diseño de elementos HTML

Los sitios web suelen mostrar contenido en múltiples columnas (como una revista o periódico).
HTML ofrece varios elementos semánticos que definen las diferentes partes de una página web:
  • <Header> - Define un encabezado de un documento o una sección
  • <Nav> - Define un contenedor de enlaces de navegación
  • <Section> - Define una sección de un documento
  • <Artículo> - Define un artículo independiente autónomo
  • <Aside> - Define el contenido aparte del contenido (como una barra lateral)
  • <Pie de página> - Define un pie de página de un documento o una sección
  • <Detalles> - Define detalles adicionales
  • <Summary> - Define un título del <detalles> elemento



Técnicas de diseño HTML

Hay cuatro maneras diferentes para crear diseños de varias columnas. Cada forma tiene sus ventajas y desventajas:
  • propiedad CSS float
  • FlexBox CSS
  • marco CSS
  • rejilla CSS

La propiedad float para diseño fijo

La propiedad float de CSS permite que los elementos de bloque como las etiquetas "div" o "p" se puedan colocar de forma vertical una al lado de la otra.
Esta float se utiliza para el posicionamiento y el formato de contenido por ejemplo, dejar que un flotador de imagen a la izquierda al texto en un contenedor.
La propiedad float puede tener uno de los siguientes valores:

  • la izquierda - El elemento flota en la parte izquierda de su contenedor
  • El elemento derecha flota a la derecha de su contenedor
  • Ninguno - El elemento no flota (se muestra justo donde se encuentra en el texto). Esto es por defecto
  • heredan - El elemento hereda el valor flotante de su padre
En su uso más sencillo, la propiedad float se puede utilizar para ajustar el texto alrededor de las imágenes. 
En este tipo de diseño se usa la etiqueta "div" para agrupar el contenido
Se debe definir un ancho fijo para el body ej: 960 px y se deben poner a "0" los márgenes de las columnas de los div
Y por último definiremos los márgenes izquierdos y derechos del body a : auto, esto permitirá centrar el contenido de la página independiente de la resolución de pantalla.



maquetación CSS con uso de float

 ejemplo de maquetación (diseño fijo)

Estructura de maquetación con atributo "float"


En este ejemplo se identifican los contenedores principales "header", "nav", "main" y "footer" todos ellos identificables mediante las etiquetas de HTML 5 con el mismo nombre y con referencia de color azúl.

En color verde se identifican los sub contenedores "banner", "logo" y "login" contenidos dentro del header. Estos subcontenedores se deben posicionar con la propiedad de CSS "float" e identificarse por medio de un "Id".
Lo mismo sucede con "aside left", "article" y "aside right" que forman parte del contenedor principal "main"

Se debe tener en cuenta las medidas del contenedor principal 750 x 750 px tamaño del html y calcular matemáticamente restando las medidas proporcionadas menos las del total para saber las que restan.

Por último se debe usar el selector universal de CSS " * " con las medidas de margin: 0; y padding: 0; para que el diseño de la maqueta se visualice correctamente.

tutorial

Comentarios

Publicar un comentario

Entradas populares de este blog

Tipos de listas en HTML

Imagen
Listas HTML  (no ordenadas) y (ordenadas) El lenguaje HTML, ya sea la versión HTML4 o la versión HTML5, posee tres tipos de listas. Las listas no ordenadas , las listas ordenadas y las listas de descripción. ( la veremos más adelante) Cada una de estas listas se crea con una etiqueta específica de HTML: <ul> para la lista no ordenada, <ol> para la lista ordenada   Los elementos de las listas se definen de la siguiente forma. Para la lista no ordenada y la lista ordenada se emplea el elemento <li>. Ul es el acrónimo de unordered list , lista no ordenada. En una lista no ordenada, el orden de aparición de los elementos no es importante. Cada elemento de la lista se define con <li> , que es el acrónimo de list item. Los elementos de la lista se indican con símbolos, como círculos, cuadrados o rombos. En el siguiente ejemplo, vemos el código HTML que produce como resultado la lista no ordenada que figura a continuación       El estilo de u...
Leer más

Enlaces, hipervínculos e imágenes

Imagen
Enlaces, links, hipervínculos Definición y Uso La etiqueta <a> define un hipervínculo, que se utiliza para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del vínculo. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado es subrayada y púrpura Un vínculo activo es subrayada y rojo Enlaces hipervínculos HTML  enlaces HTML son hipervínculos. Puede hacer clic en un enlace y saltar a otro documento. Al mover el ratón sobre un enlace, el puntero del ratón se convertirá en una pequeña mano. Nota:  Un enlace no tiene que ser un texto.  Puede ser una imagen o cualquier otro elemento HTML. video Vínculo a un link externo <a> Vínculo a una imágen  <img src> Abrir un enlace en una nueva ventana del navegador  ...
Leer más

Tablas en HTML

Imagen
Creación de Tablas Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo. Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos: Las tablas de HTML puede contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos. A pesar de que las tablas HTML son fáciles de comprender y utilizar, son uno de los elementos más polémicos de HTML. El problema de las tablas es que no siempre se utilizan adecuadamente. Aunque parezca obvio, las tablas se deben utilizar para mostrar información tabular. Hasta hace unos años, las tablas también se utilizaban para definir la estructura de las páginas web. La cabecera de la página era una fila de una gran tabl...
Leer más