Adobe Dreamweaver es un editor de páginas web que permite crear y editar sitios web de forma visual o a través de código. Ofrece herramientas para diseñar sitios respetando estándares web y facilita la inserción de elementos como imágenes, tablas y formularios. Aunque es una potente herramienta, puede resultar compleja para usuarios menos experimentados.

1. 9/21/2015 Footer Text 1
ALUMNA: Álvaro Maraví, Jhocelyn Yasmín
GRADO-SECCIÓN: 4° «J»
PROF. : Emilio Félix Alberto
I.E. : «República del Ecuador»
AÑO: 2015

2. 
 Adobe Dreamweaver es una aplicación en forma de suite (basada
en la forma de estudio de Adobe Flash) que está destinada a la
construcción, diseño y edición de sitios y aplicaciones Web basados
en estándares. Creado inicialmente por Macromedia (actualmente
producido por Adobe Systems) es el programa más utilizado en el
sector del diseño y la programación web, por sus funcionalidades,
su integración con otras herramientas como Adobe Flash y,
recientemente, por su soporte de los estándares del World Wide
Web Consortium. Su principal competidor es Microsoft Expression
Web y tiene soporte tanto para edición de imágenes como para
animación a través de su integración MALVERDE'S Hasta la
versión MX, fue duramente criticado por su escaso soporte de los
estándares de la web, ya que el código que generaba era con
frecuencia sólo válido para Internet Explorer y no validaba como
HTML estándar. Esto se ha ido corrigiendo en las versiones
recientes.
9/21/2015 Footer Text 2
DEFINICIÓN

3. 
 ·La gran ventaja de este editor sobre otros es su gran poder de
ampliación y personalización del mismo, puesto que en este
programa, sus rutinas (como la de insertar un hipervínculo, una
imagen o añadir un comportamiento) están hechas en Javascript-C,
lo que le ofrece una gran flexibilidad en estas materias.
 Como editor WYSIWYG que es, Dreamweaver permite ocultar el
código HTML de cara al usuario, haciendo posible que alguien no
entendido pueda crear páginas y sitios web fácilmente sin
necesidad de escribir código.
 Un aspecto de alta consideración de Dreamweaver es su
funcionalidad con extensiones. Es decir, permite el uso de
"Extensiones". Las extensiones, tal y como se conocen, son
pequeños programas, que cualquier desarrollador web puede
escribir (normalmente en HTML y Javascript) y que cualquiera
puede descargar e instalar, ofreciendo así funcionalidades
añadidas a la aplicación.
9/21/2015 Footer Text 3
VENTAJAS

4. 
 Ofrece la posibilidad de crear botones flash, formularios,
JavaScripts, y más, es de gran ayuda. Además de poder
insertar elementos web, encontramos una gran precisión
en la importación de información de Word y Excel, con
las funciones de copiar y pegar.
 : Dreamweaver es conocido por ofrecer herramientas
avanzadas en el desarrollo de sitios web, y si bien se trata
del producto de mayores características del mercado, su
uso está limitado a usuarios con experiencia, ya que de no
ser así, uno se encuentra con la dificultad de no saber por
dónde comenzar.
9/21/2015 Footer Text 4
CARACTERÍSTICAS

5. 
 Aunque muchos usuarios afirmen en los foros de DW que no tiene
desventajas, tampoco se puede decir que Dreamweaver lo puede
utilizar cualquiera, al ser tan avanzado el único inconveniente es
que puede resultar difícil su manejo para usuarios menos
experimentados en el diseño de páginas web, ya que quien lo
utiliza tiene que tener un conocimiento básico de este programa.
 Bien entonces una vez que ya hemos analizado la definición, su
características y sus ventajas ya tenemos una idea de lo que se trata
Adobe Dreamweaver qué es lo que nos ofrece y en qué nos puede
servir. Pues quizás los estudiantes no le veamos la importancia de
utilizar este programa, a lo mejor no nos sirva ahora, pero cuando
ya nos involucremos en el campo laboral ya sabremos cómo se
utilizan los programas de Adobe, además con esta práctica ya
tenemos una idea de lo que será nuestro website, ese es el objetivo
de estudiar ese diseñador web.
9/21/2015 Footer Text 5
DESVENTAJAS

6. 
 Las funciones de edición visual de Dreamweaver MX
permiten agregar rápidamente diseño y
funcionalidad a las páginas, sin la necesidad de
programar manualmente el código HTML. Se puede
crear tablas, editar marcos, trabajar con capas,
insertar comportamientos JavaScript, etc., de una
forma muy sencilla y visual.
9/21/2015 Footer Text 6
¿PARA QUÉ SIRVE?

7. 
9/21/2015 Footer Text 7

8. 
 Aunque muchos usuarios afirmen en los foros de
DW que no tiene desventajas, tampoco se puede
 decir que Dreamweaver lo puede utilizar cualquiera,
al ser tan avanzado el único inconveniente es
 que puede resultar difícil su manejo para usuarios
menos experimentados en el diseño de páginas
 web, ya que quien lo utiliza tiene que tener un
conocimiento básico de este programa.
9/21/2015 Footer Text 8
DE SVENTAJAS

9. 
 Vamos a ver cuáles son los elementos básicos de
Dreamweaver 8 , la pantalla, las barras, los paneles,
etc, para saber diferenciar entre cada uno de ellos.
Aprenderemos cómo se llaman, dónde están y para
qué sirven. También veremos cómo obtener ayuda,
por si en algún momento no sabemos cómo seguir
trabajando. Cuando conozcamos todo esto estaremos
en disposición de empezar a crear páginas web.
9/21/2015 Footer Text 9
ENTORNO DE
TRABAJO

10. 
 Al arrancar Dreamweaver aparece una pantalla
inicial como ésta, vamos a ver sus componentes
fundamentales. Así conoceremos los nombres de los
diferentes elementos y será más fácil entender el
resto del curso. La pantalla que se muestra a
continuación (y en general todas las de este curso)
puede no coincidir exactamente con la que ves en tu
ordenador, ya que cada usuario puede decidir qué
elementos quiere que se vean en cada momento,
como veremos más adelante.
9/21/2015 Footer Text 10
PANTALLA INICIAL

11. 
9/21/2015 Footer Text 11

12. 
 En el resto de esta unidad vamos a ir describiendo los puntos más
importantes señalados en esta imagen por los números en azul del 1 al 9.
 1.- Las barras.
 2.- Las pestañas de documentos.
 3.- La barra de estado.
 4.- El panel de propiedades.
 5.- Área de paneles.
 6.- Paneles y ventanas.
 7.- Línea inferior de pestañas.
 8.- Vista diseño del documento.
 9.- Vista código del documento.
9/21/2015 Footer Text 12

13. 
9/21/2015 Footer Text 13

14. 
 La barra de título contiene el nombre del programa
(Marcromedia Dreamweaver 8) y seguidamente el
nombre del documento que aparecerá en el
explorador y entre paréntesis, su ubicación y el
nombre del archivo en formato html. En el extremo
de la derecha están los botones para minimizar,
maximizar/restaurar y cerrar.
9/21/2015 Footer Text 14
LAS BARRAS

15. 
 La barra de menús
 Contiene las operaciones de Dreamweaver,
agrupadas en menús desplegables. Al hacer clic en
Insertar, por ejemplo, veremos las operaciones
relacionadas con los diferentes elementos que se
pueden insertar en Dreamweaver.
 Muchas de las operaciones se pueden hacer a partir
de estos menús, pero para algunas es preferible o
indispensable hacerlas desde los paneles.
9/21/2015 Footer Text 15

16. 
 La barra de herramientas estándar contiene iconos
para ejecutar de forma inmediata algunas de las
operaciones más habituales, como Abrir , Guardar ,
etc.
9/21/2015 Footer Text 16

17. 
 La barra de herramientas de documento contiene
iconos para ejecutar de forma inmediata algunas
otras operaciones habituales que no incluye la barra
de herramientas estándar. Estas operaciones son las
de cambio de vista del documento, vista previa, etc.
9/21/2015 Footer Text 17

18. 
 La barra de estado nos indica en cada momento en
qué etiqueta HTML nos encontramos (en la imagen
al encontrarnos en un documento en blanco estamos
directamente sobre la etiqueta <body>).
 También nos es posible alternar entre los modos de
selección, mano (para arrastrar la página), o zoom.
En cualquier momento puedes seleccionar el zoom
preferido desde el desplegable zoom y ajustar la
vista al porcentaje preferido (por defecto siempre
viene al 100%).
9/21/2015 Footer Text 18

19. 
 Dreamweaver utiliza ventanas flotantes similares a
las barras de herramientas, que se conocen como
paneles o inspectores. La diferencia entre panel e
inspector es que, en general, la apariencia y opciones
de un inspector cambian dependiendo del objeto
seleccionado.
 A través de la opción Ventana, de la barra de menús,
es posible mostrar u ocultar cada uno de los paneles
o inspectores. Vamos a ver los más importantes.
9/21/2015 Footer Text 19
PANELES E
INSPECTORES

20. 
 El inspector de Propiedades muestra y permite
modificar las propiedades del elemento seleccionado
que son usadas de forma más frecuente. Por ejemplo,
cuando el elemento seleccionado sea texto mostrará
el tipo de fuente, la alineación, si está en negrita o
cursiva, etc.
 Pulsando sobre el botón se despliega para mostrar
más opciones. Este botón se encuentra en la esquina
inferior-derecha.
 Seguramente será la herramienta de Dreamweaver
que más vayas a utilizar.
9/21/2015 Footer Text 20

21. 
 La barra de herramientas Insertar o panel de objetos
permite insertar elementos en un documento sin la
necesidad de recurrir al menú Insertar. Los
elementos están clasificados según su categoría:
tablas, texto, objetos de formulario, etc.
 Es posible configurar este panel para que en los
botones se muestren los iconos de los objetos (como
ocurre en la imagen anterior), para que se muestren
los nombres de los objetos, o para que se muestren
ambos a la vez.
9/21/2015 Footer Text 21

22. 
9/21/2015 Footer Text 22

23. 
 Podemos editar el documento con distintas vistas,
que puedes cambiar través de la barra de
documento:
9/21/2015 Footer Text 23
VISTAS DE UN
DOCUMENTO

24. 
 La vista
Diseño
 permite
trabajar con
el editor
visual.
9/21/2015 Footer Text 24

25. 
La vista Código se utiliza para poder
trabajar en un entorno totalmente de
programación, de código fuente. No
permite tener directamente una referencia
visual de cómo va quedando el
documento según se va modificando el
código.
9/21/2015 Footer Text 25

26. 
9/21/2015 Footer Text 26

27. 
GRACIAS
DE: Jhocelyn Álvaro
9/21/2015 Footer Text 27