La interfaz de dreamweaver cs5

23
La interfaz de Dreamweaver cs5 Por: Rodrigo Pérez

description

Elementos de la interfaz de dreamweaver cs5

Transcript of La interfaz de dreamweaver cs5

Page 1: La interfaz de dreamweaver cs5

La interfaz de Dreamweaver cs5

Por: Rodrigo Pérez

Page 2: La interfaz de dreamweaver cs5

Espacio de trabajo

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

Page 3: La interfaz de dreamweaver cs5

Áreas más utilizadas

La Ventana del documento El Panel Insertar Los paneles El inspector de propiedades

Page 4: La interfaz de dreamweaver cs5

Elementos principales del espacio de trabajo

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

Page 5: La interfaz de dreamweaver cs5

Elementos principales del espacio de trabajo

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.

Page 6: La interfaz de dreamweaver cs5

Elementos principales del espacio de trabajo

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.

Page 7: La interfaz de dreamweaver cs5

Elementos principales del espacio de trabajo

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.

Page 8: La interfaz de dreamweaver cs5

Espacios de trabajo

Son paneles pre-ordenados de manera óptima para tareas específicas o estilos de trabajo

Sirven para administrar los paneles

Page 9: La interfaz de dreamweaver cs5

Ventana del documento

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

Page 10: La interfaz de dreamweaver cs5

Vistas relativas al código 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.

Page 11: La interfaz de dreamweaver cs5

Ventana del documento

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.

Page 12: La interfaz de dreamweaver cs5

Panel de archivos

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

Page 13: La interfaz de dreamweaver cs5

Panel de activos

Los activos son elementos usados en el sitio: Imágenes Colores Películas

Estos pueden: Almacenarse Reutilizarse Actualizarse automáticamente.

Page 14: La interfaz de dreamweaver cs5

Categoría común del panel insertar

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

Page 15: La interfaz de dreamweaver cs5

Categoría común

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.

Page 16: La interfaz de dreamweaver cs5

Categoría común

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

Page 17: La interfaz de dreamweaver cs5

Categoría diseño del panel de insertar

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

Page 18: La interfaz de dreamweaver cs5

Categoría diseño

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

Page 19: La interfaz de dreamweaver cs5

Categoría diseño

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

Page 20: La interfaz de dreamweaver cs5

Propiedad importante

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.

Page 21: La interfaz de dreamweaver cs5

El inspector de propiedades

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

Page 22: La interfaz de dreamweaver cs5

Opciones del Panel Estilos CSS 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

Page 23: La interfaz de dreamweaver cs5

Opciones del Panel Estilos CSS

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