PDF de programación - APUNTES DE DREAMWEAVER - CLASE V

APUNTES

DE



DREAMWEAVER



CLASE V



Dreamweaver- Clase V



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



• 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).



Para modificar sus propiedades: Clic en marco rectangular exterior



Conjunto de marcos



3

Dreamweaver- Clase V



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



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:[email protected] (vínculo correo electrónico, si lo



5

Dreamweaver- Clase V



escribimos en el cuadro vínculo siempre se antepone mailto: y la
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
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" />

la vista código



6

Dreamweaver- Clase V



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



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.



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.



Estilos creados:
texto y titulo



8

Dreamweaver- Clase V



la
se abre
columnas y la

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



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


las

siguientes

imagen header_turismo debe presentar


La
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



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.



Para pasar a la vista código



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



10

Dreamweaver- Clase V



insertar

las

la

segunda

centrada,


y pegamos la siguiente línea de código.(Debe figurar todo en un solo
renglón)

<script src="http://h1