Laboratorio 6. Creación de sitios Web - Dreamweaver

Transcripción

1 UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 6. Creación de sitios Web - Dreamweaver El objetivo de este laboratorio es aprender a crear sitios Web mediante la aplicación Dreamweaver. Dreamweaver es un editor del tipo WYSIWYG (What You See Is What You Get), es decir, un editor visual que permite diseñar las páginas sin saber nada de HTML. Como ejemplo para el laboratorio vamos a crear un sitio Web sobre alojamientos rurales en España. 1. Arrancar Dreamweaver. Desde el menú de Inicio abrimos la aplicación Dreamweaver. 2. Crear un nuevo sitio. De la barra de menús seleccionamos la opción Sitio Nuevo Sitio. 1

2 Llamar al sitio Alojamiento rural en España y crear una carpeta donde albergar vuestras páginas en C:\Mis documentos\grupox\, siendo X el número de vuestro grupo de prácticas. En la vista ventana de dialogo, seleccionar Disposición del mapa de sitio ( Site Map Layout ) e introducir el nombre de la página principal ( index.htm ). Pulsar Ok y contestar a todas las preguntas aceptando. 3. Creación de páginas complementarias. Además de la página de inicio, vamos a crear las páginas que complementan al sitio Web. La página de inicio, o también llamada página principal, va a estar enlazada mediante vínculos a otras dos que serán: Hotel Casa Rural la Pedriza y El Cabezo. Estas páginas contendrán datos sencillos que iremos completando durante el laboratorio. Desde la ventana de sitio, accedemos al menú archivo y seleccionamos la opción Nueva ventana. Esta será la página del Hotel Casa Rural la Pedriza. Introducir en el campo superior Titulo el nombre de la página anterior y guardar el archivo como pedriza.htm. Repetir el proceso para la página El Cabezo y llamar al fichero cabezo.htm. Como veis Dreamweaver crea una ventana por cada archivo que creamos. Fijaros que la venta del Sitio Web es igual a la siguiente: Informática aplicada al sector turístico Creación de sitios Web - Dreamweaver 2

3 4. Introducir contenido de texto en las páginas. La información de nuestra guía virtual la vamos a obtener de la dirección: Abrir la página del Hotel Casa Rural la Pedriza. Con el navegador ir a la dirección: Copiar el texto que aparece en esta página de tal forma y copiarlo en vuestra página: Utilizando la barra de Formato seleccionar el tipo de letra que vais a utilizar en toda vuestro Sitio Web. Si escogéis un tipo de letra, debéis respetar esta elección en toda vuestra guía virtual. Realizar el mismo proceso con la página El Cabezo. La información la copiáis de la dirección: Informática aplicada al sector turístico Creación de sitios Web - Dreamweaver 3

4 5. Añadir imágenes. Tenemos que introducir en las páginas de los dos alojamientos rurales sus correspondientes fotografías. Utilizando el navegador nos dirigimos a la dirección: nos posicionamos con el ratón encima de la fotografía que queremos copiar. Desde el menú contextual (pulsando el botón derecho del ratón), seleccionamos la opción Guardar imagen como.... Guardamos la imagen en una carpeta que creamos dentro de la carpeta de nuestro grupo y la llamamos imagenes : C:\Mis documentos\grupox\imagenes Desde la página que estamos construyendo sobre el Hotel Casa Rural la Pedriza seleccionamos del menú de herramientas la opción Insertar / Imagen. Pulsamos Seleccionar y la imagen queda insertada en nuestra página: Informática aplicada al sector turístico Creación de sitios Web - Dreamweaver 4

5 Realizar la misma operación con la página sobre El Cabezo, cuya fotografía se encuentra en: 6. Creación de vínculos. Abrir la página de inicio (index.htm) de nuestro sitio Web. Introducir el título a la página y debajo el nombre de los dos alojamientos rurales. A continuación seleccionar el texto Hotel Casa Rural la Pedriza : En la ventana de propiedades, en el campo Enlace (Link) seleccionar el fichero pedriza.htm pulsando el icono. Realizar el mismo proceso con el texto El Cabezo para enlazarlo con el archivo cabezo.htm. 7. Creación de vínculos para correo electrónico. Insertar al final de la página de inicio el texto Para más información. Seleccionar este texto y en la ventana de propiedades, en el campo Enlace (Link) introducir mailto: seguido de vuestro correo electrónico: Informática aplicada al sector turístico Creación de sitios Web - Dreamweaver 5

