Upload
severo-negrete
View
110
Download
0
Embed Size (px)
Citation preview
Taller FrontPage I
Dra. María G. Rosa-Rosario
04/11/23 Profa. María G. Rosa 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
04/11/23 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.
04/11/23 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.
04/11/23 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.
04/11/23 Profa. María G. Rosa 6
Continuación: Creación de carpetas
Veremos un recuadro como el que aparece a la derecha:
04/11/23 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.
04/11/23 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.
04/11/23 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
04/11/23 Profa. María G. Rosa 10
Ventana de FrontPage 2003
04/11/23 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
04/11/23 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.
04/11/23 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.
04/11/23 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.
04/11/23 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”.
04/11/23 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.
04/11/23 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
04/11/23 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.
04/11/23 Profa. María G. Rosa 19
Continuación: Creación de página
04/11/23 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”.
04/11/23 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.
04/11/23 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.
04/11/23 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
04/11/23 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.
04/11/23 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”.
04/11/23 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.
04/11/23 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”.
04/11/23 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.
04/11/23 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”.
04/11/23 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.
04/11/23 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”.
04/11/23 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.
04/11/23 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”.
04/11/23 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.
04/11/23 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.
04/11/23 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 .
04/11/23 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
04/11/23 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”.
04/11/23 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”.
04/11/23 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”.
04/11/23 Profa. María G. Rosa 41
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”.
04/11/23 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”.
04/11/23 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.