Artículo
10/20/2021

Lección 3: Introducción a la presentación en pantalla con CSS

Objetivos:

En esta lección aprenderemos los conceptos fundamentales de diseño Web basados en CSS y la preparación de una estructura visual de página web con dos columnas y anchura fija. Además veremos el empleo de un archivo de “reset” de CSS y cómo se añade a las páginas. Se aborda también el uso del elemento <div> y las propiedades “float” y “clear” para crear columnas en la página.

Para empezar

Vamos a trabajar con algunos archivos de la carpeta HTML5_03lessons. Comprueba que has descargado y que tienes en tu disco duro la carpeta HTML5lessons.

Para las prácticas hemos utilizado como editor de textos Microsoft Visual Web Developer Express, pero existen numerosas alternativas para la creación y edición de páginas Web que puedes utilizar también.

El papel del archivo de reset CSS

Antes de empezar a crear un diseño visual de página Web vamos a ver cómo se utiliza un archivo de reset de CSS. Todos los elementos HTML se muestran en pantalla utilizando los estilos por defecto que aplica cada navegador. Ya hemos visto en el capítulo precedente cómo CSS nos permite definir estilos para tipos de letra, modificando el tamaño y la fuente, pero hay otros estilos no tan obvios. Por ejemplo: el estilo por defecto para un elemento heading 1 (<h1>) incluye unos márgenes de 10 pixels por encima y por debajo del texto. Si queremos modificar el estilo de h1 para que no lleve márgenes, tendremos que indicar de manera explícita unas reglas que conviertan dichos valores a cero.

Una regla CSS para anular los márgenes superior e inferior de los elementos heading 1 es así:

h1{
   margin-top:0px;
   margin-bottom:0px;
}

Todos los elementos HTML incluyen márgenes por defecto. Aunque los navegadores web actuales tienen una calidad muy superior a los antiguos, conviene saber que cada motores de restitución empleado por los navegadores aplica sus propias reglas para mostrar los elementos en pantalla. En teoría esto quiere decir que el margen por defecto de 10 pixeles en un navegador X puede transformarse en 15 pixels en el navegador Y. Estas diferencias generan resultados no homogéneos a la hora de ver las páginas en distintos sistemas (no obstante, las diferencias tampoco son tan drásticas como hemos sugerido en este ejemplo, pero existen y hay que contar con ellas).

Una técnica para homogeneizar las presentaciones en pantalla consiste en utilizar un archivo CSS de reset que elimine los estilos por defecto aplicados a los elementos HTML utilizados con más frecuencia. Con este reseteo de valores podemos conseguir una base fiable y coherente sobre la cual construir nuestros nuevos estilos. Para hacernos idea de cómo funcionan los estilos, vamos a abrir una página que ya tiene varios estilos y le asociaremos una hoja de estilos CSS de reset.

1 En el editor de textos, en Archivo selecciona Abrir. Abre en la carpeta HTML5_03lessons el archivo 03_reset.html.

Este archivo contiene una serie de elementos HTML genéricos, como títulos, párrafos, listas y formularios. No incluye estilos CSS.

2 Muestra en el navegador la página y mira el espacio de separación que hay entre los títulos, y fíjate también en el aspecto de las listas de datos y el formulario. Lo que haremos ahora es asociar una hoja de estilo CSS de reset para ver cómo afecta a la presentación en pantalla de estos elementos. Cierra el navegador y vuelve al editor.

3 Añade la siguiente línea de código (destacada en color rojo) debajo de la etiqueta de título para asociar la hoja de estilos reset.css que se encuentra también en la carpeta HTML5_03lessons:

<head>
   <meta charset="utf-8" />
   <title> CSS Reset</title>
   <link href="reset.css" rel="stylesheet" type="text/css">
</head>

Guarda el archivo y visualízalo en el navegador

Una página con elementos HTML habituales con reset de estilos CSS.

Muchos de los elementos en esta página tenían los márgenes y distancias al borde prefijadas a cero. En consecuencia, el espacio entre ellos se ha eliminado. Se han reseteado también otros muchos estilos, como por ejemplo las listas de datos, que se han dejado en valor “none”, lo que elimina los puntos (las “viñetas” o “bullets” como también se los denomina en los textos) de las líneas en las listas no ordenadas, así como los números de orden en las listas ordenadas. Cierra el navegador y vuelve al editor de textos.

4 Selecciona Archivo-Abrir. En la ventana, selecciona el archivo reset.css y pulsa Abrir. Revisa un momento el contenido.

Esta serie de reglas elimina los valores por defecto de márgenes, márgenes interiores (“padding”), y los bordes de casi todos los elementos HTML.

5 Ahora vamos a modificar la hoja de estilos, pero tenemos que asociarla a las páginas web. Recuerda que las hojas de estilos de reset son opcionales. Nos ayudan a normalizar la presentación en los distintos navegadores, y algunos diseñadores también incluyen en ellas sus propios estilos de uso frecuente para resetear los valores iniciales de los elementos.

Ampliación de la hoja de estilos de reset

Eric Meyer fue el primer desarrollador que preparó hojas de estilo de reset, que después distribuyó para uso público. Puedes utilizar sus reglas de estilo en este ejercicio. Si quieres buscar más información sobre las técnicas de reset, visita la web http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/.

Muchos diseñadores se preparan sus propias hojas de estilos de reset para resolver sus propias necesidades. Por ejemplo, si la familia de fuentes que utilizas con más frecuencia es Verdana, puedes añadir esta regla al estilo del elemento body. Si te gusta poner más espacio de separación entre párrafos, puedes fijar el valor estándar de tamaño de línea que te parezca más adecuado. Lo que importa es disponer de una serie de reglas coherentes que se puedan utilizar para empezar cualquier proyecto de inmediato.

EL uso de hojas de reset CSS puede tener algunas desventajas, sobre todo para los neófitos: tendrán que recordar constantemente que están utilizando dicha hoja de estilos y deben tener en cuenta cómo afectará a los distintos elementos del sitio web. Si estamos aplicando la hoja de reset a todo el sitio, algunos de sus efectos pueden resultar sorprendentes, sobre todo con elementos con los que no estamos especialmente familiarizados. Por ejemplo, un archivo CSS de reset elimina los márgenes externos e internos de la mayoría de los elementos de los formularios, y cuando utilizan por primera vez con campos de formulario, muchos se preguntan por qué los botones, campos de texto y otros elementos aparecen de esa forma.

Breve historia de las técnicas de presentación en pantalla para la Web

Aunque aquí vas a aprender a crear un diseño visual de página utilizando estilos CSS, debes saber que esto no ha sido siempre la técnica normal. Cuando se empezó con el diseño web a mediados de los 90, el único método que se podía emplear para crear estructuras visuales complejas, como por ejemplo la presentación en varias columnas, consistía en emplear el elemento tabla (<table>). La tabla HTML estaba pensada inicialmente para mostrar datos de manera estructurada, en filas, columnas y celdas. Sin embargo los diseñadores empezaron a utilizar este elemento como base para las estructuras visuales de las páginas. En aquel momento esa técnica estaba plenamente justificada: las tablas era lo único que tenían para generar el tipo de diseños que se necesitaban y, además, eran un recurso extremadamente flexible.

