10

2 reconociendo entorno gráfico

Embed Size (px)

Citation preview

Page 1: 2 reconociendo entorno gráfico
Page 2: 2 reconociendo entorno gráfico

Pantalla inicialAl arrancar Dreamweaver aparece una pantalla inicial como ésta, la pantalla que se muestra a continuación puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento y dónde veremos mas adelante.

ENTORNO ENTORNO GRÁFICOGRÁFICO

Page 3: 2 reconociendo entorno gráfico

BARRASBARRAS

Barra de la aplicaciónSi tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen superior. Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line.

MenúsBotones ConmutadorCaja de búsquedas

Page 4: 2 reconociendo entorno gráfico

Pestañas de documentoCada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar.

Barra de estadoEsta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo. A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha encontramos las herramientas de Selección, Mano (para desplazarse) y Zoom. Y otros datos como el tamaño de la ventana, el tamaño de la página o su codificación.

Page 5: 2 reconociendo entorno gráfico

Barra de herramientas estándarLa barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer.

Barra de herramientas de documentoContiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa.

Page 6: 2 reconociendo entorno gráfico

Barra de representación de estilosEsta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan de eso. En esta nueva versión se han añadido más opciones, como las de ver los estilos que dependen de pseudo clases activas, como cuando el cursor está sobre un elemento.

Barra de navegación con navegadorEsta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas de nuestro sitio, aunque sólo tiene sentido con la Vista en vivo.

Page 7: 2 reconociendo entorno gráfico

Vista de diseñoLa vista Diseño permite trabajar con el editor visual. Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.

VISTAS DE UN VISTAS DE UN DOCUMENTODOCUMENTO

Page 8: 2 reconociendo entorno gráfico

Vista CódigoLa vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. No permite tener directamente una referencia visual de cómo va quedando el documento según se va modificando el código.

Page 9: 2 reconociendo entorno gráfico

Vista DividirLa vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona izquierda muestra el código fuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.

Page 10: 2 reconociendo entorno gráfico

http://marinvirtualtech.host22.com

/