:: Cómo Construir Páginas Web utilizando el

programa FrontPage ::
[Aplica a versiones 2003, XP, Nivel Básico]

Esta guía pretende ser un instrumento de ayuda en la elaboración de tus páginas

web. Encontrarás instrucciones elementales enfocadas en el aspecto técnico del
programa. Trabajaremos sobre una estructura sencilla intentando en todo momento
que tengas control del diseño y programación de tus páginas.

Tabla de Contenido: Página

Introducción

¿Qué puedes hacer con 1

FrontPage?
¿Cómo planificar un WebSite? 1
¿Qué debes considerar al 2
momento de diseñar tu website?
Inicio

Accesando FrontPage 3
Crear una carpeta para tu 3
website
Escoger un tema 6
Crear un borde 7
Hacer tablas
Crear la página inicial 8

Desarollo 9

¿Cómo editar texto?

¿Cómo añadir imágenes? 9
¿Cómo editar imágenes? 10
Creando la barra de navegación 10
¿Cómo crear enlaces? 13
Crear una tabla 16
Editar la tabla 16
Guardando la página web 17
 Introducción
FrontPage es un programa desarrollado y registrado por la compañía Microsoft, el
cual te permite crear, editar, y manejar páginas para ser luego publicadas en el web.

¿Qué puedes hacer con FrontPage?

¾ Escribir y editar texto

¾ Añadir y editar imágenes
¾ Crear tablas
¾ Crear listados
¾ Crear enlaces
¾ Crear “Frames”
¾ Crear Formularios
¾ Publicar páginas en el Web

¿Cómo planificar un Website?

• Primero establece el tema y los objetivos de tu website

• Esto te permite dibujar la imagen que mejor representa las ideas que
resultan del tema y los objetivos.
• Manten un escrito que ordene y estructure tu página. Esto facilitará el
trabajo.
• Recopila toda la información a utilizar
• Recuerda respetar los derechos de autor, tanto en los escritos citados,
trabajo intelectual de un compañero y en las ilustraciones
presentadas. Es una buena opción.
• Divide el contenido en asuntos o secciones
• Cada uno de estos asuntos se convertirán en una página dentro de tu
web.

1
 Elaboración: Algunos trucos:

¾ Elabora un diagrama de tu website en papel para que te sirva de

guía (Site Map).
¾ Manten en papel detalles de tu website como las cantidades de las
páginas, su contenido, tipo de letra utilizada, colores, etc.
¾ Coloca una breve descripción de tu website.
¾ Destaca la información más relevante.
¾ No olvides desarrollar una barra de navegación. Esta debe ser
manejable para toda persona que visite tu website.

¿Qué debes considerar en el momento de diseñar tu Website?

• Proveer información relevante

• Crear una Barra de Navegación en todas las páginas
• Respetar y especificar las disposiciones de derecho de autor (copyright) tanto
en el contenido escrito como en la utilización de láminas. Para las láminsa,
unas veces es necesario pedir permiso al autor sobre su uso y seguir las
instrucciones del mismo para permitir la publicación.
• Incluir información de contacto
• Facilitar la transferencia de la información: mantener el tamaño (file size) de
las imágenes y las páginas lo más bajo posible (<30kb)
• Actualizar la información constantemente
• Proveer un listado de “FAQ” (Frequently Asked Questions) [Según el objetivo
de tu página]
• Ten en cuenta cuál será el objetivo para crear la página y trabaja hacia ellos
• Sobre Diseño:

‰ Utiliza estilos de letra claros y sencillos (Arial, Courier, NewTimes

Roman)
‰ Si vas a utilizar una imagen de fondo (background) ésta no debe
intervenir con el texto
‰ Cuida los colores de tu página, si usas colores claros para el fondo
usa colores oscuros para las letras
‰ No debes hacer páginas demasiado largas, organiza la información
distribuyéndola en varias páginas enlazadas
‰ No uses imágenes demasiado grandes que ocupen todo el espacio del
monitor y/o que opaquen de alguna forma la información
‰ Se constante en términos de diseño en todas las páginas
‰ Esmérate en hacer la página principal (index). De esta depende que
las personas se queden o no leyendo el resto de tus páginas.

