Taller FrontPage I

Taller FrontPage I

Dra. María G. Rosa-Rosario

04/20/23 Profa. María G. Rosa 2

Tabla de contenido Objetivos Introducción Creación de carpetas Ventana de Front003 Creación de página Imágenes Fondos Música Almacenamiento Referencias Creación de botones o barras de navegación Enlaces


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.


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.


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.


Continuación: Creación de carpetas

Veremos un recuadro como el que aparece a la derecha:



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.



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.


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


Ventana de FrontPage 2003


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



Barra de menú Permite acceder todas las operaciones de

despliegue.

Barra estándar Provee acceso director a opciones de funciones

de uso frecuente.



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.



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.


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”.


Continuación: Creación de página Cuando aparezca la ventana observe que

inmediatamente tenemos ante nosotros el área de trabajo.


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


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.



El recuadro de la izquierda nos permite seleccionar diferentes formatos.

Pulsaremos la pestaña de marcos de página, “Frames Page”.



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.



Luego de haber seleccionado el formato deseado, estamos listas para comenzar para entrar la información.


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


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.


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”.


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.


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”.


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.


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”.


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.


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”.


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.


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”.


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.


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.


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 .


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


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”.


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”.


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”.


Continuación: Enlaces Con direcciones Con direcciones

electrónicas.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”.


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”.


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.

Taller FrontPage I

Documents

Transcript of Taller FrontPage I