Unidad

1. Conceptos bsicos de Dreamweaver CS5

1.1 Qu es Dreamweaver CS5

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.

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 te puedes descargar la versin gratuita de Dreamweaver desde
la pgina de Adobe, la versin caduca al cabo de 30 das, pero seguro que te dar
tiempo a entenderlo y decidir si quieres adquirir la versin completa de este
fantstico programa.

Nota: Esta versin estar disponible hasta que Adobe lance la nueva versin del
programa.

Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcas
registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relacin con Adobe.
Las pginas web estn escritas en HTML. Si no conoces las caractersticas bsicas de
HTML puedes verlas aqu.

1.2. Novedades de Dreamweaver CS5

En este punto comentaremos las caractersticas que aporta esta nueva versin sobre
la anterior.
Compatibilidad con CMS integrada. Un sistema de gestin de contenidos (en
ingls Content Management System, abreviado CMS) es in interfaz o programa que
nos permite gestionar el contenido de un sitio web. Cada vez son ms usados, y ahora
Dreamweaver integra con los principales, permitindos crear nuestras pginas con la
estructura adecuada.

Inspeccionar CSS. Ahora, con la opcin Inspeccionar, podemos ver claramente los
mrgenes aplicados al elemento seleccionado, y qu propiedades le afectan, tanto si
son propias, como heredadas de los elementos padre.



Integracin Adobe Browserlab. Adobe Browser Lab es un servicio en lnea de
Adobe, que nos permite comparar cmo se ve una misma pgina web en las distintas
versiones de Internet Explorer, Firefox y Safari, bajo los sistemas operativos de
Windows o Mac OS.

Este servicio es fcilmente accesible desde Dreamweaver, pero realmente cualquiera
puede usarlo desde su pgina web.












 Configuracin sencilla de sitios. Ahora resulta ms sencillo configurar nuestro
sitio local y remoto. Ya que se han simplificado las opciones esenciales, y distinguido
ms las opciones avanzadas y poco importantes.

Sugerencias de cdigo. Ahora las sugerencias de cdigo incluyen nuestras clases
personalizadas, y los comandos y funciones propios de los distintos CMS soportados.

1.3. Editar pginas web

Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear
los documentos con la extensin HTML oHTM, 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.
Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como
pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus.
Algunos de los cuales tienen la ventaja de ser gratuitos.



1.4. 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, sobre todo al comienzo.

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.

Si piensas contratar un servicio de hospedaje te recomendamos hostmonster.com

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 en los nombres de archivos o carpetas. 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 (los que utilizan linux)
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.

1.5. Arrancar y cerrar Dreamweaver CS5

Veamos las dos formas bsicas de arrancar Dreamweaver CS5.


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. Puedes comenzar a escribir el nombre del programa, y aparecer
directamente. O puedes pulsar en Todos los programas y buscarlo en la lista con los
programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS5 y
haz clic sobre l para arrancar el programa.

 Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes

Puedes arrancar Dreamweaver CS5 ahora para ir probando todo lo que te explicamos.
Cuando realices los ejercicios tambin puedes compaginar dos sesiones de la forma
que puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aqu.

Aqu te explicaremos cmo conseguir tener la pantalla dividida en dos partes, una con
el curso y otra con Dreamweaver CS5.

Abre la sesin con el curso en tu navegador habitual.
Abre la sesin de Dreamweaver CS5.
Pulsar con el botn derecho sobre cualquier parte vaca de la barra de tareas, en la
parte inferior de la ventana de Windows (del escritorio). Es la barra en la que se
encuentra el botn Inicio.
Elegir la opcin Mosaico ventanas en paralelo.
Observa como la pantalla ha quedado dividida en dos partes, como en la figura:

5. Una vez tenemos las dos sesiones con el tamao adecuado, basta hacer clic con el
ratn para pasar de la una a la otra.
Para volver a dejar las ventanas con su tamao normal, hacer clic en el botn Maximizar
Esto va bien con monitores habituales (de 17" o ms pulgadas), sobre todo si son
panormicos. Con monitores pequeos como los de las Netbooks, quizs prefieras
dejar las ventanas con su tamao normal e ir pasando de una a otra presionando las
teclas Alt + tabulador (manteniendo pulsada Alt, presionar la tecla tabulador) o
pulsando el botn correspondiente a la sesin en la barra de tareas en la ltima lnea
de la pantalla.

Para cerrar Dreamweaver CS5, podemos utilizar cualquiera de las siguientes
operaciones:
Hacer clic en el botn cerrar X en la esquina superior derecha, como en
cualquier ventana de Windows.
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.








1.6. Abrir y 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 (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 CS5.

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.




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


1.7. Mi primera pgina

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.

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.

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.

Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina
web que estamos creando. Gurdala en la carpeta donde vas a guardar la pgina que
acabas de crear.

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 CS5 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.

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 <Nuevo 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


Selecciona la segunda lnea de texto, y seleccionando como antes <Nuevo 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, en Regla de destino selecciona <Nuevo estilo en lnea> y centra el prrafo como
hemos visto hasta ahora, pulsando en

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 miprimerapagina.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.