Diseño Web con FrontPage

Diseño de páginas y sitios web - Microsoft FrontPage
MICROSOFT FRONTPAGE
Ejercicio Nº 1 – Microsoft FrontPage
Plantillas Web
Las plantillas son Webs o páginas Web estándar que FrontPage puede crear a solicitud. Entre
las plantillas integradas se encuentran el Web Personal, el Web de Soporte al Cliente, etc.
Todos los Webs y páginas web empiezan a partir de una plantilla, aun cuando deseamos crear
un web que no contenga ninguna página integrada (Web Vació), o cuando necesitamos una página
completamente vacía (Web de una Página).
Para iniciar un Web contamos con las siguientes plantillas:





Web Vacío: Un web que no contiene páginas.
Web de una Página: Un web con una sola página en blanco.
Web Personal: Un web para información personal con solo cuatro páginas.
Web de Soporte al Cliente: Un web de 19 páginas que permite a una empresa ofrecer
soporte a clientes para uno o más de sus productos.
Web de Proyecto: Un web de 23 páginas dedicado a un proyecto en colaboración, con
páginas de información sobre los miembros, el estado del proyecto, la agenda, las
discusiones de grupo y el archivo.
Nosotros comenzaremos creando un Web Personal:
1) Una vez abierto el programa, ir a ARCHIVO-NUEVO-WEB..., elegir la plantilla Web
Personal, indicar la ubicación donde se guardara el Web, y Aceptar.
Finalizado este punto FrontPage crea todas las páginas y subcarpetas necesarias. Cada una de
las plantillas integradas incluye las carpetas _private e images. La carpeta images contiene todos
los archivos gráficos que sean parte del Web. La carpeta _private, que inicialmente no contiene
ningún archivo, se utiliza para guardar archivos que deban estar ocultos para los lectores del Web.
Por ejemplo si creamos un Web para recabar datos, como el nombre y dirección de los lectores,
podemos guardar esta información en esta carpeta.
También podemos ver que se creo una página llamada index.htm, este es el nombre que se le da
a la página principal o de inicio. Comúnmente se designa a la página principal de un Web con este
nombre, pero también se la puede llamar index.html, default.htm y default.html.
2) Insertar una nueva página, ARCHIVO-NUEVO-PÁGINA..., y elegir de la ficha General:
Página Normal, Aceptar.
3) Agregar esta nueva Página en la vista Exploración. Elegir el lugar donde la iremos a ubicar.
Observar en la vista Página que se encuentre en el lugar deseado.
4) Visualizar como ira quedando la página desde la lengüeta de vista previa o también podemos
ir a ARCHIVO-VISTA PREVIA EN EL EXPLORADOR....
5) Modificar la información predeterminada por FrontPage por los datos del grupo de alumnos o
de cada integrante.
Página 1 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
6) En la página principal nos muestra la fecha de la última actualización de la página (la cual
representara la fecha de actualización de todo el sitio), para cambiar el formato en que se
presenta esta fecha o para agregarle también la hora, hacer doble clic sobre dicha fecha,
otra forma es seleccionando la fecha y luego ir a FORMATO-PROPIEDADES....
Luego para actualizarla solo presionamos la tecla de función F5, llamada también tecla
actualizar (Refresh).
7) Otro componente que se puede modificar es el titular de la página, el encabezado que va al
principio de la página y que sirve de titulo. Cada página de la plantilla de Web personal tiene
un titular. En forma predeterminada, el titular es gráfico; el texto aparece en un sencillo
archivo de gráficos.
Para cambiar esto, hacer doble clic en el titular y se abrirá el cuadro de diálogo de
propiedades.
Cambiar el texto de titular de página. Cualquier cambio que se le haga al texto del titular de
una página se efectuara también en el icono de esa página dentro de la vista Exploración. El texto de
las barras de exploración que están vinculadas con esa página, cambiara por el nuevo titular.
8) La página Favorite.htm (Sitios Favoritos), contiene ya dos hipervínculos predeterminados a
sitios externos y uno llamado Mi Sitio Favorito, el cual deberán crear.
9) Crear más hipervínculos a sitios externos en la página de Sitios Favoritos.
Los Hipervínculos pueden asociarse con cualquier elemento de una página Web, como texto,
gráficos o una combinación de los dos. Para cambiar el hipervínculo hacemos un clic derecho sobre él
y seleccionar el comando Propiedades de Hipervínculo... del menú contextual.
Podemos vincular el hipervínculo a un sitio externo de nuestro Web o a cualquier elemento o
página dentro de nuestro sitio.
10) Si en algún momento se elimino por error o simplemente desea agregar más de estos
componentes podemos hacerlo desde: INSERTAR-FECHA Y HORA, INSERTAR-TITULAR
DE PÁGINA, INSERTAR-HIPERVINCULO.
11) El color del texto y de los hipervínculos, el color de fondo o la imagen de fondo, los tipos de
letras, las imágenes y la barra de exploración, todo esto en su conjunto forman lo que
llamaremos un TEMA. Los temas pueden ser aplicados a todo el sitio web o utilizarse uno
distinto para cada página del sitio.
Ir a FORMATO-TEMA. Se abrirá el cuadro de diálogo de temas donde podrá ver la vista
previa de cada tema predeterminado por FrontPage. Luego de elegir uno de los temas se deberá
seleccionar si se desea aplicar el tema a: Todas las Páginas o a las Páginas seleccionadas.
La opción Colores Intensos determina si el tema usará una variedad de colores brillantes, o un
fondo blanco y colores oscuros si no se la selecciona.
Si elegimos Gráficos Activos el tema adquiere algunos efectos de animación.
Aplicar Imagen de Fondo, si elegimos colocar una imagen de fondo en lugar de un solo color.
Página 2 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
Aplicar Mediante CSS, hojas de estilo en cascada, las cuales permiten definir los elementos
visuales de una página (texto, colores, tipos de letras y formatos) en forma separada de la
información que contenga la página.
Página 3 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
Ejercicio Nº 2 – Microsoft FrontPage
Creación de un TEMA:
Como vimos en el ejercicio anterior los temas son una forma rápida de determinar el aspecto
de un Web. Ya sea que el Web contenga 5 o 50 páginas, para aplicar el tema se requiere la misma
cantidad de trabajo.
Si ninguno de los temas integrados se adecua al Web que queremos crear, podemos elaborar
uno nuevo.
1) Abrir el Sitio del ejercicio anterior.
2) En la ventana Temas hacemos clic en MODIFICAR. Aparecerán tres nuevos botones:
COLORES, GRÁFICOS y TEXTO. Cada uno de ellos nos abrirá una ventana.
La ventana de



