Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Maquetar una web con CSS

Hola, hace tiempo que me dedico al diseño web.
A la hora de empezar un nuevo diseño me creaba las tablas en el dreamweaver y una vez tenia el patron donde iba la informacion de cada elemento o apartado, pues me creaba el diseño de imagenes y estilos con el photoshop.
Ultimamente estoy viendo muchas paginas que no utilizan tablas, 'separan el diseño del contenido' como ellos dicen. Un ejemplo es http://www.camaleoncss.com/ donde diseñadores crean sus maravillas utilizando el mismo contenido que te descargas de la web.
Me lo he estado mirando y lo veo muy 'raro' o abstracto a la hora de diseñar un sitio así, ya que no ves la estructura de tablas para poder ver como queda a medida que lo vas diseñando.
Todo va con divs, layers y mucho xml (cosa que aun no toco y que me estoy empezando a mirar por el tema de Ajax).

La pregunta es: Como empiezo a diseñar un sitio así? Me creo un diseño todo a modo imagen en Photoshop y despues lo voy ajustando a la pagina a traves del CSS y posicionandolo con las etiquetas DIV o con el propio CSS? o hay otra forma de hacerlo que sea más facil a la hora de crearlo?

La FAQ Maquetar una web con CSS tiene Pertenece a la categoría:


 Respuesta de Daniel  15/12/05 
Con el desarrollo de los estilos en css, el tema de maquetar con tablas (que, de entrada, era un parche a la imposibilidad de poder mostrar el contenido mas allá del texto de corrido, y un par de hipervinculos. Recordemos que la web estaba pensada, academicamente, como un repositorio de información textual...luego fue derivando en lo que es ahora) se está dejando de lado.

La tabla, en html, es para mostrar información tabulada (teoricamente, claro). usar una tabla para indicar que una imagen debe ir a la derecha, a la izquierda un titulo y abajo otra imagen es conceptualmente un error y por eso uno debería usar divs y css para posición.

Lo que yo pude ver es que, luego de romperse un poco la cabeza para entender el concepto, es mucho más claro la opción CSS, porque el código es más limpio, la precisión es mucho mejor, la usabilidad (palabreja rara) se incremente, es semánticamente correcto y te invita a aprender más sobre las estructuras web...muchas veces yo arreglaba cosas con tablas, donde podía haber usado una lista, o un form con sus fieldset, legend y etc.

Para empezar, hay tutoriales sobre css en www.desarrolloweb.com. A mi me resultó mucho ver las paginas como camaleoncss, o csszengarden y analizar el codigo html y el css...es muy util, y se aprende muchisimo. En un año, pase de hacer todo con tablas a todo con div+css, y ahora estoy tratando de mejorar eso, no agregando divs donde pueden usarse otras etiquetas...

Complementar la respuestaComplementar la respuesta
Volver al árbol de categoríasVolver al árbol de categorías

 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se han encontrado 7 comentarios sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
 
FAQ relacionadas
  + Estilos en barras de desplazamiento
  + Estilos CSS en los botones de formularios y Netscape 4
  + Manuales de CSS
  + Enlaces que cambian al pasar el ratón
  + ¿Cómo puedo cambiar el color de las celdas cuando paso el puntero por encima de ellas?
  + ¿Como puedo cambiar el color de la barra de desplazamiento?.
  + Diferencias de colocar estilos CSS en distintos lugares
  + Cambiar color a los enlaces
  + Quitar subrayado a los enlaces
  + Quiero personalizar los links de mi página para que todos sean distintos los unos de los otros
  + Estilo en los campos de formulario
  + Cambiar el tamaño de letra de un menú select
  + Cambiar el estilo de la primera letra de un párrafo
  + Aplicar estilo a la primera línea de un texto
  + Menú dinámico con CSS
  + Textarea sin borde
  + Clip en un div
  + Efecto sombra en mi página
  + Maquetar un boletín con CSS
  + Caja con CSS
  + Estilo en tablas HTML con CSS
  + Aspecto del cursor con CSS
  + Capas en CSS
  + Qué es Shorthand
  + problema al aplicar z-index a elementos select de formulario
  + Maquetar por tablas o por capas
  + Algunos programas para editar CSS
  + Maquetar galería de fotos con CSS
  + Rollover con CSS
  + Botones con estilos
  + ¿Qué Significa CSS?
  + Minúsculas con CSS
  + Hojas de estilo en cascada (CSS)
  + Formulario con CSS
  + Efecto de sombra con CSS
  + Cambiar tipografía para toda la página
  + Imprimir con CSS
  + Comentarios en CSS
  + Cómo eliminar los márgenes abajo y arriba que tiene un formulario
  + Definir los márgenes de un encabezamiento o título <h1>
  + ...

Para ver más FAQ relacionadas accede a las categorías:

Complementar la respuestaComplementar la respuesta
Volver al árbol de categoríasVolver al árbol de categorías

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia