Taller FrontPage I

1. Taller FrontPage I Dra. María G. Rosa-Rosario

2. Tabla de contenido • Objetivos • Introducción • Creación de carpetas • Ventana de FrontPage 2003 • Creación de página • Imágenes • Fondos • Música • Almacenamiento • Referencias • Creación de botones o barras de navegación • Enlaces Profa. María G. Rosa

3. Objetivos • Después de completar el taller los participantes podrán: • Definir FrontPage. • Crear carpetas para almacenar fotos, fondos e imágenes. • Crear páginas sencillas de Web. • Almacenar los páginas creadas. • Enlazar las páginas trabajadas. • Ver sus páginas en el navegador. Profa. María G. Rosa

4. Introducción • FrontPage es un editor visual con el cual podemos crear páginas Web de una forma visual. • El programa le permite concentrarse en el diseño de la página de Web. • El usuario tiene la oportunidad de crear sus páginas sin tener conocimiento de programación. • El programa es parte del paquete de Microsoft Office, por lo tanto como estamos familiarizados con un procesador de texto, ejemplo Word, se le hará más fácil aprenderlo. • Permite diseñar y modificar el sitio de Web. • Trabajar cada página individualmente y ayuda en su edición y mantenimiento. Profa. María G. Rosa

5. Creación de carpetas • Pasos para la creación de carpetas para guardar en el medio de almacenamiento seleccionado: • Pulsamos dos veces en el icono de “My documents” • Cuando veas el recuadro similar al de la derecha, seleccione en este momento donde almacenará las carpetas. Profa. María G. Rosa

6. Continuación: Creación de carpetas • Veremos un recuadro como el que aparece a la derecha: Profa. María G. Rosa

7. Continuación: Creación de carpetas • Observe el recuadro, tenemos dos opciones para crear nuestras carpetas: • Ir a la barra de menú y activar el menú desplegable de “file” donde verá el recuadro a su derecha. • Observe que aparece un icono de una carpeta amarilla que dice “folder” lo presiona y crea su carpeta. Profa. María G. Rosa

8. Continuación: Creación de carpetas • Opción dos: • Observe el recuadro de la derecha, aquí encontrará la instrucción de creación de carpetas “make a new folder”, pulse encima de las letras y podrá crear su carpeta. Profa. María G. Rosa

9. Continuación: Creación de carpetas • Al pulsar la opción de creación de nueva carpeta observe que aparece una carpeta nueva. • Mientras está de color azul escriba el nombre que le a de asignar a la misma, tan pronto termine de escribir el nombre presione el botón izquierdo de ratón en un espacio en blanco disponible para desactivar la acción. • Repita el proceso para trabajar las otras carpetas. • En nuestro caso trabajaremos una carpeta para: • Imágenes • Fondos • Música Profa. María G. Rosa

10. Ventana de FrontPage 2003 Profa. María G. Rosa

11. Continuación: Ventana de FrontPage 2003 • Barra de título • Indica el programa y el nombre del documento con el que se está trabajando. • En la esquina superior derecha, se encuentran los botones para minimizar, maximizar y cerrar la aplicación minimizar cerrar maximizar o restaurar Profa. María G. Rosa

12. Continuación: Ventana de FrontPage 2003 • Barra de menú • Permite acceder todas las operaciones de despliegue. • Barra estándar • Provee acceso director a opciones de funciones de uso frecuente. Profa. María G. Rosa

13. Continuación: Ventana de FrontPage 2003 • Barra de formato • Permite trabajar con el tamaño el estilo, tamaño del texto, negrilla, itálico, subrayado, alineación y otras funciones que le ayudarán a crear atractivamente el documento. • Modos de Edición de página • diseño-permite entrar la información. • dividir-permite ver el diseño y los códigos. • Código-permite ver los códigos de HTML. • Vista previa-permite ver la página como la veríamos en el navegador. Profa. María G. Rosa

14. Continuación: Ventana de FrontPage 2003 • Selector de etiquetas • Permite seleccionar, editar la etiqueta y ver contenido de la misma. • Pestaña de página • Muestra el nombre de la página con la estamos trabajando. Profa. María G. Rosa

15. Creación de página • Una vez activamos el programa. • Recuerde que puede activar el mismo desde el icono que aparece en el “desktop” . • Si el icono aparece en esta ventana, puedes presionar el botón de inicio, , • Buscas en todos los programas “microsoft office”, de la lista que aparece selecciona “FrontPage”. Profa. María G. Rosa

16. Continuación: Creación de página • Cuando aparezca la ventana observe que inmediatamente tenemos ante nosotros el área de trabajo. Profa. María G. Rosa

17. Continuación: Creación de página • Es aquí donde iniciamos nuestro documento y comenzamos a entrar la información. • Es importante que prepare un esquema mental o escrito de cómo ha de organizar la página. • Ejemplo: http://agu.inter.edu/mrosa http://agu.inter.edu/adiaz Profa. María G. Rosa

18. Continuación: Creación de página • Cuando iniciamos el programa y estamos listos para comenzar a entrar la información llevamos a cabo los siguientes pasos: • Buscamos “File” en la barra de menús despleglabes, • Presionamos “New”, • Veremos la siguiente ventana. • Al lado derecho observamos el panel de tareas, donde se nos ofrecen diferentes opciones tales como: • página en blanco • archivo de texto • trabajar con un documento almacenado previamente • Más platillas de páginas • Otras funciones • Trabajaremos nuestra primera página utilizando, más plantillas de páginas. Profa. María G. Rosa

19. Continuación: Creación de página Profa. María G. Rosa

20. Continuación: Creación de página • El recuadro de la izquierda nos permite seleccionar diferentes formatos. • Pulsaremos la pestaña de marcos de página, “Frames Page”. Profa. María G. Rosa

21. Continuación: Creación de página • Al pulsar “Frame Page”, vemos un recuadro como el que aparece a la izquierda. • Aquí analizamos cual de los marcos utilizaremos para nuestra primera página. • La misma nos servirá de tabla de contenido para nuestra página de Web. Profa. María G. Rosa

22. Continuación: Creación de página • Luego de haber seleccionado el formato deseado, estamos listas para comenzar para entrar la información. Profa. María G. Rosa

23. Continuación: Creación de página • Trabajaremos dos páginas en el programa, estaremos dirigidos a entrar texto, dar formato al texto, integrar un gráfico, poner fondo y otros aspectos relacionados. • Index • Ejercicio II Profa. María G. Rosa

24. Imágenes • Para insertar una imagen o foto en la página seguiremos el siguiente proceso: • En la barra de menús desplegables pulsamos “Insert”, verá el recuadro que se presenta a la derecha. • Mueva el apuntador hacia abajo y seleccione “Picture”, verá un pequeño menú de cascada, seleccione “From file”, ya que tenemos las imágenes en una carpeta que llamamos imágenes. Profa. María G. Rosa

25. Continuación: Imágenes • Cuando seleccionamos “From File” aparecerá el recuadro que aparece a la derecha, aquí buscamos el directorio donde tenemos almacenado nuestra foto. • Pulse dos veces encima de la carpeta imágenes y seleccione la que desea. • Luego pulsa añadir “Insert”. Profa. María G. Rosa

26. Fondos • Para insertar un fondo “background” en la página seguiremos el siguiente proceso: • En la barra de menús desplegables pulsamos “Format”, verá el recuadro que se presenta a la derecha. • Mueva el apuntador hacia abajo y seleccione “background”, verá un recuadro como el que aparece a la derecha, activamos “background”, presionando “browse”, buscamos los mismos en una carpeta que llamamos fondos. Profa. María G. Rosa

27. Continuación: Fondos • Cuando seleccionamos “browse” aparecerá el recuadro que aparece a la derecha, aquí buscamos el directorio donde tenemos almacenado nuestra foto. • Pulse dos veces encima de la carpeta imágenes y selecciona el que deseo. • Luego pulsa abrir “open”. Profa. María G. Rosa

28. Música • Puede encontrar formatos de música midi gratis en la Internet. • Para insertar una música en la página seguiremos el siguiente proceso: • En la barra de menús desplegables pulsamos “File”, verá el recuadro que se presenta a la derecha. • Mueva el apuntador hacia abajo y seleccione propiedades “Properties”, verá un recuadro como el que aparece a su derecha, busque en el mismo “background sound”, en el espacio al lado de “Location”, seleccione “browse”, ya que tenemos la música en una carpeta que llamamos música. Profa. María G. Rosa

29. Continuaciónn : Música • Cuando seleccionamos “browse” aparecerá el recuadro que aparece a la derecha, aquí buscamos el directorio donde tenemos almacenado nuestra foto. • Pulse dos veces encima de la carpeta música y selecciona la música deseada. • Luego pulsa abrir “open”. Profa. María G. Rosa

30. Continuaciónn : Música • Cuando presiona abrir ”open” verá el recuadro de la derecha, presione “OK”. • Si su equipo tiene activado el sonido, disfrute de la música. Profa. María G. Rosa

31. Almacenamiento • Para almacenar la primera página, seleccionamos archivo, “File”, almacenar como, “save as”. • Elija donde almacenará almacenar en, “save in”, puede utilizar disco “floppy 3 1/2” o el lugar que usted tenga destinado con este fin. • A esta primera página se le asignará el nombre de “index”,de donde se parte para navegar. • En el nombre de archivo “file name”, escriba “index”. • Luego presione almacenar, “Save”. Profa. María G. Rosa

