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
10/1/2015
Profa. María G. Rosa
2
Objetivos

Después de completar el taller los
participantes podrán:






10/1/2015
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
3
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.
10/1/2015
Profa. María G. Rosa
4
Creación de carpetas

Pasos para la creación
de carpetas para
guardar en el medio
de almacenamiento
seleccionado:


10/1/2015
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
5
Continuación: Creación de carpetas

10/1/2015
Veremos un
recuadro como el
que aparece a la
derecha:
Profa. María G. Rosa
6
Continuación: Creación de carpetas

Observe el recuadro,
tenemos dos opciones
para crear nuestras
carpetas:


10/1/2015
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
7
Continuación: Creación de carpetas

Opción dos:

10/1/2015
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
8
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:



10/1/2015
Imágenes
Fondos
Música
Profa. María G. Rosa
9
Ventana de FrontPage 2003
10/1/2015
Profa. María G. Rosa
10
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
10/1/2015
Profa. María G. Rosa
11
Continuación: Ventana de FrontPage 2003

Barra de menú


Permite acceder todas las operaciones de
despliegue.
Barra estándar

10/1/2015
Provee acceso director a opciones de funciones
de uso frecuente.
Profa. María G. Rosa
12
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




10/1/2015
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
13
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

10/1/2015
Muestra el nombre de la página con la
estamos trabajando.
Profa. María G. Rosa
14
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”.

10/1/2015
Profa. María G. Rosa
15
Continuación: Creación de página

Cuando aparezca la ventana observe que
inmediatamente tenemos ante nosotros el
área de trabajo.
10/1/2015
Profa. María G. Rosa
16
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.


10/1/2015
Ejemplo: http://agu.inter.edu/mrosa
http://agu.inter.edu/adiaz
Profa. María G. Rosa
17
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:






10/1/2015
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
18
Continuación: Creación de página
10/1/2015
Profa. María G. Rosa
19
Continuación: Creación de página


10/1/2015
Profa. María G. Rosa
El recuadro de la
izquierda nos
permite seleccionar
diferentes formatos.
Pulsaremos la
pestaña de marcos
de página, “Frames
Page”.
20
Continuación: Creación de página



10/1/2015
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
21
Continuación: Creación de página

10/1/2015
Luego de haber
seleccionado el
formato deseado,
estamos listas para
comenzar para entrar
la información.
Profa. María G. Rosa
22
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.


10/1/2015
Index
Ejercicio II
Profa. María G. Rosa
23
Imágenes

Para insertar una imagen o
foto en la página
seguiremos el siguiente
proceso:


10/1/2015
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
24
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”.
10/1/2015
Profa. María G. Rosa
25
Fondos

Para insertar un fondo
“background” en la página
seguiremos el siguiente
proceso:


10/1/2015
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
26
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”.
10/1/2015
Profa. María G. Rosa
27
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:


10/1/2015
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
28
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”.
10/1/2015
Profa. María G. Rosa
29
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.
10/1/2015
Profa. María G. Rosa
30
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”.
10/1/2015
Profa. María G. Rosa
31
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.

10/1/2015
Profa. María G. Rosa
32
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:


10/1/2015
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
33
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.
10/1/2015
Profa. María G. Rosa
34
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:



10/1/2015
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
35
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
.
10/1/2015
Profa. María G. Rosa
36
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





10/1/2015
Profa. María G. Rosa
37
Continuación: Enlaces

Con un documento o
presentación (el proceso es
igual).

10/1/2015
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
38
Continuación: Enlaces

Entre páginas
(enlaces internos)

10/1/2015
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
39
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”.
10/1/2015
Profa. María G. Rosa
40
Continuación: Enlaces

Con direcciones
electrónicas.

10/1/2015
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
41
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”.
10/1/2015
Profa. María G. Rosa
42
Referencias
http://www.aulaclic.es/frontpage2003/index.
htm
http://www.artedinamico.com/ad/ad_tutorial
es.php?page=1&tipo=3
Miscrosoft FrontPage Version 2002 Step by
Step(2001). Online Training Solutions, Inc.
10/1/2015
Profa. María G. Rosa
43
Descargar

Taller FrontPage I