¡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.
|
Gráficamente, esto sería así:
(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:
(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:
|
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:
|
Para que puedan diferenciar cada parte les dejo una imagen dividida por colores:
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 |
Martes, 20 de Mayo de 2008 a las 18.04
Muy buenas clases.yo uso siempre Dreamweaver opara maquetar y con tablas…quiere decir esto que podemos maquetar sin ninguna tabla??
Muchas gracias
Jueves, 22 de Mayo de 2008 a las 09.10
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!
Viernes, 23 de Mayo de 2008 a las 10.15
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!
Viernes, 23 de Mayo de 2008 a las 10.21
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
Viernes, 23 de Mayo de 2008 a las 18.07
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!!!
Domingo, 25 de Mayo de 2008 a las 02.07
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
Lunes, 26 de Mayo de 2008 a las 13.13
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.
Martes, 29 de Julio de 2008 a las 09.35
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.