MACROMEDIA DREAMWEAVER

Generalidades - Entorno

Ing. Luz Rodríguez

  Macromedia Dreamweaver 8 es un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar manualmente el código HTML como si prefiere trabajar en un entorno de edición visual, Dreamweaver le proporciona útiles herramientas que facilitarán la creación Web (Se pueden 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).

Esta presentación es una introducción para utilizar Macromedia Dreamweaver 8, dirigida a los usuarios que no están familiarizados con algún aspecto fundamental de esta aplicación.

CONCEPTO

Se puede accesar de varias maneras:

1- Desde el botón INICIO situado por lo general, en la esquina inferior izquierda de la pantalla. Se debe colocar el cursor y hacer clic sobre él, se desplegará un menú; al colocar el cursor sobre Todos los programas aparece otra lista con los programas que hay instalados en el ordenador, ubica Macromedia (o Adobe si tienes las últimas versiones), seguidamente ubicar Dreamweaver 8, hacer clic sobre él, en ese momento arrancará el programa.

2- Haciendo doble clic sobre el acceso directo, si éste se encuentra en el escritorio .

ACCESAR A DREAMWEAVER

Para Salir o Cerrar Dreamweaver, se puede realizar cualquiera de las siguientes operaciones:

1- Hacer clic en el botón cerrar   2- Pulsar la combinación de teclas ALT + F4.

3- Hacer clic sobre el menú Archivo y elegir la opción Salir.

*** Si existe algún documento que no haya sido guardado antes de cerrar Dreamweaver, se pedirá la confirmación para guardarlo o no.

SALIR DE DREAMWEAVER

ABRIR DOCUMENTO  

Para abrir un documento, puede realizar cualquiera de las siguientes operaciones: 1- Hacer clic en el botón abrir de la barra de herramientas estándar. 

2- Pulsar la combinación de teclas Ctrl + O.

3- Hacer clic sobre el menú Archivo y elegir la opción Abrir.

4- Hacer doble clic sobre el archivo en la ventana del sitio.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.

1- Hacer clic en el botón abrir de la barra de herramientas estándar. 

2- Pulsar la combinación de teclas Ctrl+N.

3- Hacer clic sobre el menú Archivo y elegir la opción Nuevo.

4- Hacer doble clic sobre el archivo en la ventana del sitio.*** Después de esto aparecerá una nueva ventana, en la que deberá elegir la Categoría Página básica, HTML.

ABRIR DOCUMENTO  

Para guardar un documento, puede realizar cualquiera de las siguientes operaciones:

1- Hacer clic en el botón guardar de la barra de herramientas estándar. 

2- Pulsar la combinación de teclas Ctrl + S.

3- Hacer clic sobre el menú Archivo y elegir la opción Guardar.

GUARDAR UN DOCUMENTO

GUARDAR UN DOCUMENTO

Para guardar todos los archivos abiertos, puede realizar cualquiera de las siguientes operaciones:

1- Hacer clic en el botón guardar todo de la barra de herramientas estándar. 

2- Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.

NOTA: Al tener varios documentos abiertos es fácil olvidarse de todos las modificaciones hechas en cada uno de ellos. Se debe tener mucho cuidado al utilizar la opción GUARDAR TODO, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no se utilice esta opción hasta que esté habituado a manejar el programa

Al arrancar Dreamweaver aparece la pantalla inicial, allí se visualizarán diferentes barras y paneles que se describen a continuación.

PANTALLAS, BARRAS, PANELES PRINCIPALES

La Barra de Título

La barra de título contiene el nombre del programa (Macromedia Dreamweaver 8), seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.

La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, se desplegarán las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver.

Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles.

La Barra de Menú

PANTALLAS, BARRAS, PANELES PRINCIPALES

La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Abrir , Guardar , Copiar, Cortar, Pegar, etc.

La Barra de Herramientas Estándar

PANTALLAS, BARRAS, PANELES PRINCIPALES

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no están incluidas en la barra de herramientas estándar. Estas operaciones son las de cambio de vista del documento, vista previa, ejecutar en el navegador, entre otras.

La Barra de Herramientas de Documento

La barra de estado indica en cada momento en qué etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>).

También es posible alternar entre los modos de selección, mano (para arrastrar la página), o zoom. En cualquier momento se puede seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%).

La Barra de Estado

PANTALLAS, BARRAS, PANELES PRINCIPALES

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. 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. Los más importantes son: Inspector de PropiedadesMuestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc. Pulsando sobre el botón se despliega para mostrar más opciones. Este botón se encuentra en la esquina inferior derecha.

PANTALLAS, BARRAS, PANELES PRINCIPALES

Permite insertar elementos en un documento sin la necesidad de recurrir al menú Insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc.

Es posible configurar este panel para que en los botones se muestren los iconos de los objetos, para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez.

PANTALLAS, BARRAS, PANELES PRINCIPALES

Panel de Objetos

