DREAMWEAVER

Ángel Imán
Tello
 Qué es Dreamweaver CS4
Dreamweaver CS4 es un software fácil de usar que permite
crear páginas web profesionales.
Las funciones de edición visual de Dreamweaver CS4
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, trabajar con capas,
insertar comportamientos Java Script, 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.
Para seguir este curso te puedes descargar la versión gratuita
de Dreamweaver desde la página de Adobe, la versión
caduca al cabo de 30 días, pero seguro que te dará tiempo a
entenderlo y decidir si quieres adquirir la versión completa de
 Ruta:

Clic en Inicio
Clic en todos los programa
Clic en Macromedia
Clic en Macromedia Dreamweaver.
 PANTALLA INICIAL
Haga clic para modificar el estilo de texto del patrón
Segundo nivel
● Tercer nivel

● Cuarto nivel

● Quinto nivel
 Vistas:
Los documentos se pueden ver de las formas que se indican en la
figura. En la parte de código, se visualiza el documento en html
mientras que en Diseño se previsualiza de la forma en que quedará
el documento definitivo
La barra vertical de
herramientas Codificación (se
muestra únicamente en la vista
Código) contiene botones con los
que es posible realizar muchas
operaciones de codificación
habituales.
El inspector de propiedades,
figura 2.5, permite ver y cambiar
algunas de las características más
utilizadas del objeto o texto
seleccionado actualmente.
El panel de archivos, figura
2.8., permite gestionar los
archivos y las carpetas, de un
sitio local de Dreamweaver o de
un servidor remoto. También
proporciona una vista de todos
los archivos del disco local, como
ocurre en el Explorador de
Windows (Windows) o en el
Finder (Macintosh).
 Abrir y guardar
documentos
Para abrir un documento, puedes utilizar
cualquiera de las siguientes operaciones:
Hacer clic en el botón abrir de la barra de
herramientas estándar (si está visible). 
Pulsar la combinación de teclas Ctrl + O.
Hacer clic sobre el menú Archivo y elegir
la opción Abrir.
Hacer doble clic sobre el archivo en la
ventana del sitio.
Hacer clic derecho sobre el archivo en el
explorador de Windows, y elegir la opción
Para abrir un documento nuevo:
Hacer clic en el botón nuevo de la
barra de herramientas estándar (si está
visible). 
 Para guardar un documento, puedes
utilizar cualquiera de las siguientes
operaciones.
Hacer clic en el botón Guardar de la
barra de herramientas estándar. 
Pulsar la combinación de teclas Ctrl + S.
Hacer clic sobre el menú Archivo y elegir la
opción Guardar.
Dreamweaver incluye la posibilidad
de, en el caso de estar trabajando
simultáneamente con varios
documentos, poder guardar todos de
golpe, sin la necesidad de hacerlo uno
 Formas de guardar
Archivos

 
 Cerrar un
documento
Desde el Menú Archivo se elige Cerrar, para cerrar solo el
documento activo, o bien Cerrar todos, para hacerlo con todos
los documentos que actualmente estén abiertos.

Pinchando con el botón derecho sobre el título de una solapa y

de la misma forma que antes se puede elegir Cerrar o bien
Cerrar todos
En caso de no haber grabado los últimos
cambios, avisa apareciendo una ventana
que proporciona la posibilidad de guardarlos
 Creación, configuración,
edición y administración
Definición de un nuevo sitio: En el menú principal hay
que pulsar la opción Administrar sitios y después escoger
la opción Administrar sitios

Aparece una ventana que permite Administrar de sitios,

en este caso todavía no hay creado ninguno por lo que se
va a crear uno nuevo pulsando el botón Nuevo y
eligiendo, del menú que se despliega, la opción Sitio
A continuación aparece la herramienta de
definición y configuración de sitios. Se
tienen dos posibilidades:
En la solapa Básicas se puede utilizar un
asistente muy auto explicativo, que va
solicitando paso a paso toda la
información necesaria para definir el sitio.
En la solapa Avanzadas permite definirlo
manualmente. Este es el sistema que se
va a seguir durante el manual. En el
cuadro de la izquierda aparecen todas las
categorías, que son aspectos
configurables de un sitio. Cada uno de
ellos tiene a la vez varios parámetros que
se deberán configurar.
En la categoría Datos remotos,
figura 4.4., se puede configurar el
sistema de acceso al repositorio
donde se publicará la Web que se
elabore desde el equipo. Según el
acceso elegido aparecerán todos
los parámetros necesarios para
Se pasa a la categoría Mapa de diseño del sitio, figura
establecer unaindicar
4.5., donde se puede adecuada
el nombre de la página
comunicación
principal o bien buscarcon
ficheros.
el
mediante sistema
el explorador de

