EJERCICIOS DE DREAMWEAVER IES Mara de Molina

1

Ejercicios de dreamweaver

Antes de empezar a trabajar hay que

plantearse la estructura de pginas

que deseamos crear. Nosotros,

como ejemplo, vamos a crear una

pgina sobre los sistemas de

produccin de electricidad y

seguiremos un esquema como el

que ves.

Creacin del sitio web

Abre el programa Dreamweaver y

crea una pgina HTML (Crear nuevo

- HTML).

Ponle el ttulo Tecnologas de

produccin de electricidad. Guarda la pgina con el nombre de index (el programa le aade la

extensin html).

Vamos a crear el sitio de nuestra web. Esto ser una carpeta en la que iremos colocando todos

los archivos e imgenes que vayamos utilizando.

En el men activa Sitio - Nuevo sitio y modifica las ventanas de configuracin.

En Sitio ponemos el nombre, en nuestro caso Produccin de electricidad y en carpeta del sitio

local la carpeta donde deseamos que se guarden los elementos de la web.

En Configuracin avanzada - Informacin local indicamos la carpeta de imgenes (creamos

una carpeta llamada imagen dentro de nuestra carpeta de sitio) y la URL de nuestra web si la

sabemos ya.

Debemos copiar todas las imgenes que vamos a utilizar en la carpeta imagen.

Pgina index.html

Crea una tabla con las caractersticas que se ve en la

imagen.

Reparte el tamao de las filas de forma razonable (las

2 primeras y la ltima estrechas y la tercera muy

grande).

EJERCICIOS DE DREAMWEAVER IES Mara de Molina

2

Empezaremos con la primera fila colocando imgenes de sustitucin para ello vamos al men

Insertar - Objeto de imagen - Imagen de sustitucin.

En la pantalla que sale elige la

imagen original y la de

sustitucin. Podemos ajustar el

tamao en las propiedades de

la imagen.

En el panel lateral Insertar, dentro del

apartado Diseo, encuentras la opcin

Dibujar Div PA. Con esta opcin se puede

crear una capa donde podemos colocar

la imagen y moverla a donde queramos.

Repite el proceso para la otra imagen de sustitucin.

Para hacer el ttulo crearemos una nueva capa con

Dibujar DIV PA. Escribimos Tecnologas para producir

electricidad. Para cambiar el tipo de letra damos

abajo en Propiedades de pgina y definimos un

Encabezado 1 a nuestro gusto.

Despus se lo aplicamos en Formato.

Para cambiar el color de fondo del ttulo lo hacemos

en las propiedades de la capa

Y para cambiar el color de fondo de la pgina en Propiedades de la pgina-Apariencia (HTML).

Creacin de men y cuerpo

Vamos a hacer un men debajo del ttulo. Para ello divide la segunda fila en tres columnas. Se

hace presionando el smbolo que se encuentra debajo de Celda.

Ponemos color de fondo en las celdas y escribimos en cada una de ellas el texto

correspondiente.

En la tercera fila escribe una descripcin sobre la temtica de la pgina y modifica el texto

hasta que quede a tu gusto.

Finalmente divide tambin la cuarta fila en tres columnas y en cada una inserta una fotografa

y unos botones hechos en Flash con la opcin Insertar - Media - SWF. Si no tienes los botones

EJERCICIOS DE DREAMWEAVER IES Mara de Molina

3

en alguna carpeta del sitio web el programa te sugerir que lo guardes all y te dar esa opcin.

Despus debers poner un Ttulo a cada botn, que ser el texto que aparecer en un

recuadro amarillo al pasar por encima. Debe quedar as:

Edicin de botones en Flash.

Para hacer que los botones acten como enlaces a las pginas web que vamos a ir haciendo

debemos editar el botn con Flash y

modificarlo.

Para editar el botn debes

seleccionarlo y apretar en Editar. El

programa nos pregunta dnde est

el archivo fla. Se lo indicamos

Una vez abierto el botn en Flash

debemos seleccionar el botn; ir al

men Ventana - Acciones y en

ActionScript 2.0; poner el siguiente

cdigo:

on (press) {getURL("ener_renovables.html");}

En los dems botones pondremos lo mismo pero modificando las direcciones por

no_renovables.html y otras.html

EJERCICIOS DE DREAMWEAVER IES Mara de Molina

4

Pginas de marcos (energas

renovables)

Elegimos Archivo - Nuevo y en la

pantalla que sale Pgina de muestras -

Conjunto de marcos - Izquierdo fijo.

Ahora tenemos que indicar al programa

los atributos de accesibilidad de cada

marco. Vamos a dejar los nombres que

el programa pone por defecto.

Hay que tener en cuenta que tenemos

que guardar los marcos cada uno con su nombre y poner un nombre

al conjunto de marcos. Estando en el marco de la izquierda iremos a

Archivo - Guardar marco y le llamaremos men_. La parte derecha la

llamaremos principal y en Archivo - Guardar todo pondremos el

