Recorte 1
El fondo de la web (Guardar como bg.png)
Recorte 2
El header de la web (Guardar como header.png)
Recorte 3
El logo (Guardar como logo.png)
Recorte 4
La primera de las dos fotos (Guardar como foto1.png)
Recorte 5
La barra de división (Guardar como bar.png)
Recorte 6
La segunda foto (Guardar como foto2.png)
Recorte 7
Imagen del footer (Guardar como powerm.png)
Colores:
Extraer el color de el borde del header.
Extraer el color de la fuente de la web.
Extraer el color de la mención de un usuario, en este caso "powersh"
.
Código:
Bueno... una vez que tengamos todas las imagenes recortadas y los colores ya es hora de empezar a maquetar la web
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web de prueba</title>
<link rel="stylesheet" href="estilos.css" type="text/css" />
</head>
<body>
</body>
</html>
El 'DOCTYPE HTML PUBLIC' es el código que marca que estamos usando html 4
Si leyeron los dos post de html publicados por mi anteriormente, sabrán que <link rel="stylesheet" href="estilos.css" type="text/css" /> es lo que comunica desde el html a los estilos de la web.
body{
font-family:Helvetica, "Helvetica Neue", Arial, Trebuchet MS; /* La fuente de la letra */
color:#494949; /* El color de la letra */
font-size:13px; /* El tamaño de letra */
background-image:url(images/bg.png); /* El fondo de la web, ya sea imagen o color, en este caso, imagen. */
padding:0; /* Para que el header este pegado bien arriba */
margin:0; /* Para que el header este pegado bien arriba */
}
El div "header" va por arriba del wrap ya que va a abarcar toda la pantalla, sino solo abarcaría 960px, asi que adentro del div "header" pondremos el div "wrap" y dentro del wrap el div "logo"
CSS:
body{
font-family:Helvetica, "Helvetica Neue", Arial, Trebuchet MS; /* La fuente de la letra */
color:#494949; /* El color de la letra */
font-size:13px; /* El tamaño de letra */
background-image:url(images/bg.png); /* El fondo de la web, ya sea imagen o color, en este caso, imagen. */
padding:0; /* Para que el header este pegado bien arriba */
margin:0; /* Para que el header este pegado bien arriba */
}
.wrap{
width:960px; /* Anchura del div */
height:auto; /* Altura del div, en este caso 'auto' (se va agrandando cada vez que se agreguen cosas) */
margin:0 auto; /* El margen para que quede centrada la web */
}
.header{
width:auto; /* Anchura, 'auto' para que se alargue en cualquier resolución*/
height:113px; /* Altura de la imagen */
background:url(images/header.png); /* Imagen del header */
border-bottom:1px solid #0b4d95; /* Borde inferior del header */
}
.logo{
width:243px; /* Anchura de la imagen 'logo.png' */
height:57px; /* Altura */
background:url(images/logo.png); /* Imagen */
float:left; /* Para que el logo flote a la izquierda */
margin-top:26px; /* Margen de arriba, para que se distancie del header */
}
Ahora tenemos que crear un div contenedor para la sección del resto de la página. Ahora sí, el wrap contiene los divs, en el html tendremos que agregar lo siguiente:
<div class="wrap">
<div class="contenido">
<div class="post">
/* Acá iría el primer post (imagen de arriba) */
</div>
</div>
</div>
div class="post">
<div class="titulo">
<h1>FEDERICO LUNA (@DJ_AQUILESS) ITAPEMA</h1>
<div class="info">Enviado por <a href="#" class="usuario">powersh</a> - <b>22/04/2012 08:20 p.m</b></div>
</div>
<div class="textpost">
<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing <b>Lorem
Ipsum</b> passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of <b>Lorem Ipsum</b>. As
opposed to using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now use Lorem
Ipsum as their default model text, and a search for 'lorem ipsum' will uncover
many web sites still in their infancy. Various versions have evolved over the
years, sometimes by accident, sometimes on purpose (injected humour and the like).
<b>There are many variations of passages of Lorem Ipsum available, but the majority
have suffered alteration in some form, by injected humour, or randomised words
which don't look even slightly believable. If you are going to use a passage of
Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators.<b>
</div>
<img src="images/foto1.png" style=float:right;>
</div>
<div class="bar"></div>
<div class="post">
<div class="titulo">
<h1>FEDERICO LUNA (@DJ_AQUILESS) VOANDO EM BOMBAS</h1>
<div class="info">Enviado por <a href="#" class="usuario">powersh</a> - <b>22/04/2012 08:14 p.m</b></div>
</div>
<img src="images/foto2.png" style=float:left;>
<div class="textpost" style=float:right;>
<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing <b>Lorem
Ipsum</b> passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of <b>Lorem Ipsum</b>. As
opposed to using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now use Lorem
Ipsum as their default model text, and a search for 'lorem ipsum' will uncover
many web sites still in their infancy. Various versions have evolved over the
years, sometimes by accident, sometimes on purpose (injected humour and the like).
<b>There are many variations of passages of Lorem Ipsum available, but the majority
have suffered alteration in some form, by injected humour, or randomised words
which don't look even slightly believable. If you are going to use a passage of
Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators.</b>
</div>
</div>
<div class="bar"></div>
<div class="footer">
<div class="infofooter">
© 2012. <b>Nombre de la web</b>. Todos los derechos reservados.
<img src="images/powerm.png" style=float:right;>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
El clearfix sirve para fixear un elemento flotante que está dentro de un div contenedor que dicho div no va a forzar automaticamente la altura del contenedor, por eso es que hay que fixearlo con la clase .clearfix
CSS:
.contenido{
width:auto;
height:auto;
margin-top:15px; /* Margen de arriba */
}
.post{
width:960px;
height:auto;
float:left; /* Flota a la izquierda */
margin-bottom:30px; /* Margen de abajo */
}
.textpost{
line-height:1.5; /* Espacio entre oraciónes */
text-shadow:0px 1px 0px #FFF; /* Sombra solida de 90 grados (1px) */
width:480px;
float:left;
font-weight:normal; /* Grosor de la letra: normal */
}
.clearfix{ /* Fix altura*/
width:auto;
height:auto;
background:transparent; /* Fondo transparente, invisible. */
clear:both; /* Fixea la altura del div. */
}
.titulo{
text-shadow:0px 1px 0px #FFF; /* Sombra solida de 90 grados (1px) */
margin-bottom:10px; /* Margen de 10px */
}
h1{
font-size:25px; /* Tamaño de letra */
font-weight:bold; /* Grosor de la letra: bold (negrita) */
}
.info{
margin-top:-15px; /* Margen negativo */
}
a.usuario:link{
color:#c3361f;
text-shadow:0px 1px 0px #FFF;
text-decoration:none; /* No tiene texto subrayado */
font-weight:bold;
}
a.usuario:visited{
color:#c3361f;
text-shadow:0px 1px 0px #FFF;
text-decoration:none; /* No tiene texto subrayado */
}
a.usuario:hover{
text-decoration:underline; /* Tiene texto subrayado */
}
.bar{
width:936px;
height:6px;
background:url(images/bar.png);
float:left;
margin-bottom:7px;
}
.footer{
width:960px;
height:auto;
font-weight:normal;
text-shadow:0px 1px 0px #FFF;
padding:25px 0; /* Padding de arriba y abajo: 25px */
float:left;
}
Códigos:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web de prueba</title>
<link rel="stylesheet" href="estilos.css" type="text/css" />
</head>
<body>
<div class="header">
<div class="wrap">
<div class="logo"></div>
</div>
</div>
<div class="wrap">
<div class="contenido">
<div class="post">
<div class="titulo">
<h1>FEDERICO LUNA (@DJ_AQUILESS) ITAPEMA</h1>
<div class="info">Enviado por <a href="#" class="usuario">powersh</a> - <b>22/04/2012 08:20 p.m</b></div>
</div>
<div class="textpost">
<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing <b>Lorem
Ipsum</b> passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of <b>Lorem Ipsum</b>. As
opposed to using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now use Lorem
Ipsum as their default model text, and a search for 'lorem ipsum' will uncover
many web sites still in their infancy. Various versions have evolved over the
years, sometimes by accident, sometimes on purpose (injected humour and the like).
<b>There are many variations of passages of Lorem Ipsum available, but the majority
have suffered alteration in some form, by injected humour, or randomised words
which don't look even slightly believable. If you are going to use a passage of
Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators.<b>
</div>
<img src="images/foto1.png" style=float:right;>
</div>
<div class="bar"></div>
<div class="post">
<div class="titulo">
<h1>FEDERICO LUNA (@DJ_AQUILESS) VOANDO EM BOMBAS</h1>
<div class="info">Enviado por <a href="#" class="usuario">powersh</a> - <b>22/04/2012 08:14 p.m</b></div>
</div>
<img src="images/foto2.png" style=float:left;>
<div class="textpost" style=float:right;>
<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing <b>Lorem
Ipsum</b> passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of <b>Lorem Ipsum</b>. As
opposed to using 'Content here, content here', making it look like readable
English. Many desktop publishing packages and web page editors now use Lorem
Ipsum as their default model text, and a search for 'lorem ipsum' will uncover
many web sites still in their infancy. Various versions have evolved over the
years, sometimes by accident, sometimes on purpose (injected humour and the like).
<b>There are many variations of passages of Lorem Ipsum available, but the majority
have suffered alteration in some form, by injected humour, or randomised words
which don't look even slightly believable. If you are going to use a passage of
Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem Ipsum generators.</b>
</div>
</div>
<div class="bar"></div>
<div class="footer">
<div class="infofooter">
© 2012. <b>Nombre de la web</b>. Todos los derechos reservados.
<img src="images/powerm.png" style=float:right;>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
CSS:
body{
font-family:Helvetica, "Helvetica Neue", Arial, Trebuchet MS; /* La fuente de la letra */
color:#494949; /* El color de la letra */
font-size:13px; /* El tamaño de letra */
background-image:url(images/bg.png); /* El fondo de la web, ya sea imagen o color, en este caso, imagen. */
padding:0; /* Para que el header este pegado bien arriba */
margin:0; /* Para que el header este pegado bien arriba */
}
.wrap{
width:960px; /* Anchura del div */
height:auto; /* Altura del div, en este caso 'auto' (se va agrandando cada vez que se agreguen cosas) */
margin:0 auto; /* El margen para que quede centrada la web */
}
.header{
width:auto; /* Anchura, 'auto' para que se alargue en cualquier resolución*/
height:113px; /* Altura de la imagen */
background:url(images/header.png); /* Imagen del header */
border-bottom:1px solid #0b4d95; /* Borde inferior del header */
}
.logo{
width:243px; /* Anchura de la imagen 'logo.png' */
height:57px; /* Altura */
background:url(images/logo.png); /* Imagen */
float:left; /* Para que el logo flote a la izquierda */
margin-top:26px; /* Margen de arriba, para que se distancie del header */
}
.contenido{
width:auto;
height:auto;
margin-top:15px; /* Margen de arriba */
}
.post{
width:960px;
height:auto;
float:left; /* Flota a la izquierda */
margin-bottom:30px; /* Margen de abajo */
}
.textpost{
line-height:1.5; /* Espacio entre oraciónes */
text-shadow:0px 1px 0px #FFF; /* Sombra solida de 90 grados (1px) */
width:480px;
float:left;
font-weight:normal; /* Grosor de la letra: normal */
}
.clearfix{ /* Fix altura*/
width:auto;
height:auto;
background:transparent; /* Fondo transparente, invisible. */
clear:both; /* Fixea la altura del div. */
}
.titulo{
text-shadow:0px 1px 0px #FFF; /* Sombra solida de 90 grados (1px) */
margin-bottom:10px; /* Margen de 10px */
}
h1{
font-size:25px; /* Tamaño de letra */
font-weight:bold; /* Grosor de la letra: bold (negrita) */
}
.info{
margin-top:-15px; /* Margen negativo */
}
a.usuario:link{
color:#c3361f;
text-shadow:0px 1px 0px #FFF;
text-decoration:none; /* No tiene texto subrayado */
font-weight:bold;
}
a.usuario:visited{
color:#c3361f;
text-shadow:0px 1px 0px #FFF;
text-decoration:none; /* No tiene texto subrayado */
}
a.usuario:hover{
text-decoration:underline; /* Tiene texto subrayado */
}
.bar{
width:936px;
height:6px;
background:url(images/bar.png);
float:left;
margin-bottom:7px;
}
.footer{
width:960px;
height:auto;
font-weight:normal;
text-shadow:0px 1px 0px #FFF;
padding:25px 0; /* Padding de arriba y abajo: 25px */
float:left;
}
Resultado del maquetado:
