Microsoft FrontPage XP

Transcripción

1 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 / 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 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: Index Menú Tornillo sinfín Problemas Inventores Inventos Teléfono Ratón David Cervera Olivares - 1 -

2 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. En el marco de la izquierda haz clic sobre Nueva página. 2. 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 3. 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 4. Guarda la página Archivo/Guardar en la carpeta TecnologiaWeb, con el nombre menu David Cervera Olivares - 2 -

3 5. 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. 6. Vuelve a Vistas/Página. 7. 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 -

4 En la parte inferior en Dirección escribe 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. En la barra de herramientas elige Nueva página 2. 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 -

5 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 -

6 David Cervera Olivares - 6 -

7 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. En la Lista de carpetas haz doble-clic sobre la página Web index 2. En el Menú selecciona la palabra Problemas 3. En la barra de herramientas elige Hipervínculo. 4. En la ventana Crear hipervínculo, selecciona la página web Problemas. 5. 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 Hipervínculo. Marca la página Web Inventores. 7. Realiza la misma operación para la página Inventos. 8. Haz clic en Guardar para actualizar los cambios. 9. En la barra de estado activa el navegador Internet Explorer. 10. Elige en la barra de herramientas Actualizar. 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. Sitúate en la página Inventos. 2. 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. 3. Repite la operación con las palabras teléfono y ratón que están situadas sobre las tablas que los explica. 4. Finalmente selecciona la palabra Inventos del principio de la página y haz que también sea un marcador. 5. 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. 6. 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 -