2
 Inicio
Accesando FrontPage

Presiona el icono que representa el programa en la pantalla de tu computadora o

búscalo en la opción de Start/Programs/Microsorft Front Page

Una vez entras al programa aparece una página vacía donde puedes comenzar a
crear tu website. Pero antes te recomendamos lo siguiente:

Crear una carpeta para tu website

Presiona en el menú File/New. Escoge la

opción Page or Web...

3
En esta versión del programa, la mayoría
de los casos le aparecerá una pantalla a
la extrema derecha de la pantalla que se
titula New Page or Web. En esta
seleccionarás la opción Empty Web.

TIP: En algunas versiones aparece

una opción de One PageWeb Site.
Cuando le des clic a la opción podrás
escoger Empty Web. En esa misma
sección seleccionarás la localidad
donde grabarás el mismo.

Empty Web

4
Automáticamente el programa direcciona tu web en el directorio “My Document” y le
asigna un nombre “Web1”:

C:\My Document\My Web\Web1

Si quieres cambiar de directorio y asignarle otro nombre a tu “Website” puedes

hacerlo bajo la opción “Specify the location of the new web”:

Ejemplo, A:\nombre

o C:\My Document\My Web\nombre

TIP: No uses acentos, letras mayúsculas, ni espacios entre palabras o letras para ponerle
nombre a tus archivos pues algunos sistemas de computadora tienen dificultades para leer
este tipos de nombres. [Evita también la letra ñ]

Ahora, presiona en el
menú “View” y escoge la
opción “Views Bar”,
aparecerá la barra de
“View” al extremo
izquierdo de la ventana
del programa. [En la
mayoría de los casos
esta opción está dada]
Presiona en la opción
“Folders” y verás a la
derecha el listado de
“folders” (carpetas) que
te creó FrontPage:
_private, images.

En la carpeta llamada _private tendrás las extensiones necesarios para que

funcione el programa (no puedes editarlas) y en la carpeta llamada Image podrás
guardar imágenes.

5
Escoger un Tema

Este manual en particular le facilitará el trabajo llevándole a través de las utilidades

más prácticas del programa. Esto no significa que no existan diversas maneras de
empezar.

El tema o Theme se refiere a motivos ya

establecidos por Front Page. El
programa te permite hacer cambios a
estos temas y grabar los mismos de
forma personalizada. Presiona en
Format/ Theme. En Theme procura
escoger la opción de All Pages para
serciorarte de que se repita en cada
página.

Para hacer cambios en el tema escogido da un click en la opción Modify y tu

escoges qué cambiar: el color, las gráficas o el texto.Si haces algún cambio procura
presionar en Save as y así personalizarás los cambios.

6
Crear un borde

La opción de Shared Borders te facilita el trabajo en grandes cantidades. Al

escoger un borde evitas tener que repetir el mismo patrón por cada página de tu
website. Dentro de estos bordes trabajarás con tablas que te permitan manejar
mejor el espacio.

Da click en Format/ Shared Borders.

En Shared Borders escogerás las
opciones que mejor representen la
organización que deseas para tu
website. Una sugerencia sería
seleccionar: All Pages/Top/Left;
Include navigation buttons/Botton

TIP: Si no aparece activa la opción,

dirígete a Tools/ Page Options/
Authoring y procura que la opción de
Share Borders esté seleccionada.

Selecionado tu borde ya tienes una idea de la imagen que empieza a organizar tu

website.

Hacer tablas

Lo primero que se te recomienda es trabajar sobre una estructura para que puedas
tener mayor control sobre la página.

Para hacerlo, selecciona en la barra de

herramientas la opción Table/Insert/Table o
ve directamente al icono de tables

7
 Puedes escoger la cantidad de líneas y
