Unidad 1.

Conceptos bsicos de Dreamweaver CS6

Qu es 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.
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 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 que
veremos en la unidad 18.
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 compatibilidad 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 rpido a las actualizaciones y se puede disponer de los
archivos de trabajo en cualquier ubicacin con acceso a internet.
Adems hay funciones que slo estn 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.
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 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 laborioso 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 entender lo que estamos
haciendo y podremos aprender HTML 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.
Por otro lado, hay grandes empresas de Internet que ofrecen otras alternativas para
publicar en Intenet de forma gratuita en forma de blog. Como por ejemplo, Blogger de
Google o MySpace de Microsoft. Un blog tiene una estructura definida y no ofrece tanta
libertad como una pgina web a la hora del diseo.
Tambin tenemos Google Sites que permite modificar directamente el cdigo HTML.
En el resto del curso nos referiremos preferentemente a pginas web creadas desde cero
por el usuario, sin restircciones de diseo.
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. La terminacin hace referencia al pais (.es para Espaa,
.com.mx para Mxico, .pe para Per, ...) o al tipo de pgina (.com para comerciales, .org
para organizaciones, .mobi para telfonos mviles o celulares, ...)
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.
Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.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 CS6
Veamos las dos formas bsicas de arrancar Dreamweaver CS6.
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 CS6 y haz clic sobre l
para arrancar el programa.
Desde el icono de Dreamweaver CS6 del Escritorio, si lo tienes .
Puedes arrancar Dreamweaver CS6 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,
Para cerrar Dreamweaver CS6, podemos utilizar cualquiera de las siguientes
operaciones:
Hacer clic en el botn cerrar , 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 clic sobre el men Archivo y elegir la opcin Abrir reciente. Muestra los ltimos
archivos abiertos.
Hacer clic sobre el men Archivo y elegir la opcin Examinar en Brigde. Se abrir el
programa Brigde que muestra las carpetas y archivos de forma grfica.
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 CS6.
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.
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.
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 con el segundo botn de la
parte derecha , tal y como muestra la imagen siguiente:

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.
Si pulsas aqu podrs ver cmo debera haber
quedado la pgina despus de haber seguido
todos los pasos anteriores. Compara esta pgina
con la tuya, para ver si lo has hecho todo bien.