Cual es la forma correcta de maketear un psd para css

[gVenom]

Como lo dice mi titulo, cual es la manera correcta o mas util para maquetear para css?

Siempre use tablas, pues nunca me preocupe por las imágenes, pero ahora que debo manipularlas individualmente me cuesta encontrar la forma de recortar un diseño complicado. Por ejm:

http://ministeriodediosparalasnaciones.org/

estoy por comenzar a diseñar este sitio web ( de ahi lo de el fondo en css) y no se como se recorta el diseño :(.

Debo recortar varias veces el template?
Dejo transparente el fondo de cada cosa?
Los textos que tienen efectos que no puedo emular en css los recorto como imágenes?
Como le creo un link a una imagen en css?

Y ahi van las preguntas saliendo de una en una. Pero por ahora me preocupo por la primera que hice, como recorto el psd?.

Segun me han dicho webosiris sabe mucho de ese tema, asi que si andas por ahi te agradezco la ayuda.

Aunque a esta altura cualquier consejo es bienvenido

Gracias.

[dacho]

Hola amigo... Te comento que cada uno maqueta las webs a su manera, la mejor forma es la que logras que el HTML este lo mas limpio posible...

Debo recortar varias veces el template?

En mi opinion es completamente recomendable recortar los fondos y las imágenes de forma que se ahorre la mayor cantidad de tamaño.

Dejo transparente el fondo de cada cosa?

Esto depende de que estas hablando en general se coloca un fondo y luego todo lo que corresponde a texto no tiene fondos, sino que complementan al fondo que colocaste por debajo. Esta respuesta es relativa, y depende completamente de el elemento HTML que sea y del diseño que se le quiere dar

Los textos que tienen efectos que no puedo emular en css los recorto como imágenes?

Efectos de que clase? si te refieres a algun degrade por ejemplo, es la unica que queda. Pero no abuses de ello, utilizalo solo en caso de encabezados y cosas importantes porque la web se vuelve mas pesada y ademas pierdes mucho en lo que es el posicionamiento con respecto a los buscadores

Como le creo un link a una imagen en css?

no se a que te refieres pero esto es completamente correcto:
<a href="midestino.html"><img src="miimagen.png" alt="mi imagen"/></a>

Esto hace un link que va dirigido a "midestino.html" cuando le haces clic a la "miimagen.png"

Saludos y espero que te sirva

[gVenom]

Gracias dacho por la respuesta.
Ahora, si visitaste la página que de:

http://ministeriodediosparalasnaciones.org

esa es una de las paginas en las que quiero hacerlo todo sin tablas (conste que la que esta ahi si lleva tablas pues es temporal) , sin embargo, yo pensaba comenzar sobre un fondo blanco a ponerle todo encima, puedes verlo aqui:

http://ministeriodediosparalasnaciones.org/test/

lo malo es que no estoy seguro como hacerlo, porque me chocan los position absolute y los relative, y me quedan algunas imagenes atras de otras, como en la parte de abajo, los botones se me iban atras de la barra y no supe como pasarlos.

Los textos que tienen efectos que no puedo emular en css los recorto como imágenes?

pues los que llevan Bevel , stroke, emboss, inner glow. todo lo que puedes hacer con photoshop.

Como le creo un link a una imagen en css?

me refiero a que si adjunto una imagen con el archivo css, me queda así:

Código:

#fill {
	background-image:url(imagen.png);
	position:absolute;
	left:0px;
	top:0px;
	width:87px;
	height:84px;
}

la imagen siempre es un background, y si yo quiero linkearla con algo? como le hago.

gracias

[dacho]

lo malo es que no estoy seguro como hacerlo, porque me chocan los position absolute y los relative, y me quedan algunas imagenes atras de otras, como en la parte de abajo, los botones se me iban atras de la barra y no supe como pasarlos.

Uno de mis pilares basicos como Maquetador es no utilizar nada que no necesite, porque solo complica mas las cosas.

El diseño que quieres lograr se puede hacer por completo sin utilizar ni siquiera 1 elemento en position: Absolute;, te recomiendo que no utilices eso.

En tu pagina estas haciendo esto:

Código HTML:

<div id="bg"> 
 <img id="index" src="images/index.jpg" width="778" height="780" alt="" />
</div> 

Eso se logra de la misma forma con

Código HTML:

<head>
  <style>
  div#bg{
  width: 778px;
  height:  780px;
  background: url(images/index.jpg) no-repeat;
}  
  </style>
</head>

<body>
  <div id="bg"> 
 
  </div>
<body> 

La gran diferencia entre uno y otro es que en la primera forma estas poniendo una imagen en la pagina web, en la segunda estas poniendo un div (en este caso con el id = bg) con una imagen de fondo.

No se le puede insertar texto adentro de una imagen, pero adentro de un div con fondo no solo se puede insertar un texto, sino que se pueden insertar cualquier cosa.

Te recomiendo que leas algunos manuales/tutoriales sobre html/css para que te vallas acostumbrandoa las tecnicas mas usadas y siempre que estes por utilizar cosas como position absolute y todo eso planteate si vale la pena, hay cosas que solo se logran con eso, pero en general la mayoria de las webs nunca necesitan de esa propiedad.