Microsoft FrontPage XP Diseñando un sitio Web

Diseño de Páginas Web
Microsoft FrontPage
I.E.S. El Espinillo
Departamento de tecnología
Microsoft FrontPage XP
El conjunto de páginas escritas en formato HTML (Hyper Text Markup Lenguaje) recibe el
nombre de Web, el lugar en el que se almacena se denomina sitio Web. En estos documentos podemos
incluir archivos de texto, imágenes, gifs animados, sonidos, videos, applets, etc y se enlazan entre ellos a
través de hipervínculos. Mediante el lenguaje JavaScript podemos realizar programas para un entorno
Web.
Para entrar en el programa FrontPage elegimos una de las siguientes opciones:
a) Botón de inicio /Programas /Microsoft FrontPage
b) Hacer doble clic sobre un acceso directo en el escritorio
c) Desde una página Web y desde Microsoft Explorer, en su barra de menús, Archivo /Editar con
Microsoft FrontPage
Observa que la pantalla es similar a la de otros programas del paquete OFFICE
La columna vistas permite gestionar de forma sencilla el sitio Web:
Página: es donde estamos cuando diseñamos nuestra página. En la parte inferior aparecen
tres pestañas: normal es la zona de trabajo habitual y vista previa muestra la apariencia de
la página en el navegador. HTML permite ver las etiquetas
del metalenguaje, para trabajar en ella requiere un manejo de
las etiquetas.
Carpetas: Estructura de almacenamiento. Desde aquí se pueden eliminar y mover archivos.
Exploración: Estructura del sitio Web y relación entre las páginas que creamos.
Diseñando un sitio Web
Podemos crear páginas Web sueltas y luego unirlas mediante hipervínculos, pero esto requiere
una mayor experimentación. Vamos a crear una estructura de sitio Web dado que nos facilita algunas
tareas. En D creamos una carpeta que llamaremos TecnologíaWeb.
Entramos dentro de FrontPage y seleccionamos en la Barra de menús Archivo Nuevo/Página o
Web. En la ventana de la derecha elegimos Web vacío y en la ventana emergente Sitio Web
seleccionamos Web vacío. A la derecha, en opciones especificamos dónde crear el sitio Web. Por defecto
lo hará en la carpeta Mis documentos con el nombre de Mis Webs. Pinchamos sobre examinar y
seleccionamos D \ TecnologiaWeb. El programa crea dos carpetas dentro de la nuestra a las que
denomina private e images que es dónde almacenaremos las imágenes. En un sitio Web la página de la
que dependen todas las demás se debe llamar index, es el nombre por defecto de algunos servidores,
también puede llamarse home. Consulta cual es el nombre empleado por tu servidor
Una vez creado el sitio Web, pulsamos en ver/lista de carpetas observamos la estructura de
carpetas creada. Si en la barra de vistas de la izquierda seleccionamos Exploración vemos una pantalla
azul. Antes de crear la estructura de página principal y subpáginas pensemos como queremos que sea
nuestro sitio Web y cuáles queremos que sean las relaciones entre las páginas.
Vamos a crear 5 páginas Web relacionadas según el siguiente diagrama:
Menú
Index
Problemas →
David Cervera Olivares
Inventores →
Inventos
Tornillo sinfín
Teléfono
Ratón
-1-
Diseño de Páginas Web
Microsoft FrontPage
I.E.S. El Espinillo
Departamento de tecnología
Antes de confeccionar las páginas, guarda las imágenes que están en D / imagenesWeb en la
carpeta images del sitio Web TecnologiaWeb.
Vamos a crear una página Web con dos marcos, que llamaremos index, que contiene la
página menú y la página prolemas. Desde menú podremos acceder a todas las páginas de nuestra
Web. Comienza a pensar como sería tu propia Web.
La página index estará formada por dos marcos, en el de la izquierda estará el menú y en el de la
derecha aparecerán las opciones que se vayan eligiendo en el menú. El aspecto final será:
Diseñando la página principal index con dos marcos
En la barra de menús elige Archivo/Nuevo/Página o Web... y después en Plantillas de página
(en la ventana de la derecha), en la ficha Páginas de marcos elige Contenido. Pulsa Aceptar.
En la barra de herramientas, elige
Guardar como, antes de almacenarla selecciona Cambiar
Título y escribe Departamento de Tecnología. Guarda la página con el nombre index.
Si vas a Vistas/Exploración, verás la pantalla azul con un rectángulo que pone Departamento…,
que representa la página index.
Diseñando la página menú (marco de la izqda)
1.
2.
3.
4.
En el marco de la izquierda haz clic sobre Nueva página.
Con el puntero del ratón dentro de la página Web en blanco haz clic
en el botón derecho de ratón, en el menú Contextual elige
Propiedades de marco… y en Nombre: escribe marco1
De nuevo, con el puntero del ratón dentro de la página Web en
blanco haz clic en el botón derecho de ratón, y en el menú
Contextual elige Propiedades de página… y en Título: escribe
menu
Guarda la página Archivo/Guardar en la carpeta TecnologiaWeb,
con el nombre menu
David Cervera Olivares
-2-
Diseño de Páginas Web
Microsoft FrontPage
5.
6.
7.
I.E.S. El Espinillo
Departamento de tecnología
Elige Carpetas pincha sobre la página menú y sin soltar el botón del ratón arrastra hasta
Vistas/Exploración queda tal y como aparece en la imagen de la derecha.
Vuelve a Vistas/Página.
Elige en la barra de menús Formato/Tema... y aplica el tema Desenfadado. Si no lo encuentras, o si
no te gusta elige otro de la lista. Escribe todas las opciones del menú. La palabra Menú debes
ponerla en negrita, centrada aumentar el tamaño y en verde. Al lado inserta la imagen engranaje.gif.
Debajo inserta la línea horizontal. Para ello inserta la imagen llamada linea.gif. El resto de opciones
del menú deben ser una lista como la que se muestra incluye como viñeta (formato/numeración y
viñetas) la imagen boton.gif. Crea una tabla con una fila y dos columnas y en la parte de la derecha
inserta la imagen buzon.gif
8. Haz clic en
Guardar para actualizar los cambios.
9. En la lengüeta de abajo elige Vista previa y visualiza el resultado.
10. Vuelve a Normal para seguir trabajando.
11. También podrías haber ido a la barra de herramientas y pulsar el icono Vista previa en el Explorador.
12. Si haces cambios en una página Web en el FrontPage, primero tienes que guardar los cambios y
luego pasar a Internet Explorer y hacer clic en la barra de herramientas en Actualizar
Diseñando la página Problemas (marco de la dcha)
a) En el marco de la derecha, haz clic sobre Nueva página.
b) En el menú Contextual elige Propiedades del marco… y en Nombre: escribe marco2
c) En el menú Contextual elige Propiedades de página y en Título:
escribe Problemas
d) Guarda la página en la carpeta tecnologiaWeb con el nombre
Problemas.
e) Elige Vistas/Exploración y arrastra la página Problemas que
acabas de crear, debajo de la general Departamento ... y a la
derecha de la del Menú tal y como aparece en la imagen de la
derecha.
f) Vuelve a Vistas/Página.
g) Aplica el mismo tema o fondo a esta página Web, que en la página menú. Diseña la página como en
la página que se muestra. Al lado del título inserta la imagen fuente.gif. Inserta línea que acompaña al
tema que has elegido.
h) Crea una tabla de dos columnas y 5 filas.
i) Arrastra de la Lista de carpetas/images la imagen lapiz.gif a la primera celda, escribe al lado el
texto, deja una fila en medio e inserta las imágenes libro.gif y tuerca.gif.
j) En las propiedades de la tabla elige alineación Centro y desactiva el botón de opción Especificar
ancho.
k) Selecciona las celdas de la tabla, en las propiedades de celda elige alineación horizontal Centrar y
desactiva el botón de opción Especificar ancho.
l) En la barra de herramientas elige
Insertar componente/Marquesina..., en el cuadro de texto:
Texto escribe el texto
correspondiente. En Color
de fondo elige un gris claro.
m) Haz clic en
Guardar para
actualizar los cambios y a
través de
Vista previa en
el explorador, visualiza el
resultado, o bien haciendo
clic en la barra de estado
(lengüeta de la derecha
abajo).
Al lado de la última línea inserta
la imagen mail.gif. Pulsa sobre la
imagen con el botón derecho
Hipervínculo.
David Cervera Olivares
-3-
Diseño de Páginas Web
Microsoft FrontPage
I.E.S. El Espinillo
Departamento de tecnología
En la parte inferior en Dirección escribe [email protected] que es el correo ficticio. Puedes poner tu
propio correo para cuando publiquemos la página. Guarda y visualiza en Vista Previa. Si pulsas sobre la
imagen accederás al correo.
Diseñando la página Inventores
1.
2.
En la barra de herramientas elige Nueva página
En el menú Contextual elige Propiedades de página… y en
Título: escribe Inventores.
3. Guarda la página web en la carpeta TecnologiaWeb con el
nombre Inventores
4. Elige Vistas/Exploración y arrastra de la Lista de carpetas la
pagina Inventores que acabas de crear debajo de la general
Menú.
5. Vuelve a Vistas/Página.
6. Elige en la barra de menús Formato/Fondo... y en Examinar
busca en la carpeta images el archivo fondo.jpg e insértalo.
7. Crea una tabla de dos filas y tres columnas
8. En propiedades de tabla elige alineación Centro. En Bordes/Tamaño escribe 2, color azul y marca
mostrar bordes de celda y tabla.
9. Inserta las imágenes de la carpeta images llamadas: Arquímedes.jpg, Bell.jpg y Engelbart.jpg.
10. Escribe debajo de la tabla “MAS INFORMACIÓN” que más tarde se vinculará con la página
Inventos.
11. Haz clic en
Guardar para actualizar los cambios.
El resultado tiene que ser:
David Cervera Olivares
-4-
Diseño de Páginas Web
Microsoft FrontPage
I.E.S. El Espinillo
Departamento de tecnología
Diseñando la página Inventos
Vamos a diseñar una página nueva que llamaremos Inventos. En ella vamos a desarrollar
información sobre los inventos que tenemos en la página inventores. Posteriormente se crearán
los hipervínculos a cada parte de esta página para que podamos ver los datos de uno u otro
invento.
a) En la barra de herramientas elige Nueva página
b) En el menú Contextual elige Propiedades de página… y en Título:
escribe Inventos
c) Guarda la página Web en la carpeta TecnologiaWeb con el nombre
Inventos
d) Elige Vistas/Exploración y arrastra de la Lista de carpetas la
pagina Inventos que acabas de crear debajo de menú como en la
imagen de la derecha
e) Vuelve a Vistas/Página.
f) Elige en la barra de menús Formato/Fondo... y selecciona en Fondo
un color naranja claro.
g) Enmarca el título en Formato/Bordes y sombreados. En bordes
elegir Altorrelieve. Seleccionar como fondo color naranja oscuro.
h) Debajo haz una tabla de 2 fila y tres columnas con borde de tamaño
2 y color naranja, y en ella inserta la imagen Torsinfin.jpg,
Barrena.jpg y Terreno.jpg.
i) Debajo inserta la imagen inicio.gif, que te servirá para volver a la página Inventores.
Sigue los mismos pasos para crear en la misma página la información del teléfono y del ratón.
Fijate en el ejemplo para realizar el resto de la página siguiendo los pasos anteriores. Las imágenes que
debes emplear son Telefono.jpg, Raton.jpg y fotodiodo.jpg. No olvides colocar debajo de la tabla de
cada invento la imagen inicio.gif.
El resultado final debe ser:
David Cervera Olivares
-5-
Diseño de Páginas Web
Microsoft FrontPage
David Cervera Olivares
I.E.S. El Espinillo
Departamento de tecnología
-6-
Diseño de Páginas Web
Microsoft FrontPage
I.E.S. El Espinillo
Departamento de tecnología
Creación de hipervínculos
Las palabras que aparecen en el menú Problemas, Inventores e Inventos van a estar vinculadas a las
páginas Web con el mismo nombre que ya hemos creado.
1.
2.
En la Lista de carpetas haz doble-clic sobre la página Web index
En el Menú selecciona la palabra Problemas
3.
4.
5.
Hipervínculo.
En la barra de herramientas elige
En la ventana Crear hipervínculo, selecciona la página web Problemas.
Haz clic con el botón derecho del ratón sobre la página menú y selecciona propiedades de página.
Escribe en la cuadrícula Marco de destino predeterminado “marco2”, que es como hemos
denominado al marco de la derecha.
6.
Selecciona ahora la palabra Inventores y pulsa sobre el icono de
Web Inventores.
Realiza la misma operación para la página Inventos.
Haz clic en
Guardar para actualizar los cambios.
En la barra de estado activa el navegador Internet Explorer.
7.
8.
9.
Hipervínculo. Marca la página
Actualizar.
10. Elige en la barra de herramientas
11. En el Menú coloca el ratón encima del enlace Inventores y observa como cambia el puntero a forma
de mano y en la barra de estado aparece el nombre del enlace.
12. Haz clic en el enlace Inventores.
Ahora vamos a realizar los hipervínculos desde la página Inventores a la página Inventos.
a) Selecciona las palabras “MAS INFORMACIÓN”.
b) Pulsa sobre el icono de hipervínculo y elige la página Inventos.
Ahora vamos a realizar los vínculos dentro de una misma página
1.
2.
3.
4.
5.
6.
Sitúate en la página Inventos.
Vamos a realizar marcadores dentro de la página. Para ello selecciona la palabra Tornillo sinfín que
está encima de la tabla que lo explica y sobre la barra de menús elige insertar / marcador.
Repite la operación con las palabras teléfono y ratón que están situadas sobre las tablas que los
explica.
Finalmente selecciona la palabra Inventos del principio de la página y haz que también sea un
marcador.
Selecciona las palabras ”Tornillo sinfín” en la lista de inventos. Pulsa sobre hipervínculo y
selecciona en el lateral izquierdo Lugar de este documento. En la lista que aparece selecciona
Tornillo sinfín y Aceptar.
Realiza la misma operación con los inventos Teléfono y Ratón de la lista superior.
Las flechas que hemos colocado nos sirven para volver al principio de la página. Para ello
selecciona la imagen y pulsa sobre el icono de Hipervínculo. Marca Lugar de este documento y
selecciona de la lista la palabra Inventos.
Únicamente falta por vincular la palabra Atrás de la página Inventos con la página Inventores. ¿Sabrías
hacerlo?
David Cervera Olivares
-7-