Colores, cuenta con 3 solapas:
Combinación de colores: Nos ofrece una lista de combinaciones posibles.
Ruedas de colores: Al elegir un color forma una serie de 5 colores relacionados.
Personalizado: Nos permite elegir un color deseado a cada elemento
(Hipervínculos, borde de tabla, etc.).
En la ventana Gráficos tendremos una lista de elementos (Imagen de fondo, botones, etc.) a
los cuales les podremos cambiar las imágenes predeterminadas y la fuente.
En la ventana de Texto también tendremos una lista de elementos (Encabezado, Cuerpo, Etc.) a
los cuales les podremos cambiar la Fuente
3) Modificar todos los elementos deseados, guardarlo y aplicarlo al Sitio.
4) Para eliminar temas que ya no se usan, lo podremos hacer desde la vista Informes – Temas
no utilizados.
Página 4 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
Ejercicio Nº 3 – Microsoft FrontPage
Asistentes para Web:
Además de las plantillas también podemos crear un Web a partir de un asistente.
1) Ir a ARCHIVO-NUEVO-WEB..., elegir el asistente para Presencia Corporativa.
2) Seguir los pasos leyendo y completando con atención cada opción.
3) Modificar la información predeterminada por FrontPage por los datos de una empresa
ficticia.
Página 5 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
Ejercicio Nº 4 – Microsoft FrontPage
1) Crear un Web de discusión utilizando el asistente.
2) Agregar un nuevo formulario (Un formulario es una página Web con campos para recabar
información acerca de los visitantes del sitio.) ARCHIVO-NUEVO-PÁGINA-ASISTENTE
PARA PÁGINAS DE FORMULARIOS, recabando información de los visitantes y la opinión
sobre el sitio.
Página 6 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
Ejercicio Nº 5 – Microsoft FrontPage
Creación de una sitio a partir de un Web de una página:
1) Insertar y guardar 5 páginas nuevas.
2) Crear los vínculos entre las páginas desde al vista exploración.
3) Situados en la página principal agregar bordes compartidos a todas las páginas:
FORMATO-BORDES COMPARTIDOS... Aplicar a: Todas las páginas; Superior;
Izquierdo, Incluir botones de exploración.
4) En el Borde Superior escribiremos el titular de cada página (INSERTAR-TITULAR DE
PÁGINA).
5) El borde izquierdo lo modificamos desde el menú contextual: Propiedades de barra de
exploración....
6) Determinar los colores a utilizar en las páginas: FORMATO-FONDO..., luego elegir los
colores de fondo, de texto, y de hipervínculos.
7) Escribir el texto de cada página. Cada vez que hacemos un salto de página aparece una
línea en blanco, para que no nos aparezca esta línea en blanco, debemos ir a INSERTARSALTO DE LÍNEA... y elegir Salto de línea normal.
8) Si al contenido de las páginas además de texto también tendrá imágenes es preferible
organizar todo en tablas (TABLA-INSERTAR TABLA...).
9) Agregar imágenes a las páginas deseadas.
Desde la barra de herramientas de imágenes podemos modificarlas:
12345678910111213141516171819202122232425-
Insertar imagen desde archivo
Texto
Viste en miniatura automática
Ubicación absoluta
Traer adelante
Enviar atrás
Girar a la izquierda
Girar a la derecha
Voltear horizontalmente
Voltear verticalmente
Mas contraste
Menos contraste
Mas brillo
Menos brillo
Recortar
Establecer color transparente
Blanco y negro
Descolorar
Dar efecto biselado
Nuevo muestreo
Seleccionar
Zona activar rectangular
Zona activar circular
Zona activar poligonal
Resaltar zonas activas
Página 7 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
26- Restaurar
Página 8 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
Ejercicio Nº 6 – Microsoft FrontPage
Animación y Efectos especiales:
1) Abrir el Sitio del ejercicio anterior.
2) Crear un efecto de transición entre páginas: FORMATO-TRANSICIÓN DE PÁGINA....
Las transiciones se pueden asociar a cuatro eventos: Al entrar en la página, Al salir de la
página, Al entrar al sitio, Al salir del sitio.
Hay muchos efectos de transición que podemos aplicar y la mayoría tienen nombres que se
explican por si mismos, como circulo, tablero, revelar.
También nos permite establecer la dirección de la transición, como en revelar hacia la derecha,
con el que la página nueva va entrando en pantalla de izquierda a derecha. La transición Aleatoria
(Random) aplica un efecto al azar cada vez que ocurre el evento.
Al seleccionar una transición también debemos determinar su duración, medida en segundos.
Esto establecerá cuánto tiempo se desplegará el efecto.
3) Crear una animación de elementos de página con HTML dinámico: En lugar de aplicarle
efectos especiales a toda una página podemos hacerlo a elementos especificos de la página,
por ejemplo podemos aplicarles efectos al texto, a hipervínculos, a imágenes, etc.
Seleccionar el elemento al cual se desea aplicar un efecto e ir a: FORMATO-EFECTOS DE
HTML DINÁMICO.
Hay muchos efectos de HTML dinámico que pueden aplicarse al texto. Por ejemplo hacer que
se coloque en su lugar correcto de la pantalla de alguna de las siguientes maneras:
 Movimiento elástico: el texto se desplaza desde afuera de la pantalla hasta un poquito