A partir de aquí, empezaron a utilizarse técnicas como el anidamiento de tablas, es decir, crear tablas dentro de celdas de otras tablas de mayor tamaño. Por ejemplo, el código para una página normal de dos columnas podía empezar creando una tabla de tres filas y dos columnas:

Una tabla web de tres filas y dos columnas.

Puesto que la primera fila se iba a convertir en la sección de cabedera, no interesaría que quedase dividida en dos columnas. La etiqueta HTML <colspan> permite fusionar las dos celdas:

Una tabla cuya primera fila consta de dos celdas fusionadas en una sola.

En esta primera fila el diseñador, por ejemplo podía intentar insertar una sección independiente de tres columnas, para mostrar un logo y otros elementos, como una barra de navegación o un campo para pedir credenciales de usuario. Para añadir esta sección, el diseñador tenía que crear una nueva tabla (esta vez con una fila de tres columnas) dentro de la primera fila de la tabla inicial:

Una nueva tabla, con una fila y tres columnas, anidada dentro de la primera fila de la tabla original.

Para generar esta estructura de tabla, el diseñador tenía que configurar la tabla inicial con una anchura y altura fijas. Supongamos que el diseñador también quisiera un borde negro fino para todos los elementos. La propiedad “border” de las tablas HTML es muy básica no nos permite añadir colores. Una solución frecuente consistía en insertar la tabla actual dentro de otra, que consistía simplemente en una única celda con el fondo en color negro. Al modificar el margen interior y el color de fondo, y fusionar otras celdas más, el diseñador podía así crear una estructura visual basada en tablas con un cierto estilo.

Típica “plantilla” para una estructura basada en tablas tal y como se muestra en un navegador.

Si quieres practicar un poco con tablas en tu editor, puedes encontrar un ejemplo en la carpeta HTML5_03lessons el archivo 03_table.html.

CSS ha sustituido ya el empleo de tablas para organizar las páginas, por lo que los elementos de tabla de HTML van regresando, poco a poco, a su función original, que es la de mostrar datos estructurados, y abandonan su papel como armazón visual de las páginas. Seguramente podrás seguir encontrando numerosos ejemplos de este tipo de estructuras en la web, pero en este libro no vas a aprender a crearlas, sino que vas a aprender los conceptos básicos de CSS que nos permiten obtener los mismos resultados.

Introducción a las distintas opciones de presentación de páginas

Antes de la estructura visual de nuestras páginas web tenemos que decidir unas cuantas cosas. Lo primero es qué anchura va a tener. Hay dos categorías principales de estructuras en base a su anchura: las de anchura fija y las de ancho variable. En las estructuras de ancho fijo todos los elementos de la página se anidan dentro de un contenedor que tiene un ancho explícito (en este ejemplo utilizamos el valor de 960 pixels, pero se suele utilizar también la unidad de medida em). La anchura fija es una solución muy cómoda para el diseñador ya que permite ubicar con precisión los distintos elementos (cabeceras, barras laterales y pies de página). Además aporta un esqueleto robusto para otros elementos, como la anchura de párrafo o el posicionamiento de imágenes cuando éstas aparecen en gran número (por ejemplo en sitios web de catálogos de producto).

Las estructuras de ancho fijo indican explícitamente la anchura y ocupan un espacio definido dentro de la página web.

Las estructuras flexibles se llaman así porque están pensadas para adaptarse a la anchura de la ventana del navegador en cualquier momento. Este tipo de disposiciones es útil cuando los usuarios acceden desde pantallas con resoluciones muy variadas, lo que hace imposible elegir un ancho fijo que ofrezca el mismo aspecto en todas ellas. Una estructura flexible bien diseñada es capaz de ajustarse automáticamente al tamaño de ventana del navegador.

Las estructuras visuales flexibles se reajustan al cambiar el tamaño de la ventana del navegador.

Estas estructuras son adecuadas para la web porque permiten el reposicionamiento en pantalla de textos e imágenes. Puesto que los dispositivos móviles suponen actualmente una proporción importante de los navegadores en uso en el mercado, las estructuras flexibles por lo general se prefieren para ofrecer una mejor experiencia en este nuevo tipo de interfaces frente a las estructuras de ancho fijo, que habitualmente tienen problemas por falta de espacio (sobre todo en teléfonos móviles).

Las estructuras de ancho variable son más difíciles de diseñar y obligan al creador a resolver una serie de asuntos adicionales. Por ello, en esta lección vamos a empezar por crear una estructura de anchura fija.

El elemento <div>: creación de una estructura CSS de dos columnas con anchura fija

En esta práctica vamos a crear una estructura visual de anchura fija con dos columnas. Para empezar vamos a trabajar con una página sencilla que ya hemos preparado para ti. Esta página emplea una serie de elementos <div> para generar su estructura de base. Podemos considerar al elemento <div> como un contenedor genérico en el que podemos poner elementos relacionados entre sí de forma lógica. La apertura y cierre de etiquetas <div> suele hacerse rodeando a otros elementos de la página, de forma que dichos elementos quedan anidados dentro del contenedor. Puedes tener en la misma página todos los elementos <div> que consideres necesarios y con frecuencia se utilizan para crear el armazón visual. Un elemento <div> suele llevar un atributo ID (con lo que adquiere un “nombre” explícito dentro de la página) o bien pertenecer a una clase CSS, utilizándose ambos como medio para aplicar al contenedor uno o más estilos CSS. El empleo de elementos <div> facilita a otras personas la identificación de las diversas secciones en que se subdivide la página y también nos ayuda a controlar y aplicar estilos en cada una de ellas.

En esta práctica vamos a utilizar el elemento div con identificadores ID de CSS.

1 En el editor de textos, desde el menú Archivo- Abrir, ve a la carpeta HTML5_03lessons y selecciona el archivo 03_layoutstart.html y pulsa Abrir

2 Guarda el archivo en el disco con el nombre 03_layoutwork.html. Así conservarás el archivo original como copia de seguridad. Esta página contiene una serie de elementos HTML <div> con algún contenido que queremos mostrar en pantalla en ciertas posiciones. Analiza el código de la página para tratar de entender cómo se ha creado. Hemos incorporado algunos comentarios que te orientarán.

La estructura de la página te la entregamos prediseñada. A lo largo de esta práctica vamos a ver en detalle cómo funciona. El primer paso consiste en saber cuál es la función de la etiqueta <div> y el papel tan importante que representa en la organización visual de las páginas con CSS.

