PDF (adobe.com)

Acerca del diseño de páginas con CSS

Un diseño de página CSS utiliza el formato de hojas de estilos en cascada, en lugar de las tablas o marcos HTML tradicionales, para organizar el contenido de un sitio Web. El elemento básico del diseño CSS es la etiqueta div, una etiqueta HTML que, en la mayoría de los casos, actúa como contenedor de texto, imágenes y otros elementos de página. Cuando crea un diseño CSS, coloca etiquetas div en la página, añade contenido a las mismas y las sitúa en distintos lugares. A diferencia de las celdas de tabla, que sólo pueden situarse en algún lugar dentro de las filas y columnas de la tabla, las etiquetas div aparecen en cualquier lugar de una página Web. Puede situar etiquetas div de forma absoluta (especificando las coordenadas x e y) o de forma relativa (especificando su distancia con respecto a otros elementos de la página).

La creación de diseños CSS desde cero puede ser una tarea difícil debido a la gran cantidad de formas de hacerlo que existen. Puede crear un diseño CSS sencillo de dos columnas estableciendo elementos flotantes, márgenes, rellenos y otras propiedades CSS mediante un número casi infinito de combinaciones. Además, el problema de la reproducción en distintos navegadores hace que determinados diseños CSS se muestren correctamente en algunos navegadores y no en otros. Dreamweaver facilita la creación de páginas con diseños CSS con más de 30 diseños predefinidos que funcionan en distintos navegadores.

La utilización de los diseños CSS predefinidos que vienen con Dreamweaver es la forma más fácil de crear una página con un diseño CSS, pero también puede crear diseños CSS mediante los elementos con posición absoluta (elementos PA) de Dreamweaver. En Dreamweaver, un elemento PA es un elemento de página HTML (en concreto, una etiqueta div o cualquier otra etiqueta) que tiene una posición absoluta asignada. Sin embargo, la limitación de los elementos PA de Dreamweaver radica precisamente en que tienen una posición absoluta, lo que hace que sus posiciones nunca se ajusten a la página en función del tamaño del navegador.

Si se considera un usuario avanzado, también puede insertar etiquetas div de forma manual y aplicarles estilos de posición CSS para crear los diseños de las páginas.

Para un tutorial sobre la creación de diseños de páginas con CSS, consulte www.adobe.com/go/vid0155_es.