Diseño de DISEÑO Páginas Web DE con PAGINAS DreamWeaver WEB CON DREAMWEAVER-NIVEL II 1
INDICE Lección 1: Las capas Apartado 1: Introducción Apartado 2: Trabajando con capas Apartado 3: Practicando con las capas Apartado 4: Convertir capas en tablas y tablas en capas Apartado 5: Código HTML Apartado 6: Pon a prueba tus conocimientos Lección 2: Los formularios Apartado 1: Introducción Apartado 2: Crear formularios Apartado 3: Elementos del formulario Apartado 4: Validar los formularios Apartado 5: Formatear formularios Apartado 6: Código HTML Apartado 7: Pon a prueba tus conocimientos Lección 3: Los marcos Apartado 1: Introducción Apartado 2: Creación de marcos Apartado 3: Seleccionar el conjunto y los marcos Apartado 4: Propiedades de los marcos Apartado 5: Contenido de los marcos Apartado 6: Código HTML Apartado 7: Pon a prueba tus conocimientos Lección 4: Otros elementos de la web Apartado 1: DTHML Apartado 2: Imágenes de sustitución Apartado 3: Barras de navegación Apartado 4: Botones y texto flash Apartado 5: Animación de capas Apartado 6: Comportamiento Apartado 7: Código HTML Apartado 8: Pon a prueba tus conocimientos Lección 5: Subir la web al servidor Apartado 1: Subir nuestra página Apartado 2: FTP Apartado 3: Pon a prueba tus conocimientos Diseño de Páginas Web con DreamWeaver 2
LECCION 1: LAS CAPAS Apartado 1: Introducción Las capas en Dreamweaver son contenedores de objetos, como pueden ser textos, tablas, imágenes, etc Son cuadradas y pueden moverse por la página y solaparse entre ellas. También podemos ocultarlas o indicarles ciertas acciones. Todo esto nos concede una gran versatilidad a la hora de crear diseños más espectaculares. Apartado 2: Trabajando con capas CREAR CAPAS Veamos una forma sencilla de crear capas con Dreamweaver: En el menú Insertar elige la opción Objetos de diseño y selecciona la opción capa. De este modo se insertará automáticamente en tu documento una capa. CÓMO PUEDO SELECCIONAR UNA CAPA? Para seleccionar una capa solo tienes que situar el cursor sobre cualquiera de sus bordes, éste cambiará su aspecto habitual por el de un puntero de cuatro flechas. En ese momento haz un clic e inmediatamente verás como aparecen unos cuadraditos negros llamados manejadores de tamaño. Fíjate en las imágenes de abajo: Diseño de Páginas Web con DreamWeaver 3
PUEDO SELECCIONAR VARIAS CAPAS SIMULTÁNEAMENTE? En algunas ocasiones necesitaremos seleccionar varias capas al mismo tiempo. Para ello no tienes más que mantener pulsada la tecla Shift del teclado mientras seleccionas las capas tal como te hemos indicado anteriormente. CÓMO PUEDO CAMBIAR EL TAMAÑO DE UNA CAPA? En Dreamweaver podemos cambiar el tamaño de las capas de varias formas. Por ahora veremos cómo hacerlo de modo manual ya que aún no hemos llegado a las propiedades. pulsa y arrastra sin soltar. Decíamos antes que cuando seleccionábamos una capa aparecían unos cuadraditos negros llamados manejadores de tamaño. Si colocas el puntero del ratón sobre cualquiera de ellos verás como cambia de aspecto. En ese momento CÓMO PUEDO MOVER UNA CAPA POR EL DOCUMENTO? Cuando una capa está seleccionada puedes ver que aparece sobre su esquina superior izquierda un cuadradito lo ves? Se llama manejador de selección y si pulsas sobre él y arrastras sin soltar podrás mover por el documento la capa y soltarla donde lo desees. Cómo podré eliminar una capa? Eliminar una o varias capas es muy sencillo. Solo tienes que seleccionar las capas que quieres eliminar y pulsar la tecla Supr del teclado. PROPIEDADES DE LAS CAPAS Como todos los elementos que hemos insertado en Dreamweaver, las capas también tienen sus propiedades. También al igual que ocurre con el resto de los elementos, es necesario seleccionar una capa para ver sus propiedades. Vamos a ver cómo podemos configurar y modificar algunos aspectos de las capas desde el Inspector de propiedades. Diseño de Páginas Web con DreamWeaver 4
Fíjate en la siguiente imagen que corresponde al Inspector de propiedades, a continuación te explicamos para que sirven algunas de las opciones que te muestra: ID de capa: Permite especificar un nombre para identificar la capa. An y Al (Ancho y Alto): Determinan la anchura y la altura de la capa. Debes escribir el número seguido de la unidad de medida sin espacios. Las unidades válidas de medida son: px (píxeles), mm (milímetros), cm (centímetros), pc (picas), in (pulgadas), pt (puntos) y % (porcentaje) Índice Z: Establece el orden de las capas asignándoles números según se van insertando. Este orden se puede cambiar, más adelante veremos la importancia de ordenar las capas. Vis: Determina el estado inicial de visualización de la capa. Durante este curso solo usaremos dos valores Visible (visible) o Hidden (oculta). Col. Fondo: Permite especificar un color de fondo para la capa. Desb. (Desbordamiento): Determina lo que ocurrirá si el contenido de una capa excede de su tamaño. Las opciones disponibles son: Visible: la capa aumenta de tamaño para que sea visible todo su contenido. Hidden: la capa mantiene su tamaño y el contenido que no quepa no se verá. Scroll: aparecerán barras de desplazamiento en la capa. Auto: muestra las barras de desplazamiento solamente cuando el contenido de la capa excede de sus límites. INSERTAR CONTENIDO EN LAS CAPAS Para insertar tanto texto, como imágenes, etc la capa no puede estar seleccionada. Debes situar el cursor dentro de ella y en ese momento podrás introducir lo que quieras. Diseño de Páginas Web con DreamWeaver 5
PANEL CAPAS El panel Capas proporciona una vista de todas las capas del documento. Es muy cómodo trabajar con él o al menos tenerlo visible cuando trabajemos con capas. Veamos cómo hacerlo: Si no estás viendo entre los paneles el panel Diseño debes ir al menú Ventana y seleccionar la opción Capas. En ese momento verás como aparece el panel Diseño con la pestaña Capas activa. Fíjate en el aspecto del panel, nos muestra todas las capas del documento. Vamos a analizarlo: Las capas aparecen en la lista en el orden descendente según su creación. Desde este panel podrás seleccionar capas, definir su visibilidad, cambiar su nombre, cambiar su orden, etc. En la siguiente animación veremos paso a paso las posibilidades que nos ofrece este panel: ORDEN DE APILAMIENTO DE LAS CAPAS En algunas ocasiones podemos necesitar que las capas de nuestra página se solapen. Es decir que una capa determinada se superponga por encima de otra, bien por cuestiones estéticas o por cuestiones de espacio. En otras ocasiones, sin embargo lo que necesitaremos es asegurarnos de que esto no sucede. Bien. Esto en Dreamweaver se consigue con el orden de apilamiento de capas. Fíjate en las siguientes capas: Diseño de Páginas Web con DreamWeaver 6
Para conseguir lo que ves, hemos indicado en la propiedad índice Z del Inspector de propiedades el orden de apilamiento de cada capa. Teniendo en cuenta que las capas se ordenan en orden descendente se verá por encima de las demás la que mayor numeración tenga. El resto ha sido moverlas hasta conserguir que se superpongan de este modo. Apartado 3: Practicando con las capas En este apartado trataremos de crear una página utilizando todas las opciones de capas que hemos visto hasta ahora en la lección Abre una página nueva en blanco e inserta dentro de ella una capa. Escribe dentro de la capa el siguiente texto: "FLORA Y FAUNA DE ASTURIAS" Crea una segunda capa y escribe en ella el siguiente contenido: "La vegetación natural está formada por especies propias de zonas húmedas. Los bosques ocupan una gran extensión salpicada de prados naturales. Las especies más comunes son robles (carbayu), castaños, hayas y olmos. Se han aclimatado bien árboles foráneos, como el pino y el eucalipto." Inserta otra capa más y escribe dentro de ella el siguiente texto: "La fauna es rica en especies poco comunes en el resto de España, como el oso parto; hay también lobos, rebecos, corzos,, zorros (raposos), águilas reales y una gran variedad de peces de ríos de aguas bravas. Diseño de Páginas Web con DreamWeaver 7
Para la conservación de la fauna se han creado reservas naturales como la Reserva nacional de Somiedo, el Parque nacional de los Picos de Europa y otras de menor extensión." Descarga ahora las siguientes imágenes. Guárdalas dentro de la carpeta imágenes que está dentro de Turismo. FLORA FAUNA Crea dos capas más dentro de la página e inserta una imagen en cada una, para ello sitúa el cursor dentro de la capa e inserta la imagen Debes conseguir que la página adquiera el siguiente aspecto. No te preocupes, nosotros de indicaremos a continuación los pasos que hemos seguido: Hemos variado el tamaño de la capa título para que éste se muestre en una sola línea. Las dos capas correspondientes a los textos de flora y fauna tienen un tamaño de 175px de ancho y 249px de alto. La primera de ellas tiene un desbordamiento visible y color de fondo #FFFFCC. La segundatiene un desbordamiento Auto y no tiene color de fondo. Hemos movido las capas hasta conseguir la distribución que ves en la imagen. El motivo de la superposición es que hemos jugado con el orden de las capas desde el panel Capas. Hasta conseguir que unas se vean por encima o debajo de las otras. Diseño de Páginas Web con DreamWeaver 8
Recuerdas los estilos de texto? Vamos a aplicarlos a los textos de las capas. No olvides que antes debes adjuntarlos, si no recuerdas como se hacía es buen momento para hacer un repaso. Abre la página Web florayfauna.htm y aplícale al título el estilo titulo de la hoja de estiloscontenidos.css, puede que ahora tengas que variar el ancho de esta capa para que el título se siga viendo en una sola línea. Por último aplica a los textos el estilo parrafos de la hoja de estilos contenidos.css. Guarda los cambios realizados en el documento y pulsa F12 para comprobar el resultado es algo similar a esto? Apartado 4. Convertir capas en tablas y tablas en capas Uno de los problemas que surge en el uso de las capas es que las versiones anteriores a 4.0 de Netscape o Internet Explorer no las admiten. Una manera de solucionar este problema es convertir las capas en tablas, aunque hoy en día prácticamente todo el mundo tiene su navegador actualizado. Dreamweaver nos permite hacer conversiones de capas en tablas y viceversa. Es muy sencillo: La opción Convertir el menú Modificar nos ofrece estas dos posibilidades. Diseño de Páginas Web con DreamWeaver 9
Vamos a ver cómo funciona la opción Convertir capas en tabla mediante un ejercicio. Para ello utilizaremos el documento convertir.htm Abre el documento en Dreamweaver y fíjate en su contenido. Contiene la información estructurada en 7 capas separadas entre sí. Para convertir todas las capas de este documento en una tabla vete a la opción Convertir del menú Modificar y selecciona Capas en tabla. Aparecerá el siguiente cuadro de diálogo: La opción Más preciso creará una celda por cada capa, junto con las celdas adicionales necesarias para conservar el espacio entre capas. La opción Usar GIF transparentes nos garantiza que la tabla tenga las mismas anchuras en todos los navegadores. Insertando para ello imágenes transparentes al final de la tabla. También podremos centrar la tabla si marcamos la casilla Centrar en página. Pulsa Aceptar y observa el resultado. Diseño de Páginas Web con DreamWeaver 10
Apartado 5. Código HTML El contenido de las capas (texto, imágenes, etc.) se encierra entre las etiquetas que te mostramos a continuación, presta atención: <div> Etiqueta contenedora de apertura de cada capa. Dentro de ella se indicará el nombre de la capa, el alto, ancho, etc </div> Etiqueta contenedora de cierre de cada capa. Diseño de Páginas Web con DreamWeaver 11
LECCION 2: LOS FORMULARIOS Apartado 1: Introducción Una de las características más importantes de la web es la posibilidad de recoger información proporcionada por los usuarios, es decir, dotar de interactividad a las páginas. Mediante la utilización de formularios podemos pedir ciertos datos a los usuarios, y en función de lo que respondan efectuar unas acciones u otras. Por ejemplo, si has creado alguna cuenta de correo con hotmail, terra, yahoo, etc habrás tenido que rellenar un formulario. Ese formulario ha sido comprobado para verificar que los datos han sido introducidos correctamente y permitirte la creación de la cuenta. Por tanto podemos decir que los formularios permiten al usuario cosas como enviar información de respuesta, rellenar libros de visita, cumplimentar solicitudes de estudios, registros de cuentas y comercio electrónico, por nombrar algunos de sus usos. Apartado 2. Crear formularios AÑADIR UN FORMULARIO En Dreamweaver puedes insertar un formulario de igual manera que se inserta cualquier otro objeto en una página web. Puedes hacerlo a partir del menú Insertar o desde la barra de herramientas Insertar en la pestaña formularios. En el momento que insertes el formulario únicamente verás un rectángulo marcado por una línea roja discontinua. Dentro de él introduciremos todos los elementos que contendrá el formulario y que serán objeto de este tema. Diseño de Páginas Web con DreamWeaver 12
Abre una nueva página en blanco e inserta un formulario. Nos basaremos en él para realizar las explicaciones a lo largo de todo este tema. Por tanto sería conveniente que lo tuvieses siempre a mano ya que haremos referencia a él de forma constante. Guárdalo con el nombre solicitud.htm. PROPIEDADES DE LOS FORMULARIOS Una vez insertada la estructura básica para el formulario, puedes configurar sus propiedades utilizando el Inspector de propiedades. Pon al formulario el nombre formulario y en la propiedad Acción introduce lo siguiente:mailto: tu dirección de correo electrónico Apartado 3. Elementos del formulario CAMPOS DE TEXTO Los campos de texto permiten al usuario introducir la información en el formulario escribiéndola. Asegúrate de que el campo de texto se encuentre seleccionado haciendo un clic sobre él. Luego observa el Inspector de propiedades: Diseño de Páginas Web con DreamWeaver 13
LISTAS O MENÚS Las listas y los menús se usan para proporcionar al usuario varias opciones de elección. Ambos elementos son similares, ayudarán al usuario a realizar la misma función. No obstante, las primeras se usan para mostrar todas o varias de las opciones disponibles, mientras que los segundos consisten en un menú desplegable. Una vez insertada la lista puedes seleccionarla y ver sus propiedades en el inspector de propiedades: Pon a la lista un nombre y selecciona el tipo (lista o menú). Luego pulsa el botón valores de lista. Aparecerá un cuadro de diálogo en el que debes introducir los elementos de la lista. Diseño de Páginas Web con DreamWeaver 14
Cada elemento tiene un valor que le diferencia de los demás, de este modo sabremos cuál ha sido la elección del usuario. Una vez introducidos todos los elementos de la lista volveremos al Inspector de propiedades: En la propiedad Seleccionado inicialmente puedes seleccionar el elemento que quieres que aparezca seleccionado por defecto en la lista. Fíjate también en la propiedad Alto. Indica en ella el número de elementos que se verán inicialmente. LAS CASILLAS DE VERIFICACIÓN Estas casillas de verificación indican el estado de una opción, activada (la casilla muestra una marca) o desactivada (la casilla se encuentra vacía). Lo mismo ocurre con los botones de opción. Las casillas de verificación se utilizan cuando se desea que el usuario pueda elegir más de una de las opciones ofrecidas. Mientras que los botones de opción son excluyentes. Puedes insertar los botones de opción uno por uno, lo cual no tiene mucho sentido ya que estos botones se utilizan para excluir. Diseño de Páginas Web con DreamWeaver 15
En el cuadro de diálogo Grupo de opción introduce el nombre que recibirá todo el grupo de opciones. A continuación inserta tantas opciones como necesites y sus valores. Luego pulsa Aceptar. Haz clic sobre el primero de los botones de opción para ver sus propiedades en el Inspector de propiedades. La propiedad Estado inicial nos indicará qué opción estará activada por defecto. BOTONES ENVIAR Y RESTABLECER Un botón es un objeto que al hacer clic sobre él inicia una acción: enviar el formulario, restablecer los valores iniciales del formulario, etc El botón Enviar envía el formulario a su destino. El botón Restablecer se usa para borrar todos los campos de un formulario, es decir, lo reinicia. Por tanto, podemos decir que el botón Enviar es una parte fundamental de los formularios. Sin él un formulario no serviría de nada ya que sus datos no tendrían ninguna utilidad. Cuando insertas un botón debes indicar en sus propiedades si éste va a enviar latos o a restablecer el formulario. Fíjate en el inspector de propiedades. Diseño de Páginas Web con DreamWeaver 16
Esto es muy sencillo, sólo tendrás que seleccionar la Acción Enviar formulario o la acción Restablecer formulario, según la finalidad del botón. Apartado 4. Validar los formularios PARA QUÉ SE VALIDAN LOS FORMULARIOS? Ya hemos resuelto el tema de la introducción de datos en el formulario y también cómo enviarlos una vez que el usuario los ha introducido. Pero Qué ocurre si quieres que alguno de los datos requeridos en el formulario sea de entrada obligatoria? Deberías hacer algo para que el usuario no pudiese enviar el formulario sin rellenar ese o esos campos verdad? Bien. Para eso se validan los formularios. El comportamiento Validar formulario comprueba que el usuario haya introducido los datos en el campo o campos que tú especifiques. VALIDAR UN FORMULARIO Vamos a ver cómo validar un formulario utilizando para ello el que hemos creado en el documento solicitud.htm. Lo que haremos será asegurarnos de que los campos nombre y apellidos estén rellenos en el momento de enviar el formulario. Por lo tanto el comportamientovalidar formulario se hará para el botón Enviar. Sigue los pasos que te proponemos a continuación: Selecciona el botón Enviar y en el panel Comportamientos pulsa el botón añadir comportamiento (+). Selecciona el comportamiento Validar formulario. En el cuadro de diálogo Validar formulario selecciona el campo nombre ( ves la importancia de dar nombre a cada campo?) Diseño de Páginas Web con DreamWeaver 17
Indica que el valor de entrada es obligatorio. También puedes indicar que tipo de valor se debe introducir, deja cualquier cosa. Luego pulsa Aceptar. Repite los mismos pasos para validar el campo apellidos. Apartado 5. Formatear formularios Una vez realizado nuestro formulario lo siguiente que haremos será darle formato : Selecciona los textos del formulario y aplícale el estilo parrafo. Selecciona ahora los textos "Clase:" y "Actividades:" y aplícales el estilo titulo. Habrás observado que aplicar alineaciones a un formulario puede resultar muy complicado. La solución a este problema sería haber introducido los elementos del formulario dentro de una tabla. Diseño de Páginas Web con DreamWeaver 18
Creando primero el formulario y dentro de éste una tabla con las filas y columnas necesarias para distribuir después los elementos que vayas insertando. Intenta realizar la siguiente práctica haciendo esto practica1.doc Para terminar esta lección vincularemos el formulario a nuestro sitio Web: Abre la página actividades.html y escribe al final del contenido de ésta el texto "Solicita aquí tu viaje". Selecciona el texto y vinculalo a la página solicitud.htm, este vínculo debe abrirse en una nueva página. Guarda los cambios y abre la página principal.htm en el navegador. Pulsa sobre el botón actividades y accede al vínculo que acabas de crear funciona? Apartado 6: Código HTML Vamos a analizar brevemente el código HTML que ha generado dreamweaver para el formulario que hemos creado. Los formularios se crean dentro del cuerpo de la página, es decir, entre las etiquetas <body> </body> Las etiquetas que encierran el formulario son <form> </form>. Dentro de la etiqueta de apertura del formulario se introduce el nombre de éste, la acción, etc A continuación puedes ver las etiquetas utilizadas para insertar el cuadro de texto nombre: Diseño de Páginas Web con DreamWeaver 19
En las etiquetas de cuadro de texto se indica el nombre de éste, la longitud, el tamaño, etc La siguiente imagen muestra el código empleado en las listas y menús: Las etiquetas <select> </select> contienen toda la lista o menú mientras que las etiquetas <option value= valor > </option> contienen cada elemento de la lista o menú. Por último veremos las etiquetas utilizadas para los botones Enviar y Restablecer: Como ves, para los botones se emplea la etiqueta <Input> y dentro de ella se indica el nombre del botón, el tipo (si envía o restablece), etc Diseño de Páginas Web con DreamWeaver 20
LECCION 3: LOS MARCOS Apartado 1: Introducción Hasta el momento hemos creado páginas html y las hemos guardado en nuestro sitio Turismo. Con la utilización de marcos iremos un poquito más allá. Los marcos no son más que subdivisiones de una página html. Todas estas subdivisiones se agrupan en lo que denominamos conjunto de marcos. El conjunto de marcos es una página html que contiene una estructura que nosotros podremos elegir. Fíjate en el siguiente ejemplo de conjunto de marcos: Esta estructura contendrá las páginas web de nuestro sitio. De modo que nosotros debemos indicar qué página se mostrará en cada marco. La página del ayuntamiento de Siero es un buen ejemplo de sitio Web que funciona con marcos. Pulsa el siguiente vínculo para verla: http://www.ayto-siero.es Apartado 2: Creación de marcos CREAR MARCOS Diseño de Páginas Web con DreamWeaver 21
Dreamweaver nos ofrece diversas formas de crear conjuntos de marcos. Dado que somos principiantes, escogeremos la opción que mejor nos puede llevar a entender su funcionamiento: En el menú Archivo deberás seleccionar la opción Nuevo. Se abrirá el cuadro de diálogo Nuevo documento (es el que usamos para crear nuevas páginas en blanco). Lo que queremos crear en este caso no es una página HTML, sino un conjunto de marcos así que escogeremos esa opción en la lista Categoría. A la derecha de la lista categoría verás la lista conjuntos de marcos. Esta lista contiene los diferentes tipos de marcos que te ofrece Dreamweaver. Cada vez que selecciones uno de ellos a su derecha podrás ver su aspecto. Vete al menú Archivo y selecciona la opción Guardar conjunto de marcos. Diseño de Páginas Web con DreamWeaver 22
Apartado 3. Seleccionar el conjunto y los marcos SELECCIONAR MARCOS Tanto el conjunto de marcos como cada marco tienen una serie de propiedades que podremos modificar. Para ello tendremos que seleccionar el marco con el que queremos trabajar o el conjunto completo. Lo haremos seleccionando el marco que deseemos haciendo un clic sobre él, para ello utilizaremos el panel Marcos que se encuentra en el menú Ventana. Vamos a practicar la selección de marcos tal como hemos visto en la animación anterior: Si has cerrado el documento principal.htm debes volver a abrirlo. Cuando lo hagas verás dos mensajes de advertencia, acéptalos, más adelante veremos porqué nos han salido. Asegúrate de ver a la derecha el panel de marcos. Recuerda que puedes hacerlo visible desde el menú Ventana. Selecciona el marco izquierdo haciendo un clic sobre él en el panel Marcos. Fíjate en el Inspector de propiedades. Luego haz lo mismo con el marco derecho y por último selecciona todo el conjunto de marcos. Apartado 4. Propiedades de los marcos Vamos a analizar ahora las propiedades de los marcos por medio del Inspector de propiedades: Nombre de marco: Determina el nombre del marco seleccionado. Origen: Define la página web que mostrará el marco. Desplaz.: Permite elegir si aparecen barras de desplazamiento o no. Si escogemos la opción Automático aparecerán únicamente cuando sea necesario. Diseño de Páginas Web con DreamWeaver 23
Mismo tamaño: Al activar esta casilla se impide a los usuarios arrastrar los bordes del marco para modificar su tamaño en su navegador. Bordes: Configura si los marcos mostrarán o no la línea de división que existe entre ellos. Color de borde: Permite establecer un color para el borde que separa los marcos. Ancho del margen: Indica en píxeles el ancho de los márgenes izquierdo y derecho, es decir, el espacio que hay entre el borde izquierdo y derecho del marco y su contenido. Alto del margen: Indica en píxeles el alto de los márgenes superior e inferior, es decir, del espacio que hay entre los bordes superior e inferior del marco y su contenido. PROPIEDADES DEL CONJUNTO DE MARCOS A continuación vamos a analizar algunas de las propiedades que podemos configurar en un conjunto de marcos: Bordes: determina si se quieren visualizar o no los bordes que delimitan los marcos. Ancho: Indica el grosor del borde en el caso de que se quiera visualizar. Color del borde: elegiremos el color del borde si éste es visible. Columna: indica el tamaño de la columna de la izquierda. Puede establecerse dicha medida en píxeles o en porcentaje. Apartado 5. Contenido de los marcos VINCULAR CONTENIDO DE LOS MARCOS La razón de utilizar marcos en los sitios Web es que de este modo podemos hacer la navegación mucho más sencilla. Ya que uno de los marcos puede contener un menú con el mapa de la página mientras que otro mostrará las páginas que el usuario quiera ver. Esto se consigue estableciendo vínculos, ya hemos visto cómo crear hipervínculos en la lección 6 lo recuerdas? También habíamos visto los diferentes destinos de los vínculos, un vínculo se podía abrir en una ventana nueva, en la misma ventana, etc Diseño de Páginas Web con DreamWeaver 24
En este caso nos interesa precisar un poquito más, ya que necesitaremos que los vínculos seleccionados en un marco se abran en el otro. En la siguiente pantalla trabajaremos con todo esto. Para establecer los vínculos entre los marcos de un conjunto deberás seguir los pasos que te proponemos a continuación: Abre la página de marcos y coloca el cursor dentro del marco izquierdo. Ahora inserta los textos o imágenes que funcionarán como vínculos a las demás páginas. Selecciona cada uno de los textos o imágenes que has introducido en el marco izquierdo y crea los vínculos a las páginas correspondientes. Ten en cuenta que el destino de éstos será el marco derecho, de esta manera, cada vez que pulsemos sobre un vínculo se cargará su página en el marco derecho. Diseño de Páginas Web con DreamWeaver 25
Apartado 6: Código HTML Un conjunto de marcos tiene una etiqueta <frameset> en lugar de la etiqueta <body> que se encontraría en una página HTML normal Vamos a revisar el código HTML que genera Dreamweaver para una página de marcos. Observa como entre las etiquetas <frameset> y </frameset> aparecen las etiquetas <frame> que representan a cada uno de los marcos, con las propiedades asignadas a cada uno de ellos. Diseño de Páginas Web con DreamWeaver 26
LECCION 4: OTROS CONTENIDOS DE LA RED Apartado 1: Qué es el DHTML? QUÉ ES DHTML? Dynamic HTML o HTML dinámico no es más que el lenguaje HTML que conocemos complementado con otro lenguaje, como puede ser Javascript. Esta combinación permite presentar páginas HTML con determinados efectos que ofrecen un mayor dinamismo y espectacularidad a la página. Una página que utilice DHTML puede contener imágenes que aparecen y desaparecen, objetos que se desplazan por la pantalla y menús que se ocultan o se muestran. Apartado 2. Imágenes de sustitución QUÉ SON LAS IMÁGENES DE SUSTITUCIÓN? Una imagen de sustitución es una imagen que, al visualizarse en un navegador, muestra otra imagen cuando el puntero pasa sobre ella. En realidad se trata de dos imágenes: la imagen principal (aparece al cargarse inicialmente la página) y la imagen secundaria (aparece al pasar el puntero sobre la principal). Es conveniente que ambas imágenes tengan el mismo tamaño ya que en caso contrario, Dreamweaver cambia automáticamente el tamaño de la segunda imagen para que se ajuste al de la primera. Y esto puede hacer que la segunda imagen se muestre distorsionada. INSERTAR UNA IMAGEN DE SUSTITUCIÓN A continuación puedes ver cómo insertar una imagen de sustitución paso a paso en Dreamweaver: Antes de comenzar tendrás que situar el cursor en el lugar donde quieres que aparezca la imagen de sustitución. En el menú Insertar, la opción Objetos de imagen te ofrece la posibilidad de insertar una Imagen de sustitución. En la barra de herramientas Insertar (pestaña Común) verás el botón Imágenes. La flecha que aparece a su derecha despliega un menú que contiene la opción Imagen de sustitución. Diseño de Páginas Web con DreamWeaver 27
En ese momento aparecerá el cuadro de diálogo Insertar imagen de sustitución. Que debes rellenar pulsando sobre los botones Examinar, que te permitirán buscar la imagen inicial y la secundaria. Una vez cumplimentado el cuadro de diálogo pulsa el botón Aceptar. Apartado 3: Barras de Navegación QUÉ SON LAS BARRAS DE NAVEGACIÓN? Una barra de navegación no es más que una imagen o conjunto de imágenes que se intercambian cuando el usuario realiza determinadas acciones (pasar el cursor, hacer clic). Estas barras se vinculan a otras páginas o archivos, de ahí que reciban el nombre de barras de navegación. Pues permitirán al usuario navegar por la Web. Antes de crear una barra de navegación, debes crear un conjunto de imágenes para cada estado de visualización. Un elemento de la barra de navegación puede tener cuatro estados aunque no es necesario activarlos todos - Arriba: es la apariencia predeterminada del botón, tal y como lo ve el usuario por primera vez. - Sobre: es el aspecto que presenta el botón cuando el usuario pasa el puntero del ratón sobre él. El estado Sobre es el que advierte al usuario de que este botón es interactivo y que le conduce a otra página. Diseño de Páginas Web con DreamWeaver 28
- Abajo: es el aspecto del botón cuando se pulsa. A menudo tiene una apariencia de profundidad. - Sobre mientras abajo: es la apariencia del botón que se encuentra en estado Abajo y se mueve el puntero del ratón sobre él. Los dos estados más usados son Arriba y Sobre. CÓMO SE PUEDE CREAR UNA BARRA DE NAVEGACIÓN? Para crear una barra de navegación deberás acceder al menú Insertar, y dentro de la opción Objetos de imagen seleccionar Barra de navegación. También puedes utilizar el botón Imágenes de la barra de herramientas Insertar, dentro de la ficha Común. En el cuadro de diálogo que aparece podrás introducir el nombre de cada botón de la barra de navegación. Luego introducirás la imagen correspondiente al botón en estado de reposo (arriba) y a continuación la imagen del botón que se mostrará al pasar el cursor sobre éste (sobre). Por último introduce la URL de la página que se abrirá al pulsar sobre el botón, puedes buscarla con ayuda del botón Examinar. Diseño de Páginas Web con DreamWeaver 29
Cuando hayas terminado de crear el primer botón pulsa sobre el botón para crear el siguiente botón de la barra de navegación. Apartado 4. Botones y texto flash QUÉ ES FLASH? Macromedia es una empresa de software de gráficos y desarrollo web. Entre sus productos se encuentra Dreamweaver, y también flash. Flash es una tecnología que ha supuesto un gran avance en materia de diseño web. Ya que permite la creación de animaciones (películas) con muy poco "peso". Esto es algo muy importante a la hora de diseñar una página. Ya que cuanto menos pesen los objetos que insertamos en ella menos tiempo tardarán en ser cargados por el navegador y por tanto, más rápida será la navegación por la Web. Dreamweaver proporciona una selección de botones Flash que puedes usar como elementos de tu barra de navegación o insertarlos en cualquier otra parte de tu página web. Para insertar un botón Flash Dreamweaver nos ofrece dos posibilidades, sigue los siguientes pasos: Lo primero es guardar la página antes de insertar el botón Flash. Una vez guardada la página accede al menú Insertar y elige la opción botón Flash dentro de Media. También puedes seleccionar botón Flash dentro de Media en la barra de herramientas Insertar (Común). Diseño de Páginas Web con DreamWeaver 30
Ha llegado el momento de que crees botones flash por ti mismo te atreves? Vamos allá! Sigue los pasos que te indicamos a continuación: Abre la página zonas.htm, en ella tenemos cuatro vínculos de texto (norte, sur, oriente y occidente). Bórralos para sustituirlos luego por botones flash. Sitúa el cursor justo encima del mapa de asturias y saca el cuadro de texto Insertar botón flash y crea el primer botón teniendo en cuenta que: o Puedes escoger el estilo que más te guste. o El texto debe ser Norte. o La fuente : Arial Black, 12 o El destino será _blank o Por último, lo guardaremos como norte.swf. Pulsa sobre el botón Examinar para guardar los botones en una carpeta "flash" dentro de tu sitio turismo. Pulsa Aceptar y crea los botones para abrir las páginas sur, oriente y occidente. Guarda los cambios realizados en la página zonas.htm. Luego abre la página principal.htmen el explorador y pulsa sobre el vínculo Geografía Has conseguido algo similar a esto? Diseño de Páginas Web con DreamWeaver 31
Asegúrate de que todos los vínculos se abren correctamente en una nueva ventana. Cada uno de estos botones tiene un efecto Qué efecto tienen los botones que has elegido? Si necesitas modificar cualquier botón solo tendrás que hacer doble clic sobre el en la vista diseño y se abrirá de nuevo el cuadro de diálogo. La opción Texto flash que podemos encontrar tanto en el menú Insertar como en la barra de herramientas Insertar. Nos ofrece la posibilidad de utilizar textos con efectos dinámicos. Estos textos tienen la misma finalidad que los botones que hemos utilizado anteriormente. Diseño de Páginas Web con DreamWeaver 32
Es el momento de crear un texto flash por ti mismo no crees? Vamos allá! Abre la página ciudades.htm, al final de ésta tienes dos vínculos a los ayuntamientos de Oviedo y Gijón. Vamos a sustituirlos por textos flash, elimínalos. Sitúa el cursor en el lugar donde se encontraba el primer vínculo. Abre el cuadro de diálogoinsertar texto flash teniendo en cuenta... o Fuente : Verdana, 14 o Alineación : Centrada o Colores de fondo y sustitución : #669900 y #6600CC o Texto : Ayuntamiento de Gijón o Vínculo : http://www.ayto-gijon.es (escribe la ruta "relativa" en el cuadro de texto. El botón examinar es para buscar páginas dentro del sitio) o Destino : _blank Cuando termines de rellenar el cuadro de diálogo pulsa Aceptar. Luego inserta debajo otro texto flash para el ayuntamiento de Oviedo teniendo en cuenta que su dirección es:http://www.ayto-oviedo.es Guarda los cambios efectuados en el documento ciudades.htm. Luego abre la páginaprincipal.htm en el navegador y pulsa sobre el vínculo Ciudades principales ves algo como esto? Diseño de Páginas Web con DreamWeaver 33
Comprueba que las páginas de los ayuntamientos de Gijón y Oviedo se abren correctamente. Apartado 5. Animación de capas QUÉ ES ANIMAR CAPAS? Dreamweaver nos ofrece la posibilidad de realizar determinadas animaciones en nuestras páginas Web. Estas animaciones pueden consistir en mostrar u ocultar textos, imágenes u otros elementos, hacer que éstos se desplacen por la ventana del navegador, cambiar su tamaño, etc El único requisito que deben cumplir los elementos que queramos animar es el de encontrarse dentro de una capa. Dreamweaver mecaniza este proceso a través de las líneas de tiempo y los comportamientos de capas. Las líneas de tiempo contienen fotogramas, estos fotogramas contendrán los objetos (introducidos en capas) que deseamos animar. LINEAS DE TIEMPO Diseño de Páginas Web con DreamWeaver 34
En el momento que selecciones la opción Líneas de tiempo del menú Ventana aparecerá un panel como el que te mostramos a continuación. Te indicaremos el nombre de las opciones del panel con las que trabajaremos durante este curso: CREAR UNA ANIMACIÓN Abre una página nueva en blanco e inserta en ella una capa. Escribe dentro de la capa el siguiente texto: "ANIMAR CAPA" Selecciona la capa y despliega el menú que se encuentra a la derecha del panel. Selecciona la opción Registrar ruta de capa. Diseño de Páginas Web con DreamWeaver 35
Ahora mueve la capa por la ventana de diseño haciendo el recorrido que quieras. Verás como se va dibujando una guía. Cuando sueltes verás como aparecen resaltados en morado los fotogramas que se han grabado en la línea de tiempo. Ahora dale a la línea de tiempo el nombre AnimarCapa y selecciona la casilla Reprod. auto. Cuando lo hagas verás un cuadro de diálogo como el que te mostramos a continuación. Selecciona No volver a mostrar este mensaje y pulsa Aceptar. Este mensaje indica que cada vez que marcas la opción de reproducción automática estás diciendo que quieres que la película se ejecute al cargarse la página en el navegador. Diseño de Páginas Web con DreamWeaver 36
Guarda el documento con el nombre animar1.htm y pulsa F12 para comprobar su funcionamiento. La capa se moverá por la página repitiendo los movimientos que tu le has indicado anteriormente en la vista diseño. Luego se detendrá, si quieres que no se detenga nunca marca la casilla Bucle. Para hacer que la animación ocupe más o menos fotogramas pulsa sobre el final de la linea violeta y arrastra hacia la derecha o la izquierda Apartado 6. Comportamientos QUÉ SON LOS COMPORTAMIENTOS? Los comportamientos son muy importantes en Dreamweaver, ya que se usan para controlar todas las funciones dinámicas. En este apartado analizaremos algunos de los comportamientos que se usan para controlar la reproducción de líneas de tiempo. Panel comportamientos Para aplicar comportamientos a las capas utilizaremos el panel comportamientos. Como el resto de los paneles, lo encontrarás en el menú Ventana. Diseño de Páginas Web con DreamWeaver 37
EJECUTAR LÍNEA DE TIEMPO El comportamiento Ejecutar línea de tiempo se usa para iniciar una línea de tiempo en respuesta a un evento, como la pulsación del ratón. Este comportamiento se utiliza cuando no se desea activar Reproducción automática y se desea iniciar la animación pulsando sobre una imagen, texto, etc. Para agregar un comportamiento Reproducir línea de tiempo deberás haber creado la animación previamente. Tal como hemos visto en el apartado de animación de capas. La primera vez que apliques un comportamiento debes asegurarte de tener los eventos para el navegador adecuado. Pulsa sobre el botón (+) y selecciona la opción Mostrar eventos para. Luego elige IE 6.0 (Internet Explorer versión 6.0). Si eligieses un navegador más antiguo tendrías menos eventos disponibles. Continuaremos con el documento animar1.htm. Quita la reproducción automática del panel Línea de tiempo. Asegúrate de tener visible el panel comportamientos ( menú Ver ). Selecciona la capa y pulsa sobre el botón (+). En el desplegable selecciona Línea de tiempo y a continuación Reproducir línea de tiempo. Diseño de Páginas Web con DreamWeaver 38
En el cuadro de diálogo que aparece selecciona la línea de tiempo que quieres reproducir. En este momento solo tienes una (AnimarCapa) pero podrías tener varias. Fíjate ahora en el panel que te muestra los comportamientos. Al producirse el evento se ejecutará el comportamiento. Si tu evento no es el que aparece en la imagen no te preocupes lo modificaremos. Diseño de Páginas Web con DreamWeaver 39
Una vez que estés seguro de que los eventos que vas a ver son los del IE 6.0. Pulsa sobre el evento que tienes actualmente para modificarlo y aparecerá un desplegable. Busca el evento onclick (al hacer clic) y selecciónalo. Por último guarda los cambios en el documento animar1.htm y pulsa F12 para verlo en el navegador. Cuando hagas un clic sobre la capa, ésta comenzará la animación creada en la línea de tiempo. Si quieres detener la línea de tiempo los pasos son casi idénticos. Seleccionarás entre los comportamientos Detener línea de tiempo. Luego indicarás qué línea de tiempo deseas detener (también puedes detenerlas todas) y por último el evento que desencadenará ese comportamiento. MOSTRAR-OCULTAR CAPAS Una de las opciones más útiles de las capas es la capacidad de poderlas mostrar u ocultar a voluntad. Para usar la acción Mostrar-Ocultar capas debes seleccionar primero un objeto que active la acción. Este objeto puede ser cualquier elemento, excepto una capa, las imágenes suelen ser los objetos más utilizados, aunque también podríamos utilizar textos. El usuario realizaría un evento sobre ese objeto (hacer un clic, pasar el puntero sobre él, etc ). Y este evento desencadenaría el comportamiento lo entiendes? Abre una nueva página en blanco e inserta en ella la imagen de San Salvador de Valdedios. Luego dibuja una capa e inserta en ella el siguiente texto: San Salvador de Valdediós es monumento de estilo prerrománico tardío. Situado en lugar privilegiado por la naturaleza, y a pesar de sus reducidas dimensiones, el popular Conventín impresiona por el equilibrio de sus formas y volúmenes. En su realización se introducen avances técnicos -Núñez Rodríguez señala, entre otros, el abovedamiento total y la luz directa-, y se aprovechan las anteriores experiencias del estilo ramirense. Luego oculta la capa. Recuerda que puedes hacerlo desde el panel Capas o desde el Inspector de propiedades. Selecciona la imagen, luego en el panel comportamientos escoge la opción Mostrar-Ocultar capas. Diseño de Páginas Web con DreamWeaver 40
Verás un cuadro de diálogo donde debes seleccionar la capa que quieres mostrar u ocultar. Cuando tenemos varias capas es conveniente ponerles nombre para no liarse. En este caso no tiene importancia ya que solo tenemos una, selecciónala y pulsa Mostrar. Ahora selecciona el evento que desencadenará el comportamiento de mostrar la capa. Selecciona OnMouseOver (cuando el ratón pasa sobre el elemento). Repite el proceso para ocultar la capa cuando el ratón no se encuentre sobre la imagen ( OnMouseOut ). Debes volver a la opción Mostrar-Ocultar capas para indicar que la quieres ocultar. Y luego indicar el evento. Diseño de Páginas Web con DreamWeaver 41
Guarda el documento como MostrarOcultar.htm y pulsa F12 para comprobar el resultado. La capa que contiene el texto debe verse únicamente cuando el cursor se encuentre sobre la imagen. Si quieres eliminar un comportamiento, únicamente debes acceder al panel Comportamientos y seleccionar el comportamiento que deseas eliminar. Luego pulsar la tecla Supr. O hacer clic sobre el botón (-) PRACTICANDO EN EL SITIO TURISMO Sigue los pasos que te proponemos a continuación: Abre la página introduccion.htm, verás que esta página tiene la imagen de un mapa de asturias. Queremos que cuando el usuario pase el cursor sobre ella se muestre una capa con el siguiente texto : La extensión del litoral asturiano se encuentra entre la punta de Tina, en el concejo de Ribadedeva, y la punta de la Cruz, en el concejo de Castropol. Es alta, caracterizada por lo abrupto de sus acantilados y la carencia de grandes puertos naturales. Al pie de los cantiles se ofrecen hermosas playas, amplias y abiertas unas, recoletas otras, de arenas finas y limpias. No hay concejo de la costa que no tenga arenales famosos y concurridos en el período estival, desde la playa de La Franca (Ribadedeva) hasta la de Peñarronda o Penarronda (Castropol). Por el contrario, cuando el cursor no se encuentre sobre la imagen la capa debe ocultarse sabrías hacerlo? Si tienes alguna dificultad sería conveniente que echases un vistazo al apartado Mostrar-Ocultar capas. Diseño de Páginas Web con DreamWeaver 42
Abre la página portada.htm (no olvides que esta página se encuentra dentro de la carpeta prueba). Inserta una capa y dentro de ella crea una tabla de 1 fila y 3 columnas. El tamaño de la tabla será 750px por 188px. Inserta una imagen en cada celda. Registra una ruta para la capa que mueva la capa de derecha a izquierda. El movimiento debe comenzar al cargarse la página y no debe interrumpirse nunca te parece muy difícil? Si es así vuelve al apartado Ejecutar línea de tiempo. Diseño de Páginas Web con DreamWeaver 43
Apartado 7. Código HTML Como ya hemos comentado al comienzo de este tema, Dreamweaver genera código en lenguaje JavaScript para implementar los efectos de animación. Este código se incluye directamente en el archivo HTML, por lo que está disponible para cualquiera que desee verlo. Qué es javascript? El lenguaje JavaScript es un lenguaje de programación que nos ayuda a realizar efectos que el HTML no permite. Dreamweaver permite la incorporación de elementos que dinamizan las páginas web de una forma sencilla, sin tener que conocer ningún lenguaje de programación. Se dice que JavaScript es un lenguaje de guiones ( scripts ). Normalmente serán pequeños fragmentos de código (guiones) que aparecerán junto al resto del código de la página web. Si abres cualquiera de las páginas en las que has insertado animaciones y miras en su vista Código. Podrás ver una serie de guiones de código entre las etiquetas: Como ya hemos comentado anteriormente, el código JavaScript se escribe junto al resto del código de la página web. Se puede incorporar tanto en la sección de cabecera (HEAD) como en la sección del cuerpo (BODY) de la página, dependiendo de la función que realice. Diseño de Páginas Web con DreamWeaver 44
LECCION 5: SUBIR LA WEB AL SERVIDOR Apartado 1. Subir nuestra página INTRODUCCIÓN Nuestro sitio Web ya está terminado. Pero el único modo de visualizarlo es desde nuestro ordenador. Ya que hemos configurado el sitio en local. Para que nuestra página pueda ser visitada desde cualquier ordenador es necesario publicarla en Internet. O lo que es lo mismo, almacenarla en un servidor de Internet. Como tener nuestro propio servidor se escaparía de lo que pretendemos en este curso, haremos algo mucho más sencillo. Utilizaremos los servicios gratuitos que ofrecen algunos servidores, tele cable, el ayuntamiento de Gijón, etc... Es decir, les solicitaremos un espacio para subir nuestra Web. Por qué estos servicios son gratuitos? Es muy sencillo, nos ofrecen un espacio gratis donde colocar nuestra página a cambio de mostrar publicidad. Además la dirección para llegar a nuestra web estará precedida de la dirección del sitio que nos ha ofrecido el espacio. Obtener un espacio de pago Si queremos que nuestra Web no tenga publicidad, necesitamos un mayor espacio y velocidad, queremos tener un dominio propio que permita a la gente acceder con mayor facilidad a nuestra página, etc... Lo que debemos hacer es contratar un espacio en un servidor de pago. Existen gran cantidad de servidores de pago, estos servidores cobran una cuota mensual o anual Diseño de Páginas Web con DreamWeaver 45
ADQUIRIR UN ESPACIO GRATUITO Como ya hemos comentado antes, existen muchos servidores que nos ofrecen espacio gratuito para nuestras páginas. Nosotros hemos escogido geocities, pulsa sobre el siguiente vínculo para registrarte como usuario de geocities y crear tu propio espacio web: http://es.geocities.yahoo.com/ Sigue los pasos que te indicamos a continuación: Pulsa sobre el vínculo que te ofrece geocities para crear tu sitio Web. A continuación verás un contrato, debes aceptarlo para continuar con la creación del sitio. Una vez que lo aceptes verás un formulario en que tienes que introducir tus datos, en el apartado ID de Yahoo! Hemos introducido turismoenasturias. Lo que introduzcas aquí será parte de la dirección del sitio. Diseño de Páginas Web con DreamWeaver 46
Si cumplimentas correctamente el formulario ya tendrás tu sitio Web. En la siguiente pantalla que verás te indicará los datos que necesitas. Apartado 2. FTP Aún no hemos subido los archivos que componen nuestro sitio Web a internet, por el momento lo único que hemos hecho ha sido crear el sitio. Antes de continuar debemos detenernos un instante para hablar sobre el FTP Diseño de Páginas Web con DreamWeaver 47
QUÉ ES ESTO DE FTP? Bien. FTP son las siglas de File Transfer Protocol, es decir, Protocolo de Transferencia de Archivos. Es el sistema más sencillo y eficaz para enviar y recibir archivos entre ordenadores a través de la red Internet. Justo lo que queremos! Enviar los archivos que tenemos en nuestro ordenador al sitio Web que acabamos de crear. Existen muchos programas de FTP (Cute FTP, Ws_FTP LE, etc...) que podríamos utilizar para realizar esta transferencia. Nosotros lo haremos a través de Dreamweaver que también nos ofrece esta opción. CARGAR LOS ARCHIVOS EN EL SERVIDOR WEB REMOTO Hasta ahora teníamos nuestro sitio Web en "local" es decir en nuestro equipo. Ahora vamos a transferirlo al servidor Web "remoto". Sigue los pasos que te proponemos a continuación: Diseño de Páginas Web con DreamWeaver 48
En primer lugar asegúrate de tener visible el panel Archivos. En la pestaña Archivos selecciona la opción Administrar sitios. Edita el sitio turismo y verás el asistente que ya habíamos utilizado al comienzo del curso para crearlo lo recuerdas? En la primera pantalla aparece el nombre del sitio, que dejaremos como está. Pulsa Siguiente. Ahora debes indicar que sí quieres utilizar una tecnología de servidor (no especifiques ninguna en el desplegable) y pulsar Siguiente. En esta pantalla la opción que debemos marcar es Editar localmente y luego cargar al servidor de prueba remoto. La ruta a la carpeta que contiene nuestro sitio ya la habíamos metido al crearlo, por tanto no es necesario modificarla. Pulsa Siguiente. Esta pantalla es la más importante, asegúrate de introducir los datos correctamente: Diseño de Páginas Web con DreamWeaver 49
La forma de conectar con el servidor será FTP, la dirección del servidor es ftp.es.geocities.com La conexión FTP será la ID que hayas rellenado en el formulario de Geocities, en nuestro caso turismoenasturias. Y la contraseña será la que tú hayas indicado en dicho formulario. Cuando hayas rellenado esto correctamente pulsa Siguiente. Los siguientes pasos déjalos con los datos que te propone por defecto y pulsa Siguiente en cada pantalla hasta completar el asistente. Por último pulsa sobre el botón Listo. En este momento tenemos configurado el sitio remoto. Por tanto podremos elegir si queremos ver los archivos locales o los archivos que se encuentran en el servidor remoto. Para ello escogeremos la opción que nos interese en el segundo desplegable que se encuentra en la pestaña Archivos. Diseño de Páginas Web con DreamWeaver 50