3 En el editor, encuentra la línea <div id="wrap">. Es el comienzo de una sección de la página en donde se anidan el resto de elementos. Por sí sola, una etiqueta <div> no hace nada, que es algo que diferencia a esta etiqueta de las otras, ya que los demás elementos HTML, como los párrafos (<p>) o las listas (<ul>, <li>, <dl>), ejercen diversos efectos sobre sus contenidos.

La etiqueta <div> así como los párrafos y listas, entre otros, son elementos de bloque. Los elementos de bloque generalmente se insertan en las páginas en la línea siguiente al elemento previo. La etiqueta div suele asociarse bien con una clase CSS o con un ID, y con ello ya podemos aplicarles reglas individualizadas para controlar su aspecto. Antes de hacer esto vamos a echar un vistazo a la página tal y como se ve en el original.

4 Abre la página en el navegador. El archivo
reset.css con el que hemos estado trabajando antes es el que hace que todos los elementos de la página aparezcan pegados unos a otros.

Esta página incluye una serie de secciones div y los estilos aplicables a los elementos HTML se han reseteado.

Para ver cómo responden las etiquetas div vamos a aplicar estilo al elemento con el ID “wrap” de forma que tenga ancho fijo. Cierra el navegador y vuelve al editor de texto.

5 Encuentra la etiqueta <style> que hemos añadido al documento. Inserta una regla de estilo para el ID llamado “wrap”. El siguiente código (destacado en rojo) es lo que tienes que escribir:

<style type="text/css">
 #wrap {
         background-color:#E0B3B9;
   }
</style>

Guarda el archivo y vuelve a abrir la página en el navegador. El div wrap incluye dentro a todos los demás elementos de la página, como se puede ver ahora que le hemos puesto un fondo de color morado. En este momento el div se extiende para cubrir toda la anchura de la pantalla. Es una presentación muy básica, que sigue el modelo de ancho variable. Si cambias el tamaño de la ventana, verás que el texto se reorganiza. Ahora vamos a declarar una anchura fija para el div wrap.

6 En el editor de texto añade estas dos líneas de código (destacadas en rojo) a tu estilo #wrap:

#wrap {
 background-color:#E0B3B9;
   width:960px;
   border:thin solid black;
}

Guarda la página y vuelve a visualizarla en el navegador. Ahora el div wrap ocupa 960 pixels de la página.

El div wrap ahora tiene una anchura de 960 pixels y un borde fino de color negro alrededor.

También hemos cambiado el borde, para mostrar mejor los límites del div wrap. Resize your browser window again. The text no longer reflows, and if your browser window is narrower than 960 pixels, your content is cropped. When the browser window is wider than 960 pixels, the box defined by the wrap div is aligned to the left. There is a simple way to position this div so it will always be centered in the browser window.

7 Vuelve al editor y añade esta línea de código marcada en rojo:

#wrap {
   background-color:#E0B3B9;
   width:960px;
    border:thin solid black;
 margin:0 auto;
}

Es una regla abreviada para el margen. El valor ‘0’ define los márgenes superior e inferior del div wrap, y el valor auto indica los márgenes derecho e izquierdo. El valor “auto” calcula automáticamente un margen igual a ambos lados del div wrap y de esta manera el cuadro queda centrado en pantalla (y permanece centrado aunque cambiemos el tamaño de la ventana).

Guarda el archivo y visualízalo de nuevo en el navegador, para ver cómo funciona la regla abreviada. Cierra el navegador y vuelve al editor. Ahora vamos a trabajar con otros elementos div pero antes tenemos que aplicar un estilo básico a la cabecera.

8 En el editor de textos, inserta una imagen dentro del div llamado masthead — en este caso es el sitio donde pondremos el logo. Para empezar vamos a hacer que sea la imagen quien defina la altura del header añadiendo este código para insertar el archivo de imagen del logo que tenemos en la carpeta HTML5_03lessons.

<div id="masthead">
 <img src="images/wa_logo.jpg" width="200" height="123" alt=" Worldwide Apparel logo" />
</div>

La etiqueta div no lleva estilo, aunque la altura del div header viene definida por la altura de la imagen inserta dentro. El color del área donde se ha insertado es el mismo morado que corresponde al color de fondo declarado antes para el div que sirve de encuadre (“wrap”). Si definimos otro color de fondo para nuestro div “masthead” lo veremos en pantalla.

9 Debajo de las reglas de #wrap, añade el siguiente código que se aplicará a masthead:

  #masthead {
   background-color:#FFF;
 }

Guarda el archivo y muéstralo en el navegador. Ahora todo el div masthead aparece con el fondo de color blanco, ya que se superpone al color del div wrap.

La sección masthead ahora tiene un logo y un color de fondo.

10 La sección de navegación va a exigir un trabajo más avanzado, iremos con ello más adelante en esta misma sección. De momento vamos a declarar unas cuantas reglas de estilo básicas para definir esta sección en la página. Pon el siguiente selector y sus reglas debajo de la regla #masthead:

  #mainnav {
  background-color:#666;
  height:40px
 }

11 Guarda la página y visualízala en el navegador.

La sección mainnav tiene ahora color de fondo y una altura definida.

Estamos aplicando estilos a la página empezando por arriba y bajando hacia el final, y ya hemos llegado a la sección interna que contiene la barra lateral y el contenido. Vamos a ver cómo se crean columnas para su colocación mediante divs. La actual especificación CSS no tiene un elemento “columna”. Las “columnas” como tales son divs con estilo que normalmente son más altas que anchas. Para ver cómo se consiguen representar en pantalla, tenemos que entender antes el concepto de la propiedad float de CSS.

La propiedad float CSS

La propiedad float en CSS hace posible que un texto pueda escribirse alrededor de una imagen. Este estilo ha sido tomado del diseño de imprenta, donde a este efecto se le llama “justificación” del texto. CSS consigue el mismo efecto haciendo que los elementos que siguen a un elemento “flotante” puedan rodearlo, cambiando su posición relativa con respecto a él. Este comportamiento también nos sirve para crear columnas en una página.

En la imagen de la izquierda hay un gráfico anidado dentro de un párrafo. El gráfico ocupa un espacio vertical completo y el texto posterior se empieza a escribir a partir de su esquina inferior derecha, ya que no se ha aplicado aquí la propiedad float. En la imagen de la derecha, los elementos son los mismos, pero hemos aplicado la regla float: right al gráfico. El gráfico se desplaza a la derecha todo lo que puede y el texto se escribe a su izquierda a partir del primer punto disponible de su contenedor (en este caso, la esquina superior izquierda del div contenedor).

Una imagen con su emplazamiento por defecto con HTML (izquierda) y la misma imagen “flotando” hacia la derecha.

El valor float se puede también declarar como “left”. En el ejemplo anterior, la imagen pasaría al lado izquierdo del div contenedor, y el texto se empezaría llenando el lado derecho restante.

Los únicos valores posibles para float son “left”, “right” y “none”. No se puede centrar un objeto utilizando esta propiedad.

