COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

1Dreamweaver es un software fcil de usar que permite crear pginas web profesionales. Las funciones de edicin visual de Dreamweaver CS5 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. La pantalla inicial de dreamweaver es la que vemos en la imagen siguiente

Los mens, estn agrupados en categoras.

Al hacer clic en Insertar, 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. 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, como Cerrar otros archivos.

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

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 encontramos las herramientas de Seleccin, Mano y Zoom. Y 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 men Ver
Barras de herramientas.

La barra de herramientas estndar: La barra de herramientas estndar contiene iconos para realizar las acciones ms habituales del men Archivo y Edicin. De izquierda a derecha: Nuevo archivo, Abrir, , 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 + G para guardar, Ctrl + C para copiar, etc.) La barra de herramientas de documento.

La contiene iconos que nos permiten cambiar entre las distintas vistas de edicin y la vista en vivo, acceder cmodamente al ttulo de la pgina, o realizar las distintas opciones de validacin que nos ofrece el programa.

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

Inspectores y paneles
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, mientras que el panel nos da acceso a opciones generales. A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los ms importantes. El inspector de Propiedades

El inspector de Propiedades muestra 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, mostrar su ubicacin, dimensiones, peso, clase, etc... 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. El panel Insertar.

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

En el panel Insertar, encontramos todos los elementos que podemos encontrar en el men Insertar, 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, como panel flotante o como una barra de herramientas integrada en la ventana de trabajo.

Vistas de un documento
Podemos editar el documento con distintas vistas, que puedes cambiar travs de la barra de documento:

La vista Diseo La vista Diseo permite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable. La vista Cdigo La vista Cdigo se 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.

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseo. La vista Dividir La vista Dividir permite 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 vivo Nos ofrece una vista del resultado final no editable. A diferencia de la vista Diseo, 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.

Crear o editar un sitio web sin conexin a Internet

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

Una vez creadas las carpetas que formarn la estructura del sitio local, o por lo menos la carpeta raz, ya es posible definir el nuevo sitio. Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o directamente a Nuevo sitio. Recuerda que a travs del panel Archivos, se puede cambiar a cada uno de los sitios definidos. Tambin podemos acceder desde el icono de acceso rpido de la barra de la aplicacin a la opcin Administrar sitios oNuevo sitio...

Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo en la lista de sitios. La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no.

Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botn Listo.

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el men desplegable Archivos.

Ver el sitio
El panel Archivos (men Ventana
Archivos o tecla F8) es uno de los paneles ms importantes de Dreamweaver, ya que nos da acceso a los archivo del sito.

Dreamweaver guarda la cach de nuestro sitio, cmo se organizan los archivos y se relacionan entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde Dream automticamente actualizar todas las referencias a ese archivo (enlaces desde otras pginas, origen de la imagen, etc).

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las pginas no se mostrarn correctamente: no aparecern imgenes, no funcionarn enlaces, etc, ya que Dreamweaver simplemente no encontrar la pgina. Al modificar algn objeto que es referenciado por algn otro documento, se muestra una ventana similar a sta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados.

Simplemente hay que pulsar sobre el botn Actualizar, aunque esto depender de si tenemos configurada la opcin Mensaje al actualizar vnculos si movemos archivos. Lo cual podemos establecer desde el men Edicin, opcin Preferencias, categora General.

Propiedades del documento

Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc. Puede definirse el formato de cada una de las pginas a travs del cuadro de dilogo Propiedades de la pgina. Este cuadro se puede abrir de tres modos diferentes: y y y Pulsar la combinacin de teclas Ctrl + J. Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del men contextual la opcin Propiedades de la pgina.

Se abrir el cuadro de dilogo siguiente:

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

Las propiedades estn organizadas en categoras. En la categora Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades: y y y y y y Fuente de pgina: es el tipo de letra que le aplicaremos al texto. Tamao: es el tamao de la fuente que aplicaremos al texto. Color del texto: es el color de la fuente. Color del fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrar en el caso de no haber establecido ninguna imagen de fondo. Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita, seleccionamos la opcin no-repeat. Si queremos que se repita o dejamos la opcin en blanco o seleccionamos la opcin repeat. Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la pgina y la ventana del navegador.

En la categora Apariencia (HTML), como vemos en la imagen siguiente, encontramos las propiedades:

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

y y y y y y y Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrar en el caso de no haber establecido ninguna imagen de fondo. Texto: es el color de la fuente. Vnculos: es el color que mostrar el texto de los vnculos. Vnculos visitados: es el color que mostrar el texto de los vnculos visitados. Vnculos activos: es el color que mostrar el vnculo cuando el cursor del ratn hace clic sobre el mismo. Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la pgina y la ventana del navegador.

Los colores

Para asignar colores es posible desplegar una paleta de colores como sta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior. Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. stos son los colores que se muestran de la misma forma en cualquier navegador bajo cualquier sistema operativo. Esto no quiere decir que slo podamos utilizar estos colores. Podemos personalizarlos a travs del botn de la parte superior de la paleta.

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la pgina. El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , lo

que hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el nmero hexadecimal del color en el recuadro blanco.

Caractersticas del texto

Las caractersticas del texto seleccionado pueden ser definidas a travs del men Formato, y a travs del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de propiedades, que estn clasificadas en dos categoras HTML y CSS.

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

Comenzamos viendo las propiedades HTML

Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos.

Formato: Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o formato predeterminado. Los encabezados se utilizan para establecer ttulos dentro de un documento. El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato predeterminado se respetar que hayan varios espacios en lugar de solo uno. Estilo: El botn B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botn I, lo encierra entre <em></em>, que por defecto se ve en cursiva. Estas son las etiquetas de resaltado ms habituales, pero existen otras que encontramos a travs del men Texto. Por ejemplo, subrayar el texto. Esta opcin no aparece en el panel dePropiedades ya que de normal no suele utilizarse, debido a que los vnculos aparecen subrayados y el subrayar texto normal podra hacer que el usuario pensara que se trata de un vnculo. Adems, emplea etiquetas que estn en desuso. Lista: Estos botones permiten crear listas con vietas o listas numeradas. Veremos qu son las listas en el siguiente apartado. Sangra: Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangra a la izquierda del texto. Si lo aplicamos sobre texto normal, lo encerrar en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, crear una sublista dentro de sta.

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

CREAR UN SITIO LOCAL Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas que va a contener. La forma habitual de crear un sitio consiste en crear unacarpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imgenes, las animaciones, archivos de tipos especfico, etc., se deben crear nuevas carpetas dentro de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local. La pgina inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genrica, el servidor devuelve la pgina con ese nombre. Lo primero es crear la carpeta raz para nuestros archivos, sea la carpeta que representara nuestro sitio local Men Sitio ---------> Opcin Nuevo sitio Posteriormente se nos abrir la ventana en la cual debemos elegir el nombre y la ubicacin del sitio local.

Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo en la lista de sitios. La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no. Despus de rellenar los datos pulsamos el botn Aceptar e inmediatamente se abrir el panel de sitios (F8) en donde veremos la carpeta local con los archivos que ella contiene. Dentro de este sitio se mantendrn almacenados y organizados todos los archivos que utiliza nuestro sitio Web, crearemos una carpeta de Imgenes en donde se almacenaran todas las imgenes que utilicemos.

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

LAS PLANTILLAS Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las pginas deben seguir un formato uniforme y adems del formato, es frecuente tener elementos que se repiten en cada pgina, como el logo o el men. El procedimiento que realizan la mayora de los desarrolladores es hacer copias de los documentos ya creados, y trabajar sobre estas copias, modificando simplemente su contenido. Esta es la forma ms sencilla de tener pginas con una estructura basada en la estructura de otras ya creadas previamente. Las plantillas son una especie de copia de la pgina en la que van a estar basadas el resto de pginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que sern fijas, que no podrn ser modificadas. No es posible modificar las propiedades de una pgina que est basada en una plantilla, a excepcin del ttulo. Las plantillas pueden crearse desde cero, o a partir de una pgina ya existente. Una forma de crear una plantilla desde cero es a travs del panel Archivos (F8)

Una vez abierto el panel hay que seleccionar el botn plantillas.

, para poder trabajar con las

Los botones inferiores del panel Activos tienen diferentes funciones, el primero, sirve para actualizar la lista, el resto permiten crear una nueva plantilla, editar una plantilla seleccionada en la lista, o eliminarla. Para crear una nueva plantilla hay que pulsar sobre el botn . Si el botn est desactivado, pulsa con el botn derecho del ratn sobre el rea de plantilla y eligeNueva Plantilla. Cuando se pulsa ese botn aparece un nuevo documento en la lista de plantillas, al que es posible cambiarle el Nombre pulsando previamente sobre l. Para modificar una plantilla la seleccionamos de la lista y pulsamos el botn Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botn Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automticamente.

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

