Foros del Web » Creando para Internet » HTML »

Emigrar de tablas a DIV

Estas en el tema de Emigrar de tablas a DIV en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/12/2008, 11:26
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Busqueda Emigrar de tablas a DIV

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::
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #2 (permalink)  
Antiguo 04/12/2008, 11:42
Avatar de Acron_0248  
Fecha de Ingreso: junio-2005
Ubicación: 127.0.0.1
Mensajes: 1.648
Antigüedad: 12 años, 5 meses
Puntos: 18
Respuesta: Emigrar de tablas a DIV

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.
__________________
Usuario Reigistrado de linux #399288
  #3 (permalink)  
Antiguo 04/12/2008, 12:03
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Emigrar de tablas a DIV

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/
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #4 (permalink)  
Antiguo 04/12/2008, 12:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Emigrar de tablas a DIV

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/
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 04/12/2008, 12:52
Avatar de kazafun  
Fecha de Ingreso: diciembre-2003
Ubicación: Elda
Mensajes: 843
Antigüedad: 14 años
Puntos: 13
Respuesta: Emigrar de tablas a DIV

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.
__________________
MUERTE a Internet Explorer


Mi portfolio de diseño web en Elda
  #6 (permalink)  
Antiguo 04/12/2008, 13:11
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Emigrar de tablas a DIV

Cita:
Iniciado por Mikmoro Ver Mensaje
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.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #7 (permalink)  
Antiguo 04/12/2008, 15:14
Avatar de Acron_0248  
Fecha de Ingreso: junio-2005
Ubicación: 127.0.0.1
Mensajes: 1.648
Antigüedad: 12 años, 5 meses
Puntos: 18
Respuesta: Emigrar de tablas a DIV

Cita:
Iniciado por gVenom Ver Mensaje
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.
__________________
Usuario Reigistrado de linux #399288
  #8 (permalink)  
Antiguo 04/12/2008, 16:01
 
Fecha de Ingreso: noviembre-2008
Mensajes: 94
Antigüedad: 9 años
Puntos: 6
Respuesta: Emigrar de tablas a DIV

Cita:
Iniciado por gVenom Ver Mensaje
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/
  #9 (permalink)  
Antiguo 04/12/2008, 16:24
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Emigrar de tablas a DIV

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.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:37.