Thor 25 de marzo de 2008 a las 15.04
   Imprimir artículo
elWebmaster.com

Taller de Adobe Dreamweaver: Trabajo en modo dise√Īo


Taller de Adobe Dreamweaver - Modo vista dise√Īo¬°Hola, gente querida! ¬ŅC√≥mo andan? Una vez m√°s, sean bienvenidos a otra clase del Taller de Adobe Dreamweaver. El martes pasado aprendimos c√≥mo crear la p√°gina de inicio de nuestro sitio web, la famosa “index.html”.

Bueno, hoy nos toca, ya con la p√°gina creada en la clase anterior, ver el modo de vista de dise√Īo. Vamos a tratar de conocer un par de caracter√≠sticas iniciales, y otras cositas predeterminadas de Dreamweaver.

Antes de empezar vamos a dejar una imagen de nuestra p√°gina en blanco, en modo de vista dise√Īo, para tener de referencia a lo largo de esta clase.

Taller de Adobe Dreamweaver - Modo vista dise√Īo

Cuando creamos una p√°gina en blanco en Dw, en realidad lo que parece blanco no es tal, porque la vista de dise√Īo lo que realmente nos muestra es el cuerpo de la p√°gina.

Sin embargo, hay otras partes que no están específicamente dentro del cuerpo, como por ejemplo el título.

En la siguiente foto vamos a ver lo que realmente est√° en nuestra p√°gina y que la vista de dise√Īo de Dw NO nos muestra.

Taller de Adobe Dreamweaver - Modo vista dise√Īo

Como se puede ver, hay mas cosas.

En principio podemos ver un tag que comienza con ‚Äú<!DOCTYPE‚ÄĚ, en este tag se define el tipo de p√°gina que vamos a hacer, seg√ļn las normas de la W3C (¬°a leer, gente!) que es el organismo que regula los est√°ndares del lenguaje HTML entre otras cosas.

Nuestro documento HTML es ‚ÄúXHTML 1.0 Transitional‚ÄĚ.

Luego de este tag tenemos el que define el documento HTML en sí, el tag <html> y su cierre al final, </html>.

Dentro de él encontramos el tag <head></head> que contiene el tag <title></title> (que va a llevar el título de nuestra página, el que sale en la ventana de nuestro navegador), además de otros tags como los tags <meta></meta> que sirven a los webmasters para poner especificaciones especiales.

Por otro lado tenemos el tag <body></body>, que este s√≠ ser√° el que tendr√° todo el contenido de nuestra p√°gina y el que se mostrar√° en el modo vista de dise√Īo de Dw.

El modo de vista de dise√Īo lo podr√≠amos dividir en 3 partes:

  1. El manejo de la ventana, donde podemos elegir entre los diferentes modos de vista, poner un título al documento y elegir otras opciones (hacer una vista previa en el navegador, comprobar compatibilidad, ver otras herramientas, etc).
    √Čchenle un vistazo:
    Taller de Adobe Dreamweaver - Modo vista dise√Īo
  2. El cuerpo de la p√°gina, donde insertaremos y veremos cada cambio que le vayamos haciendo a nuestro ‚Äúbody‚ÄĚ.
  3. El pie de la ventana, nos indicará en qué parte de nuestra página estamos parados (en este caso dentro del tag <body>) y herramientas comunes, como zoom, selector, y hand.
    Taller de Adobe Dreamweaver - Modo vista dise√Īo

Vayan mirando estas opciones, y probando. Si bien son fáciles, está bueno que las vayan reconociendo y cualquier cosa me preguntan vía comentario.

Conclusión

Por ahora damos por concluida la clase. La próxima iremos trabajando sobre el body de nuestra página y también investigaremos qué es lo que hace Dw por detrás del modo visual.

Les sigo recomendando que siempre prueben las herramientas que vemos clase a clase y que vayan un poco más allá también.

Cualquier duda que les vaya surgiendo me la pueden comentar, así las respondemos para todo el curso y las clases se hacen más dinámicas.

Los espero la semana que viene como siempre.

Hasta luego.

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>

 


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

