TUTORIAL DREAMWEAVER

noviembre 14, 2007 at 3:04 pm 9 comentarios

Introducción:

En el trabajo sobre este tutorial hemos utilizado las versiones de Dreamweaver 3 y 4 para que este tutorial sea compatible con ambas versiones. Ambas versiones que tenemos están en inglés. Algunos de los nombres de los menús y objetos en español los hemos obtenido del libro de Oscar Peña, para la versión 4 de Dreamweaver supongo que los nombres no habían cambiado, pero para evitar confusiones, cuando indiquemos algo propio para Dreamweaver 4 que no esté en Dreamweaver 3 pondremos los nombres originales en inglés junto con nuestra traducción al castellano. En todo caso, como este tutorial tendrá bastantes imágenes para apoyar el texto no tendrás problemas en ubicar los menús y objetos en tu versión de Dreamweaver en español.No se puede enseñar en un tutorial de pocas páginas todo lo que aprenderás de un libro de 300 o más páginas pero después de seguir este tutorial de Dreamweaver serás capaz de orientarte en su entorno, de diseñar páginas sencillas y administrar tu sitio Web.

             Ver todo      

No se requiere ninguna experiencia previa de Dreamweaver para seguir este tutorial pero suponemos que sepas utilizar Windows y aplicaciones para Windows (Word o Word Pefect por ejemplo), entiendas los términos como por ejemplo “barra de tareas”, “menú contextual”, “teclas de acceso directo”, “barra de menús”, “barra de herramientas”, y sepas como copiar, pegar, insertar objetos y guardar tu trabajo.

Entorno de trabajo en Dreamweaver y creación de una página Web:

Dreamweaver es un editor del tipo WYSIWYG, es decir, un editor visual que permite diseñar las páginas sin saber nada de HTML. Pero nunca está de más tener el conocimiento de este lenguaje, los editores WYSIWYG no son perfectos y pueden cometer errores o generar también bastante código basura. Para esto Dreamweaver dispone también del editor HTML o permite configurar un editor HTML externo si así lo deseamos. Para ver el código HTML pulsamos F 10 y se abrirá la ventana del editor, en la misma ventana tenemos el botón del editor externo para utilizar otro programa de edición HTML.

En el Dreamweaver 4 además podemos tener ambas vistas: código y diseño a la vez, tienes esta opción en el menú “Ver” o puedes usar los botones correspondientes de la barra de herramientas que están resaltados en rojo en esta imagen:

Vistas en Dreamweaver

Para crear una nueva página utiliza el menú “Archivo” / “Nuevo”. Tienes las opciones para crear una nueva página o crear una página desde una plantilla previa.

