Layout: Término inglés con el que se conocen en diseño los bocetos o maquetas bien acabados que sirven para presentar una campaña publicitaria.

Con la expresión "Layout" nos referimos a la estructura y la disposición de los contenidos dentro de nuestro diseño.Indican la forma de organizar los componentes dentro de un contenedor, determinando el tamaño y la posición de los mismos.

Estamos acostumbrados a estructurar nuestros diseños mediante tablas para contener nuestros textos e imagenes pero a veces terminamos renegando con las columnas y las filas.

En su lugar, podemos utilizar etiquetas div para crear bloques de diseño CSS e insertarlas en el documento. Esto es especialmente útil si ya tiene una hoja de estilo CSS con estilos de posición adjunta al documento. La ventaja de estas etiquetas con respecto a las tablas es su versatilidad ya que permiten cambiar su disposición libremente, encimar una con otra y darles estilos mediante CSS.

Existen generadores automáticos de layouts, donde ustedes tan solo especifican el tamaño, el tipo de contenedor y luego de descargar el html resultante, solo tienen que agregar el contenido y cambiar el estilo a su gusto.

Si lo prefieren pueden crear sus propios layouts a partir de etiquetas DIV desde Dreamweaver:

Para insertar una etiqueta div en Dreamweaver:

1. En la ventana de documento, colocar el punto de inserción en el lugar donde desea que aparezca la etiqueta div.
2. Seguir uno de estos procedimientos:
   • Insertar > Objetos de diseño > Etiqueta Div.
   • En la categoría Diseño de la barra Insertar, hacer clic en el botón Etiqueta Div.
3. Aparece el cuadro de diálogo Insertar etiqueta Div. Completar este cuadro de diálogo. (Para más información, consultar Configuración de etiqueta Div.)
   

4. Clic en Aceptar.

* La etiqueta div tendrá el aspecto de un cuadro en el documento con texto de marcador de posición. Al desplazar el puntero sobre el borde del cuadro, Dreamweaver lo resaltará.