Elementos de la interfaz de dreamweaver cs5

1. Por: Rodrigo Pérez

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.  La Ventana del documento
 El Panel Insertar
 Los paneles
 El inspector de propiedades

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.  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.  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.  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.  Son paneles pre-ordenados de manera
óptima para tareas específicas o estilos de
trabajo
 Sirven para administrar los paneles

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.  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.  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.  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.  Los activos son elementos usados en el sitio:
 Imágenes
 Colores
 Películas
 Estos pueden:
 Almacenarse
 Reutilizarse
 Actualizarse automáticamente.

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