columnas, escoger el porcentage, el
aliniamiento, la definición de los
tamaños de los bordes, espacios de
los espacios. El Set as default for new
table te permite mantener el mismo
orden para las demás tablas.

Nota: Vé a la sección “Editar Tablas” más adelante, para detalles sobre como
cambiar los colores de las celdas y la tabla si así lo prefieres.

Con estas instrucciones ya has creado tu plantilla [template] para tu website. El

grabar esta página como tu index sería tu próximo paso.

Crear la página inicial (Home Page)

A ésta primera página le llamarás index.html . El archivo llamado index.html será

siempre la página principal que se despliega cuando las personas accesen a tu
website. También se le conoce como “home page”.

Ve a File/ Save as. En el área de file

name escribe index.html. El HTML sólo
lo utilizarás con el index y
automáticamente el programa grabará
las demás páginas como htm.
En la opción Change se te ofrece el
poder cambiar el nombre de la página. Si
seleccionaras un Banner para tu
página, será este nombre el que se
reflejará. En esta opción puedes escribir
con todo tipo de regla gramatical.
Para crear la siguiente página repite los
pasos uno y dos de ésta sección.

8
 Desarrollo
¿Cómo editar texto?

Procurando iniciar un texto dentro de los márgenes de una tabla, escribirás como lo
haces normalmente en un programa de edición de texto. Puedes usar la barra de
herramientas para diseñar el formato del texto: estilo, tamaño, color, ennegrecer,
itálicas, subrayado y demás.

¿Cómo añadir imágenes?

• ClipArt - Insert/Picture/ClipArt o puedes localizar el icono en tu barra de

herramientas.
• Importar imágenes ya creadas - Insert/Picture/From File

Añadir imágenes de Internet que tengan permiso de "copyright".

1. Buscas la imagen en Internet

2. Sobre la imagen, presionas con el botón derecho del mouse
3. Escoges la opción “copy” y la grabas en un disco externo o interno en tu
computadora.
4. Regresas a FrontPage
5. Ubicas el cursor donde quieras colocar la imagen
6. Presionas en Paste

9
¿Cómo editar Imágenes?

Presiona sobre la imagen y aparecerá una barra de herramientas como la siguiente:

• Añadir texto dentro de la imagen

• Herramienta Thumbnail: minimiza la imagen pero la misma puede
luego ser vista en su tamaño original en la Internet con sólo presionar
sobre ella
• Posición absoluta: te permite mover la imagen a donde la quieras
mover
• Rotación de la imagen
• Brillantes y contraste
• Cortar (crop)
• Eliminar un color (transparencia)
• Blanco y negro
• Efecto de Bevel
• Hostpot (añadir enlaces dentro de imágenes)

Nota: Recuerda salvar lo editado dándo un clic en el ícono correspondiente.

Creando la Barra de Navegación

La barra de navegación establece una estructura para navegar por todas las
páginas que componen tu "website" . El programa ofrece varias formas para diseñar
esta estructura. Entre éstas se encuentran la opción Navigation Bar

Paso #1

ƒ Asigana orden presionando sobre la opción View y seleccionando Navigation.

ƒ Cuando estés en esta vista, arrastrarás las página deseada desde el Folder
list y suéltala hasta el área de trabajo para enlazarla con la página principal
(index) [index se identifica con el dibujo de una casa en la parte inferior
izquierda, así que no debes arrastrarla]

10
 • Cuando usamos el Navigation Bar, FrontPage usa la etiqueta (label) que
aparece en la vista de navegación (Navigation View) como texto para los
enlaces. Para cambiarlo presiona con el botón derecho del mouse sobre la
página que deseas cambiar y escoges la opción Rename.

Paso #2

Asignar posición a la Barra de Navegación en la página dentro de las celdas de

los bordes [Share Borders] para que la misma se repita automáticamente en
cada página creada. Aparecerá una pantalla como la que sigue:

En esta pantalla verificarás si la opción Link Bars está seleccionada en la extrema