más allá de su lugar y después regresa a su lugar correcto.
 Colocar palabra a palabra: el texto cae en su lugar palabra por palabra.
 Volar hacia adentro: las palabras vuelan a su lugar desde la dirección que usted elige.
 Espiral: las palabras se van acomodando una por una, en un elegante movimiento en
espiral.
Estos efectos, y otros, pueden ocurrir cuando se realice determinado evento. Uno de estos
eventos es la carga de la página que contiene el texto. En el caso de hipervínculos e imágenes,
también puede provocar un efecto basándose en la acción del mouse. Por ejemplo, pude animar un
hipervínculo de texto cuando se le haga clic o doble clic, y hacer que una imagen reacción cuando
pase el mouse por encima.
4) Crear una imagen sensible al paso del mouse: (cuando cambia una imagen por otra al pasar
el mouse por encima)
Para crear este efecto se necesitan dos imágenes: la original y la que aparecerá en respuesta
de un evento del mouse, luego seguir los siguientes pasos:
1- Insertar la primera imagen
2- Ir a FORMATO-EFECTOS DE HTML DINÁMICO
3- En la barra de herramientas de Efectos DHTML elegir:
 En (Evento): Pasar el mouse
 Aplicar (Efecto): Intercambiar imágenes
 (Elegir configuración): Elegir imagen...
La imagen intercambiada debe ser del mismo tamaño que la original. Si no lo es, FrontPage
ajusta la imagen al área de despliegue disponible. Sin embargo, esto no es aconsejable porque si la
imagen se tiene que reducir o ampliar mucho para ajustar sufre una distorsión.
5) Crear una Marquesina. Una marquesina muestra un mensaje de texto con desplazamiento.
Se puede crear a partir de un texto ya escrito seleccionándolo, y luego ir a INSERTARPágina 9 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
COMPONENTE-MARQUESINA... o escribiendo un nuevo texto en la ventana de
Propiedades de Marquesina.
 Texto: Escribir el texto que se desea mostrar (no hay límite de longitud).
 Dirección: Izquierda o Derecha: Determina la dirección en la que se moverá el texto.
 Velocidad: Retardo: En milisegundos. Cantidad: En píxeles. Ambos determinan el