32. Continuación: Almacenamiento • Para la página de la dos en adelante, sigue el mismo proceso anterior, pero seleccionará un nombre corto para almacenar. • Es importante que los nombres sean fáciles de recordar, de manera que cuando se trabajen los enlaces entre página los recordemos. Profa. María G. Rosa

33. Creación de botones o barras de navegación • Para insertar botón o barra de navegación en la página seguiremos el siguiente proceso: • En la barra de menús desplegables pulsamos “Insert”, verá el recuadro que se presenta a la derecha. • Mueva el apuntador hacia abajo y seleccione “Web Componet”, un recuadro como el que aparece a la derecha, seleccione “Interactive button”. Profa. María G. Rosa

34. Continuación: Creación de botones o barras de navegación • Al seleccionar “Interactive button”, pulse ”finish”, verá el siguiente recuadro. • De las alternativas que se le presentan seleccione la que usted desee utilizar. • En el espacio provisto para entrar texto, “Text”, teclee el nombre a la barra. Profa. María G. Rosa

35. Continuación: Creación de botones o barras de navegación • En este momento podemos enlazar esta barra o botón con el documento deseado. • El proceso es el siguiente: • Presione “browse” y busque la carpeta donde tiene el documento que desea enlazar. • Pulse dos veces encima de la carpeta deseada. • Seleccione el documento. Profa. María G. Rosa

36. Continuación: Creación de botones o barras de navegación • Antes de salir del recuadro, indique al programa como desea que los demás vean la página. • Seleccione “Target Frame”, le programa le provee alternativas, las cuales puede ver en el recuadro de la derecha. • Seleccione la deseada, presione “OK” en el recuadro y luego “OK” en los recuadros anteriores. • Ya tiene su barra o botón creado enlazado a un documento. • Puede verlo funcionando presionando los botones de “preview”; en la barra de estado o en la barra de botones estándar . Profa. María G. Rosa

37. Enlaces • En el tema anterior trabajamos con enlaces utilizando botones de navegación. • Para crear enlaces puede utilizar texto e imágenes. • A continuación trabajaremos con diferentes tipos de enlaces. • con un documento • entre páginas • con direcciones de Web • con correos electrónicos • entre páginas (enlaces internos) • entre páginas utilizando una imagen. • con correos electrónicos Profa. María G. Rosa

38. Continuación: Enlaces • Con un documento o presentación (el proceso es igual). • Para efectos del ejemplo escribiremos un texto, luego lo sombreas pasando el apuntador por encima, luego presionas el botón de la esfera del mundo con el eslabón, buscas el documento que deseas enlazar en la carpeta que lo tiene almacenado, lo seleciona dando un click encima del nombre, luego decide como deseas que se vea; ”target frame” y presionas “OK”. Profa. María G. Rosa

39. Continuación: Enlaces • Entre páginas (enlaces internos) • Para efectos del ejemplo escribiremos un texto, luego lo sombreas pasando el apuntador por encima, luego presionas el botón de la esfera del mundo con el eslabón, buscas la página que deseas enlazar, seleccionas como deseas que se vea; ”target frame” y presionas “OK”. Profa. María G. Rosa

40. Continuación: Enlaces • Entre páginas utilizando una imagen. • Esta vez utilizaremos una imagen. • Selecciona la imagen que utilizarás, la pones en el lugar deseado. • Activa la imagen, dando un click encimas, podrás ver unas puntos en las esquinas de la imagen y otros lugares, luego presionas el botón de la esfera del mundo con el eslabón, buscas la página con la que deseas hacer el enlace, luego decide como deseas que se vea; ”target frame” y presionas “OK”. Profa. María G. Rosa

41. Continuación: Enlaces • Con direcciones electrónicas. • Para efectos del ejemplo escribiremos un texto, El Nuevo Día, luego lo sombreas pasando el apuntador por encima, luego presionas el botón de la esfera del mundo con el eslabón, escribe la dirección electrónica en la línea de “address”, luego decide como deseas que se vea; ”target frame” y presionas “OK”. Profa. María G. Rosa

42. Continuación: Enlaces • Con correos electrónicos. • Esta vez utilizaremos una imagen. • Selecciona la imagen que utilizarás, la pones en el lugar deseado. • Activa la imagen, dando un click encimas, podrás ver unas puntos en las esquinas de la imagen y otros lugares, luego presionas el botón de la esfera del mundo con el eslabón, escribe la dirección de correo electrónico en la línea de “address”, luego decide como deseas que se vea; ”target frame” y presionas “OK”. Profa. María G. Rosa

43. Referencias http://www.aulaclic.es/frontpage2003/index.htm http://www.artedinamico.com/ad/ad_tutoriales.php?page=1&tipo=3 Miscrosoft FrontPage Version 2002 Step by Step(2001). Online Training Solutions, Inc. Profa. María G. Rosa