Esta presentación muestra de forma sencilla aspectos básicos, generales sobre Macromedia Dreamweaver 8

1. Ing. Luz Rodríguez

2. 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.

3. 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 .

4. 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.

5. 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.

6. 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.

7. 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.

8. 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

9. Al arrancar Dreamweaver aparece la pantalla inicial, allí
se visualizarán diferentes barras y paneles que se
describen a continuación.
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.

10. 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.

11. 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 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.

12. 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%).

13. 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:
Muestra 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.

14. 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.

15. 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.

16. 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

17. 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.

18. 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.

19. 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.

20. 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.

21. 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.

22. 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.

23. 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.

24. 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.

25. 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.

26. 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.

27. 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.
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.

28. Estilo: 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.