Si queremos tener múltiples elementos flotantes dentro del mismo contenedor, el resultado es que se alinean entre sí. Este comportamiento se suele utilizar en ciertas funciones habituales de las páginas web, como por ejemplo los menús horizontales o las galerías de imágenes.

Es fundamental conocer cómo interactúan múltiples elementos flotantes unos con otros a fin de utilizarlos correctamente. Veamos este ejemplo: son seis imágenes dentro de un div de 360 pixels de ancho. Cada imagen tiene una anchura de 50 pixels y hay 10 pixels de margen (5 a la derecha y otros 5 a la izquierda). Al sumar los valores podemos ver que 6 × 50 son 300 pixels par alas imágenes, y 6 × 10 suman 60 pixels de margen. Por tanto, las imágenes junto con sus márgenes nos caben dentro del div, que tiene una anchura total de 360 pixels.

Si hemos declarado una anchura explícita para el contenedor, al añadir una nueva imagen hacemos que se posicione en la fila siguiente:

Esto nos puede servir, por ejemplo, para crear una galería de imágenes en miniatura, ¡pero no nos vale para un menú!

En la práctica siguiente vamos como usar la propiedad float para crear una estructura de dos columnas.

Creación de columnas con la propiedad float

Vamos a aplicar la propiedad float a los divs de contenidos sidebar y main para ver cómo les afecta.

1 Añade el siguiente selector y las reglas de estilo debajo de la regla #mainnav:

   #sidebar {
   float:right;
   width:300px;
   background-color:#CCC;
 }

Guarda la página y muéstrala en el navegador. La página aparece “rota”. Ahora vas a ver qué es lo que causa que la página salga “rota” como en este caso, ya que este efecto enseña cómo funciona la propiedad float.

Aunque la página parece rota, los divs están realmente funcionando tal y como debe ser: cuando convertimos en flotante un elemento (en este caso el div sidebar), queda eliminado del flujo normal del HTML. Es por eso que la barra lateral se extiende por todo el contenedor.

La barra lateral queda flotando, pero se superpone sobre los límites de otros elementos de la página.

Ahora vamos a declarar como flotante al otro div, hacia el lado izquierdo, y vamos a ver cómo afecta eso a nuestra página. Vuelve al editor.

2 Añade este selector y las reglas de estilo debajo de la regla #sidebar:

   #main {
   width:600px;
   float:left;
   background-color:#ADA446;
 }

3 Guarda el archivo y vuelve a mostrar la página en el navegador.

El div “main” flota hacia la izquierda, pero el “footer” sube a la parte superior siguiendo el curso o “flujo” de restitución de la página.

Al hacer flotar este div hacia la izquierda hemos resuelto el problema de que parte de su contenido apareciera debajo de sidebar; a pesar de que por la cantidad de contenido que tiene el div main parte de él se sale del propio contenedor. También vemos que tenemos otro problema con el elemento footer: debería aparecer en la parte inferior de la página pero no es así.

Para obligar al div footer a ponerse en la parte inferior de la página le vamos a asignar una nueva propiedad llamada clear.

La propiedad clear

Cuando añadimos la propiedad CSS clear a un objeto, le estamos indicando una regla que dice “no admito elementos flotantes a mi lado”. Podemos especificar si queremos que no haya elementos flotantes a la izquierda, a la derecha o en ambos lados. En el caso del pie de página, queremos eliminarlos de ambos lados.

1 Añade este nuevo selector y sus reglas debajo de las reglas de #main:

  #footer {
  clear:left;
  background-color:#BA2B22;
 }

2Guarda el archivo y visualízalo en el navegador. Ahora el pie de página queda en la parte inferior del div main. Lo que hace la regla clear:left es impedir la presencia de elementos flotantes a su izquierda. El div main es flotante, por lo que el pie se mueve a la siguiente posición disponible. Cierra el navegador y vuelve al editor.

El problema es que el div “sidebar” siguen superpuesto al pie y aunque podemos cambiar la regla a clear:right y con ello lo evitaríamos, una forma más segura de resolver esta situación es asegurarnos de que no se van a colocar objetos flotantes ni a su derecha ni a su izquierda.

3 Cambia el valor de la propiedad clear así:

clear:both;

De esta forma nos aseguramos de que no habrá elementos flotantes en ambos lados del pie de página.

4 Guarda el archivo y vuelve a mostrarlo en el navegador. Verás que no cambia con respecto al paso 3 pero el pie de página ahora está mejor preparado para cambios futuros en el contenido.

Creación de un menú de navegación basado en listas con “float”

Ahora que has aprendido los conceptos básicos de “float” y “clear”, volvamos a la sección de la barra de navegación y vamos a añadir un menú sencillo basado en una lista no ordenada (es decir, que sus líneas no llevan numeración, sino viñetas o signos). Los elementos de la lista dentro de este menú tendrán que ser flotantes para modificar la presentación vertical por defecto de las listas. Los menús de navegación CSS se utilizan mucho en el diseño basado en estándares porque se pueden actualizar y modificar de manera mu sencilla, y porque se basan en textos ( y no en imágenes), lo que mejora la accesibilidad en dispositivos como los lectores de pantalla, e incluso ayudan a mejorar el posicionamiento de nuestras páginas en los buscadores.

1 Desde el editor de textos, busca el div mainnav y añádele la siguiente lista no ordenada y estas líneas:

<div id="mainnav">
 <ul>
     <li><a href="index.html">Home</a></li>
     <li><a href="ourcompany.html">Our Company</a></li>
     <li><a href="policies.html">Policies and Procedures</a></li>
     <li><a href="doc_repository.html">Document Repository</a></li>
     <li><a href="news.html">News & Events</a></li>
   </ul>
</div>

Los elementos de la lista son enlaces a páginas que todavía no existen. Pero necesitamos crear estos enlaces para que se apliquen correctamente los estilos que vamos a declarar ahora.

2 Guarda el archivo y visualízalo en el navegador.

La lista aparece en la posición vertical por defecto y se superpone a la barra lateral.

Fíjate que la página aparece otra vez como “rota”. Esto se debe a que la lista se está superponiendo a la barra lateral flotante. Además la lista no tiene los puntos (viñetas) indicadores. Recuerda que nuestra página está asociada a una hoja de estilo CSS de reset y una de sus reglas declara la propiedad list-style:none, que elimina los puntos indicadores en las listas. En el caso de este ejemplo, la falta de puntos es deseable, ya que vamos a utilizar la lista como menú de navegación.

3 Vuelve al editor y localiza la regla #mainnav. Añade una nueva regla entre ésta y la regla de la barra lateral pulsando Intro unas cuantas veces e insertando el código siguiente:

   #mainnav li {
   float:left;
 }

Fíjate que en este paso estamos creando una nueva regla justo después de #mainnav. Aunque podríamos haber insertado la regla al final de la hoja de estilos, las buenas prácticas recomiendan que se pongan juntas las reglas que tienen relación entre sí para que el código esté más organizado y sea más fácil de mantener.

Es un nuevo tipo de regla CSS llamada selector de contexto; se aplica exclusivamente a los elementos de lista que hay dentro del div mainnav. Si definiésemos una nueva regla para aplicarla a los elementos de lista (en general), afectaría a todos los elementos de lista de nuestra página, lo que no nos valdría para nuestro ejemplo, ya que queremos organizar visualmente solo esta lista.

4 Guarda la página y visualízala en el navegador. Todos los elementos aparecen ahora colocados en horizontal. Los enlaces casi no se ven porque hay muy poco contraste entre el enlace que se escribe en color azul oscuro y el gris oscuro del fondo de la sección “mainnav”, pero lo vamos a resolver añadiendo unas cuantas reglas de estilo más.

Al declarar los elementos de la lista como flotantes, se colocan en sentido horizontal.

5 Vuelve al editor y añade este código a la regla #mainnav li:

#mainnav li {
   float:left;
  width:170px;
   height:40px;   background-color:#CCC;
       text-align:center;
   border-left:1px black solid;
   border-right:1px black solid;
}

En este código hemos hecho estos cambios: hemos definido el recuadro alrededor de cada elemento de la lista con una anchura de 170 pixels y una altura de 40 pixels. Hemos añadido un color de fondo, hemos alineado cada elemento al centro del recuadro y además, se dibujarán en pantalla los bordes verticales de cada recuadro con un trazo negro de 1 pixel. Guarda el archivo y visualízalo en el navegador.

Al declarar la altura y la anchura del recuadro, el texto se pone de forma natural en la parte superior. Lamentablemente, aunque existe la propiedad text-align:center que nos permite centrar el texto en la vertical, no tenemos una forma fácil de centrar los objetos en la vertical con CSS. En este caso vamos a utilizar la propiedad line-height para mover hacia abajo el texto del interior.

6Debajo de la declaración de border-right, añade esta línea de código:

  line-height:40px;

7Guarda el archivo y muéstralo en el navegador, El texto aparece ahora centrado dentro del recuadro. Conviene notar que podemos tener problemas si en un futuro cambiásemos el texto de los elementos de la navegación, ya que tanto el valor de “line-height” como el tamaño del propio contenedor se basan en el tamaño de la fuente. Si cambiásemos el tamaño de la fuente o la altura de la sección “nav”, habría que volver a ajustarlo todo para compensar los desplazamientos.

Añadiendo el valor line-height a los elementos de la lista se posicionan verticalmente dentro de la barra de navegación.

Añadir estilos para el texto

Antes de seguir con nuestra estructura visual vamos a importar algunos estilos de texto basados en los que hemos creado en la Lección 2. Hasta aquí hemos añadido los estilos dentro de una hoja de estilos interna en vez de hacerlo sobre una externa. Cuando estamos diseñando la estructura de las páginas, el empleo de hojas de estilo internas es una cuestión de comodidad: resulta más sencillo para crear y modificar reglas si las tenemos dentro de la página y podemos llegar a ellas desplazando la ventana que si las tenemos en un archivo externo. De momento vamos a asociar una hoja de estilos externa que añade reglas de base para elementos como títulos, listas y párrafos.

1 En la parte inicial del archivo HTML busca la etiqueta <link> de la hoja de estilos reset.css. Para añadir otra hoja de estilos externa, selecciona esta línea y pulsa Ctrl + C para copiarla. En la línea siguiente pulsa Ctrl + V para pegarla. Ahora cambia el nombre de archivo “reset.css” por el siguiente “base.css”:

<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="base.css" rel="stylesheet" type="text/css" />

2 Guarda el archivo y visualízalo en el navegador para ver cómo afectan estos nuevos valores a nuestra página. Ahora los titulares y el texto del cuerpo se escriben utilizando el tipo de letra MS Trebuchet y también se han aplicado algunos otros estilos.

La página utiliza ahora una hoja de estilos externa para los elementos de texto.

3 Regresa al editor y selecciona el menú Archivo – Abrir. En la ventana que aparece, ve a la carpeta HTML5_03lessons, selecciona el archivo base.css y pulsa Abrir. Revisa los estilos que incluye este archivo CSS. Los conceptos básicos para los tipos de letra y tamaños ya los vimos en la Lección2. Mantén abierto el archivo, porque lo vamos a modificar dentro de un momento.

Existen algunas propiedades CSS adicionales aplicables a las fuentes, como “font-weight”, “text-transform” o “letter-spacing”. Si quieres más información e instrucciones paso a paso para utilizar técnicas avanzadas de estilos para texto, puedes leer la Lección 3 “Formateo de Textos con CSS” en el libro “HTML5 Digital Classroom”.

Efecto de los márgenes internos y externos en una estructura de anchura fija

En esta sección vamos a separar las secciones de texto de nuestra página (que en este momento tienen márgenes de cero pixels, por efecto de la hoja de estilos de reset). Vamos a ver ahora algunas estrategias para controlar la estructura visual de la página. El objetivo de esta práctica no consiste en mostrar un método único de organización con CSS, sino en conocer las diferentes opciones posibles, lo que te ayudará en futuros proyectos a la hora de decidir qué método es el más adecuado en cada caso.

En este primer ejercicio vamos a añadir un margen interior (“padding”) al elemento sidebar.

1 En el editor de texto, abre el archivo 03_layoutwork.html y visualiza la pantalla en el navegador. Verás que el texto de la barra lateral está pegado al borde, quedaría mejor si estuviera un poco separado.

El texto aparece pegado al borde izquierdo de la barra lateral.

El ancho de esta barra lateral está declarado como 300 pixels. Básicamente podemos separar el texto del borde izquierdo de dos manera: la primera consiste en utilizar el valor de margen interior o “padding” del contenedor y la segunda, utilizar el margen externo de los objetos contenidos. Vamos a ver ahora los pros y contras de ambas técnicas, empezando por el padding.

2 Vuelve al editor, localiza la regla para el “sidebar” en el código CSS y añade esta línea:

#sidebar {
  float:right;
  width:300px;
  background-color:#CCC;
padding:0px 20px 0px 20px;
}

Es una regla abreviada y los valores se leen imaginando el curso de las manillas del reloj. El primer valor (0px) es la separación o margen interior con respecto al borde superior. El segundo valor (20px) corresponde a la separación con respecto al margen derecho. El tercero (0px) es la separación con respecto al borde inferior y el ultimo (20px) es el margen interior de separación aplicable al borde izquierdo. Guarda la página y visualízala en el navegador.

Añadiendo un margen interior (“padding”) de 20 pixels a la derecha e izquierda de la barra lateral el ancho total del contenedor aumenta en 40 pixels.

Al añadir 20 pixels de espacio interior a la derecha e izquierda del div sidebar, aumentamos en 40 pixels la anchura de la columna. En efecto, vemos que la columna ahora es más ancha, justo esos 40 pixels, es decir, que ahora mide 340 pixels: 300 vienen de la propiedad “width” de la regla CSS correspondiente y otros 40 más del padding que acabamos de añadirle. Como veremos ahora, es sencillo de hacer pero nos genera otro tipo de problemas que podremos comprobar en seguida.