6 8. Creación de vínculos en imágenes. Abrir la página del Hotel Casa Rural la Pedriza. Al final de la página vamos a insertar un icono, el cual al pulsarlo nos retornará a la página de inicio de nuestro Sito Web. Para ello primero tenemos que conseguir el icono. Con el navegador vamos a la dirección: Al final de esta página se encuentra el siguiente icono: nos posicionamos encima de él y lo guardamos en la carpeta donde tenemos nuestras imágenes. Volvemos al Dreamweaver y nos ponemos al final de nuestra página sobre el Hotel Casa Rural la Pedriza. Insertamos el icono de la misma forma que en el apartado 5. Nos posicionamos encima del icono e introducimos en la ventana de propiedades, en el campo Enlace (Link) el fichero index.htm pulsando el icono. 9. Creación de vínculos en zonas interactivas de la imagen. En la página de inicio vamos a insertar una imagen con el mapa de España. Nuestra intención es que el cliente que entra en nuestra página de inicio pueda acceder a los distintos alojamientos rurales dependiendo de la zona geográfica donde se encuentren. En nuestro caso sólo tenemos dos alojamientos rurales situados en: Hotel Casa Rural la Pedriza Comunidad de Madrid. El Cabezo Comunidad Extremeña. Informática aplicada al sector turístico Creación de sitios Web - Dreamweaver 6

7 Lo primero de todo es conseguir la imagen del mapa de España. Para ello, desde nuestro navegador vamos a la dirección: Desde el menú contextual del navegador guardamos la imagen del mapa de España que aparece en esta página en nuestra carpeta de imagenes (C:\Mis documentos\grupox\imagenes). A continuación, desde Dreamweaver, insertamos la imagen del mapa de España en nuestra página de inicio. Seleccionamos la imagen del mapa de España y nos fijamos en la ventana de propiedades. Pulsando el icono de la ventana de propiedades. Aparecerá un menú extendido: Seleccionamos el botón circulo y señalamos en el mapa la zona sensible de la Comunidad de Madrid. A continuación introducimos en el campo Enlace (Link) de la ventana de propiedades la página del Hotel Casa Rural la Pedriza (pedriza.htm) y borra el carácter # que aparece. Para buscar el archivo puedes pulsar el icono. Informática aplicada al sector turístico Creación de sitios Web - Dreamweaver 7

8 Realizar la misma operación para el alojamiento El Cabezo. En este caso utilizar el botón trazar línea irregular y señala toda la Comunidad Extremeña. 10. Las propiedades de una página. Seleccionar la página de inicio de nuestro Sito Web (index.htm). Desde la barra de menú seleccionar la opción Modificar / Propiedades de la página. Aparecerá la ventana de propiedades de la página. Probar con distintos valores para los campos que aparecen: Título (Title): El título de la página. Informática aplicada al sector turístico Creación de sitios Web - Dreamweaver 8

9 Imagen de fondo (Background image): Seleccionamos la imagen que aparecerá en el fondo de nuestra página Web. Color de fondo (Background): Seleccionamos el color de fondo de nuestra página Web. Color de Texto (Text): Seleccionamos el color por defecto del texto de nuestra página. Nota : Es importante que todas las páginas de nuestro Sitio Web tengan un estilo homogéneo en cuanto tipo de letra, colores de fondo, colores del texto, etc. Aplicar los mismos cambios a las otras páginas Web de nuestro sitio. 11. Insertar una línea de separación. En la página de inicio de nuestro Sitio (index.htm) vamos a insertar una línea de separación entre el mapa de España y el acceso a los alojamientos rurales. Para ello vamos a seleccionar de la ventana de objetos el icono insertar línea horizontal. Insertamos la línea y nuestra página aparecerá lo siguiente: Informática aplicada al sector turístico Creación de sitios Web - Dreamweaver 9

10 12. Insertar tablas. Vamos a utilizar una tabla para describir las características de los alojamientos. Empezamos con El Cabezo. Vamos a la página cabezo.htm. Al final de la página vamos a insertar una tabla con la siguiente información: Categoría : Casa rural de alquiler completo. Capacidad: 8 plazas Precios: 216 Euros fin de semana, 450 Euros semana completa. Para ello de la ventana de objetos seleccionamos el icono como la siguiente: Insertar tabla. Aparecerá una ventana En nuestro caso seleccionamos los valores de: Filas (Rows) : 3 Columnas : 2 Borde de tabla (Border) : 0 Introducir la información en la tabla. Comprobar las posibilidades de cambio de formato de las celdas desde la ventana de propiedades. Al final tendréis algo parecido a lo siguiente: Informática aplicada al sector turístico Creación de sitios Web - Dreamweaver 10

11 13. Creación de un formulario para reservas. Ahora nos interesa crear un formulario para solicitar una reserva del alojamiento. Para ello es necesario crear una página Web con un formulario. Un formulario se compone de un conjunto de campos que el cliente tiene que rellenar. Después de rellenar los campos, el cliente puede enviar la información (normalmente se utiliza un botón). En nuestro caso, vamos a generar un correo electrónico que enviará la información sobre la reserva a nuestra cuenta de correo Creación del formulario. En Dreamweaver desde la ventana de administración de nuestro Sitio, creamos una nueva ventana desde el menú Archivo y la opción Nueva ventana. A esta venta la ponemos el Titulo Formulario de solicitud de reserva y lo guardamos con el nombre reservas.htm. Del menú de objetos seleccionamos los objetos tipo formulario tal como se muestra: Os aparecerá la siguiente ventana: Informática aplicada al sector turístico Creación de sitios Web - Dreamweaver 11

12 Lo primero de todo es insertar el formulario en nuestra página Web. Para ello seleccionamos de la ventana de objetos el icono Insertar formulario. Nos aparecerá un rectángulo dentro de la página Web. Dentro de este rectángulo es donde vamos a insertar los campos que vamos a solicitar a nuestros clientes, entre ellos: Nombre, teléfono de contacto, correo electrónico, fecha de entrada en el alojamiento, fecha de salida, número de personas, alojamiento solicitado y comentarios generales. Para insertar cada uno de estos campos seleccionamos de la ventana de objetos el icono Insertar campo de texto. Empezamos primero con el nombre del cliente. Una vez insertado este campo, en la ventana de propiedades aparece lo siguiente: Introducimos el nombre del campo (TextField): Nombre. Fijaros que en Tipo (Type) podemos escoger si nuestro campo va a ser una única línea (Single line) o puede llevar varias líneas de texto (Multicine). Todos los campos que vamos a insertar son de una única línea, excepto para el campo Comentario que puede ser de varias líneas y es donde el cliente nos escribirá sus comentarios. Insertamos todos los campos excepto el campo alojamiento solicitado. Recordar que tenéis que rellenar en todos el nombre del campo. Al final tendremos lo siguiente: Informática aplicada al sector turístico Creación de sitios Web - Dreamweaver 12

13 Nos queda por insertar el campo de alojamiento solicitado. Este campo nos debe permitir seleccionar un alojamiento de una lista de alojamientos disponibles (en nuestro caso dos). Para insertar un campo de este tipo seleccionamos de la ventana de objetos el icono Insertar lista/menú. Insertamos este campo que le llamamos alojamiento y desde la ventana de propiedades seleccionamos el botón Lista de valores : Al pulsar este botón nos aparece una ventana en la que tenemos que introducir los valores del menú que quiero que aparezcan tal y como se muestra: Por último, nos queda insertar un botón para que la solicitud nos llegue a nosotros. Hemos optado como solución que la información de la solicitud de reserva nos llegue por correo electrónico ha nuestra cuenta. Del menú de objetos seleccionamos el icono para insertar un botón. En la ventana de propiedades correspondiente tendremos: Tenemos que introducir el nombre del campo Enviar. En Etiqueta (Label) introducimos el texto que queremos que aparezca en el botón de nuestro formulario, en nuestro caso Enviar solicitud. Y por últimos en Acción (Action) seleccionamos la opción Submit form. Sólo nos queda indicar el tipo de acción que queremos que se realice con la información introducida en el formulario. Como hemos dicho, queremos que esta información nos llegue por correo electrónico. Para ello en la página donde estamos diseñando el formulario, seleccionamos con el ratón la línea roja punteada que define el tamaño del formulario. De esta forma aparecerá en la ventana de propiedades lo siguiente: Tenemos que introducir el nombre del formulario solicitud. Indicar en Acción (Action) lo que queremos que se realice mailto:<vuesto_correo_electronico>. En Método (Method) indicar POST. Como ejercicio complementario intentar que los campos del formulario queden alineados. Solución: insertar los campos del formulario en las celdas de una tabla. Informática aplicada al sector turístico Creación de sitios Web - Dreamweaver 13

14 13.2 Crear el enlace a la página de reservas. Por último, tenemos que hacer el enlace de la página. Para ello, en la cada una de las páginas de los alojamientos vamos a insertar una imagen y crearemos un vínculo a la página de reservas. En Internet existen diversos catálogos de recursos gratuitos, donde podemos obtener imágenes, botones, líneas de división, etc. para nuestro sitio Web. Un tipo de recursos son los dibujos en formato GIF animado. Un buen sitio donde podéis conseguir este tipo de gráficos en Escoger el dibujo que más se acerque a la idea de rellenar y enviar una solicitud, y lo guardáis en vuestro PC utilizando del menú contextual del navegador. Desde Dreamweaver seleccionamos la página del El Cabezo. Insertamos la imagen que acabamos de bajarnos y creamos un enlace a la página de reservas ( reservas.htm ) de la misma que se indica en el apartado 8 de este laboratorio. Así es como veríamos la página desde el navegador: Informática aplicada al sector turístico Creación de sitios Web - Dreamweaver 14