Css Layout Generator: plantillas para la web

Una presentación muy habitual para las páginas web es la que está organizada en una plantilla con el siguiente esquema:

  • Cabecera (Header)
  • Columna central (Center Column)
  • Columna derecha (Right Column)
  • Columna Izquierda (Left Column)
  • Pie de página (Footer)

Por supuesto en la configuración pueden estar todos o sólo algunos de estos espacios. Css Layout Generator es una herramienta online -y que pertenece al conjunto de utilidades Css Creator– que facilita la preparación de la plantilla en estilo CSS.

Este es el menú inicial de opciones del que disponemos

En función de los parámetros que vayamos escogiendo se habilitarán unos o se bloquearán otros

Una vez configurada la geometría y los colores de fondo de los espacios pulsamos Generate Layout y el programa nos facilitará dos archivos: uno HTML y otro CSS.

Hacemos clic derecho sobre cada uno y escogemos Guardar enlace como…

En diseño web el estilo CSS puede estar incluido dentro del HTML o ser un archivo independiente que será llamado por el HTML mediante href=”ruta hacia el .css”. Esta última opción es lo más conveniente puesto que deja independientes el contenido (HTML) y el estilo (CSS), por eso Css Layout Creator nos da los dos archivos por separado. Una vez descargados podemos cambiarle el nombre al archivo CSS pero también tendremos que cambiárselo en la ruta href del código HTML.

Un ejemplo sería el siguiente en el que la previsualización es esta:

Para obtener un diseño como ese he escogido los siguientes parámetros:

  1. Hombre, muchas gracias por el enlace.
    Realmente está bastante interesante.
    Saludos

  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: