cursos online, formacion on-line, teleformación, Elearning, Cursos online de ofimática, diseño gráfico, web, gestión, idiomas, programacion - ADR Formación

Introducción a Dreamweaver

Explicación de la Metodología del curso.

Este curso está dirigido fundamentalmente a diseñadores, si es posible con algún conocimiento del lenguaje HTML, profesionales con la intención de iniciarse en las herramientas y método de trabajo de este programa para el diseño de páginas Web.

De este modo, obviaremos conceptos básicos del mundo de Internet, eso sí, sin olvidarnos de la base de toda página Web: el lenguaje HTML, el lenguaje utilizado para crear páginas Web. Se trata de un lenguaje de etiquetas que define el aspecto de las páginas. Una página Web está compuesta por un archivo de texto plano, con extensión htm o html, escrito en lenguaje HTML, y todos los archivos multimedia relacionados con él.

Para crear páginas Web solamente necesitaríamos un editor de texto simple, como el Bloc de Notas, y muchos conocimientos de lenguaje HTML, o muy pocos conocimientos de este lenguaje y aprender el manejo de programas de diseño Web gráficos como Dreamweaver. Estos programas traducen a código HTML todas las actuaciones del diseñador.

Como veremos, el código HTML tiene una importancia especial para el uso práctico y cotidiano de Dreamweaver. Es útil tener cierto conocimiento básico de las etiquetas más importantes de las que se compone el lenguaje HTML. Así pues, al inicio de cada lección daremos unas Referencias de HTML. Estas contendrán una descripción de las etiquetas de HTML relativas al contenido de la lección, es decir, la traducción a código HTML de lo que vayamos haciendo como diseñadores en Dreamweaver.

Tengamos o no conocimientos de lenguaje HTML, interesa que se estudie al comienzo de cada lección estas referencias, ya sea para aprenderlas por primera vez o recordarlas de nuevo. De esta forma tendremos una comprensión completa de lo que veamos en esa lección.

El método de trabajo a través de las lecciones nos llevará desde el nacimiento de una página Web hasta su publicación y mantenimiento posterior, pasando por su proceso de desarrollo paso a paso de mano de los ejercicios planteados. Desarrollaremos nuestro propio sitio Web, implementándolo lección tras lección.

¿Qué es Dreamweaver MX?

Dreamweaver es una herramienta desarrollada por diseñadores Web para diseñadores Web. No sólo nos permitirá diseñar los contenidos de un Web, sino que podremos publicarlos, determinar cómo se comportaran en Internet y realizar su mantenimiento, todo ello de una forma integral. Es el primer programa de desarrollo Web que aprovecha la capacidad de las ultimas generaciones de exploradores. Pertenece a una gran familia de programas de diseño producidos por la empresa Macromedia: Flash, Fireworks, ColdFusion, Director, etc. Al pertenecer a la misma familia, Dreamweaver asimila perfectamente el trabajo en paralelo con cualquier de estos programas.

Estos programas también tienen versiones MX, como Dreamweaver. Esta es una versión perfeccionada para un uso profesional más fácil e intuitivo. Todas las versiones MX tienen un diseño de pantalla parecido

Instalación.

Dreamweaver se instala desde el CD de programa ejecutando el propio Instalador de Dreamweaver MX.

El programa de instalación inicia un asistente que permite mediante varios pasos realizar la instalación del programa.

Descripción de la Pantalla.

El formato de trabajo de Dreamweaver MX (como todas las versiones MX) combina una serie de ventanas, paletas y solapas para conseguir que el proceso sea lo más fluido posible.

El aspecto de la pantalla de Dreamweaver nada más abrirlo se compone de los siguientes elementos:

  • La Ventana Bienvenido: aparece la primera vez que iniciamos el programa. Ofrece sugerencias para la configuración del espacio de trabajo para distintos fines e información sobre nuevas funciones para aquellos que hayan trabajado con antiguas versiones de Dreamweaver
  • La Barra de título: en la parte superior de la ventana de programa, muestra el nombre del Web abierto actualmente y los botones minimizar, restaurar y cerrar.
  • La Barra de menús: situada bajo la barra de título, permite acceder a todas las opciones del programa a través de sus menús.
  • la Ventana del documento: es el área principal de trabajo. Aquí es donde crearemos nuestras páginas Web. Esta es una ventana que se puede minimizar, maximizar y restaurar.
