APUNTES DE

DREAMWEAVER
CLASE V

PROF. VIVIANA LLORET

http://aulamatic.blogspot.com

Dreamweaver- Clase V

Prof. Viviana Lloret

CONSTRUCCIÓN DEL SITIO TURISMO EN ARGENTINA En este ejercicio se va a trabajar con marcos, tablas, insertar o eliminar tablas, combinar filas y celdas, utilizar vista estándar y vista de disposición, tamaño de las tablas en píxeles o en porcentajes, insertar textos, cambiar formato de texto, crear estilos (CSS), insertar imágenes, aplicar vínculos a textos o imágenes, a páginas internas o externas, vincular a un mail, insertar ancla con nombre (marcadores) , insertar comportamientos, capas, mapear una imagen, configurar el destino donde se abrirá una página, menú emergente, insertar sonido de fondo, etc. Crear una carpeta (turismo_apellido), una subcarpeta dentro de ésta, llamada img, copiar las imágenes contenidas en la carpeta Turismo en Argentina y generar un sitio con el mismo nombre (desde Dreamweaver – menú Sitio> Nuevo > Avanzado: Configuramos el Nombre del sitio “Turismo_en_argentina_Apellido”, Asignamos la Carpeta local “turismo_apellido” y la carpeta predeterminada de imágenes “img”) . Ver página terminada Realización de un sitio Web, utilizando marcos y tablas. (Ver video) PUNTO 0: ESTRUCTURA El sitio deberá contener marcos:

Marco principal (MainFrame)

Dreamweaver- Clase V

Prof. Viviana Lloret

• Marco BOTONERA mide 150 px de ancho. • Marco CABEZAL: mide 750 px de ancho • Index.html (página que invoque a los marcos: botonera.html, cabezal.html, quienes.html) Para crear un sitio con marcos, debemos hacer clic en Insertar >HTML > Marcos: Seleccionamos izquierdo anidado superior. Para modificar sus propiedades, abrimos la ventana Marcos: menú Ventana > Marcos

Ventana Marcos

Cada marco mostrará una página diferente, el izquierdo la página botonera.html, el superior cabezal.html, y el principal, inicialmente, mostrará la página quienes, luego cuando creemos nuevas páginas, éstas se abrirán en el marco principal. Para guardar cada marco nos posicionamos en cada uno de ellos, clic en Archivo > Guardar marco, el marco izquierdo lo guardamos con el nombre botonera.html, el superior con el nombre cabezal.html, el principal (mainframe) con el nombre quienes.html. Luego guardamos el conjunto de marcos con el nombre index.html (previamente lo seleccionamos en la ventana Marcos, haciendo clic en el marco rectangular exterior).

Conjunto de marcos Para modificar sus propiedades: Clic en marco rectangular exterior

3

Dreamweaver- Clase V

Prof. Viviana Lloret

Clic en Selección Fila Col. (en la primera columna) le asignamos 150 px, Luego, seleccionando la segunda columna le otorgamos 750 px.

Agregamos las páginas datos.html, videos.html, link_de_interes, para ello clic en Archivo >Nuevo >HTML, para guardar cada página: Archivo > guardar) PUNTO1: Marco BOTONERA A • Propiedades de páginas: todos los márgenes 0, color de fondo (de las páginas) #000000. B • En el marco Botonera, insertar una tabla 150px, 7 Filas, 1 Columna, color de fondo #999999. • En la Fila 1: insertar la imagen logo.jpeg • En la Fila 2: insertar un botón Flash, clic en insertar > Media > Botón Flash, configurarlo de la siguiente manera:

4

Dreamweaver- Clase V

Prof. Viviana Lloret

El atributo destino lo modificaremos en la página index. En Destino se debe indicar dónde se quiere que se abra la página vinculada, se selecciono mainFrame, para que se abra en el marco principal. Posibles destinos: _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. Como ya sabes, el marco padre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos. _self: Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo. _top: Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella. Además de estos destinos para los enlaces, también aparecerán los nombres de los distintos marcos de la página, en este caso, mainFrame, topFrame y leftFrame (Si los botones lo editamos desde la página index, de lo contrario, desde botonera, sólo aparecerán _blank, _parent, _self o _top).

• En la Fila 3: insertar un botón Flash, con el texto Datos, vínculo página datos.html. • En la Fila 4: insertar un botón Flash, con el texto Videos, vínculo página videos.html. • En la Fila 5: insertar un botón Flash, con el texto Tiempo, vínculo http://www.smn.gov.ar/. • En la Fila 6: insertar un botón Flash, con el texto Contacto, mailto:argentina.tour@iespana.es (vínculo correo electrónico, si lo escribimos en el cuadro vínculo siempre se antepone mailto: y la 5

