SlideShare una empresa de Scribd logo
1 de 13
¿EN QUE CONSISTE DREAMWEAR?

   Dreamweaver es la herramienta de diseño de páginas web más
    avanzadas.
   Las funciones de edición visual de Dreamweaver 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, hojas de estilo trabajar
    con capas, insertar comportamientos Java Script para crear
    efectos e interactividades e inserción de archivos multimedia,
    etc. De una forma muy sencilla y visual.
   Además incluye un software de cliente FTP completo,
    permitiendo entre otras cosas trabajar con mapas visuales de los
    sitios web, actualizando el sitio web en el servidor sin salir del
    programa.
   http://www.aulaclic.es/dreamweaver-cs5/t_1_1.htm
ELEMENTOS BÁSICOS DE DREAMWEAR

   La barra de la aplicación: Esta barra contiene los siguientes
    elementos: los menús, varios botones propios de la aplicación los
    cuales nos permiten cambiar entre la vista de diseño o código,
    acceder a las extensiones que se pueden añadir, o al administrador
    de sitios, el conmutador de espacio de trabajo y una caja de
    búsquedas para obtener ayuda on line.


   Las pestañas de documento: cada archivo que tengamos abierto,
    mostrará una pestaña con su nombre accediendo de uno a otro con
    facilidad.


   La barra de estado: encontramos el selector de etiquetas, nos sirve
    para seleccionar etiquetas completas, las herramientas de
    Selección, Mano y Zoom. Y otros datos como el tamaño de la
    ventana, el tamaño de la página o su codificación.
   La barra de herramientas estándar: contiene iconos para realizar
    las acciones más habituales del menú Archivo y Edición, Nuevo
    archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo,
    Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y
    Rehacer.


    La barra de herramientas de documento: contiene iconos que
    nos permiten cambiar entre las distintas vistas de edición y la
    vista en vivo.

   La barra de representación de estilos: nos permite ver la
    apariencia de nuestra web en distintos dispositivos, si estamos
    utilizando hojas distintas que dependan de eso.

    La barra de navegación con navegador: esta barra nos permite
    usar Dreamweaver como un navegador web y navegar por las
    páginas de nuestro sitio, aunque sólo tiene sentido con la Vista en
    vivo.
 El inspector de Propiedades: muestra las opciones propias del objeto
    o texto seleccionado, permitiéndonos editarlas, por lo que se convierte
    en uno de los elementos más utilizados en Dreamweaver.

   El panel Insertar: Podemos emplearlo para insertar
    imágenes, enlaces, multimedia, tablas, formularios o cualquier
    elemento que nuestra web necesite.

   La vista Diseño: nos permite trabajar con el editor
    visual, ofreciéndonos un aspecto muy similar al resultado final, pero
    editable.

   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.

   La vista Dividir : permite dividir la ventana en dos zonas: Código y
    Diseño. Una muestra el código fuente, y la otra el editor visual.
    Cuando se realiza un cambio en alguna de las zonas, este cambio se
    aplica directamente sobre la otra.
    La Vista en vivo: es una mejora reciente de Dreamweaver. Nos ofrece
    una vista del resultado final no editable.
   La vista Código en vivo: se emplea conjuntamente con la Vista en vivo.
    Divide la pantalla como la vista Dividir, pero sin que podamos editar el
    código. Lo que hace es que al seleccionar partes de la web en la Vista
    en vivo, se seleccione su correspondiente código fuente.
   http://www.aulaclic.es/dreamweaver-cs5/t_2_1.htm
EL TEXTO Y SUS PROPIEDADES

   Los encabezados se utilizan para establecer títulos dentro de un
    documento, es importante emplear correctamente los
    encabezados, ya que se organizará mejor el contenido de nuestra
    web. El formato predeterminado sirve para que el texto aparezca
    tal cual ha sido escrito.

   Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos
    permiten formatear nuestra página y darle el diseño que
    queramos. Podemos cambiar desde propiedades simples, como el
    color de fondo, hasta cosas más vistosas.

   Los estilos CSS se utilizan para combinar una serie de atributos
    del texto, como pueden ser el color , el tamaño, etiquetas,
    encabezados, párrafos, enlaces, etc. Además se puede crear um
    estilo personalizado tiene uma capacidad simple de actualizacion.
