epelpad

El post que buscas se encuentra eliminado, pero este también te puede interesar

Maquetación - PSD a HTML & CSS | Tutorial [Parte 1]

Maquetación - PSD a HTML & CSS | Tutorial [Parte 1]

html

¡Hola amigos! En mi anterior post, les enseñé como pueden diseñar su propio sitio web en Adobe Photoshop, ahora viene lo divertido, maquetarlo y/o codificarlo, es decir, pasar el archivo .PSD de nuestro diseño a HTML y CSS.

css


Antes de continuar con el post, les aclaro que si necesitan algo, no duden en envíarme un mensaje privado, intentaré responderlo lo más rápido que pueda.
Y ahora sin más que agregar, espero que les guste mi post, y no olvides en seguirme!

codigos

PASO Nº1

Como vieron en mi anterior post, el diseño no lleva muchas imágenes, sólo un pequeño logo con el nombre de nuestro sitio, por lo tanto sólo tendremos que hacer el siguiente recorte.
Les sugiero que antes de empezar, hagamos una carpeta en dónde guardaremos el diseño, y dentro de ésta misma carpeta, van a crear una nueva llamada "images", allí irán todos nuestras imágenes, que en éste caso es una sóla.
Guardan la siguiente imagen como "logo.png"

hosting

Luego con la "Herramienta Cuentagotas" extraen el color del texto, fondo, menú, títulos, borde del cuerpo.
Ya tenemos nuestras imágenes y cólores html, ahora podemos empezar el maquetado de la web!

psd

PASO Nº2

Creamos un nuevo documento llamado "index.html", yo recomiendo hacerlo con 'Notepad++' aunque pueden sin ningún problema hacerlo con un 'Bloc de notas' o 'Notepad'. Introduceremos el siguiente código que sera fundamental para la construcción de nuestra estructura.

gratis

Recuerden que "<link rel="stylesheet" href="styles.css" type="text/css" />" será el enlance y/o relación entre nuestro documento html con nuestra hoja de estilo o archivo css, por lo cual es muy importante.

<!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>N3sbt</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>

<body>

</body>
</html>


maquetacion

PASO Nº3

Vamos a crear un nuevo documento llamado "styles.css" e ingresaremos el siguiente código, con el cuál podremos el color de fondo de la página; color, tipo, y tamaño de la fuente; y mucho más.

site

body{
font-family:"Helvetica Neue", Arial, Trebuchet MS; 
color:#606060;
font-size:14px;
padding:0; 
margin:0; 
background-color: #e5e5e5;
}


Maquetar

PASO Nº4

HTML
Vamos a empezar a añadir nuestro correspondiente logo, y recuerden que todo lo que agregaremos a partir de ahora, debe estar entre las etiquetas <body> y <html>, como en la siguiente imagen.

dise�o

<div class="header">
<div class="wrap">
<div class="logo">

</div>
</div>
</div>


CSS
Y en referencia a nuestro archivo CSS, pegaremos el siguiente código, que nos permitirá que el "wrap" sólo ocupe un determinado porcentaje de la pantalla en total, por lo que, de ésta forma podremos organizar nuestro contenido más adelante. ¡Lo pegan junto al código que añadimos anteriormente!

Maquetación - PSD a HTML &amp; CSS | Tutorial [Parte 1]

.wrap{
width:60%; 
height:auto; 
margin:0 auto; 
}

.header{
width:100%;
height:auto;
padding-top:30px;
padding-bottom:30px;
}

.logo{
width:100%; 
height:71px; 
background:url(images/logo.png) no-repeat;
}


html

PASO Nº5

HTML
Ahora llegó el momento de colocar nuestro menú horizontal, puede parecer difícil pero más adelante estoy seguro que les resultará fácil. Así que en nuestro documento HTML, pegaremos el siguiente código, y después de ésto nos debe quedar como en la siguiente imagen. ¡El código debe estar dentro del div "logo"!

En dónde aparece el signo "#" lo editan, colocando el URL a donde dirigirá la página al presionar, por ejemplo en "INICIO" o "NOTICIAS", eso también lo pueden editar, obviamente.

css

<div id='navbar'>
<ul>
   <li class='active'><a href='#'><span>INICIO</span></a></li>
   <li><a href='#'><span>NOTICIAS</span></a></li>
   <li><a href='#'><span>PORTAFOLIO</span></a></li>
    <li><a href='#'><span>RECURSOS</span></a></li>
</ul>
</div>


CSS

Mientras tanto, en el documento .css colocan lo siguiente, ésto servirá para modificar la apariencia del menú, como el tamaño y color de fuente, espaciado entre los links, etc.

codigos

#navbar ul{
    list-style-type:none;
    height:auto;
    font-size:16px;
    text-align:center;
    margin:0;
    float:right;
    padding-bottom:30px;
    padding-top:36px;
}

#navbar li
{
    display: inline;
    margin:0;
    padding:0px 0px 0px 28px;
    font-weight:bold;
}
    
#navbar li a
{
    color:#b1b1b1;
    text-decoration:none;
}

Con éste otro código le darán al menú el efecto "active" y "hover" del menú.

hosting

#navbar li a:hover
{    
    color:#5a5a5a;
    height:22px;
    background:transparent url(nav_bg.png) 0px -30px no-repeat;        
}
    
#navbar li.active a
{
    height:22px;
    background:transparent url(nav_bg.png) 0px -30px no-repeat;    
    margin:0;
    background-color:#1fb4d9;
    color:#fff;
    padding:5px;
    border-radius:5px;
}


psd

PASO Nº6

