Post on 13-Jun-2015
description
transcript
La interfaz de Dreamweaver cs5
Por: Rodrigo Pérez
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
Áreas más utilizadas
La Ventana del documento El Panel Insertar Los paneles El inspector de propiedades
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
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.
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.
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.
Espacios de trabajo
Son paneles pre-ordenados de manera óptima para tareas específicas o estilos de trabajo
Sirven para administrar los paneles
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
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.
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.
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
Panel de activos
Los activos son elementos usados en el sitio: Imágenes Colores Películas
Estos pueden: Almacenarse Reutilizarse Actualizarse automáticamente.
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
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.
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
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
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
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
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.
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
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
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