¡Atención! Una vez que se maximiza la ventana de documento ¿desaparecen los botones de minimizar, restaurar y cerrar? ¿Dónde están? Tranquil@, están debajo de los mismos botones de la barra de título.
  • Barra de Herramientas Documento:


    Justo encima de la ventana de documento. Dreamweaver puede presentar dos barras de herramientas: Documento y Estándar. Esta que vemos por defecto es la de Documento. Actúa directamente sobre la ventana de documento:
    • Para mostrar la vista del código HTML de la página Web
    • Para mostrar un a vista conjunta del código y el diseño
    • Para mostrar la vista del diseño nuestro documento
    • Para dar un título a nuestra pagina Web en el cuadro de texto "Titulo"
  • Barra de Herramientas Estándar:


    Se muestra y oculta seleccionando Ver>Barras de Herramientas>Estándar. Presenta las opciones básicas de gestión de ficheros junto con el uso del portapapeles y las opciones de deshacer y rehacer. En el caso de la imagen esta barra está oculta.
  • Panel Insertar


    Desde este panel y sus solapas, como desde su menú paralelo Insertar, introduciremos los elementos más utilizados para el diseño de los objetos de una página Web.
  • Inspector de Propiedades


    Es la herramienta principal para determinar los detalles de un objeto o texto seleccionado. El contenido de este panel varía dependiendo del objeto seleccionado en la ventana de documento (texto, imagen, tabla, ...), y así modificar sus atributos.
  • Menú de Paneles

    Ocupa la parte derecha de la pantalla y está diseñado para contener los paneles más utilizados por el usuario. Su uso es muy cómodo gracias a que se puede ocultar y visualizar todo el menú con solo pulsar en el botón situado en medio de la barra que lo separa del resto de la pantalla.
  • Barra de Estado


    Situada debajo de la ventana de documento. A la izquierda de la barra tenemos el Selector de etiquetas HTML. Este es de gran utilidad. Si el documento es una página vacía solo se verá la etiqueta <body>. Pero a medida que la pagina se complique el Selector ampliará la lista de etiquetas según donde se sitúe el cursor. Muestra las etiquetas que rodean la posición del cursor. Como su nombre indica, hace algo más que indicar la posición en el documento. Mediante él, se puede seleccionar rápidamente cualquier elemento que rodee al cursor en uso, para modificarlo o eliminarlo.

    A la derecha de la barra de estado podemos ver información sobre el documento.
    • Tamaño de la ventana de diseño del documento, en píxeles.
    • Indicador de descarga, que nos informa del tamaño del documento y el tiempo de descarga.
¡Atención! Una de las herramientas estrella de Dreamweaver es el Selector de etiquetas. En la barra de estado siempre aparecen las etiquetas que rodean al cursor. Basta con picar en una de ellas para seleccionar el fragmento de código correspondiente en la ventana de trabajo.

 

Descripción de la pantalla de Dreamweaver y de las vistas de un documento,

Configuración de la pantalla.

Al abrir Dreamweaver MX por primera vez se podrá elegir entre dos formas de configurar el espacio de trabajo.

Como se puede leer en el cuadro de diálogo, da igual qué configuración de espacio hayamos elegido ya que se puede cambiar. Es aconsejable la opción de espacio de trabajo de Dreamweaver MX para una mejor visualización. Para volver a elegir una configuración de espacio diferente seguiremos los siguientes pasos:

  1. seleccionamos Edición>Preferencias.
  2. seleccionamos la Categoría General y hacemos clic en el botón Cambiar espacio de trabajo... y elegimos la opción que se desee.

Barras de herramientas.

  • Como ya dijimos, para visualizar u ocultar una barra de herramientas, seleccionamos la opción Ver>Barras de herramientas y hacemos clic sobre la barra que se quiere visualizar u ocultar.
  • Para mover una barra de herramientas realizamos un arrastre sobre la línea vertical de control situada a la izquierda de la barra . Si la barra está flotando hacemos el arrastre sobre la barra de título de la misma.
  • Si una barra de herramientas es flotante, la podemos fusionar con los márgenes superior o inferior de la ventana de documento sin mas que arrastrarla hasta su nueva posición.
Configuración de pantalla I

Paneles.

Todos los paneles se minimizan y maximizan, solo tenemos que pulsar sobre la flecha situada a la izquierda del título del panel.

El panel Insertar y el inspector de Propiedades tienen una relevancia especial. No se pueden incluir en el Menú de paneles y se pueden ocultar y visualizar directamente desde la opción Ventana.

El Menú de paneles se puede configurar a placer por cada usuario para que aparezcan los paneles más útiles. Para moverlos hemos de arrastrarlos desde la zona punteada de la esquina superior izquierda de cada panel . Una vez fuera de su ubicación pasan a ser flotantes y se pueden cerrar fácilmente.
Para volver a abrirlos no encontraremos sus nombres en la opción Ventana. Los paneles del Menú se estructuran en solapas. Son esas solapas las que podemos visualizar desde Ventana, y con ellas los paneles que las contienen.

Por ejemplo; el panel Archivos contiene las solapas "Sitio" y "Activos". Si hubiera ocultado el panel Archivos y quisiera volver a abrirlo ¿Qué hago? Selecciono la opción Ventana>Sitio y se abriría la solapa (Sitio) dentro del panel que la contiene (Archivos).

¡Truco! Para visualizar y ocultar TODOS los paneles que tengamos abiertos: Ventana>Ocultar paneles, o ,más rápidamente, F4

Podemos crearnos nuevos Paneles e incluso agrupar unas determinadas solapas en un panel u otro. Para incluir una solapa en un determinado panel actuaremos como sigue:

  1. Seleccionamos la solapa que queremos incluir en otro panel.
  2. Pulsamos sobre el icono que aparece en la esquina superior derecha de cada panel.
  3. Del menú que se despliega elegimos la opción Agrupar nombre de solapa con y elegimos el panel en el cual se agrupará.
  4. Si queremos crear un panel elegiremos la opción Nuevo grupo de paneles.

Haciendo click sobre el icono de la esquina superior derecha del panel, aparecen todas las opciones de configuración del mismo.

Si un panel es flotante, lo podemos integrar en el menú de paneles arrastrándolo desde la zona punteada de la esquina superior izquierda del mismo

Configuración de pantalla II (Menú de paneles)

Todos los derechos reservados © Copyright 2004 ADR Infor S.L.
Contacto: soporte@adrinfor.com