incremento de velocidad de la marquesina.
 Comportamiento: Desplazar: La marquesina se desplaza desde una lado hasta
desaparecer por el otro lado, y volver a empezar por el lado inicial. Deslizar: Aparece
por un lado y se queda parada en el lado contrario. Alternar: Rebota de lado a lado.
 Alinear con el texto: Superior, Centro o Inferior.
 Tamaño: active la casilla de verificación Ancho o Alto, escriba el ancho o alto y
después seleccione si se expresan En píxeles o En porcentaje.
 Repetir: Para repetir la marquesina continuamente active la casilla de verificación
Continuamente. Para repetir la marquesina una cantidad de veces fija, desactive la
casilla de verificación Continuamente y después escriba el número de veces que quiera
repetir la marquesina
 Color de Fondo: Para elegir un color de fondo para la marquesina.
También se puede cambiar el Formato de la fuente de la marquesina de dos formas:
a) Desde la ventana de Propiedades de Marquesina, Presionamos en ESTILO, y se nos
abrirá otra ventana y presionamos en FORMATO, desde aquí no solo podemos
modificar la FUENTE..., sino que también podremos modificar PÁRRAFO.., BORDE...,
NUMERACIÓN..., UBICACIÓN....
b) Haciendo un clic con el botón derecho del mouse y seleccionar FUENTE...
6) Crear un Botón Activable: Un botón puede vincularnos al igual que un hipervínculo a una
página externa, a una página interna, a un objeto, o a cualquier lugar dentro de una página.
Ir a INSERTAR-COMPONENTE-BOTÓN ACTIVABLE...
o Texto del botón: Escribir un texto preferiblemente muy corto. En FUENTE...
podremos cambiar el formato de la fuente.
o Vincular a: elegir el vinculo ya sea a un sitio externo, a una página de nuestro sitio, a un
elemento de una página, desde EXAMINAR....
o Color del botón: Elegir un color para el botón.
o Efecto: Elegir un efecto para el botón: Colorear, Promedio de color, Brillo, Invertir
brillo, Brillo suave, Eliminar efecto biselado, Aplicar efecto biselado.
o Color de fondo: Elegir un color para el fondo del botón.
o Color de efecto: Elegir un color para el efecto del botón.
o Alto y ancho: en píxeles.
En PERSONALIZADO... Podremos elegir:
o Reproducir sonido: Al hacer clic y Al activar. Sólo puede utilizar archivos de sonido
con formato .au para los efectos de sonido; no puede usar archivos .midi, ni .wav.
Además, los archivos .au deben tener el formato de 8 bits, 8000 Hz, mono y u-law.
o Imagen Personalizada: Botón: La imagen que tendrá al estar desactivado. Al activar:
Elegir una imagen para cuando se active el botón.
Para vincular un botón (o un hipervínculo) a un lugar dentro de la misma página que esta el
botón debemos trabajar con Marcadores. Un Marcador es una ubicación o texto seleccionado en una
página que se ha marcado.
Si una ubicación (en lugar de texto) tiene un marcador, éste aparecerá indicado por
. Si el
texto tiene un marcador, se mostrará con un subrayado con rayas.
Para agregar un marcador ubíquese en el lugar deseado o seleccione el texto a marcar, luego ir
a INSERTAR-MARCADOR.... Luego escriba el Nombre de Marcador (coloque un nombre corto
preferiblemente de una palabra).
Página 10 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
En esta ventana también podrá ver y borrar otros marcadores ya creados en el sitio.
Para utilizar un marcador en un botón activable en la ventana Seleccionar hipervínculo para
botón activable, en Opcional, Marcador: elegir de la lista desplegable el marcador deseado. En
Dirección URL: aparecerá el signo # seguido por el nombre (Ej: #nombre)
Para utilizar un marcador en un hipervínculo en la ventana Crear hipervínculo, en Opcional,
Marcador: elegir de la lista desplegable el marcador deseado. En Dirección URL: aparecerá el signo
# seguido por el nombre (Ej: #nombre)
Página 11 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
Ejercicio Nº 7 – Microsoft FrontPage
Creación de Marcos:
Los marcos dividen la ventana del explorador en dos o más secciones independientes. Se puede
determinar el tamaño de cada marco, y también cada marco puede tener su barra de desplazamiento.
Generalmente se crean dos marcos, en uno se colocan todos los hipervínculos y en el otro será
donde irán apareciendo las distintas páginas a las cuales llevan los hipervínculos.
Para crear marcos lo primero es elegir alguna de las plantillas de marcos.
1) ARCHIVO-NUEVO-PÁGINA..., en la
combinaciones de páginas enmarcadas.
ficha
PÁGINAS
DE
MARCO,
contiene
10
En el cuadro de Vista Previa podremos ver el tamaño y alineación aproximada de los marcos.
Las plantillas de marcos que se encuentran son:
 Contenido: un marco de contenido a la izquierda y un marco principal. Los hipervínculos