Comentarios (14)

  1. Alex Sparrow dice:

    Hola a todos, excelente curso, he logrado ya dise√Īar un sitio en dw cs3, me gustaria saber su opini√≥n y contar con sus sabios consejos ca… orale, visiten mi sitio haber como lo ven no?

    http://www.portal2310.com

    Que se la pasen Chido

  2. Nelson dice:

    Hola Alex Sparrow: Antes que nada dejame felicitarte por lanzarte al agua, en cuanto al sitio me pareci√≥ de muy buen gusto, creo que utilizas una paleta sobria y nada recargada, por su estructura simple, es de facil navegabilidad y aborda diversos temas de inter√©s. Lo √ļnico que criticar√≠a es que para mi gusto me parece algo est√°tica, yo le agregar√≠a algo animaci√≥n, no mucho, cosas muy sutiles como, degradados y cosas por el estilo, en definitiva me parece un buen trabajo.

    CONGRATULATIONS

  3. Nelson dice:

    Una cosa m√°s Alex: el nombre del sitio y por tanto la direcci√≥n, no resulta muy atractivo, o por lo menos eso creo yo, no resulta atrayente si solo vemos el “portal 23 10” tal vez signifique algo para ti pero no para el resto. Una vez m√°s, esta es solo mi humilde opini√≥n.

    Saludos y de nuevo felicitaciones.

  4. Nelson dice:

    Hola Thor: tengo una pregunta. Estoy realizando una página para una fundación, me gustaría saber cuales son las medidas en que deben hacerce la página, o sea la tabla o retícula en Dreamweaber es 240 X 480 ??, de que dependen esas medidas?, gracias. Taluego.

  5. Thor dice:

    ¬°Hola gente! me alegra que sigan el curso. Felicitaciones Alex por la p√°gina.

    Nelson, con respecto a tu pregunta, el tama√Īo de las p√°ginas, si bien puede ser algo intuitivo en un comienzo, es un tema bastante profundo.

    Si me permitís hacerte esperar un poco, voy a incorporar la respuesta a esta pregunta en la clase 11 (la 10 fue ya publicada), así tengo más lugar para explayarme, y puedo poner algunos ejemplos.

    Acá en comentarios, no puedo poner mucho texto, y tampoco puedo poner imagenes así que se complica un poco.

    ¬°La clase 11 vendr√° sumada con la respuesta a nuestro fiel seguidor Nelson!

    ¬°Hasta luego!

  6. Nelson dice:

    Vale Thor, espero la clase 11, gracias

  7. Alex Sparrow dice:

    Hola a todos.

    Gracias Nelson por tus valiosisimos comentarios. Efectivamente estoy en lo de darle un poco m√°s de movimiento, pero te juro que he estado batallando con el dw cs3. pero gracias a los comentarios del curso he estado usando algunas de las funciones que se mostraron.

    Estoy practicando aun para lograr darle movimiento utilizando el PS cs3 pero aun no logro reducir el peso de los archivos a un grado optimo, ya que resultan algo pesados y mi objetivo es darle rapidez a la descarga y logrando algo de movimiento insertando multimedia procedente del youtube.

    Estoy inciando a leer lo relativo al curso aqui de FLASH, yo creo insertare en las proximas semanas barras principales en flash.

    En cuanto al nombre les comento que efectivamente significa mucho para mi, y lo deje por considerarlo de “buena suerte” ya que es la fecha en que nacio uno de mis hijos y que desafortunadamente ya no esta conmigo, ahora tendria ya 4 a√Īos.

    y otro factor fue el relativo a que aca es el nombre de un sitio que ya estaba funcionando y que resulto positivo para mi. Ya lo retire e inice este otro ya como un portalito chiquito y que comensare a comercializar en los proximos días. Así que ese lo dejare jejeje.

    Muchas gracias thor, pero fue gracias a ustedes que estoy animandome a redise√Īar todo con la suite de ADOBE. Estare ya acercandome a los cursos de ¬īPhotoshop y Flash, sin dejar de seguir aprendiendo en el DW. deveras al equipo de elwebmaster…MUCHAS GRACIAS.

    En cuanto a las medidas Nelson, yo use una que es compatible para 800 x 600 y es 760 px del ancho de las tabalas. Nose si eso te sirva.

    Alex

  8. Nelson dice:

    Hola alex: Entiendo lo del nombre, seguro te dar√° muchisima suerte, gracias por la recomendaci√≥n de las medidas, voy a intentarlo y les cuento. y… definitivamente estoy de acuerdo con alex, uno encuentra en internet much√≠simos cursos en linea, poero pocos con estas caracter√≠sticas y nivel de compromiso. De verdad, pareciera que se asiste a una escuela real (f√≠sica) con profesores, compa√Īeros y todo, por lo cual es agradable entrar al webmaster… chao pues.

  9. Juan Manuel dice:

    ¬°Hola, Alex!

    Sólo tenías que preguntar ^_^ !!! Para que no te pesen mucho las imágenes guárdalas desde Archivo/Guardar para la Web (File/Save for web) como jpeg de calidad media o alta, o hasta en formato gif. No pesarán casi nada!!!! ^___^

    Espero haber sido de ayuda, cualquier otra duda, me dejan comentarios también en el Taller de Photoshop.

    ¬°¬°¬°Saludos a todos!!!

  10. Alex Sparrow dice:

    Gracias Juan Manuel..pero como viste en mi sitio, las imagenes que uso las prepare en photoshop y efectivamente las puse en jpg al 85 o 90 % y fueron adecuadas para la web, efectivamente guardandolas para web. Las que digo que estan quedando pesadas son los gif animados usando esas mismas imagenes, para dejarlas como banners de 760 x 199, que es la medida que use.. jeje, aun nose como animar correctamente en photoshop cs3 pero estare leyendo el curso de Ps aqui mismo a partir del dia de hoy para ver si puedo…gracias

  11. Juan Manuel dice:

    ¬°Hola, Alex, para animar gifs puedes usar Adobe Image Ready, que viene integrado a Photoshop!

  12. Albert dice:

    hola a todos, gracias por atenderme. Mi pregunta es concreta. Trabajo en modo dise√Īo y deseo saber
    que medida es la idónea ( y no hablo del 100% ) para que aparentemente encaje al máximo y una vez
    puesta la p√°gina en internet teniendo en cuenta que el monitoer es de 17 p.

  13. Thor dice:

    Hola Albert.

    Yo te dir√≠a que m√°s que encajar en el tama√Īo de un monitor en donde se encaja es en la resoluci√≥n de la pantalla.
    Es verdad que la mayor√≠a de los monitores de 17″ utilizan resoluciones de 1024×768 o de 1280×1024 as√≠ que habr√≠a que ajustarse a una de esas.

    Si lo quieres hacer en la de 1024px deberías hacer un cuerpo de unos 950px totales y poner la página centrada ubicando el contenido importante del lado izquierdo ya que es casi seguro que en esa resolución cosas como por ejemplo, la barra de scroll del navegador te coman algo de espacio tapando un poco del contenido de la derecha o en resoluciones menores solo se vea la parte izquierda.
    Por ejemplo una persona que entre con una resoluci√≥n de 800×600 tambi√©n ver√≠a la parte importante de la izquierda de tu contenido, por ende abarcas esta resoluci√≥n tambi√©n.

    Al estar la pagina centrada, este tama√Īo tambi√©n andar√° perfecto sobre un 1280×1024 quedando con dos m√°rgenes a los lados (como los bordes azules que tiene esta pagina), por ende te recomiendo esos tama√Īos.

    Si usas estos tama√Īos (950px) y usas barra lateral en la derecha, piensa que parte de la barra va a quedar fuera del rango visual (no siempre pero es una posibilidad), as√≠ que trata de ajustar su contenido tirando hacia el costado izquierdo de la barra, o bien la otra opci√≥n es directamente hacer la barra en la izquierda.

    Espero que te haya servido la respuesta.

    Saludos!
    Thor.

  14. Juan Manuel P. dice:

    Como puedo crear una plantilla para Blogger con Adobe Dreamweaver cs5.

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