Para insertar objetos ( por ejemplo, imágenes, tablas o animaciones Flash en tu página puedes usar el menú Insertar o la ventana de objetos:

Objetos Dream Weaver

Si no la ves utiliza el menú “Ventana” / “Objetos” o Ctr+F3.

Para utilizar la ventana de los objetos de Dreamweaver, arrastra el icono del objeto que necesites, por ejemplo el icono de la imagen hacia la página, y te aparecerá la ventana del dialogo para indicar la ubicación de la imagen que quieres insertar.

Siempre puedes recurrir a la ventana propiedades de Dreamweaver para editar las propiedades de un objeto:

Ventana de propiedades de Dreamweaver

La ventana que ves en esta imagen corresponde a las propiedades del texto, las opciones de la ventana cambiarán según el objeto que insertemos. Para verla, pulsa el objeto con el botón secundario en el objeto que quieras editar o utilizar el menú “Ventana” – “Propiedades”, o las teclas Ctrl+F3.

Los objetos de Dreamweaver accesibles desde la ventana de Objetos:
Si pulsamos el pequeño triangulo que aparece en la parte superior derecha de la ventana de objetos podemos acceder a diferentes ventanas de objetos. A continuación viene la descripción de diferentes ventanas y objetos de Dreamweaver:

Común:

Es la ventana que aparece por defecto y contiene los objetos más comunes de DreamweaverInsertar imagen – para insertar objetos gráficos: ficheros .gif, .jpg o .png.

Insertar imagen de sustitución – permite crear los efectos “rollover” – botones o imágenes que cambian su apariencia al pasar el cursor sobre ellas.

Insertar tabla – como su nombre lo indica sirve para insertar tablas. Las tablas son un elemento todavía muy popular para colocar los contenidos de las páginas.

Insertar datos tabulares – Permite insertar datos de una hoja de cálculo.

Insertar barra horizontal – el elemento HTML definido por la etiqueta <HR> muy popular para separar los contenidos en una página Web.

Insertar barra de exploración – son unas barras de navegación creadas con tablas y JavaScript.

Dibujar capa – este tema lo tratamos en nuestro tutorial de capas.

Insertar salto de línea – agrega espacio adicional entre los objetos o líneas de texto (la etiqueta <BR> en HTML).

Insertar vínculo de correo electrónico – para insertar vínculos de tipo “mailto” para abrir un nuevo mensaje de correo con la dirección incluida en el campo “Para”. Si quieres saber más sobre este tema lee este artículo: Outlook Express: algunos accesos directos de utilidad

Insertar fecha – permite introducir la fecha y la hora de modificación de la página.

Insertar Flash – para insertar objetos creados con Macromedia Flash en tu página.

Insertar Shockwave – para insertar aplicaciones creadas con Macromedia Director.

Insertar Generator – contenidos dinámicos de este programa de Macromedia basados en las plantillas colocadas en el servidor.

Insertar HTML de Fireworks – inserta y convierte el código nativo de Macromedia Fireworks.

Insertar subprograma – para agregar applets Java a la página.

Insertar ActiveX – inserta objetos desarrollados con la tecnología ActiveX de Microsoft.

Insertar Plug-in – para insertar los plugins para Netscape (por ejemplo vídeo o sonido).

Insertar Server-Side Include – las instrucciones agregadas por el servidor (SSI), solo podremos utilizar esta opción si nuestro servidor lo permite, los servidores gratuitos no lo permiten.

Caracteres
Permite insertar caracteres especiales en el documento, por ejemplo © ¶ ©, etc.

Formularios

Para insertar formularios en una página Web, no hablaremos del tema en este tutorial porque será tratado en nuestro próximo tutorial de Dreamweaver.

Marcos

Permite crear páginas con marcos (“frames”). No trataremos este tema en este tutorial porque estamos absolutamente en contra de su uso (no son amigables para los navegantes ni para los buscadores). Preferimos utilizar barras de navegación. Es solo nuestra opinión personal, si te gustaría utilizar marcos en tu Web encontrarás la información que necesites en cualquier manual o libro de HTML.

Head

Esta ventana es muy importante: nos permite insertar código en la cabecera del documento.Insertar Meta – son las etiquetas opcionales para los servidores Web, por ejemplo las etiquetas de palabras clave o de descripción.

Insertar palabras clave – la meta etiqueta de las palabras clave(“keywords” en HTML) de nuestra página. Puede ser útil en algunos buscadores aunque la mayoría no le hace demasiado caso.

Insertar descripción – Es una meta etiqueta muy importante (“description” en HTML), trata de colocarla siempre, muchos buscadores la toman en cuenta a la hora de indexar la página. Debe ser una frase completa que describa lo mejor posible el contenido y el propósito de nuestro sitio.

Insertar la actualización – Meta “Refresh” en HTML, obliga al navegador a refrescar la página pasado un intervalo de tiempo o cargar una página diferente. Muy útil en los casos cuando nuestra página había cambiado de dirección y queremos que los navegantes que vengan a la URL antigua sean redirigidos automáticamente a la nueva dirección.

Insertar base – esta opción nos sirve si tenemos todos los documentos en un servidor distinto del de la página raíz, en este caso si utilizamos esta meta etiqueta todos los vínculos relativos serán interpretados automáticamente como absolutos, por ejemplo “Introduccion.htm” se interpretaría como “http://tututorial.webcindario.com/Introduccion.htm&#8221; si hemos especificado http://tututorial.webcindario.com/ como base.

Insertar vínculo – permite establecer relaciones entre los documentos, esta opción es muy útil para , por ejemplo, vincular rápidamente las hojas de estilo. 

Objetos invisibles
Los objetos invisibles pueden ser puntos de fijación con nombre, comentarios, secuencias de comandos o espacio indivisible (éste último ya no existe en Dreamweaver 4).

Punto de fijación con nombre – nos sirve para poder navegar dentro de un documento. Con este objeto podemos fijar un destino para el vínculo.

Comentario – permite insertar texto de comentarios que permiten ayudar a interpretar el código pro serían invisibles desde el navegador, en HTML correspondería a la etiquetas <!– –>.

Secuencias de comandos – con esta opción podemos insertar JavaScript y VBScript en nuestro documentos.

Espacio indivisible – inserta un espacio en blanco (  en HTML), ya no existe en Dreamweaver 4.

Y ahora, después de leer todo esto prueba crear algo en tu página, escribir algo de texto, insertar una imagen por ejemplo.

Puedes visualizar tu página en el navegador desde el menú “Archivo” / “Vista previa en el navegador” (“Preview en browser”). Por defecto Dreamweaver mostrará nuestro navegador predeterminado que tengamos instalado pero siempre podemos agregar un navegador secundario desde el mismo menú.

Creación y gestión de un sitio Web

Espero que ya pudiste crear una página sencilla con Dreamweaver pero ahora todavía nos hace falta aprender a manejar nuestro sitio Web como un conjunto.

Para hacerlo utilizaremos el menú “Sitio/Nuevo sitio”, no aparecerá una ventana como ésta:

Dreamweaver - new site

Desde esta ventana podemos determinar la ubicación local y remota de los ficheros de nuestro sitio.

Si especificamos el tipo del servidor remoto como “FTP” podremos sincronizar nuestra carpeta local con el servidor remoto.

Una vez creado el sitio siempre podremos abrir y administrarlo desde el menú “Sitio”.

Información sustraida de  svetlian.com

Mas información en http://tututorial.webcindario.com

Patrocinado por:  www.JoyeriaVirtual.net

Entry filed under: Dreamweaver, Tutorial. Tags: .

10 TRUCOS Y TÉCNICAS PARA ADSENSE VIDEOTUTORIAL BÁSICO DE LAS CURVAS

9 comentarios Add your own

  • 1. amig@mi@  |  febrero 12, 2008 a las 3:35 pm

    Estoy en un apuro. Pague un curso de html, dreamweaver y flash carisimo, y he terminado solo html. Estoy a marchas forzadas con DW por k me caduca y me piden como examen para pasar a la última parte un documento en una palntilla. Yo he hecho mis pinitos y he preparado una pagina con fondo, foto y tres vinculos, pero ahora no se como guardarlo para poder visualizarlo en la red. Podeis ayudarme?

    Responder
  • 2. jugued  |  febrero 13, 2008 a las 11:44 am

    Lo tienes que guardar en un ordenador y subirlo a un servidor FTP. Para ello debes tener una cuenta FTP y bajarte el programa para subirlo. Una opcion mas rápida puede ser hacerte una cuenta en http://www.miarroba.com y conseguir un espacio web y lo subes mediante su ftp. Espero que te sirva de ayuda

    Responder
  • 3. jugued  |  febrero 13, 2008 a las 12:14 pm

    amig@mi@ aquí te dejo un enlace de un tutorial que quizas te sirva para tu curso. Es para crear ventanas popup con Dreamweaver. Suerte. http://tututorial.webcindario.com/Dreamweaver.htm

    Responder
  • 4. Rosa Bernabé  |  agosto 25, 2008 a las 4:30 am

    Hola!

    Estoy trabajando con dreamweaver version 6.0,esto para un trbajo para mi tesis…necesito agregarle videos o clips(imagen y sonido), pero no se como se agreguen, ni en qué tipo de formato acepte dreamweaver, por favor ayudenme…

    De antemano mil gracias

    Responder
  • 5. jugued  |  agosto 25, 2008 a las 2:49 pm

    Hola, tengo buenas noticias para los visitantes de todotutoriales.wordpress.com y de http://tututorial.webcindario.com hemos puesto un nuevo enlace en la web http://minibannersx030.webcindario.com/ con lo que esperemos que aumente nuestro tráfico de visitas que aumenta sin parar y que nos sirva para darnos a conocer a más gente.
    Cualquiera que quiera promocionar su web lo puede hacer por tan solo 30 centimos de euro en http://minibannersx030.webcindario.com

    Responder
  • 6. Rosa Bernabé  |  septiembre 1, 2008 a las 7:18 pm

    Hola respecto a como agregarle videos a dreamweaver seguí los pasos de Insertar/Media, encontre 5 alternativas(Flash,Shockwave, Applet,Plug-in,Activex; ninguno aparece como flash video), pero ninguna me funciona, ya que cuando le doy clic a la opción solo aparece un recuadro y no reproduce nada, por favor me podria decir de que otra manera incluirle videos y que extensión debe tener?…yo le habia puesto unos de .swf como los archivos flash, pero no funciona….que puedo hacer?.Mil gracias

    Responder
  • 7. melissa  |  septiembre 18, 2008 a las 2:37 pm

    bueno estos pasos son muy importantes asi que me encanta eso por k ahora estoy trabajando con eso mi maestra es muy presionada y nos da animo para crear una buena pagina bye

    Responder
  • 8. jugued  |  septiembre 23, 2008 a las 1:50 pm

    Empezamos con la fusion de Tututorial para darle una mejor calidad y contenidos de nuestros tutoriales a los lectores, pero son muchas las que se han apuntado al carro y las que nos están seguiendo con vistas a conseguir visitas.

    Todotutoriales lleva rozando las 1000 visitas diarias durante esta semana y esto no pasa desapercibido para otras webs. Por ello se han puesto en contacto cuatro nuevas webs para promocionarnos en nuestros tutoriales.

    Las webs son Casino online, Multivan ocasión, Regalos baratos y Sex-shop.

    Estas webs nos estan ayudando a seguir creciendo en calidad y cantidad de tutoriales por lo que son ya parte de nosotros.

    Desde Todotutoriales quisiera recomendaros las webs para que estas tambien crezcan a la velocidad que lo hace Todotutoriales

    Responder
  • 9. Amy  |  marzo 19, 2013 a las 4:04 am

    Hey there just wanted to give you a brief heads up and let you know a
    few of the pictures aren’t loading properly. I’m not sure
    why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same results.

    Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Categorías


A %d blogueros les gusta esto: