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

 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

 ·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

 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

 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

 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?

9/21/2015 Footer Text 7

 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

 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

 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

9/21/2015 Footer Text 11

 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

9/21/2015 Footer Text 13

 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

 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

 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

 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

 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

 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

 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

 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

9/21/2015 Footer Text 22

 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

 La vista
Diseño
 permite
trabajar con
el editor
visual.
9/21/2015 Footer Text 24

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

9/21/2015 Footer Text 26

GRACIAS
DE: Jhocelyn Álvaro
9/21/2015 Footer Text 27

Dreamweaver

  • 1.
    9/21/2015 Footer Text1 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 Dreamweaveres 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 granventaja 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 laposibilidad 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 muchosusuarios 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 funcionesde 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.
  • 8.
      Aunque muchosusuarios 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 aver 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 arrancarDreamweaver 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.
  • 12.
      En elresto 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.
  • 14.
      La barrade 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 barrade 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 barrade 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 barrade 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 barrade 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 utilizaventanas 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 inspectorde 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 barrade 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.
  • 23.
      Podemos editarel 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ódigose 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.
  • 27.