Centro de Educacin Continua

ANIMACIN WEB
VOLUMEN

Programa Adobe Dreamweaver CS6

Manual del
Participante

Programa Adobe Dreamweaver CS6

Centro de Educacin Continua

Sesin de Aprendizaje

Diseo Web

Introduccin a
Adobe Dreamweaver CS6
Dreamweaver CS6 es un software fcil de usar que permite crear pginas web profesionales.
Las funciones de edicin visual de Dreamweaver CS6 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 comportamientos JavaScript, 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.

Novedades de Dreamweaver Cs6

En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior.
Plantillas diseo fluido. El acceso a la web a travs de todo tipo de dispositivos est experimentando un aumento importante. Ahora es habitual
acceder a internet desde el telfono mvil y desde las tabletas. Esto complica el diseo de los sitios web porque los dispositivos son de diferentes dimensiones.
Una forma de afrontar este problema es utilizando el diseo fluido, este tipo de diseo hace que la pgina se adapte automticamente a las
dimensiones del dispositivo. Este tipo de diseo utiliza HTML 5 por los que los navegadores antiguos no son capaces de representarlo correctamente. Sin
embargo, existen librerias de Javascript que solucionan este inconveniente.
Dreamweaver incorpora estas soluciones en sus nuevas plantillas de diseo fluido

Transiciones. Las transiciones permiten pasar propiedades CSS de un estado inicial a otro estado final de forma continua. Con transiciones se
pueden lograr vistosos efectos de animaciones.
Fuentes Web. Existen sitios web con multitud de nuevas fuentes que pueden dar un aire distinto a nuestros diseos de pginas web. En esta versin,
Dreamweaver permite incorporar los archivos de nuevas fuentes de forma sencilla.
Intergracin con PhoneGap mejorada. PhoneGap es un servicio para generar aplicaciones para telfonos mviles en las plataformas ms
utilizadas (Android, Apple, ...) ahora se ha mejorado la compatibildad con PhoneGap desde Dreamweaver .
Funciones exclusivas para Creative Cloud. Creative Cloud es la nueva forma de adquirir productos Adobe, como Dreamweaver, mediante
suscripcin mensual o anual, de esta forma se tiene acceso ms rapido a las actualizaciones y se puede disponer de los archivos de trabajo en cualquier
ubicacin con acceso a internet.
Adems hay funciones que slo estan disponibles para los suscriptores de Cloud, como la insercin de etiquetas HTML 5 desde el panel Insertar, la
compatibilidad con Edge Animate o la bsqueda dinmica en Mac.
Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 01

Programa Adobe Dreamweaver CS6

Sesin de Aprendizaje

Diseo Web

Centro de Educacin Continua

Editar Pginas 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 incluido en Windows 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, sobre todo si no
estamos demasiado familiarizados con el HTML. Aunque tambin es cierto que escribir el cdigo nos da ms control sobre l, y sobre todo al principio, nos
ayudar a aprenderlo rpidamente.
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 Adobe
Dreamweaver.

Cmo tener una pgina en Internet ?

Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde
Internet las 24 horas del da. El precio por disponer de espacio propio en el servidor depender de la empresa, del espacio en disco, volumen de transferencia y
otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra pgina
precedido por el de la suya. Hay que tener tambin en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender
espacios publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa, aunque s es aceptable para una pgina personal.
Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de la que se suele encargar la propia empresa de
hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra pgina. Este nombre no puede estar repetido en Internet, ha de ser nico, al igual
que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com.
En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra pgina no ser ms que un archivo dentro de la de la
empresa contratada.
A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero de cuentas de correo electrnico propias que pueden
habilitarse y si disponemos de una base de datos para poder acceder a ella a travs de programacin va Web, aunque esto ltimo ser til slo para usuarios
avanzados.
En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo. Dreamweaver te permite crear una copia local (en tu
ordenador) del sitio web que luego querrs que se encuentre a disposicin de todo el mundo en Internet.
Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu servidor manteniendo la estructura del local. Es decir,
debers subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si no lo haces de
este modo, tu sitio experimentar fallos y enlaces que no funcionarn.
Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni espacios en blanco. De esta forma te asegurars de que el
servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos que alojes en l.
Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los nombres en minscula. Algunos servidores
distinguen entre maysculas y minsculas, por lo que si en tu pgina quieres mostrar la imagen foto1.jpg debers guardarla con ese nombre y no como Foto1.jpg.
Evitars horas perdidas buscando fallos.

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 02

Programa Adobe Dreamweaver CS6

Sesin de Aprendizaje

Diseo Web

Centro de Educacin Continua

Ingresar a Adobe Dreamweaver CS6

Existen varias formas de ingresar a Adobe Dreamweaver, siendo las principales las siguientes:

Para ingresar a Adobe Dreamweaver CS6,

seguimos los siguientes pasos:
1. Clic en el botn Inicio
2. Clic sobre
Todos los Programas

Clic

Clic

3. Clic en Adobe Master Collection CS6

4. Clic en el programa
Adobe Dreamweaver CS6

Clic

Clic

Ingresar rpidamente
Tambin es posible ingresar a Adobe Dreamweaver CS6 de la siguiente manera:
1. Clic en Inicio
2. Clic en Buscar programas y archivos
3. Se escribe Dreamweaver

4. Se presiona Enter

Si tenemos el icono en
el escritorio; podemos
hacer doble clic sobre .

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 03

Programa Adobe Dreamweaver CS6

Sesin de Aprendizaje

Diseo Web

Centro de Educacin Continua

Crear Nuevo y Abrir documentos

Cuando recin ingresas al programa tienes una ventana de bienvenida en la cual puedes elegir las siguientes opciones:
1. Si deseas abrir un documento reciente haces clic sobre su nombre. Si esta en otra ubicacin clic en Abrir
2. Si desea crear un documento
nuevo elige una de la opciones
del centro.
Un archivo HTML la primera
opcin.

Clic

Clic

Si no esta presenta esta ventana de bienvenida podemos elegir las siguientes opciones:

Hacer clic en el botn abrir de la barra de herramientas estndar (si est visible).
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.
Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opcin Abrir con / Adobe Dreamweaver Cs4.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:
Hacer clic en el botn nuevo de la barra de herramientas estndar (si est visible).
Pulsar la combinacin de teclas Ctrl + N.
Hacer clic sobre el men Archivo y elegir la opcin Nuevo.
Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina en blanco.
En la segunda columna seleccionamos HTML, observamos que hay muchos diseos ya creados que podemos elegir, para nuestro primer ejemplo
elegimos en Diseo ninguno. A continuacin pulsamos el botn Crear.

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 04

Programa Adobe Dreamweaver CS6

Sesin de Aprendizaje

Diseo Web

Centro de Educacin Continua

Guardar un Documento
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.

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 todas 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. De todas formas, observa que cuando hay cambios sin guardar
aparece un * tras el nombre del documento .

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 05

Programa Adobe Dreamweaver CS6

Centro de Educacin Continua

Sesin de Aprendizaje

Diseo Web

Mi Primera Pgina Web

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. Abre un documento nuevo y
selecciona la Categora Pgina bsica, HTML, en la columna Diseo dejamos la opcin por defecto: <ninguno>.
Seguidamente, haz clic sobre la
zona blanca del documento y escribe lo
siguiente:

Una vez introducido el texto, vamos a modificar el ttulo y el color de fondo del documento. Para ello podemos hacer clic sobre el men Modificar y
elegir la opcin Propiedades de la pgina. Tambin podemos presiona Control + J. Entonces se abrir una ventana como la que aparece a continuacin:

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color azul.
Haz clic en Ttulo/Codificacin a la izquierda, y en el Ttulo escribe Mi primera pgina.
Para aplicar los cambios, pulsa sobre el botn Aceptar.

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 06

Programa Adobe Dreamweaver CS6

Centro de Educacin Continua

Sesin de Aprendizaje

Diseo Web

Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la carpeta donde estamos creando
nuestras pginas, habitualmente en una subcarpeta dedicada a las imgenes.
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 navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro. Ten en cuenta que
si piensas publicar la pgina en Internet, hay que respetar los derechos de autor de la imagen.
Ahora vamos a insertar la imagen debajo de la segunda lnea de texto. En primer lugar, situamos el cursor al final de la segunda lnea y creamos un
salto de lnea (tecla Enter). Despus nos dirigimos al men Insertar, opcin Imagen.

En la nueva ventana que aparece, debers buscar la imagen en

la carpeta en la que la habas guardado, seleccionarla y pulsar Aceptar.
Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte
inferior de la ventana, y que tiene el siguiente aspecto:

Si no te aparece, puedes mostrarlo a travs del men Ventana, opcin Propiedades.

Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es porque est contrado. Para que te aparezca desplegado debes hacer doble clic
en Propiedades.

Selecciona la primera lnea de texto. En el inspector de propiedades pulsa HTML y aplica el

formato Encabezado 1 (h1) seleccionando el valor Encabezado1 del cuadro Formato.
Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el icono CSS a la izquierda.
Mediante el inspector de propiedades en Dreamweaver CS6 accedemos tanto a las propiedades de CSS como a las propiedades de HTML.

Podemos decir que en una pgina web, HTML se encarga de estructurar el contenido, la informacin, mientras que CSS se encarga de mostrar ese
contenido con el formato adecuado.

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 07

Programa Adobe Dreamweaver CS6

Centro de Educacin Continua

Sesin de Aprendizaje

