Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

Maquetacion de un Sitio Web con CSS 2

Tutorial Photoshop

 

Tutorial por Solo Photoshop

SoloPhotoshop

Tutoriales Maquetación CSS

Maquetación de un Sitio Web con CSS (Parte 2)

por 23sato, http://www.oscarblanco.net/

OK, la segunda parte...

Acá vamos a hacer esta página:
http://www.oscarblanco.net/tutorialcss/menu.htm

Denle un vistazo desnudando el html de su hoja de estilos usando el "botón" que les mostré como crear en su buscador en la primera parte de este tutorial.

Verán un contenido chorreado, constituido de h's, listas y texto en párrafos.

Vean el source de la página también.

Verán un source muy limpio y sencillo.

Bien, empezamos, lo primero es que obtengan el "kit" para trabajar este sitio.

Bajenlo AQUI

En el kit encontraran un html llamado "menu.htm" una hoja de estilos llamada "principal.css" y una carpeta llamada "images" que contiene todas las imagenes usadas para este tutorial.

Descompriman en alguna carpeta y estamos listos para empezar a configurar el css. Verán que "principal.css" en este momento solo contiene las clases y ID's ya establecidas pero sin parámetros.

Entonces el html, que ya tiene adjuntada esa hoja de estilos en realidad no despliega nadamas que el texto desnudo. Tal y como lo va a leer cualquier buscador como google, altavista o yahoo.

De ahora en adelante no vamos a tocar mas que la hoja de estilos, el html ya está con sus objetos definidos y las imágenes estan recortadas y a tamaño. Sin embargo también los invito a que echen un vistazo a la carpeta de imágenes. Contiene dos imágenes verticales delgadas, que se repiten horizontalmente para fondos. una imagen grande que es meramente decorativa, un logo y un par de imágenes para el área de menú.

Viendo el source del html en detalle observaran que existe una estructura de jerarquías, igual que encontrariamos en una de tablas con sus td's y tr's. Tenemos un DIV principal que se llama "alrededor", ese es solo un contenedor que nos ayuda a flotar todo el contenido centrado, por el tipo de diseño que escogí, pero casi siempre es bueno trabajar con contenedores principales y sus respectivos nested div's, o div's encajados. En realidad este div llamado "alrededor" fue un agregado extra que metí a última hora tan solo para poder acomodar la foto grande que flota a la derecha del diseño y que Uds. pueden ver se encuentra al puro final del html, inclusive despues de un texto que visualmente se encuentra luego de ella. Esto es simplemente porque siempre debemos buscar que el texto/contenido de nuestro html, sobre todo aquello es está cargado de palabras clave se encuentre antes que cualquier imagen, flash u otro elemento gráfico que cumple mera función decorativa y no ayuda a nuestro sitio con su SEO (ya antes expliqué que es esto).

Como decía, el DIV "alrededor" fue algo agregado a última hora por el capricho estético de poner esa imagen. El DIV llamado "principal" era el contenedor principal, y el cual tenia todas las características para determinar el área principal de información. De una vez aclaro la diferencia entre un ID y una Clase:

ID's son usados más que todo para elementos únicos en la página, esto ayuda mucho si lo combinamos con programación, ya que los ID"s son utilizados mucho en este medio precisamente porque son nombres únicos y así se puede dar comportamiento a un objeto específico. Las clases en cambio son utilizadas más para elementos que se repiten varias veces en una página, por ejemplo, una clase para todos los anchors (links) de una página o sección determinada.

Si ya estan usando TopStyle (lo mencioné en la parte 1, y donde bajarlo) para abrir la hoja de estilos notaran en la lista de clases a la izquierda que existen tres categorías principales, clases, ID's y otra llamada elementos. Ahí en este caso solo estan "body" y un "*". Elementos son componentes o tags que por si solos ya existen como parte de la maquetación básica de un html. Ahí también caerían los h's, pero como notaran, los h's que he usado en este caso, estan supeditados a ID's.

Qué es supeditado. Una clase, ID o elemento, pueden tener subclases supeditadas. Esta es una de las características que da tanta flexibilidad a la maquetación por hojas de estilos.

Por ejemplo Uds. verán en la página que hay varios estilos de "hover" o sea, comportamiento de un hipervínculo al tener el puntero del ratón encima.

Si se fijan en la hoja de estilo, verán que hay varios "a" y "a:hover" supeditados a ID's (los estilos que empiezan con un símbolo de "#") en este caso.

