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

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 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

Continuación: Creación de carpetas Veremos un recuadro como el que aparece a la derecha: 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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 4/9/2017 Profa. María G. Rosa

Ventana de FrontPage 2003 4/9/2017 Profa. María G. Rosa

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 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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”. 4/9/2017 Profa. María G. Rosa

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

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 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

Continuación: Creación de página 4/9/2017 Profa. María G. Rosa

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”. 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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

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 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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”. 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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”. 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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”. 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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”. 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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”. 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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 . 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa

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”. 4/9/2017 Profa. María G. Rosa

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”. 4/9/2017 Profa. María G. Rosa

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”. 4/9/2017 Profa. María G. Rosa

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”. 4/9/2017 Profa. María G. Rosa

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”. 4/9/2017 Profa. María G. Rosa

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. 4/9/2017 Profa. María G. Rosa