Qué es Dreamweaver CS5
Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales.
La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como ésta,
vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) 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.
Las barras
• La barra de la aplicación.
Barra de aplicación
La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si 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.
Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre la vista de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador de sitios.
Clásico
Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es la configuración del entorno (paneles visibles y su disposición) que podemos guardar y cargar.
Los menús, están agrupados en categorías.
Barra de menú
Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a través de los menús, aunque en ocasiones nos envíen a los paneles.
• Las pestañas de documento.
Cada 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. Podemos cerrar cada documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botón derecho, como Cerrar otros archivos.
Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo.
• La barra de estado.
Esta 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.
Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que podemos ver u ocultar desde el menú Ver → Barras de herramientas.
• La barra de herramientas estándar.
La 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. Esta barra puede ser muy útil, pero en realidad casi todo el mundo usa esos comandos directamente con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.)
• La barra de herramientas de documento.
La contiene 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.
• La barra de representación de estilos.
Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del 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.
• La barra de navegación con navegador.
Esta 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.
Inspectores y paneles
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado, mientras que el panel nos da acceso a opciones generales.
A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes.
• El inspector de Propiedades
El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrará su ubicación, dimensiones, peso, clase, etc...
Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la página Web que estemos diseñando.
• El panel Insertar.
En el panel Insertar, encontramos todos los elementos que podemos encontrar en el menú Insertar, clasificados en categorías. Podemos emplearlo para insertar imágenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.
Vistas de un documento
Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra de documento:
Vistas tradicionales
• La vista Diseño
La vista Diseño permite trabajar con el editor visual.
Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.
• La vista Código
La 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.
El código que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseño.
1. Los botones para minimizar y maximizar la ventana del programa Dreamweaver se encuentran en la Barra Insertar.
a) Verdadero.
b) Falso.
2. Las vistas del documento pueden cambiarse a través del panel Propiedades.
a) Verdadero.
b) Falso.
3. La pestaña Favoritos en la barra Insertar puede personalizarse para mostrar unos u otros iconos.
a) Verdadero.
b) Falso.
4. Las barras de herramientas pueden ser flotantes.
a) Verdadero.
b) Falso.
5. La apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado.
a) Verdadero.
b) Falso.
6. Los paneles e inspectores se muestran y ocultan a través del menú ...
a) Insertar.
b) Comandos.
c) Ventana.
7. En el panel de Insertar...
a) se puede cambiar las vistas del documento.
b) los botones están clasificados según su categoría.
c) se configuran las propiedades del objeto seleccionado.
d) respuesta
8. Se puede trabajar con el editor visual mediante las vistas...
a) diseño.
b) código.
c) vista en vivo.
d) cualquiera de las anteriores.
9. El botón sirve para
a) pasar a la vista código.
b) pasar a la vista código y diseño.
c) pasar a la vista diseño.
d) pasar a la vista código en vivo.
10. La vista diseño...
a) es la vista predeterminada en el entorno de trabajo clásico.
b) es la que se suele utilizar habitualmente.
c) las dos afirmaciones anteriores son verdaderas.
d) las tres afirmaciones anteriores son falsas.
Inspectores y paneles
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado, mientras que el panel nos da acceso a opciones generales.
A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes.
• El inspector de Propiedades
El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrará su ubicación, dimensiones, peso, clase, etc...
Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la página Web que estemos diseñando.
• El panel Insertar.
En el panel Insertar, encontramos todos los elementos que podemos encontrar en el menú Insertar, clasificados en categorías. Podemos emplearlo para insertar imágenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.
Vistas de un documento
Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra de documento:
Vistas tradicionales
• La vista Diseño
La vista Diseño permite trabajar con el editor visual.
Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.
• La vista Código
La 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.
El código que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseño.
EVALUACIÓN
1. Los botones para minimizar y maximizar la ventana del programa Dreamweaver se encuentran en la Barra Insertar.
a) Verdadero.
b) Falso.
2. Las vistas del documento pueden cambiarse a través del panel Propiedades.
a) Verdadero.
b) Falso.
3. La pestaña Favoritos en la barra Insertar puede personalizarse para mostrar unos u otros iconos.
a) Verdadero.
b) Falso.
4. Las barras de herramientas pueden ser flotantes.
a) Verdadero.
b) Falso.
5. La apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado.
a) Verdadero.
b) Falso.
6. Los paneles e inspectores se muestran y ocultan a través del menú ...
a) Insertar.
b) Comandos.
c) Ventana.
7. En el panel de Insertar...
a) se puede cambiar las vistas del documento.
b) los botones están clasificados según su categoría.
c) se configuran las propiedades del objeto seleccionado.
d) respuesta
8. Se puede trabajar con el editor visual mediante las vistas...
a) diseño.
b) código.
c) vista en vivo.
d) cualquiera de las anteriores.
9. El botón sirve para
b) pasar a la vista código y diseño.
c) pasar a la vista diseño.
d) pasar a la vista código en vivo.
10. La vista diseño...
a) es la vista predeterminada en el entorno de trabajo clásico.
b) es la que se suele utilizar habitualmente.
c) las dos afirmaciones anteriores son verdaderas.
d) las tres afirmaciones anteriores son falsas.