HIPERENLACE

   Un hiperenlace es el que al ser pulsado lleva de una página o
    archivo a otra página o archivo.
   Es posible asignar un vínculo a un texto, a una imagen, o a parte
    de una imagen.
   Cuando creemos un enlace, lo que realmente haremos será crear
    una etiqueta <a></a> que es la que en HTML se encarga de
    definir los enlaces.
   La forma más sencilla de crear un enlace es a través
    del inspector de propiedades. Para ello es necesario seleccionar
    el texto o el objeto que va a servir de enlace, y seguidamente
    establecer el Vínculo en el inspector HTML.
   Otra forma de crear un enlace es a través del
    menú Insertar, opción Hipervínculo.
CLASES DE HIPERENLACE
   Referencia absoluta: Conduce al sitio en el que se encuentra el
    documento utilizando la ruta completa del archivo, incluyendo el
    protocolo http://.
   Referencia relativa al documento (por defecto): La ubicación del
    archivo enlazado se toma en relación con la ubicación de la
    página. Esta es la opción por defecto de Dreamweaver, y es la
    forma más habitual para enlazar archivos dentro del sitio.
   Referencia relativa al sitio: Conduce a un documento situado
    dentro del mismo sitio que el documento actual. Tomando como
    origen la carpeta raíz del sitio.
   Marcadores o Puntos de fijación: Conduce a un punto dentro de un
    documento, ya sea dentro del actual o de otro diferente. Para
    ello, indicamos el nombre del punto de fijación a continuación de la
    ruta del archivo (relativa o absoluta) separados por una
    almohadilla (#).
    Se debe tener siempre en cuenta que los nombres de las rutas se
    correspondan perfectamente a los nombres de los archivos y
    carpetas en el servidor
LAS IMÁGENES

   Para insertar una imagen hay que dirigirse al menú Insertar, a la
    opción Imagen. Después de esto, ya es posible seleccionar una
    imagen a través de la nueva ventana. Otra forma de insertar una
    imagen, es arrastrarla directamente desde el
    panel Archivos sobre el documento.


   Si insertamos una imagen y luego la borramos, la movemos, o
    escribimos mal su nombre, en Dreamweaver
    aparecerá indicando que el enlace del archivo está roto.


   Es preferible que la imagen sea relativa al Documento, ya que si
    cambiamos la página de carpeta, lo habitual es cambiar también
    sus imágenes.
HTTP://WWW.AULACLIC.
ES/DREAMWEAVER-
CS5/GRAFICOS/ABRIR_I
MAGEN.GIF
IMAGEN DE SUSTITUCIÓN O ROLLOVER
   Un rollover es una imagen que cambia por otra cuando el puntero se
    sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o
    en los botones para desplazarnos a través de distintas páginas.
   Para insertar un rollover hay que dirigirse al menú Insertar, Objetos
    de Imagen, a la opción Imagen de sustitución. En la nueva ventana
    hay que especificar la imagen original y la de sustitución.




   http://www.aulaclic.es/dreamweavercs5/graficos/imagen_sustitucion.gif
MULTIMEDIA
   Películas flash: son animaciones, cuyo archivo tiene la
    extensión SWF. Estas películas pueden crearse mediante el
    programa Flash también de Adobe. Para poder ser visualizado en
    el navegador, y necesitan que el usuario tenga instalado el plug-in
    de Flash Player. Las películas Flash pueden insertarse en una
    página a través del menú Insertar → Media, opción SWF.
   Sonido: Las páginas que contienen sonido suelen ofrecer la
    posibilidad de activarlo o desactivarlo, para que aquellos usuarios
    que no deseen escuchar el sonido de la página puedan
    desactivarlo. Para insertar un archivo de audio en un documento
    tienes que dirigirte al menú Insertar, Medía, opción Plug-in.
   Videos: Los formatos de vídeo que suelen utilizarse en Internet
    son el AVI, el MPEG y el MOV. Para insertar un archivo de vídeo
    en un documento tienes que dirigirte al menú Insertar, Medía,
    opción Plug-in.

Más contenido relacionado

La actualidad más candente

Principales caracteristicas de powerpoint 2010
Principales caracteristicas de powerpoint 2010Principales caracteristicas de powerpoint 2010
Principales caracteristicas de powerpoint 2010deissyliliana0817
 
Pestaña archivo de power point
Pestaña archivo de power pointPestaña archivo de power point
Pestaña archivo de power pointkevinosney24
 
los menus de power point
los menus de power point los menus de power point
los menus de power point cbasamaya_
 
El entorno de photoshop cs6
El entorno de photoshop cs6El entorno de photoshop cs6
El entorno de photoshop cs6Ivon Yauyo
 
Herramientas ofimaticas
Herramientas ofimaticasHerramientas ofimaticas
Herramientas ofimaticasElvis Ramos
 
Heramientas de word y sus funciones
Heramientas de word y sus funcionesHeramientas de word y sus funciones
Heramientas de word y sus funcionessaraluz287
 
Herramientas para el uso de procesador de texto
Herramientas para el uso de procesador de textoHerramientas para el uso de procesador de texto
Herramientas para el uso de procesador de textomariaignacia5
 
Entorno de Trabajo de Photoshop
Entorno de Trabajo de PhotoshopEntorno de Trabajo de Photoshop
Entorno de Trabajo de Photoshopstephanyzambrano
 
Barra de inicio en word
Barra de inicio en wordBarra de inicio en word
Barra de inicio en wordDavid Sampedro
 
Principales herramientas de Word
Principales herramientas de WordPrincipales herramientas de Word
Principales herramientas de WordViviana Lloret
 
Fichas de power point
Fichas  de power  pointFichas  de power  point
Fichas de power pointlilianerlinda
 

La actualidad más candente (20)

Iconos de word
Iconos de wordIconos de word
Iconos de word
 
Principales caracteristicas de powerpoint 2010
Principales caracteristicas de powerpoint 2010Principales caracteristicas de powerpoint 2010
Principales caracteristicas de powerpoint 2010
 
Barra de diseño de página de word
Barra  de diseño de página de wordBarra  de diseño de página de word
Barra de diseño de página de word
 
Pestaña archivo de power point
Pestaña archivo de power pointPestaña archivo de power point
Pestaña archivo de power point
 
Entorno power point
Entorno power pointEntorno power point
Entorno power point
 
los menus de power point
los menus de power point los menus de power point
los menus de power point
 
El entorno de photoshop cs6
El entorno de photoshop cs6El entorno de photoshop cs6
El entorno de photoshop cs6
 
Navegadores y buscadores de internet
Navegadores y buscadores de internetNavegadores y buscadores de internet
Navegadores y buscadores de internet
 
Herramientas ofimaticas
Herramientas ofimaticasHerramientas ofimaticas
Herramientas ofimaticas
 
Funciones de microsoft word
Funciones de microsoft wordFunciones de microsoft word
Funciones de microsoft word
 
Heramientas de word y sus funciones
Heramientas de word y sus funcionesHeramientas de word y sus funciones
Heramientas de word y sus funciones
 
Herramientas para el uso de procesador de texto
Herramientas para el uso de procesador de textoHerramientas para el uso de procesador de texto
Herramientas para el uso de procesador de texto
 
Entorno de Trabajo de Photoshop
Entorno de Trabajo de PhotoshopEntorno de Trabajo de Photoshop
Entorno de Trabajo de Photoshop
 
Pestaña inicio
Pestaña inicioPestaña inicio
Pestaña inicio
 
Barra de inicio en word
Barra de inicio en wordBarra de inicio en word
Barra de inicio en word
 
Ventana de Dreamweaver
Ventana de DreamweaverVentana de Dreamweaver
Ventana de Dreamweaver
 
Principales herramientas de Word
Principales herramientas de WordPrincipales herramientas de Word
Principales herramientas de Word
 
Introducción InDesign
Introducción InDesignIntroducción InDesign
Introducción InDesign
 
Fichas de power point
Fichas  de power  pointFichas  de power  point
Fichas de power point
 
Emaze
EmazeEmaze
Emaze
 

Similar a Elementos básicos de Dreamweaver

Similar a Elementos básicos de Dreamweaver (20)

Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Dreamweaver cs5 naty
Dreamweaver cs5 natyDreamweaver cs5 naty
Dreamweaver cs5 naty
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernesto
 
Dreamweaver a lo ernesto
Dreamweaver a lo ernestoDreamweaver a lo ernesto
Dreamweaver a lo ernesto
 
Espacio de trabajo Dreamweaver
Espacio de trabajo DreamweaverEspacio de trabajo Dreamweaver
Espacio de trabajo Dreamweaver
 
Dreamweaver cs5 marcela trocha
Dreamweaver cs5 marcela trochaDreamweaver cs5 marcela trocha
Dreamweaver cs5 marcela trocha
 
Presentación1
Presentación1Presentación1
Presentación1
 
Resumen de dreamweaver
Resumen de dreamweaverResumen de dreamweaver
Resumen de dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Johan T,T
Johan T,TJohan T,T
Johan T,T
 
Ppt5 bcd.pptm recuperado
Ppt5 bcd.pptm recuperadoPpt5 bcd.pptm recuperado
Ppt5 bcd.pptm recuperado
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Lorena
LorenaLorena
Lorena
 
Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5Introducción a Dreamweaver cs5
Introducción a Dreamweaver cs5
 
Presentación1
Presentación1Presentación1
Presentación1
 
Trabajo dreamweaver
Trabajo dreamweaverTrabajo dreamweaver
Trabajo dreamweaver
 
Adobe dreamweaver
Adobe dreamweaverAdobe dreamweaver
Adobe dreamweaver
 
Presentación2
Presentación2Presentación2
Presentación2
 
Dreamweaver gisselle noguera
Dreamweaver gisselle nogueraDreamweaver gisselle noguera
Dreamweaver gisselle noguera
 
REPASO PARA 5TO DE SECUNDARIA
REPASO PARA 5TO DE SECUNDARIAREPASO PARA 5TO DE SECUNDARIA
REPASO PARA 5TO DE SECUNDARIA
 

Elementos básicos de Dreamweaver

  • 1.
  • 2. ¿EN QUE CONSISTE DREAMWEAR?  Dreamweaver es la herramienta de diseño de páginas web más avanzadas.  Las funciones de edición visual de Dreamweaver 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, hojas de estilo trabajar con capas, insertar comportamientos Java Script para crear efectos e interactividades e inserción de archivos multimedia, etc. De una forma muy sencilla y visual.  Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.  http://www.aulaclic.es/dreamweaver-cs5/t_1_1.htm
  • 3. ELEMENTOS BÁSICOS DE DREAMWEAR  La barra de la aplicación: Esta barra contiene los siguientes elementos: los menús, varios botones propios de la aplicación los cuales nos permiten cambiar entre la vista de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador de sitios, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line.  Las pestañas de documento: cada archivo que tengamos abierto, mostrará una pestaña con su nombre accediendo de uno a otro con facilidad.  La barra de estado: encontramos el selector de etiquetas, nos sirve para seleccionar etiquetas completas, las herramientas de Selección, Mano y Zoom. Y otros datos como el tamaño de la ventana, el tamaño de la página o su codificación.
  • 4. La barra de herramientas estándar: contiene iconos para realizar las acciones más habituales del menú Archivo y Edición, Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer.  La barra de herramientas de documento: contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo.  La barra de representación de estilos: nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan de eso.  La barra de navegación con navegador: esta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas de nuestro sitio, aunque sólo tiene sentido con la Vista en vivo.
  • 5.  El inspector de Propiedades: muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en Dreamweaver.  El panel Insertar: Podemos emplearlo para insertar imágenes, enlaces, multimedia, tablas, formularios o cualquier elemento que nuestra web necesite.  La vista Diseño: nos permite trabajar con el editor visual, ofreciéndonos un aspecto muy similar al resultado final, pero editable.  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.  La vista Dividir : permite dividir la ventana en dos zonas: Código y Diseño. Una muestra el código fuente, y la otra el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.
  • 6. La Vista en vivo: es una mejora reciente de Dreamweaver. Nos ofrece una vista del resultado final no editable.  La vista Código en vivo: se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir, pero sin que podamos editar el código. Lo que hace es que al seleccionar partes de la web en la Vista en vivo, se seleccione su correspondiente código fuente.  http://www.aulaclic.es/dreamweaver-cs5/t_2_1.htm
  • 7. EL TEXTO Y SUS PROPIEDADES  Los encabezados se utilizan para establecer títulos dentro de un documento, es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web. El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito.  Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra página y darle el diseño que queramos. Podemos cambiar desde propiedades simples, como el color de fondo, hasta cosas más vistosas.  Los estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser el color , el tamaño, etiquetas, encabezados, párrafos, enlaces, etc. Además se puede crear um estilo personalizado tiene uma capacidad simple de actualizacion.
  • 8. HIPERENLACE  Un hiperenlace es el que al ser pulsado lleva de una página o archivo a otra página o archivo.  Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.  Cuando creemos un enlace, lo que realmente haremos será crear una etiqueta <a></a> que es la que en HTML se encarga de definir los enlaces.  La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vínculo en el inspector HTML.  Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.
  • 9. CLASES DE HIPERENLACE  Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo el protocolo http://.  Referencia relativa al documento (por defecto): La ubicación del archivo enlazado se toma en relación con la ubicación de la página. Esta es la opción por defecto de Dreamweaver, y es la forma más habitual para enlazar archivos dentro del sitio.  Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. Tomando como origen la carpeta raíz del sitio.  Marcadores o Puntos de fijación: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello, indicamos el nombre del punto de fijación a continuación de la ruta del archivo (relativa o absoluta) separados por una almohadilla (#). Se debe tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los nombres de los archivos y carpetas en el servidor
  • 10. LAS IMÁGENES  Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento.  Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en Dreamweaver aparecerá indicando que el enlace del archivo está roto.  Es preferible que la imagen sea relativa al Documento, ya que si cambiamos la página de carpeta, lo habitual es cambiar también sus imágenes.
  • 12. IMAGEN DE SUSTITUCIÓN O ROLLOVER  Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas páginas.  Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de sustitución.  http://www.aulaclic.es/dreamweavercs5/graficos/imagen_sustitucion.gif
  • 13. MULTIMEDIA  Películas flash: son animaciones, cuyo archivo tiene la extensión SWF. Estas películas pueden crearse mediante el programa Flash también de Adobe. Para poder ser visualizado en el navegador, y necesitan que el usuario tenga instalado el plug-in de Flash Player. Las películas Flash pueden insertarse en una página a través del menú Insertar → Media, opción SWF.  Sonido: Las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página puedan desactivarlo. Para insertar un archivo de audio en un documento tienes que dirigirte al menú Insertar, Medía, opción Plug-in.  Videos: Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV. Para insertar un archivo de vídeo en un documento tienes que dirigirte al menú Insertar, Medía, opción Plug-in.