Guía del usuario Cancelar

Información sobre el uso de CSS para diseñar la página

Buscar

Última actualización el 3 may 2021

Aprenda la estructura básica de un diseño CSS y cómo diseñar páginas y contenido usando CSS en Dreamweaver.

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 solo 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 ubicación con respecto a su ubicación actual). También puede situar etiquetas div especificando elementos flotantes, rellenos y márgenes (el método preferido conforme al estándar web actual).

Acerca de la estructura del diseño de páginas con CSS

Antes de continuar con esta sección, debería estar familiarizado con los conceptos básicos de CSS.

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. En los siguientes ejemplos se muestra una página HTML que contiene tres etiquetas div independientes: una etiqueta de “contenedor” grande y otras dos etiquetas (una de barra lateral y una de contenido principal) dentro de la etiqueta de contenedor.

Estructura del diseño de páginas con CSS

A. Div de contenedor B. Div de barra lateral C. Div de contenido principal

A continuación se incluye el código de las tres etiquetas div en el HTML:

<!--container div tag--> 
<div id="container"> 
<!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     
<!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div>

En el ejemplo anterior, no hay “estilo” asociado a ninguna de las etiquetas div. Si no hay reglas CSS definidas, cada una de las etiquetas div y su contenido se sitúan en una ubicación predeterminada de la página. Sin embargo, si cada etiqueta div dispone de un ID exclusivo (como en el ejemplo anterior), puede utilizar los ID para crear reglas CSS que, cuando se aplican, modifican el estilo y la posición de las etiquetas div.

La siguiente regla CSS, que puede residir en el encabezado del documento o en un archivo CSS externo, crea reglas de estilo para la primera etiqueta (la etiqueta de “contenedor”) div de la página:

#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
}

La regla #container aplica estilo a la etiqueta div de contenedor para que tenga un ancho de 780 píxeles, un fondo blanco, sin margen (desde el lado izquierdo de la página), un borde negro de 1 píxel y texto alineado a la izquierda. Los resultados de aplicar la regla a la etiqueta div de contenedor son los siguientes:

A. Texto alineado a la izquierda B. Fondo blanco C. Borde negro sólido de 1 píxel

La siguiente reglas CSS crear reglas de estilo para la etiqueta div de barra lateral:

#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
}

La regla #sidebar aplica estilo a la etiqueta div de barra lateral para que tenga una ancho de 200 píxeles, un fondo gris, un relleno superior e inferior de 15 píxeles, un relleno derecho de 10 píxeles y uno izquierdo de 20 píxeles. El orden predeterminado para el relleno es superior-derecho-inferior-izquierdo. Además, la regla sitúa la etiqueta div de barra lateral con una propiedad float: left, que empuja la etiqueta div de barra lateral al lado izquierdo de la etiqueta div de contenedor. Los resultados de aplicar la regla a la etiqueta div de barra lateral son los siguientes:

Div de barra lateral, flotación a la izquierda

A. Ancho de 200 píxeles B. Relleno superior e inferior de 15 píxeles

Por último, la regla CSS para la etiqueta div de contenedor principal finaliza el diseño:

#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
}

La regla #mainContent aplica estilo a la etiqueta div de contenedor principal para que tenga un margen izquierdo de 250 píxeles, lo que significa que coloca 250 píxeles de espacio entre el lado izquierdo de la etiqueta div de contenedor y el lado izquierdo de la etiqueta div de contenedor principal. Además, la regla añade 20 píxeles de espacio a los lados derecho, inferior e izquierdo de la etiqueta div de contenedor principal. Los resultados de aplicar la regla a la etiqueta div mainContent son los siguientes:

El código completo es el siguiente:

Div de contenido principal, margen izquierdo de 250 píxeles

A. Relleno a la izquierda de 20 píxeles B. Relleno a la derecha de 20 píxeles C. Relleno inferior de 20 píxeles

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
} 
#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
} 
#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
} 
</style> 
</head> 
<body> 
<!--container div tag--> 
<div id="container"> 
    <!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     <!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div> 
</body>

Nota:

El código de ejemplo anterior es una versión simplificada del código que crea el diseño de barra lateral de dos columnas fijas cuando se crea un nuevo documento mediante los diseños predefinidos que vienen con Dreamweaver.

Creación de una página con un diseño CSS

Cuando crea una nueva página en Dreamweaver, puede crear una que ya contenga un diseño CSS. Dreamweaver se suministra con 16 diseños CSS diferentes entre los que elegir. Además, también puede crear sus propios diseños CSS y añadirlos a la carpeta de configuración para que aparezcan en la lista de diseños disponible del cuadro de diálogo Nuevo documento.

Creación de una página con un diseño CSS

Seleccione Archivo > Nuevo.
En el cuadro de diálogo Nuevo documento, seleccione la categoría Página en blanco (selección predeterminada).
En Tipo de página, seleccione el tipo de página que desea crear.

Nota:

Debe seleccionar un tipo de página HTML para el diseño. Por ejemplo, puede seleccionar HTML, ColdFusion®, PHP, etc. No pueden crearse páginas ActionScript™, CSS, Library Item, JavaScript, XML, XSLT ni ColdFusion Component con un diseño CSS. Los tipos de página de la categoría Otro del cuadro de diálogo Nuevo documento tampoco pueden incluir diseños de página CSS.
En Diseño, seleccione el diseño CSS que desea utilizar. Puede elegir entre 16 diseños distintos. La ventana Vista previa muestra el diseño y ofrece una breve descripción del diseño seleccionado.

