Beruflich Dokumente
Kultur Dokumente
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.
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
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.
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
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:
EJERCICIOS DE DREAMWEAVER
EJERCICIOS DE DREAMWEAVER
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.
EJERCICIOS DE DREAMWEAVER
EJERCICIOS DE DREAMWEAVER
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.
EJERCICIOS DE DREAMWEAVER
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
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
La pgina realizado debe ser una pgina personal en la que des tus datos y hables de tus gustos
y aficiones.
10