del marco de contenido modifican el marco principal.
 División horizontal: marcos superior e inferior, independientes entre si.
 División vertical: marcos izquierdo y derecho, independientes entre si.
 Encabezado: un marco de encabezado en la parte superior y el marco principal por
debajo. Los hipervínculos del marco de encanbezado modifican al marco principal.
 Encabezado, pie de página y contenido : una marco de encabezado en la parte superior, un
marco de pie de página en la inferior y un marco de contenido. Los hipervínculos de los
marcos de encabezado y de pie de página modifican al marco de contenido.
 Jerarquía anidada: un marco a la izquierda que modifica al marco de la derecha, dejando
sin cambio al marco principal.
 Jerarquía arriba-abajo: un marco en la parte superior, que modifica al intermedio,
dejando al marco principal.
 Notas al pie: un marco inferior con notas al pie y un marco principal. Los hipervínculos del
marco principal cambian las notas al pie.
 Pie de página: un marco inferior y otro superior principal. Los hipervínculos del marco
inferior cambian al marco principal.
 Titular y contenido: un marco para el titular en la parte superior, un marco de contenido
a la izquierda y un marco principal. Los hipervínculos del marco de titular modifican el
marco de contenido.
2) Elegiremos en este caso Encabezado, pie de página y contenido. En cada marco aparecerán
dos botones: NUEVA PÁGINA y ESTABLECER COMO PÁGINA INICIAL.
El botón Nueva página crea una página nueva y la coloca en ese marco. El Botón Establecer
como página inicial abre un cuadro de dialogo que le permite colocar en el marco alguna página ya
hecha. Esta página puede ser parte del mismo Sitio o estar situada en un sitio externo.
Cuando guardamos el sitio se crearan una página por cada marco y una página más que
contendrá todos los marcos juntos. En este caso serán 4 páginas. La página que contenga todos los
marcos será la que llamaremos Index.
3) En el marco superior elegimos el botón Nueva Página y le colocaremos el titulo de nuestro
sitio.
Página 12 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
4) En el marco inferior elegimos el botón Nueva Página y le o bien la Fecha de ultima
actualización, o por ejemplo Copyright © 2006 por .........
5) En el marco izquierdo elegimos el botón Nueva Página y crearemos los botones o textos que
servirán de hipervínculos, los cuales nos llevaran a navegar en el marco derecho, es decir el
marco principal, todas las páginas.
6) Seleccionar el primer botón o texto, por lo general el primer hipervínculo nos llevara a la
página de inicio, dentro de Propiedades de hipervínculo en Marco de destino elegimos
principal (o hacemos un clic en el marco derecho), luego en Dirección URL elegimos una
página en blanco (Crea una página y un vinculo a la página nueva). Entonces podremos crear la
página.
En este caso elegimos vincular el hipervínculo al marco principal es decir al valor
predeterminado, pero además de esta opción contamos con otras 4 alternativas más:





Valor predeterminado (Principal): El marco en el que se abren todos los hipervínculos
cuando no se especifica ningún marco de destino.
El mismo marco: El mismo marco que contiene la página con el hipervínculo.
Toda la página: Una nueva página que ocupa toda la ventana del explorador.
Ventana nueva: Una nueva página en una nueva ventana del explorador que deja
abierta la ventana del explorador existente.
Marco primario: La página que contiene el marco del hipervínculo y otros creados al
mismo tiempo.
7) Crear por lo menos 3 hipervínculos y sus correspondientes páginas más siguiendo los mismos
pasos del punto anterior.
8) Al ver en la vista previa del explorador notaremos que el marco derecho (Principal) se
encuentra completamente vació, solo veremos algo si tocamos uno de los hipervínculos. Para
que al ingresar al sitio podamos ver algo en este marco elegimos el botón Establecer como
página inicial y en el cuadro de dialogo elegimos nuestra página de inicio.
9) Para modificar el tamaño de un marco, haciendo clic en un marco seleccionamos Propiedades
de marco. También desde el menú Marcos podemos Eliminar o dividir un marco.
10) Crear una Tabla, con información y en una página a elección.
11) Para agregar un contador: INSERTAR – COMPONENTE – CONTADOR DE VISITAS A LA
PÁGINA...
Los contadores al igual que los libros de visitas, son servicios gratuititos, pero para que estos
funcionen debemos colocar un código en HTML en nuestra página, algunos de estos servicios los
brinda FastCounter de LinkExchamge de Microsoft, el servicio es gratuitito a cambio de un
hipervinculo con el sitio de FastCounter.
12) Crear botones a partir de imágenes. Aplicarle un borde biselado y un hipervínculo a una
imagen, o también se pude crear un botón activable y en personalizado agregar una imagen de
fondo.
13) Animar el sitio aplicando transición entre páginas, marquesinas, imágenes sensibles al mouse,
etc.
Página 13 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
Ejercicio Nº 8 – Microsoft FrontPage
Inserción de componentes de Office en una página Web:
Las hojas de cálculo y otros componentes de Office se implementan mediante controles
ActiveX, el cual es una norma para crear programas interactivos que se ejecutan en páginas Web.
Fue creada por Microsoft y solo tiene soporte en Internet Explorer 3.0 y superiores.
1) Realizar el ejercicio en una hoja en blanco. Para insertar una hoja de calculo ir a INSERTAR
– COMPONENTE - OFFICE SPREADSHEET.
La hoja de calculo aparecerá en la vista página tal como se vera en la página Web. También
funcionara como una hoja de calculo, por lo que se pueden introducir valores, formulas y funciones
directamente en ella.
Dentro de la vista página, se puede configurar la hoja de cálculo tanto como queramos y su
información se mantendrá en la página cuando esta se cargue en el explorador. Los visitantes pueden
cambiar los valores de la hoja de cálculo, para ver como afecta a otros cálculos del control,
manipulándolos como si estuvieran usando Excel. Estos cambios no son permanentes en la hoja de
cálculo ni pueden guardarse con el explorador.
2) Cargar los siguientes datos y calcular la población con el botón de Autosuma.
Viviendas
188765
Varones
188605
Mujeres
202919
Población
3) Realizar un grafico a partir de los datos anteriores. Para inserta un grafico iremos a
INSERTAR – COMPONENTE – OFFICE CHART.
4) Los cambios que se hagan en la hoja de cálculo se reflejaran de inmediato en el gráfico. Para
probar esto cambiar los valores o los títulos.
5) Para cambiar el formato del grafico: Botón secundario, y del menú contextual elegimos
CUADRO DE HERRAMIENTAS DE PROPIEDADES.
Creación de Hojas de Estilos:
Como ya vimos en el ejercicio 1 y 2 FrontPage nos permite elegir todo el aspecto de un Web al
mismo tiempo con los TEMAS.
Los temas son similares a las hojas de estilos en cascada (CSS), pero mucho mas limitados.
Una hoja de estilos o CSS, es un conjunto de reglas y características que, aplicadas a una
página web o a un conjunto de ellas, pueden modificar su apariencia. De esta forma, podemos separar
en cierta forma el diseño de la página de su contenido.
Gracias a las hojas de estilos podemos de alguna manera homogeneizar y automatizar el
trabajo que supone el diseño de una Web. Podemos definir un estilo para los títulos y otro para el
texto, de forma que no tengamos que modificar cada vez el texto y los títulos para que tengan la
apariencia que queramos. Las hojas de estilos se guardan con la extensión .css.
Página 14 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
6) Para crear una Hoja de Estilos ir a ARCHIVO – NUEVO – PÁGINA, elegir la ficha HOJAS
DE ESTILOS. Elegimos por ejemplo el estilo Arcos. Podremos leer en Descripción como esta
formato cada estilo predeterminado. Hacemos clic en Aceptar y FrontPage nos abre una
nueva hoja de estilos.
7) Guardamos la hoja de estilos y se guardara como Hojas de estilos de hipertexto lo cual le
dará la extensión .css.
8) Abrimos una de las páginas ya creadas por ejemplo la Index, y luego ir a FORMATO –
VÍNCULOS DE HOJAS DE ESTILOS..., nos da las opciones: A todas las páginas, o a
Páginas seleccionada, nosotros para poder probar varios estilos en este caso elegiremos la
opción a páginas seleccionadas, presionamos en AGREGAR, y elegimos el estilo que hayamos
guardado anteriormente.
9) Para modificar el estilo que creamos, abrimos el estilo e ir a FORMATO – ESTILO.
Dentro de Lista contamos con dos opciones, en este caso como elegimos un estilo
predeterminado, nos muestra primero Estilos definidos por el usuario, en el cual podremos ver
todos los Estilos utilizados y ver su vista previa, si presionamos en MODIFICAR nos da su
descripción y nos permite cambiar el FORMATO de fuente, párrafo, borde, numeración y ubicación.
La segunda opción de Lista es Todas las etiquetas HTML en la cual nos muestra todas las etiquetas
a las cuales les podremos aplicar formatos y crear mas estilos.
10) Crear una hoja de estilos a partir de una HOJA DE ESTILOS NORMAL el cual creara un
archivo vació en el que se pueden añadir los estilos. Aplicarlo a otra página del Sitio.
Cuando modifiquemos un estilo ya aplicado en una página, la página se modificara
automáticamente con nuestra modificación.
Etiquetas:
Las hojas de estilos usan etiquetas HTML para identificar los elementos de la página.
Algunas etiquetas HTML que debemos conocer son:














a: se refiere a los hipervínculos.
table: se refiere a las tablas.
body: se refiere al cuerpo del documento (texto en general).
h1..h6: se refiere a los encabezados (para los títulos).
p: normal
pre: con formato
address: dirección
li: para cada elemento de una lista numerada, con viñetas, de directorio o de menú
ol: antes y después de una lista numerada
ul: antes y después de una lista con viñetas
u: efecto subrayado
strike: efecto tachado
strong: texto en negrita
blink: efecto intermitente
Página 15 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
Ejercicio Nº 9 – Microsoft FrontPage
Formularios:
Los formularios se utilizan en las webs para recoger información del visitante. Éste puede
escribir libremente en los campos que se le presentan o seleccionar una opción de las que se le
ofrecen. Los formularios constan de los siguientes elementos:







Cuadros de texto de una línea
Cuadros de texto con desplazamiento
Casillas de verificación
Botones de opción
Menús desplegable
Etiquetas
Botones de comando.
Creación de Formularios utilizando el Asistente para páginas de formulario:
1) Ir a ARCHIVO – NUEVO – PÁGINA y luego elegir ASISTENTE PARA PÁGINAS DE
FORMULARIO. Este asistente nos hará una serie de preguntas para determinar que desea
colocar, como por ejemplo:
 ¿Qué preguntas quiere hacer?
 ¿Qué tipo de respuestas son aceptables?
 ¿Qué formato deben tener las preguntas y respuestas en la página Web?
 ¿Qué pasara después con las preguntas?
2) Primero se deberá elegir el tema de la pregunta dentro del cual nos presenta mas preguntas
relacionadas con el tema, o podemos elegir un tipo de dato para una pregunta creada por
nosotros.
Los temas los cuales cuentan con varias preguntas relacionadas entre si son:
 Información de contacto (Nombre, Dirección, Número telefónico, etc.).
 Información de cuenta (Nombre de usuario y contraseña).
 Información de producto (Nombre, versión, código, etc. del producto).
 Información de pedido (Productos a ordenar, información de facturación, etc.).
 Información personal (Nombre, Edad, etc.).
Los tipos de datos son:
 Fecha
 Hora
 Número
 Intervalo (un valor del 1 al 5)
 Cadena (una sola línea de texto)
 Párrafo
 Booleano (una respuesta limitada a sólo una de dos opciones).
3) Después de haber establecido todas las preguntas del formulario, se debe elegir como se
presentaran en la página Web. Se puede elegir que se presente como una serie de párrafos o
como una lista, que puede ser:
Página 16 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
 Una lista numerada.
 Una lista con viñetas.
 Una lista de definiciones.
4) El ultimo paso es decidir como guardara las respuestas del usuario. Hay tres opciones
disponibles:
 Guardar los resultados en una página Web.
 Guardar los resultados en un archivo de texto.
 Utilizar secuencia de comandos personalizada CGI.
La ultima opción para guardar los resultados es utilizar una secuencia de comandos
personalizada de interfaz gateway común (CGI). Esto se refiere a programas especiales, llamados
secuencias de comandos, que se ejecutan en combinación con páginas Web.
5) Para poder modificar este formulario y cada uno de sus elementos lo veremos en los puntos
siguientes al crear un formulario desde una hoja en blanco.
Creación de Formularios a partir de una hoja en blanco:
1) Abrir una hoja en blanco.
2) Ir a INSERTAR – FORMULARIO - CUADRO DE TEXTO DE UNA LÍNEA.
Cuando insertamos el primer elemento, cualquiera sea el elegido, se crea un recuadro con líneas
entrecortadas dentro del cual se pondrán todos los demás elementos del formulario. Dentro de este
recuadro se crean dos elementos adicionales: dos botones que se colocan al final del formulario, uno
de enviar y otro de restablecer, es decir, borrar todo lo que se tiene escrito en el formulario.
El formulario hay que crearlo dentro del rectángulo con línea entrecortada. Para ello, se van
creando los espacios necesarios y poniendo los títulos que queramos a los campos.
El primer paso sería pensar los campos que queremos crear y colocarlos en el formulario con un
nombre. Pero estos nombres son los que vería el visitante de nuestra página. Una vez creado el
formulario tenemos que ir dándoles los nombres que queramos que aparezcan cuando recojamos los
resultados.
3) Colocar delante del primer cuadro te texto Apellido, a fin de que sea el nombre que vea el
visitante.
4) Con el botón secundario del menú contextual ir a la opción PROPIEDADES DE CAMPO DE
FORMULARIO..., y en Nombre: colocar el nombre con el cual recibiremos la información.
También aquí podremos colocarle un Valor inicial, el cual aparecerá en le cuadro de texto
cuando el formulario sea cargado por primera vez o al tocar el botón Restablecer. Podemos
limitar la cantidad de caracteres en Ancho de caracteres. Y si no quisiéramos que se vea el
contenido podemos elegir la opción de Contraseña, y solo se verán asteriscos.
Página 17 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
5) Con el botón secundario del menú contextual ir a la opción VALIDACIÓN DE CAMPO DE
FORMULARIO aquí podremos elegir el Tipo de dato: por ejemplo si es texto, número, etc. Y
modificar algunas características que respectan a cada tipo de dato.
6) Seleccionar el texto Apellido y su correspondiente cuadro de texto, e ir a INSERTAR –
FORMULARIO – ETIQUETA. Las etiquetas se utilizan para hacer preguntas, permiten a los
visitantes completar más fácilmente los formularios, ya que por ejemplo en lugar de hacer
clic en un elemento como un cuadro de texto también podrá hacer clic en la etiqueta y le
dará la misma posibilidad de completar el cuadro de texto.
7) Inventar una pregunta y escribir más de 3 respuestas posibles, esta pregunta puede tener
como respuesta correcta una sola opción, varias o ninguna, para esto utilizar delante de cada
respuesta una casilla de verificación: INSERTAR – FORMULARIO – CASILLA DE
VERIFICACIÓN.
8) Inventar otra pregunta y escribir más de 3 respuestas posibles, esta pregunta puede tener
como respuesta correcta una sola opción, para esto utilizar delante de cada respuesta un
botón de opción: INSERTAR – FORMULARIO – BOTÓN DE OPCIÓN.
9) Agregar otra pregunta la cual se contestara utilizando un menú desplegable, los menús
desplegables tienen un propósito similar al de los botones de opción, ya que permiten al
visitante seleccionar una de varias opciones. Insertamos este elemento: INSERTAR –
FORMULARIO – MENÚ DESPLEGABLE. Al insertarlo este menú estará vació, para agregar
las opciones debemos ir con el botón secundario del menú contextual a la opción
PROPIEDADES DE CAMPO DE FORMULARIO..., y con el botón agregar y escribiendo
todas las opciones que queremos darle a este menú.
10) Los botones de comandos (INSERTAR – FORMULARIO – BOTÓN DE COMANDO), se
pueden agregar si se ha eliminado el botón de Enviar o Restablecer, pero también se pueden
crear botones para utilizarlos de hipervínculos, y que abra otra página o sitio, pero también
se utilizan muchas veces para crear un botón de ayuda el cual carga una página en la cual se
explica como llenar el formulario.
11) La Opción INSERTAR – FORMULARIO – IMAGEN se utiliza para cambiar el aspecto de un
botón al de una imagen.
12) El último paso en la creación del formulario es decidir donde se va a poner toda la
información reunida. Contamos con las siguientes opciones:




Enviarla como correo electrónico a una dirección especifica.
Almacenarla en un archivo del Web.
Almacenarla en una base de datos del Web.
Enviarla a un programa que maneje formularios en el servidor.
Dentro del formulario haciendo un clic con el botón secundario del menú contextual elegimos
PROPIEDADES DE FORMULARIO.
Para guardar los datos del formulario en un archivo, especifique el nombre y la carpeta donde
estará almacenado, Si el archivo no existe cuando alguien envié el formulario se creara
automáticamente.
Página 18 de 19
Diseño de páginas y sitios web - Microsoft FrontPage
Otra forma es, llamar a un programa ubicado en el servidor Web, que pueda leer los datos y
hacer algo con ellos, la mayoría de estos programas solo envían los datos a direcciones de correo
electrónico especificada.
Página 19 de 19