Prcticas guiadas para el diseo web con Dreamweaver MX

Luis Escandell Gmez Enero de 2.007

Prctica 1 - Introduccin a DREAMWEAVER

Qu es Dreamweaver?
Dreamweaver es un software fcil de usar que permite crear pginas web profesionales. Las funciones de edicin visual de Dreamweaver permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML.

Editar pginas web

Tal y como ya hemos visto, cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo. Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un editor grfico. Aunque es necesario conocer algo de HTML para poder hacer pginas de cierta calidad. Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromeda Dreamweaver.

Conceptos bsicos de DREAMWEAVER

Cuando entramos a Dreamweaver lo primero que vemos es esta pantalla:

Cuadro de Herramientas: para insertar imgenes, hipervnculos, capas, barras, mens desplegables, etc

Barra de propiedades: en ella tenemos las propiedades de cada uno de los elementos de nuestra pgina web. Por ejemplo si seleccionamos un texto desde ah podemos cambiar el tipo de letra, el tamao, la alineacin, ponerle un hiperenlace, etc.

1) Esta va a ser nuestra primera pgina web. Lo primero va a ser ponerle un ttulo. Para ello vamos a seguir los siguientes pasos:

Pulsar con el botn derecho sobre cualquier parte de la hoja en blanco y seleccionar la opcin Propiedades de la pgina. Aparecer la siguiente ventana, en ella pondremos el ttulo que tenemos aqu y como color de fondo pondremos el naranja.

Desde aqu se puede poner tambin una imagen como fondo de pantalla si quisiramos, se hace seleccionndola desde aqu

2) Hasta ahora deberamos tener una pgina web donde arriba del todo ponga el ttulo que hemos introducido y como color de fondo tengamos el color naranja. Ahora vamos a introducir el siguiente texto: COLOR CREAR PGINAS WEB CON DREAMWEAVER AZUL Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botn derecho del ratn sobre la imagen que queremos traer de Internet, se abre una ventana con una opcin similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro.

3) Para conseguir los efectos que hay en el texto que acabas de copiar (negritas, letras en colores, cursivas, etc) se debe recurrir a la ventana de propiedades. Para ello seleccionaremos el texto deseado (por ejemplo: botn derecho del ratn debe ir en negrita) y se pone pulsando sobre

TIPO DE LETRA (seleccionar el tipo ARIAL)

COLOR DE LETRA

CURSIVA

ALINEACIN DEL TEXTO: Izquierda, Centrada o Derecha

4) Crear dentro de vuestra carpeta de alumno una carpeta llamada DREAM y dentro guardar esta pgina con el nombre pagina1.htm

Prctica 2 - Introduccin a DREAMWEAVER

Configuracin de un sitio local (I)
Un sitio web es un conjunto de archivos y carpetas, relacionados entre si, con un diseo similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas que va a contener. Por ejemplo si vamos a crear una pgina web sobre un equipo de ftbol, lo primero es crear un sitio web (por ejemplo que se llame ftbol) y dentro de ese sitio ya irn las diversas pginas que formen parte de l. Como por ejemplo presentacion.htm, palmares.htm, plantilla.htm, etc. La forma habitual de crear un sitio web consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imgenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Es muy importante que la pgina principal del sitio tenga el nombre index.html, ya que los navegadores buscan una pgina con ese nombre cuando se intenta acceder a una URL genrica. Por ejemplo, si escribiramos la direccin genrica http://www.petrer.es/ en el navegador, ste intentara cargar la pgina http://www.petrer.es/index.html, por lo que se producira un error en el caso de que no existiera ninguna pgina con el nombre index.html

Crear o editar un sitio web

Una vez creadas las carpetas que formarn un sitio local, ya es posible definir el sitio en Dreamweaver. Para ello hay que seguir los siguientes pasos: 1) Deberis tener creada dentro de vuestra carpeta de alumno una carpeta llamada DREAM 2) Dirigirse al men Sitio, a la opcin Nuevo sitio. All veremos la siguiente pantalla:

3) Ah introduciremos los siguientes datos: - Donde pone Nombre del sitio pondremos Sitio web de vuestro nombre - En la Carpeta raz local seleccionaremos la carpeta DREAM que previamente hemos creado.

Cuando aceptemos nos aparecer una nueva ventana que ser el sitio web. En ella habrn dos columnas. En la de la derecha veremos la lista de pginas web que tiene nuestro sitio, y en la

izquierda veremos la estructura de rbol que va adoptando nuestro sitio web. Esta ventana la dejaremos minimizada porque en ella podremos ir viendo la estructura que tiene la pgina. 4) Ahora nos vamos a la otra ventana, la que est toda en blanco y vamos a definir tal y como hicimos en la prctica anterior las propiedades de la pgina (se haca pulsando con el botn derecho y seleccionando la opcin Propiedades de pgina). Introduciremos los siguientes valores: - Titulo: Primera pgina del sitio web - Color de fondo: Azul claro 5) Utilizando los elementos de la barra de propiedades, escribir el siguiente texto en la pgina que tenis abierta: Obtener ayuda del men de ayuda Slo tiene que hacer clic en Ayuda de Microsoft Word, en el men de ayuda. Si el Ayudante est activado, aparecer en pantalla. Si el Ayudante est desactivado, aparecer la ventana de ayuda. Para escribir una pregunta en la ventana de ayuda, haga clic en la ficha Asistente para Ayuda. Para desplazarse por una tabla de contenido de la ayuda, haga clic en la ficha Contenido. Cuando desee buscar palabras o frases especficas, haga clic en la ficha ndice.

Formato: Fuente:

Permite poner encabezados al texto seleccionado Permite cambiar tipo de fuente del texto seleccionado.

Tamao: Color: Estilo: Alinear: Lista: Sangria:

Permite cambiar el tamao del texto seleccionado. Permite cambiar el color del texto seleccionado. Permite cambiar el texto seleccionado a negrita / cursiva. Permite alinear el texto seleccionado a la izqda., centrado, dcha. Permite crear listas para el texto seleccionado Permite establecer sangras para el texto seleccionado

6) Guardar la pgina con el nombre index.html dentro del sitio web DREAM

Prctica 3 - Introduccin a DREAMWEAVER

Configuracin de un sitio local (II)
1) Vamos a crear dos pginas web nuevas, para ello nos vamos al men Archivo / Nuevo. La primera la guardaremos con el nombre prueba1.htm dentro del sitio web DREAM y dentro tendr el siguiente texto: Texto de la pgina prueba1.htm La segunda la guardaremos con el nombre prueba2.htm dentro del sitio web DREAM y dentro tendr el siguiente texto: Texto de la pgina prueba2.htm

2) Ahora vamos a abrir la pgina index.htmly en ella escribiremos al final de la pgina el siguiente texto:
Acceso a prueba1

Acceso a prueba2
Queremos establecer hipervnculos para que cuando pulse sobre Acceso a prueba1 pase a la pgina prueba1.htm. El proceso para realizar esto es muy sencillo: - Seleccionar la frase Acceso a prueba1 y pulsar sobre el botn de la barra de propiedades.

- Se abrir una ventana donde especificaremos el destino del hipervnculo. En este caso seleccionaremos la pgina prueba1.htm - Realizar este mismo proceso con Acceso a prueba2 y guardar los cambios

Vistas del sitio

Es posible visualizar un sitio en el panel Sitio o en una ventana. El panel Sitio se puede abrir a del travs del men Ventana, opcin Sitio. Tambin pulsando F8 o sobre el botn lanzador. 3) Vamos a hacer la prueba con nuestro sitio web DREAM. Si todo ha ido bien hasta el momento deberamos tener 3 pginas web: index.html, prueba1.htm y prueba2.htm.

- Pulsaremos sobre el botn quedar algo como esto:

y nos debera

En esta imagen se visualizan el mapa del sitio y el sitio local. En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento index.html, ya que ste ha sido definido como pgina principal del sitio y contiene vnculos hacia los otros dos. Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de Dreamweaver, las pginas no se mostrarn correctamente: no aparecern imgenes, no funcionarn enlaces, etc. En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a travs del sitio, es posible actualizar automticamente las pginas para que si hacen referencia a un objeto que ha cambiado, despus no se produzcan problemas al visualizarlas.

Al modificar algn objeto que es referenciado por algn otro documento, se muestra una ventana similar a esta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados. Simplemente hay que pulsar sobre el botn Actualizar.

4) Cambiar las propiedades de pgina de las pginas prueba1.htm y prueba2.htm (se haca pulsando el botn derecho y seleccionando Propiedades de pgina) y ponerles los siguientes atributos: prueba1.htm Color de fondo de color amarillo Color de texto de color verde Titulo de pgina: Mi segunda pgina web con Dreamweaver : prueba1 Escribir al final de la pgina el texto Volver e insertar un hipervnculo para que vuelva a index.html

prueba2.htm Color de fondo de color naranja Color de texto de color azul Titulo de pgina: Mi tercera pgina web con Dreamweaver : prueba2 Escribir al final de la pgina el texto Volver e insertar un hipervnculo para que vuelva a index.html

Guardar los cambios y ver si ha cambiado algo en el sitio web.

5) Abrir la pgina index.html y pulsar la tecla F12. Con esto conseguimos ver una vista previa de cmo quedara esta pgina web en el navegador. Comprobar que todos los hipervnculos funcionan bien y si alguno falla corregirlo.

Prctica 4 - Introduccin a DREAMWEAVER

Imgenes (I)
En este tema vamos a ver cmo insertar imgenes en un documento. Tambin veremos cmo crear algunas imgenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras pginas. Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen. Despus de esto, ya es posible seleccionar una imagen a travs de la nueva ventana. 1) Vamos a insertar dentro de la pgina index.html de vuestro sitio web DREAM unas cuantas imgenes. stas debern guardarse previamente dentro de una carpeta llamada IMAGENES que deberis crear dentro del sitio web DREAM. Las imgenes a insertar las tenis dentro de la carpeta C:\ ALUMNO \ RECURSOS PARA EL ALUMNO \ IMGENES: AERONAVE.JPG ARCO.JPG AVION.JPG CADENA.JPG Ponerlas una debajo de la otra centradas, utilizando el botn centrar y guardar la pgina index.html

Cambiar el tamao de una imagen

Dentro de Dreamweaver puede modificarse el tamao de las imgenes. Dicho cambio de tamao no se aplica directamente sobre el archivo de imagen, sino que lo que vara es la visualizacin de la imagen dentro de la pgina (por lo tanto no es recomendable). Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de como podra quedar modificndola desde un editor externo, como Photoshop o Gimp. Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa al icono de Dreamweaver y modificamos su tamao de varias formas diferentes:

Imagen original Imagen con tamao modificado

Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede resultar til modificar el tamao de algunas imgenes aunque esto implique perder calidad. Existen dos formas de modificar el tamao:

Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen. La otra es a travs de la ventana de propiedades, cambiando los campos An (anchura) o Al (altura). Estos campos aparecern en el inspector cuando sea seleccionada alguna imagen.

Para cambiar la alineacin de la imagen (izquierda, centrada, derecha) podemos hacerlo

igual que hicimos con el texto, utilizando las opciones de alineacin de la ventana de propiedades. Pueden crearse vnculos y comportamientos sobre partes de una imagen, sin la necesidad de que sea sobre toda ella. A esto se le conoce como mapa de imagen.

2) Vamos a abrir la pgina web index.html y modificaremos el tamao de las imgenes que antes insertamos, de forma que queden con el siguiente tamao y alineacin: IMAGE
AERONAVE.JPG ARCO.JPG AVION.JPG CADENA.JPG

ANCHURA (AN) 600 150 300 500

ALTURA (AL) 200 500 300 100

ALINEACIN Derecha Centrada Izquierda Derecha

3) Ahora crearemos dentro de nuestro sitio web DREAM, tres pginas ms, llamadas valencia.htm, andalucia.htm y madrid.htm. stas tendrn el siguiente texto dentro: - valencia.htm = Pgina principal de la Comunidad Valenciana , con fondo amarillo - andalucia.htm = Pgina principal de la Comunidad Andaluza, con fondo rojo - madrid.htm = Pgina principal de la Comunidad de Madrid, con fondo naranja 4) A continuacin, guardad las pginas anteriores y cread una pgina web nueva llamada mapa.htm, donde aadiremos una imagen del mapa de Espaa (que previamente os deberis bajar de Google).

Seguidamente definiremos sobre ella un mapa de imagen. Esto significa que dependiendo de la zona de la imagen donde pinchemos podremos abrir un hipervnculo diferente. Para ello utilizaremos la herramienta

Dibujar con esta herramienta el contorno de la Comunidad Valenciana y luego donde pone vnculo, estableced la pgina valencia.htm. Haced lo mismo con el resto de Comunidades, guardar los cambios y comprobad que todo funciona correctamente pulsando sobre F12. Guardad los cambios a la pgina mapa.htm.

Prctica 5 - Introduccin a DREAMWEAVER

Imgenes (II) - Imagen de sustitucin
Un rollover o imagen de sustitucin es una imagen que cambia por otra cuando el puntero se sita sobre ella. Este tipo de imagen suele utilizarse en los mens o en los botones para desplazarnos a travs de distintas pginas. Para insertar un rollover hay que dirigirse al men Insertar, Imgenes interactivas, a la opcin Imagen de sustitucin. En la nueva ventana hay que especificar la imgen original y la de sustitucin. El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecer en lugar de la imagen en el caso de que por algn motivo sta no pueda ser mostrada en el navegador. El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers. Puede hacerse a travs del campo Alt del inspector de propiedades de la imagen seleccionada.

1) Entrar dentro del sitio web DREAM y crear all una nueva pgina llamada menu.htm y que tenga las siguientes caractersticas (las imgenes deberis copiarlas previamente a vuestra carpeta: Fondo con la imagen NUBES.JPG situada en la carpeta RECURSOS PARA EL ALUMNO / IMGENES. Color del texto amarillo Insertar una imagen de sustitucin con las imgenes 8208.jpg y 8223.jpg para que accedan a la pgina index.html. Centrar la imagen y poner debajo Acceso a la pgina principal Insertar dos imgenes de sustitucin para que accedan a las pginas prueba1.htm y prueba2.htm. Elegid las 4 imgenes que queris de la carpeta RECURSOS PARA EL ALUMNO / IMGENES y ponerle debajo los textos Acceso a la pgina prueba1 y Acceso a la pgina prueba2.htm respectivamente.

Guardad la pgina y comprobar que cambian las imgenes en la vista previa de la pgina. 2) Aadir en la pgina anterior hipervnculos a los textos que habis escrito, de forma que se pueda acceder a las pginas index.html, prueba1.htm y prueba2.htm tanto desde las imgenes como desde los textos. Guardar y comprobar que funcionan los cambios.

Botones Flash
Existen otra serie de imgenes especiales, similares a los rollovers, que suelen utilizarse para crear mens, como pueden ser los botones Flash. Para insertar un botn Flash hay que dirigirse al men Insertar, Imgenes interactivas, a la opcin Botn Flash.

A travs de Estilo puede seleccionarse uno de los distintos formatos de botn que se ofrecen. En esta misma ventana hay que especificar tambin el texto que mostrar el botn, as como el nombre con el que ser guardado y el vnculo asociado. Es preferible guardar los botones Flash en el mismo directorio que los documentos HTML, en lugar de en la carpeta destinada a almacenar imgenes, ya que de no ser as es posible que al intentar asignar un vnculo dentro del propio sitio, Dreamweaver no permita guardar el botn con ese vnculo en una ubicacin diferente de la de dicho documento. Recuerda que los botones deben guardarse con la extensin SWF.

3) Crear una nueva pgina web llamada menu2.htm que tenga color de fondo rojo y donde pongamos 4 botones flash con las siguientes propiedades: ESTILO BlipArrow Generic Gold Glass Purple Soft - Orange TEXTO Acceso al menu 1 Acceso a prueba1 Acceso a prueba2 Acceso a index VNCULO menu.htm prueba1.htm prueba2.htm index.html

A travs del inspector de propiedades del botn Flash es posible editar de nuevo sus atributos. Puede volver a abrirse la ventana anterior pulsando sobre el botn Editar, y a travs del botn Reproducir es posible probar el funcionamiento del botn Flash desde Dreamweaver, sin la necesidad de tener que abrir la pgina con algn navegador. Despus de haber probado el funcionamiento del botn Flash, debe pulsarse de nuevo sobre el botn Reproducir (que habr cambiado por el botn Detener).

4) Cambiar las propiedades de los botones que antes habis insertado para hacerlos un poco ms grandes. Tambin podis cambiar alguno de los estilos anteriores (desde Editar...) si no os gustan. Guardar y probar cmo han quedado.

5) Aadirles un parmetro para que cada uno de los botones tengan el fondo transparente. En este caso lo haremos pulsando sobre Parmetros y poniendo Parmetro=wmode y Valor=transparent. Guardar los cambios y comprobar el efecto producido.

