PARTES DE LA VENTANA PRINCIPAL DE FRONT PAGE

BARRA DE
BARRA
DE
MENUS
BARRA
DE
FORMAT
PESTA

BARRA DE
HERRAMIENT
AS

A DE
PGINAS

REA O
LUGAR
DE
TRABAJ

MODOS
DE
BARRA
DE
DIBUJO

BARRA DE
TAREAS

MODULO DE FRONT PAGE

El programa de Front Page se asemeja bastante al programa de Word con
respecto a las caractersticas de la ventana principal, en este mdulo hablaremos
de los diferentes temas que se deben de trabajar y encontrar en una pgina web
tales como:

1. MODOS DE EDICIN DE UNA PGINA: Se encuentran en la parte

baja de la pgina y son:
1) Diseo.- Nos permite editar la Web de forma visual.
2) Dividir.- Nos permite ver el diseo de la pgina y su cdigo
asociado.
3) Cdigo.- Podemos editar el cdigo en HTML, opcin slo para
expertos.
4) Vista Previa.- Veremos nuestra pgina como la veramos desde
un navegador, pues slo nos permite visualizar un borrador de
cmo ser la pgina Web y no podemos realizar ninguna
modificacin sobre la pgina.

2. FORMATO DE TEXTO: Front page tiene una barra de formato en las cuales

se pueden cambiar el aspecto de los textos que incluye nuestra pgina web,
tambin se puede dar un aspecto diferente al texto utilizando el conocido
WORD ART, el cual puede realzar y mejorar el aspecto de nuestra pgina
web.

Introducir Listas y Vietas:

Para introducir una lista, tan slo hemos de pulsar sobre el botn lista
numerada o lista de vieta, segn el tipo de lista que queramos, e ir
pulsando la tecla Intro a medida que rellenemos la lista o vieta.

3. INSERTAR IMGENES (ANIMADAS Y ESTTICAS): Una pgina web

necesariamente tiene que tener una imagen ya sean
animadas (gifs
animados) o estticas (sin movimiento), las cuales realzan y dan un aspecto
atractivo a la pgina web, logrando llamar la atencin por parte de los
usuarios.

Formatos de Imgenes: Una Web est compuesta por mucho

ms que simple texto. Un sitio Web se disea para ser grfico, en el
cual vamos a aadir imgenes tanto estticas como dinmicas.
Podemos aadir imgenes prediseadas de Front Page, imgenes
que tengamos guardadas en el disco duro o imgenes de Internet.

Las imgenes deben estar en formato GIF o JPEG para poder ser
visualizadas por la mayora de los navegadores.
1) Formato JPG JPEG.-Apropiado para imgenes complejas y para
fotografa. JPEG comprime y destruye parte de la informacin de la
imagen, no admite transparencias.
2) Formato GIF.- Apropiado para logotipos y est comprimida de
forma que no pierde definicin. Admite la propiedad de
transparencia, que permite que las imgenes compartan el mismo
color de fondo de la pgina. Igualmente se pueden crear los GIFS
animados como sucesin de diferentes imgenes.
4. FONDOS EN FRONT PAGE: Front Page nos proporciona diferentes
opciones y alternativas para insertar fondos a nuestra pgina web
como fondos de color, imgenes y temas.
Pasos para Insertar Fondos:
1) Hacer clic sobre el men FORMATO y elegir la opcin FONDO

2) Nos muestra la siguiente ventana:

3) Como se puede observar aqu se eligen dos opciones de fondo:

Fondo de Colores.- Aqu se elige el color entero que quieres
de fondo en tu pgina Web.

Imagen de Fondo.- Aqu se puede elegir una imagen como

fondo en tu pgina Web de cualquier unidad de
almacenamiento a travs del botn

En este cuadro se puede ver las

diferentes imgenes que pueden
existir en alguna unidad de
almacenamiento.

5. TEMAS EN FRONT PAGE: Para conseguir un aspecto ms atractivo de

la pgina Web o de todas las pginas Web de un sitio, podemos aplicar
TEMAS.

