Dreamweaver
Introducción.
El programa Dreamweaver de Macromedia es uno de los programas más utilizados en todo el mundo para la creación de paginas WEB . Es empleado tanto por profesionales como por personas que se inician en la creación de su primera pagina web.
De hecho muchos lo consideran ampliamente superior a otros programas similares, tales como FrontPage de Microsoft . Aquí no vamos a entrar en quien tiene o deja de tener razón. Lo que si vamos a hacer es tener una primera aproximación a la última versión de Dreamweaver : la versión 7 de Macromedia Dreamweaver MX 2004.
Iniciar Dreamweaver
El primer paso para utilizar un programa es iniciarlo.
El programa Dreamweaver de Macromedia , al igual que casi todos los programas que se pueden ejecutar en un entorno Windows puede iniciarse por varios caminos distintos. Dependiendo tanto de la configuración que hayamos elegido durante su instalación, como de nuestras preferencias personales.
En esta lección aprenderemos varias de ellas, luego dependerá de sus gustos personales elegir una u otra de ellas para iniciar la aplicación Dreamweaver.
La forma más sencilla es pulsar con un doble click del ratón sobre el icono de Dreamweaver situado en el escritorio
Otros lugares desde donde podemos iniciar el programa Dreamweaver es desde el botón de inicio, situado en el esquina inferior izquierda del escritorio.
Cuando pulsemos sobre el se desplegara el menú inicio. Y pulsaremos sobre el icono de Macromedia Dreamweaver MX 2004
Por último hay un lugar más desde donde podemos iniciar el programa:
Sólo tenemos que pulsar en Todos los programas. Y después en la carpeta Macromedia
Y finalmente en la opción de Macromedia Dreamweaver.
Y ya tendremos lista la aplicación para poder utilizarla.
Entorno de Trabajo
El programa Dreamweaver es una aplicación muy completa con un gran numero de funcionalidades muy potentes, pero a la vez esta diseñada para hacer mas comodo el trabajo al usuario.
Naturalmente tener una aplicación con un gran numero de funciones implica un gran numero de botones, menús, opciones y pulsar cientos de clicks, que a primera vista puede resultar muy complicados ¿Entonces cómo puede Dreamweaver combinar a la vez potencia y comodidad?
Esto lo hace permitiendo que el usuario personalice a su gusto el entorno de trabajo. En esta lección vamos a familiarizarnos con las principales áreas de trabajo de Dreamweaver.
En la imagen inferior vemos señalada la barra de titulo , en ella además de ver el nombre de la aplicación, el titulo de la pagina que tengamos activa, también veremos los iconos de gestión de ventanas típicos de Windows
Debajo de la barra de titulo tenemos la barra de Menús , en ella tenemos acceso a todos los menús, desde los cuales podemos manejar con eficiencia las numerosas opciones de Dreamweaver
Debajo de la barra de Menús, nos encontramos la barra de los grupos de paneles, la cual es contextual, esto significa que va cambiando dinámicamente según la tarea en la que estemos trabajando. Mas en adelante la veremos funcionando en detalle.
En el centro de la pantalla nos encontramos con la pantalla de inicio. Este contenido aparece cuando no tenemos ningun documento activo y podemos distinguir tres zonas distintas
En la zona de la izquierda: vemos la lista de los documentos usados mas recientemente y nos da la opción de abrir cualquiera de ellos rápidamente pulsando sobre ellos.
En la zona central: podemos crear un nuevo documento en blanco en cualquiera de los formatos mostrados.
En la zona de la derecha: Dreamweaver nos permite utilizar unas plantillas de ejemplos para crear nuestros documentos de una manera rápida y sencilla.
En la izquierda y en la zona inferior de la ventana de dreamweaver tenemos otros paneles con funciones avanzadas
Las cuales iremos descubriendo a lo largo del curso, según los necesitemos, para no hacer demasiado áridos los primeros temas.
Ventana del Documento
En esta lección y la siguiente vamos a seguir descubriendo las distintas zonas de trabajo de la aplicación Dreamweaver de Macromedia.
En esta lección nos centramos en los iconos que están relacionados con la ventana del documento. En la ventana del documento es donde visualizaremos y editaremos la página web en la que trabajemos.
Aquí tenemos abierto un documento llamado “Untitled-1”
En la imagen superior vemos que la barra del titulo del documento tiene los típicos controles de minimización, maximización y cerrar ventana. Esto es útil en el caso de que tengamos abiertos simultáneamente varios documentos.
En la parte inferior de la ventana de Dreamweaver tenemos la barra de estado
En la parte inferior derecha de la barra de estado podemos ver varios indicadores muy útiles. Con el de la derecha Dreamweaver nos indica el tamaño del documento en KiloBytes y el tiempo que un navegador estándar tardaría en visualizar completamente la página con una conexión telefónica a Internet.
A su izquierda Dreamweaver nos indica las dimensiones en pixels de la página que estamos creando.
Podemos elegir entre una lista de tamaños predeterminados. El tamaño optimo depende de las dimensiones del monitor o pantalla en que se visualice la página. Dado que por ahora la mayoría de los usuarios de Internet tienen monitores de 800x600 píxeles . Si diseñamos una página con un tamaño superior provocamos que las personas que nos visiten visualicen incorrectamente nuestras páginas. Debemos tener muy presente que el objetivo de nuestra página es que sea vista por el mayor numero posible de personas, por lo que no debemos poner trabas innecesarias a nuestros visitantes.
Vistas de Edición
En la barra de documentos en la esquina superior derecha vemos tres botones que modifican la vista de trabajo del documento:
“Codigo”, “Dividir” y “Diseño”:
Son las tres formas que Dreamweaver nos permite visualizar el documento para su edición.
En la vista “ Código ” Dreamweaver nos muestra el código HTML de la página y nos permite editar directamente las instrucciones con las que el navegador del usuario mostrará la página.
Mas adelante veremos que significa esto exactamente.
En la vista “ Diseño ” Dreamweaver nos muestra la página tal como se visualizará en el navegador del usuario, podemos editarla sin necesidad de conocer el lenguaje HTML.
Por último, la vista “ Dividir ”, nos muestra simultáneamente el código y la vista de diseño, de esta manera podemos escribir instrucciones en lenguaje HTML en la página e instantáneamente comprobaremos como se visualizaría en un navegador.
De toda maneras si queremos ver en pantalla completa como se visualizaría la página podemos pulsar en el icono de previsualización
Y Dreamweaver abrirá una ventana del navegador que tengamos asociado por defecto y nos mostrara la pagina completa. En la ventana de previsualización podemos detectar tanto los errores de diseño como los de código, y directamente corregirlos en la aplicación de Dreamweaver sin tener que grabar y abrir el documento con cada prueba
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes. |
 |
El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc. Pulsando sobre el botón Seguramente será la herramienta de Dreamweaver que más vayas a utilizar. |
se despliega para mostrar más opciones. Este botón se encuentra en la esquina inferior-derecha.
|
La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú Insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc. Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez. |
Abrir un Documento Nuevo
Ya hemos visto las principales zonas de trabajo de Dreamweaver. Ahora, en las próximas lecciones vamos a aprender las operaciones básicas de manejo de documentos tales como crear un nuevo documento, grabarlo para poder recuperarlo en el futuro, abrir documentos almacenados...
El primer paso es abrir un documento nuevo. En la Lección 3 de este curso de dreamwaever aprendimos una forma de crear documentos nuevos.
Ahora vamos a ver otra forma de crear nuevos documentos .
Para ello debemos ir a la barra de menús . Y pulsar en el menú Archivo
En el menú que se desplegara, buscaremos la opción Nuevo y pincharemos en ella con el botón izquierdo del ratón
Se nos abrirá una ventana como la que vemos en la imagen inferior. En ella podremos elegir entre diversos tipos de documentos, el que deseemos crear.
Nosotros pulsaremos en la pestaña General y en el panel de la izquierda llamado categoría elegiremos “Página básica”. El panel de adyacente cambiara de manera contextual dependiendo que opción hayamos elegido en el panel de categorías. Como por ahora hemos elegido página básica. Este será el titulo del panel y entre las distintas opciones pulsaremos sobre HTML.
Vemos que hay una gran variedad de documentos que podemos crear desde aquí. Más adelante veremos algunos de ellos, a medida que los necesitemos.
Guardar un Documento
Una vez que hemos aprendido a crear documentos nuevos, cuando hayamos terminado de trabajar con ellos, necesitaremos aprender a guardarlos para poder recuperarlos en el futuro.
Para ello desplegaremos de nuevo el menú archivo y buscaremos esta vez la opción guardar.
Al pulsar sobre la opción guardar se nos abrirá una ventana titulada “Guardar como”. En ella vemos varias zonas importantes.
En la zona superior podemos elegir la carpeta donde queramos guardarlo, es donde pone “Guardar en”.
Y en la zona inferior introduciremos el nombre con el que deseamos conservar el documento.
Para finalizar sólo tenemos que pulsar el botón guardar en la ventana activa.
En esta lección hemos aprendido otra manera de crear documentos nuevos con dreamweaver y también hemos aprendido a guardarlos.
Recuperar un Documento
En la lección anterior aprendimos a guardar documentos creados con dreamweaver. En esta lección aprenderemos a recuperarlos para poder trabajar con ellos.
El primer paso es ir al menú archivo, pulsaremos sobre el con el botón izquierdo del ratón. Y en el menú que se desplegará buscaremos la opción abrir.
Una vez que hayamos pulsado sobre la opción abrir del menú archivo. Aparecerá una ventana de dialogo como la que vemos en la ventana inferior. Es un cuadro de dialogo muy semejante al que ya conocimos cuando guardamos el documento
En la zona superior podemos navegar por las distintas carpetas hasta encontrar el lugar donde tenemos almacenado el documento.
Cuando hayamos encontrado la carpeta solo tendremos que elegir de entre la lista mostrada el titulo del documento que deseemos abrir y pulsaremos sobre el con el botón izquierdo del ratón.
Cerrar un Documento
Una vez que hemos aprendido a crear un documento, a guardarlo y a recuperarlo. Vamos a aprender ahora a cerrar el documento. Esto lo haremos cuando hayamos acabado de trabajar con el documento en cuestión, bien porque ya no lo necesitemos mas, o por que tengamos muchos documentos abiertos y necesitemos despejar un poco el área de trabajo.
Para ello iremos otra vez al menú archivo, tal como ya sabemos. Y allí pulsaremos en la opción cerrar. Tal como vemos en la imagen inferior
Y ahora, en el caso de que hayamos modificado el documento, vemos que nos aparece un cuadro de dialogo como el que vemos en la siguiente imagen.
En este cuadro nos pregunta, en el caso de que hayamos modificado algo desde la ultima vez que grabamos el documento, si queremos guardar los cambios en el documento en el que hemos estado trabajando.
Si pulsamos no, todos los cambios realizados desde la ultima grabación serán descartados. Esto es util en el caso de que no nos guste nuestra pagina y prefiramos una versión anterior de ella, esto es algo que suele pasar mas a menudo de lo que nos gusta reconocer.
O bien, si pulsamos sí. Se guardaran los cambios realizados sobre el documento.
Pero, atención, es posible que hayamos cometido un error y hayamos pulsado el botón si, de manera mecánica.
Dreamweaver nos da una ultima oportunidad para meditarlo y nos muestra otra ventana de dialogo como la inferior.
Por ultimo, una vez que hayamos guardado, o no, los cambios sobre la pagina solo nos queda salir del programa. Y para ello volveremos al menú archivo.
Buscaremos en el final del menú y pulsaremos sobre la opción “Salir”
Una vez que pulsemos aquí, el programa de dreamweaver se cerrara y nos mostrara el escritorio.
El Sitio
Introducción a la configuración de “El Sitio”:
Ya hemos tenido nuestro primer contacto con el entorno Dreamweaver .
Hemos aprendido cuales son las diferentes partes de la ventana de trabajo de Dreamweaver y a movernos entre ellas. También hemos aprendido las funciones más básicas, tales como crear una página nueva, guardarla, cerrarla y como recuperarla.
Pero no debemos olvidar una cosa, hasta ahora sólo hemos creado una página web en blanco. Pero las “páginas de verdad” tienen contenido y este contenido puede formarse con diversos documentos que puede ser desde otras páginas html, imágenes, scripts, animaciones, hasta cualquier tipo de objeto que podamos vincular en una página html.
El conjunto de todos estos documentos que forman parte de la página se llama en el lenguaje de las páginas web un “Sitio”, “site” en ingles.
En esta lección, y las siguientes, vamos a aprender a diseñar un Sitio para albergar nuestras páginas y sus elementos, de una forma sencilla y didáctica.
Ahora que sabemos lo que es un Sitio vamos a configurarlo paso a paso.
Todas las opciones de configuración están en el menú Sitio de la barra de menús.
Pulsando sobre el menú Sitio, se despliega el menú. Para configurarlo por primera vez pulsaremos en la opción Administrar sitios
Dreamweaver abrirá una ventana de dialogo con todas las opciones para administrar el sitio. Como aun no tenemos creado ninguno, pulsaremos en el botón Nuevo.
Y Dreamweaver nos preguntará que es lo que queremos crear exactamente ¿un Sitio o un Servidor FTP y RDS?. Por ahora sólo vamos a crear un Sitio
Configurar un Sitio Nuevo
En la lección anterior comenzamos a configurar un Sitio nuevo, ahora vamos a continuar
Acabamos la lección anterior confirmando en la ventana de dialogo que queríamos crear un nuevo Sitio. Pulsaremos sobre la opción sitio
Veremos que se abre otra ventana de dialogo, ahora iremos contestando a las preguntas que nos va haciendo Dreamweaver y pulsaremos el botón siguiente después de rellenar cada ventana con las respuestas que nos pide.
La primera cuestión que Dreamweaver nos plantea es el nombre del sitio. Es muy util que el nombre tenga una fuerte relación con el contenido de la página para poder recordarlo fácilmente
La respuesta a la siguiente pregunta dependerá de la tecnología con la que deseemos trabajar. Ya dijimos antes que una página web puede enlazar documentos de muy diferentes tipos, algunos de ellos son utilizados para intercambiar información con el servidor. En esta opción elegimos el tipo documento dependiendo de las características del servidor con el que trabajaremos.
Para este curso no vamos a utilizar las tecnologías de servidor, asi que elegiremos la opción “No”
La cuestión de abajo se interesa en la forma en como subiremos las páginas que creemos al sitio de Internet. Por ahora no vamos a preocuparnos de esto y por lo tanto elegiremos la opción Ninguno.
Editar un Sitio
En las lecciones anteriores ayudamos a Dreamweaver a configurar nuestro sitio. En esta lección vamos a personalizar un poco más nuestro sitio para adecuarlo a nuestras necesidades de trabajo.
Para ello volvemos a la ventana de dialogo “Administrar sitios”
Y esa vez, como ya tenemos creado el sitio “CursoDreamweaver ” pulsaremos el botón Editar.
Y en la ventana de dialogo. Pulsaremos en la pestaña “Avanzadas”. Y en el menú “categoría” pulsaremos la opción “Datos locales”
En la sección “Datos locales” podemos cambiar y ajustar los valores del sitio, tales como “Nombre del sitio”, que ya conocemos. Y la “Carpeta raíz local”, esto significa que podemos designar manualmente la carpeta donde deseemos situar las páginas que creemos y los documentos vinculados a ella.
Con la opción “Actualizar lisa archivos” nos aseguramos que cuando modifiquemos un archivo se actualice automáticamente las carpetas locales durante las copias.
Por último con la opción “carpeta predeterminada de imágenes” le diremos a Dreamweaver donde situaremos agrupadas todas las imágenes con las que trabajemos, esto es muy útil para no tener múltiples rutas lo que nos evitan posteriormente muchos errores de vinculación.
Por último, en las opciones de la imagen inferior, configuramos la dirección http de nuestro sitio, con lo que Dreamweaver detecta y distingue automáticamente las direcciones www de páginas internas a nuestro sitio, con lo que se ahorran tiempo al navegar.
Con la opción caché, Dreamweaver , actualiza y gestiona todos los cambios de las páginas y sus enlaces interiores automáticamente, por ejemplo si cambiamos una imagen no tenemos que ir modificando una a una todas las páginas.
Opciones Adminisitrar Sitios
Ya hemos aprendido a configurar el sitio, ahora veremos rápidamente el resto de las opciones de la ventana de dialogo “Administrar sitios”. Que nos ayudaran a gestionar más fácilmente nuestro sitio.
Las opciones nuevo y editar, ya las conocemos, por lo que no nos reiteramos más en el tema.
Las siguientes opciones son Duplicar, Quitar y Exportar.
Con duplicar conseguimos crear un duplicado del sitio que tenemos activo, con ello logramos duplicar totalmente la estructura del sitio. Es muy útil para crear duplicados perfectos del sitio en otros servidores, sobre todo si tenemos utilizarlo como plantilla de la estructura.
Cuando tengamos un numero importante de sitios, algunos de ellos estarán obsoletos o simplemente no los necesitaremos más, podemos eliminarlos pulsando el botón Quitar.
La opción Exportar nos permite guardar las características del sitio en un archivo XML, de forma que con un sólo archivo podemos guardar, recuperar, e incluso compartir con otras personas las características del sitio fácilmente
Las últimas opciones son Importar, Ayuda y Listo.
Importar es la opción complementaria de Exportar, con ella podemos crear un nuevo sitio a partir de las características de otros sitio exportado.
La opción ayuda, se explica en si misma.
Cuando hayamos terminado de administrar el sito, simplemente pulsaremos el botón "Listo" y todos nuestros cambios serán actualizados.
Bibliografía:
http://www.aulafacil.com/AulaDream/Dream/temario.htm
http://www.aulaclic.es/dreamweaver8/index.htm
http://www.blogdelwebmaster.net/varios/video-tutorial-de-dreamweaver-8/
