1.1. Qu es Dreamweaver CS6Dreamweaver CS6 es un software fcil de usar que permite crearpginas webprofesionales.

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 deAdobe, 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.1.2. Novedades de Dreamweaver CS6En 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 dediferentes 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 permitenpasar propiedades CSS de un estado inicial a otro estado final de forma continua. Con transiciones se pueden lograr vistososefectos 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 queslo estan disponiblespara los suscriptores de Cloud, como la insercin de etiquetas HTML 5 desde el panelInsertar, la compatibilidad con Edge Animate o la bsqueda dinmica en Mac.1.5. Arrancar y cerrar Dreamweaver CS6

Veamos las dos formas bsicas dearrancarDreamweaver CS6. Desde el botn Iniciosituado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botnInicio, se despliega un men. Puedes comenzar a escribir el nombre del programa, y aparecer directamente. O puedes pulsar enTodos los programasy buscarlo en la lista con los programas que hay instalados en tu ordenador. BuscarAdobeDreamweaver CS6y haz clic sobre l para arrancar el programa. Desde el icono de Dreamweaver CS6del 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, como te explicamos aqu.ParacerrarDreamweaver 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 teclasAlt+F4. Hacer clic sobre el menArchivoy elegir la opcinSalir.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 documentosParaabrirun documento, puedes utilizar cualquiera de las siguientes operaciones: Hacer clic en el botn abrirde labarra de herramientas estndar(si est visible). Pulsar la combinacin de teclasCtrl+O. Hacer clic sobre el menArchivoy elegir la opcinAbrir.... Hacer clic sobre el menArchivoy elegir la opcinAbrir reciente. Muestra los ltimos archivos abiertos. Hacer clic sobre el menArchivoy elegir la opcinExaminar 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 opcinAbrir conAdobe Dreamweaver CS6.Para abrir un documentonuevo, puedes utilizar cualquiera de las siguientes operaciones.: Hacer clic en el botn nuevode labarra de herramientas estndar(si est visible). Pulsar la combinacin de teclasCtrl+N. Hacer clic sobre el menArchivoy elegir la opcinNuevo.Despus de esto aparecer una nueva ventana, en la que debers elegir laCategoraPgina en blanco.En la segunda columna seleccionamos HTML, observamos que hay muchos diseos ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseoninguno. A continuacin pulsamos el botnCrear.

Paraguardarun documento, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botnGuardarde la barra de herramientas estndar. Pulsar la combinacin de teclasCtrl+S. Hacer clic sobre el menArchivoy elegir la opcinGuardar.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. Paraguardar todopuedes realizar cualquiera de las siguientes operaciones. Hacer clic en el botnGuardar todode laBarra de herramientas estndar. Hacer clic sobre el menArchivoy elegir la opcinGuardar 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 opcinguardar 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 pginaPara que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear unapgina websencilla, 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 laCategoraPgina bsica,HTML,en la columna Diseo dejamos la opcin por defecto:.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 menModificary elegir la opcinPropiedades de la pgina.Entonces se abrir una ventana como la que aparece a continuacin:

EnColor de Fondoescribe#CCCCFF, de este modo el fondo del documento pasar a ser de color azul.Haz clic enTtulo/Codificacina la izquierda, y en elTtuloescribeMi primera pgina.Para aplicar los cambios, pulsa sobre el botnAceptar.Unidad 1. Conceptos bsicos de Dreamweaver CS6 (V)

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 aGuardar 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 (teclaEnter). Despus nos dirigimos al menInsertar, opcinImagen.

En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la que la habas guardado, seleccionarla y pulsarAceptar.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 menVentana, opcinPropiedades.Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es porque est contrado. Para que te aparezca desplegado debes hacerdoble clicenPropiedades.

Selecciona la primera lnea de texto. En el inspector de propiedades pulsaHTMLy aplica el formatoEncabezado 1(h1) seleccionando el valorEncabezado1del cuadroFormato.

Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el iconoCSSa la izquierda.Mediante el inspector de propiedades en Dreamweaver CS6 accedemos tanto a las propiedades deCSScomo a las propiedades deHTML.

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 mediantehojas 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. EnRegla de destinoselecciona, para aplicar el formato solo al texto seleccionado. Tambin aplica el estilo deFuenteArial, Helvetica, sans-serif, color azul#009y 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, marca los botonespara 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 sobrep.Ahora, enRegla de destinoseleccionay 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 dePropiedadesa las propiedades deHTML.En el campoVnculo, 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 menArchivo, desde la opcinGuardar.Puedes llamar al documento como lo desees, pero la extensin ha de ser htm o html. Por ejemplo, lo hemos llamadomiprimerapagina.htm, y la hemos guardado en la misma carpeta que la imagen descargada.Ahora, puedes ver cmo se ve en tu navegador pulsando la teclaF12.Sipulsas aqupodrs 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.

La pantalla inicial

Al arrancar Dreamweaver aparece unapantalla inicialcomo sta, vamos a ver sus componentes fundamentales. As conoceremos losnombres de los diferentes elementosy ser ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (y en general todas las de este curso) 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.

En el resto de esta unidad vamos a ir describiendo los puntos ms importantes sealados en esta imagen por los nmeros en azul del 1 al 9.1.- Las barras.2.- Las pestaas de documentos.3.- La barra de estado.4.- El panel de propiedades.5.- rea de paneles.6.- Paneles y ventanas.7.- Lnea inferior de pestaas.8.- Vista diseo del documento.9.- Vista cdigo del documento.2.2. Las barras1.- La barra de la aplicacin.

La barra la aplicacinse incorpor en la versin anterior de Dreamweaver. 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), variosbotones propios de la aplicacin, elconmutador de espacio de trabajoyuna caja de bsquedas para obtener ayudaon 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 elconmutador 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.Los mens, estn agrupados en categoras.

Al hacer clic enInsertar, 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.2.- 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 de la derecha, o acceder a otras acciones haciendo clic con el botn derecho, comoCerrar otros archivos.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.3.- 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 tenemos las herramientas de Seleccin, Mano (para desplazarse) y Zoom. Ms a la derecha encontramos tres iconos para ver la pgina en tres tamaos de pantalla: mvil, tableta y PC escritorio.Y al final hay otros datos como el tamao de la ventana, el tamao de la pgina o su codificacin.Hasta aqu las barras que siempre veremos en la aplicacin. A parte, existen otras que podemos ver u ocultar desde el menVerBarras de herramientas.

La barra de herramientas estndar.

La barra de herramientas estndarcontiene iconos para realizar las acciones ms habituales del menArchivoyEdicin. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el cdigo fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. Esta barra puede ser muy til, pero en realidad casi todo el mundo usa esos comandos directamente con el teclado (Ctrl+Gpara guardar,Ctrl+Cpara copiar, etc.)La barra de herramientas de documento.

Lacontiene iconos que nos permiten cambiar entre las distintas vistas de edicin y la vista en vivo, vistas previa en multipantalla, 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, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso. Hay varias opciones, como las de ver los estilos que dependen de pseudo clases activas, como cuando el cursor est sobre un elemento.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 laVista en vivo, como ya veremos.Como tambin veremos al personalizar el entorno, algunos paneles, comoInsertarnos permiten colocarlo como otra barra de herramientas.2.3. Inspectores y panelesDreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen comopaneles (ventanas)oinspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado, mientras que el panel nos da acceso a opciones generales fijas.A travs de la opcinVentana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. A continuacin vamos a ver el inspector de Propiedades y ms adelante veremos el panel Insertar.4.- El inspector de Propiedades

El inspector dePropiedadesmuestra las opciones propias del objeto o texto seleccionado, permitindonos editarlas, por lo que se convierte en uno de los elementos ms utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, como sucede en la imagen que puedes ver, mostrar su ubicacin, dimensiones, peso, clase, etc...En otros elementos, como prrafos y estilos, este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la pgina Web que estemos diseando.5.- rea de paneles.En la parte derecha de la pantalla tenemos el rea o pila de paneles.

Inicialmente, el rea de paneles contiene unos determinados elementos, pero podemosquitar y ponerlos elementos que queramos. Para quitar un elemento del rea de paneles basta hacer clic con el botn derecho sobre su nombre para que aparezca un men con la opcinCerrar. Para aadir un elemento al rea de paneles hay que ir al menVentanay hacer clic en el elemento que queramos aadir, si el elemento se abre en una ventana flotante, bastar arrastrarlo al rea de paneles.6.- Paneles.Una vez tenemos el ea de paneles con los elementos que ms nos interesen, podemos abrirlos o desplegarlos de tres formas.1. Abrir el panel dentro del rea de paneles.Para ello primero hay que expandir el rea de paneles pulsando el botn de la parte superior derecha, a continuacin, basta hacer clic en cada panel para que se abra dentro del rea de paneles. Para cerrar el panel hacer doble clic.Por ejemplo, en la siguiente imagen vemos el panelArchivosabierto dentro del rea de paneles. Se pueden abrir varios paneles a la vez y ajustar sus tamaos colocando el cursor en el borde inferior y arrastrndolo.

