Adobe Dreamweaver - Componentes y descripción

Adobe Dreamweaver

Si bien se podría diseñar una página WEB en código HTML con cualquier editor de texto, existen programas que facilitan la creación y edición de Sitios Web.

Este es el caso de Dreamweaver.

Es un editor de páginas Web, lo que quiere decir que nos asiste en el diseño de una página web en sus distintos aspectos. La ventaja de Dreamweaver es no tener que saber el código como HTML para poder armar nuestro Sitio Web.

Dreamweaver se considera un editor de páginas web tipo WYSIWYG (what you see is what you get = lo que ves es lo que obtienes) para indicar que se nos va mostrando lo que luego se verá en el navegador, tenemos una vista similar a cómo lo verá un visitante a nuestra página, cuando ya esté Publicada.

Se puede diseñar en varios entornos de trabajo: Diseño, Código y Dividir

En el modo Diseño, sólo veremos lo que vamos diseñando, el resultado “visible”.

En el modo Código, veremos las líneas de código fuente que genera el aspecto de la página que podemos ver luego.

En el modo Dividir, se separará la pantalla en dos paneles, veremos el código y el diseño en tiempo real.

Comencemos por lo principal.

La ventana de presentación de Dreamweaver nos mostrará varias opciones para Abrir, o crear desde cero una página Web.

 

 

De las opciones de “Crear Nuevo” elegiremos HTML, que es el lenguaje que usaremos en nuestra página para comenzar.

De las opciones emergentes elegimos “Ninguno” para comenzar con una página en blanco, sin ningún diseño aplicado de antemano.

Componentes de Dreamweaver:

Barra de título: Muestra el programa y el nombre del archivo en el que estamos trabajando.

Barra de Menús: Muestra los menús disponibles para mas opciones.

Barra del Documento: Posee opciones como el guardado y demás que se refieren al documento que está abierto en el momento.

Panel de Objetos: Es el panel de categorías de opciones diferentes según lo que se quiera configurar.

El inspector de propiedades nos irá mostrando las propiedades del elemento o sector que seleccionemos dentro del área de trabajo.

Por ejemplo, si no tenemos nada seleccionado, nos mostrará las propiedades de nuestro documento, el cual por el momento no tiene ningún nombre. Se nos presentará como "Untitled-1" (untitled-2,untitled-3, ...) y consecutivamente si seguimos creando documentos html sin darle nombre aún.

Para comenzar tenemos que aprender a usar las opciones principales, como ser abrir, guardar,guardar como

Al no haber guardado nunca este documento, el botón Guardar de la barra del documento nos mostrará la ventana de diálogo donde indicaremos lugar y nombre de nuestro documento.

Antes de llegar a este punto, necesitamos tener armada una serie de carpetas, o al menos 1 carpeta para designar como la carpeta Raiz de nuestro futuro Sitio Web.

Este paso se puede realizar en el momento, pero dependerá de algunas indicaciones que daré en clase para que todos sigan los mismos pasos y obtengan los resultados deseados.

Dicho esto, volviendo a Dreamweaver podemos indicar el nombre de la primera página a crear, la cual idealmente se llamará "Index" y .html es la extension por defecto al haber seleccionado esa opción en la ventana de bienvenida.

Notamos que el nuevo nombre de nuestro documento aparecerá en la pestaña de Dreamweaver

Ya tenemos el nombre del documento y observando vemos que el Panel Archivos a la derecha ya lo muestra, pero dentro de una carpeta llamada "Sitio Sin nombre"

Esto se debe a que Dreamweaver no maneja los documentos de manera independiente, sino que tiene en cuenta su relación respecto a un directorio de carpetas que define el sitio Web.

Tenemos que definir el sitio Web.

El Menú "Sitio" me servirá para las opciones relacionadas al Conjunto de páginas, a su directorio = Al Sitio Web.

Ingresamos en Nuevo Sitio (también válido Administrar Sitio)

Nos muestra el cuadro para completar el nombre de nuestro sitio. Aquí es donde cada trabajo puede diferir o ser el mismo, dependiendo de la consigna de clase.

Supongamos que al sitio lo llamamos "Evento's"

Debajo tenemos la ruta para ubicar la carpeta que contendrá el sitio completo. Llegado a este punto es obligatorio que se haya armado la estructura de carpetas, o la configuración estará incorrecta de aquí en adelante.

Me tomé la libertad de crear 2 páginas más y 1 carpeta más, observen la imagen:

Las páginas "Contacto" y "Galeria" serán las otras 2 páginas Ejemplo para trabajar con Dreamweaver. Index será la carátula, la página de Inicio o HomePage 

La carpeta imagenes (sin acento) será la que luego contendrá los archivos de imagen (fotos, etc.) que irán en nuestro sitio Web.

Evento's, nuestro sitio web de ejemplo, será una página que promociona organización de eventos, fiestas varias como casamientos, cumpleaños, bautismos, fiestas empresariales, etc.

De modo que las imágenes estarán relacionadas a dicho tema. Como consigna para comenzar, sería útil que consigan al menos 10 imágenes relacionadas a términos como "Salón de Fiestas", "Músicalización", "Cattering"  y frases similares del mismo rubro.

Una vez conseguidas las imágenes, las guardamos en la carpeta Imágenes, o las copiamos ahí si es que las descargamos en otra ubicación primeramente.

Escribir en Dreamweaver:

Ningún secreto, es como escribir en Word o un editor de texto regular. Basta con chequear que estemos trabajando en el modo "diseño" para comenzar a tipear palabras.

De momento pondremos títulos a las 3 páginas que hemos creado:

He escrito la palabra en mayúsculas y luego de seleccionarla, usé el botón "B" para remarcarla en negrita, y de la lista "Párrafo" elegi "Encabezado1"

Hay varias opciones dentro de la configuración de formato en HTML para el texto.

Haré lo mismo con las siguientes páginas:

y...

En cada caso vamos usando el botón Guardar e intercambiando con las solapas entre los documentos que tenemos. Esto no es obligatorio, podemos usar el boton "X" que aparece al lado del nombre del documento en cuestión para cerrarlo, pero deberiamos volverlo a abrir, y para este caso resulta más comodo de la siguiente manera.

CTRL+ TAB para intercambiar entre solapas de documentos.

CTRL+ S para guardar los cambios que vamos haciendo.

El botón Guardar Todo sirve para aplicar cambios en cada documento de cada solapa que esté abierta.

Bien, restaría solamente el material de contenido para nuestro sitio y completar cada página con información, para luego darle formato.

A este proceso le antecede el armar el "Esqueleto" la estructura de cada página, puesto que no podemos simplemente dejar párrafos de texto e imagenes sueltas una debajo de la otra.

Una propiedad MUY IMPORTANTE de una página Web es la ACCESIBILIDAD

Una propiedad MUY IMPORTANTE  de un sitio Web es su INTERCONEXION.

Por lo tanto cada página tiene que cumplir si rol, eso está claro.

Pero cada página tiene que poseer un acceso a otra página, tiene que estar Vinculada a otra página u otra sección de sí misma, u otro contenido que puede mostrar.

Para eso se utilizan los VINCULOS o HIPERVINCULOS.

En la lección siguiente, veremos el prediseño de una página, como maquetar la estructura de la página, cómo diagramar nuestro sitio y cómo aplicar todo esto de manera eficaz.

Espero que les haya gustado.