remoto.
En este casoDeen lamomento
página principal seno se definirá
incluirá
index.html, al no existir aparece un diálogo que
ningún Acceso
permite crear y se
dicho fichero trabajará
en este momento
localmente
Después de pinchar el botón Aceptar se
vuelve a la ventana de administración de
sitios pero esta vez aparece el sitio recién
creado.
Se pulsa en Listo y, a partir de este
momento, todos los documentos que se
utilicen para
En primer lugar se puedela elaboración
observar que en el panel dede la aparece
archivos Webel se
sitio que se
irán almacenando en el sitio
acaba de definir, que se ha seleccionado y actualmente está en curso
..
Vistas del sitio

Además de la vista de la figura anterior

donde aparece el sitio con todos sus
elementos, se dispone de otras formas de
visualización para facilitar la labor de diseño
y de sincronización de ficheros con el
servidor remoto o el de prueba.
Para ver mejor estas funcionalidades se va a
utilizar una página que contiene varias
páginas compuestas de varios elementos,
tal como se muestra en la figura de a
Esto provocará que se amplíe la pantalla para trabajar exclusivamente en
el panel de archivos. La Web se podrá ver de varias formas en función de
la opción del menú que se elige:
•Archivos del sitio: la pantalla se divide en dos, figura 4.9.:
•En la parte izquierda aparece el sitio remoto con todos sus
documentos estructurados en carpetas. En caso de no estar definido,
no aparece nada.
•En la parte derecha aparece el sitio local conteniendo todas sus
carpetas y documentos.
 •Mapa del sitio: se verá la estructura del sitio local en forma
de árbol, partiendo de la página principal, apareciendo las
distintas páginas que se van llamando mediante hiperenlaces.

En cualquiera de las tres vistas así como en el panel de archivos se

ofrece una serie de opciones que permiten la conexión con el sitio
remoto, la sincronización y el intercambio de ficheros entre el sitio
local y el remoto o el servidor de prueba, figura 4.12.
 Establecer como página principal
También desde cualquiera de las vistas se puede, en la parte derecha, seleccionar un archivo, pulsar el botón derecho para que
aparezca el menú contextual y aparecen una serie de opciones. Es interesante destacar la opción que permite establecer el
documento señalado como página principal,.
 Insertar Texto en Página
Figura 5.5. Inserción directa de texto desde teclado.

Figura 5.6. Inserción de texto a partir de un documento externo.

Web
Dreamweaver permite añadir texto a
páginas Web escribiendo el texto
directamente en una página, copiando y
pegando texto de otro documento o
arrastrando texto de otra aplicación.
Entre los tipos de documentos que los
profesionales de la Web reciben con
contenido de texto que debe incorporarse
en las páginas Web, se incluyen los archivos
de texto ASCII, los archivos en formato de
texto enriquecido y los documentos de
Microsoft Office. Dreamweaver permite
extraer texto de cualquiera de estos tipos
Aplicación de formato al
texto

A continuación se va a detallar la forma de cambiar el

formato del texto utilizando la barra insertar. Todo eso
se hace de forma similar desde el menú texto o desde
el inspector de propiedades.
En las figuras 1-4 se muestra la forma en que se
puede dar formato a distinto texto utilizando la barra
insertar texto

1- Aplicación de Formato de Textos “Encabezado

1”
2- Aplicación de Formato texto: “Texto en
negrita”.
3- Aplicación de Formato texto: “Encabezado
2”.
4- Aplicación de Formato texto:
“Negrita”+”Cursiva”.
Inserción de Hiperenlaces y correos
electrónicos
En primer lugar, en la barra insertar,  se
debe elegir la opción “Común”, tal como se
indica en la siguiente figura:
En las siguientes figuras se indica
respectivamente cómo insertar
hipervínculos a páginas de Internet así como
hacia otras páginas ubicadas en el sitio
actual
Para incluir hipervínculos a zonas de la
página actual, en primer lugar se debe
insertar un anclaje con nombre, figura 2.
Posteriormente se inserta el hipervínculo,
figura 2, así como hacia otras páginas
ubicadas en el sitio actual

Figura
1

Figura 2
Gracias..