3 Vuelve al editor. Añade una cantidad de margen interno al div main porque también necesitamos separa el texto del borde en esa parte de la página.

Encuentra la regla #main y añade el siguiente valor de padding:

#main {
  width:600px;
  float:left;
  background-color:#ADA446;
padding:0px 20px 0px 20px;
}

Guarda el archivo y muéstralo en el navegador: aparece un problema nuevo. La anchura total de las dos columnas, ahora que hemos añadido el padding, es mayor que la del contenedor donde están anidadas. Podemos ver que el div main se ha desplazado hasta el único sitio donde puede desplegarse por completo, que es debajo de sidebar.

Podemos resolver esto de varias formas: podemos aumentar la anchura total del div wrap, podemos reducir el ancho de sidebar o de main (o ambos), o también podemos reducir el valor del margen interno. Todos estos métodos se basan en el uso de “padding” y existe un método alternativo que nos permite separar el texto del borde de las columnas y que no utiliza el padding en absoluto. Ahora lo vemos.

4 Vuelve al editor y localiza las reglas de margen interno que has añadido en los pasos 2 y 3. Selecciónalas y elimínalas. Vamos a conseguir un efecto equivalente pero añadiendo reglas de margen a los elementos de texto dentro de las columnas en el paso siguiente.

5 Debajo de la regla #footer del código CSS, añade esta regla nueva:

  p, h1, h2, h3 {
  margin-left:20px;
  margin-right:20px;
}

Esta regla añade un margen de 20 pixels a la derecha y la izquierda de todos los párrafos y títulos de la página. Guarda el archivo y visualízalo en el navegador.

Si añadimos márgenes a los elementos dentro de la barra lateral, aumenta la separación con respecto al borde pero no se incrementa el tamaño del contenedor.

Como veíamos en el ejemplo anterior con el margen interno, el resultado es un espacio adicional entre el texto y el borde de las columnas. La diferencia esencial es que cuando añadimos margen externo a los elementos de texto, la anchura de las columnas no se ve modificada. Esta es una gran ventaja, puesto que el ancho de las columnas es un valor absoluto y ya no se “rompe” la distribución en pantalla con tanta facilidad como cuando utilizamos el valor de padding.

Pero esta técnica también tiene sus desventajas, puesto que las reglas que acabamos de crear se van a aplicar a todos los párrafos y títulos de nivel 1, 2 y 3 de la página. Por ejemplo, verás que el texto del pie de página se ha desplazado también 20 pixels a la derecha porque su contenido es un párrafo. En el caso de que solo queramos aplicar el margen a los elementos dentro de los divs “sidebar” y “main”, nos vendrá muy bien el selector de contexto que ya hemos utilizado antes.

6 Vuelve al editor y borra las reglas para margin-left y margin-right que has añadido en el paso 5 (pero deja la regla tal cual). Añade ahora este grupo de reglas:

p, h1, h2, h3 {
}
#sidebar p, #sidebar h2, #sidebar h3, #main p, #main h1, #main h2, #main h3 {
  margin-left:20px;
  margin-right:20px;
}

Se trata de una regla CSS abreviada que agrupa los estilos para los elementos de párrafo, heading 1, heading 2 y heading 3 que puedan existir en los elementos cuyo ID sea “sidebar” y “main”, que, como recordarás de la Lección 2, se indica precediendo el nombre de ID con el símbolo de la almohadilla (#). A todos estos elementos se les aplicarán márgenes de 20 pixels a la derecha y la izquierda, lo que equivale a restarles un total de 40 pixels de anchura para su despliegue en pantalla.

7 Guarda el archivo y ábrelo con el navegador. Prácticamente no veremos cambios excepto en el pie de página, que queda de nuevo totalmente pegado al lado izquierdo. Puedes pensar que el cambio es poca cosa, pero ahora nuestro archivo está preparado para cambios futuros. Cierra el navegador y vuelve al editor.

Este método exige algo más de atención a los detalles que el método basado en el margen interno. Por ejemplo, si queremos insertar nuevos elementos dentro de un div, tendremos que crear reglas nuevas para ellos (por ejemplo una imagen o una tabla se verían pegados a la izquierda, otra vez).

También puede que desees que alguno de los elementos tenga un margen distinto. Por ejemplo, que quieras indentar los párrafos dentro de la columna “main” hacia la derecha. En tal caso, habrá que añadir otra regla expresamente para los elementos p del div #main, como se indica en el paso siguiente.

8 Añade una nueva regla justo debajo de la regla anterior, donde aparecían todos los elementos:

#sidebar p, #sidebar h2, #sidebar h3, #main p, #main h1, #main h2, #main h3{
  margin-left:20px;
  margin-right:20px;
}
#main p {
  margin-left:30px;
}

9 Esta regla sobrescribe parcialmente la que habías creado en el paso 6. Guarda el archivo y visualízalo en el navegador. Los párrafos dentro de la columna “main” ahora tienen un margen a la izquierda de 30 pixels, y en contraste con el resto de los elementos, aparecen indentados.

Los párrafos del div “main” tienen reglas explícitas con un margen de 30 pixels.

Excepto en el caso de los cambios que hemos hecho en esta práctica, todos los demás márgenes internos y externos de los elementos se han dejado en cero, en aplicación de la hoja de estilo de reset. Para aumentar la separación del resto de elementos podemos utilizar el grupo de reglas que hemos creado hace un momento.

10 Encuentra la regla vacía para los elementos p, h1, h2 y h3 en tu hoja de estilos. Modifica la regla así:

p, h1, h2, h3 {
 margin-bottom:20px;
}

Guarda la página y ábrela con el navegador. Ahora, casi todos los elementos se separan un poco más unos de otros, al añadirse espacio a sus bordes inferiores. Podemos seguir afinando todos estos valores para mejorar el aspecto de la página, por ejemplo insertando un margen superior al título 2 de la barra lateral, lo que podemos hacer con el código del paso siguiente:

11 En el editor de texto, añade esta regla debajo del grupo de reglas para #main y #sidebar:

  #sidebar h2 {
  margin-top:15px;
}

Guarda de nuevo el archivo y muéstralo en el navegador. Ahora el título h2 de la barra lateral queda más separado del borde superior del contenedor.

Después de aplicar un margen superior de 15 pixels al título h2 de la barra lateral.

Repaso al uso de márgenes internos y externos

En esta lección hemos visto dos métodos para separar los elementos dentro de una página. El primero consiste en añadir margen interno (padding) al elemento div contenedor. En este caso la ventaja es que todos los elementos dentro de este div se ven afectados al mismo tiempo, es una solución rápida y eficiente. Su desventaja es que aumenta la anchura total del propio contenedor. Para compensar esta expansión, tenemos que dejar algo de espacio adicional a los lados. Este comportamiento puede generar cierta confusión y provocar que las páginas se restituyan incorrectamente si no tenemos cuidado.

