Resumen Dreamweaver

Creación y publicidad de sitios.
Explorando el programa.

Si hacemos clic en el botón Código, todo resulta familiar. Este y los dos botones siguientes (Dividir y Diseño) permiten visualizar la misma página, pero de formas diferentes:
*Código: muestra el código frente de la página.
*Diseño: nos permite trabajar sin tener que estar pendientes de la redacción del código, centrándonos en la apariencia y disposición de los elementos que conforman la página.
*Dividir: fragmenta a la ventana e dos partes: en el sector superior muestra el código, y en el inferior, el diseño.

Es fundamental empezar por la configuración del sitio.
Configurar un sitio en Dreamweaver:
1- Diríjase hasta el menú Sitio y seleccione Administrar Sitios. Se abrirá una ventana: allí presione el botón Nuevo y luego, Sitio.
2- Asigne un nombre al titulo y luego presione Siguiente.
3- Luego, a la pregunta de si desea trabajar con una tecnología de servidor, responda No y haga clic en Siguiente.
4- En cuanto a como desea trabajar con los archivos durante el desarrollo del sitio, elija la opción Editar copias locales en mi equipo y luego cargarlas en el servidor cuando estén listas.
Herramientas de la categoría común:

1- Hipervínculo: crea un link a partir de un texto.
2- Vinculo de correo electrónico: genera un hipervínculo que abre el correo electrónico predeterminado para que se pueda enviar un e-mail a una dirección determinada.
3- Anclaje con nombre: lo utilizamos para especificar un lugar determinado del documento hacia el cual tiene que llevarnos un determinado vínculo.
4- Tabla: permite insertar tablas en la página web.
5- Imágenes: aquí encontramos un grupo de herramientas que periten desde insertar una simple imagen hasta crear una barra de navegación.
6- Media: comprende los botones de Flash, applets de Java, componentes Activex, etc.
7- Fecha: escriba la fecha y hora actual en la página.
8- Comentario: es un texto que se agrega al código, pero no se visualiza en la pagina (anotaciones internas que realiza el propio diseñador).
9- Plantilla: el diseño de una pagina puede basarse en una plantilla en la que haya sectores que se puedan modificar y otros que no.
10- Selector de etiquetas: las agrupa por categorías, muestra y me permite insertar las etiquetas elegidas en el código de la página.

Aplicar un estilo definido en un texto:

1- Escriba el texto en el documento.
2- Compruebe si tiene archivos el panel de Estilos CSS. Si no es así diríjase al menú Ventana, búsquelo en la lista y ábralo.
3- Opte por uno de los estiles que aparezcan en la lista.
4- Seleccione el texto el cual aplicara el estilo.
5- Abra el menú contextual del estilo elegido y elija la opción Aplicar.

Propiedad de las imágenes:

1- Ancho y alto: muestra las dimensiones de la imagen en pixeles.
2- Origen: indica el nombre del archivo y su ubicación.
3- Texto alternativo: es el que se exhibe si, por algún motivo, el navegador no puede mostrar la imagen.
4- Clase: Los estilos también pueden aplicarse a las imágenes desde aquí.
5- Edición: este conjunto de herramientas permite modificar, de una u otra forma, la imagen insertada.
6- Alineación en el párrafo: disposición horizontal de la imagen, en el espacio del párrafo.
7- Alineación entre objetos: no se trata de la ubicación de la imagen en si, sino de los elementos que la rodean, como ser, un texto.
8- Borde externo de la imagen: establecido en pixeles. Si aquí no se coloca nada, la imagen queda sin borde.
9- Espaciado vertical y horizontal: es la distancia, medida en pixeles, que hay entre el margen izquierdo y la imagen.
10- Área activa: estas herramientas nos permiten seleccionar un sector de la imagen y asignarle un link o un comportamiento.

Crear una imagen de sustitución:

1- Haga clic en el botón Imágenes de la barra de herramientas Común y seleccione Imagen de sustitución.
2- Escriba un nombre para l imagen.
3- Con el botón Explorar busque la imagen original. Realice la misma operación para la imagen de sustitución. Esta es la que se visualizara cuado el Mouse se pose sobre la imagen original.
4- Escriba un texto alternativo que reemplazara la imagen en el caso de que no se pueda mostrar.
5- Si lo desea, cree un vínculo para esta imagen. Si se trata de un archivo del mismo sitio, presione el botón Examinar y selecciónelo.
6- Compruebe su funcionamiento realizando una vista previa del documento.

Crea una barra de navegaron:

1- Los botones (+) y (-), permiten agregar y quitar botones, en tanto los que indican y permitan alterar su orden.
2- Nombre que se le asigna al botón.
3- Cada una de las imágenes que se presentaran según el estado del botón: -Imagen arriba (el botón no ha sido presionado), -Sobre imagen (el mouse para sobre el botón), -Imagen abajo (se esta presionando el botón) y -Sobre mientras imagen abajo (el mouse pasa sobre el boton presionado).
4- Este es el lugar donde definimos el vínculo del botón.
5- Carga previa de imágenes hace que el comportamiento sea más fluido. Mostrar imágenes abajo inicialmente es una elección según el gusto del diseñador.
6- Disposición horizontal o vertical de la barra de navegación.
7- Esta opción dibuja automáticamente una tabla que contiene los botones.
8- Texto que se muestra, si la imagen del boton no se visualiza.

Hipervínculos:

Aprendemos a crearlos con este programa, según sus diferentes formas:
Utilizando el Inspector de propiedades, la herramienta Hipervínculo, o eligiendo esta opción del menú Insertar.
· Hipervínculos del inspector de propiedades: Tanto en textos como en imágenes, existe una propiedad llamada Vinculo en la cual escribimos la ruta del archivo que deseamos vincular.
· Herramienta Hipervínculo: Abre un cuadro de dialogo para configurar el vinculo. Puede tener diferentes destinos, Blank, _self, _parent o _top.

Vínculos con anclas:

1- Coloque el cursor en el lugar de la pagina dondequiera ubicar el ancla.
2- Presione el boton Anclaje con nombre ubicado en la barra de herramientas Común.
3- Asígnele un nombre y luego acepte.
4- En otro sector de la página, cree un hipervínculo utilizando cualquiera de los métodos.
5- En la propiedad Vinculo, escriba # y a continuación, el nombre del ancla.

Contenido Flash:

· Botones Flash: los cambios permitidos son el texto que se muestra, el tipo y e tamaño de la fuente y el color de fondo. Para insertarlos buscaos la herramienta dentro del grupo Media de la barra de herramientas Común. Como a todos boton hay que asignarle un vínculo y un destino.
· Texto Flash: se suele utilizar poco. El efecto consiste en un texto que cambia de apariencia, al pasarle el mouse por encima. Cuando insertamos un texto Flash, debemos configurar es aspecto inicial y el que tendrá al posarse el puntero del mouse sobre este.
· Flash: si se tiene alguna animación realizada en Flash, con esta herramienta se incluye en la página web.

Tablas:

1- Desde aquí establecemos la cantidad de columnas y de filas de la tabla.
2- El ancho de la tabla se puede determinar en pixeles o en un valor porcentual.
3- Cantidad de pixeles que conforman el borde de la página: cero pixeles equivale a una tabla sin bordes.
4- Espacio en la celda: los pixeles que hay entre el borde y el contenido de esta.
5- Espacio entre celdas: cuanto mayor sea el numero de pixeles, mas distantes estarán las celdas entre si.
6- Un grupo de celdas que contienen el encabezado de la tabla.
7- El tirulo es un texto que se escribe fuera de la tabla. O confundirlo con el encabezado.
8- Alineación del texto dentro de la tabla.
9- Aquí colocamos un texto que describa la tabla, pero no se visualiza en ella.

Herramientas de la categoría Diseño:

1- Tabla: la misma herramienta que encontramos en la categoría Común.
2- Insertar etiqueta