Verán que el ID "arriba" o el ID "medio" se repiten varias veces con subclases a su lado: ul's li's p's e inclusive verán hasta un "a" "a:hover" y "strong" supeditados a su vez a una subclase.

O sea, hay un "strong" "supeditado" a un p del ID "medio".

A ver a ver.. respiren, cuenten a 3 y vuelvan a leer hasta acá otra vez :D jeje. Y si mi forma de explicar es muy confusa espero perdonen, pero trato de irme mucho al detalle y esto tiene muchos detalles.

Ok, listos? seguimos...

Es importante tener mucho cuidado a la hora de trabajar estilos, en la medida de lo posible, eviten las mayúsculas, revisen siempre que los nombres tengan al principio su identificador si lo necesitan: "#" y "." para ID's y clases respectivamente.

Nunca olviden el punto y coma al final de cada parámetro.
Nunca olviden cerrar llaves para cada estilo.
Si es necesario comentar alguna linea o varias lineas abran el comentario con: /* y cierrenlo con */
Comentar es una buena forma de desactivar un parámetro sin tener que borrarlo.

A veces por un pequeño descuido podemos pasar horas golpeandonos la cabeza porque algo no funciona cuando debería hacerlo... recuerden, creando hojas de estilo y teniendo un adecuado desarrollo de html's más limpios (o sea, no generados automáticamente por Image Ready o algo parecido) nos parecemos más al proceso que siguen los programadores. Por consiguiente, debemos ser mas cuidadosos y ordenados, para evitar "pulgas" en nuestro código.

Otra cosa que hay que tratar de hacer es evitar redundancias en nuestras hojas de estilo, o repeticiones innecesarias de parámetros en varias clases aplicados a DIV's "hermanos", pues cada linea de parametros en nuestra hojas de estilos es una línea más de código que debe leer el buscador cuando indexa una página. Las hojas de estilos tienen la ventaja de centralizar despliegue de imágenes, para evitar que cada vez que se abre una página el explorador tenga que volver a cargarlas desde el html, sinembargo, las hojas de estilo también deben ser optimizadas, ya que muchas lineas de código hacen un documento lento de leer y pesado.

Una buena forma de evitar esto es tratar de descomponer el despliegue total en jerarquías y grupos. O sea, van a existir DIV's "padres" y estos tendrán sus propios DIV's "hijos". Esto lo que significa es que tendremos DIV's contenidos dentro de otros DIV's (como ya vimos en el html), y los DIV's que a nivel de jerarquía se encuentren al mismo nivel, serán "hermanos". Hablo en este momento de DIV's pero en realidad a lo que me refiero es contenedores, los cuales también pueden ser SPAN's, H's, anchors, p's, li's, etc.

Una vez que hemos determinado esta jerarquización, entonces empezamos a analizar qué parámetros pueden heredarse de "padres" a "hijos".

Por ejemplo, en el BODY, que podríamos considerar el elemento "padre" para todos los contenedores de nuestra página, podemos colocar parámetros que vamos a heredar en todo el sitio, como por Ej.. la familia de fuentes, el tamaño default que queremos usar para fuentes, el alineamiento de texto, el color de texto, etc.

Hay parámetros que no se pueden heredar y otros que si. Por ejemplo, padding y margin, no son heredables, pero existe un "hack" para también poder generalizar este tipo de parámetros.

Creamos un estilo llamado "*". Al usar un asterisco como nombre para un estilo, el explorador va a entender que por defecto a CUALQUIER estilo los parámetros que determinemos en la clase "asterisco" serán aplicados como suyos, esto se vuelve nulo al poner un parámetro específico en ese estilo único.

Veamos:

* {
margin: 0;
padding: 0;
}

.vaca {
color: #ff00ff;
margin: 2px 3px 1px 2px;
}

En este caso, "asterisco" esta diciendo que todos los estilos por defecto tendrán un margen de cero y un acolchonamiento de cero (esto es una buena práctica por cierto), pero a su vez, "vaca" como estilo único que es, aparte de determinar un color único para textos dentro del contenedor que tengan la clase "vaca" aplicada, también tiene características únicas de márgenes, sinembargo, como no ha determinado sus parámetros de padding, va a tener por defecto los que ha pre-determinado "asterisco" (margin = espacio alrededor de un contenedor, padding = espacio marginal de contenido a los bordes de su contenedor).

Otra cosa que aprovecho para mencionar, relacionado con optimización de estilos, es que en la medida de lo posible se use el "shorthand" (abreviación de parámetros en una sola línea).

Veamos:

.vaca {
margin-top: 2px;
margin-right: 4px;
margin-bottom: 3px;
margin-left: 5px;
border-width: 2px;
border-color: #BC6A47;
border-style: solid;
}

podría optimizarse así:

.vaca {
margin: 2px 4px 3px 5px;
border: 2px #BC6A47 solid;
}

Al usar shorthand en el parámetro margin por ejemplo es importante saber que el orden en que los pongamos es esencial, el primero es el margen superior, le sigue el derecho, luego el de abajo y por ultimo el izquierdo, o sea, empezando del de arriba se sigue a favor del reloj, así:

Maquetacion de Sitio CSS

En el caso del borde, el orden en que determinemos grosor, color y estilo no es importante. Si quisiéremos un borde con grosores variables, entonces tendríamos que hacer un parámetro por aparte para "border-width" y podemos usar un shorthand igual al de "margin" siguiendo las manecillas del reloj, lo mismo va para el "padding".

Para más información de shorthand en estilos, les invito a hacer un googleazo.

Bien. Empezamos a llenar la hoja de estilos. A estilo asterisco, vamos a ponerle padding y margin de cero. Así:

* {
margin: 0;
padding: 0;
}

Por cierto, "0" equivale a cero de cualquier tipo de medida, sean pixels u otro, por eso un shorthand se puede ver así: margin: 1px 0 1px 0;

Inclusive, si luego del primer valor todos son iguales, digamos, todos de cero, entonces se podría ver así: margin: 3px 0; Aquí estamos diciendo que los márgenes de derecha, abajo e izquierda todos tienen un valor de cero.

Bien, como ya vimos antes, al poner estos valores para margin y padding en "asterisco" hemos pre-determinado que todos los estilos tendrán padding y margin de cero por defecto.

Ok ok... un respiro, cuenten a 3 y vuelvan a leer lo que tengan que re-leer. Los espero. :)

Listos? Ok, seguimos.

En orden de jerarquía, vamos al estilo para el BODY.

body {
background-color: #AE491D;
background-image: url(images/fondo-principal.jpg);
background-position: top;
background-repeat: repeat-x;
color: #646464;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
height: 100%;
text-align: center;
}

Veamos, traduciendo dice esto:

color de fondo: #AE491D.
Imagen de fondo: fondo-principal.jpg (incluyendo su "path").
La posición de la imagen de fondo es "arriba".
La imagen de fondo se repite en "x" ("x" y "y", ejes.. etc, eso ya lo deben saber).
El color usado por el texto es: #646464;
La familia de tipografías es: Arial, con equivalencias a Helvetica y es san-serif (también deben saberlo).
El tamaño de las tipos por defecto es de 12px;
El alto de este estilo es de 100% del área visible del buscador.
El alineamiento por defecto del texto será centrado (esto incluye objetos flotantes como DIV's).

Bien, asignen este estilo a su BODY, guarden y ahora refresquen la página en su buscador. Ya va tomando forma, aunque hay muchas cosas tiradas por todo lado ;)

Seguimos con el DIV padre de todos. El que tiene el ID llamado "alrededor".

Este es el que nos va a permitir que el rectángulo de este diseño de página flote siempre al centro del área visible de nuestro buscador. Ah, un detalle importante. Cross-browser... han escuchado esa fatídica palabra compuesta antes? Significa, mi página será vista por la mayor cantida posible de buscadores (Internet Explorer, Firefox, Netscape, etc) y plataformas y los usuarios verán exactamente lo mismo o al menos casi la misma cosa. Para garantizarse esto, es bueno que se acostumbre a trabajar con el firefox como buscador por defecto, y el internet explorer como secundario (esto es solo un consejo a nivel personal).

Existen "hacks" para solventar esto, pero para eso también los invito a usar google ;)

Bien, veamos el estilo "alrededor":

#alrededor {
height: 545px;
margin: 10px auto;
width: 720px;
float: left;
}

Traducción:

Altura del contenedor es de 545 pixels.

Márgenes alrededor del contenedor: 10pixels arriba, y el resto automático. Aquí tenemos un "hack" pero es para el firefox en este caso, si no ponemos el auto como segundo valor, nuestro div no le va a dar la gana de flotar centrado.

Tiene un ancho de 720 pixels.

Y por último este contendor va a flotar a la izquierda. O sea, si tuviesemos por ejemplo 10 contenedores de 100 pixels de ancho cada uno, todos con float:left, todos se acomodarían lado a lado flotando hacia la izquierda. (imaginense que inclinan el monitor hacia la izquierda y todos esos divs caen en esa dirección lado a lado).

Ahora vamos con el ID "principal"

#principal {
background-image: url(images/fondo-areachica.jpg);
background-position: top;
background-repeat: repeat-x;
border: 1px #FFFFFF solid;
height: 545px;
width: 720px;
}

Todos los parámetros acá ya los hemos cubierto antes, solo cambian medidas y colores...

Sigamos para abajo en la jerarquía, existen tres divs hermanos: Arriba, Medio y Abajo. Los he nombrado así debido a que como cualquiera que había trabajado en su oscuro pasado con frames, me ha quedado esa costumbre de nombrar así para dividir páginas... aunque pensandolo bien, es lógico ese uso de nombres no les parece? ;)

Veamos "arriba" en el html, este DIV contiene un h1, un h2, un h3 y una lista ordenada (ul, li's). Aquí tenemos oportunidad de heredar si fuera el caso de el div contenedor a todos sus sub-elementos.

En este ejemplo sinembargo, no lo hice.

Observemos "arriba" con todas sus subclases de una vez (tomense su tiempo):

#arriba h1 {
color: #A80506;
float: left;
font-size: 34px;
font-weight: normal;
height: 29px;
left: 37px;
letter-spacing: -3px;
line-height: 26px;
position: relative;
text-align: left;
text-transform: uppercase;
top: 3px;
width: 340px;
}

#arriba h1 strong {
color: #A30468;
}

#arriba h2 {
background-image: url(images/logotipo.jpg);
color: #494846;
float: left;
font-size: 4px;
height: 41px;
left: 74px;
position: relative;
top: 5px;
width: 265px;
}

#arriba h3 {
clear: both;
color: #807C7D;
float: left;
font-size: 22px;
font-weight: normal;
height: 22px;
left: 37px;
letter-spacing: 6px;
line-height: 18px;
margin: -12px 0;
position: relative;
text-align: left;
width: 340px;
}

#arriba li {
display: block;
float: left;
height: 25px;
width: 144px;
}

#arriba li a{
color: #403F3D;
display: block;
float: left;
height: 27px;
letter-spacing: 2px;
padding: 6px 0;
text-decoration: none;
width: 144px;
}

#arriba li a:hover {
background-image: url(images/menu-on.jpg);
background-repeat: repeat-x;
color: #FFFFFF;
display: block;
}

#arriba ul{
background-image: url(images/menu-off.jpg);
background-repeat: repeat-x;
clear: both;
display: block;
float: left;
height: 28px;
position: relative;
top: 12px;
width: 720px;
}

Traduzcamos los parámetros que aún no hemos visto.

En #arriba h1 vera aparte de cosas obvias como tamaño de letra y estilo de letra (normal), un parámetro llamado "position" (position: relative;). Este parámetro permite que el contenedor que ya le dimos características de flotabilidad (float:left) además pueda posicionarse en un lugar específico. Posición relativa significa que estará relativa a los margenes superior e izquierdo de su contenedor padre. O sea, h1 se posicionará relativo con las medidas de "left" y "top" (left: 37px; top: 3px;) definiendo a cuanto se encuentra h1 de los márgenes superior y izquierdo de "arriba".

Otros parámetros nuevos que tenemos acá son "text-transform: uppercase;" que en este caso convierten todo el texto en mayúsculas y "letter-spacing: -3px;" que en este caso aplica una distancia de -3 pixels entre cada letra.(por eso se ven todas pegaditas).

Podemos ver que al STRONG del h1 (el estilo que sigue) le aplicamos otro color, por eso la palabra "titular" tiene otro tono. Fijense en el html, ni h1 ni strong tienen clases ni ID's aplicados, esto es porque sus propios nombres de elemento son subclases del ID llamado "arriba"

Lo mismo sucede con los otros h's y con la lista ordenada.

Pueden bajar ya la hoja de estilos llena de AQUI.

Otros parámetros nuevos que pueden buscar ahí son "display" y "text-decoration".

El primero lo uso para cuando quiero que un link se trate como un objeto que puede tener alto y ancho.