El segundo método consiste en añadir márgenes externos a los elementos que están dentro del propio div. Su desventaja es que necesitamos más código y hay que prestar atención a los detalles, tenemos que ir viendo cómo se posicionan los elementos individualmente. Su ventaja es que el posicionamiento de la columna es más predecible, puesto que solo tenemos que tener en cuenta una anchura total.

Finalmente, conviene destacar que lo habitual es aplicar una combinación de ambos métodos en cualquier estructura de presentación. Por tanto, debes conocer bien el comportamiento y los efectos de cada uno de ellos.

Aplicar una imagen de fondo al pie de página

Hasta ahora nuestra estructura de página muestra los colores de fondo que hemos declarado a los elementos div. En esta práctica vas a aprender a insertar imágenes. Para ello empezaremos por añadir una imagen de fondo al pie de página mediante CSS.

1 Localiza el div #footer y sustituye todo el contenido de texto que hay dentro por este que aparece aquí :

<div id="footer">
  <p>Copyright Worldwide Apparel 2011 </p>
 <p>All content on this site is confidential and should not be shared with anyone outside of Worldwide Apparel.<p>
</div>

2 Guarda la página y ábrela en el navegador. A cada uno de los párrafos se le aplican las reglas de párrafo descritas en la hoja de estilos. Ahora vamos a añadirle una imagen de fondo a todo el contenedor div. Es una imagen de 960 pixels de ancho y 128 de alto.

3 En la hoja de estilos interna, encuentra la regla para el pie de página (“#footer”). Añade una nueva regla para aplicar una imagen de fondo indicando un archivo de la carpeta de imágenes de tu equipo:

#footer {
  clear:both;
  background-color:#BA2B22;
background-image:url(images/footer_background.jpg);
  background-repeat:no-repeat;
}

Guarda la página y vuelve a mostrarla en el navegador.

El pie de página tiene ahora una imagen de fondo por aplicación de una nueva regla CSS.

La imagen de fondo ahora aparece detrás de los textos. Fíjate en la propiedad background-repeat del código anterior. CSS, por defecto, considera a las imágenes de fondo como “baldosas” que se van añadiendo sin límite hasta llenar todo el espacio del objeto al que pertenecen. Al indicar el valor no-repeat nos aseguramos que la imagen solo se muestra una vez. Las dimensiones del pie de página deben ser tales que nos permitan ver la imagen correctamente, tal y como veremos en el paso siguiente.

4 Modifica la regla para el pie de página añadiendo las líneas en rojo:

#footer {
     clear:both;
     background-color:#BA2B22;
     background-image:url(images/footer_background.jpg);
     background-repeat:no-repeat;
  width:960px;
  height:128px;
}

Guarda el archivo y vuelve a mostrar la página en el navegador. Ahora el tamaño de la zona de pie de página coincide con el tamaño de la foto. El paso siguiente consiste en ajustar los estilos del texto que va dentro, separándolos.

5 En el editor de texto, encuentra la regla #footer y justo debajo añade esta otra regla para párrafos, que se aplicará únicamente a los párrafos del footer:

  
    #footer p {
  margin:10px 0px 0px 20px;
  width:280px;
  font-family:Verdana, Geneva, sans-serif;
  font-size:0.689em;
}

Esta regla añade un margen superior de 10 pixels y margen izquierdo de 20 pixels a ambos párrafos del pie. Al definir la anchura de los párrafos podemos forzar un salto de línea en el punto aproximado que nos interesa: dentro del espacio en blanco que nos deja la foto. Las propiedades “font-family” y “font-size” nos ayudarán a conseguir un efecto más atractivo con un tipo de letra más pequeño.

6 Guarda la página y visualízala en el navegador.

Los párrafos de texto del pie de página con los nuevos estilos.

En la sección anterior hemos visto cómo se utilizan los márgenes internos y externos, es una técnica muy habitual. Podríamos haber añadido algo más de espacio entre el primer párrafo y el borde superior del pie de página, pero al aumentar el margen superior en la regla #footer p estamos añadiendo espacio también al segundo párrafo. En este caso, lo conveniente es añadir margen interior al div “footer” tal y como se indica en el paso siguiente.

7 Añade la declaración que aparece en rojo a la regla #footer:

#footer {
  clear:both;
  background-color:#BA2B22;
  background-image:url(images/footer_background.jpg);
  background-repeat:no-repeat;
  width:960px;
  height:128px;
  padding-top:10px;
}

Ajuste fino de la estructura visual de la página

Podemos aplicar colores de fondo y/o bordes a los elementos principales de nuestra estructura en las primeras fases del diseño, lo que nos ayudará a ver mejor sus límites. Después, si no queremos conservarlos, podemos eliminarlos y la estructura seguirá funcionando sin problemas. Ahora vamos a eliminar los colores de fondo de los divs del centro de la página, añadiremos algunas imágenes de fondo y mejoraremos algo el estilo de nuestra barra de navegación.

1 Elimina toda la propiedad background-color en las siguientes 4 reglas de estilo: #wrap, #sidebar, #main y #footer. Guarda el archivo y visualízalo en el navegador.

Los mismos elementos estructurales una vez eliminados los colores de fondo.

2 Aunque nos vamos aproximando a un diseño de página unificado, aún tenemos que hacer unas cuantas cosas más. Vamos a empezar por poner un fondo de gradiente de color a la barra lateral. La mejor forma de hacerlo es mediante la inserción de una imagen de fondo.

Vuelve al editor y añade estas declaraciones a la regla #sidebar:

#sidebar {
float:right;
width:300px;
   background-image:url(images/sidebar_bg.png);
background-repeat:repeat-x;
}

Como hicimos en la práctica anterior con el pie de página, ahora estamos añadiendo una imagen de fondo desde CSS a este elemento div. pero en este caso el valor de background-repeat ahora es “repeat-x”. Esto provoca que la imagen se repita en sentido horizontal (el eje X).

3 Añade también esta otra declaración para aplicarla al borde Izquierdo de la barra. Nos va a ayudar a delimitar mejor la separación con respecto al contenido del área principal (“main”).

#sidebar {
  float:right;
  width:300px;
  background-image:url(images/sidebar_bg.png);
  background-repeat:repeat-x;
  border-left: thin solid gray;
}

Guarda el archivo y muéstralo en el navegador.

La barra lateral tiene ahora un gradiente de color como imagen de fondo y un borde en el lado izquierdo.

4 Otro problema de nuestra estructura es el logo dentro de la cabecera. En este momento está anidado y se presenta en pantalla pegado al borde del contenedor. Podemos separarlo un poco creando una regla específica para imágenes dentro del div “masthead”. Encuentra la regla #masthead y añádele esta línea justo debajo.

  #masthead img {
  margin-left: 20px;
}