Prctica 6 - Introduccin a DREAMWEAVER

Tablas (I)
En este tema vamos a ver cmo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamao del borde. Todos los objetos se alinean por defecto a la izquierda de las pginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imgenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas seran imposibles de realizar. COLUMNA imagen y texto Hoy en da, la mayora de las pginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseo. Texto dentro de una celda

Las celdas son cada uno de los recuadros que forman una tabla, que son el resultado de la FILA interseccin entre una fila y una columna.

CELDA

Para poder insertar algn elemento en una celda, ya sea texto o imgenes, simplemente hay que situar el cursor previamente dentro de la celda deseada.

Insertar una tabla

Para insertar una tabla hay que dirigirse al men Insertar, a la opcin Tabla. En la nueva ventana habr que especificar el nmero de Filas y Columnas que tendr la tabla, as como el Ancho. El Ancho puede ser definido como Pxeles o como Porcentaje. Borde indica el grosor del borde de la tabla, Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de stas, y Espacio entre celdas indica la distancia entre las celdas de la tabla.

1) Crear la tabla que tenis a continuacin dentro de la pgina index.html: Poner como colores de arriba hacia abajo: marrn, naranja, rojo, y amarillo claro. Guardar los cambios y comprobar cmo ha quedado.

Formato de tabla
Las propiedades de la tabla se especifican a travs de su inspector de propiedades.

A travs del inspector de propiedades se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden ser el valor Alinear , el color de fondo o de borde de la tabla, o la imagen de fondo. Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia, para permitir especificar otros valores.

La parte superior del inspector de propiedades en este caso sirve para especificar las propiedades del texto que se insertar dentro de la celda (o celdas) seleccionada. La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo (diferentes de los especificados para la tabla global), el color del borde de la celda, etc.

2) Crear una pgina web que tenga como ttulo Meses del ao y un encabezado en la primera lnea que ponga Mes de Abril. A continuacin deberis definir la tabla necesaria para albergar este mes. Guardar la pgina con el nombre abril.htm dentro de vuestro sitio web DREAM. Adems la pgina debe tener las siguientes caractersticas: color de fondo verde color de fondo de la tabla de color naranja letras para cada fila en un color diferente.

Prctica 7 - Introduccin a DREAMWEAVER

Tablas (II) - Aadir y eliminar filas y columnas
Existen varias formas de aadir y eliminar filas y columnas a una tabla. Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el men contextual de la tabla al pulsar con el botn derecho sobre ella, o bien abrir el men Modificar. En ambos casos aparece la opcin Tabla. Segn las celdas seleccionadas, algunas de las opciones de Tabla se podrn utilizar mientras que otras no. Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna. La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.

Tambin es posible insertar filas o columnas a travs de la opcin Insertar filas o columnas. Al pulsar sobre este botn aparece una nueva ventana, donde es posible determinar si lo que se insertarn sern filas o columnas, el nmero de ellas que se insertar, y la posicin donde se insertarn. Para eliminar una fila o una columna, hay que pulsar sobre las opciones Eliminar fila o Eliminar columna.

1) Abrir la pgina web abril.htm situada dentro de vuestro sitio web. Aadir una columna a la derecha y otra a la izquierda y tambin una arriba y otra abajo. Deberis poner como color de fondo de las celdas creadas el color gris. Esto lo podis hacer seleccionando las celdas y pulsando sobre el botn

Guardar la tabla resultante con el nombre abril_modificado.htm

Debe haberos quedado algo similar a esto, donde los datos de la tabla son los que pusisteis en la prctica anterior:

Anidar, dividir y combinar celdas

Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas. A continuacin tienes un ejemplo de anidamiento. Como puedes ver, en la primera celda de una tabla se a insertado otra tabla.

2) Crear en una pgina web nueva el ejemplo anterior, donde insertaris una tabla de 2 filas por 2 columnas y en el interior de la primera celda volveris a introducir una tabla de ese tamao. Poner a la primera tabla el color de fondo verde claro y a la tabla interior el color naranja. El ttulo de la pgina ser Tablas anidadas, tendr como color de fondo el gris y la deberis guardar con el nombre tablas2.htm dentro de vuestro sitio web DREAM. Una de las formas de dividir y combinar celdas es a travs del inspector de propiedades, con los botones.

del Si se seleccionan varias celdas pueden combinarse pulsando sobre el botn inspector de propiedades. Tienes que tener en cuenta que slo es posible combinar celdas contiguas, cuya combinacin pueda dar como resultado otra celda. Para dividir una celda hay que pulsar sobre el botn o sobre la opcin Dividir celda de la opcin Tabla. del inspector de propiedades,

3) Abrir la pgina web del ejercicio anterior y realizar los siguientes pasos: - combinar las 4 celdas de la tabla interior - aadir dos columnas a la derecha de tabla exterior - dividir las 4 celdas de la tabla interior - insertar una nueva tabla a continuacin de 5 filas x 6 columnas y guardar los cambios realizados.

Prctica 8 - Introduccin a DREAMWEAVER

Formularios (I)
Vamos a ver qu es un formulario, para qu se utiliza, cmo insertar uno y qu elementos puede contener. Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc. Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar un programa que recibir los datos y har el tratamiento correspondiente. Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones.

Crear formularios
Puedes crear formularios a travs del men Insertar, opcin Formulario. Una vez creado un formulario, este aparecer en la ventana de Dreamweaver como un recuadro formado por lneas rojas discontinuas. Dentro de dicho formulario se podrn insertar los elementos del formulario a travs del men Insertar, opcin Objetos de formulario. 1) Crear una nueva pgina web dentro del mismo sitio web DREAM que tenga las siguientes caractersticas: - Ttulo de la pgina: Formulario para la introduccin de datos. - Color de fondo: Violeta, con texto en color Blanco - Una lnea donde ponga Introduce aqu tus datos para realizar la reserva: y en la lnea de abajo insertar un formulario con datos similares a los que tienes en el ejemplo de arriba. Guardar la pgina con el nombre formulario.htm

Elementos de un formulario
Los elementos de un formulario pueden insertarse en una pgina a travs del men Insertar, opcin Objetos de formulario. A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la pgina. Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, as como algunas de sus propiedades:

NOMBRE

DESCRIPCIN

Campo de Permiten aadir un cuadro de texto. El Campo de texto slo permite escribir una lnea al texto y rea usuario, mientras que el rea de texto permite escribir varias. Se puede pasar de Campo de texto a rea de texto a travs del inspector de propiedades. de texto: A travs del inspector de propiedades es posible cambiar sus propiedades. Ej Nombre: Botn: Es el botn tradicional de Windows. El botn puede tener asignadas tres opciones:Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores). Ej.

Enviar

Restablecer

Es un cuadrito que se puede activar o desactivar. Casilla de verificacin: Puede asignrsele el estado inicial como Activado o como Desactivado. Ej. Mdulos realizados: Botn de opcin: Mdulo 1 Mdulo 2 Mdulo 3

Es un pequeo botn redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, solo puede haber uno activado. Cuando se activa uno, automticamente se desactivan los dems. Ej. Estado civil: Soltero Casado Una lista o men es un elemento de formulario que lleva asociada una lista de opciones. Los elementos se aaden a travs de botn Valores de lista del inspector de propiedades. Ej. Tipo de habitacin
Elije tipo de habitacin

Lista/Men:

2) Abrir la pgina formulario.htm si no la tienes abierta, e inserta los siguientes elementos dentro del formulario que creaste:
Posibles valores: - Don Benito - Madrid - San Carlos - Legans - Vallecas

Nombre: DNI: Da:

Lunes

e-mail: Mes:
Pista tenis Enero

Hora: Centro:
Don Benito

Instalacin o actividad:

Restablecer

Enviar

Posibles valores: - Pista tenis - Pista Pdel - Campo de ftbol

3) Guardar los cambios y comprobar que funciona todo correctamente.

Prctica 9 - Introduccin a DREAMWEAVER

Formularios (II)
1) Realizad la siguiente pgina Web con Dreamweaver (en una pgina en blanco).

Debe tener las siguientes caractersticas: - Tabla, con 9 filas y 4 columnas

- Todo centrado. - Tamao del borde = 3 - Color del fondo de la 1 lnea, Verde - Color del fondo de la 2 lnea, Azulado - Color del fondo del resto de la tabla, Plateado

HOTEL LAS FUENTES * * * *

TABLA DE PRECIOS 2005
TEMPORADA ALTA HAB. INDIVIDUAL HAB. DOBLE SUIT DESAYUNO COMIDA CENA 55.00 68.00 125.00 10.00 45.00 48.00 TEMPORADA BAJA HAB. 40.00 INDIVIDUAL HAB. DOBLE SUIT DESAYUNO COMIDA CENA 58.00 100.00 8.00 32.00 35.00

Todos los Precios son en y no incluyen el IVA

2) A continuacin de la Tabla de precios de nuestra pgina Web, vamos a insertar un Formulario de reservas (dejando un par de lneas de separacin) donde podamos recoger Reservas para nuestro hotel por Internet.

Este formulario debe contener los elementos necesarios ya vistos en la prctica anterior para que nos quede como el que tenemos a continuacin:

Para realizar su Reserva rellene el siguiente Formulario:

Nombre: Apellidos: D.N.I.: Tipo de habitacin
Elije tipo de habitacin

(botn Men desplegable)

Creamos 4 elementos para la lista desplegable: Elige tipo de habitacin..., Individual, Doble y Suit
Rgimen escogido: Da de entrada: Da de salida: Extras que deseara utilizar (elija cuantos quiera): Lavandera Minibar Servicio habitaciones Sauna Gimnasio (botn de comando) Alojamiento AD MP PC (Botn de opcin)

(con el botn Casilla de verificacin) Enviar Restablecer

Guardar la pgina con el nombre reservas.htm

3) En las propiedades del formulario debis especificar que estos datos se enven por correo cuando pulsemos el botn Enviar. Para ello introducir en el campo Accin la direccin de correo [email protected]

4) Abrir la pagina Web reservas.htm desde el Internet Explorer y rellenar el siguiente formulario de reserva: - Antonio Lpez Gonzlez, con DNI: 29.567.980-C. - Habitacin doble en Media Pensin. - Entrada el 1 de junio y salida el 7 de junio. - Extras de Minibar y Sauna. Cuando le deis a Enviar, se debera recibir en ese correo la seleccin escogida. 5) Probad a enviar varias reservas ms que vosotros queris

Prctica 10 - Introduccin a DREAMWEAVER

Marcos
Vamos a ver qu son los marcos y para qu se utilizan. Tambin veremos cmo insertar un marco sencillo en una pgina, y cmo trabajar con l. Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la apariencia.
Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una pgina con tres marcos.

Marco izquierdo Marco derecho o principal Marco de arriba

Para poder visualizar la pgina de este modo, hemos tenido que abrir en el navegador una pgina web (index.html) que es la que incluye a todas las dems.

