La interfaz de dreamweaver cs5

3,609 views
3,383 views

Published on

Elementos de la interfaz de dreamweaver cs5

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,609
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×