¡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.
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.
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:
- 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:
- El cuerpo de la página, donde insertaremos y veremos cada cambio que le vayamos haciendo a nuestro “body”.
- 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.
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 |
Jueves, 27 de Marzo de 2008 a las 19.02
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
Lunes, 31 de Marzo de 2008 a las 16.00
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
Lunes, 31 de Marzo de 2008 a las 16.06
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.
Lunes, 31 de Marzo de 2008 a las 17.11
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.
Martes, 1 de Abril de 2008 a las 15.46
¡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!
Martes, 1 de Abril de 2008 a las 16.34
Vale Thor, espero la clase 11, gracias
Miércoles, 2 de Abril de 2008 a las 01.28
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
Miércoles, 2 de Abril de 2008 a las 14.23
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.
Miércoles, 2 de Abril de 2008 a las 16.03
¡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!!!
Jueves, 3 de Abril de 2008 a las 00.04
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
Jueves, 3 de Abril de 2008 a las 17.05
¡Hola, Alex, para animar gifs puedes usar Adobe Image Ready, que viene integrado a Photoshop!