Crear marcos
1) Para crear un marco, primero hay que abrir algn documento. En este caso vamos a crear uno nuevo dentro de nuestro sitio web DREAM (Archivo / Nuevo). Lo primero que hay que hacer es dirigirse al men Insertar, a la opcin Marcos. A travs de esta opcin puede elegirse el tipo de marco que va a crearse. Pulsaremos sobre Insertar / Marcos / Izquierda se crear un nuevo marco a la izquierda del documento actual. A continuacin pulsaremos sobre Insertar / Marcos / Arriba y se crear un nuevo marco arriba del documento actual. Como puedes ver en la imagen, aparece unas lneas que divide el documento en tres. El documento de partida era uno nuevo. En este caso tendremos cuatro documentos: el de la izquierda, el de la derecha, el de arriba, y el que contiene los marcos. El de la derecha es el documento que tenamos inicialmente, que est en el marco conocido como marco padre (MainFrame). Para diferenciar cada uno de los marcos vamos a cambiar el color de fondo de cada uno de ellos. Pulsad el botn derecho encima de cada uno de ellos y en Propiedades de pgina poned los siguientes colores: marco principal = amarillo claro marco de arriba = rojo claro marco de la izquierda = azul claro

2) Por ltimo guardaremos todos los marcos (recordad que ahora tendremos 4 pginas). Seleccionar la opcin Archivo / Guardar todos los marcos y poned los siguientes nombres: - Al marco que engloba a todos los dems lo llamaremos marcos.htm - Al marco principal lo llamaremos principal.htm - Al marco de arriba lo llamaremos arriba.htm - Al marco de la izquierda lo llamaremos izquierda.htm Con esto ya tendremos guardados cada uno de los marcos de nuestra pgina. Probad a ejecutarlos desde el navegador (entrar en Mi PC / Alumno / etc) y ver cmo ha quedado cada uno de ellos. Deberis comprobar que el archivo marcos.htm contiene al resto de marcos.

Modificar marcos
Si en algn momento se necesita modificar alguno de los marcos para hacerlos ms grandes o ms pequeos se puede hacer accediendo al men Ver / Ayudas Visuales / Marcos. Entonces solamente con pinchar y arrastrar en el borde del marco lo podremos agrandar.
3) Abrir la pgina marcos.htm y hacer los marcos de la izquierda y el de arriba ms grandes. 4) Insertar en el marco izquierda.htm botones flash que contengan hipervnculos a las siguientes pginas (que ya deberamos tener creadas): prueba1.htm / prueba2.htm / abril.htm / formulario.htm / reservas.htm / menu.htm 5) Crear usando el Gimp una imagen de tamao 250x75 que tenga el texto Mi primera pgina de Prueba, guardar esta imagen con el nombre Imagen1.jpg en vuestra carpeta DREAM. A continuacin insertarla en el marco de arriba. 6) Guardar la imagen DISPARO.JPG dentro de la carpeta DREAM y a continuacin insertarla en la pgina principal junto al texto PGINA PRINCIPAL. 7) Guardar todos los marcos y probar si funcionan bien los hipervnculos.

Modificar propiedades de los marcos

Si en algn momento se necesita modificar las propiedades de los marcos como puedan ser sus nombres o el de los hipervnculos, se puede hacer siguiendo las siguientes indicaciones: 8) A travs del men Ventana / Marcos se puede acceder a las propiedades de cada marco, aprovecharemos para cambiar al nombre a cada marco, llamndolos respectivamente principal, izquierda y arriba

9) Si en algn momento una pgina no se abre en el marco correcto es porque debemos indicarle en las propiedades del hipervnculo el destino hacia donde va a abrirse la nueva pgina. Por ejemplo, en el ejercicio anterior puede que se os haya abierto los enlaces en el marco de la izquierda, cuando nosotros queramos que se abriera en el principal. Para ello hay que cambiar el destino en las propiedades del botn flash:

Prctica 11 - Introduccin a DREAMWEAVER

Creacin de la primera web (1)
En las siguientes 3 prcticas vamos a ir creando una pgina web con diferentes secciones que ya se puede aproximar una de las webs que encontramos en Internet. 1) En primer lugar debemos crear un nuevo sitio web (Sitio / Nuevo sitio) que tendr las siguientes caractersticas. - Crearlo dentro de la carpeta CICLISMO que a su vez estar dentro de tu carpeta de alumno, es decir en la ruta C:\ALUMNO \ TU_NOMBRE \ CICLISMO - Nombre del sitio: Sitio web de aprendizaje con Dreamweaver de ........ (poner tu nombre) 2) Una vez creado el sitio web debemos crear una nueva pgina. Va a ser una pgina web con marcos con lo cual sobre una pgina en blanco insertaremos un marco a la izquierda y otro arriba. Guardarlos respectivamente con estos nombres: - Al marco que engloba a todos los dems lo llamaremos index.html - Al marco principal lo llamaremos principal.htm - Al marco de arriba lo llamaremos arriba.htm - Al marco de la izquierda lo llamaremos izquierda.htm 3) Abrir la pgina principal y establecer en ella las siguientes caractersticas: Ttulo de la pgina Bicicletas Rocamora lo mejor en bicicletas Fondo de pgina con color amarillo claro Texto : Bicicletas Rocamora con estilo Encabezado 1 Bajaros de Internet la foto de una bicicleta e insertarla a continuacin de ese texto Al final de la pgina poner el texto :
VENTA DE BICICLETAS - REPARACIONES - ACCESORIOS - MATERIAL DEPORTIVO Carretera de Castilla, n:289, Tfno.-fax: 981 313674, Alicante, Espaa

Guardar la pgina principal.htm 4) Para el marco de arriba vamos a insertar una imagen que previamente disearis vosotros. Se trata de que sea el logo de nuestra empresa y debe tener una pequea imagen de una bicicleta y un texto. Aqu ya entra en juego vuestra imaginacin, un ejemplo propuesto sera este:

El tamao debe ajustarse a cmo hayis hecho el marco. Guardar la pgina arriba.htm 5) En el marco de la izquierda (izquierda.htm) vamos a crear un men para poder acceder a las diferentes secciones, para ello crearemos una tabla de 9 filas por 1 columna, donde introduciremos las siguientes secciones:

