Emigrar de tablas a DIV

[gVenom]

Saludos.

ando buscando en la web algún tutorial que me ayude a dejar las benditas tablas y utilizar los div. El problema es que todo lo que he visto es muy incompleto o omiten detalles que para alguien(como yo) que nos sabe es como si le hablaran en chino. Ocupo algo como esto:
http://nosetup.org/manuales/diseno

Me parece muy bien la forma en que explica cada linea de código. Lo unico es que es muy poca información la que encontré ahí. Alguna idea de donde hay algo para Emigrar de Tablas a DIV::

[Acron_0248]

Exactamente qué te complica o qué se te hace difícil de las capas?

Es posible que no hayas conseguido algo realmente extenso sobre emigrar de una cosa a otra por el hecho de que realmente no es nada complejo y no hay toda una cantidad de atributos que se deban modificar.

Una capa no es más que un cuadro que enmarca una sección de contenido. Si tuviera un diseño así:

Código:

<table border="1" cellpadding="2" colspacing="3">
<caption>Ejemplo!</caption>
<tr>
<th>Descripci&oacute;n</th>
</tr>
<tr>
<td>Esto es contenido cualquiera</td>
</tr>
</table>

Fácilmente lo podría cambiar a divs sin mayor esfuerzo tratando de mantener un aspecto visual similar:

Código:

<div class="base">
<h2>Ejemplo!</h2>
<h4>Descripci&oacute;n</h4>
<p>Esto es un contenido cualquiera</p>
</div>

Para cuando se hacen tablas complejas (una serie de columnas y filas) hacerlo con capas tampoco es mayor problema, en la mayoría de los casos simplemente es cosa de utilizar CSS para definir float y posicionamiento de forma que visualmente se vea relativamente igual.

[gVenom]

Hola, pues bueno para mi es complicado. Yo he diseñado varias páginas que nos on solo estándar en el diseño si no que llevan muchas cosas y detalles, ahi te dejo los links para que veas a que me refiero. A la hora de acomodar los div, uno a la par de otro, uno que abarque el espacio de otros 2 y parte de otro, cosas asi.:

http://beholdhecometh.net/

http://www.nationsfullgospelchurch.org/

http://haitianmissionparlafoi.com/

[Mikmoro]

Yo te puedo recomendar la pequeña guía de iniciación que acabo de hacer. Pero ten en cuenta que es sólo eso, los cuatro primeros pasos básicos.

No sé si te servirá de algo; quizá te aclare algunas ideas para poder seguir peleando:

http://www.forosdelweb.com/f53/aport...ml-css-648073/

[kazafun]

La mejor manera es cogerte alguna web de un supergurú y desmenuzarla de principio a fin. Cuando estudies 2 o 3 lo tienes casi listo.

[gVenom]

Iniciado por Mikmoro

Yo te puedo recomendar la pequeña guía de iniciación que acabo de hacer. Pero ten en cuenta que es sólo eso, los cuatro primeros pasos básicos.

No sé si te servirá de algo; quizá te aclare algunas ideas para poder seguir peleando:

http://www.forosdelweb.com/f53/aport...ml-css-648073/

Gracias voy a ir a revisar tu aporte. Lo que veo complicado es que todos mis diseños (por cuestión de laboral) siempre se hacen en Photoshop, y pues a la hora de maquetearlos no se como hacerlo sin usar el import to html de photoshop, porque si importo solo las imágenes algunas son hasta 75 o 100 (algunos casos) y acomodarlos depues cada pedacito de hasta 2 pixeles .

Lo que me dice kazafun estaría bueno si comprendiera los comandos usados en los div, cosa que aún no hago y precisamente es lo que busco, como en el ejemplo que puse de primero, donde el creador del tutorial te dice que función cumple cada comando.

[Acron_0248]

Iniciado por gVenom

Hola, pues bueno para mi es complicado. Yo he diseñado varias páginas que nos on solo estándar en el diseño si no que llevan muchas cosas y detalles, ahi te dejo los links para que veas a que me refiero. A la hora de acomodar los div, uno a la par de otro, uno que abarque el espacio de otros 2 y parte de otro, cosas asi.:

http://beholdhecometh.net/

http://www.nationsfullgospelchurch.org/

http://haitianmissionparlafoi.com/

Te puedo decir (además de la recomendación de ver la guía de migración a xhtml de Mikmoro) en base a los diseños que colocas, que el mayor trabajo sería en todo caso el trabajar los posicionamientos con el CSS, sobre todo a nivel de las cabeceras del cupero de la página (logos y menú de navegación)

En esos diseños muchas imágenes se usan por pedazos las cuales se ven unidas luego por el uso en las diferentes tablas y celdas.

Cambiar algo así a capas no es tan difícil pero te llevará algo de trabajo, lo que debes comenzar por revisar es qué imagen ocupa qué tabla, de esa forma logras ver la distribución de las imagenes, seguido a eso reemplazas tablas por capas y utilizas como fondo de las capas las imágenes de forma tal que no afecten el diseño actual. En este tipo de casos lo mejor es trabajar con posicionamiento absoluto y ayudarte con valores de margen.

El contenido es mucho más simple, simplemente colocas el contenido en la capa y luego usas float o posicionamiento absoluto según convenga.

Sobre usar photoshop para el diseño no está mal realmente, yo me inclinaría sin embargo simplemente a definir la distribución de imágenes (cortándolas luego por cuadros si así se quiere)

Puedes también usar algo como dreamweaver para facilitarte los temas de posicionamiento y márgenes de las capas con sus respectivas imágenes.

[rb3m]

Iniciado por gVenom

Gracias voy a ir a revisar tu aporte. Lo que veo complicado es que todos mis diseños (por cuestión de laboral) siempre se hacen en Photoshop, y pues a la hora de maquetearlos no se como hacerlo sin usar el import to html de photoshop, porque si importo solo las imágenes algunas son hasta 75 o 100 (algunos casos) y acomodarlos depues cada pedacito de hasta 2 pixeles .

De hecho es más fácil pasar de photoshop a html con capas, ya que photoshop también trabaja con capas. En vez de pedacear todo y exportar trozos de imágenes, exportas las imágenes completas y acomodas las capas del sitio casi como si estuvieras acomodando capas de Photoshop.

Claro, el proceso no es tan automático, pero tienes un control excelente sobre el producto final además que el mantenimiento posterior es mucho más fácil.

Si sabes inglés te recomiendo que veas estos videos:
http://css-tricks.com/videos-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/
http://css-tricks.com/videos-screencasts/2-converting-a-photoshop-mockup-part-2-of-3/
http://css-tricks.com/videos-screencasts/3-converting-a-photoshop-mockup-part-3-of-3/

[gVenom]

Gracias Acron_0248 por tus comentarios, de hecho yo exporto de photoshop a dreamweaver, y ahi me mato solo colocando el código y validandolo todo.

De hecho siempre he tratado de no hacer muchos cortes, pero aveces se me hace casi imposible pos la forma en que debo poner texto y botones, pero voy a tratar de hacer lo que me recomiendas. He estado practicando con el include de PHP para jalar cabeceras, pero aun no domino UNA COSA DEL SWITCH y el get o algo asi.


Gracias a rb3m voy a checkear mañana los videos a ver que aprendo.