: crea un contenedor con esta etiqueta.
3- Capas: la utilizamos para insertar en ella objetos y aplicar comportamientos.
4- Modos de visualización: la imagen muestra las herramientas habilitadas para trabajar en Modo Estándar.
5- Marcos: con ellos creamos en el documento una estructura, compuesta por varios sectores agrupados.
6- Datos de tabla: se utiliza para imponer datos de otros documentos e introducirlos en forma de taba en la página.


Visualización en 800 x 600 y en 1024 x 768:

1- Seleccione la categoría Diseño en la barra de herramientas y presione el boton Modo de Diseño.
2- Dibuje una tabla con la herramienta Tabla de Diseño.
3- Ajuste su ancho fijo a 750 píxeles desde el Inspector de propiedades.
4- Dibuje las celdas que harán de contenedores de objetos.
5- Regrese al modo Entandar y centre la tabla.

Capas:

Es otra de las herramientas que hacen de soporte a los elementos de la pagina. Tal como se ve, son muy utilizadas actualmente. Las capas no tienen color de fondo, solo se muestra su contenido y no su estructura. Las capas pueden encimarse, esta es otra de sus ventajas.

Propiedades de las capas:

1- Nombre: Identifica cada capa.
2- Izquierda y superior: Son los valores que determinan su ubicación.
3- Ancho y alto: dimensiones de la capa.
4- Z-index: numero que establece el orden de apilamiento de las capas.
5- Imagen de fondo: ruta de acceso a la imagen.
6- Clase: estilo que se aplica a la capa.
7- Color de fondo: se selecciona aquí, a partir de la paleta de colores.
8- Visibilidad: aquí se indica si la capa estará visible u oculta.
9- Recortar: recorta la capa.
10- Desbordamiento: cuando el contenido es extenso, se generan barras de desplazamiento dentro de la capa.

Tomando como punto de partida que la capa tiene un tamaño determinado, pero que su contenido la excede, debe ajustarse, si se tiene configurada la opción:
· Visible: todo e contenido de la capa se deja ver.
· Hidden: se oculta el contenido que sobrepasa el tamaño original de la capa.
· Scroll: muestra barras de desplazamiento e el interior de la capa.
· Auto: genera barras de desplazamiento, pero solamente si la cantidad de información lo hace necesario.

Marcos:

Cuando trabajamos con marcos, no utilizamos u único documento, sino varios: uno de base que contiene la estructura, y uno por cada marco que contenga la pagina. Habitualmente se trabaja con un marco que contiene los vínculos de la pagina y en otro central se va actualizando la información, según el link que se haya seleccionado. Si el destino elegido es:
· _Self: la pagina de destino se muestra en el mismo marco en que se encuentra el link.
· _Parent: si se esta trabajando con un grupo de marcos, donde hay uno que posee mayor jerarquía, el destino del vinculo se visualiza en este.
· _Top: el destino del hipervínculo es el marco superior.
· _Blank: la pagina se abre en una ventana independiente.

Comportamientos:
Panel de comportamientos:

1- Evento: que desencadena la acción.
2- Mostrar eventos establecidos: solo muestra los eventos utilizados.
3- Mostrar todos los eventos: deja ver todos los eventos disponibles.
4- Añadir comportamiento (+): agrega un comportamiento a la lista.
5- Quitar comportamiento (-): quita un comportamiento de la lista.
6- Subir y bajar comportamiento: cambia el orden de elementos en la lista.
7- Acción: que produce el comportamiento.

Comportamiento de capas:

· Mostrar - Ocultar capas: se requieren dos capas, una de ellas oculta. Luego aplicamos el comportamiento Mostrar – ocultar capas, seleccionamos la capa oculta, presionamos el boton Mostrar y aceptamos. Por ultimo seleccionamos el evento ONMOUSEOVER.
· Definir texto: definir texto de capa. Es muy simple, solo hay que seleccionar la capa que se va a ver afectada y escribir el texto o código HTML del nuevo contenido.
· Arrastrar capas: es este caso, tendremos que elegir una determinada capa y configurar su posición de destino.

Otros comportamientos:

· Mensajes emergentes: presenta en la pantalla, un mensaje en un cuadro de dialogo, similar a los que presenta Windows cuando advierte alguna falla o re quiere una confirmación.
· Establecer texto de la barra de estado: de la misma forma en que modificamos el texto de una capa, se puede insertar uno para que se muestre en la barra de estado del navegador.
· Cambiar propiedad: en el cuadro Tipo de objeto, debemos seleccionar de la lista a que clase de etiqueta se aplicara el cambio. En Objeto con nombre, seleccionamos cual es la etiqueta en particular y, luego, seleccionamos la propiedad que se va a modificar y el navegador que mostrara el comportamiento.

Barra de herramientas de formulario:

1- Formulario: dentro de este colocaremos todos los elementos.
2- Campo de texto: permite dibujar un sector en el que se puede introducir un texto.
3- Campo oculto: permite almacenar información introducida por el usuario, y utilizarla la próxima vez que visite el sitio.
4- Área de texto: se utiliza para cuando el texto que se ingresa es extenso.
5- Casilla de verificación: es un pequeño cuadro que permite marcar un campo como seleccionado o no seleccionado.
6- Boton de opción: su comportamiento es similar al de la casilla de verificación.
7- Grupo de opción: genera un grupo de botones de función excluyente.
8- Lista/Menú: se crea un menú desplegable.
9- Menú de salto: es similar al menú desplegable.
10- Campo de imagen: permite insertar una imagen dentro del formulario.
11- Campo de archivo: agrega un campo con un boton Examinar.
12- Boton: sus acciones posibles son las de borrar o enviar el contenido del formulario.
13- Etiqueta: escribe un texto dentro de los tags.
14- Juego de campos: genera un contenedor para los elementos del formulario.

Validar formularios:

1- Diseñe el formulario y establezca un indicador para hacer notar al usuario cuales son los campos requeridos.
2- Seleccione el boton Enviar.
3- Abra el panel de Comportamientos.
4- Despliegue la lista de comportamientos presionando el boton con el signo + y escoja Validar formulario.
5- Campo por campo, configure las opciones que quiere par cada uno.
6- Acepte y compruebe su funcionamiento.

Subir el sitio:

· Configurar el sitio remoto: todos los archivos tiene que ser suministrados por el proveedor del web hosting (empresa encargada de brindarnos un espacio en un servidor web). También es posible que el servicio de web hosting, este incluido en el paquete que nos brinda nuestro proveedor. Entonces lo primero, es conseguir el proveedor. Luego de esto necesitaremos un protocolo para subir el sitio. Aprenderemos a hacerlo con FTP.
· Publicar el sitio: seleccionamos el sitio sobre el que hemos estado trabajando y presionamos Editar. Debemos pasar por alto los tres primeros pasos presionando Siguiente y luego en las siguientes preguntas pondremos la opción correspondiente.
· Conexión de prueba: si se establece la conexión con el servidor correctamente, avance presionando Siguiente. Continuamos hasta finalizar y cerramos en Administrador de sitios. Una vez terminada la configuración del sitio remoto, se nos abrirá un panel llamado Archivos.

Panel de archivos:

1- Carpeta general: contiene las subcarpetas y archivos del sitio.
2- Vista local/remota: permite alternar entre la vista de los archivos locales y los remotos.
3- Conectar: inicia la conexión con el servidor.
4- Actualizar: vuelve a cargar los archivos al sitio, para poder visualizar los últimos cambios en la web.
5- Obtener archivos: baja a la PC los archivos que ya han sido subidos a la web.
6- Colocar archivos: sube los archivos hacia el servidor configurado.
7- Proteger archivos: se protegen los archivos para que otros usuraos no puedan modificarlos.
8- Desproteger: revierte la opción de la acción Proteger.
9- Expandir: extiende el panel para que abarque toda la pantalla.