Los diseños CSS predefinidos ofrecen los siguientes tipos de columnas:

Fija

El ancho de columna se especifica en píxeles. La columna no cambia de tamaño en función del tamaño del navegador o de la configuración del texto del visitante del sitio.

Flotante

El ancho de columna se especifica como porcentaje del tamaño del navegador del visitante. El diseño se adapta si el visitante del sitio amplia o reduce el navegador, pero no en función de la configuración del texto.
Seleccione un tipo de documento del menú emergente DocType.
Seleccione una ubicación para el código CSS del diseño en el menú emergente Diseño CSS en.

Añadir a Head

Añade código CSS para el diseño al encabezado de la página que se va a crear.

Crear nuevo archivo

Añade código CSS para el diseño a una nueva hoja de estilos CSS externa y la adjunta a la página que se va a crear.

Vincular a archivo existente

Permite especificar un archivo CSS existente que ya contiene reglas CSS necesarias para el diseño. Esta opción es especialmente útil cuando desea utilizar el mismo diseño CSS (las reglas CSS para el mismo se encuentran en un único archivo) en varios documentos.
Siga uno de estos procedimientos:
- Si ha seleccionado Añadir a Head en el menú emergente Diseño CSS en (opción predeterminada), haga clic en Crear.
- Si ha seleccionado Crear nuevo archivo en el menú emergente Diseño CSS en, haga clic en crear y, a continuación, especifique un nombre para el nuevo archivo externo en el cuadro de diálogo Guardar archivo de hoja de estilos como.
- Si ha seleccionado Vincular a archivo existente en el menú emergente Diseño CSS en, añada el archivo externo al cuadro de texto Adjuntar archivo CSS; para ello haga clic en el icono Adjuntar hojas de estilos, introduzca la información necesaria en el cuadro de diálogo Vincular hoja de estilos externa y haga clic en OK. Cuando haya finalizado, haga clic en Crear en el cuadro de diálogo Nuevo documento.
Nota:

Si selecciona la opción Vincular a archivo existente, el archivo que especifique debe contener las reglas para el archivo CSS.

Al situar el diseño CSS en un nuevo archivo o vincularlo a uno existente, Dreamweaver vincula de forma automática el archivo a la página HTML que se va a crear.

Nota:

Los comentarios condicionales de Internet Explorer (CC), que ayudan a solucionar problemas de representación en IE, siguen incrustados en el encabezado del nuevo documento de diseño CSS aunque se seleccione Nuevo archivo externo o Archivo externo existente como ubicación para el diseño CSS.
(Opcional) También puede adjuntar hojas de estilos CSS a la nueva página (independientes del diseño CSS) al crearla. Para ello, haga clic en el icono Adjuntar hoja de estilos situado encima del panel Adjuntar archivo CSS y seleccione una hoja de estilos CSS.

Para ver una descripción detallada de este proceso, consulte el artículo de David Powers, Automatically attaching a style sheet to new documents (Cómo adjuntar automáticamente una hoja de estilos a documentos nuevos).

Adición de diseños CSS personalizados a la lista de opciones

Cree una página HTML que contenga el diseño CSS que desea añadir a la lista de opciones del cuadro de diálogo Nuevo documento. El código CSS del diseño debe residir en el encabezado de la página HTML.

Nota:

Para mantener la coherencia del diseño CSS personalizado con el resto de los diseños que vienen con Dreamweaver, debe guardar el archivo HTML con la extensión .htm.
Añada la página HTML a la carpeta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.
(Opcional) Añada una imagen de vista previa del diseño (por ejemplo, un archivo .gif o .png) a la carpeta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. Las imágenes predeterminadas que vienen con Dreamweaver son archivos PNG de 227 píxeles de ancho y 193 píxeles de alto.

Nota:

Asigne a la imagen de vista previa el mismo nombre que el archivo HTML para que pueda encontrarla fácilmente. Por ejemplo, si el archivo HTML se llama midiseñopersonalizado.htm, llame a la imagen de vista previa midiseñopersonalizado.png.
(Opcional) Cree un archivo de Design Notes para su diseño personalizado; para ello abra la carpeta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, copie y pegue cualquiera de los archivos notes existentes en la misma carpeta y cambie el nombre de la copia por el de su diseño personalizado. Por ejemplo, podría copiar el archivo oneColElsCtr.htm.mno y cambiarle el nombre a midiseñopersonalizado.htm.mno.
(Opcional) Cuando haya creado un archivo de Design Notes para su diseño personalizado, podrá abrir el archivo y especificar el nombre, la descripción y la imagen de vista previa del diseño.

Páginas relacionadas

Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Información sobre el uso de CSS para diseñar la página

Acerca del diseño de páginas con CSS

Acerca de la estructura del diseño de páginas con CSS

Creación de una página con un diseño CSS

Creación de una página con un diseño CSS

Adición de diseños CSS personalizados a la lista de opciones

Páginas relacionadas

Obtén ayuda de forma más rápida y sencilla

Pregunte a la comunidad

Contacto