Thor 3 de junio de 2008 a las 14.48
   Imprimir artículo
elWebmaster.com

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


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:

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

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>

 

Taller de Adobe Dreamweaver: Divisores y estilos (3)

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!

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (8)

  1. alexei dice:

    es invaluable el valor de estas clases y la forma en que estan explicando paso por paso todo, el que no aprenda dreamweaver con estas clases es porque no quiere aparte ustedes aclaran cualquier duda por simple que sea, felicidades, muchas gracias y sigan así.

  2. Luigi Keynes dice:

    Hola!
    Excelentes clases sobre divisores, yo sabía utilizar todo esto pero “a capella”, estas clases me estan sirviendo para organizar mis conocimientos.
    Gracias!

  3. alexei dice:

    disculpen que me salga del marco de las clases pero no tengo a quien preguntarle; quiero hacer un anuncio para television sobre sida y uso de condon, que herramienta me recomiendan.
    En cuanto a esta ultima clase CSS no parece tan complicado luego que se explica pero esos estilos van con estas clases o es otro curso, de ser lo segundo ya me estoy afilando los dientes, saludos, alexei

  4. Hector dice:

    se le puede poner al div de una barra de navegaciôn una imagen,?? que diferencia hay con los spry se puede hacer en diseño o todo en codigo??

  5. Iñaki dice:

    hola! felicitaros de nuevo por todos los tutoriales ke haceis, ke son estupendos y me estan ayudando mucho a avanzar en la programacion web 😉

    me ha surgido un problemilla al hacer mi web, kiero poner un degradado como el ke teneis vosotros en vuestra web que kede bien en la mia y lo mas ke he konseguido es a hacer esto (http://www.andorstudios.com/kabra/index.php). Me podeis dar algun consejo de komo hacerlo bien, para ke kede igual por los dos lados del bloque principal????

    muchas gracias de nuevo :)

  6. Diana dice:

    que es setear?

  7. Morton dice:

    Hola, Diana

    Setear es el equivalente a “configurar”. Deriva de “settings”, configuraciones en inglés.

    Saludos!

  8. Marcia Ramos dice:

    Excelente taller! te felicito! Me ha sido de mucha ayuda!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder