Manual de Maquetación CSS

Manual en el que enseñaremos a maquetar páginas web utilizando únicamente CSS, en lugar de tablas, lo que también se conoce como Maquetación Tableless.

Ver los capítulos

Si te parece útil este manual ayúdanos compartiendo!! :)

Descargar como libro electrónico

Este texto 'Manual de Maquetación CSS' se encuentra disponible para descarga como libro electrónico. Ideal para imprimir o leer en el ordenador personal, dispositivos y eReaders.

Puedes acceder a través de la App de DesarrolloWeb.com

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.

3.- Maquetar una página con CSS

Tutorial para maquetar una página web utilizando CSS en lugar de tablas.

4.- Maquetar una página con CSS II

Explicamos la creación de la cabecera de la página, que se simplificará al máximo para hacer el ejercicio más facil.

5.- Maquetar una página con CSS III

Realizamos la maquetación del área del cuerpo, donde se mostrará el contenido de la página.

6.- Maquetar una página con CSS IV

Creamos el lateral de la página, donde se muestran varios recuadros con un buscador y acceso a otras informaciones.

7.- Maquetar una página con CSS V

Para acabar, vamos a crear un pie de página y un borde enmarque la página. Ofreceremos también unas conclusiones del ejercicio.

8.- 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.

9.- 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.

10.- 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.

11.- 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.

12.- Maquetar una página con un mapa de Google, usando CSS

Es muy fácil maquetar una página que tenga un mapa de Google, simplemente debemos utilizar maquetación y posicionamiento CSS.

13.- Presentación de 960 Grid System

Introducción a la maquetación de páginas web usando CSS con el sistema 960 Grid.

14.- Blueprint, Framework CSS

Presentación de Blueprint, un framework CSS que sirve de apoyo en el diseño y maquetación de webs 2.0, gracias a su rejilla y otros estilos de tipografía e impresión.

Descargas

Este manual puedes descargarlo en formato amigable para impresión y lectura en dispositivos a través de la App de DesarrolloWeb.com.

Compartir

Comentarios

07/4/2010
Hola
Muy útil este manual. Agradecido.

abeldmv

14/4/2010
Hola
¿¿cómo puedo descargarlo??

Gracias!

earboledac

16/4/2010
Excelente!!!
es un muy buen trabajo, las explicaciones son muy claras y lo mejor es que nos muestran el resultado para entender mejor los ejemplos.

Muchas Gracias...

Nery_Nicolas

19/4/2010
Consulta
Muy buen compendio para parender el que te mandaste Miguel.

Quiero consultarte si es buena idea trabajar, para programar, con la vista de código de Dreamwever. Dado que en vista de diseño te agrega cosas.

Sino me cambio al Komodo Edit que te vi usar acá.

Saludos

ShinChan

29/10/2010
Opinar y hacer una sugerencia
El manual está muy bien, me ha ayudado bastante más que los apuntes de mi profesor de la facultad.

Podríais incluir las imágenes de como queda el código dentro del manual, al menos en la versión en PDF, para así en caso de imprimirlo, ver los resultados sin tener que encender el ordenador.

DOMI

21/10/2011
exelente!!!
hola soy principiante en el uso de css 7y los manuales son muy claros gracias!!!!!

FutuzorMekkla

03/12/2011
¡Muy bien currado!
Ante todo quisiera daros las gracias por curraros este artículo. La verdad es que me lo leí bastante rápido pero al final he terminado pillando el tranquillo a esto de la maquetación CSS. Lo malo es que haya que pagar para bajarse los manuales pero en fin, es lo que hay.

¡Un saludo a todo el equipo de DesarrolloWeb!

Frank

28/12/2011
Descagar
man como descargo el manual

einer serrano

06/4/2012
comentario
excelente trabajo..... definitivamente es un gran aporte para querer aprender aun mas sobre estilos para un sitio web.....excelente material

EUGENIA

23/9/2013
imagen de fondo codigo CSS
Hola!...me gustaria que me explicaran el codigo CSS de cómo colocar la imagen de fondo detras del wrapper y que no me interfiera con los menús y demas cajas de txt...porque ya la he colocado pero los menús y las cajas de txt están a continuación de la imagen...no encima que es como quiero. gracias.

Oriana

24/3/2014
Gracias¡¡¡
Me fue de mucha ayuda esta p;agina, muchas gracias!

carlos

03/7/2014
Como se descarga
Como se puede descargar. No hay forma de registrarse

miguel22

15/9/2014
descarga
estoy registrado y no se puede descargar. Cómo lo descargo? :)

Fran

05/5/2016
tamaño web con div ocultar
Hola, estoy creando una página web con div ocultas y que se muestran y ocultan pal pulsar sobre un botón hasta ahí todo bien. hasta me desplaza el pie de la página cuando es necesario. Pero quiero maquetar la página dejando a derecha e izquierda un margen que va gris mientras que la parte central que contiene texto e imágenes va en blanco. El problema es que cuando me muestra un DIV se desplaza todo hacia bajo, pero solo del dic central, quedándose los de los lados fijo y me queda el espacio gris más arriba en lugar de ajustarse la nuevo tamaño. ¿Cómo puede hacer para que no me pase esto?