El color de fondo de la tabla debe ser el naranja claro, menos la primera celda que estar en azul claro. Con letras en color negro. 6) Justo encima de la primera celda podis poner, si os queda sitio, un icono pequeo de vuestra empresa (que previamente deberis disear). Por ejemplo uno similar a ste: 7) Llegado a este punto deberamos tener diseada ya la pgina principal del sitio web. Guardar todas las pginas y abridla desde el navegador para comprobar que se ve todo correctamente. 8) Ahora nos queda ir definiendo el resto de secciones y aadiendo los hiperenlaces en las opciones del men. Crearemos una pgina nueva y en ella definiremos la seccin: Quines somos? Se trata de poner un texto introductorio que explique cmo es nuestra empresa. Este texto os lo podis inventar, si no se os ocurre nada podis utilizar el siguiente texto:
Desde esta seccin, queremos en primer lugar explicaros en pocas lneas un pequeo resumen de nuestra historia, Bicicletas Rocamora fu fundada en el ao 1.948 por dos de los hermanos Rocamora, Avelino y Manuel, en aquellos aos compaginaban el taller con la competicin pues los dos hermanos hacan sus pinitos compitiendo en aquellas carreras que se organizaban por aquel entonces en el Campo de Batallones. En nuestros inicios como taller nos dedicbamos a las bicicletas y a las motocicletas, de las bicicletas se encargaba Avelino y de las motocicletas el encargado era Manuel, (padre y to del actual propietario), el taller se encontraba en Jubia, justo al pasar el puente con direccin a Neda en el lado izquierdo, all estuvimos hasta el ao 1.955.

Aadir alguna imagen que tenga relacin con el mundo ciclista intercalada con el texto. Guardar la pgina con el nombre quienes.htm dentro del sitio web CICLISMO 9) A continuacin crearemos una pgina nueva y en ella definiremos la seccin: Taller Se trata de poner un texto explicativo de los servicios que ofrece nuestra empresa. Este texto os lo podis inventar, si no se os ocurre nada podis utilizar el siguiente texto:
Nuestra intencin, es poder atender las demandas de nuestros clientes, cada vez ms exigentes, con lo cual intentamos ser nosotros tambin exigentes con nosotros mismos, para poder ofrecer un buen servicio y una buena calidad con unos precios muy competitivos. Para comprobarlo solo tenis que dirigiros a nuestro comercio y lo comprobareis en situ, que al margen de las palabras es la mejor forma de comprobarlo.

Aadir tambin alguna imagen relacionada con la reparacin de bicicletas intercalada con el texto. Guardar la pgina con el nombre taller.htm dentro del sitio web CICLISMO

Prctica 12 - Introduccin a DREAMWEAVER

Creacin de la primera web (2)
Vamos a seguir definiendo las secciones de la web que comenzamos en la prctica anterior. 1) Para la seccin Fotos deberemos crear una nueva pgina en blanco y bajarnos de Internet una serie de fotos relacionadas con el ciclismo (al menos 8 fotos), que guardaremos en una carpeta llamada FOTOS y que a su vez estar dentro del sitio web CICLISMO. Estas fotos las organizaremos en una tabla que estar centrada respecto a la pgina y debe tener la foto y una descripcin justo debajo. Nos debe quedar algo parecido a esto:

FOTO Descripcin de la foto FOTO Descripcin de la foto ...

FOTO Descripcin de la foto FOTO Descripcin de la foto ...

Guardar la pgina con el nombre fotos.htm

2) Para la seccin Ofertas deberemos crear una nueva pgina en blanco y bajarnos de Internet una serie de fotos relacionadas con productos para el ciclismo (al menos 6 productos) como por ejemplo bicicletas, sillines, maillots, cascos, etc. Los guardaremos en una carpeta llamada IMGENES, que a su vez estar dentro del sitio web CICLISMO. Organizad los productos igual que hicisteis con las fotos, es decir, por medio de una tabla donde aparezca la foto del producto, al lado una pequea descripcin, y a su derecha el precio. Debe quedar algo como esto:

PRODUCTO

Descripcin del producto

PRODUCTO

PRODUCTO

Descripcin del producto

PRODUCTO

...

...

...

Guardar la pgina con el nombre ofertas.htm

3) Para la seccin Enlaces tendris que crear una nueva pgina en blanco y crear en ella una recopilacin de enlaces relacionados con el ciclismo. Pinchando encima de cada enlace se debe poder acceder a esa pgina mostrada en una pgina aparte. Para hacer esto pulsaremos sobre la opcin del hipervnculo siguiente

Ejemplo:

Enlaces interesantes
Pgina del Tour de Francia Pgina de la vuelta a Espaa ... http://www.tourdefrancia.es http://www.vueltaespaa.es ...

Guardar la pgina con el nombre enlaces.htm

4) Para la seccin Nuestras Marcas tendris que crear una nueva pgina en blanco y crear en ella una recopilacin de imgenes de marcas relacionados con el ciclismo, ya sean marcas de bicicletas, sillines, pedales, etc. Debe quedaros algo como lo siguiente

Guardar la pgina con el nombre marcas.htm

5) Para la ltima de las secciones, la seccin E-mail , tendris que crear una nueva pgina en blanco y en ella pondris la forma de contactar con vosotros. El e-mail os lo podis inventar. Aadir tambin algn icono que tenga relacin con el envo de correo electrnico, como por ejemplo este:

Guardar la pgina con el nombre email.htm

Prctica 13 - Introduccin a DREAMWEAVER

