EJERCICIOS DE DREAMWEAVER
IES María de Molina
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).
1
EJERCICIOS DE DREAMWEAVER
IES María de Molina
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
2
EJERCICIOS DE DREAMWEAVER
IES María de Molina
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”
3
EJERCICIOS DE DREAMWEAVER
IES María de Molina
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].
4
EJERCICIOS DE DREAMWEAVER
IES María de Molina
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í.
5
EJERCICIOS DE DREAMWEAVER
IES María de Molina
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
6
EJERCICIOS DE DREAMWEAVER
IES María de Molina
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
7
EJERCICIOS DE DREAMWEAVER
IES María de Molina
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
8
EJERCICIOS DE DREAMWEAVER
IES María de Molina
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.
9
EJERCICIOS DE DREAMWEAVER
IES María de Molina
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.
10