Dreamweaver- Clase V

Prof. Viviana Lloret

dirección correspondiente).

• En la Fila 7: insertar un botón Flash, con el texto Link de interés, vínculo página link_de_interes.html. PUNTO 2: MARCO CABEZAL A• Propiedades de páginas: todos los márgenes 0. B• Insertar una tabla de 1 fila por 1 columna, borde 0, Ancho 750 px, Alto 120 px, imagen de fondo header2.jpg, Alineación vertical: inferior. C• Insertar dentro de ésta otra tabla de 1 fila, 6 columnas, ancho 100 %, borde 0, escribir en cada celda Litoral, Buenos Aires, Patagonia, Cuyo, Noroeste, Centro. Luego agregaremos los vínculos cuando creemos dichas páginas, recordar que, en destino debe figurar mainFrame (para que las páginas se abran dentro del marco principal). En la vista código luego de <title> Turismo en Argentina </title>copiar el siguiente línea de código para agregar música de fondo a nuestra página: <bgsound src="leon gieco - busquenme.mp3" loop="-1" />

6

Dreamweaver- Clase V

Prof. Viviana Lloret

PUNTO 3: HOJA DE ESTILO Crear la hoja de estilo externa, cuyo nombre es: estilos.css y vinculará con los html. Los elementos son: •texto >> Arial, 12 px, color #CCCCCC. •titulo >> Verdana, 14 px, negrita, color #999999. Para ello clic en el menú Texto > Estilo CSS > Nuevo, colocar como nombre texto, en la ventana que se abre, colocar como nombre de archivo estilos.css, configuramos los atributos para el estilo texto (Ver imagen en la próxima hoja); Para el estilo titulo nuevamente Menú texto > Estilo css> Nuevo, pero esta vez en Definir en: dejamos estilos.css.; luego aplicamos el formato pedido.

7

Dreamweaver- Clase V

Prof. Viviana Lloret

Recordar que el atributo negrita se encuentra en Grosor. La hoja de estilo se adjuntará a cada página creada, de esta forma al seleccionar texto en la página, en la ventana propiedades, aparecerán los estilos creados. Para adjuntar hoja de estilo: Menú Texto> Estilo CSS>Adjuntar hoja de estilo.

Estilos creados: texto y titulo PUNTO 4: PAGINA QUIENES. Insertar una tabla de 750 px de ancho, 3 filas y 2 columnas, borde 0. Dividir: la primera fila en dos columnas, la segunda celda de la primera fila en tres filas. Para dividir una celda en filas o columnas, seleccionarla, clic en Modificar >Tabla > Dividir celda, elegir filas o columnas y el número.

8

Dreamweaver- Clase V

Prof. Viviana Lloret

Otra forma, una vez seleccionada la celda clic en ventana anterior para seleccionar dividir en filas o la cantidad.

se abre columnas

la y

Insertar la imagen header_turismo.jpg en la segunda fila en la que quedo divida la celda anterior, ver el modelo.

La imagen header_turismo debe presentar las siguientes características: Un mapa de bits sobre cada una de las regiones que se vincularán con la página que haga referencia y se mostrarán en el mismo marco. Ejemplo al hacer clic con el mouse sobre la zona de Cuyo se mostrará en ese marco la página cuyo.html. NOTA: Como la página cuyo.html se abrirá en el mismo marco donde figura el vínculo, en destino debe figurar: _self. Las regiones que se muestran son Cuyo, Patagonia, Buenos Aires, Centro, Noroeste y Litoral, en dicho orden. Lo que debemos hacer es mapear la imagen, es decir crear regiones o sectores en la imagen, que respondan a un cierto evento (al hacer clic, por ejemplo, también podía ser al pasar el mouse por encima). 9

Dreamweaver- Clase V

Prof. Viviana Lloret

Para ello: Seleccionamos la imagen, clic en Herramienta zona interactiva rectangular,

Y dibujamos un rectángulo sobre la primera región. En vínculo, clic en el icono carpeta, seleccionar la página cuyo.html. En destino seleccionamos _self, ya que la página se abrirá en le mismo marco que contiene el vínculo.

Hacemos lo mismo con las restantes regiones. En la tercera fila se mostrará un banner creado en la página web http:/www.flashvortex.com, escribiendo directamente su código, para ello: clic en la tercera fila (seleccionamos previamente alineación derecha) , clic en Código
Para pasar a la vista código