Creacin de la primera web (3)
Vamos a terminar de retocar la web que comenzamos en las prcticas anteriores. 1) Crear un hipervnculo en cada una de las opciones del men para que se pueda acceder a cada una de las secciones. Por ejemplo cuando pinchemos en Fotos se debe poder acceder a la pgina fotos.htm y comprobar que se abre la pgina en el marco principal.

2) En cada una de las pginas de las secciones anteriores deberemos crear un encabezado al principio de la pgina que ponga el ttulo de la seccin. Por ejemplo en la seccin Fotos pondremos al principio de la pgina un ttulo centrado como ste:

Fotos
3) Insertar recursos para que la web quede con un aspecto ms agradable (fondos, barras, iconos, gifs animados, etc). Hay muchas pginas en Internet donde encontrar recursos para bajar, si no encontris ninguno podis entrar a la web http://www.areas.net/colorvivo.htm . En ella tenis fondos, iconos, barras, gifs animados, etc as que bajaros algunos de ellos e insertarlos en las pginas que previamente habis creado. Para ello deberis guardarlos dentro de vuestro sitio web CICLISMO.

4) Ponerle un sonido de fondo a la web. Para hacer esto nos guardaremos un sonido descargado de Internet en formato midi, y sino encontris ninguno guardaros cualquier cancin de las que hay en Entorno de Red dentro de vuesto sitio web CICLISMO. A continuacin abriremos la pgina izquierda.htm (porque siempre la vamos a tener fija en nuestra pantalla) y en ella mostrad el cdigo fuente de la pgina pulsando el botn Dentro del <body> escribid la siguiente lnea: <bgsound src="nombre_del_archivo.mid" loop="100">

5) Crear dentro de la seccin E-mail un formulario similar al que creamos en prcticas anteriores que nos permita recoger las sugerencias acerca de nuestra pgina web y enviarlas por correo. Guardar la pgina email.htm

6) Sustituir en la pgina del men los hipervnculos creados por botones flash que tengan los mismos hipervnculos y el mismo texto en su interior que los anteriores hipervnculos. Guardar la pgina izquierda.htm. 7) Comprobar que todo est bien enlazado y si consideris que podis retocar algo de la pgina para que quede mejor, hacedlo ahora.

Prctica 14 - Introduccin a DREAMWEAVER

Trabajo Final
1) Crear un sitio web en Dreamweaver que tenga como ttulo: Trabajo Final de

Informtica y lo guardaris dentro de la carpeta FINAL que a su vez estar dentro de tu carpeta de alumno, es decir en la ruta C:\ALUMNO \ TU_NOMBRE \ FINAL 2) Utilizando Dreamweaver, realizar una pgina web libre similar a la que habis creado en las prcticas anteriores sobre un tema que vosotros consideris relevante, por ejemplo un personaje del siglo XX o XXI que sea de vuestro inters, sobre vosotros mismos, un grupo de msica, un deporte, etc. y en las que deberis utilizar obligatoriamente los siguientes elementos:

Imgenes, fondos, barras e iconos. Botones Flash para los mens Mapas de imagen. Sonidos de fondo Marcos (2 o 3 lo que consideris). Hipervnculos de unas pginas con otras. Desde el men de la izquierda se tiene que poder acceder a las dems pginas.

Tablas Formularios Debis realizar al menos 5 pginas y la pgina principal ser index.html.

3) La informacin y elementos que incluyis en vuestras pginas puede obtenerse de las siguientes formas: De Internet. Recordad que las pginas http://www.areas.net/colorvivo.htm , http://www.webestilo.com y http://www.gifmania.com contienen elementos tiles para la creacin de pginas. De cosecha propia (las imgenes elaboradas con Gimp y los textos inventados). De cualquier material bibliogrfico o pgina web que podis encontrar.

4) Acordaos de guardar las pginas y todos los elementos que usis en vuestra carpeta FINAL. 5) Probar que todo funciona correctamente y est bien enlazado.

Prctica 15 Subir la pgina web por FTP

A continuacin vamos a ver cmo subir nuestra pgina web a Internet para que pueda verla todo el mundo utilizando un gestor FTP. 1) Una vez hemos activado la pgina web, nos bajaremos un programa para subir las pginas por ftp a Internet (SI NO LO TENEMOS YA INSTALADO). Para ello deberis entrar en http://www.smartftp.com y ah descargaros el programa SmartFtp. Este programa es gratuito y muy sencillo de utilizar para subir datos a Internet.

2) Instalad el programa dndole a aceptar a todos los pasos (si tenis alguna duda no dudis en preguntarlo). 3) Se os crear un acceso directo en el escritorio de esta forma. Entrad en este programa y tendris que conectar con el servidor del colegio para poder acceder a los datos de vuestra web. Para ello deberis introducir estos datos: CONFIGURACIN servidor ADDRESS (HOST) nombre LOGIN (USUARIO) ******** PASSWORD (CONTRASEA) Os los facilitar el profesor

Y pulsar sobre el botn de conectar (

Para que os aparezca el navegador de vuestro disco duro tendris que pulsar sobre el men FTP/Local Browser. En estos momentos deberis tener dos ventanas, una donde veis los archivos de vuestro disco duro y otra que estar enlazando con el espacio web que acabis de crear

4) Antes de subir los archivos aseguraros que toda vuestra pgina funciona correctamente y que la pgina principal del sitio se llama index.html (ser la que cargue en primera instancia).

ESPACIO WEB

DISCO DURO

5) Hacer doble clic en la carpeta public_html (de la ventana de arriba) para entrar dentro de ella. Este es el espacio reservado para guardar vuestra pgina web.

6) Para pasar los archivos de un sitio a otro simplemente tenis que seleccionarlos y arrastrar hasta la carpeta web donde queris que queden guardados (si os pide sobrescribir algn archivo contestar que S)

7) Comprobad que la pgina funciona correctamente, accediendo a la direccin web otorgada.