dreamweaver
Content
ADOBE DREAMWEAVER CS5
CAPACITACIÓN 2010
02
INTRODUCCIÓN
Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual. Además 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 fácilmente de espacio de trabajo y adaptar los paneles de forma rápida y cómoda. Esta nueva interfaz es muy parecida a los demás programas de Adobe, como Photoshop, Illustrator, etc. Existen distintos espacios de trabajo adecuados para cada ocasión (clásico, programador, diseñador, etc. ) pero también 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 veríamos la página en un navegador. Si hemos incluido elementos interactivos en nuestra página, como menús desplegables, menús tipo acordeón, widgets, etc, podremos interactuar con ellos en la vista en vivo, de la misma forma que lo haríamos en un navegador. Inspector de propiedades CSS: El hasta ahora Inspector de propiedades, queda dividido en propiedades HTML (el que conocíamos de otras versiones) y CSS. Éste último nos permite crear y editar nuestros estilos de forma cómoda 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á 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, como veremos más adelante.
04
LAS BARRAS
La barra de la aplicación.
La barra la aplicación es una novedad en Dreamweaver CS5. 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, que ya veremos.
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, o acceder a otras acciones haciendo clic con el botón derecho, como Cerrar otros archivos. Dreamweaver CS5 añade una novedad. 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.
05
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. 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. La barra de herramientas de documento.
La barra de herramientas de documento 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, 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 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.
07
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. Como vemos en las imágenes, 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
1
Abrir Dreamweaver y crear un documento nuevo, seleccionar la Categoría Página básica, HTML. Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.
2
Una vez introducido el texto, vas a modificar el título y el color de fondo del documento. Para ello debes hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página. Entonces se abrirá una ventana como la que aparece más 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 botón Aceptar.
4
Cambia el Título por Mi primera página.
5
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 línea de texto. En primer lugar debes situar el cursor al final de la segunda línea y pulsar un intro (Enter) para ir a una nueva línea. Después debes dirigirte al menú Insertar, a la opción Imagen. En la nueva ventana que aparece, deberás buscar la imagen y después 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 línea de texto y en el inspector de propiedades pulsa HTML y cambia el Formato por Encabezado 1.
7
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 diseño de la página Web y reducen el tamaño del archivo. Selecciona la primera línea. En Regla de destino selecciona Estilo en línea, para aplicar el formato solo al texto seleccionado. También aplica el estilo de Fuente Arial, Helvetica, sans-serif, color azul #009 y centra el texto, tal y como muestra la imagen siguiente:
8
Selecciona la segunda línea de texto, y seleccionando como antes < estilo en línea >, marca los botones para ponerlo en negrita y cursiva respectivamente. Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrar es el contenido del párrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos aparece la jerarquía de etiquetas. Haz clic sobre p. Ahora, centra el párrafo como hemos visto hasta ahora.
11
9 Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambia el panel de Propiedades a las propiedades de HTML. En el campo Vínculo, escribe la URL de la página a enlazar, como se ve en la imagen:
10 Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo,
desde la opción Guardar.
Puedes llamar al documento como lo desees, pero la extensión 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 debería quedar así:
CAPACITACIÓN 2010
02
INTRODUCCIÓN
Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual. Además 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 fácilmente de espacio de trabajo y adaptar los paneles de forma rápida y cómoda. Esta nueva interfaz es muy parecida a los demás programas de Adobe, como Photoshop, Illustrator, etc. Existen distintos espacios de trabajo adecuados para cada ocasión (clásico, programador, diseñador, etc. ) pero también 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 veríamos la página en un navegador. Si hemos incluido elementos interactivos en nuestra página, como menús desplegables, menús tipo acordeón, widgets, etc, podremos interactuar con ellos en la vista en vivo, de la misma forma que lo haríamos en un navegador. Inspector de propiedades CSS: El hasta ahora Inspector de propiedades, queda dividido en propiedades HTML (el que conocíamos de otras versiones) y CSS. Éste último nos permite crear y editar nuestros estilos de forma cómoda 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á 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, como veremos más adelante.
04
LAS BARRAS
La barra de la aplicación.
La barra la aplicación es una novedad en Dreamweaver CS5. 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, que ya veremos.
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, o acceder a otras acciones haciendo clic con el botón derecho, como Cerrar otros archivos. Dreamweaver CS5 añade una novedad. 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.
05
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. 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. La barra de herramientas de documento.
La barra de herramientas de documento 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, 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 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.
07
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. Como vemos en las imágenes, 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
1
Abrir Dreamweaver y crear un documento nuevo, seleccionar la Categoría Página básica, HTML. Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.
2
Una vez introducido el texto, vas a modificar el título y el color de fondo del documento. Para ello debes hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página. Entonces se abrirá una ventana como la que aparece más 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 botón Aceptar.
4
Cambia el Título por Mi primera página.
5
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 línea de texto. En primer lugar debes situar el cursor al final de la segunda línea y pulsar un intro (Enter) para ir a una nueva línea. Después debes dirigirte al menú Insertar, a la opción Imagen. En la nueva ventana que aparece, deberás buscar la imagen y después 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 línea de texto y en el inspector de propiedades pulsa HTML y cambia el Formato por Encabezado 1.
7
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 diseño de la página Web y reducen el tamaño del archivo. Selecciona la primera línea. En Regla de destino selecciona Estilo en línea, para aplicar el formato solo al texto seleccionado. También aplica el estilo de Fuente Arial, Helvetica, sans-serif, color azul #009 y centra el texto, tal y como muestra la imagen siguiente:
8
Selecciona la segunda línea de texto, y seleccionando como antes < estilo en línea >, marca los botones para ponerlo en negrita y cursiva respectivamente. Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrar es el contenido del párrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos aparece la jerarquía de etiquetas. Haz clic sobre p. Ahora, centra el párrafo como hemos visto hasta ahora.
11
9 Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambia el panel de Propiedades a las propiedades de HTML. En el campo Vínculo, escribe la URL de la página a enlazar, como se ve en la imagen:
10 Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo,
desde la opción Guardar.
Puedes llamar al documento como lo desees, pero la extensión 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 debería quedar así:
