DreamWeaver. CS5 y CS6. Cursosindustriales. Curso de DreamWeaver CS6 1

Transcripción

1 DreamWeaver CS5 y CS6 Cursosindustriales. Curso de DreamWeaver CS6 1

2 DREAMWEAVER CS5. ENTORNO DE DESARROLLO. Dreamweaver es una aplicación propietario que facilita la labor del desarrollador Web y le permite realizar páginas Web sin necesidad de tener conocimientos extensos del lenguaje HTML. Dreamweaver pertenece a ADOBE empresa que se ha especializado en el desarrollo de herramientas de edición de diversos sectores. Por tanto, Dreamweaver no es gratuito; es de pago. Pero puedes descargarte la versión de evaluación (prueba) de 30 días desde la página de Adobe en la siguiente dirección. Desde aquí te puedo decir que si vas a enrrutar tu futuro hacía el mundo del diseño Web y la administración de sitios Webs, te recomiendo que compres la licencia para tener el producto original. También te digo que si no tienes dinero, en internet existen multitud de alternativas para conseguir Dreamweaver de manera gratuita, aunque ese camino lo tendrás que andar tú solito. Este curso está redactado, diseñado, compilado y distribuido por Cursosindustriales.net. El autor del mismo te da derecho a compartirlo, imprimirlo, usarlo y modificarlo siempre que referencies la procedencia del curso y que en este caso es de Cursosindustriales.net y su autor Deimos_hack. Si has conseguido este curso y has tenido que pagar por ello, envíame un correo a administrador@cursosindustriales.net y enseguida me pondré en contacto contigo. Si quieres ayudar al proyecto Cursosindustriales, haz una donación mediante PayPal en los puntos autorizados de la Web. Cursosindustriales. Curso de DreamWeaver CS6 2

3 Este curso es la segunda parte del curso de diseño Web y multimedia de cursosindustriales.net. Si aún no has visitado el anterior curso de HTML, puedes visitar el enlace de curso de HTML. ENTORNO DE DESARROLLO Lo primero que observas cuando ejecutas el Dreamweaver CS5, es la pantalla principal la cual te permite varias opciones, como pueden ser seleccionar los elementos recientes, crear nuevos elementos o acceder a la ayuda en línea que conectará con un servidor de ADOBE. A la derecha de la pantalla, y según ésta configuración de mi área de trabajo, tenemos la ventana de grupo de paneles en la cual tengo desplegado los paneles de servidores y la ventana de archivos. Cursosindustriales. Curso de DreamWeaver CS6 3

4 En la parte inferior, tenemos la ventana de propiedades; esta ventana te permite organizar el contenido de la Web e insertar unos pocos estilos visuales generales como la alineación, la sangría, el texto en itálica o en negrita o ambos, y agregar una clase CSS al documento, entre otros. En la parte superior tenemos la barra de menú muy parecido a cualquier otro programa con las funciones básicas como Abrir, Guardar, Cerrar, Copiar, Pegar, Deshacer... y otras opciones que irás conociendo a su tiempo. La barra de herramientas rápida proporciona accesos directos para la configuración del área de trabajo y para la creación de nuevos sitios. Entre otros. La barra de herramientas, proporcionará todas las funciones y las etiquetas HTML que utilizarás en tu página Web. Cursosindustriales. Curso de DreamWeaver CS6 4

5 Además proporciona otras herramientas para insertar material anexo al código HTML como pueden ser Objetos que más adelante estudiarás. En la barra de menús está la opción para configurar el área de trabajo: Si has trabajado antes con versiones de Dreamweaver, estarás cómodo al trabajar con esta configuración. Entre la ventana principal y la ventana de propiedades, está la barra de estado: Esta barra te muestra las características de la página seleccionada y te indica el tiempo que invertirá el navegador en cargar; la codificación de la página Web y te permite usar un ZOOM para personas con problemas de vista. Hay que decir que todas las ventanas del grupo de paneles son configurables y se pueden acoplar en cualquier parte del documento Dreamweaver CS5. Cursosindustriales. Curso de DreamWeaver CS6 5

6 PARA EMPEZAR Una vez familiarizado con el entorno de desarrollo del Dreamweaver CS5, para empezar a prácticas necesitamos un nuevo sitio. Un sitio es la carpeta principal en la cual se van a guardar todos tus archivos que utilizarás en tu sitio Web; archivos tipo HTML, imágenes, videos, textos, etc. A mí me gusta tener organizado en carpetas todo el contenido para así, si tengo que revisar o buscar algo, me sea de ayuda encontrarlo rápidamente. Para ello, dentro de la carpeta principal del sitio, creo nuevas carpetas y las renombro como imágenes, videos, otros. Más adelante cuando tengamos muchos archivos dentro de nuestro sitio Web, verás que es muy necesario un orden para no perdernos en nuestro propio sitio. Nuevo sitio. En la barra del menú pincha sobre Sitio y se te abrirá un submenú que te permitirá crear un nuevo sitio, entre otras opciones. Pulsamos sobre Nuevo Sitio y se nos abrirá una ventana para crear un nuevo sitio. Cursosindustriales. Curso de DreamWeaver CS6 6

7 En esta ventana podemos ver que estamos dentro de una serie de menús y por defecto se abre la ventana de Sitio. En este menú se muestra claramente dos TextBox rellenables en los cuales te pide un nombre para tu nuevo sitio y el otro es la dirección que va a tener el sitio en tu ordenador (Cuando lo tengas que subir al servidor ya verás cómo proceder). Te aconsejo que le des un nombre que sea relacionado con el tipo de Web que vas a crear. Pero para el seguimiento de Cursosindustriales, y según hicimos en nuestro curso de HTML, escogeremos la misma carpeta que creamos en Cursosindustriales. Curso de DreamWeaver CS6 7

8 nuestro escritorio y que se llamaba pruebas para guardar los archivos de nuestro sitio. Por lo tanto de nombre ponle Pruebas y en el sitio local selecciona la dirección de dicha carpeta en el escritorio pinchando sobre el icono de la carpeta que tiene al lado. Si no tienes ésta carpeta de pruebas, pincha sobre el icono de la carpeta, y se te abrirá una ventana del directorio de Windows que te permite seleccionar un directorio o crear uno nuevo en el directorio que quieras. Una vez seleccionada la carpeta simplemente dar en Abrir y Aceptar para que se cierre la ventana de Windows; y después seleccionar en la ventana de sitio, Guardar. Ahora tienes un nuevo sitio que Dreamweaver CS5 utilizará para guardar tus archivos. Cursosindustriales. Curso de DreamWeaver CS6 8

9 Organización del espacio de trabajo. Ahora vamos a configurar y te voy a mostrar los espacios de trabajo que existen. Tú trabajarás con el más adecuado para ti, por lo que te recomiendo que te familiarices con ellos. Pincha en la barra de menú sobre la parte de configurar el área de trabajo. Vamos a estudiar cada una de ellas. Cursosindustriales. Curso de DreamWeaver CS6 9

10 DESARROLLADOR DE APLICACIONES Esta área de trabajo está designada para aquellos que han utilizado ya el programa y tienen un conocimiento del código HTML óptimo, para así ir revisando el código según se escribe. Como puedes ver el grupo de paneles se ha situado en la parte izquierda de tu pantalla. La ventana principal de desarrollo se ha dividido entre la pantalla de diseño y la pantalla de código fuente, pantalla mostrada por defecto; mientras escribas en una pantalla se traducirá en la otra; es decir, si escribes en la pantalla del código fuente, en la pantalla de diseño, se mostrará todo el contenido desarrollado en la pantalla anterior. Eso sí, si escribes en la pantalla de código, debes de utilizar los caracteres HTML para que se muestre de forma adecuada en la pantalla de diseño. De forma inversa, si escribes en la pantalla de diseño, en la pantalla de código se va escribiendo todo el código HTML que leerán los navegadores y que como Cursosindustriales. Curso de DreamWeaver CS6 10

11 verás al incluir caracteres especiales en la pantalla de diseño se traducirán a su código HTML correspondiente en la pantalla de código (siempre que no incluyas el tipo META ni la codificación UTF en el documento Web). El resto del área de trabajo se mantiene igual que el anterior estilo de trabajo. DESARROLLADOR DE APLICACIONES AVANZADO Este área de trabajo más profesional y se puede ver como el grupo de paneles se ha dividido en dos partes que un administrador Web usará continuamente; en la parte izquierda de la pantalla queda el grupo de estilos CSS que se aplicarán a la página y el grupo de Archivos del sitio. En la parte derecha de la pantalla, se muestra el grupo de panales de comportamientos de bases de datos, conexiones y vinculaciones dinámicas, que más tarde estudiarás. Cursosindustriales. Curso de DreamWeaver CS6 11

12 PROGRAMADOR La única diferencia con otras áreas de trabajo es que el grupo de paneles se ha situado a la izquierda de la pantalla y se ha agrupado en TABSPANELS para su inmediata localización y accesibilidad. DISEÑADOR CLÁSICO Igual que el área de trabajo anterior, pero el grupo de paneles dinámicos a la derecha de la pantalla (muy similar al de desarrollador de aplicaciones avanzadas). PANTALLA DOBLE He saltado los otros diseños porque son muy similares a los anteriores y he pasado a este directamente porque la organización de área de trabajo es más bien caótica. Cursosindustriales. Curso de DreamWeaver CS6 12

13 Esta área de trabajo se ha dividido en tres parte claras: El grupo de paneles a la izquierda en forma de TABPANEL. La pantalla principal en el centro. Y el explorador de código en la derecha. Todas las ventanas son configurables y desacoplables. Está configuración es una configuración avanzada para programadores con experiencia en el manejo de Dreamweaver CS5. Cursosindustriales. Curso de DreamWeaver CS6 13

14 Existen otras configuraciones predefinidas que puedes ir comprobando tú mismo, pero te aseguro que cuando elijas una configuración, no la vas a volver a cambiar. Área personalizada. Dreamweaver, al igual que muchos otros IDE s permite modificar el área de trabajo y ponerlo a tu gusto; puedes mover el grupo de paneles y elegir el que más vas a usar, quitarlo, sacarlo fuera, y moverlo a otro lado del área de trabajo, etc. También puedes cambiar el sitio de los menús de herramientas o el de título entre otros. Para ello, cada ventana del menú tiene el símbolo que te permitirá arrastrar el menú correspondiente y situarlo en la zona del área que más te agrade. Por ejemplo, vamos a cerrar la ventana de herramientas en un área clásica: Dejamos pinchado sobre la marca, y arrastramos la ventana. Al soltar el ratón se mostrará así la pantalla. Cursosindustriales. Curso de DreamWeaver CS6 14

15 Para volver a ponerla en su sitio, pincha sobre la zona gris y llevala a la parte izquierda de la pantalla en la zona superior hasta que aparezca una marca azul, momento en el cual hay que soltar y la ventana de herramientas se acoplará directamente al lugar adecuado. Puedes modificar cualquier ventana y llevarla a la zona del área de trabajo que más te agrade y cómodo sea de usar. NUESTRA PRIMERA PÁGINA HTML Una vez creado el sitio Practicas, y configurado correctamente nuestra área de trabajo, vamos a crear nuestra primera página HTML con Dreamweaver CS5. Para crear una nueva página HTML, pulsa sobre Archivo, después en Nuevo y en el menú que se te despliega sobre Página HTML. Sobre este menú desplegable te puedo decir que accedes a él pulsando CONTROL + N y que está ventana te permite elegir una variada cantidad de archivos como páginas ASP, PHP, XML, hoja de estilos, Scripts y una gran variedad de estilos y bibliotecas. Al pulsar sobre Nueva página HTML se te abre la ventana principal con el fondo en blanco (si tienes la ventana de diseño activa) para que puedas introducir texto como si de un documento de Office se tratara. Dreamweaver CS5 ya crea la estructura de la página Web por defecto sin que Cursosindustriales. Curso de DreamWeaver CS6 15

16 te tengas que preocupar de ello como tenías que hacer con HTML cuando tenías que crear una página Web. La estructura básica de la página: <!DOCTYPE HTML> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>documento sin título</title> </head> <body> </body> </html> La primera línea <!DOCTYPE HTML> indica que es un documento HTML y por sintaxis de lenguaje siempre irá antes de la etiqueta <HTML>. No es necesario el uso de esta etiqueta pues el navegador la ignora, pero le hace entender que el documento está creado dentro de unas normas de normalización y estandarización del lenguaje HTML. La segunda línea, es la etiqueta de apertura del documento Web <HTML>. Lo que pasa que se ha agregado un espacio de nombres para que el documento tenga una cobertura de sintaxis. La tercera línea inicia la cabecera del documento Web. La cuarta línea, dentro de la cabecera, es importante ya que es una etiqueta META y que especifica la codificación de la página Web. La codificación de la página es importante, pues de no incluir esta codificación en la página Web, si escribes texto en la pantalla de diseño, en el código fuente se mostrará el texto de acuerdo lo has escrito, lo que el código HTML no se reproducirá adecuadamente y los caracteres especiales como guiones, acentos, diéresis, producirán un error en el visionado al ejecutar la Web. Es importante conocer la zona de ejecución de la página y la región que está disponible para tu zona. En Europa y España se utiliza la UTF8 que te permite visualizar correctamente las palabras acentuadas en la página Web, aunque en el código no hayas utilizado la sintaxis adecuada para esas palabras. Esta etiqueta es opcional, pero si no la incluyes, deberás de introducir Cursosindustriales. Curso de DreamWeaver CS6 16

17 manualmente en la pantalla de código las palabras especiales para que se reproduzcan adecuadamente en la página Web. El resto del código es muy conocido y creo que no tiene sentido retrasarme en explicarlo. Guardar el documento. Ahora podemos guardar el documento. Para ello, pulsa en Archivo y Guardar. Al ser la primera vez que guardas el archivo te saldrá la ventana Windows en la cual guardarás el proyecto y que por defecto, será la ventana del sitio que has creado anteriormente. También puedes guardar el documento pulsando CONTROL + S. Para estar bien organizado, todo sitio Web debe de tener una página principal a la cual se accederá para navegar por ese sitio. Esta primera página la vas a poner el nombre de index. Por lo general los servidores Web, cuando subes un sitio Web, buscan el archivo index para inicializar el sitio, pero no tiene por qué ser así, y tu página principal llamarla como te plazca. Cursosindustriales. Curso de DreamWeaver CS6 17

18 Pero volviendo a lo de la presentación y la codificación, por norma general la página principal del sitio se llamará index para empezar a familiarizándonos con el lenguaje de servidor que más tarde estudiaremos. Pulsa sobre Guardar y habrás creado tu primera página con Dreamweaver CS5 sin haber usado nada de código fuente. En el SELECT de tipo de documento, Dreamweaver CS lo guarda automáticamente con extensión HTML ya que ha sido el proyecto que has elegido anteriormente; pero pinchando en la flecha de tipo de proyecto te salen otras extensiones para guardarlo. En la carpeta del sitio se ha creado una página HTML llamada index.html y que si la abres estará en blanco porque no hemos introducido nada. Hasta aquí una rápida introducción al entorno de desarrollo Web de Dreamweaver CS5 / CS6. En el siguiente capítulo entraremos en detalle en la barra de menú y en las configuraciones internas para adecuar la página Web a nuestra configuración. Cursosindustriales. Curso de DreamWeaver CS6 18