| Dreamweaver CS4 | 
PDF (adobe.com)
|
| Dreamweaver CS4 |
PDF (adobe.com)
|
|
Recursos de Dreamweaver CS4 |
Acerca de la estructura del diseño de páginas con CSSAntes 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. Ver gráfico a tamaño completo 
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: Ver gráfico a tamaño completo  Etiqueta div de contenedor, 780 píxeles, sin margen
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: Ver gráfico a tamaño completo  Div de barra lateral, flotación a la izquierda
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:
Ver gráfico a tamaño completo  Div de contenido principal, margen izquierdo de 250 píxeles
El código completo es el siguiente: <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.
|
