Thor 27 de mayo de 2008 a las 17.48
   Imprimir artículo
elWebmaster.com

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


Taller de Adobe Dreamweaver: Divisores y estilos (1)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:

Taller de Adobe Dreamweaver: Divisores y estilos (1)

 

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:

Taller de Adobe Dreamweaver: Divisores y estilos (1)
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.

<div> (foto y contenido)<div>(pie)</div></div>

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:

Codigo CSS Taller de Dreamweaver 18

Y este sería el resultado final del div (nota 1) de nuestro maquetado de la clase anterior (cuadro amarillo):

Maquetado final - Clase Dreamweaver 18

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  

CLASE SIGUIENTE >>

 


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

Comentarios (15)

  1. I√Īaki dice:

    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 ūüėČ

  2. Thor dice:

    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!

  3. Thor dice:

    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.

  4. I√Īaki dice:

    muchas gracias, asi si ke me funciono :)

  5. Héctor dice:

    Quisiera saber como maqueto solo en vista dise√Īo, no en vista codigo, las divs con los colores y css

  6. gustavo dice:

    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.

  7. paolo dice:

    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

  8. Juan Manuel dice:

    @paolo ¬Ņhas probado guardando el archivo y previsualiz√°ndolo en el navegador??? ¬°Saludos!

  9. Marlon dice:

    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

  10. Juanma dice:

    ¬°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!

  11. Darlyn S√°nchez dice:

    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!

  12. guido dice:

    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.

  13. Diana dice:

    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

  14. juan andres dice:

    genio segui haciendo tutoriales son lo mas!!!

  15. EdgaR GutierreZ dice:

    Me encantan tus tutoriales, aunque tengo una duda cuando estaba realizando los pasos del taller pasado me quedaba asi: https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/580183_10150751052984207_842329206_9244369_722690604_n.jpg

    El codigo es igual al que tu nos colocaste, excepto por el color y porque en el body, coloque como sugirió una persona en los comentarios.

    Mi pregunta es: ¬ŅPorque el footer siempre me queda de lado?

    El código completo es el siguiente:

    (header)

    (barra lateral)

    (nota 1)

    (nota 2)

    (footer)

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