EJERCICIOS DE DREAMWEAVER

IES Mara de Molina

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

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

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

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

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

Cambiar el ttulo de la pgina.

Cambiamos el contenido de la etiqueta <title> 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 <li></li> 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: <a name="SampleTags"></a> hasta <br />. 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

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 <title>, 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

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

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

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.

10