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.
Top Related