nombre de la pgina de marcos que en este caso ser

ener_renovables.html

Ahora definimos el tamao del marco izquierdo. Abrimos la pgina

de marcos ener_renovables.html, y en las propiedades asignamos un

valor de 250 pxeles a la columna izquierda.

Abrimos archivo menu.html y le ponemos un color de fondo.

Insertamos una tabla de 240 pxeles de ancho y que contenga 6 filas

y 1 columna. Ponemos un borde de 5 pxeles y un relleno de celda

de 15 pxeles. Establecemos tambin el color del relleno de las

celdas y el tamao del texto de la pgina y escribimos lo que ves en

la imagen.

Fuera de la tabla escribimos Inicio y lo centramos.

Guarda los cambios.

Pasamos a crear la pgina Principal. La abrimos y elegimos un color de fondo. En ella

colocamos un texto con formato Encabezado 1 y centrado y la imagen girasol.jpg y guardamos

la pgina en Archivo - Guardar o [Ctrl]+[s].

EJERCICIOS DE DREAMWEAVER IES Mara de Molina

5

A continuacin hacemos 6 pginas con cada uno de los tipos de energa renovable: elica,

hidrulica, fotovoltaica, termosolar, marina y geotrmica. Es importante tener en cuenta que

los servidores de internet no admiten tildes, espacios ni la letra , e incluso algunos no

admiten maysculas por los que los nombres de las pginas no deben tener estos caracteres

(Llmalas por ejemplo e_lica, hidr_ulica, fotovoltaica, termosolar, marina y geot_rmica). Las

pginas simplemente tendrn un color de fondo, el nombre de la energa y la foto

correspondiente.

Ahora debemos crear los vnculos

adecuados para que cuando se presione

en el men de la izquierda vayan

apareciendo en el marco de la derecha la

pgina correspondiente, para ello debes

seleccionar el texto Elica y ve al men

Insertar - Hipervnculo. Debes elegir la

pgina que se abrir, en el primer caso

e_lica.html, despus en destino elegimos

mainframe para que la pgina se abra en la parte derecha y en Ttulo ponemos Energa Elica.

El texto que ponemos en Ttulo saldr despus en un recuadro amarillo al pasar el ratn por

encima del Enlace.

Repite el proceso con los otros 5 tipos de energas.

Hacemos ahora el vnculo para volver a la pgina del

principio al apretar Inicio.

Tenemos que tener la precaucin de elegir en Destino

_top para que la pgina se abra normal y no en una

parte de la pgina de marcos.

Realizar una pgina a partir de una plantilla (no_renovables.html)

Partimos de una plantilla buscada en internet, en este caso la plantilla Techmania1.

Cambiamos el nombre index.html de la pgina de la plantilla por el nombre

no_renovables.html y la colocamos en la carpeta de nuestra web junto a la carpeta images

donde estn las imgenes que usa la plantilla y su hoja de estilos (Techmania.css).

Abrimos la pgina no_renovables.html con Dreamweaver. Nos ponemos en la opcin dividir

con la que podemos ver el cdigo html y la de diseo.

Cambiamos el men superior: Cambiamos

el ttulo por el que nosotros queremos

poner. Nos fijamos en que tiene 6 botones y

nosotros slo necesitamos 5 (Inicio,

Nuclear, Ciclo Combinado, Carbn y Fuel). El

cdigo que genera este men lo podemos

modificar tanto en la vista de cdigo como en

la de diseo para que quede como ves aqu.

EJERCICIOS DE DREAMWEAVER IES Mara de Molina

6

Cambiar el ttulo de la pgina.

Cambiamos el contenido de la etiqueta y en lugar de Techmania ponemos Energas

de produccin elctrica no renovables

Cambiamos el men lateral:

Se hace de la misma manera

que el superior.

En este caso es todava ms

fcil porque lo que hacemos

es copiar todas las etiquetas del men superior a ste. Cambiamos donde pone

Sidebar Menu por Tipos de energas no renovables

El apartado Site

parteners lo podemos

cambiar por el de

pginas recomendadas

para el tema y

cambiaremos los enlaces por las direcciones web que queramos.

Nos quedara algo como esto, fjate que hemos colocado target=_blank en cada enlace para

que se abran en ventana nueva. Se puede hacer en el men desplegable Destino

De los tres ltimos apartados

del lateral derecho vamos a

eliminar el de Search y

Support Styleshout y

mantendremos el de Wise

Words poniendo una cita

celebre de Albert Einstein.

Nos quedar as:

Cambiamos la parte principal de la izquierda:

Quito todo el cdigo entre: hasta . Con esto conseguimos

dejar solo el apartado Template info que cambiaremos para que nos sirva para nuestra web.

Cambiaremos el texto Template info por el que aparece en la imagen, as mismo pondremos

el texto explicativo en sustitucin del que haba. Los textos que se copian de pginas web se

EJERCICIOS DE DREAMWEAVER IES Mara de Molina

7

pueden copiar primero en el bloc de notas para que se eliminen todos los formatos de texto y

los hipervnculos y los pueda poner en mi web.

Cambiamos la parte la inferior: Se modifica para que quede como se ve en la imagen.

Ahora debemos hacer el resto de pginas del apartado no renovables. Para ello vamos a ir

modificando la pgina no_renovables.html y cuando la tengamos cambiada la iremos

guardando con el nombre de cada una de las que vamos a hacer: nuclear.html,

ciclo_combinado.html, carb_n.html y fuel.html.

Slo hay que modificar la etiqueta , el indicador current del men superior y el

contenido principal de la pgina. Cada una de las pginas tendr un pequeo texto (sacado de

la wikipedia) y una imagen adecuada que enlazaremos directamente de la wikipedia. En el

men Insertar Imagen pondremos la

direccin URL de la imagen.

Como la imagen ser muy grande para

nuestra web modificaremos el ancho

poniendo 450 y el alto en 300

EJERCICIOS DE DREAMWEAVER IES Mara de Molina

8

Pginas elaboradas con hojas de estilos css (otras.html)

Las hojas de estilo (cascade style sheets) son conjuntos de instrucciones, a veces en forma de

archivo anexo (xxx.css), que se asocian a las pginas web y se ocupan de los aspectos de

formato y de presentacin de los contenidos: tipo, fuente y tamao de letras, justificacin del

texto, colores y fondos, etc. Las hojas de estilo permiten manejar por un lado los contenidos

(en la pgina html) y por otro el diseo (en la css).

Vamos a utilizar para elaborar la pgina otras.html una hoja de estilo que trae como plantilla el

programa Dreamweaver. Para ello haremos lo siguiente.

Vamos al men Archivo nuevo y en la ventana que sale elegimos Pgina de muestra Hojas

de estilos CSS Diseo completo: Georgia, rojo/amarillo y damos Crear

Para ponerle el nombre vamos a Archivo Guardar como y le ponemos de nombre estilo.css.

Creamos ahora la pgina otras.html (Archivo Nuevo Pgina en blanco). Guardamos la

pgina con el nombre otras.html. Para que esta pgina tenga asociada la pgina de estilos

damos botn

derecho Estilos

CSS Adjuntar hoja

de estilos y

elegimos la hoja

estilo.css que

habamos creado.

Vamos a ir elaborando la pgina. Escribimos el ttulo y el texto de debajo. Seleccionamos slo

el ttulo y elegimos en Propiedades HTML la clase header, sobre el texto con el botn

derecho lo alineamos al centro. A la parte de texto le ponemos la clase subtitle. Insertamos

EJERCICIOS DE DREAMWEAVER IES Mara de Molina

9

una tabla de 800 pixeles de ancho, con 2 columnas, 3 filas y 0 px de borde. Escribimos los

textos Energa de fusin e Hidrgeno en las celdas de arriba y con la clase nav. Las

imgenes las colocamos en las 2 celdas de abajo. Creamos hipervnculos a las pginas

fusi_n.html e hidr_geno.html. Finalmente escribimos el texto del pie y le aplicamos la clase

footer y enlazamos con la web del centro pero que se abra en una ventana nueva (_blank).

Repite el proceso para elaborar las pginas fusi_n.html e hidr_geno.html. La forma ms rpida

sera duplicando la pgina otras.html y modificndolas.

EJERCICIOS DE DREAMWEAVER IES Mara de Molina

10

Trabajo con Javascript (fotos.html)

Vamos a realizar una pgina con una galera de imgenes. En este caso vamos a utilizar la

galera shadowbox que se puede obtener de internet.

Copia la carpeta fotos dentro de la carpeta de tu sitio web. Abre la pgina fotos.html con

Dreamweaver. Lo que vamos a hacer es cambiar las fotos de animales por las que tenemos

nosotros de centrales, y modificar los textos.

Utiliza el programa Photoshop para modificar las fotos de centrales que tenemos en la carpeta

imagen y gurdalas en la carpeta galera que hay dentro de la carpeta fotos con el mismo

nombre que tienen ahora las de animales (01, 02,); tambin las debes guardar en tamao

pequeo de 140 x 105 pxeles y con los nombres 01p, 02p,

A continuacin y con el programa Dreamweaver cambia los textos que hablan de animales por

los correspondientes sobre centrales.

Crea tambin un enlace para que al presionar sobre el dibujo volver vayamos a la pgina

index.html

Pginas energas y realizado.

Realiza estas 2 pginas utilizando lo que has aprendido hasta ahora.

La pgina energas debe tratar sobre las fuentes de energa que ha utilizado el ser humano:

Energa muscular (humana y animal)

Energa natural (hidrulica, elica, combustibles renovables)

Combustibles fsiles (carbn, petrleo, gas)

Nuclear.

La pgina realizado debe ser una pgina personal en la que des tus datos y hables de tus gustos

y aficiones.