Un TEMA es una combinacin de colores, tipos de letras, separadores,

etc. que guardan un mismo estilo y tienen una cierta concordancia y
una ambientacin comn.
Pasos para Insertar Fondos:
1) Clic en el men Formato.
2) Elegir la opcin Tema, aparecer una lista de diversos Temas al lado
derecho de la pgina.
3) Para elegir el Tema que ms nos agrade simplemente hacemos clic
sobre sta.
NOTA: Si deseamos cambiar a otro tipo de fondo ya sea de
colores o imgenes; primero tenemos que desactivar el Tema
elegido mediante la opcin SIN TEMA.
6. TABLAS EN FRONT PAGE: Lo primero que vamos a hacer es activar
la barra de men de Tabla; elegir la opcin Insertar, Tabla

Nos muestra el siguiente cuadro:

Donde se puede observar todas las

opciones que estn disponibles y la
manera de usar es ms cmoda y
rpida.

Formato de Celdas.- Dar formato a la tabla la hace ms atractiva a la

vista. Adems, podemos dar formato a determinadas celdas cuyo
contenido queramos destacar.
1 Situamos el cursor sobre la celda elegida o marcamos las celdas a
las que deseamos cambiar el formato.

2 A travs del Autoformato de Tablas; nos ubicamos en cualquier

lugar de la tabla, luego en el men TABLA elegir la opcin
Autoformato de celdas

Se puede elegir el tipo de Autoforma que ms te agrade.

7. HIPERVNCULOS EN FRONT PAGE: Un hipervnculo es una conexin

de una pgina a otro destino como por ejemplo, otra pgina Web o una
ubicacin diferente en la misma pgina, tambin puede ser una
imagen, una direccin de correo electrnico, un archivo, etc.
Pasos para insertar Hipervnculos:
1. Ubicarse en el lugar o seleccionar el texto en donde se desea
insertar el hipervnculo.
2. Hacer clic sobre el men INSERTAR o clic derecho, nos muestran los
siguientes cuadros:
MENU INSERTAR

CLIC DERECHO

3. Hacemos clic sobre la opcin Hipervnculo y nos muestra el cuadro

de Insertar Hipervnculo:
Se escribe un
nombre o texto al
hipervnculo

Se ubica el nombre
de un archivo o
pgina Web
4. Una vez que hayamos dado un nombre al hipervnculo y ubicado el archivo
al cual deseamos hipervincular, hacer clic sobre el botn ACEPTAR, el texto
o imagen cambia de color y aparece subrayada.

Anclas o Marcadores.- Es una ubicacin o conjunto de caracteres

que se ha marcado en una pgina. Un Ancla o Marcador es una seal

invisible que se deja en ciertas partes de una pgina Web para acceder
directamente a esas partes.
8. ELEMENTOS INTERACTIVOS Y MULTIMEDIA.- Una pgina Web puede
tener distintos tipos de elementos multimedia:
Elemento Interactivo.- Es un elemento que puede cambiar
dependiendo de cmo acte el usuario.
Elemento Multimedia.- Un elemento multimedia puede ser un
sonido, una cancin, una animacin, un video, etc.
Ambos tipos de elementos pueden darle vida a una Web, pero utilizar en
exceso esta clase de elementos har que la carga de nuestra Web sea
lenta y engorrosa, por lo que los visitantes podran perder el inters.
9. BOTONES DE DESPLAZAMIENTO: Estos son elementos interactivos y
vamos a ver cmo crear algunos botones bsicos que son muy usados
en la mayora de las pginas Web; las cuales se pueden crear de dos
maneras distintas:
1 Haciendo clic sobre el Men INSERTAR, la opcin Componente
Web, clic sobre la opcin Botn Interactivo y hacer clic en el
botn Finalizar.

Nos mostrar el siguiente recuadro de Botones Interactivos:

En este recuadro podemos cambiar la fuente y el tipo de la imagen

del botn.
FUENTE
IMAGEN

2 Haciendo clic sobre el Men INSERTAR, clic en la opcin Botn

Interactivo,

Aqu tambin nos mostrar el recuadro de Botones Interactivos

Estos son

ejemplos de los Botones Interactivos:

10. EL HTML DINAMICO: Se refiere al uso de JavaScript, Hojas de Estilo

en Cascada (CSS) y tecnologa de navegador para hacer pginas ms
vibrantes y activas. Para aadir efectos DHTML debemos mostrar la
barra de herramientas especfica:
1. Clic en el Men Ver.
2. Clic en la opcin Barra de Herramientas, Efectos DHTML.

3. Nos muestra el siguiente recuadro, con las siguientes opciones:

4. El efecto HTML se visualizar en la Vista Previa de la pgina Web, de

acuerdo a las opciones que hayamos elegido en la Barra de Efectos
DHTML.
Podemos aadir efectos tanto a textos como a imgenes:
Texto Animado.- Siga los pasos para insertar un texto animado:
Pasos:
1. Seleccionar el texto que se quiere animar.
2. En la barra de Efectos DHTML podemos elegir entre cuatro
alternativas:
Clic: hace que la animacin ocurra cuando se haga clic en el
texto.
Doble Clic: la animacin ocurrir tras un doble clic en el texto.
Pasar el mouse: la animacin ocurrir cuando el ratn pasa por
el texto.
Carga de pgina: la animacin se producir cuando se carga la
pgina.
3. Elegimos entre dos opciones: Volar hacia fuera (el texto se mover
de la forma que indiquemos) o Formato (cambia la fuente, tamao,
color, relleno, del texto).
Imgenes Animadas.- Podemos hacer que una imagen vuele, que su
borde cambie de estilo o incluso que se cambie la imagen al situar el
ratn encima de ella.
Pasos:
1. Seleccionamos la imagen que se quiere animar.
2. En la Barra de Efectos DHTML seleccionamos las mismas
alternativas que en el texto (clic, doble clic, pasar el mouse y carga
de pagina), aunque con posibilidades diferentes.
3. Por ejemplo: Podemos hacer que al situar el ratn sobre una imagen,
esta cambie a otra imagen.
Para ello insertamos una imagen, la seleccionamos y en la Barra de
Efectos DHTML escogemos Pasar el mouse, Aplicar Intercambiar
imgenes y seleccionamos la imagen que deseamos que aparezca.
11. AADIR MUSICA DE FONDO A LA PGINA: Esto puede aportar
cierta personalidad a nuestra pgina, sin embrago puede llegar a ser un
poco molesto orla cada vez que un visitante la vea. Por lo tanto
podemos configurar la meloda para que suene una, varias o de forma
indefinida.
PASOS:
1. Hacer un clic derecho en cualquier parte de la pgina Web.
2. Hacemos clic en Propiedades de Pgina.

3. En el cuadro que nos muestra clic en la ficha General, si no est

seleccionada y
4. Buscamos el apartado Sonido de Fondo
5. Hacemos clic en Ubicacin y escribimos el nombre de la meloda o
sino clic sobre el botn Examinar
6. En Bucle, podemos elegir el nmero de veces que se repetir la
meloda.

NOTA: Recuerda

que para insertar

msica sta debe
de estar en uno
de
estos
formatos: wav, midi,
au, real audio o aiff ya
que algunos de
estos
formatos
reproducen
En este recuadro podemos buscar el archivo correcto.

12. AADIR UN VIDEO A LA PAGINA: Insertar un video es muy

sencillo, tan slo hemos de aplicar los siguientes pasos:
1. Hacer clic en el lugar de la Web dnde queramos poner el video.
2. Hacer clic en el Men INSERTAR.
3. Despus en la opcin Imagen y finalmente en Video.

NOTA: Recuerda

que para insertar

video stas deben
encontrase en los
siguientes
formatos: avi, asf,
ram o ra, ya que es
un estndar de
Windows, y no
requiere
de

Por defecto, al insertar un video Front Page nos mostrar la primera

imagen del video.

Espero que este mdulo

te haya servido para
realizar una bonita pgina
Web
GRACIAS!