Seleccione Archivo > Nuevo.
Última actualización el
25 abr 2024
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, debes estar familiarizado con los conceptos básicos de CSS.
El componente 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 para texto, imágenes y otros elementos de la página.El siguiente ejemplo muestra una página HTML que contiene tres etiquetas div separadas: una etiqueta "contenedor" grande y otras dos etiquetas (una etiqueta de barra lateral y una etiqueta de contenido principal) dentro de la etiqueta contenedor.
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:
<!--etiqueta div contenedor-->
<div id="container">
<!--etiqueta div barra lateral-->
<div id="sidebar">
<h3>Contenido de la barra lateral</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--etiqueta div contenido principal-->
<div id="mainContent">
<h1> Contenido principal </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>Encabezado de nivel H2</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" adjunto a ninguna de las etiquetas div.Sin reglas CSS definidas, cada etiqueta div y su contenido cae en una ubicación predeterminada en la página. Sin embargo, si cada etiqueta div tiene un ID único (como en el ejemplo anterior), puedes usar los ID para crear reglas CSS que, cuando se aplican, cambian el estilo y posicionamiento de las etiquetas div.
La siguiente regla CSS, que puede residir en el head del documento o en un archivo CSS externo, crea reglas de estilo para la primera, o etiqueta div "contenedor" en la página:
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
La regla #container da estilo a la etiqueta div contenedor para que tenga una anchura de 780 píxeles, un fondo blanco, sin margen (desde el lado izquierdo de la página), un borde sólido, negro, de 1 píxel, y texto que está alineado a la izquierda. Los resultados de aplicar la regla a la etiqueta div 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 da estilo a la etiqueta div sidebar para que tenga una anchura de 200 píxeles, un fondo gris, un relleno superior e inferior de 15 píxeles, un relleno derecho de 10 píxeles, y un relleno izquierdo de 20 píxeles.(El orden predeterminado para el relleno es superior-derecho-inferior-izquierdo). Además, la regla posiciona la etiqueta div de la barra lateral con float: left, una propiedad que empuja la etiqueta div de la barra lateral hacia el lado izquierdo de la etiqueta div del contenedor.Los resultados de aplicar la regla a la etiqueta div sidebar son los siguientes:
A. Anchura de 200 píxeles B. Relleno superior e inferior de 15 píxeles
Por último, la regla CSS para la etiqueta div contenedor principal termina el diseño:
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
La regla #mainContent da estilo al div de contenido principal con un margen izquierdo de 250 píxeles, lo que significa que coloca 250 píxeles de espacio entre el lado izquierdo del div contenedor y el lado izquierdo del div de contenido principal.Además, la regla proporciona 20 píxeles de espaciado en los lados derecho, inferior e izquierdo del div de contenido principal. Los resultados de aplicar la regla al div mainContent son los siguientes:
El código completo es el siguiente:
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>Documento sin título</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>
<!--etiqueta div contenedor-->
<div id="container">
<!--etiqueta div barra lateral-->
<div id="sidebar">
<h3>Contenido de la barra lateral</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--etiqueta div mainContent-->
<div id="mainContent">
<h1> Contenido principal </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>Encabezado de nivel H2</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 izquierda fija de dos columnas cuando creas un nuevo documento usando los diseños prediseñados que vienen con Dreamweaver.
Crear 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.
Crear una página con un diseño CSS
En el cuadro de diálogo Nuevo documento, selecciona 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, puedes seleccionar HTML, ColdFusion®, PHP, etc. No puedes crear una página ActionScript™, CSS, Elemento de biblioteca, JavaScript, XML, XSLT o Componente ColdFusion con un diseño CSS. Los tipos de página de la categoría Otros del cuadro de diálogo Nuevo documento también tienen restringida la inclusión de diseños de página CSS.
En Diseño, seleccione el diseño CSS que desea utilizar. Puedes elegir entre 16 diseños diferentes. La ventana Vista previa muestra el
diseño y proporciona una breve descripción del diseño seleccionado.
Los diseños CSS prediseñados proporcionan los siguientes tipos de columnas:
Fija
La anchura de columna se especifica en píxeles. La columna no cambia de tamaño según el tamaño del explorador o la configuración de texto del visitante del sitio.
Flotante
La anchura de la columna se especifica como un porcentaje de la anchura del explorador del visitante del sitio. El diseño se adapta si el visitante del sitio hace el explorador más ancho o estrecho, pero no cambia según la configuración de texto del visitante del sitio.
Seleccione un tipo de documento del menú emergente DocType.
Seleccione una ubicación para el CSS del diseño desde el menú emergente CSS de diseño.
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
Agrega CSS para el diseño a una nueva hoja de estilos CSS externa y adjunta la nueva hoja de estilos a la página que estás creando.
Vincular a archivo existente
Le permite especificar un archivo CSS existente que ya contiene las reglas CSS necesarias para el diseño. Esta opción es particularmente útil cuando desea usar el mismo diseño CSS (las reglas CSS para el cual están contenidas en un solo archivo) en múltiples documentos.
Siga uno de estos procedimientos:
- Si seleccionó Agregar al encabezado desde el menú emergente CSS de diseño en (la opción predeterminada), haga clic en Crear.
- Si seleccionó Crear nuevo archivo en el menú emergente CSS de diseño, 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 seleccionó Vincular a archivo existente desde el menú emergente CSS de diseño, agregue el archivo externo al cuadro de texto Adjuntar archivo CSS haciendo clic en el icono Agregar hoja de estilos, completando el cuadro de diálogo Adjuntar hoja de estilos externa y haciendo clic en Aceptar.Cuando termine, haga clic en Crear en el cuadro de diálogo Nuevo documento.
Nota
Cuando seleccione la opción Vincular a archivo existente, el archivo que especifique debe tener ya las reglas para el archivo CSS contenidas dentro de él.
Cuando pone el CSS del diseño en un nuevo archivo o vincula a un archivo existente, Dreamweaver automáticamente vincula el archivo a la página HTML que está creando.
Nota
Los comentarios condicionales de Internet Explorer (CC), que ayudan a solucionar problemas de renderizado de IE, permanecen incrustados en el encabezado del nuevo documento de diseño CSS, incluso si selecciona Nuevo archivo externo o Archivo externo existente como la ubicación para su CSS de diseño.
(Opcional) También puede adjuntar hojas de estilos CSS a su
nueva página (no relacionadas con el diseño CSS) cuando cree la página.
Para hacer esto, haga clic en el icono Adjuntar hoja de estilos encima del
panel Adjuntar archivo CSS y seleccione una hoja de estilos CSS.
Para un recorrido detallado de este proceso, consulte el artículo de David Powers, Adjuntar automáticamente una hoja de estilos a nuevos documentos.
Agregar diseños CSS personalizados a la lista de opciones
Cree una página HTML que contenga el diseño CSS que desee agregar a la lista de opciones del cuadro de diálogo Nuevo documento.El CSS para el diseño debe residir en el encabezado de la
página HTML.
Nota
Para hacer que tu diseño CSS personalizado sea coherente con los otros diseños que vienen con Dreamweaver, deberías guardar tu archivo HTML con la extensión .htm.
Agregue la página HTML a la carpeta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.
(Opcional) Agrega una imagen de vista previa de tu 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 x 193 píxeles de alto.
Nota
Dale a tu imagen de vista previa el mismo nombre de archivo que tu archivo HTML para que puedas realizar un seguimiento fácilmente. Por ejemplo, si tu archivo HTML se llama miDiseñoPersonalizado.htm, llama a tu imagen de vista previa miDiseñoPersonalizado.png.
(Opcional) Crea un archivo de Notas para tu diseño personalizado
abriendo la carpeta Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes,
copiando y pegando cualquiera de los archivos de Notas existentes en la
misma carpeta, y renombrando la copia para tu diseño personalizado. Por ejemplo,
podrías copiar el archivo oneColElsCtr.htm.mno, y renombrarlo miDiseñoPersonalizado.htm.mno.
(Opcional) Después de haber creado un archivo de notas para tu diseño personalizado, puedes abrir el archivo y especificar el nombre del diseño, la descripción y la imagen de vista previa.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