HTML
En éste paso, llegó el turno de crear el cuadro, en donde irá todo nuestro contenido, los textos, etc. Para ese ingresaremos un contenedor el cuál estará dentro del "wrap" para que no ocupe toda la pantalla, sino cierta parte. Lo pegan en el documento html entre las etiquetas <body> y <html> y luego del div "header".

gratis

div class="wrap">

<div class="content">
</div>

</div>


CSS
Mientras tanto, en nuestro documento css pegan lo siguiente, para darle estilo a nuestro contenedor!

maquetacion

.content{
width:auto;
height:auto;
background-color:#f8f8f8;
border:1px solid #d9d9d9;
min-height:100px;
}


site

PASO Nº7

HTML
Vamos a armar el pie de página y para eso vamos a colocar el siguiente código, obviamente pueden editarlo.

Maquetar

<div class="footer">
<div class="wrap">
&copy; 2013. <b>Nesbet</b>. Todos los derechos reservados.<br/>
Contacto:[email protected]
</div>
</div>


CSS
Para editar la apariencia de nuestro pie de página, en el archivo .css pegamos el siguiente código.

dise�o

.footer{
width:auto; 
height:auto;
color:#6c6c6c;
padding:20px 0px 50px 0px;
font-size:14px;
text-align:right;
}


Maquetación - PSD a HTML &amp; CSS | Tutorial [Parte 1]

Para visualizar el trabajo que hicimos hasta ahora, deben abrir el archivo .html en su navegador, y cuando hagan esto, debería quedarles algo como lo que se muestra en pantalla.

html

css

HTML FINAL


<!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>N3sbt</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>

<body>

<div class="header">
<div class="wrap">
<div class="logo">

<div id='navbar'>
<ul>
   <li class='active'><a href='#'><span>INICIO</span></a></li>
   <li><a href='#'><span>NOTICIAS</span></a></li>
   <li><a href='#'><span>PORTAFOLIO</span></a></li>
    <li><a href='#'><span>RECURSOS</span></a></li>
</ul>
</div>

</div>
</div>
</div>

<div class="wrap">

<div class="content">
</div>

</div>

<div class="footer">
<div class="wrap">
&copy; 2013. <b>Nesbet</b>. Todos los derechos reservados.<br/>
Contacto:[email protected]
</div>
</div>

</body>
</html>


CSS FINAL


body{
    font-family:"Helvetica Neue", Arial, Trebuchet MS; 
    color:#606060;
    font-size:14px;
    padding:0; 
    margin:0; 
    background-color: #e5e5e5;
}

.wrap{
    width:60%; 
    height:auto; 
    margin:0 auto; 
}

.header{
    width:100%;
    height:auto;
    padding-top:30px;
    padding-bottom:30px;
}

.logo{
    width:100%; 
    height:71px; 
    background:url(images/logo.png) no-repeat;
}

#navbar ul{
    list-style-type:none;
    height:auto;
    font-size:16px;
    text-align:center;
    margin:0;
    float:right;
    padding-bottom:30px;
    padding-top:36px;
}

#navbar li
{
    display: inline;
    margin:0;
    padding:0px 0px 0px 28px;
    font-weight:bold;
}
    
#navbar li a
{
    color:#b1b1b1;
    text-decoration:none;
}
    
#navbar li a:hover
{    
    color:#5a5a5a;
    height:22px;
    background:transparent url(nav_bg.png) 0px -30px no-repeat;        
}
    
#navbar li.active a
{
    height:22px;
    background:transparent url(nav_bg.png) 0px -30px no-repeat;    
    margin:0;
    background-color:#1fb4d9;
    color:#fff;
    padding:5px;
    border-radius:5px;
}

.content{
    width:auto;
height:auto;
background-color:#f8f8f8;
border:1px solid #d9d9d9;
min-height:100px;
}

.footer{
    width:auto; 
    height:auto;
    color:#6c6c6c;
    padding:20px 0px 50px 0px;
    font-size:14px;
    text-align:right;
}


codigos


Ésto es sólo la primera parte, en mi próximo post les enseñaré a organizar el contenido dentro de nuestro sitio como en el siguiente link, así que no dudes en seguirme.
http://k41.kn3.net/DF5F56BE5.png


hosting

psd

7 comentarios - Maquetación - PSD a HTML & CSS | Tutorial [Parte 1]

DireXtreme +2

[color=#000000]

<ul>
   <li class='active'><a href='#'><span>INICIO</span></a></li>
   <li><a href='#'><span>NOTICIAS</span></a></li>
   <li><a href='#'><span>PORTAFOLIO</span></a></li>
    <li><a href='#'><span>RECURSOS</span></a></li>
</ul>
</div>[/color]



Seria asi:

<ul>
   <li class='active'><a href='#'><span>INICIO</span></a></li>
   <li><a href='#'><span>NOTICIAS</span></a></li>
   <li><a href='#'><span>PORTAFOLIO</span></a></li>
    <li><a href='#'><span>RECURSOS</span></a></li>
</ul>
</div>

n3sbt +1
Gracias por el aviso amigo! se agregaron solos esos "" :S
dasith
Excelente contenido! +10!
kidnapeed +1
Excelente Post, ya tengo mucho que lo estoy esperando, también podrías hacer uno de como realizar un reproductor de vídeo/música a la página, pero creado por nosotros, saludos
Daniel03
+10 Muy interesante, quiero hacer la prueba, ¿se podría ir implementando bootstrap o algo parecido?
Rametall
Que tal, habia visto tus post hace ya algo de tiempo, creo que el primero de como elaborar la pagina en photoshop fue eliminado, no se si lo tendras en alguna otra pagina, porque me interesaria empezar a crear una pagina para mi negocio.

Saludos.