ADRIANA HURTADO URIBE

Qu es Dreamweaver?
Dreamweaver
es un software fcil de usar que permite crear pginas
web profesionales.
Las funciones de edicin visual de Dreamweaver 8 permiten agregar
rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar
manualmente el cdigo HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar imgenes,
videos, etc., de una forma muy sencilla y visual.
Adems 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 que les voy a pasar en Formato pdf a sus memorias USB
correspondientes mi trabajo tutorial para aprender muy fcil a disear una pgina
web, para eso deben de descargar Dreamweaver desde la pgina de Adobe,
desde esta liga:
http://adobe-dreamweaver.softonic.com/descargar
.

ADRIANA HURTADO URIBE

NOVEDADES DE DREAMWEAVER
En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior,
Dreamweaver MX 2004.
Integracin de RSS: con Dreamweaver 8 podrs integrar entradas RSS provinientes de otras
pginas con slo introducir la fuente y arrastrar y colocar los campos. De esta forma podrs
introducir datos en forato XML fcil y cmodamente.
Mejoras CSS: esta ltima versin ha mejorado mucho respecto a la compatibilidad y manejo
de estilos de cascada. De esta forma se ha mejorado el panel de estilos CSS, donde ahora
podrs acceder a la configuracin de cada uno de los estilos desde una lista mucho mejor dotado
de una cuadrcula editable desde donde podrs modificar sus propiedades. Adems,
Dreamweaver 8, aade una nueva barra de herramientas que proporciona la reproducin
inmediata de los estilos para diferentes medios (pantalla, impresora, webTV, PDAs...).
Accesibilidad: Dreamweaver 8 incorpora las normas de accesibilidad de prioridad 2 marcadas
por la WCAG/W3C.
Transferencia de archivos: Ahora con Dreamweaver 8 podrs seguir trabajando con tus
archivos mientras el programa se comunica con tu servidor e incluye los archivos creados o
modificados recientemente. Su sincronizacin ha mejorado notablemente siendo posible una

ADRIANA HURTADO URIBE

mejor gestin de cambios, adems de pemitir en uso de bolqueo/desbloqueo de archivos para
que estos no se sobreescriban.
Interfaz mejorada: Los usuarios con problemas visuales podrn acceder auna opcin de
Aumento de la pantaa en vista de diseo para analizar o trabajar con difcles anidamientos de
tablas. Adems de la inclusin de informacin visual gracias a las guas que permitirn la
medicin pxel a pxel de todos los elementos.
Nueva barra de herramientas: Se ha aadido una barra de herramientas a Dreamweaver 8,
podrs encontrarla en la parte lateral izquierda del modo de Cdigo, esta barra hace mucho ms
accesible el cdigo al permitirnos la navegacin por etiquetas y su contraccin. Una de las
nuevas novedades es la posibilidad de aadir comentarios con un slo clic.

Compatibilidad: Comentaremos, adems, la compatibilidad aadida en esta versin con

PHP5, Coldfusion MX 7 y Video Flash.

ABRIR Y CERRAR DREMWEAVER

EDITAR PAGINAS WEB
Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los
documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo
HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.
Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un
editor grfico. Al no utilizar un editor grfico cuesta mucho ms insertar cada uno de los
elementos de la pgina, al mismo tiempo que es ms complicado crear una apariencia
profesional para la pgina.
Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que
destaca por su sencillez y por las numerosas funciones que incluye, es Macromeda Dreamweaver.
Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser
Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog
Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser
gratuitos.

Veamos

las

dos

formas

bsicas

de arrancar Dreamweaver

8.

Desde el botn Inicio

situado, normalmente, en la esquina inferior izquierda
de la pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men; al colocar
el cursor sobre Todos los programasaparece otra lista con los programas que hay instalados en
tu
ordenador,
buscar Macromedia (o Adobe si
tienes
las
ltimas
versiones),
seguidamente Dreamweaver 8, hacer clic sobre l, y se arrancar el programa.

Desde el icono de Dreamweaver 8 del escritorio

ADRIANA HURTADO URIBE

Puedes arrancar Dreamweaver 8 ahora para ir probando todo lo que te explicamos. Cuando
realices los ejercicios tambin puedes compaginar dos sesiones de la forma que te explicamos
aqu.
Para cerrar Dreamweaver MX 2004, puedes utilizar cualquiera de las siguientes
operaciones:
Hacer clic en el botn cerrar
Pulsar la combinacin de teclas ALT+F4.
Hacer clic sobre el men Archivo y elegir la opcin Salir.
Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se
te pedir confirmacin para guardar o no cada uno de ellos.

GUARDAR DOCUMENTOS

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botn abrir

de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+O.

Hacer clic sobre el men Archivo y elegir la opcin Abrir.

Hacer doble clic sobre el archivo en la ventana del sitio.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botn abrir

de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+N.

Hacer clic sobre el men Archivo y elegir la opcin Nuevo.
Hacer doble clic sobre el archivo en la ventana del sitio.
Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina
bsica, HTML.
Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botn guardar

de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+S.

ADRIANA HURTADO URIBE

Hacer clic sobre el men Archivo y elegir la opcin Guardar.
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente 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 botn guardar todo

de la barra de herramientas estndar.

Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.

Al tener varios documentos abiertos es fcil olvidarse de todos las modificaciones hechas
en cada uno de ellos. Debes tener mucho cuidado al utilizar la opcin 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 utilices esta opcin, al menos
hasta que te hayas habituado a manejar el programa.
Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear
una pgina web sencilla, con varios estilos de texto, una imagen y un enlace a otra
pgina. Crear esta pgina solo te llevar unos pocos minutos, y sabrs cmo trabajar con
los elementos bsicos con los que estn hechas la mayora de las pginas web. Si nunca
has hecho una pgina web, este es el momento para descubrir lo fcil que es.

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior
como puede hacerse. Abres un documento nuevo y seleccionas la Categora Pgina
bsica, HTML.
Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen
siguiente.
Una vez introducido el texto, vas a modificar el ttulo y el color de fondo del

documento.
Para ello debes hacer clic
opcin Propiedades de la pgina.

sobre

el

men Modificar y

elegir

la

Entonces se abrir una ventana como la que aparece ms abajo.

Cambia el Ttulo por Mi primera pgina.

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser
de color azul.
Seguidamente pulsa sobre el botn Aceptar.
Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para
nosotros. Para ello debe encontrarse en nuestro disco duro, en un cd-rom o en un
disquete, pero preferiblemente en el disco duro.
Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer
clic con el botn derecho del ratn sobre la imagen que queremos traer de Internet, se abre
una ventana con una opcin similar a Guardar imagen como... (dependiendo del

ADRIANA HURTADO URIBE

navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco
duro.
En los navegadores ms modernos al colocar el cursor sobre una imagen aparecen estos
iconos en una esquina de la imagen, si haces clic en el icono del disquete aparecer el
mismo men Guardar imagen como... a que hacamos referencia anteriormente.
Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina web
que estamos creando. Puedes guardarla, por ejemplo, en la carpeta Mis Documentos.
Ahora tienes que insertar la imagen debajo de la segunda lnea de texto. En primer lugar
debes situar el cursor al final de la segunda lnea y pulsar un intro (Enter) para ir a una
nueva lnea. Despus debes dirigirte al men Insertar, a la opcin Imagen.
En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la que la
habas guardado, y despus seleccionarla.