Taller FrontPage I

1
Taller FrontPage I

• Profa. María G. Rosa-Rosario
• Universidad Interamericana
• Recinto de Aguadilla

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

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.

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.

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.

6
Continuación Creación de carpetas

• Veremos un recuadro como el que aparece a la
  derecha

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.

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.

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

10
Ventana de FrontPage 2003
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
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.

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.

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.

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.

16
Continuación Creación de página

• Cuando aparezca la ventana observe que
  inmediatamente tenemos ante nosotros el área de
  trabajo.

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

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.

19
Continuación Creación de página
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.

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.

22
Continuación Creación de página

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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
  .

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

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.

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.

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.

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.

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.

43
Referencias

• http//www.aulaclic.es/frontpage2003/index.htm
• http//www.artedinamico.com/ad/ad_tutoriales.php?p
  age1tipo3
• Miscrosoft FrontPage Version 2002 Step by
  Step(2001). Online Training Solutions, Inc.