1.
¿EN QUE CONSISTE DREAMWEAR?
 Dreamweaver es la herramienta de diseño de páginas web más
avanzadas.
 Las funciones de edición visual de Dreamweaver 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, hojas de estilo trabajar
con capas, insertar comportamientos Java Script para crear
efectos e interactividades e inserción de archivos multimedia,
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.
 http://www.aulaclic.es/dreamweaver-cs5/t_1_1.htm

2.
ELEMENTOS BÁSICOS DE DREAMWEAR
 La barra de la aplicación: Esta barra contiene los siguientes
elementos: los menús, varios botones propios de la aplicación los
cuales nos permiten cambiar entre la vista de diseño o código,
acceder a las extensiones que se pueden añadir, o al administrador
de sitios, el conmutador de espacio de trabajo y una caja de
búsquedas para obtener ayuda on line.
 Las pestañas de documento: cada archivo que tengamos abierto,
mostrará una pestaña con su nombre accediendo de uno a otro con
facilidad.
 La barra de estado: encontramos el selector de etiquetas, nos sirve
para seleccionar etiquetas completas, las herramientas de
Selección, Mano y Zoom. Y otros datos como el tamaño de la
ventana, el tamaño de la página o su codificación.

3.
 La barra de herramientas estándar: contiene iconos para realizar
las acciones más habituales del menú Archivo y Edición, 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: contiene iconos que
nos permiten cambiar entre las distintas vistas de edición y la
vista en vivo.
 La barra de representación de estilos: nos permite ver la
apariencia de nuestra web en distintos dispositivos, si estamos
utilizando hojas distintas que dependan de eso.
 La barra de navegación con navegador: esta barra nos permite
usar Dreamweaver como un navegador web y navegar por las
páginas de nuestro sitio, aunque sólo tiene sentido con la Vista en
vivo.

4.
 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.
 El panel Insertar: Podemos emplearlo para insertar
imágenes, enlaces, multimedia, tablas, formularios o cualquier
elemento que nuestra web necesite.
 La vista Diseño: nos permite trabajar con el editor
visual, ofreciéndonos un aspecto muy similar al resultado final, pero
editable.
 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.
 La vista Dividir : permite dividir la ventana en dos zonas: Código y
Diseño. Una muestra el código fuente, y la otra el editor visual.
Cuando se realiza un cambio en alguna de las zonas, este cambio se
aplica directamente sobre la otra.

5.
 La Vista en vivo: es una mejora reciente de Dreamweaver. Nos ofrece
una vista del resultado final no editable.
 La vista Código en vivo: se emplea conjuntamente con la Vista en vivo.
Divide la pantalla como la vista Dividir, pero sin que podamos editar el
código. Lo que hace es que al seleccionar partes de la web en la Vista
en vivo, se seleccione su correspondiente código fuente.
 http://www.aulaclic.es/dreamweaver-cs5/t_2_1.htm

6.
EL TEXTO Y SUS PROPIEDADES
 Los encabezados se utilizan para establecer títulos dentro de un
documento, es importante emplear correctamente los
encabezados, ya que se organizará mejor el contenido de nuestra
web. El formato predeterminado sirve para que el texto aparezca
tal cual ha sido escrito.
 Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos
permiten formatear nuestra página y darle el diseño que
queramos. Podemos cambiar desde propiedades simples, como el
color de fondo, hasta cosas más vistosas.
 Los estilos CSS se utilizan para combinar una serie de atributos
del texto, como pueden ser el color , el tamaño, etiquetas,
encabezados, párrafos, enlaces, etc. Además se puede crear um
estilo personalizado tiene uma capacidad simple de actualizacion.

7.
HIPERENLACE
 Un hiperenlace es el que al ser pulsado lleva de una página o
archivo a otra página o archivo.
 Es posible asignar un vínculo a un texto, a una imagen, o a parte
de una imagen.
 Cuando creemos un enlace, lo que realmente haremos será crear
una etiqueta <a></a> que es la que en HTML se encarga de
definir los enlaces.
 La forma más sencilla de crear un enlace es a través
del inspector de propiedades. Para ello es necesario seleccionar
el texto o el objeto que va a servir de enlace, y seguidamente
establecer el Vínculo en el inspector HTML.
 Otra forma de crear un enlace es a través del
menú Insertar, opción Hipervínculo.

8.
CLASES DE HIPERENLACE
 Referencia absoluta: Conduce al sitio en el que se encuentra el
documento utilizando la ruta completa del archivo, incluyendo el
protocolo http://.
 Referencia relativa al documento (por defecto): La ubicación del
archivo enlazado se toma en relación con la ubicación de la
página. Esta es la opción por defecto de Dreamweaver, y es la
forma más habitual para enlazar archivos dentro del sitio.
 Referencia relativa al sitio: Conduce a un documento situado
dentro del mismo sitio que el documento actual. Tomando como
origen la carpeta raíz del sitio.
 Marcadores o Puntos de fijación: Conduce a un punto dentro de un
documento, ya sea dentro del actual o de otro diferente. Para
ello, indicamos el nombre del punto de fijación a continuación de la
ruta del archivo (relativa o absoluta) separados por una
almohadilla (#).
Se debe tener siempre en cuenta que los nombres de las rutas se
correspondan perfectamente a los nombres de los archivos y
carpetas en el servidor

9.
LAS IMÁGENES
 Para insertar una imagen hay que dirigirse al menú Insertar, a la
opción Imagen. Después de esto, ya es posible seleccionar una
imagen a través de la nueva ventana. Otra forma de insertar una
imagen, es arrastrarla directamente desde el
panel Archivos sobre el documento.
 Si insertamos una imagen y luego la borramos, la movemos, o
escribimos mal su nombre, en Dreamweaver
aparecerá indicando que el enlace del archivo está roto.
 Es preferible que la imagen sea relativa al Documento, ya que si
cambiamos la página de carpeta, lo habitual es cambiar también
sus imágenes.

10.
HTTP://WWW.AULACLIC.
ES/DREAMWEAVER-
CS5/GRAFICOS/ABRIR_I
MAGEN.GIF

11.
IMAGEN DE SUSTITUCIÓN O ROLLOVER
 Un rollover es una imagen que cambia por otra cuando el puntero se
sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o
en los botones para desplazarnos a través de distintas páginas.
 Para insertar un rollover hay que dirigirse al menú Insertar, Objetos
de Imagen, a la opción Imagen de sustitución. En la nueva ventana
hay que especificar la imagen original y la de sustitución.
 http://www.aulaclic.es/dreamweavercs5/graficos/imagen_sustitucion.gif

12.
MULTIMEDIA
 Películas flash: son animaciones, cuyo archivo tiene la
extensión SWF. Estas películas pueden crearse mediante el
programa Flash también de Adobe. Para poder ser visualizado en
el navegador, y necesitan que el usuario tenga instalado el plug-in
de Flash Player. Las películas Flash pueden insertarse en una
página a través del menú Insertar → Media, opción SWF.
 Sonido: Las páginas que contienen sonido suelen ofrecer la
posibilidad de activarlo o desactivarlo, para que aquellos usuarios
que no deseen escuchar el sonido de la página puedan
desactivarlo. Para insertar un archivo de audio en un documento
tienes que dirigirte al menú Insertar, Medía, opción Plug-in.
 Videos: Los formatos de vídeo que suelen utilizarse en Internet
son el AVI, el MPEG y el MOV. Para insertar un archivo de vídeo
en un documento tienes que dirigirte al menú Insertar, Medía,
opción Plug-in.