Juan Manuel 20 de mayo de 2008 a las 15.35
   Imprimir artículo
elWebmaster.com

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


Taller de Adobe Dreamweaver: Divisores y estilos (1)¬°Hola, mis queridos seguidores! Bienvenidos a la clase 17 del taller de Adobe Dreamweaver. ¬°S√≠! ¬°17! ¬ŅC√≥mo se pasa el tiempo, eh? Y bueno, pero cada vez estamos m√°s cerca de la gloria, jaja.

Hoy tenemos una clase especial, un punto de inflexi√≥n entre los conocimientos generales de HTML y el maquetado de p√°ginas a nivel profesional. ¬ŅPor qu√© digo esto? Bueno, como ya me habr√°n escuchado decir (figurativamente), el dise√Īo web actual se basa en el uso de divs (una etiqueta que vamos a ver hoy) y estilos.

¬ŅY por qu√© no se siguen usando tablas a la manera de antes?

Bueno, si leyeron la clase anterior sabr√°n que tener una tabla bien armada requiere pensar cada lugar que vayamos a usar, porque debemos tener contemplados los “rowspan” y los “colspan” que vamos a necesitar en cada parte de nuestra tabla.

Adem√°s de la complejidad de pensarlo (que con el tiempo uno se acostumbra), otro factor importante es que a la hora de modificar algo en el sitio, hay que cambiar gran parte de la estructura.

Imaginen que en medio de una cuadr√≠cula que forma nuestro sitio, queremos poner un nuevo cuadradito para “incrustar” X cosa…

Habr√≠a que cambiar todos los rowspan y colspan afectados…

Durante un tiempo, mucha gente anidaba tablas, para “zafar”. Entonces uno pon√≠a una tabla dentro de una celda de otra tabla, y la divid√≠a como quer√≠a. Era pr√°ctico y no ten√≠amos que tocar nada de la anterior.

Pero sitios grandes que usaron estas prácticas se encontraron con que el código HTML de sus páginas se hacia INMENSO, provocando un mayor peso de la página y, por ende, una mayor espera del usuario para cargar (además de una mayor transferencia de sus servidores).

Tambi√©n se encontraron que cuando quer√≠an hacer un cambio grande (ya no un cuadradito como dijimos arriba), hab√≠a que rehacer el sitio entero, porque no se pod√≠a adaptar al “monstruo tabl√≠stico” actual.

Ahora, les voy a explicar la nueva manera de maquetar y van a ver que solos se van a dar cuenta de las GIGANTES ventajas que tiene.

¬ŅQu√© son los divisores?

Los divisores son una etiqueta que surgió para darle forma a las páginas de la manera más práctica posible (etiqueta <div></div>).

¬ŅC√≥mo explicar un div? Bueno, vamos a hacerlo gr√°fico: imaginen a los divs como cajas.

Tenemos el cuerpo de la p√°gina, y dentro de ella metemos cajas y las ubicamos como queremos y donde queremos.

Además, estas cajas pueden tener cajas más chicas adentro, y esas también podemos ubicarlas como y donde queremos.

Entonces podemos crear unos cuantos divs con el contenido que queramos y ordenarlo en la parte de la p√°gina que queremos que se vea y listo.

Nos olvidamos de las complejidades anteriores….

Y si tenemos ganas de cambiarle su tama√Īo o reacomodarlo, esto no afectar√° a la estructura del sitio en general. M√°s f√°cil imposible.

Podemos maquetar una página rápidamente y si es necesario modificarla también lo podremos hacer en muy poco tiempo.

Vayamos a algo visual

Veamos gráficamente como sería la utilización de divs.

Vamos a crear un cuerpo de la p√°gina y dentro vamos a ponerle un divisor.

<body>
	<div>

	</div>

</body>

Gráficamente, esto sería así:

Taller de Adobe Dreamweaver: Divisores y estilos (1)
(fig. 1)

El div o contenedor que creamos recién puede, mediante estilos, acomodarse en el lugar de la página que nos quede mejor, y a su vez podemos poner más divs dentro.

Ahora veamos un ejemplo m√°s palpable:

Taller de Adobe Dreamweaver: Divisores y estilos (1)
(fig. 2)

Como podemos ver, armar una p√°gina web con divs es igual que dibujarla en una hoja.

El HTML de la página que armamos arriba sería:

<body>
	<div>(header)</div>

	<div>(barra lateral)</div>

	<div>(nota 1)</div>

	<div>(nota 2)</div>

	<div>(footer)</div>

</body>

Luego, con estilos, le decimos a los divs dónde queremos que se ubiquen.

Estilos

Y ahora viene la magia.

Ustedes, líneas más arriba, se habrán preguntado cómo con esos divs metidos uno debajo de otro sin nada más, lograríamos armar prácticamente el maquetado de una página entera.

Los estilos son características especiales que le podemos dar a una etiqueta, para que cumpla con el aspecto que nosotros queremos que tenga.

Existen dos maneras de aplicar estilos:

La primera y m√°s b√°sica, es poner el estilo que nosotros queremos que tenga la etiqueta en la etiqueta misma, mediante el atributo style=”(ac√° pondremos los estilos)”.

La segunda es mediante CSS, que es una hoja que contiene solamente estilos, y luego se les dice a las etiquetas cu√°l estilo deben tomar de esa hoja.

Nosotros vamos a trabajar con estilos en cada etiqueta, para empezar a conocerlos, y luego veremos si hacemos tiempo de ver algo de CSS y su implementación.

¬°Esperemos que si! :)

Bueno, vayamos al grano, ya todos deben estar ansiosos por ver como funciona esto:

En la “p√°gina” que maquetamos a mano (fig. 2) definimos abajo un c√≥digo HTML muy simple, que pareciera no coincidir con la misma.

Y en realidad no lo hace.

Ahora vamos a ver cómo hacerla coincidir, mediante la definición de varios estilos, en las etiquetas correspondientes.

El código REAL de la página (fig. 2) seria el siguiente:

<body><div style="background-color: red; width: 100%; height: 30%;">
(header)</div>

<div style="background-color: blue; float: left; height: 60%; width: 20%;">
(barra lateral)</div>

<div style="background-color: yellow; float: left; height: 60%; width: 40%;">
(nota 1)</div>

<div style="background-color: green; float: left; height: 60%; width: 40%;">
(nota 2)</div>

<div style="background-color: gray; height: 10%; width: 100%;">
(footer)</div>

</body>

Para que puedan diferenciar cada parte les dejo una imagen dividida por colores:

Taller de Adobe Dreamweaver: Divisores y estilos (1)

Ahora expliquemos un poco lo que tenemos ac√°:

En principio, tenemos el mismo maquetado que antes, el body, con los 5 divs adentro, tal cual el código anterior (fig. 2), pero este maquetado tiene agregados los estilos.

Vamos a pasar a detallar qué hace cada uno.

En el primer div tenemos style=. Esto nos dice que todo lo que pongamos entre las comillas a continuación, serán estilos y sus valores.

Luego tenemos background-color: red. Esta propiedad le dice al div qué color de fondo va a tener (en este caso, como pueden ver en el primer div es rojo, al igual que la fig. 2).

La siguiente es width: 100%. Esto nos indica que el div va a tener el mayor ancho posible, o sea el ancho total de la p√°gina.

Luego height: 30%, nos dice que ese div va a tener el 30% del total de la altura del documento.

Los 3 div siguientes, adem√°s de las propiedades de ancho, alto y color correspondiente, vemos que tienen una propiedad float: left.

Esta propiedad les dice a los divs que van a “flotar” hacia la izquierda, hasta pegarse con el elemento anterior.

De esta manera, “apilamos” los divs del medio para formar columnas y, mediante la propiedad width, hacemos que ocupen el total del ancho y cu√°nto queremos que tenga cada uno.