Por ejemplo los links dentro de los li's de la lista ordenada (fijense). "text-decoration: none;" es la forma de eliminar la rayita abajo para un link.

Creo que con la información que les he suministrado pueden hacer ingeniería inversa de la página ejemplo y su respectiva hoja de estilos. De hecho creo que es la mejor forma que aprendan como funciona todo esto.

En todo caso posteen preguntas aquí, y de esa forma se volverá más completo el tutorial.

Espero que todo esto les sirva.

Parte 1

Comentarios de Maquetacion de un Sitio Web con CSS 2

↑ Tutorial

  • electronixz

    electronixz

    2006-08-12 12:10

    Muchas Gracias por la Información es Excelente, Dios los bendiga
  • sugey

    sugey

    2006-08-25 02:28

    Excelente Tutorial, me gusto mucho, estoy asombrada con lo que se puede hacer con css, sin tanto rollo para hacer los botones como en flash, soy novata en css, y realmente me encanto, ahh y que buena forma de explicar del autor, buenisima, nunca me aburri, me reia de los chistesillos y tambien aprendia, ojala sigas haciendo mas tutoriales. Gracias !!
  • chilbto

    chilbto

    2006-09-23 19:27

    Excelente artículo, me aclaraste bastantes dudas.
    Aunque por el momento me queda aún una duda y es la siguiente:
    ¿ qué diferencia existe entre div#contenido Y div#encabezado
    respecto a #contenido div Y #encabezado div ?

    ¿qué código conviene utilizar y basándose en que tipo de necesidad(maquetación,plantilla,etc)?

    Reitero mi agradecimiento, Saludos.
  • carxl

    carxl

    2006-11-23 12:41

    gracias a este tuto, pude entender mejor estilos. Escelente tuto. Gracias...
  • AaronDark

    AaronDark

    2007-03-28 10:28

    Esta weno :)
  • ravalos7

    ravalos7

    2007-04-24 12:41

    De verdad impresionante arículo!!!!!!

    Cambia todo el concepto de diseño web, pues en mi caso al igual que muchos primero parto haciendo el diseño y le voy metiendo el contenido, cayendo frecuentemente en el famoso síndrome de la página en blanco, en que se tiene un buen diseño estructural pero no se sabe como llegar al detalle colocando el contenido ni que contenido colocar con detalle.

    En el mundo que vivimos cada vez vemos cosas que de verdad nos impresionen, pero tu lograste impresionante tan profundamente que voy a imprimir ahora mismo tu artículo y voy a estudiarlo hasta lograr cambiar mi forma de diseñar web.
    Hace mucho tiempo que quería empezar a trabajar de esa manera, al modo de sitios como los que pusiste de ejemplo, pero no hallaba por donde tomar la hebra, con un instructivo lo suficientemente claro y didáctico para comenzar.

    DE TODO CORAZON, MUCHAS GRACIAS!!!!!!!!!!!
  • Neverlan

    Neverlan

    2007-06-23 10:00

    Gracias por este maginifico tutorial, me ha aclarado algunas cosas.
    saludos
  • juass

    juass

    2007-06-28 10:06

    excelente tutorial....muchas gracias por tomarte el tiempo de explicar paso a paso
    saludos
  • bolido

    bolido

    2009-06-17 21:07

    Excelente tutorial, de los mejores que he visto en la red; sin embargo soy principiante en esto y la verdad he hecho mucho esfuerzo por entender lo que el autor da por entendido y la verdad quedé con muchas lagunas; como me gustaría que las propiedades de la hoja de estilos se explicaran con más detalle; no me estoy refiriendo por ejemplo al tamaño de las fuentes, porque es muy obvio, pero si a otras cosas que ameritan más detalle. La verdad no entiendo mucho lo de hacer flotar relativamente las capas ó la posición de la imagen de fondo es "arriba", ó lo de repetir en el eje "x" y "y", etc, etc.. Mil Gracias.
  • fanaro

    fanaro

    2009-07-23 14:33

    Hola amigo aqui tienes un link con explicaciones sobre todo lo relacionado a css, te doy el link directo hacia el punto donde se habla de flotar, muy interesante este tutorial, eso deberiamos hacer todos ya que es lo mas practico, eficiente y es lo que esta de moda, este es el link http://es.html.net/tutorials/css/
  • barbozamax

    barbozamax

    2009-10-08 19:22

    muy didactico