EDITAR LA PLANTILLA Todos los elementos de una plantilla estn bloqueados por defecto, no se pueden modificar. Es necesario establecer las zonas para que puedan ser editadas en las pginas que se basen en dicha plantilla. Una vez abierta la plantilla es posible establecer sus propiedades a travs de la ventana Propiedades de la pgina (Ctrl + J). Para insertar una regin editable hay que situar el puntero en el lugar en el que se desea insertar, y despus dirigirse al men Insertar, Objetos de plantilla, opcin Regin editable. En la nueva ventana hay que establecer un Nombre para la regin editable. Dentro de la plantilla no pueden existir dos regiones editables con el mismo nombre. Posteriormente puede modificarse el nombre a travs del inspector de propiedades de la regin editable. Las zonas editables aparecen representadas en Dreamweaver como un recuadro con una etiqueta de color turquesa. En la etiqueta aparece el nombre de la zona editable.

Dentro del recuadro es posible insertar objetos, que aparecern por defecto en aquellos documentos que se basen en la plantilla. Estos objetos, al estar dentro de la zona editable, podrn ser modificados en las pginas. La regin editable se ajustar al tamao del contenido. Por lo que aunque parezca pequea cuando an no tiene nada no limitar lo que queramos introducir.

USAR PLANTILLAS PARA CREAR PGINAS NUEVAS La opcin ms simple, consiste en elegir una Pgina de plantilla al crear un Nuevo documento.

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

Como se ve en la imagen anterior, al seleccionar la categora Pgina de plantilla, aparece un listado con los sitios. Seleccionando el que queramos, aparecer otro listado con las plantillas del sitio, y una vista previa de la seleccionada a la derecha. Bastara con seleccionar la que queramos utilizar y pulsar en Crear. El nuevo documento estar basado en la plantilla, y solo tendremos que modificar las regiones editables.

MARCOS O FRAMES Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la apariencia. Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por ejemplo, en la siguiente imagen puedes ver una pgina con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la pgina de este modo, hemos tenido que abrir el documento index.htm, que es la pgina que contiene los marcos agrupados.

CREAR MARCOS
Para crear un marco, primero hay que abrir algn documento. Puede ser uno nuevo o uno ya existente. Despus, dirigirse al men Insertar, HTML, Marcos. A travs de esta opcin

Puede elegirse el tipo de marco que va a crearse. Vamos a ver el marco a la Izquierda. Si pulsamos sobre Izquierda se crear un nuevo marco a la izquierda del documento actual.

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

Como puedes ver en la imagen, aparece una lnea que divide el documento en dos. El documento de partida era uno nuevo.

En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que tenamos inicialmente, que est en el marco conocido como marco

padre (MainFrame).

Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sob la re lnea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado. Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vaco aparecer a la derecha del documento original. Para seleccionar los marcos del documento es necesario dirigirse al panelMarcos, que puede abrirse a travs del men Ventana (Maysculas + F2).

COMPLEJO TECNOLGICO PARA LA GESTIN AGROEMPRESARIAL GUIA TEORICO PRATICA DREAMWEAVER

En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se puede pasar de uno a otro pulsando sobre elos en el panel. Tambin puede seleccionarse la l pgina de marcos pulsando sobre el borde que rodea a los marcos (el que aparece ms grueso y en relieve en la imagen). Todos los documentos que contienen marcos tienen que tener una pgina en cada uno de ellos. Es por esto que al crear algn marco, se cargan pginas nuevas por defecto en cada uno de ellos, a excepcin del marco que contiene la pgina original. Es necesario guardar la pgina que contiene el grupo de marcos, as como cada una de las pginas que estn incluidas en sus marcos. No es conveniente guardar la primera vez los marcos con la opcin Guardar que podemos equivocarnos al dar los nombres a los nuevos documentos. Es preferible guardar cada documento uno por uno, a no ser que todos los marcos contengan alguna pgina ya existente, ya que en ese caso el nico documento al que habr que dar nombre ser al que contiene el grupo de marcos. Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo previamente. Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor en ellos antes de pulsar sobre Guardar

todo

, ya