Se trata de un selector contextual igual que otros que hemos ido añadiendo a los títulos y párrafos dentro de las columnas “main” y “sidebar”. En este caso, se trata de una declaración para añadirle margen por la izquierda a todas las imágenes que puedan aparecer en el div “masthead”.

Lo último que nos quedaría por hacer es mejorar la apariencia de la barra de navegación. En este momento estamos empleando unos estilos muy rudimentarios. Ahora los vamos a mejorar para ponerla a la altura del resto de nuestra página y además le vamos a añadir algo de interactividad.

5 Para mejorar la presencia visual de los enlaces dentro de la sección “mainnav” vamos a añadir una regla explícita para los enlaces. Encuentra la regla #mainnav li y añade la siguiente regla justo debajo de ella:

  #mainnav ul li a {    
color:#ffffff;  
text-decoration: none;
display:block;
}

La declaración text-decoration elimina el subrayado del vínculo y le cambia el color a blanco. La declaración display:block hace que estos elementos de navegación llenen por complete todo el espacio de la barra de navegación. Entenderás mejor qué significa esto cuando creemos un efecto dinámico que se activará al pasar el ratón por encima, en el paso siguiente.

Guarda el archivo y visualízalo de nuevo en el navegador.

La barra de navegación con enlaces, después de eliminar el subrayado

6 Cuando el usuario pasa el cursor por encima de los enlaces, sería interesante que cambiasen su apariencia, así sabe que se trata de vínculos y no de texto normal. Para ello podemos aprovechar una particularidad de los estilos que solo tienen los vínculos. Justo debajo de la regla #mainnav ul li a , añade esta otra:

  #mainnav ul li a:hover {     
background-color:#666666;    
color:#D2CD2F;
}

Los enlaces poseen una categoría exclusiva llamada pseudoclases. Hay cuatro estilos asociados a los vínculos, que son a:link, a:visited, a:hover y a:active. No es obligatorio aplicar estilos a los cuatro, por ejemplo aquí hemos creado estilos para a:hover que modifican el aspecto de todos los enlaces de la barra de navegación cuando tienen encima el cursor. La pseudoclase a:visited se aplica al vinculo después de que el usuario ha pulsado sobre él, y la pseudoclase a:active modifica su aspecto cuando le estamos pulsando con el botón.

7 Guarda el archivo y muéstralo en el navegador. Pasa el cursor por encima de los enlaces para ver los cambios. Es el resultado del estilo a:hover.

Al pasar el ratón sobre los enlaces de la barra de navegación se dispara el estilo a:hover.

Ya has completado las prácticas de esta lección. Hemos visto la diferencia entre las estructuras basadas en tablas y en CSS. Además has aprendido el uso de las propiedades float y clear para crear columnas dentro de la página. También hemos visto las ventajas y desventajas del uso de márgenes externos (“margin”) e internos (“padding”) a la hora de definir el aspecto de los objetos dentro de los contenedores.

EL diseño de estructuras visuales de las páginas web es un tema muchísimo más amplio, si tienes interés en conocer más a fondo las técnicas avanzadas para diseño de páginas Web, te recomiendo que leas el libro "HTML5 Digital Classroom" y más concretamente, el capítulo “Lección 5: Diseño avanzado con CSS”.

Autoestudio

1 Para seguir practicando con márgenes internos y externos, añade otros contenidos a la sección “main”. Por ejemplo, puedes añadir un título de nivel 3 y una lista no ordenada entre los dos párrafos:

  <h3>Quick Links</h3>
  <ul>
    <li>New Employee Forms</li>
    <li>Flexible Spending Plans</li>
    <li>401K paperwork</li>
    <li>Employee Discounts</li>
  </ul>

2 Después de añadir este código, utiliza los conocimientos adquiridos en esta lección para experimentar con la colocación de estos elementos dentro de la página.

Repaso

Preguntas

1 ¿En qué consiste un diseño de anchura fija y un diseño de ancho variable?. ¿Qué ventajas y desventajas presentan cada uno de ellos?

2 ¿Qué hace la propiedad float de CSS y cuándo conviene utilizarla?

3 Tu compañero ha añadido un párrafo al div sidebar que ha creado. El párrafo está pegado al borde mismo de la barra lateral. Indícale dos técnicas que puede emplear para separar un poco el párrafo con respecto a los bordes del contenedor

Respuestas

1 En un diseño de anchura fija, el contenedor primario tiene una anchura absoluta (declarada generalmente en pixels o ems) . Una de las ventajas principales de este tipo de diseños es que es más fiable a la hora de colocar los demás elementos. Su desventaja más importante es que no altera su tamaño al cambiar las dimensiones de la ventana del navegador, y algunas funciones como la reorganización de los textos, se pierden. Las estructuras de diseño de ancho variable modifican sus dimensiones dependiendo de la pantalla o dispositivo, pero suponen un trabajo más complicado para el diseñador.

2 La propiedad CSS float permite eliminar cualquier elemento dentro del flujo HTML por defecto y moverlo (o “hacerlo flotar”) pegándolo a la derecha o a la izquierda del contenedor donde está situado. Podemos utilizar la propiedad float cuando queremos que el texto se organice alrededor de imágenes, para crear menús de navegación horizontales o utilizar diseños de página en columnas.

3 Tu compañero puede añadir un valor de margen interno (“padding”) a la barra lateral, lo que hará que todos los contenidos se separen automáticamente del borde. También puede añadir una regla para los párrafos dentro del div y aplicar en ella unos valores de margen que separen los textos con respecto al borde. Y por supuesto, puede utilizar una combinación de márgenes internos y externos.

Windows, Bing, PowerPoint, Internet Explorer, Visual Studio, WebMatrix, DreamSpark y Silverlight son marcas registradas o marcas comerciales de Microsoft Corporation en Estados Unidos y/o en otros países. Otros nombres de productos y compañías mencionados aquí pueden ser marcas registradas de sus dueños respectivos.

Las empresas, organizaciones, productos, nombres de dominio, direcciones de correo, logos, personas, lugares y eventos de ejemplo utilizados aquí son ficticios. No se intenta ni debe deducirse ninguna relación con cualquier empresa, organización, producto, nombre de dominio, dirección de correo, logo, persona, lugar o evento real.

La información contenida en este curso se ofrece sin garantía, expresa, implícita o estatutaria. Ni los autores, Microsoft Corporation, ni los distribuidores o comercializadores serán responsables por ningún daño causado o imputado que pueda tener su origen, de manera directa o indirecta, en los contenidos de este curso.

Creado para Microsoft por Avlade: www.Avlade.com

Ciertas secciones extraídas de la guía HTML5 Digital Classroom están protegidas por copyright 2011 de AGI Training y se utilizan con autorización. Si desea más información sobre el libro HTML5 Digital Classroom visite el sitio web http://www.digitalclassroombooks.com/Web-Design/HTML5-Digital-Classroom-Book.html