Manual de Maquetación CSS
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.
Comentarios
Enviar un comentario al manual
abeldmv
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...
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
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.
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!
¡Un saludo a todo el equipo de DesarrolloWeb!
Frank
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
carlos
miguel22
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?