EJERCICIOS DE DREAMWEAVER IES María de Molina

1

Ejercicios de dreamweaver

Antes de empezar a trabajar hay que

plantearse la estructura de páginas

que deseamos crear. Nosotros,

como ejemplo, vamos a crear una

página sobre los sistemas de

producción de electricidad y

seguiremos un esquema como el

que ves.

Creación del sitio web

Abre el programa Dreamweaver y

crea una página HTML (Crear nuevo

- HTML).

Ponle el título “Tecnologías de

producción de electricidad”. Guarda la página con el nombre de index (el programa le añade la

extensión html).

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

los archivos e imágenes que vayamos utilizando.

En el menú activa Sitio - Nuevo sitio y modifica las ventanas de configuración.

En Sitio ponemos el nombre, en nuestro caso Producción de electricidad y en carpeta del sitio

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

En Configuración avanzada - Información local indicamos la carpeta de imágenes (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 imágenes que vamos a utilizar en la carpeta imagen.

Página index.html

Crea una tabla con las características que se ve en la

imagen.

Reparte el tamaño de las filas de forma razonable (las

2 primeras y la última estrechas y la tercera muy

grande).

EJERCICIOS DE DREAMWEAVER IES María de Molina

2

Empezaremos con la primera fila colocando imágenes de sustitución para ello vamos al menú

Insertar - Objeto de imagen - Imagen de sustitución.

En la pantalla que sale elige la

imagen original y la de

sustitución. Podemos ajustar el

tamaño en las propiedades de

la imagen.

En el panel lateral Insertar, dentro del

apartado Diseño, encuentras la opción

Dibujar Div PA. Con esta opción se puede

crear una capa donde podemos colocar

la imagen y moverla a donde queramos.

Repite el proceso para la otra imagen de sustitución.

Para hacer el título crearemos una nueva capa con

Dibujar DIV PA. Escribimos “Tecnologías para producir

electricidad”. Para cambiar el tipo de letra damos

abajo en Propiedades de página y definimos un

Encabezado 1 a nuestro gusto.

Después se lo aplicamos en Formato.

Para cambiar el color de fondo del título lo hacemos

en las propiedades de la capa

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

Creación de menú y cuerpo

Vamos a hacer un menú debajo del título. Para ello divide la segunda fila en tres columnas. Se

hace presionando el símbolo 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 descripción sobre la temática de la página y modifica el texto

hasta que quede a tu gusto.

Finalmente divide también la cuarta fila en tres columnas y en cada una inserta una fotografía

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

EJERCICIOS DE DREAMWEAVER IES María de Molina

3

en alguna carpeta del sitio web el programa te sugerirá que lo guardes allí y te dará esa opción.

Después deberás poner un Título a cada botón, que será el texto que aparecerá en un

recuadro amarillo al pasar por encima. Debe quedar así:

Edición de botones en Flash.

Para hacer que los botones actúen como enlaces a las páginas web que vamos a ir haciendo

debemos editar el botón con Flash y

modificarlo.

Para editar el botón debes

seleccionarlo y apretar en Editar. El

programa nos pregunta dónde está

el archivo fla. Se lo indicamos

Una vez abierto el botón en Flash

debemos seleccionar el botón; ir al

menú Ventana - Acciones y en

ActionScript 2.0; poner el siguiente

código:

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

En los demás botones pondremos lo mismo pero modificando las direcciones por

“no_renovables.html” y “otras.html”

EJERCICIOS DE DREAMWEAVER IES María de Molina

4

Páginas de marcos (energías

renovables)

Elegimos Archivo - Nuevo y en la

pantalla que sale Página 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 página de marcos que en este caso será

ener_renovables.html

Ahora definimos el tamaño del marco izquierdo. Abrimos la página

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

valor de 250 píxeles a la columna izquierda.

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

Insertamos una tabla de 240 píxeles de ancho y que contenga 6 filas

y 1 columna. Ponemos un borde de 5 píxeles y un relleno de celda

de 15 píxeles. Establecemos también el color del relleno de las

celdas y el tamaño del texto de la página y escribimos lo que ves en

la imagen.

Fuera de la tabla escribimos Inicio y lo centramos.

Guarda los cambios.

Pasamos a crear la página 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 página en Archivo - Guardar o [Ctrl]+[s].

EJERCICIOS DE DREAMWEAVER IES María de Molina

5

A continuación hacemos 6 páginas con cada uno de los tipos de energía renovable: eólica,

hidráulica, fotovoltaica, termosolar, marina y geotérmica. Es importante tener en cuenta que

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

admiten mayúsculas por los que los nombres de las páginas no deben tener estos caracteres

(Llámalas por ejemplo e_lica, hidr_ulica, fotovoltaica, termosolar, marina y geot_rmica). Las

páginas simplemente tendrán un color de fondo, el nombre de la energía y la foto

correspondiente.

Ahora debemos crear los vínculos

adecuados para que cuando se presione

en el menú de la izquierda vayan

apareciendo en el marco de la derecha la

página correspondiente, para ello debes

seleccionar el texto Eólica y ve al menú

Insertar - Hipervínculo. Debes elegir la

página que se abrirá, en el primer caso

e_lica.html, después en destino elegimos

mainframe para que la página se abra en la parte derecha y en Título ponemos Energía Eólica.

El texto que ponemos en Título saldrá después en un recuadro amarillo al pasar el ratón por

encima del Enlace.

Repite el proceso con los otros 5 tipos de energías.

Hacemos ahora el vínculo para volver a la página del

principio al apretar Inicio.

Tenemos que tener la precaución de elegir en Destino

_top para que la página se abra normal y no en una

parte de la página de marcos.

Realizar una página 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 página de la plantilla por el nombre

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

donde están las imágenes que usa la plantilla y su hoja de estilos (Techmania.css).

Abrimos la página no_renovables.html con Dreamweaver. Nos ponemos en la opción dividir

con la que podemos ver el código html y la de diseño.

Cambiamos el menú superior: Cambiamos

el título por el que nosotros queremos

poner. Nos fijamos en que tiene 6 botones y

nosotros sólo necesitamos 5 (Inicio,

Nuclear, Ciclo Combinado, Carbón y Fuel). El

código que genera este menú lo podemos

modificar tanto en la vista de código como en

la de diseño para que quede como ves aquí.

EJERCICIOS DE DREAMWEAVER IES María de Molina

6

Cambiar el título de la página.

Cambiamos el contenido de la etiqueta <title> y en lugar de “Techmania” ponemos “Energías

de producción eléctrica no renovables”

Cambiamos el menú lateral:

Se hace de la misma manera

que el superior.

En este caso es todavía más

fácil porque lo que hacemos

es copiar todas las etiquetas <li></li> del menú superior a éste. Cambiamos donde pone

“Sidebar Menu” por “Tipos de energías no renovables”

El apartado “Site

parteners” lo podemos

cambiar por el de

páginas recomendadas

para el tema y

cambiaremos los enlaces por las direcciones web que queramos.

Nos quedaría algo como esto, fíjate 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 código 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 sustitución del que había. Los textos que se copian de páginas web se

EJERCICIOS DE DREAMWEAVER IES María de Molina

7

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

los hipervínculos 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 páginas del apartado no renovables. Para ello vamos a ir

modificando la página 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.

Sólo hay que modificar la etiqueta <title>, el indicador “current” del menú superior y el

contenido principal de la página. Cada una de las páginas tendrá un pequeño texto (sacado de

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

menú Insertar – Imagen pondremos la

dirección 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 María de Molina

8

Páginas 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 páginas web y se ocupan de los aspectos de

formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, justificación del

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

(en la página html) y por otro el diseño (en la css).

Vamos a utilizar para elaborar la página 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 Página de muestra – Hojas

de estilos CSS – Diseño 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 página otras.html (Archivo – Nuevo – Página en blanco). Guardamos la

página con el nombre otras.html. Para que esta página tenga asociada la página de estilos

damos botón

derecho – Estilos

CSS – Adjuntar hoja

de estilos y

elegimos la hoja

estilo.css que

habíamos creado.

Vamos a ir elaborando la página. Escribimos el título y el texto de debajo. Seleccionamos sólo

el título y elegimos en Propiedades – HTML la clase header, sobre el texto con el botón

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

EJERCICIOS DE DREAMWEAVER IES María de Molina

9

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

textos “Energía de fusión” e “Hidrógeno” en las celdas de arriba y con la clase “nav”. Las

imágenes las colocamos en las 2 celdas de abajo. Creamos hipervínculos a las páginas

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 páginas fusi_n.html e hidr_geno.html. La forma más rápida

sería duplicando la página otras.html y modificándolas.

EJERCICIOS DE DREAMWEAVER IES María de Molina

10

Trabajo con Javascript (fotos.html)

Vamos a realizar una página con una galería de imágenes. En este caso vamos a utilizar la

galería shadowbox que se puede obtener de internet.

Copia la carpeta fotos dentro de la carpeta de tu sitio web. Abre la página 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 guárdalas en la carpeta galería que hay dentro de la carpeta fotos con el mismo

nombre que tienen ahora las de animales (01, 02,…); también las debes guardar en tamaño

pequeño de 140 x 105 píxeles y con los nombres 01p, 02p,…

A continuación y con el programa Dreamweaver cambia los textos que hablan de animales por

los correspondientes sobre centrales.

Crea también un enlace para que al presionar sobre el dibujo volver vayamos a la página

index.html

Páginas energías y realizado.

Realiza estas 2 páginas utilizando lo que has aprendido hasta ahora.

La página energías debe tratar sobre las fuentes de energía que ha utilizado el ser humano:

Energía muscular (humana y animal)

Energía natural (hidráulica, eólica, combustibles renovables)

Combustibles fósiles (carbón, petróleo, gas)

Nuclear.

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

y aficiones.