11
izquierda del recuadro. En la extrema derecha debe estar seleccionada la opción
Bar based on navigation etructure. Al finalizar presiona sobre el botón de Next.

En esta pantalla selccionarás la opción de Use Page's Theme. Esto significa que
permanecerás con las imágenes ofrecidas por el tema de tu página. Al finalizar
preciona en Next.

En esta pantalla seleccionarás la posición de la barra de navegación. Escoge la que

mejor corresponda a tus necesidades. Al terminar seleccionarás la opción Finish.

12
Para las propiedades de la Barra de navegación sería pertinente escoger las
opciones de Child pages under home, Home page y Parent page. Estas opciones
amplian los enlaces de tu navegador.

¿Cómo crear enlaces?

13
Enlaces Internos: Enlaces hacia páginas que perteneces a tu “website”

1. Selecciona la palabra o imagen que quieras utilizar de entrada al enlace

2. Presiona con el botón derecho del mouse
3. Escoges la opción“Hyperlink”
4. Luego presionas sobre el archivo hacia donde se dirigirás el enlace

Enlaces Externos: Enlaces hacia otras páginas web fuera de tu “website”.

1. Sigues los primeros tres pasos

2. Escribes la dirección de la página que quieres enlazar en la sección
URL

Enlaces hacia un email: escribes la dirección de email, una vez presionas

enter automáticamente se creará el vínculo hacia el email.

Enlaces hacia un email desde una imagen:

ƒ Seleccionas la imagen que deseas enlazar

ƒ Presionas sobre el botón hyperlink

ƒ Presionas sobre el icono “mail to”

ƒ Escribes el email y presionas en ok.

14
Enlaces dentro de una misma página:

1. Primero tienes que insertar un bookmark donde deseas enlazar

ƒ Colocas el cursor donde

deseas que llegue el vínculo
ƒ Escoges en el menú Insert la
opción bookmark
ƒ Asigna un nombre al bookmark
en el espacio provisto
ƒ Presionas en ok y listo
ƒ Aparecerá una banderita
indicando que allí colocaste un
bookmark.

2. Ahora crea el vínculo siguiendo los primeros tres pasos de los enlaces
internos

• Utilizarás la sección Optional/Bookmark seleccionas el nombre

que le pusiste al bookmark y listo.

15
Crear una tabla

Para insertar una tabla, busca la opción de Table

en la barra de navegación, Table/Insert/Table

En la pantalla de Insert Table

seleccionarás las opciones que mejor
dibujen la tabla que necesitas. Puede
escoger la cantidad de columnas y
líneas, el ancho de los bordes, el
abarque de la tabla (Specify width).

Editar la tabla

• Añadir filas o columnas

1. Presiona con el botón derecho del mouse
2. Escoges la opción de Split Cell
3. Defines en la misma la cantidad de celdas que deseas organizar

Nota:Si quieres controlar donde exactamente se colocará la fila o

columna activa la función por medio del menú de tablas: Table/Insert/Row
or Columns

16
Guardando la página web

Desde un inicio estás guardando tu página. Si deseas grabarla en un disco

transportable, busca el archivo en la computadora y copialo o arrastralo hacia tu
disco.

Nota: si deseas cambiar el título a la página: das clic en “Change” te

apareceráunaventana como la que sigue donde colocarás el título deseado, luego
dasclic en OK. El título de la página es importante porque entre otras cosas, es lo
que aparecerá en tu barra de navegación y banner, si es que colocas alguno.

Nota: Esimportante que te asegures que guardas las imágenes en la misma

carpetadonde esta tu “Website”, preferiblemente en la carpeta “image”.

Si tienes alguna duda sobre estas instrucciones puedes comunicarte con nosotras:
Johana Martínez: jmrosario13@universia.pr
Heidi J. Figueroa: hfiguero@coqui.net
Carmen Morales: hematoma_cm@hotmail.com

Como asunto [Subject] FP, para así poder reconocer el asunto.

jmr/revisionpara2002en adelante/agosto2005

17