Luego al div footer le decimos que nuevamente ocupe el 100% para “cerrar” la p√°gina y listo.

Con 5 divs, y algunos (pocos) estilos, logramos maquetar una página completa, lista para agregarle información.

Obviamente, dentro de los divs, luego pondremos p√°rrafos, listas, im√°genes, etc.

Lo que sea necesario para que nuestra p√°gina quede linda :p

Conclusión

Esto es ni más ni menos que una introducción. Los divs y los estilos tienen muchísimo contenido para ver.

En s√≠, para los estilos necesitar√≠amos varias clases especialmente dedicadas, pero bueno, nosotros lo vamos a ir viendo de a poco mientras utilizamos HTML y luego daremos algunos “tips” para hacer otras cosas interesantes (m√°s all√° del maquetado com√ļn).

Bueno, ya cerrando, espero que esta clase les haya gustado, que les sirva en la creación de sus páginas y, como siempre, ya saben que cualquier duda o cosa que no les salga, pueden preguntarla vía comentarios en la clase del taller que corresponda.

Nos vemos la semana que viene para ampliar un poco el tema que vimos hoy y profundizar sobre el uso de divs y estilos.

¡Hasta la próxima!

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>


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

Comentarios (16)

  1. Eduardo Martin dice:

    Muy buenas clases.yo uso siempre Dreamweaver opara maquetar y con tablas…quiere decir esto que podemos maquetar sin ninguna tabla??
    Muchas gracias

  2. Isabel dice:

    hola, todo muy bien explicado. Los que estamos empezando con dreamweaver y html agradecemos explicaciones de este tipo. S√≥lo una pregunta ¬ŅPor qu√© hab√©is explicado solamente lo de aplicar estilos a cada etiqueta y no lo de aplicar estilos CSS a los divs? Yo es que intento hacer pruebas, pero no con mucho √©xito. De todas formas, muchas gracias!

  3. Thor dice:

    Hola Eduardo!

    Si, definitivamente esto quiere decir que se puede maquetar sin ninguna tabla. =)

    Esto no quiere decir tampoco que las tablas no sirvan nunca mas para nada, pero si que las podemos usar solamente para lo que se supone que fueron creadas.

    Saludos!

  4. Thor dice:

    Hola Isabel, gracias por seguir el curso.

    En si los estilos que se aplican con la etiqueta “style” son exactamente los mismos que los que se ponen en CSS, solo que en CSS se definen (no se ponen en la etiqueta), y luego en la etiqueta se hace una referencia a ese estilo (el de CSS).

    No lo quiero explicar en esta parte del curso para poder ir paso a paso, y ademas que las cosas que tiene CSS dan para mucho, y no tengo tanto espacio en las clases.

    Talvez en una o dos clases haga una referencia de como usarlo, para tirarles una base de como podrian hacerlo, y que luego investiguen por ustedes mismos.

    En caso de que tenga mas tiempo despues de terminar con el curso, voy a extender un poco las clases explicando CSS puro para que puedan agregar en sus paginas :)

    Saludos

  5. Edu dice:

    Thor, muchas gracias por contestar ūüėČ
    Esta p√°gina esta genial!!!Me encanta, me he vuelto adicto.Superutil en el m√°s amplio sentido de la palabra.
    Felicidades,seguid asi!!!

  6. Hugo dice:

    Gracias por el manual, est√° excelente. Tengo un problema: al visualizar la p√°gina no percibo la altura de cada una de las partes. ¬ŅSe notar√° √©te cuando ya ponga el contenido de cada una de las partes o falta algo? Otra vez: Gracias

  7. alexei dice:

    hola: yo sigo el curso de dreamweaver desde mi centro de trabajo y en marzo me accident√©. Mis compa√Īeros me llevaban las clases a la casa pero no hab√≠a podido ver los comntarios, veo que se ha incorporado gente nueva.
    El curso est√° cada vez mejor, gracias.

  8. Paola dice:

    Hola Thor, te cuento que para practicar lo de ésta clase quise hacer yo sola una pagina como la de la figura 2, me sale bien el color y el ancho de los div, pero no la altura, o sea no ocupan el lugar que tendrian que ocupar de alto, quedan todos como una linea de un cm de espesor mas o menos.
    A parte no la puedo ver en el navegador (con F12).
    Me gustaria que me digas por que puede ser. Gracias.

  9. Santiago dice:

    Gente, muchas gracias por los tutoriales, est√°n muy buenos, me gusta mucho su forma de explicar las cosas. sigan as√≠ y fue una lastima llegar a la clase con 6 meses de retraso….

  10. Carlos Pernalete dice:

    gracias por este tutorial estaba buscando como trabajar con los div para la resolucion de los monitores que se vea el sitio web en diferentes resoluciones y me ha servido bastante gracias

  11. julian dice:

    que chimba EL WEB MASTER ; .COM CLARO ESTA ;
    la pregunta es la siguiente respecto al style de width: 100%; height: 30%; ese porcentaje cual es la medida en pixel o donde se cambia ese tama√Īo? gracias espero hacerme entender.

  12. Alejandra dice:

    ¬°Hola Julian! Justamente, si configuras una medida con porcentaje no tendr√°s una medida exacta. En este caso el ancho del div es de un 100% con respecto al ancho contenedor (si por ejemplo el div estuviera dentro de otro div de 500px, al decirle al div interno que mide 100% estamos diciendo que mide 500px).
    Otro ejemplo ser√≠a si tienes una tabla con 3 columnas. Imag√≠nate que a la primera le otorgamos un ancho de un 30%, a la segunda un ancho del 30% y a la tercera ‚Äďl√≥gicamente‚Äď un ancho de un 40%. Con estas configuraciones, las columnas siempre tendr√°n esos valores de ancho con respecto al ancho total que, seg√ļn el caso puede variar. ¬°Saludos!

  13. Javier dice:

    HOla , que tal, tengo el mismo problema que Hugo, al visualisarlo en la vista de dise√Īo y en el firefox y explorer la altura de los divs son todas iguales y de un renglon de altura.
    Gran curso!!!

  14. xisco dice:

    exelentee! eres DIOS!

  15. Elio dice:

    Hola !!! me gusta como van las clases !!! pero como enlazo los divs con los textox!!!

    Gracias

  16. Luis Rivero dice:

    Me parece excelente el curso, soy programador en Visual Basic y en determinado momento se me ocurrio agregar a mis aplicaciones soluciones web, googlee todo lo que pude sobre creacion de paginas web e hice varios tutoriales de HTML, PHP y algo de JavaScript, pero la forma en que muestras los contenidos es excelente, para los compa√Īeros que tienen dudas sobre el aato de las p√°ginas, noten que desde un comienzo Thor explico lo de el ancho mas adecuado de una p√°gina que pudiera ser para una resoluci√≥n de 1024×768, donde definimos el espacio horizontal cerca de los 800 px para que pueda verse en la mayoria de los navegadores, pero el espacio vertical va a cambiar segun el contenido de la pagina o sea es dinamico, por esto es que ven los DIV como rayitas, porque aun estan “vacios”, recuerden lo que explico THOR de las cajas, en el ejemplo la caja tiene un ancho determinado por el ancho del body, pero el alto como es dinamico es “0”, entonces ambos bordes de la caja se tocan, si escribimos un par de pararfos dentro de los div, y colocamos algunas imagenes veremos que los div crecen y toman los porcentajes se√Īalados por los estilos, ejejejejemmmm THOR disculpa que haya tomado tu curso para explicar alguillo de lo que he aprendido, sigo todos los talleres de elwebmaster.com, tienen muy buenas explicaciones, cualquie cosa THOR tienes mi correo, aunque sea un rega√Īo por lo extenso del comentario

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