Diseo Web

Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto mediante hojas de estilos en
cascada. Los estilos CSS ofrecen un mayor control sobre el diseo de la pgina Web y reducen el tamao del archivo.
Selecciona la primera lnea. En Regla de destino selecciona Estilo en lnea, para aplicar el formato solo al texto seleccionado.
Tambin aplica el estilo de Fuente Arial, Helvetica, sans-serif, color azul #009 y centra el texto, tal y como muestra la imagen
siguiente:

Observa que hemos centrado el texto pulsando en el botn centrar.

Selecciona la segunda lnea de texto, y seleccionando como antes < estilo en lnea >, marca los botones para ponerlo en negrita y cursiva
respectivamente.

Vamos a centrar tambin la imagen. Para ellos seleccinala. Lo que hay que centrar es el contenido del prrafo que la contiene. Para hacerlo, en la
barra de estado, encima de las propiedades nos aparece la jerarqua de etiquetas. Haz clic sobre p.
Ahora, centra el prrafo como hemos visto hasta ahora, pulsando en centrar.

Por ltimo vamos a crear el enlace. Selecciona el texto de la ltima lnea, y cambia el panel de Propiedades a las propiedades de HTML.
En el campo Vnculo, escribe la URL de la pgina a enlazar, como se ve en la imagen:

Por ltimo guarda el documento. Ya sabes que puedes hacerlo a travs del men Archivo, desde la opcin Guardar.
Puedes llamar al documento como lo desees, pero la extensin ha de ser htm o html. Por ejemplo, lo hemos llamado index.htm, y la hemos guardado
en la misma carpeta que la imagen descargada.
Ahora, puedes ver cmo se ve en tu navegador pulsando la tecla F12.

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 08

Programa Adobe Dreamweaver CS6

Sesin de Aprendizaje

Diseo Web

Centro de Educacin Continua

El entorno de Dreamweaver CS6

Vamos a ver cules son los elementos bsicos de Dreamweaver CS6, la pantalla, las barras, los paneles, etc..., para
saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y para qu sirven. Tambin veremos cmo
obtener ayuda, por si en algn momento no sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos en
disposicin de empezar a crear pginas web.

La Ventana Principal
Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus componentes fundamentales. As conoceremos los nombres de
los diferentes elementos y ser ms fcil entender el resto del curso. La pantalla que se muestra a continuacin puede no coincidir exactamente con la que ves en
tu ordenador, ya que cada usuario puede decidir qu elementos quiere que se vean en cada momento y dnde, como veremos ms adelante.

Las barras
La barra de la aplicacin.

La barra la aplicacin se incorpor en la versin anterior de Dreamweaver CS4. Si tenemos la ventana maximizada veremos todos los elementos de
la barra ocupando una sola lnea, si no, ocuparn dos lneas, como en la imagen superior.
Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte inferior), varios botones propios de la aplicacin, el conmutador de
espacio de trabajo y una caja de bsquedas para obtener ayuda on line.
Los botones propios de la aplicacin, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar
entre la vista de diseo o cdigo, acceder a las extensiones que se pueden aadir, o al administrador de sitios, que ya
veremos.
Ms hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es la configuracin del entorno
(paneles visibles y su disposicin) que podemos guardar y cargar. Lo veremos ms adelante.

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 09

Programa Adobe Dreamweaver CS6

Sesin de Aprendizaje

Diseo Web

Centro de Educacin Continua

Los mens, estn agrupados en categoras.

Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden
insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a travs de los mens, aunque en ocasiones nos
enven a los paneles.

Las pestaas de documento.

Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos permitir cambiar de uno a otro fcilmente. Si junto al nombre
aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el aspa, o acceder a otras acciones haciendo clic
con el botn derecho, como Cerrar otros archivos.
Desde CS4 Dreamweaver aade una novedad. Debajo de las pestaas encontramos los archivos a que utiliza nuestra pgina, como la hoja de
estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrar bastante tiempo.

La barra de estado.
Esta barra la encontramos debajo de la ventana de documento, y nos da informacin sobre el mismo.
A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha encontramos las
herramientas de Seleccin, Mano (para desplazarse) y Zoom. Y otros datos como el tamao de la ventana, el tamao de la pgina o su codificacin.

Barra de Herramientas
A parte, existen otras que podemos ver u ocultar desde el men Ver / Barras de herramientas.

La barra de herramientas estndar.

La barra de herramientas estndar contiene iconos para realizar las acciones ms habituales del men Archivo y Edicin. De izquierda a derecha:
Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el cdigo fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer.

La barra de herramientas de documento.

La barra de herramientas de documento contiene iconos que nos permiten cambiar entre las distintas vistas de edicin y la vista en vivo, acceder
cmodamente al ttulo de la pgina, o realizar las distintas opciones de validacin que nos ofrece el programa.

La barra de representacin de estilos.

Esta barra, mucho menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que
dependan del eso.
Como veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra barra de herramientas.

La barra de navegacin con navegador.

Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las pginas de nuestro sitio, aunque slo tiene sentido con la Vista
en vivo, como ya veremos.
Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 10