ADOBE DREAMWEAVER CS5

CAPACITACIN 2010

02
INTRODUCCIN

Dreamweaver CS5 es un software fcil de usar que permite crear pginas web profesionales. Las funciones de edicin visual de Dreamweaver CS5 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual. Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

NOVEDADES DE DREAMWEAVER CS5

Nueva interfaz de usuario: Dreamweaver CS5 presenta una nueva interfaz que permite cambiar fcilmente de espacio de trabajo y adaptar los paneles de forma rpida y cmoda. Esta nueva interfaz es muy parecida a los dems programas de Adobe, como Photoshop, Illustrator, etc. Existen distintos espacios de trabajo adecuados para cada ocasin (clsico, programador, diseador, etc. ) pero tambin tenemos la posibilidad de crear el nuestro propio de forma muy sencilla. Vista en vivo: La Vista en vivo nos permite trabajar con una vista real, tal y como veramos la pgina en un navegador. Si hemos incluido elementos interactivos en nuestra pgina, como mens desplegables, mens tipo acorden, widgets, etc, podremos interactuar con ellos en la vista en vivo, de la misma forma que lo haramos en un navegador. Inspector de propiedades CSS: El hasta ahora Inspector de propiedades, queda dividido en propiedades HTML (el que conocamos de otras versiones) y CSS. ste ltimo nos permite crear y editar nuestros estilos de forma cmoda y sencilla.

03
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 ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (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 dnde, como veremos ms adelante.

04
LAS BARRAS

La barra de la aplicacin.

La barra la aplicacin es una novedad en Dreamweaver CS5. Si tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola lnea, si no, ocuparn dos lneas, como en la imagen superior. Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte inferior), varios botones propios de la aplicacin, el conmutador de espacio de trabajo y una caja de bsquedas para obtener ayuda on line. Los botones propios de la aplicacin, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre la vista de diseo o cdigo, acceder a las extensiones que se pueden aadir, o al administrador de sitios, que ya veremos.

Las pestaas de documento

Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos permitir cambiar de uno a otro fcilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el aspa, o acceder a otras acciones haciendo clic con el botn derecho, como Cerrar otros archivos. Dreamweaver CS5 aade una novedad. Debajo de las pestaas encontramos los archivos a que utiliza nuestra pgina, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrar bastante tiempo.

05
La barra de estado Esta barra la encontramos debajo de la ventana de documento, y nos da informacin 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 Seleccin, Mano (para desplazarse) y Zoom. Y otros datos como el tamao de la ventana, el tamao de la pgina o su codificacin. La barra de herramientas estndar.

La barra de herramientas estndar contiene iconos para realizar las acciones ms habituales del men Archivo y Edicin. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el cdigo fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. La barra de herramientas de documento.

La barra de herramientas de documento contiene iconos que nos permiten cambiar entre las distintas vistas de edicin y la vista en vivo, acceder cmodamente al ttulo de la pgina, o realizar las distintas opciones de validacin que nos ofrece el programa. La barra de representacin de estilos.

Esta barra, mucho menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso.

06
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 travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los ms importantes.

El inspector de Propiedades

El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitindonos editarlas, por lo que se convierte en uno de los elementos ms utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrar su ubicacin, dimensiones, peso, clase, etc... Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la pgina Web que estemos diseando.

07
El panel Insertar

En el panel Insertar, encontramos todos los elementos que podemos encontrar en el men Insertar, clasificados en categoras. Podemos emplearlo para insertar imgenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite. Como vemos en las imgenes, es posible configurar este panel para verlo como men, como panel flotante o como una barra de herramientas integrada en la ventana de trabajo.

EJERCICIO N 1

08

Abrir Dreamweaver y crear un documento nuevo, seleccionar la Categora Pgina bsica, HTML. Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.

Una vez introducido el texto, vas a modificar el ttulo y el color de fondo del documento. Para ello debes hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Entonces se abrir una ventana como la que aparece ms abajo.

09
3 En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color azul. Seguidamente pulsa sobre el botn Aceptar.

Cambia el Ttulo por Mi primera pgina.

Ahora vas a insertar una imagen, para insertar la imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en un cd-rom o en un disquete, pero preferiblemente en el disco duro, (seleccionar imagen para el ejemplo). Vamos a insertar la imagen debajo de la segunda lnea de texto. En primer lugar debes situar el cursor al final de la segunda lnea y pulsar un intro (Enter) para ir a una nueva lnea. Despus debes dirigirte al men Insertar, a la opcin Imagen. En la nueva ventana que aparece, debers buscar la imagen y despus seleccionarla.

10
6 Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana. Selecciona la primera lnea de texto y en el inspector de propiedades pulsa HTML y cambia el Formato por Encabezado 1.

Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto mediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre el diseo de la pgina Web y reducen el tamao del archivo. Selecciona la primera lnea. En Regla de destino selecciona Estilo en lnea, para aplicar el formato solo al texto seleccionado. Tambin aplica el estilo de Fuente Arial, Helvetica, sans-serif, color azul #009 y centra el texto, tal y como muestra la imagen siguiente:

Selecciona la segunda lnea de texto, y seleccionando como antes < estilo en lnea >, marca los botones para ponerlo en negrita y cursiva respectivamente. Vamos a centrar tambin la imagen. Para ellos seleccinala. Lo que hay que centrar es el contenido del prrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos aparece la jerarqua de etiquetas. Haz clic sobre p. Ahora, centra el prrafo como hemos visto hasta ahora.

11
9 Por ltimo vamos a crear el enlace. Selecciona el texto de la ltima lnea, y cambia el panel de Propiedades a las propiedades de HTML. En el campo Vnculo, escribe la URL de la pgina a enlazar, como se ve en la imagen:

10 Por ltimo guarda el documento. Ya sabes que puedes hacerlo a travs del men Archivo,

desde la opcin Guardar.

Puedes llamar al documento como lo desees, pero la extensin ha de ser htm o html. Por ejemplo, lo hemos llamado ejercicio1.htm, y la hemos guardado en una carpeta en el escritorio. El ejercicio finalizado debera quedar as: