Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Por: Rodrigo Pérez
   Permite ver las propiedades de los    documentos y los objetos   Mediante los menús o seleccionado opciones    de los...
   La Ventana del documento   El Panel Insertar   Los paneles   El inspector de propiedades
   Barra de aplicación     Se encuentra en la parte superior     Contiene:      ▪ un conmutador de espacios de trabajo ...
   Barra de herramientas de codificación     Se muestra sólo en la vista de código     Contiene botones que permiten re...
   Selector de etiquetas     Esta debajo de la ventana del documento     Muestra las etiquetas del objeto seleccionado ...
   Panel insertar     Contiene botones para crear e insertar objetos     que se quieran añadir a las páginas   Panel ar...
   Son paneles pre-ordenados de manera    óptima para tareas específicas o estilos de    trabajo   Sirven para administr...
   Muestra el documento actual y permite trabajar desde    una variedad de modos de vista.   Se pueden cambiar las vista...
   Modifican la página dinámicamente el código    que cambiará a medida que el usuario interactúe    con la página.     ...
   Cuando la ventana de documento está    maximizada, aparecen pestañas con los    nombres de los documentos abiertos   ...
   Muestra como está organizado el sitio   Permite abrir los archivos para:     Editarlos     Publicarlos a un servido...
   Los activos son elementos usados en el sitio:     Imágenes     Colores     Películas   Estos pueden:     Almacena...
   Hipervínculo     Inserta una liga a una página web   Vínculo de correo electrónico     Inserta una liga a una direc...
   Media     Inserta objetos como flash, shockwave, applets y activex   Widget   Fecha     Inserta la fecha actual, c...
   Head     Inserta palabras clave, meta tags, descripciones     de página y otra información del documento.   Script  ...
   Se pueden insertar tablas y elegir entre dos    modalidades     Estándar      ▪ Despliega una tabla como retícula de ...
   Insertar etiqueta Div     Para crear un contenido en un bloque   Dibujar Div AP     Inserta contenido en bloque con...
   Acordeón de Spry     Inserta un panel que puede esconder o revelar una      gran cantidad de contenido cuando se hace...
   El panel insertar es el único que:     Se puede arrastrar fuera de su posición      predeterminada de acoplamiento   ...
   Puede ver y cambiar una variedad de    propiedades para el objeto o texto    seleccionado   Se encuentra en el borde ...
   Modo Actual     Permite revisar las reglas y propiedades CSS aplicadas      al elemento seleccionado en la página.   ...
   Modo Todo     Permite revisar todas las reglas y propiedades que     afectan al documento. Cuenta con dos secciones: ...
Upcoming SlideShare
Loading in …5
×

La interfaz de dreamweaver cs5

5,579 views

Published on

Elementos de la interfaz de dreamweaver cs5

Published in: Education
  • Be the first to like this

