MÓDULO 05: Construir un sitio Web
​
Herramienta a utilizar:
Adobe DreamWeaver CC 2015.
TAREA 5. Formas web
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Crear presentaciones más sofisticadas
Hasta ahora, hemos creado un sitio web muy simple para demostrar los fundamentos del diseño HTML y CSS. Vamos a crear un sitio web con mejor apariencia basado en una presentación de dos columnas. Como ejemplo, para esta demostración vamos a crear un sitio web de muestra la serie de libros Digital Teens.
Nuestro objetivo es que la presentación final del sitio web se parezca a la de la siguiente imagen.
Vamos a comenzar.
Crea la carpeta para tu sitio. Después, crea un nuevo archivo HTML con Dreamweaver y guárdalo en tu carpeta con el nombre de index.html. También crea un archivo CSS y guárdalo en la misma carpeta con el nombre de style.css. Vincula tu archivo html al archivo hoja de estilo en la sección <head> de tu archivo html. Por supuesto, no se te olvide añadir un título de página, una descripción y algunas palabras clave.
Acto seguido, creamos la estructura básica HTML de nuestra página.
Aquí usamos el elemento HTML div, que es un simple contenedor al que podemos asignar un ID o una Clase. Los elementos Div son muy útiles para crear diseños de páginas web. Creamos un elemento div con ID “sidebar” y el otro con ID “content”. Estas dos estructuras van a ser nuestras dos columnas.
Por supuesto, ahora mismo no se parecen mucho ya que todavía no hemos creado reglas CSS para estos ID. El texto dentro de los elementos div es solo un marcador de posición para que veamos cómo lucen antes de que añadamos el contenido real. Aquí tienes cómo lucen los dos divs en vista diseño.
Ahora, es el momento de empezar a crear las reglas CSS para formar nuestro diseño. Abre el archivo CSS y añade las reglas CSS para los ID de la barra lateral y contenido. Vamos a empezar especificando una anchura y un color de fondo para cada uno de nuestros elementos DIV.
En este momento, los DIV no aparecen uno al lado del otro como 2 columnas, sino uno encima del otro, que es su comportamiento por defecto. Vamos a hacer que luzcan como 2 columnas.
Aquí, hemos anclado la posición del DIV de “sidebar” en la parte superior izquierda de la página con las propiedades:
position: fixed;
top: 0px;
left: Opx;
Esto significa que el div “sidebar” siempre va a aparecer en el mismo lugar, incluso si el resto de la página cambia, por ejemplo, el div “content”, se desplaza por la pantalla. Así que, ¡tenemos un “sidebar” siempre visible! También añadimos un borde derecho y definimos que todo el texto dentro del “sidebar” esté alineado a la derecha.
Para el div “content”, la propiedad más importante para el diseño es:
margin: 0 0 0 222px;
Esta propiedad define que el margen superior, derecho e inferior alrededor del div “content” a 0 y el margen izquierdo a 222px. Esta propiedad esencialmente mueve todo div “content” a la derecha 222px, haciendo que aparezca al lado del div “sidebar”. En caso de que te estés preguntando por qué 222px, es porque queremos moverlo exactamente al lado de “sidebar” que tiene una anchura de 220px más un borde derecho de 2px.
Pero parece que tenemos un problema. El div “content” no está exactamente al lado del “sidebar” tal como esperábamos y también tiene un pequeño espacio en la parte superior de la página. Esto es porque el elemento HTML <body> que contiene todos los demás elementos, tiene un valor de margen por defecto que echa a perder nuestra ubicación. Otra cosa es que queremos que nuestras columnas en efecto aparezcan como columnas y se expandan a la altura total de la página. Para lograr esto, establecemos la propiedad altura de todos los elementos a 100%. Esto significa que queremos que todos nuestros contenedores abarquen todo el espacio vertical visible. Aquí tienes el código.
Ahora, en verdad luce como un verdadero diseño de dos columnas.
Fíjate que tenemos que establecer la height(altura) a 100% para el elemento <html> también, ya que el elemento <body> está incluido en el elemento <html> y todo lo demás está dentro del elemento <body>.
También hemos añadido un color de fondo al elemento <body>, que combina con el color de “sidebar” y además cambiamos la fuente por defecto para la página completa. El div “content” tiene la propiedad min-height(altura mínima) establecida en 100% en vez de height. Esto obliga a <div> a extenderse más allá del final visible de la página en los casos donde los contenidos de <div> son más largos y aparece la barra de desplazamiento.
CONSEJO:
​
Antes de que se usaran las etiquetas Div y las reglas CSS se hicieran estándar para el diseño de la presentación de las páginas web, los diseñadores web creban sus diseños usando tablas HTML. Los DIV son similares a las tablas, pero son más fáciles de usar, personalizables con CSS, y se cargan más rápidamente que las tablas.
Ahora vamos a añadir la estructura y contenido HTML del div “sidebar”.
Solo un encabezado, un sub encabezado y los vínculos de navegación.
Ahora, vamos a aplicar algunas reglas CSS a los elementos para crear un menú de navegación elegante.
El selector #sidebar h1 significa que esta regla aplica a todos los elementos h1 que estén dentro de un elemento con div ID “sidebar”. Esta es una forma de crear reglas de estilo para elementos solo dentro de un contenedor específico.
Todos los tamaños de fuentes aquí están definidos como un porcentaje del tamaño de fuente por defecto que es 16px en todos los navegadores. Cuando defines el tamaño de las fuentes de tus páginas en porcentajes, el texto de tu sitio se escala mejor al ser visto desde dispositivos móviles con pantallas más pequeñas o por gente con visión defectuosa y que usa asistentes de accesibilidad.
En la regla CSS para los elementos <a>, que son nuestros vínculos de navegación, usamos la propiedad display: block;. Esto obliga a los elementos <a> a comportarse como elementos de bloque (como los elementos <div> que usamos anteriormente), así que cada elemento se expande y abarca tanto espacio horizontal como el contenedor dentro del que se encuentra. Esto hace que los vínculos se coloquen uno encima del otro y también que toda el área en bloque sea interactiva, y que la navegación sea más fácil. Igualmente, la propiedad text -decoration: none; quita el subrayado por defecto de todos los elementos <a>.
El a: hover es un selector especial que aplica la regla CSS cuando el cursor del ratón se coloca sobre el elemento especificado, en este caso el vínculo <a>. Esto nos permite crear un efecto bonito, dinámico y cambiar el color de fondo y de fuente cada vez que el usuario pasa el cursor sobre un vínculo del div “sidebar”.
Por último, tenemos una Clase llamada .active que se aplica al vínculo de la página actual y hace que el vínculo resalte al cambiar el color de fondo y al añadir un borde superior e inferior.
Para terminar, vamos a añadir la estructura HTML del div “content”.
Margin (Margen) y padding
En CSS, es posible especificar diferentes márgenes o padding para los diferentes lados:
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Margen - Propiedad abreviada
Para acortar el código, es posible especificar todas las propiedades de los márgenes en una propiedad. A
esto se le llama propiedad abreviada.
La propiedad abreviada para todas las propiedades de los márgenes es “margin” y para las propiedades padding es “padding”.
La propiedad “margin” (y por ende la propiedad “padding”) pueden tener de uno a cuatro valores.
margin:25px 50px 75px 100px; el margen superior es de 25px, el margen derecho es de 50px, el margen inferior es de 75px, el margen izquierdo es de 100px.
margin:25px 50px 75px; el margen superior es de 25px, los márgenes derecho e izquierdo son de 50px, el margen inferior es de 75px.
margin:25px 50px; los márgenes superior e inferior son de 25px, los márgenes derecho e izquierdo son de 50px.
margin:25px; los cuatro márgenes son de 25px.
El margin (margen) despeja un área alrededor de un elemento (por fuera del borde). El margen no tiene color de fondo, y es completamente transparente.
El padding despeja un área alrededor del contenido (por dentro del borde) de un elemento. El padding es transparente, así que adquiere el color del fondo del elemento.
Ahora, vamos a añadir el estilo apropiado con algunas reglas CSS.
Las reglas para los elementos <a> y el caso especial a: hover, definen el comportamiento de todos los vínculos de toda nuestra página. Fijate sin embargo que, debido a que las reglas en CSS están en cascada, todas las propiedades que están definidas aquí se heredan por otras reglas CSS que definen un caso más especial del mismo selector, por ejemplo, recuerda el selector #sidebar a. Sin embargo, si el selector más especializado redefine una propiedad heredada, el valor heredado se anula.
Todas las otras reglas son solamente estilo básico. Fíjate sin embargo en la propiedad float: left; en la regla CSS del elemento <img>. Esto permite que todas las imágenes se desplacen a la izquierda y permitan que otros elementos, como el texto del elemento párrafo en este caso, abarque el espacio restante a la derecha de la imagen.
Con esto terminamos nuestro diseño de página web de dos columnas. Puedes usar el mismo archivo CSS para otras páginas web que quieras agregar al sitio y llenar cada una de ellas con el contenido apropiado. Recuerda, cuando diseñas una nueva página para el sitio web, asegúrate de aplicar la clase activa al vínculo de la página actual en el panel de navegación. Esto da la impresión de que la página actual está “seleccionada”.
