Creando una web con frontpage

IES Valle del Jiloca

Informática 4º E.S.O.

USO DE Microsoft FrontPage Vamos a crear como ejercicio de práctica para aprender lo básico del programa la estructura de un sitio web sobre Calamocha.

1.

En primer lugar tengo que pensar los apartados que quiero que tenga y como se accede de unos a otros. Por ejemplo diseño en papel el siguiente esquema: Datos prácticos Qué visitar Fiestas

Web ayuntamiento Web comarca Web turismo Web DGA (logos)

Enlaces Contacto

DATOS PRÁCTICOS

Situación (mapa) Población (habitantes, pirámide edades…)

Servicios (hoteles, restaurantes, comarca…)

QUÉ VISITAR Plaza ayuntamiento e iglesia (fotos) Casas solariegas (dirección, fotos, propietarios…)

Convento (dirección, fotos…)

Puente romano (dirección, fotos…)

Parque (dirección, fotos…)

FIESTAS San Roque (fechas, foto baile, foto peñas…)

e-mail

Santo Cristo (fechas, foto ermita…)

Cerro (fechas, fotos…)

2.

Busco algunas fotos en Internet para empezar a diseñar y me las guardo todas en la carpeta Imagenes, dentro de WebPrueba. Las he copiado viéndolas a tamaño real, no en miniatura, y les he cambiado los nombres para que no contengan caracteres especiales y recuerde lo que son cada una.

3.

Abro FrontPage y voy a empezar creando el archivo datos.html.

Seguimos estos pasos: a.

Escribo el título de la página e inserto una tabla de una fila y tres columnas para los tres apartados que va a tener este archivo:

b.

Escribo dentro de las celdas de la tabla Situación, Población y Servicios y lo repito también fuera de la tabla, dejando espacios con el tabulador entre un apartado y otro. Debe quedar algo así: 1

IES Valle del Jiloca

c.

Informática 4º E.S.O.

Pego el mapa de localización que tengo guardado en la carpeta Imagenes poniendo previamente el cursor debajo del apartado de Situación. Para ello le doy al menú Insertar  Imagen Desde archivo

Luego puedo seleccionar la imagen y centrarla, escribir algo de explicación de cómo llegar debajo… lo rellenamos a nuestro gusto

2

IES Valle del Jiloca

d.

Informática 4º E.S.O.

Para cambiar el fondo de mi página lo mejor es guardarnos algún fondo ya creado, que ocupan poco y se repiten bien, o poner un color liso, blanco o claro.

Le doy al menú Archivo  Propiedades y en la ventana que se abre pincho la pestaña Fondo Si quiero poner el fondo liso, de un color distinto al blanco, lo elijo en la sección Colores. Puedo cambiar también el color de texto, aunque luego podré modificar párrafos por separado.

Si quiero poner de fondo una imagen que tenga guardada activo la casilla Imagen de fondo y pulso Examinar.

Elijo el que quiera de mi carpeta Imagenes (en mi caso fondo2)

Truco: si pulso el último icono de la derecha puedo ver mis imágenes en miniatura para elegir la que quiero. e.

Vamos a hacer vínculos dentro de mi página datos.htm para ir desde la tabla a los tres apartados de la página. i.

Delante de cada apartado debo poner una señal para indicarle dónde tiene que saltar. Esa señal se llama MARCADOR. Coloco el cursor delante del título SITUACIÓN y me voy al menú Insertar  Marcador Le doy el nombre correspondiente (sin acentos) y pulso Aceptar. Me aparecerá una banderita que indica que ya está insertado.

3

IES Valle del Jiloca

ii.

Informática 4º E.S.O.

Repito la operación delante del título POBLACIÓN y delante del título SERVICIOS. Me quedarán los tres nombres en la lista de marcadores y las tres banderitas colocadas en su sitio.

4

IES Valle del Jiloca

iii.

Informática 4º E.S.O.

Ahora debo convertir las palabras de la tabla en vínculos a esos marcadores. Selecciono la palabra Situación de la tabla y voy al menú Insertar  Hipervínculo

iv.

v.

-

-

-

Despliego la lista de marcadores y me aparecerán los tres que he creado.

Selecciono el de Situación y le doy a aceptar. Ya tengo creado un hipervínculo (la palabra de la tabla me ha cambiado a color azul y subrayado).

Repito la operación con las otras dos casillas de la tabla para crear los tres saltos de la página.

Para ver como quedará mi página en el explorador cuando la cuelgue le doy al símbolo de Vista previa y se me abre con el Explorer. Ahí deben funcionar los tres saltos. Volver al FrontPage para seguir trabajando.

Para evitar tener que subir al principio de la página con el scroll voy a pegar una flecha y la convertiré en hipervínculo. Sigo estos pasos: Me pongo al principio del todo, delante del título de la página, e inserto un marcador llamado Inicio. (con el menú Insertar  Marcador).

Coloco el cursor al final del apartado de Situación y con el menú InsertarImagenDesde archivo pego la imagen llamada flecha_arriba de mi carpeta de imágenes. La coloco donde me guste, mejor a la derecha, y si es muy grande la reduzco.

Selecciono la flecha y busco Insertar

5

IES Valle del Jiloca

Informática 4º E.S.O.

Hipervínculo. Despliego la lista de marcadores y selecciono el que he llamado Inicio.

Copio la flecha ya vinculada y la pego repetida dos veces, al final de Población y al final de Servicios. f.

Una vez acabada la página datos.htm, si le digo Archivo Guardar como… y le cambio el nombre, por ejemplo a turismo.htm, me la copia y así puedo mantener la misma estructura y me ahorro trabajo.

Cambiar los textos, suprimo las imágenes e inserto las nuevas y añado si hay algún apartado más, pero puedo aprovechar el fondo, los marcadores y los hipervínculos ya creados.

g.

Creo la tercera página, la de fiestas.htm. La creo desde el principio o repito el paso anterior, haciendo una copia de otra y modificándola. La completo con los datos e imágenes que tenga.

h.

Abro una página en blanco para la portada, inserto fotos y escribo los apartados correspondientes. La guardo en mi carpeta WebPrueba con el nombre index.htm.

6

IES Valle del Jiloca

Informática 4º E.S.O.

i.

Selecciono en la portada el apartado Datos prácticos y le doy a Hipervínculo. Escribo en el hueco datos.htm o lo selecciono con la carpeta Examinar, y acepto.

Asegurarse de que solo queda escrito el nombre del archivo, sin ninguna rota antes y sin otras palabras ni símbolos.

j.

Repito el paso i) con el apartado Qué visitar y con el de Fiestas.

Compruebo que me hace bien todos los saltos.

k.

Vuelvo a la página datos.htm y pego al principio, a la izquierda del todo, una flecha para volver a la página de portada. Inserto la imagen FlechaVolver de mi carpeta Imagenes, la selecciono y la vinculo a la página index.htm (como en el paso i). La copio ya vinculada y la pego en la página turismo y en la página fiestas. Compruebo que se pasa bien de unas páginas a otras.

l.

Para vincular el apartado Contacto a mi cuenta de e-mail, selecciono la palabra, le doy a Hipervínculo y en la ventana que se abre selecciono el símbolo de Dirección de correo electrónico y escribo mi dirección de e-mail. Puedo poner ya el asunto para que quede escrito cuando me envíen comentarios.

m.

Creo en mi carpeta la última página que me queda por hacer, la de enlaces.

Previamente debo haber buscado las direcciones web que quiero incluir.

7

IES Valle del Jiloca

n.

Informática 4º E.S.O.

Para hacer vínculos a otras páginas web externas a la mía hay que poner en el hipervínculo la dirección completa, incluído el http://www.....

Por ejemplo pongo la dirección de la web del instituto:

Antes de darle a Aceptar le cambio el Marco de destino a una nueva ventana para que me abra este enlace en una ventana aparte de la mía. Así al cerrar esas nuevas páginas, la mía seguirá abierta:

o.

Repito el paso anterior con todos los enlaces que quiero vincular y me aseguro de poner en la página enlaces la flecha para volver a la portada, como en los otros tres archivos.

Con eso mi página estaría completa, solo faltaría rellenar el texto y las imágenes que considere apropiadas.

8