Buenas, hasta ahora yo hacia diseños en photoshop e illustrator;
los guardaba y los maquetaba en dreamweaver con tablas.
Ahora me gustaría seguir con el mismo método pero dejar las tablas a un lado y usar CSS para maquetar.
Es decir, si yo hago un sector en photoshop donde quiero que hay vaya el texto,
no meter una tabla ahi con el correspondido texto, si no, hacerlo por medio de CSS.
Espero que me haya explicado bien, hay alguna manera sencilla de maquetar en tablas pero con CSS?
Gracias!
Pues lo primero olvidarse de las tablas y aprender a maquetar con DIV, te podría explicar un poco como flotar objetos o de maquetar en líquido, fijo etc... pero es muy largo y extenso.
Por lo tanto www.google.es is your friend y http://validator.w3.org también.
yo tengo 3 videos bastantes buenos para empezar a maquetar en CSS, primero hace el diseño en ps, luego lo maqueta en css y luego programa 1 pokito(poco), y se ve bien como lo hace, vamos la primera vez que lo vi me sorprendio (:, a eso de hace 1 año. A partir de ahi ya es hacer y hacer.
Eso si, el video esta en ingles.
son 200MB, te lo subo a megaupload
lol se me fue la pinza, http://www.northerners.es/web.rar
#7 las tablas no son para maquetar webs enteras, son para maquetar listados con mucha informacion, por eso mismo se llaman tablas, para maquetar lo que tiene forma de tabla XDDD
#8, ya lo sé ya, pero se puede poner en el css, en vez de utilizar table, td, tr etc, se puede poner en el css, para que quede bien puestecico dentro de un div.
Si encuentro el link lo pongo.
http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/
No me ha costado mucho xD
Bravo! Me ha encantado este ultimo articulo!
Una magnifica idea para crear los layouts usando un sistema de display!
Me ha gustado mucho! Y lo bueno, es que no se trata de tablas propiamente y por lo tanto, no hay problema!
Amén de ser perfectamente checkeable con W3C.
Olé!
A ver olvidaos de maquetar una web con tablas, da igual que os valide. Las tablas son para listados, mailing, formularios etc. si lo usáis para la web google os va a meter un buen hachazo y la penalización es alta...además que es cutre de cojones.
Pero Kedao, no son tablas propiamente.
Se trata exculisvamente de una forma de 'visualizar'.
Yo por lo general, fabrico mis DIVs a mano, fijandoles un width y height si es necesario. Pero algo como lo expuesto en este documento parece muy interesante y facil a la vez.
Puedes comentar 2 cosas porfavor?
- Porque google mete hachazo? Tengo mucha curiosidad...
- Que te parece el maquetado usando Photoshop (con posterior modificación manual, claro esta)?
hmm, cuanto menos, es interesante, habrá que curiosear por ahi, a ver que problemas puede dar (si los da), discutir si realmente son tablas, o solo una manera de visualización.. etc
Pero bueno, para empezar, hablan que IE 8 lo soporta sin problemas, eso significa, que habrá que volverse loco para que funcione en IE 7 y lo poco que nos quede del 6.. y sin muchos recursos de hacks creados para esta manera de "cssear"
Lo meto en favoritos "para dentro de 1 año"
Por cierto, leyendolo por encima encima, y sin haber mirado comentarios al respecto, yo lo tomo como una forma de visualizacion, lo mismo es un display: block que un display: table, a la hora de la verdad mi código es <div class="tal"> en cualquiera de los 2 casos.. no veo por que tiene que afectar a google.
Habrá que ver que dicen los lectores de pantalla para invidentes y demás... 
La forma del link de usar los Divs no la he probado habrá que ver que tal la pilla el resto de navegadores no estándar.
Yo me refiero a las tablas de toda la vida y sus tags. Cuando hagáis una página web hacerla de cara a un futuro posicionamiento, no hace falta que diga que valide, si es en estricto mejor. Google cuando se pasa por vuestra web y ve que está hecha con tablas os quita puntos en el posicionamiento, al principio te la puede sudar o no darte ni cuenta, pero cuando hay proyectos con clientes detrás cuya página es vital que se posicione en las primeras todos esos detalles afectan, y claro tener toda tu página con <TABLE> pues dime que coño haces para arregarlo, o la rediseñas o a ver...
Puedes hacerte el prototipo en Photoshop, fireworks, illustrator o lo que tu quieras, mientras luego trabajes con DIVs y tablas para lo que comento arriba(ojo que digo que nunca se usen). Pero procura exportar toda imagen desde Fireworks, los PSD también los trabaja.
Si te refieres a usar Photoshop para exportar a HTML...es una mierda infecta, por que todo te lo saca por tablas...
Saludos.
PD:Yo era de los de "Photoshop" para todo, hasta que empecé con Fireworks para hacer los prototipos...te lo recomiendo al 100%. Mapa de bits -> Photoshop, exportar imagen para la web -> Fireworks (SIEMPRE).