10

Dreamweaver- Clase V

Prof. Viviana Lloret

y pegamos la siguiente línea de código.(Debe figurar todo en un solo renglón)
<script src="http://h1.flashvortex.com/display.php? id=3_1247288071_23352_291_0_468_60_8_48" type="text/javascript"> </script>

Páginas Buenos_aires, Cuyo, Patagonia, Noroeste, Centro, Litoral: Insertar tabla de 3 filas 1 columna, ancho 750 píxeles, borde 0. En la primera fila agregar el título para cada una, esto es: “Una Capital europea con alma latina”, “La Tierra del vino y las Altas Cumbre”,” Lo infinito”, “Encuentro con el pasado “, “Pampas & Sierras”, “El espectáculo de las Aguas Grandes” respectivamente. En la segunda fila, centrada, insertar las imágenes: bienvenidabuenosaires.jpg, bienvenidapatagonia.jpg, bienvenidanoroeste.jpg, bienvenidacentro.jpg, bienvenidalitoral.jpg, respectivamente. En la tercera fila copiar el texto texto1 (Página Buenos_aires), texto2 (Página cuyo), texto3 (Página Patagonia), texto4 (Página Noroeste), texto5 (Página centro), texto6 (Página litoral). Aplicar los estilos creados para la fuente. Página datos.html: Insertar tabla de 3 filas 1 columna, ancho 750 píxeles, borde 0. En la primera fila insertar la animación de flash turismos.swf. En la segunda fila insertar, centrada, la imagen infografia_argentina.jpg. En la tercera fila dividirla en 2 columnas, en la primera insertar la imagen buenmapa.jpg, en la segunda copiar el texto 7. En el mapa notarán que figuran una serie de pequeños dibujos, éstos nos servirán de enlace para que al hacer clic en ellos se abra una ventana, con una imagen del lugar al que hacen referencia. Para ello debemos crear un mapa de imagen en cada sector de la imagen buenmapa.jpg, luego se agregarán comportamientos, es decir, al hacer clic en el sector se abrirá una ventana con la imagen. Cómo crear un mapa de imagen se explicó en la página 10. Crear una página para cada dibujo e insertar en ella la imagen del lugar al que hace referencia. ( Por ejemplo para la imagen cataratas insertar en la página creada la imagen cataratas.jpg).

Los comportamientos son acciones que suceden cuando los usuarios realizan algún evento sobre un objeto, como puede ser 11

Dreamweaver- Clase V

Prof. Viviana Lloret

mover el ratón sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc. El panel Comportamientos se puede abrir a través del menú Ventana, opción Comportamientos. También pulsando Mayús+F4.

En este panel hay que desplegar el botón pulsando sobre él, y en Mostrar eventos para elegir una versión de la lista de navegadores (seleccionamos IE 6.0)

Debido a que la mayoría de usuarios utiliza Internet Explorer, vamos a seleccionar este navegador. Puedes seleccionar alguna de sus últimas versiones: IE 5.5 o IE 6.0. Una vez elegido un navegador ya no es necesario volver a elegirlo las siguientes veces que se desee insertar algún comportamiento. Lo primero que hay que hacer es seleccionar el objeto sobre el que se ha de aplicar el comportamiento, como puede ser una imagen, un fragmento de texto, etc. Para ello, seleccionamos la imagen buenmapa.jpg, clic en zona interactiva rectangular, dibujamos un rectángulo sobre el dibujo de las Cataratas. Al desplegar el botón del panel Comportamientos aparece la lista de todas las acciones posibles para el navegador elegido previamente, de entre las que se puede seleccionar una.

12

Dreamweaver- Clase V

Prof. Viviana Lloret

Seleccionamos abrir ventana del navegador, editamos los atributos de la siguiente manera.

Destildamos los atributos Barra de herramientas de navegación, de ubicación…., para que no aparezcan.

En esta ventana se observa a la izquierda el evento, y a la derecha la acción que produce dicho evento.

Entre los eventos encontramos onclick: al hacer clic OnMouseOver: al pasar el Mouse sobre el objeto. Onload: al cargar la página

13

Dreamweaver- Clase V

Prof. Viviana Lloret

Verificar que en evento figure onClick, para que la acción se produzca al hacer clic en la imagen Cataratas. Hacer lo mismo para el resto de las imágenes. En la próxima clase se explicará el resto de los temas que se abordan en la construcción de dicho sitio.

14