Hola visitante de diseño web Alicante y Murcia - DwAlicante, Le presentamos los mejores proyectos y formatos gráficos de alta calidad con un montón de características.

 

En pocas palabras, nos referimos a la maquetación web en Alicante a pasar el diseño a código HTML, poniendo cada cosa en su lugar (una cabecera, un menú, etc.).

Hasta hace unos años la única manera de maquetar una página web era mediante tablas HTML <table>, o frames, pero esto tenía muchas desventajas y limitaciones, por eso la técnica de maquetación web fue evolucionando con los años hasta llegar al punto donde no se usan tablas, si no capas (los famosos DIVs) a las que se le dan formato mediante CSS.

 

¿Capas, layouts, divs? ¿que es eso?

Las capas, layouts o divs son la misma cosa con distinto nombre, para tener un concepto mental más fuerte de lo que son en una maquetación web, podemos imaginarlos como contenedores o bloques donde podemos meter lo que queramos dentro (imágenes, texto, animaciones, otro bloque, o todo al mismo tiempo) a los que se le asigna un ancho, alto y posición, de esta manera se van a ir posicionando consiguiendo maquetar la estructura de la página web que queremos.

Veamos un ejemplo gráfico:

como maquetar un proyecto

Como podemos ver, tenemos 3 capas estructuradas de la siguiente manera para realizar la maquetación web:

Capa 1: Es la capa principal y contenedora

Capa 2: Capa dentro de la capa contenedora 1 y alineada a la izquierda (float:left;)

Capa 3: Igual que la capa 2, solo que tiene un margen con respecto a esta última (float:left; margin: 10px; ya veremos esto más en detalle).

 

Creando nuestro primer DIV

La técnica de maquetación web para crear una capa DIV es así:

<div> </div>

Recuerda que todo contenido visible de la página debe ir entre las etiquetas <body></body>

Con el código HTML completo quedaría así:

ejemplo de maquetación

 

Como darle formato a un DIV con estilos CSS

Para darle formato y maquetar un DIV tenemos que identificarlo de alguna forma, para esto existe el atributo ID, en el pondremos el nombre del DIV para luego llamarlo desde la hoja de estilos, la forma de escribirlo es así:

<div id="capa1">¡Esta es mi primer capa!</div>

Como podemos ver en esta maquetación web, a esta capa le pusimos "capa1" de nombre, ahora solo nos falta abrir la hoja de estilos que creamos y llamarlo de esta manera:

 #capa1{ background-color:green; }

esto hará que el color de fondo de esa capa sea verde, ofreciendo el navegador el siguiente resultado.

¡Esta es mi primer capa!

Como vemos en esta maquetación web, el color se estira, esto es porque no le definimos un ancho determinado, para hacerlo bien agregaremos el atributo width a #capa1 de la siguiente forma:

 

#capa1{
    width:210px;
    background-color:green;
}

Simple, le agregaremos el atributo height con el valor en pixeles que queramos, de esta forma:

 

#capa1{
    width:210px; 
height:300px;
background-color:green; }

maquetar div

Con esto ya tendremos una especie de rectángulo verde donde podremos agregar texto como queremos.

 

Flotar y acomodar un DIV

Las técnicas maquetación web por divs CSS se basa en "flotar" unas capas dentro de otras para conseguir la estructura que queremos, para esto se utiliza la propiedad float. Esta propiedad se utiliza para flotar los bloques, podemos utilizarla con los siguientes valores:

none: no flota la capa.

left: flota la capa hacia la izquierda.

right: flota la capa hacia la derecha.

Siguiendo con el ejemplo, vamos a crear otra capa #capa2, le vamos a aplicar otro color de fondo con el mismo alto y ancho pero vamos a flotar ambas capas hacia la izquierda, quedando así:

#capa1{
        width:210px; 
	height:300px; 
	background-color:green; 
float:left; } #capa2{ width:210px; height:300px; background-color:gray; float:left; }

y la parte de la maquetación web que corresponde al código HTML sería este:

maquetar html

Esta forma de maquetar se debería ver mas o menos así:

maquetar html completa

Ahora, ¿que pasa si aplicamos un margen izquierdo a la capa2?

#capa2{
    width:210px; 
    height:300px; 
background-color:gray; float:left; margin-left:10px; }

Este sería el resultado

maquetar html completa1

 

Evitar en una maquetación web que un DIV se superponga con otro

Seguramente cuando estés maquetando tu sitio web necesitarás tener una capa o bloque que no tenga capas a su/s lados, para eso está la propiedad CSS Clear. Esta propiedad se utiliza en conjunto con float y sirve para evitar que una capa se posicione a cualquiera de los lados, los valores que admite son estos:

left: No deja que una capa flote a la izquierda.

right: Evita que una capa flote a la derecha.

both: Evita que haya capas flotantes en cualquiera de sus lados.

Yo lo usaré en esta maquetación web para crear, por ejemplo, el pie de página siguiendo con el ejemplo anterior, vamos a crear una tercer capa #capa3 y le aplicaremos esta propiedad, añadiremos un ancho de 430 pixeles y un alto de 30 pixeles, también le aplicaremos un color de fondo naranja.

#capa3{
    width:430px; 
    height:30px;
    background-color:orange; 
    float:left;
    clear:both;
}

El código HTML a maquetar quedaría así:

maqueta con footer

Esto dará como resultado algo parecido a esto:

ejemplo maqueta con footer

Ahora vamos a agregar  un margen superior para separar un poco el pie de pagina (#capa3) de las demás capas o divs para mejorar la maquetación web de este ejemplo.

#capa3{
    width:430px; 
height:30px; background-color:orange;
float:left; clear:both;
margin-top:10px; }

Quedando nuestra weeb a maquetar de la siguiente forma:

maqueta final

 

Vamos a maquetar una página con la siguiente estructura:

Esta será la estructura de nuestra maquetación web.

Cabecera: aquí puede ir un logo o el nombre de tu página web

Barra lateral: podemos poner un menú vertical con listas HTML

Contenido: donde irá el contenido de la web

Pie de página: El uso general de este apartado en cualquier maquetación web es el de desde poner el copyright  del autor hasta enlaces recomendados, etc.

Este será nuestro layout.

layout

 

Maquetar el contenedor general con CSS

La primera capa de nuestra maquetación web que tendremos que crear es un contenedor general, al que le aplicaremos un ancho y alto fijo para todo el sitio. Para este ejemplo lo haremos con estas medidas: Ancho: 900 pixeles y Alto: 400 pixeles.

Sabiendo esto podemos ponernos manos a la obra, para empezar a maquetar, crearemos el archivo estilos.css y dentro de este archivo pondremos los estilos para el DIV que llamaremos "contenedor", sería algo asi:

#contenedor {
     width: 900px; 
     height: 400px;
}

Ahora creamos el archivo HTML (index.html) y comenzamos a armar las capas de la maquetación web, por ahora solo tenemos que llamar a la capa "contenedor", así:

fase1

Ya tenemos el contendor general, ahora maquetaremos la cabecera.

 

Maquetar cabecera con CSS

Teniendo el contenedor general y siguiendo el diagrama de maquetación web que vimos antes, es hora de crear la cabecera de nuestro sitio, a esta le asignaremos el alto que queremos que tenga, siempre dentro de los límites que definimos en el contenedor general, obviamente usaremos mucho menos, solo 50 pixeles, y también un color de fondo (verde) para ir notando cada capa, quedando así:

#cabecera {
    background-color: green; 
    height:50px; 
    padding:5px;
}

y llamamos a esta capa desde el código HTML, pero ojo, tiene que ir dentro de la capa contenedora, así:

fase2

 

Maquetar la barra lateral con CSS

Llegó la hora de crear la capa de la barra lateral, donde pondremos un menú o lo que necesitemos en nuestra maquetación web. En esta capa, además de agregar otro color de fondo, comenzaremos a utilizar la propiedad float para flotar la barra a la izquierda, además de establecer un ancho y alto que utilizará la capa a maquetar.

#barra-lateral {
    background-color: orange; 
	float: left;
    width:140px; 
	height:100%;
}

Si no queremos que ocupe todo el alto de la página solo ponemos una cantidad de pixeles determinada, sin porcentajes. El HTML de nuestra maquetación web quedará así:

fase3

Ya nos falta muy poco…

 

Maquetar contenido con CSS

Al igual que la capa de la barra lateral, definiremos en nuestra maquetación web los mismos atributos solo que cambiaremos algunos valores como el ancho (el contenido ocupa más lugar) y el color de fondo (para distinguir donde empieza y termina la capa).

#contenido {
    background-color: gray; 
    float:left; 
    width:760px; 
    height:100%;
}

y en el HTML a maquetar agregamos la capa debajo de la barra lateral:

fase4

Ya solo nos queda maquetar el pie de página y es hora de que le des tus toques finales a esta maquetación web.

 

Maquetar pie de página CSS

En el pie de página utilizaremos la propiedad clear que comentamos anteriormente, también definiremos un color de fondo y la misma altura que la cabecera:

#pie {
     background-color: blue; 
height:50px; clear: both; }

Finalmente el HTML quedaría así:

fase5

 

RETOQUES FINALES CSS DE LA MAQUETACIÓN WEB

Para maquetar los retiques finales,vamos a hacer que la presentación de nuestra página de ejemplo quede centrada en el navegador, vamos a darle un color blanco a lo textos y que esten en negrita para que resalten más, para ello escribiremos en nuestro archivo estilos.css el siguiente código.

body{
	width:70%;
	margin: 0 auto;
	color:white;
	font-weight: bold;
	margin-top: 4%;
}

este sera el resultado en nuestro navegador.

fase final

Y con esto ya hemos visto un pequeño ejemplo de técnicas de maquetación web y como se utiliza HTML y CSS para maquetar cualquier tipo de página web.

Comentarios

Usted tiene 1 Comentarios en esta noticia

  
Pedro Responder Sep 03, 2017
Muy interesante el artículo www.criticon.es

Escriba un comentario

Deje aquí su comentario respetando las normas de buena conducta.

Código de seguridad
Refescar