La interfaz de dreamweaver cs5

  1. 1. Por: Rodrigo Pérez
  2. 2.  Permite ver las propiedades de los documentos y los objetos Mediante los menús o seleccionado opciones de los paneles, se puede acceder a:  Las herramientas  Los comandos  La funciones
  3. 3.  La Ventana del documento El Panel Insertar Los paneles El inspector de propiedades
  4. 4.  Barra de aplicación  Se encuentra en la parte superior  Contiene: ▪ un conmutador de espacios de trabajo ▪ Menús ▪ Otros controles de la aplicación Barra de herramientas del documento  Contiene: ▪ Botones de vistas de la ventana del documento ▪ Opciones de visualización ▪ Otras operaciones relativas al documento
  5. 5.  Barra de herramientas de codificación  Se muestra sólo en la vista de código  Contiene botones que permiten realizar operaciones comunes de programación Ventana de documento  Muestra el documento actual mientras es creado y editado Inspector de propiedades  Permite ver y cambiar las distintas propiedades de un objeto o texto, al seleccionarlo.
  6. 6.  Selector de etiquetas  Esta debajo de la ventana del documento  Muestra las etiquetas del objeto seleccionado y su jerarquía  Al dar clic en una etiqueta se selecciona su contenido Paneles  Ayudan a crear y modificar objetos en la página.  Hay diferentes tipos de paneles  Para ampliarlos, hay que dar clic en la pestaña correspondiente.
  7. 7.  Panel insertar  Contiene botones para crear e insertar objetos que se quieran añadir a las páginas Panel archivos  Permite administrar los diferentes archivos y carpetas ya sea en un sitio local o un servidor remoto. Los paneles se despliegan dándoles clic en el menú Ventana.
  8. 8.  Son paneles pre-ordenados de manera óptima para tareas específicas o estilos de trabajo Sirven para administrar los paneles
  9. 9.  Muestra el documento actual y permite trabajar desde una variedad de modos de vista. Se pueden cambiar las vistas utilizando el botón vistas. Las diferentes vistas son:  Vista de código ▪ Permite ver y editar HTML, CSS, Java script u otro código de programas externos  Vista de diseño ▪ Permite editar y ver la página tal y como aparecerá en el navegador  Vista de código y diseño ▪ Permite ver al mismo tiempo las vistas de código y diseño
  10. 10.  Modifican la página dinámicamente el código que cambiará a medida que el usuario interactúe con la página.  Vista en vivo: ▪ Permite ver el diseño de la página tal y como aparecerá cuando lo usuario interactúen con el navegador ▪ No es editable, pero al edita la vista de código se actualiza la visa en vivo.  Vista de código en vivo ▪ Permite ver el código de la página tal y como aparecerá cuando el usuario interactúe con el navegador, ç ▪ Sólo esta disponible cuando la visa en vivo esta activada y no es editable.
  11. 11.  Cuando la ventana de documento está maximizada, aparecen pestañas con los nombres de los documentos abiertos Si ha realizado cambios en alguno de los documento abierto y no los ha guardado, se muestra un asterisco después del nombre del archivo. Para ir de un documento a otro de clic en su ficha.
  12. 12.  Muestra como está organizado el sitio Permite abrir los archivos para:  Editarlos  Publicarlos a un servidor remoto  Borrarlos De forma predeterminada, los archivos se presentan en modo local, pero pueden cambiarse a vista del servidor remoto El panel realiza actualizaciones periódicas de forma automática pero también se pueden hacer de forma manual mediante el botón Actualizar
  13. 13.  Los activos son elementos usados en el sitio:  Imágenes  Colores  Películas Estos pueden:  Almacenarse  Reutilizarse  Actualizarse automáticamente.
  14. 14.  Hipervínculo  Inserta una liga a una página web Vínculo de correo electrónico  Inserta una liga a una dirección de correo Anclaje con nombre  Inserta una liga un lugar específico dentro de la página. Regla horizontal  Inserta una línea para separar visualmente dos secciones de la página. Tabla Insertar etiqueta DIV Imágenes
  15. 15.  Media  Inserta objetos como flash, shockwave, applets y activex Widget Fecha  Inserta la fecha actual, con la opción de actualizarla automáticamente cuando se salve el documento. Server-Side Include  Utiliza un marcador de posición para código comúnmente utilizado, que puede ser reusado por varias páginas del sitio. El código es almacenado en el servidor. Comentario  Inserta un comentario, el cual no se verá en la página web.
  16. 16.  Head  Inserta palabras clave, meta tags, descripciones de página y otra información del documento. Script  Inserta o remueve código de lenguajes externos Plantillas  Hace una plantilla basada en el documento actual Selector de etiquetas  Inserta una etiqueta de HTML
  17. 17.  Se pueden insertar tablas y elegir entre dos modalidades  Estándar ▪ Despliega una tabla como retícula de líneas  Tabla ampliada ▪ Añade celdas de relleno y espacio entre celdas de la tabla ▪ Además de incrementar el borde de la tabla
  18. 18.  Insertar etiqueta Div  Para crear un contenido en un bloque Dibujar Div AP  Inserta contenido en bloque con una posición absoluta para mantenerlo en un lugar específico dentro de la página Barra de menú de Spry  Inserta una navegación de botones con menús y submenús que se despliegan cuando se pasa el mouse por encima de cada uno de los botones Paneles en fichas de Spry  Inserta fichas en las que se puede dar clic para revelar su contenido
  19. 19.  Acordeón de Spry  Inserta un panel que puede esconder o revelar una gran cantidad de contenido cuando se hace clic sobre una penstaña Panel que puede contraerse de Spry  Inserta una serie de paneles que se contraen para almacenar mucha información en poco espacio. iFrame  Inserta un bloque de contenido que se despliega en el navegador como un documento html separado Marcos  Inserta un marco
  20. 20.  El panel insertar es el único que:  Se puede arrastrar fuera de su posición predeterminada de acoplamiento  Se puede colocar en posición horizontal en la parte superior de la ventana del documento, al hacerlo cambia a una barra de herramientas.
  21. 21.  Puede ver y cambiar una variedad de propiedades para el objeto o texto seleccionado Se encuentra en el borde inferior del espacio de trabajo Puede desacoplarse y convertirse en panel flotante
  22. 22.  Modo Actual  Permite revisar las reglas y propiedades CSS aplicadas al elemento seleccionado en la página.  Cuenta con tres secciones: ▪ Resumen de selección ▪ Muestra las propiedades de CSS en la selección actual del documento. ▪ Reglas ▪ Muestra el elemento al que afectan las propiedades seleccionadas ▪ Propiedades ▪ Permite editar las propiedades CSS de la regla aplicada a la selección
  23. 23.  Modo Todo  Permite revisar todas las reglas y propiedades que afectan al documento. Cuenta con dos secciones: ▪ Todas las reglas ▪ Muestra una lista de reglas definidas para el documento actual y para las hojas de estilos adjuntas ▪ Propiedades ▪ Permite editar las propiedades CSS para las reglas seleccionadas del panel: todas las reglas

×