Maquetar de imagen

Most · #1 (**permalink**) 03/05/2010, 16:17

Buenas, quisiera saver si atraves de una imagen podria maquetarla para hacerlo el diseño, ya que lo e echo en photoshop pero no se como maquetarlo, osea convertirlo a html/css...

la img es la siguiente:

abimaelrc · #2 (**permalink**) 03/05/2010, 16:25

Yo lo que hago en vez de crear toda una página creo una imagen y la divido en tres partes. HEADER, BODY, FOOTER, de lo que necesito. Luego te dirán como hacer para que lo que hayas hecho lo puedas dividir, con que programa. Pero lo que te puedo decir es que por ejemplo tomas la imagen localizada en el centro-izquierda y la divides en tres partes. Así cuando la coloques solo tienes que usar CSS para indicar el largo del campo y la imagen sea de background.

Most · #3 (**permalink**) 03/05/2010, 16:30

si, eso es lo que quiero hacer, pero he hay la cuestion, como lo hago

alexk · #4 (**permalink**) 03/05/2010, 16:47

que te parece si te pasas por las Faqs?
http://www.forosdelweb.com/f53/aport...ml-css-648073/
http://www.forosdelweb.com/f53/aport...rte-ii-657814/

http://www.forosdelweb.com/f53/indice-faqs-css-123362/

Peor mejor te recomiendo si no sabes hacerlo sera mejor, contratar a alguien mas para hacerlo

abimaelrc · #5 (**permalink**) 03/05/2010, 16:48

Ejemplo:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<style type="text/css">
*{margin: 0; padding: 0;}
body{background-color: #000;}
#left_menu{
    width: 135px;
    margin: 5px 5px;
}
.leftTop{
    background-image: url(left-top.jpg);
    background-position: top;
    background-repeat: no-repeat;
    height: 29px;
}
.leftBody{
    background-image: url(left-center.jpg);
    background-position: top;
    background-repeat: repeat-y;
    color: #fff;
    padding: 5px;
}
.leftBottom{
    background-image: url(left-bottom.jpg);
    background-position: bottom;
    background-repeat: no-repeat;
    height: 13px;
}
</style>
</head>
<body>
<div id="left_menu">
    <div class='leftTop'></div>
    <div class='leftBody'>aqui va el código que desees colocar</div>
    <div class='leftBottom'></div>
</div>
</body>
</html>

Ahí tienes la idea, si no entiendes lo que dice ese código, entonces te recomiendo que leas manuales como por ejemplo http://www.librosweb.es/

Most · #6 (**permalink**) 04/05/2010, 05:07

Ok, gracias ;)