2. Abrir el panel al lado del rea de paneles.Para ello hay que partir del rea de paneles sin expandir, y al pulsar en un panel, este se abrir pegado al lado, como vemos en la siguiente figura.

3. Abrir como panel flotante. Para ello hay que pinchar en el ttulo del panel y arrastar el panel fuera del rea de paneles, el panel se puede colocar en cualquier zona de la pantalla, incluso fuera de la pantalla de Dreamweaver. Al hacer doble clic en el ttulo del panel, este se contrae pero sigue flotando en la misma posicin. Para expandirlo, volver a hacer doble clic. En al siguiente imagen vemos el panelArchivosflotando y epandido.

Hemos visto un inspector y ahora vamos a ver un panel, el panelInsertar.El panel Insertar.En el panelInsertar, encontramos todos los elementos que podemos encontrar en el menInsertar, clasificados en categoras.Podemos emplearlo para insertar imgenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.

Como vemos en las imgenes, es posible configurar este panel para verlo como men (imagen anterior), como panel flotante o como una barra de herramientas integrada en la ventana de trabajo (imagen siguiente).Personalizar el rea de trabajo es bastante intuitivo, pero si necesitas ayuda, te recomendamos este avanzado.7. Lnea inferior de pestaas.En al parte inferior de la pantalla tenemos una lnea que contiene varias pestaas (Buscar, Validacin , ... )Para abrir una pestaa basta hacer clic sobre ella, para cerrarla hacer doble clic en su ttulo.Estas pestaas se pueden configurar de forma similar a como acabamos de ver con el rea de paneles. Es decir, se pueden aadir y quitar, convertir en flotantes, etc.2.4. Vistas de un documento

Podemos editar el documento con distintas vistas, que puedes cambiar travs de labarra de documento:

8.- La vista DiseoLa vistaDiseopermite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.9.- La vista CdigoLa vistaCdigose utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo fuente. No permite tener directamente una referencia visual de cmo va quedando el documento segn se va modificando el cdigo.

El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vistaDiseo.- La vista DividirLa vistaDividirpermite dividir la ventana en dos zonas: Cdigo y Diseo. La zona izquierda muestra el cdigo fuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.

- La Vista en vivoLavista enVivoes una mejora reciente de Dreamweaver.Nos ofrece una vista del resultado final no editable. A diferencia de la vistaDiseo, que nos permite editar los elementos, esta vista nos permite interactuar con ellos, tal como lo haramos con el navegador.La funcin de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeos cambios se previsualizan correctamente en el navegador.No obstante, siempre hay que comprobar la pgina con los principales navegadores del mercado que sern los que emplearn nuestros visitantes. De hecho, a lo largo del curso vers cmo algunos elementos se ven de forma muy distinta si los vemos en la vista de diseo, en la vista en vivo o en el navegador. Tambin es conveniente comprobar la pgina con los distintos tamaos de pantalla, telfono mvil, tablet y PC.- La vista Cdigo en vivoEsta vista se emplea conjuntamente con laVista en vivo. Divide la pantalla como la vistaDividir, pero sin que podamos editar el cdigo. Lo que hace es que al seleccionar partes de la web en laVista en vivo, se seleccione su correspondiente cdigo fuente y refleja los cambios dinmicamente al interactuar con la pgina. Si adems pulsamos el botnpodremos ver los estilos asociados a cada elemento. Por ejemplo, al colocar el cursor sobre un prrafo podemos ver sus mrgenes, como se aprecia en la siguiente imagen.2.5. La ayuda

A travs del menAyudapuedes ir a varias opciones, veamos algunas de ellas: Si seleccionas la opcinAyuda de Dreamweavero simplemente pulsandoF1se accede a la ayuda en lnea de Adobe Community Help donde puedes buscar por temas o por bsqueda de palabras clave, . Ayuda de Business Catalyst que es un sistema de alojamiento de pginas web con funciones adicionales. Es de Adobe y hay diferentes opciones de pago al mes. Ayuda de Spry Framework. Veremos Spry Framework a partir de la unidad 14. Referenciaabre un panel en el que encontrars la sintaxis y descripcin de las etiquetas HTML. Acceder al Centro de soporte deDreamweaveren la web. Dreamweaver Exchange es un sistema para compartir extensiones. Acceder alForos en lnea de Adobe.Adems, en la barra de aplicacin encontramos una caja de bsqueda. Al introducir los trminos de la bsqueda y buscar, iremos a la ayuda online de Adobe.