Este es el Manual de Maquetación CSS en el que enseñaremos a maquetar páginas web utilizando únicamente CSS, la práctica común para este tipo de trabajo.
La maquetación CSS es fundamental y se contrapone a la maquetación antigua que se realizaba en la web, basada en tablas. Desde hace ya años CSS aporta todas las posibilidades para realizar una maquetación moderna y versátil de los contenidos.
En este manual encontrarás sobre todo práctica, ya que se supone que para maquetar con CSS debe de tener un conocimiento al menos básico de las Hojas de Estilo en Cascada. Por tanto, en lugar de explicaciones teóricas sobre atributos y sus valores, encontrarás ejercicios diversos de maquetación CSS que podrán venirte bien para practicar.
En el manual encontrarás técnicas de todo tipo, desde las tradicionales en CSS con floats, que se conocía como tableless y que fue la primera herramienta disponible para posicionar los contenidos en filas y columnas, hasta la maquetación más moderna basada en estándares CSS 3 como Flexbox y CSS Grid Layout.
Artículos del manual
-
Qué técnicas existen para hacer maquetación CSS
Comenzamos por poner en contexto la maquetación de páginas web con CSS, explicando cuáles son las diversas técnicas que existen en la actualidad para hacer la distribución de los contenidos en filas y columnas en una página web.
-
1
Introducción a la maquetación con CSS
La maquetación con CSS es fundamental a la hora de obtener unos resultados de calidad en el diseño de tu página web y te simplificará la vida, no sólo al crear la web, sino también a la hora de mantenerla.
-
2
Por qué diseñar con CSS
Mostramos algunas ventajas al maquetar con CSS respecto a otras formas de hacerlo.
-
Maquetación tableless con floats
En estos artículos veremos una práctica de maquetación CSS que surgió con CSS 2, cuando nos entregaron las herramientas necesarias para poder maquetar sin tablas. En estos artículos usamos la técnica de los float, que actualmente no es la más sencilla, ya que posteriormente con CSS 3 aparecieron estándares más potentes para la maquetación.
-
3
Tutorial básico para maquetar una página con CSS
Tutorial para maquetar una página web utilizando CSS en lugar de tablas.
-
4
Variar el diseño y maquetación con la hoja de estilos
Continuamos el taller de maquetación con CSS. Creamos un diseño distinto, que aplicamos al ejemplo realizado anteriormente, cambiando solamente la hoja de estilos.
-
5
Maquetación CSS a dos columnas
Mostramos cómo hacer una página web maquetada utilizando únicamente CSS, sin tablas, con una distribución de 2 columnas, una cabecera y un pie de página. Con diseño de anchura fija o fluido.
-
6
Maquetación CSS a tres columnas
Veamos cómo hacer una página, maquetada únicamente con Hojas de Estilo en Cascada, compuesta por tres columnas. Con diseño de anchura fija y fluido.
-
7
Variación de la maquetación con CSS a 3 columnas
Mostramos una mejora al código mostrado anteriormente para maquetar una página con CSS a tres columnas.
-
Maquetación avanzada con Flexbox y CSS Grid Layout
Ahora vamos a ver prácticas más modernas de maquetación CSS, en las que usamos nuevas capacidades del estándar para maquetar más fácilmente y de manera más versátil.
-
8
Maquetación CSS usando Flexbox
Veamos una primera maquetación CSS usando el estándar de Flexbox y podrás apreciar que todo lo que hemos visto hasta ahora se vuelve más sencillo, solo tienes que conocer Flexbox para disfrutar maquetando.
-
9
Maquetación en filas y 100% height con CSS Grid Layout y Flexbox
Veremos un ejercicio muy particular de maquetación CSS en el que tenemos ocupado el 100% de la altura y los elementos se distribuyen en filas en la vertical.
Descargas
-
Descarga Manual Maquetación CSS Esta es la descarga del Manual de Maquetación CSS. En la descarga podrás obtener los manuales generados en distintos formatos de libros electrónicos.
Archivos disponibles: PDF, ePup, Mobi (Kindle)
Páginas: 38 (Referencia por el archivo PDF)