En Dreamweaver existen varias maneras de trabajar o visualizar un documento o página web. Se puede cambiar la vista del documento a través de la barra de herramientas de documento.

La vista Diseño permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se suele utilizar habitualmente.

VISTAS DE UN DOCUMENTO

Vista Diseño

VISTAS DE UN DOCUMENTO

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

VISTAS DE UN DOCUMENTO

Vista Dividir

La vista Código y Diseño permite dividir la ventana en dos zonas. La zona superior muestra el código fuente, y la inferior el editor visual.

Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.

A través del menú Ayuda se puede:

1- Acceder al cuadro de diálogo de ayuda muy similar al de Windows donde se puede buscar por temas, por índice o por contenido, si se selecciona la opción Utilización de Dreamweaver o simplemente pulsando F1.

2- Acceder a tutoriales (opción Primeros pasos con Dreamweaver).

3- Abrir el panel Referencia en el que se encontrará la sintaxis y descripción de las etiquetas HTML.

4- Acceder al Centro de servicio técnico de Dreamweaver en la web.

5- Acceder al Foros en línea de Dreamweaver.

OBTENER AYUDA

Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.

Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet. Es conveniente que la página inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica.

CREACIÓN Y CONFIGURACIÓN DE UN SITIO

CREACIÓN Y CONFIGURACIÓN DE UN SITIO

Las características del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda. Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella.

Para la categoría Datos locales: Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local. Después, si se desea, a través de la categoría Mapa de diseño del sitio puede definirse la página principal del sitio, de la que se desplegarán el resto de documentos HTML dentro del sitio; si en la carpeta raíz del sitio existe una página con el nombre index.htm, Dreamweaver la seleccionará por defecto.

*** Estas tres características son las imprescindibles para definir un sitio local.

Después de rellenar los datos se debe pulsar el botón Aceptar y abrir el sitio.

Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar Sitios. Se debe seleccionar el sitio de la lista de sitios que aparece y hacer clic sobre el botón Listo.

También se puede utilizar el panel Archivos, buscar y seleccionar el sitio que se desea abrir en el menú desplegable de la pestaña Archivos.

ABRIR UN SITIO

Es posible visualizar un sitio en el panel Archivos o en una ventana.

El panel Archivos se puede abrir a través del menú Ventana, opción Archivos. También pulsando F8.

Para cambiar de una vista a otra hay que pulsar sobre el botón que aparece en la parte superior del panel y de la ventana. Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o el mapa del sitio.

VISTAS DE UN SITIO

Es conveniente definir sitios homogéneos, es decir, que todas las páginas del mismo tengan o sigan un mismo formato (igual color de fondo, tipo de fuente, etc.)

Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la página.

Este cuadro se puede abrir de tres modos diferentes:1- Pulsar la combinación de teclas Ctrl+J. 2- Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.3- Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual la opción Propiedades de la página.

Las propiedades están organizadas en categorías.

PROPIEDADES DE UN DOCUMENTO

PROPIEDADES DE UN DOCUMENTO

En la categoría Aspecto, se encuentran las propiedades:

Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo. 

Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.

Tamaño: permite definir el tamaño de la letra o fuente.

Color del texto: permite definir es el color de la fuente.

Márgenes: permiten establecer márgenes en el documento.

PROPIEDADES DE UN DOCUMENTO En la categoría Título/Codificación se encuentra la propiedad:

Título: es el título del documento, que aparecerá en la barra de título del navegador y de la ventana de documento de Dreamweaver.

En la categoría Vínculos se encuentran las propiedades:Color de vínculo: es el color de los vínculos, que ayudan al usuario a distinguir entre el texto normal y los vínculos que sirven de enlace a otras páginas.Vínculos visitados: es el color que permite distinguir al usuario si unos vínculos ya han sido visitados o no.Vínculos activos: es el color de los vínculos activos.Estilo subrayado: por defecto, cuando se tiene un texto con un vínculo asociado, el texto aparece subrayado, con esta opción se puede elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.

Para asignar colores es posible desplegar una paleta de colores. Al seleccionar un color de esta paleta, se muestra el valor hexadecimal del color en la parte superior.

Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.

También es posible personalizar los colores a través del botón de la parte superior de la paleta.

ASIGNAR COLORES

Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, Sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvetica.

TRABAJAR CON TEXTO

Tamaño: Permite cambiar el tamaño del texto. El tamaño se puede indicar en diversas unidades, en píxeles, centímetros, etc... Color: Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí, el color del texto por defecto será el negro.

TRABAJAR CON TEXTOEstilo: permite establecer si el texto aparecerá en negrita o en cursiva. A través del menú Texto también se puede, entre otras cosas, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo.

Alinear: A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada.

Lista: Permiten crear listas con viñetas o listas numeradas.

Sangría: Permite sangrar el texto y anular la sangría. La sangría es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto.

ESPERO QUE ESTAS

GENERALIDADES LES SEAN DE

UTILIDAD HASTA LUEGO…