Hola gente, ¿cómo les va? ¿bien? ¡Me alegra!
Hoy nos toca repasar los divisores y estilos que vimos la clase pasada y aprender nuevas cosas de ellos.
Les confieso que estuve en duda de seguir con este tema y mejorando las cosas que vimos la clase pasada o explicar otra manera diferente de usar los divisores, pero al final me decidà por reafirmar el conocimiento anterior porque considero muy importante que esto quede bien claro…
La clase anterior vimos cómo maquetar una página básica. Hoy vamos a ver algunos detalles más que los estilos y los divs nos pueden ofrecer. Para esto, vamos a quedarnos con una parte de la página que ya maquetamos:
Vamos a tomar el sector de la nota 1 (la caja amarilla) y la vamos a rellenar con lo que se supone que es, una nota. Tenemos entonces el código original de este maquetado que es:
Ahora vamos a tomar el div de la nota 1 y vamos a empezar a modificarlo. Veamos qué le ponemos: una foto, tÃtulo, texto, y un pie, en base a esto haremos nuestra caja.
|
Con este código tendrÃamos formada nuestra nota completa. Ahora veamos qué deberÃamos agregar para que realmente se vea como nosotros queremos. Pero antes haremos una aclaración importante:
En el código que voy a poner a continuación vamos a ver algunas cosas nuevas que les pueden resultar difÃciles de entender.
Estuve pensando si ponerlo o no, pero sé que ustedes, mis fieles seguidores, con algo de paciencia (o no tanta) van a terminarn entendiendo.
En caso de dudas, pueden dejarme un comentario. Ya van a comprender lo útil que les va a resultar esta clase.
Habiendo hecho la aclaración, aquà va un poco de CSS:
Y este serÃa el resultado final del div (nota 1) de nuestro maquetado de la clase anterior (cuadro amarillo):
En la próxima clase explicaré paso a paso el código que ven más arriba, asà que no se desesperen si lo que vieron les genera muchas preguntas 
Hasta la próxima…
| << CLASE ANTERIOR |
Miércoles, 28 de Mayo de 2008 a las 06.50
Hola! he encontrado este tutorial por casualidad, y la verdad es ke tiene wena pinta. Yo hacia las paginas con tablas y keria saber komo hacerlas kon divs, asi ke me viene de lujo.
weno, a lo ke iba, me ha surgido un problema copiando tu codigo… lo he kopiado a la perfeccion, pero a la hora de mirar ke es lo ke sale (sea con un navegador, o por la pestaña diseñor del dreamweaver), no le hace ni caso al height y solo okupa el div una linea de escritura, hay ke hacer algo para ke se vea bien, o es normal ke se vea asi???
Bueno, muchas gracias anticipadas
Miércoles, 28 de Mayo de 2008 a las 18.46
Hola iñaki
fijate de poner alto a tu body a ver si te funciona (o de ultima en tu html)
En definitiva, prueba esto y dime como te anduvo.
<body style=”height: 800px”>
(o la cantidad de pixeles que quieras)
Saludos!
Miércoles, 28 de Mayo de 2008 a las 18.46
Esta clase tenia pensado poner tanto el problema (lo que puse) como la explicacion (la clase que viene).
Por un problema de tiempos y espacios tuvimos que dividir la clase.
Perdon a los que no entiendan mucho de lo que vean aca arriba.
Jueves, 29 de Mayo de 2008 a las 05.11
muchas gracias, asi si ke me funciono
Martes, 3 de Junio de 2008 a las 23.30
Quisiera saber como maqueto solo en vista diseño, no en vista codigo, las divs con los colores y css
Martes, 15 de Julio de 2008 a las 20.06
Quisiera hacer una pregunta.
La verdad es primera vez que utilizo esta herramienta y realmente estoy empezadno en lo que a diseño web se refiere. He intentado hacer una página web con la herramienta div, misma que me parece muy util a la hora de diseña, aclaro no conozco nada de html y uso dreamweaver sólo en la parte de diseño, por lo que me encantarÃa si pudiesen explicarme las 2 preguntas que tengo, sin entrar mucho a lo de los codigos.
1- Cómo hago para centrar en mi espacio de trabajo una div y que al publicarla se vea que la págian web esta centrada?
2- Cómo hago para utilizar varios div, una encima de otra y se queden en ese mismo lugar, no que cuando publique, los div me quedan sueltos y al mover la ventana se hacen para todo lado?
Muchas gracias.
Domingo, 14 de Diciembre de 2008 a las 12.12
Hola soy nuevo en esto, y este ejemplo que has puesto lo eh escrito en el dreamweaver en la parte codigo, todo bien me resulto, pero en la parte diseño no me aparece nada, me queda en blanco. a que se debe eso?
buen, gracias
Lunes, 15 de Diciembre de 2008 a las 15.08
@paolo ¿has probado guardando el archivo y previsualizándolo en el navegador??? ¡Saludos!
Martes, 27 de Enero de 2009 a las 02.27
Juan Manuel o Thor, me podrian facilitar el manual de este curso? esta reketedivino, es el mejor curso pero kisiera auxiliarme de algun manuel please
Martes, 27 de Enero de 2009 a las 11.16
¡Hola, Marlon!
Nuestros estilos de impresión te permiten ahorrar tinta y papel, ya que están especialmente diseñados para imprimir sólo el contenido de la página; lo importante.
Incluso puedes elegir si quieres imprimir los comentarios (suele encontrarse información importante en ellos) o no
¡Te recomiendo que pruebes imprimir de esta forma! Te ahorrarás mucho trabajo (haz clic en el enlace que dice “Imprimir artÃculo” en la parte superior de la página).
¡Saludos!
Jueves, 12 de Marzo de 2009 a las 15.05
Hola!
Por favor necesito que me explique cómo lograr que los divs que hago tengan 1000px de ancho, pues cuando pongo 100% me sale como para una plantilla de 800×600, y quiero realizar una página de mayor tamaño.
Muchoa saludos, Y gracias de antemano!
Martes, 25 de Agosto de 2009 a las 12.41
Estoy haciendo una pág. web en dreamweaver, como hago que en una página pueda recibir los comentarios de otras personas, asà como yo estoy enviando este comentario quÃ. Ayudenme Gracias.
Martes, 8 de Septiembre de 2009 a las 11.41
Hola gracias por su trabajo he empezado a estudiar lo que me encuentro y ayer encontre esta pagina, esta buenisima en esta sesion hice la maquetacion de la pagina tal como la explicas y tenia el problema de que la altura de cada parte era 1 cms asi que en los comentarios vi su respuesta de agregar a body y me funcion al verlo en firefox, pero en la prsentacion de dise;o de DW no me aplica lo mismo. Muchas gracias por su ayuda
Sábado, 3 de Abril de 2010 a las 12.24
genio segui haciendo tutoriales son lo mas!!!