Aporte, Como pasar de PSD a CSS

[gVenom]

Pasar archivos PSD a CSS

Como diseñador siempre he buscado una forma de dejar las benditas tablas que tanto trabajo nos da a los que no somos programadores y utilizamos photoshop para maquetear el contenido y así pasarlo a dreamweaver. Obviamente, este nos genera una tabla única con un monton de <td> y el estorbo de

Código HTML:

 <td><img src="images/spacer.gif" width="75" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="184" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="11" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="4" height="1" alt=""></td>
    <td><img src="images/spacer.gif" width="202" height="1" alt=""></td> 

Por todo lado, pues bien, que te parece si pasamos esos archivos psd a divs y css? Como?
Directo de Photoshop... no es una belleza… Yo lo he hecho con Photoshop CS3, no se si se puede con versiones anteriores. Asi que vamos al grano:

Herramientas:

Photoshop CS3 – Dreamweaver CS3

1. Primero, carga tu diseño de photoshop como siempre (o create uno).
2. Corta el diseño como siempre lo has hecho ( selecciona la herramienta de corte (“k”) y crea los slices. Si deseas orden, recuerda que cada slice es nombrado por photoshop con el nombre del documento más una extención, ejm: index_01.gif, index_02.gif, asi que si lo deseas puedes cambiarle ese nombre a cada imagen para tener un orden de diseño.
3. Listo todo esto, le damos “save for web” (ctrl + alt + shift + s ), como siempre para preparar el diseño para dreamweaver. Una vez ahi y con todo seleccionado por defecto le damos “save”.
4. Ahora si, aqui viene el chiste, en la ventana que abre vienen abajo las opciones de selección:
File name: aqui el nombre del archivo que se genera
Save as type: HTML and images (*.html)
Settings: Other
Slices: All slices

Settings es la que hace la magia aqui. Al seleccionar others nos habre una nueva ventana de opciones. Ahi vamos a seleccionar en:
Settings: Custom
En la opción de abajo: slices, esto nos pone abajo de ella un par de opciones a seleccionar, “generate table” “generate CSS”, adivinen... Exacto, marcamos generate CSS, en referenced le ponemos by ID. Le damos ok y Liiiiistoooo, nos quedo hermoso.

Vallan a ver su código desde dreamweaver y veran todo el documento esta lleno de css y divs.

5. Ahora algo superimportante, abierto el documento en dreamweaver nos vamos a file – convert – XHTML 1.0 Transitional y que creen, nuestro documento es valido para la W3C.

Suerte con sus diseños.

gVenom

aqui el word si lo quieren

[buzu]

Como tu dijiste, un documento lleno de CSS y divs que es igual de malo que las tablas... Lamento decepcionarte, pero no hay como hacerlo a mano.
De cualquier modo, imagino que a mas de uno le servirá la info.

Saludos.

[gVenom]

Iniciado por buzu

Como tu dijiste, un documento lleno de CSS y divs que es igual de malo que las tablas... Lamento decepcionarte, pero no hay como hacerlo a mano.
De cualquier modo, imagino que a mas de uno le servirá la info.

Saludos.

Como todo, nada es perfecto, solo Cristo. Ya que lo mencionas se me olvidaba, sería bueno que tomen el código css y lo pasen a una hoja css, para luego incluirla en el archivo. Y desde luego, afinen el código a su gusto y necesidades...

[buzu]

Me gustaría preguntarte en que te basas para decir que Cristo es perfecto, pero ese no es el punto de este tema ni de este foro.

La recomendación que haces es muy buena. Convendría que quienes siguen tu mini tutorial tambien sigan esa recomendación.

[webosiris]

lamento decirte que todo lo que sea pasaje automático, es "desastroso" en mayor o menor medida.
Te explico porqué: el html es, por definición, un lenguaje de marcas (HyperText Markup Language). Como tal, el objetivo de las marcas es describir su contenido (osea, indican información sobre el tipo de información que estan marcando),... el problema es que los programas automáticos no pueden determinar la semántica de la información, y por lo tanto el html resultante es, necesariamente, malo.

Te cuento una anécdota de mi trabajo diario, que es justamente pasar psds a css... el otro dia estuve con mi ayudante hablando y discutiendo por 10 minutos para definir si determinada parte del contenido debía estar marcada con un DL o no. Ese tipo de decisiones solo las pueden hacer humanos... y es más , hay veces que la semántica es subjetiva, porque depende de lo que queramos transmitir.

Es tan malo diseñar con tablas, como tener un menu marcado a base de divs (un menu es una lista de enlaces, por lo que debe de usarse LI)

Y desde luego, afinen el código a su gusto y necesidades...

mi experiencia me dice que la gran mayoría de las veces (por no decir todas), es mucho más dificil "afinar" el código, que crearlo a mano desde 0.

[gVenom]

Mmmm, ya veo. Bueno a mi me facilita mucho el trabajo, porque ahora solo estoy yo diseñando, y son muchos clientes a los que hay que construirles todo el site, a base de un psd, y haciendolo a pie todo, no termino nunca. Aparte que como menciono, no soy programador ni un experto en HTML y menos _CSS. Pero se agradecen las criticas constructivas.

[McPinkY18]

es que confundes muchas cosas hmtl y css no es programacion