Taller de Adobe Dreamweaver: Divisores y estilos CSS (3)

¡Hola, bienvenidos a la tercer clase del Taller de Adobe Dreamweaver sobre divisores y estilos CSS! Seguro este es uno de los temas que más les interesa, dado que se trata de la base del diseño actual de sitios web.

Pero a la vez es bastante complejo (no difícil), así que ¡a practicar! jejeje ^_^. Hoy explicaremos el código CSS que vimos la clase pasada, parte por parte. Luego ustedes pueden hacer su propio diseño en Dreamweaver. ¡Comencemos!

La clase pasada vimos este fragmento de código CSS:

Ahora nos toca lo difícil, que es justamente comprenderlo.

Veamos:

En principio, dejemos de lado la etiqueta <style></style> para lo último y empecemos con el <div>(nota1)</div>

Dentro de la etiqueta propia del divisor, tenemos definidos varios estilos:

1. background-color: white - Le decimos al HTML que el color de fondo de este divisor va a ser blanco.
2. width/height - Ponemos un ancho de 40% y un alto de 60%.
3. float: left - Flotamos a la izquierda, esto lo vimos la clase pasada, es parte del maquetado que hicimos.

Luego tenemos una etiqueta <img /> la cual va a contener el logo de elwebmaster y tiene los siguientes estilos y propiedades.

Estilos

1. 1. margin-top/left: 10px – Le ponemos a la imagen un margen superior e izquierdo de 10 píxeles, para separarla de los bordes del div.
2. 2. margin-right: 20px – Ponemos un margen de la derecha de 20 píxeles, para separar la imagen del título (el <h1> que pusimos a continuación de la imagen).
3. 3. float: left – De nuevo, parte del maquetado que hicimos la clase pasada, para ordenar los divisores y que formen nuestra “paginita” ^_^.

Propiedades

1. width/height – El ancho y alto que queremos que tenga nuestra imagen (si no queremos que nos ponga el que tiene por defecto la imagen en sí).
2. src - El lugar donde vamos a tener nuestra foto guardada para traer y mostrar (source).
3. alt – El texto alternativo que nos va a mostrar el lugar donde va la imagen en caso de que por algún motivo o error, la imagen no se cargue.

Seguimos: Ahora tenemos el título dentro del <h1>

Estilos

1. color: gray - Nos setea el color de la fuente del h1 en gris.
2. font-family: helvetica – Setea el tipo de fuente que va a tener el h1.

Dentro del h1 tenemos un <a> que nos enlaza el título con la página de elwebmaster.com.

Más abajo tenemos dos <p> con margen, caracteres especiales, <br /> y otras cosas que ya fuimos viendo a lo largo del curso.

Luego tenemos un <hr /> que nos pone una línea de separación (la podemos ver en la imagen) con un ancho del 80% del total del divisor.

¡¡¡Y ahora, la hora de la verdad!!!

Más abajo nos encontramos con otro divisor, dentro del divisor “nota 1″ que tiene una característica especial: tiene el atributo class=”pieNota”.

Dentro de este tenemos un <h2> que hace de título y varios <p> (párrafos) con links a elwebmaster (que podrían ser links directamente a esas notas).

Ahora bien, como podemos observar, las etiquetas internas del divisor que las contiene, no tienen NINGUN ESTILO, pero si vamos al gráfico, podemos ver que esta alineado como debe, las fuentes tienen color azul y las letras tienen un tamaño predefinido.

Además, ninguno de los elementos tienen algún margen por encima o debajo de ellos.

Esto se debe a que LA CLASE pieNota (class=”pieNota”) tiene seteado todos esos atributos.

Pero….. la clase sólo la tiene el div que la contiene.

¡¡¡SÍ!!!¡¡¡ Y ESO ES LO BUENO!!!

Con sólo setear una clase a la etiqueta contenedora, no necesitamos setearle estilos a ningún elemento de adentro (salvo que queramos que un elemento tenga una propiedad en particular por sí sólo).

Entonces, ahora sí, analicemos la etiqueta <style></style>

La etiqueta <style> va a contener estilos y nada más que estilos, a los que se les va a dar “un nombre” que luego se usará para relacionarlos con las etiquetas correspondientes.

Primero que nada analicemos el código.

Tenemos dentro de la etiqueta, el atributo type que le va a indicar que va a contener CSS a modo de texto (text/css) y luego tenemos el atributo media que va a indicar para qué medio vamos a usar esos estilos, en este caso, screen (pantalla) pero podría ser un estilo especifico para imprimir o para video.

Luego de seteada la etiqueta <style> para lo que necesitamos, vamos a escribir los estilos dentro.

En primer lugar vemos “.pieNota”: pieNota, va a ser el nombre con el que vamos a relacionar una etiqueta con los estilos que le pongamos dentro.

El punto “.” que antecede el nombre, indica que va a ser UNA CLASE (class=).

De esta manera, con ese nombre hacemos referencia directamente a class=”pieNota”.

El “p”, y el “h2″ que siguen al nombre de la clase, indica que sólo va a afectar a los <p> y los <h2> que se encuentren dentro del elemento que tenga esa clase.

Por ende, si dentro del <div class=”pieNota”> (el del ejemplo) tuviésemos un elemento <li>, este no se vería afectado por los estilos que esta clase contiene.

Luego de designarle un nombre a en este caso, la clase, y ponerle que etiquetas debe afectar, vamos a pasar a poner todos los estilos que deba tener entre “{” “}”.

Dentro de los corchetes tenemos, en este caso, margen, padding, color y font-size.

Como vemos en la imagen (otro “truquito”), podemos agrupar los márgenes y paddings en una sola propiedad.

Podemos hacer un margin-top, margin-right, margin-bottom, margin-left, todos en uno sólo.

margin: 0 0 0 10px (en orden: top, right, bottom, left – 0 0 0 10px).

Cada estilo (al igual que con la etiqueta “style=”), debe terminar con punto y coma “;”, aunque no necesariamente debe bajar la línea (como esta en el ejemplo), pero si es recomendable para que sean más legibles (el código será más prolijo).

Bueno, por ahora los dejo pensando bastante.

Conclusión

Esta clase seguramente va a generar miles de preguntas y tal vez haya cosas que no entiendan.

Recuerden que me pueden preguntar lo que quieran vía comentarios.

Trataré la semana que viene de hacer un lugarcito para una clase dedicada a este tema y a las preguntas que surjan, así nos queda bien claro todo.

Esta clase estuvo bastante rebuscada, pero por lo menos (espero) quedó clara la ventaja de utilizar estilos y CSS dentro de la maquetación de nuestra página.

Más que claro esta en la clase pieNota, que con sólo definir los estilos una vez en la etiqueta <style>, pudimos aplicarlos a todos los elementos de su interior sin tener que escribir una sola línea más.

Imaginen, de tener que poner todos los estilos a cada etiqueta por separado, lo gigante que hubiese sido nuestro código. Y ni hablar a la antigua, sin estilos.

Bueno, nos vemos la semana que viene para otra clase del taller. Espero que practiquen lo visto hoy, así queda claro, o surgen preguntas para responder y seguir avanzando.

¡Saludos!