Maquetación web en Alicante
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 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í:
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;
}
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:
Esta forma de maquetar se debería ver mas o menos así:
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
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í:
Esto dará como resultado algo parecido a esto:
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:
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.
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í:
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í:
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í:
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:
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í:
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.
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.
Puede descargar la ficha de contacto de Diseño Web Alicante para podernos agregar, si lo desea, a su agenda, pulsando en la imagen de la izquierda.
Si usted esta utilizando un dispositivo movil, puede compartir este sitio con sus contactos de WhatsApp pulsando en la imagen.
Comentarios
Escriba un comentario
Deje aquí su comentario respetando las normas de buena conducta.