Ángel Imán Tello

 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 este fantástico programa.
 Los logotipos de Dreamweaver son propiedad de Adobe, así como
las marcas registradas Dreamweaver y Adobe.
 Clic en Inicio
 Clic en todos los programa
 Clic en Macromedia
 Clic en Macromedia Dreamweaver.
 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).
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

Abrir con → Adobe Dreamweaver CS4.
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 por uno.
Para guardar todo puedes realizar cualquiera de
las siguientes operaciones.
 Hacer clic en el botón Guardar todo de la barra
de herramientas estándar. 
 Hacer clic sobre el menú Archivo y elegir la
opción Guardar todo.
  
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
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, en la
siguiente figura . 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.
 Se marca la primera categoría, Datos locales. En primer lugar hay que indicar el nombre
del sitio, la carpeta raíz local (del equipo) donde se van a ubicar todos los documentos que
se utilicen. Se ofrece la posibilidad de seleccionar una carpeta para almacenar todas las
imágenes, esto puede ser interesante para tener mejor organizada toda la información
 En la categoría Datos remotos, figura 1, 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 establecer una adecuada
comunicación con el sistema remoto. De momento no se definirá ningún Acceso y se
trabajará localmente

Figura 1

Se pasa a la categoría Mapa de diseño del sitio, figura 2, donde se puede

indicar el nombre de la página principal o bien buscar mediante el
explorador de ficheros.
En este caso en la página principal se incluirá index.html, al no existir
aparece un diálogo que permite crear dicho fichero en este momento.

Figura 2
 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 la elaboración de la Web se irán
almacenando en el sitio

En primer lugar se puede observar que en el panel de archivos

aparece el sitio que se acaba de definir, que se ha seleccionado y
actualmente está en curso.
 Algunas funcionalidades son:.

Para expandir la vista de archivos se pulsa el botón Expandir para mostrar

sitios remotos y locales situado a la derecha de la barra de Archivos.
 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:
 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.
 
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.
 
Figura 4.13. Establecer como página principal

Establecer como página principal

 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 de documentos e incorporarlo a una página Web.
 En siguientes figurasse indica la forma de añadir texto en Dreamweaver
 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 siguientes figura se mostrará la forma en que se puede dar formato a
distinto texto utilizando la barra insertar texto

Aplicación de Formato texto: “Encabezado 1”.

Aplicación de Formato texto: “Texto en
negrita”.
Aplicación de Formato texto: “Encabezado 2
Aplicación de Formato texto: “Negrita”+”Cursiva”
 En primer lugar, en la barra insertar,  se debe elegir la
opción “Común
 En las figuras siguientes 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,.
Posteriormente se inserta el hipervínculo, figura, así como
hacia otras páginas ubicadas en el sitio actual.