Curso Front Page Parte I

Curso de iniciación al diseño web de
expertosdelweb.com
Microsoft
F r o n t P a g e 2000
www.expertosdelweb.com
http://www.expertosdelweb.com/
Prohibida la copia o reproducción - Todos los derechos reservados
1. Presentación del programa............................................................................................................. .....3
2. Crear una web...................................................................................................................... .................4

Diseñando webs con Microsoft Frontpage 2000 www.expertosdelweb.com
3. La primera página................................................................................................... ............................5
4. Propiedades de página..................................................................................................................... ....6
5. Las tablas y las celdas..................................................................................................... ....................9
6. Ejercicio 1: primera parte................................................................................................... ................11
7. Los hipervínculos............................................................................................................ ...................13
8. Los marcadores................................................................................................................ ..................15
9. Ejercicio 1: segunda parte........................................................................................... ......................16
10. Las imágenes.................................................................................................................... .................17
11. Imágenes de fondo................................................................................................... .........................20
12. Crear la estructura de la web................................................................................................ ............22
13. Navegación automática........................................................................................................... ..........23
14. Los temas........................................................................................................................... ................25
15. Páginas de marcos......................................................................................................... ...................26
16. Ejercicio 1: tercera parte................................................................................................... ................30
17. Mailto........................................................................................................................ ..........................31
18. Los formularios........................................................................................................................... .......32
19. Ejercicio.................................................................................................................................... ..........35
20. Las hojas de estilo..................................................................................................................... ........40
21. Html dinámico.................................................................................................................. ..................42
22. Publicar en la Red...................................................................................................................... ........43
23. Como insertar sonido (y video)...................................................................................... ..................48
245. Java Scripts................................................................................................................................ ......54
25. Cómo hacer archivos que se puedan bajar desde una web................................... .......................55
26. Cómo crear archivos .zip y .exe con WinZip................................................................ ...................57
1. Presentación del programa

Las páginas web están basadas en los que se llama el hipertexto. Word, por ejemplo, es
un procesador de textos y el producto final está previsto para imprimirlo. Se trata de un
texto lineal, es decir, que se comienza por la primera línea del primer párrafo y se acaba
en la última línea del último párrafo. En el hipertexto no hace falta seguir el documento de
forma lineal, sino que se establecen saltos (hipervínculos) de forma que cada vez que
encontramos alguno de ellos podemos ir a otro sitio de la página. Por esta razón son
documentos que se crean para ser vistos en pantalla.
2
Las páginas web sirven para preparar materiales en este formato y ser utilizados con los
navegadores de Internet y también para ser publicados en Internet.
Frontpage es del grupo de Microsoft Office y en la versión 2000 aparece junto con Word,
Access, Excel, etc. El entorno que ofrece es muy parecido a Word y se trabaja igual en
líneas generales. Ya iremos viendo las opciones que puedan ser diferentes.
Hasta hace poco las páginas web había que hacerlas escribiendo el código html y
comprobando el resultado en un navegador. Pero con el tiempo fueron apareciendo
programas wysiwyg (what you see is what you get), es decir, que se puede trabajar
directamente sobre los resultados finales.
En la creación de páginas web Frontpage 2000 es uno de estos programas que nos
permite trabajar directamente sobre los resultados finales. También sigue manteniendo la
posibilidad de trabajar con el código, que es necesario cuando se trabajan con opciones
más avanzadas en la creación de páginas web como, por ejemplo, con javascript.
En las tres pestañas que aparecen en la parte inferior de la ventana de trabajo podemos
ver:
• Normal: Es el modo edición de trabajo en la que se trabaja la página y todas las
modificaciones que necesite.
• HTML: Es donde aparece todo el código de la página y que podemos también
modificarlo. Frontpage va creando el código de forma automática.
• Vista previa: Es el resultado de la página, es decir, tal como se vería en Internet
Explorer, ya que ambos programas pertenecen a Microsoft. Este mismo resultado
lo podemos ver directamente en el navegador con el icono .
La forma en que funcionan las páginas es a través del código, que es ASCII. Este código
es el que viaja por las líneas telefónicas y cuando llegan al navegador de un ordenador,
éste lo interpreta y muestra los resultados. Nosotros vamos a trabajar en modo normal,
pero para quienes les interese profundizar en el lenguaje html pueden encontrar en
Internet manuales completos.
3
2. Crear una web

Para crear una web hay ir a Archivo / nuevo / web. Se nos abre la siguiente ventana:
En esta ventana aparecen diferentes asistentes para crear o importar webs. Para verlos
cómo funcionan, cuando se tenga tiempo uno puede dedicarse a probar. Nosotros vamos
a seleccionar la última de las opciones que se nos ofrece que es un "Web vacío".
En la ventanita de la derecha donde pone "Especifique la ubicación del nuevo Web"
hay que elegir el lugar donde queremos tener la(s) página(s). Para ello habrá que crear
las carpetas que queramos para contener la página. Lo que aparece después de la última
barra (\) es el nombre que le ponemos a nuestra página.
Cuando hayamos escrito la ubicación deseada, aceptamos y en unos momentos
Frontpage crea la estructura mínima necesaria para la web. Esto lo podemos ver
haciendo click sobre el icono , que se encuentra debajo de insertar. Este icono abre y
cierra una partición de la pantalla en la que podemos ver la lista de carpetas y archivos
que forman la web. La estructura básica es la siguiente:
Al principio aparece la ubicación que hemos dado a la
página y después dos carpetas vacías. La llamada
"images" es para guardar todas las imágenes. Y la
llamada _private es para guardar cosas que no se
publicarán en Internet.
Por supuesto podemos cambiar el nombre de las carpetas, eliminarlas, etc.. simplemente
situándonos encima de la carpeta o de la página web y con el botón derecho del ratón
seleccionar la opción deseada.
4
3. La primera página.
Cuando creamos la web, directamente se nos queda en pantalla una página nueva para
empezar a trabajar. Al igual que en Word, Frontpage va dando a las páginas nuevas que
creamos el nombre de página_nueva 1, 2, 3, etc., hasta el momento que la guardamos
que es cuando hay darle el nombre que queramos.
Al guardar la página, que lo podemos hacer al principio, Frontpage nos va a pedir un
nombre de archivo y además un nombre de título de página. Al dar a guardar se nos abre
la siguiente ventana:
En esta pantalla hay que dar un nombre de archivo y en "Cambiar..." un título de página.
El nombre de archivo tiene que respetar ciertas reglas:
• No se admiten espacios en blanco, sí guiones bajos.
• Sólo se admiten letras del alfabeto inglés, es decir no se admiten ni eñes ni

acentos.
• Es mejor no utilizar mayúsculas porque algunos servidores Unix dan problemas.
En el título se puede utilizar cualquier cosa: espacios, eñes, acentos, mayúsculas, etc.
La primera página de la web, es decir, desde donde se parte para navegar por toda ella,
siempre se guarda con el nombre de index, home o defaul. Frontpage utiliza el nombre
de index.
5
4. Propiedades de página
Tenemos que tener en cuenta que el diseño de páginas web, está pensado para
mostrarse en pantalla, por lo que es importante trabajar los colores y los fondos de página
y que estos no sean de colores muy vivos, sobre todo si vamos a escribir bastante texto,
porque esto cansa la vista de nuestros visitantes y probablemente terminen por
abandonar nuestro sitio web. Esto es bastante importante a la hora de diseñar webs.
En Frontpage para acceder a las propiedades de cualquier elemento hay que pulsar con
el botón derecho sobre el elemento y nos aparece una ventana con la opción deseada.
Así, si pulsamos sobre cualquier parte de la página con el botón derecho podremos
seleccionar propiedades de página, que nos abrirá la siguiente ventana:
Si seleccionamos la segunda pestaña (fondo), vemos que podemos seleccionar para el

fondo de la página en primer lugar alguna imagen. Si la imagen es pequeña, ésta se
repite indefinidamente como fondo de la página. Pero esto lo veremos más detenidamente
cuando hablemos de imágenes. Normalmente una página se diseña a 800 Pixels de
ancho x 600 Pixel de alto, aunque también podemos hacer paginas con tablas e indicarle
el porcentaje que queremos que ocupe el contenido de la pagina en pantalla, sea cual sea
el tamaño de pantalla que tenga establecido nuestro visitante: 640x480, 800x600 o
1024x768 pixeles. De este modo, el contenido se adapta al área de pantalla de forma
automática.
Las otras opciones que vemos son seleccionar el color de fondo, de texto y de
hipervínculos (enlaces a otras paginas).
Para seleccionar un color pulsamos sobre el botón que aparece a la derecha de cada
opción y nos muestra la siguiente ventana:
6
En esta ventana se nos muestra una paleta de 16 colores y

aquellos que hemos ido guardando para utilizarlos en otras
ocasiones.
Si pulsamos sobre más colores se nos abre otra ventana con
256 colores como el que se muestra en el siguiente en el
dibujo siguiente.
En esta ventana podemos seleccionar uno de los colores que aparecen, pero si aún
queremos más colores podemos pulsar sobre el botón que pone "personalizado" y se nos
abre otra ventana con 16.000.000 de colores como aparece en el siguiente dibujo o
también seleccionar... un color que se encuentre en pantalla, utilizando el cuentagotas.
7
Aquí seleccionamos un color y en la barra vertical de la derecha se puede seleccionar el

matiz de ese color. También se pueden memorizar los colores si pensamos que vamos a
utilizarlos posteriormente.
Una vez seleccionado un color, aceptamos todas las ventanas y el color lo tenemos
disponible en la página.
Hay que tener en cuenta que para fondo se utilizan colores suaves donde destaque el
texto, o colores oscuros con textos en color claro.
Las otras opciones de propiedades de página, no vamos a trabajarlas excepto la pestaña
siguiente que son los márgenes. Quien quiera establecer unos márgenes diferentes
puede establecerlos desde ahí, indicando por ejemplo 0 y 0 al margen superior e
izquierdo, activando las casillas de verificación. Esta opción es recomendable cuando
vayamos a diseñar web paginas web complejas mediante tablas.
5. Las tablas y las celdas
8
Para poder colocar los diferentes elementos que componen la página, por ejemplo, un
texto y a su lado una imagen, tenemos que recurrir a las tablas, que normalmente son
invisibles.
Las tablas funcionan igual que en Word. Podemos insertar una tabla utilizando la opción
tabla / insertar, el icono o las herramientas de la barra de tablas.
Cuando insertamos una tabla, hay que tener en cuenta que como las páginas web están
diseñadas para pantalla hay que tener cuidado con el ancho de la tabla para que no sea
mayor que el de la pantalla. El área de pantalla más común en un monitor es el de
800x600 pixeles, por lo tanto convendría optar por diseñar una tabla de 780 píxeles de
ancho, o bien 100% en porcentaje. Los píxeles son una medida que se utiliza en los
ordenadores y son unos cuadraditos muy pequeños que se ven cuando se aumenta
mucho una imagen.
Vamos a insertar, por ejemplo, una tabla de dos filas y dos columnas:
Con el botón derecho pulsamos dentro de la tabla, seleccionamos propiedades de tablas

o bien las propiedades de la celda donde se ha pulsado el botón derecho.
Nos aparece una ventana como la siguiente:
Vemos que en la parte derecha aparece la opción de especificar ancho en píxeles y

porcentaje. Si, por ejemplo, aplicamos un 100% de porcentaje, la tabla ocupará toda la
pantalla del que lo vea, tenga la resolución que tenga su ordenador. Pero ocurrirá que los
textos que pongamos y los gráficos se deformarán para adaptarse a ese ahco y por lo
tanto no mantendrán el aspecto unfificado. En cambio si elegimos un ancho fijo en píxeles
el tamaño de la tabla será siempre el mismo y se mantendrá el aspecto que le demos.
Esta última opción es la más utilizada por esta razón.
En alineación conviene elegir el centro porque siempre se situará la tabla en esta
posición. Si alineamos a la izquierda, por ejemplo puede ocurrir que si uno tiene una
9
resolución de pantalla más grande, que quede un espacio vacío muy grande en la parte
derecha.
Si ponemos los bordes a 0 (lo más común), la tabla no se verá en la vista previa aunque
se mostrará una línea punteada indicándote que ahí se encuentra una tabla. Las otras
opciones de margen de celdas y espaciado entre celdas lo podemos probar poniendo por
ejemplo 25 y viendo lo que pasa.
También podemos elegir un color de fondo para la tabla diferente al fondo de la página o
una imagen. Todo esto funciona igual que para las páginas.
Si pulsamos con el botón derecho sobre una celda en concreto y seleccionamos
propiedades de celda aparecerá una ventana como esta:
Aquí vemos una serie de opciones para esta celda. Vemos por ejemplo que cada celda
puede llevar una imagen o un color de fondo diferente al resto. Podemos probar las
diferentes opciones para ver cómo funcionan.
Para trabajar con tablas es conveniente tener visible la barra de herramientas de tablas.
Para ello, al igual que en Word, pulsamos con el botón derecho sobre cualquiera de las
barras de herramientas que tengamos en la parte de arriba de la pantalla y seleccionamos
"tablas", que se nos muestra de la siguiente manera:
Desde esta barra se pueden añadir y quitar celdas, unirlas, justificar verticalmente, e
incluso dibujarlas. Para esto último, primero cree la tabla más general y luego vaya
creando las subdivisiones dentro de ella.
6. Ejercicio 1: primera parte

Vamos a aplicar los conocimientos que ya tenemos. Si no hemos creado una web la
creamos, y si la tenemos vamos a utilizarla para el siguiente ejercicio.
10
Se trata de crear una pequeña web de una zapatería que vende zapatos de distinto tipo.
Para ello con el icono de página nueva vamos a crear cuatro paginas que vamos a
necesitar según el siguiente esquema:
Zapateria “Tacones
Lejanos”
Presentación
Mocasines Xxxxxxxxxxxx
xxxxx
Botas Xxxxxxxxxx x
x x x x xxxxx
Zapatos x x x x xxxxxx
xx x xxxx xx.
Página de Página de Página de

mocasines botas zapatos
La primera la guardamos con el nombre de index y las otras paginas como mocasines,
botas y zapatos.
En las cuatro ponemos en la parte de arriba y centrado con letras grandes los nombres
que vemos en el esquema. Buscamos también un color de fondo de página, color de letra
y de enlaces que nos parezcan convenientes.
En la index tenemos que crear una tabla con borde 0 donde aparezcan los diferentes tipos
de zapatos y la presentación de la tienda donde se cuenta que tiene unos productos de
primera calidad. Si queremos podemos dar un fondo diferente a la celda de presentación.
La tabla tendría una estructura como la siguiente.
11
La alineación vertical de la tabla es centrada por defecto pero si queremos que el texto
aparezca al comienzo de la celda tenemos que utilizar los iconos de alineación vertical en
las herramientas de tabla que son:
Una vez llegados a este punto vamos a pasar al punto siguiente que es cómo se crean los
hipervínculos, es decir, las uniones entre páginas.
7. Los hipervínculos
Los hipervínculos es lo que nos permite establecer los saltos de una página a otra. El
proceso es muy sencillo, se selecciona con el ratón el trozo de texto o la imagen -haga un
clic en ella- que queremos que salte y pulsamos el icono de hipervínculo y se nos
abre una ventana como la siguiente:
12
Pulsamos sobre la página a la que queramos ir y aceptamos. Ya está el vínculo creado.

Se pueden vincular también las imágenes de la misma manera, se hace click sobre la
imagen y se sigue el mismo proceso.
Es importante para que en la vista previa tome efecto todo lo que hacemos, que vayamos
guardando los cambios.
Los hipervínculos los podemos ir viendo en la vista previa. Si queremos verlos en la vista
normal, tenemos que mantener pulsada la tecla control y pulsar sobre el hipervínculo.
Hay veces que la vista previa no funciona correctamente, entonces se aconseja recurrir
directamente al Explorer pulsando sobre el icono .
No olvide incluir algún hipervínculo o enlace en cada una de las tres paginas a la principal
que como hemos dicho ha de llamarse index o home
8. Los marcadores
Los marcadores son hipervínculos que se establecen dentro de una misma página o a
una parte en concreto de otra página. Por lo tanto, sirven para navegar dentro de una
página o bien para saltar a otra página, pero no al principio, sino a un punto determinado
de la página. Normalmente se utilizan cuando la página contiene gran cantidad de
información. Su utilización le facilita la navegación a nuestros visitantes. Un ejemplo, sería
colocar un marcador que vaya del final de una página a la parte superior de esta con solo
hacer un clic.
13
Para crear un marcador se coloca el cursor donde queramos insertarlo, es decir donde
queremos que venga cuando se pulse en el hipervínculo. Por ejemplo si queremos que al
pulsar sobre la palabra arriba, que estará colocada al final de nuestra pagina, debemos
colocar el marcador en la parte superior de la página, para que al pulsar sobre esa
palabra, automáticamente, se venga al principio de la página. Para ello, primero
colocamos el cursor en el principio de la página y vamos a insertar / marcador y se nos
abre la siguiente pantalla:
Se le pone el nombre que se quiera y se acepta. Si hemos seleccionado una palabra, ésta
aparecerá subrayada y si teníamos el cursor en un espacio en blanco aparecerá un icono
como este:
Para saltar al marcador se selecciona el icono o el texto que queremos que enlace, por
ejemplo la palabra arriba que estará escriba al final de nuestra página y pulsamos sobre la
tecla de hipervínculos: y se nos abre la pantalla que ya conocemos:
14
Entonces, en la ventana que aparece junto a "marcador" seleccionamos el marcador

cuando el salto se produce en la misma página. Si es otra página a la que queremos
saltar, se selecciona primero la página con un click del botón izquierdo y después el
marcador que queremos de la página y que previamente lo hemos creado.
Ahora y para practicar, convendría crear una página con amplia información y construir un
marcador en el que estando al final de la pagina se pulse sobre un texto, por ejemplo,
“subir” y vaya directamente el navegador al principio de esta.
9. Ejercicio 1: segunda parte
15
Volvemos a retomar el ejercicio y vamos a vincular las páginas estableciendo las

siguientes relaciones:
Vamos a relacionar cada tipo de zapatos con su página. Dentro de cada página tiene que
haber una vuelta al index para no perder la navegación por la página, esto es muy
importante. A la vez vamos a relacionar las páginas entre sí. Para ello vamos a escribir el
texto como aparece en el esquema o también podemos utilizar imágenes para ello, puesto
que los hipervínculos pueden hacerse con imágenes también. Es muy conveniente para el
diseño de páginas profesionales, que se aprenda el curso de Adobe photoshop o de
Macromedia fireworks que se encuentran dentro de nuestro Master. Para ello, vayan a:
www.expertosdelweb.com/info.htm y podrán encontrar amplia información sobre el Master.
10. Imágenes
16
Las imágenes en las páginas web funcionan de dos maneras. Como imágenes normales
que insertamos dentro de la página y como imágenes que se utilizan como fondo de
página o de tabla.
En este apartado vamos a ver las imágenes normales y en el siguiente apartado las
imágenes de fondo.
Las imágenes funcionan más o menos como en Word. En las páginas web sólo se utilizan
los formatos siguientes:
• GIF. Para dibujos e imágenes con pocos colores.
• JPEG. Para fotos e imágenes que requieren más calidad.
Cualquier imagen que introduzcamos, Frontpage lo transformará en uno de estos dos

formatos. Cualquier imagen que veamos en Internet podemos copiarla pulsando sobre la
misma con el botón derecho y seleccionando copiar y pegándola donde queramos. Luego,
por supuesto cuando se guarde la página, FP2000, nos pedirá donde hay que ubicarlas y
con que nombre. Es conveniente ponerlas en la carpeta “images” de nuestro sitio web.
Si vemos imágenes interesantes se pueden guardar en una carpeta, para cuando las
podamos necesitar. Estas imágenes se pueden recuperar mediante insertar / imagen /
desde archivo. Esta opción nos abre una pantalla como la siguiente:
En esta pantalla se nos abren las carpetas que tenemos en nuestra web. Si pulsamos
sobre "images" se nos mostrarían todas las imágenes de la misma. Pero si lo hemos
guardado en otra carpeta debemos pulsar sobre el icono que tiene una lupa sobre una
carpeta. Esto nos abre todas las carpetas que tenemos en nuestro ordenador . Con
este icono buscamos la carpeta y la imagen igual que lo hacemos con el explorador de
Windows. Es recomendable el utilizar este botón, porque a veces no se actualizan
correctamente las últimas imágenes con las que hemos trabajado.
Hay imágenes que son estáticas, pero las imágenes GIF pueden ser animadas como en
el ejemplo siguiente:
17
Estas imágenes funcionan exactamente igual que las otras, pero en modo normal no
veremos la animación. Para ello tendremos que verlas en vista previa o en el navegador
de Internet. En Internet hay muchos sitios que nos ofrecen GIFs animados. Para
encontrarlas sólo tenemos que ir a un buscador y poner las palabras claves para que nos
encuentre muchos sitios con este tipo de imágenes. Esto vale también para imágenes de
fondo y cualquier otro tipo de imágenes.
Frontpage también tiene sus propias imágenes que para utilizarlas tenemos que ir a
insertar / imagen / imágenes. Esto nos abre una colección de imágenes preinstaladas
dentro del programa. Seleccionamos una carpeta y la imagen que queramos utilizar y se
nos abre un pequeño menú en la que la primera opción es "insertar clip". Pulsamos sobre
esa opción y la imagen se nos insertará en donde teníamos colocado el cursor.
Una vez que hemos insertado una imagen pulsamos con el botón derecho sobre la misma
y seleccionamos propiedades de imagen y se nos abre la siguiente ventana:
Es esta ventana vemos las diferentes opciones que podemos utilizar con la imagen. Si
utilizamos el icono con una interrogación que aparece arriba a la derecha y vamos
pulsando sobre las diferentes opciones, nos irá explicando para qué sirven.
Donde pone “texto” quiere decir que lo que escribamos ahí aparecerá sobre un fondo
amarillo cuando apoyemos el cursor sobre la imagen. Esto sólo se verá en vista previa o
en el navegador. Esto es muy útil para favorecer la navegación o facilitar información al
visitante. El siguiente dibujo presenta un ejemplo de esta utilidad. Apoya el cursor sobre la
imagen y verás que aparece un texto.
18
Cuando seleccionamos la imagen con un click del botón izquierdo vemos que en la parte
inferior de la ventana activa aparece la barra de herramientas de imagen. En general las
opciones que tiene son las mismas que en Word, pero hay un par de opciones que son
diferentes.
El icono nos permite establecer un color transparente de la imagen. Esto es una

propiedad de las imágenes GIF. Seleccionamos el icono y pulsamos con el puntero el
color que queremos hacer transparente y este desaparece. Utilizando la última imagen del
hipopótamo, si le hacemos transparente el blanco quedaría de la siguiente manera.
Esto es útil muchas veces para integrar más las imágenes en el documento.
La otra opción que es característica de Frontpage es el grupo de iconos que no

nos crean figuras geométricas dentro de la imagen, sino que lo que hacen es lo que se
llama mapear la imagen. Esto quiere decir que, por ejemplo, si tenemos una imagen de
España dividida en provincias, si utilizamos estos iconos podemos hacer que cada parte
de la imagen, por ejemplo las provincias, puedan vincularse a páginas diferentes. El área
de hipervínculo lo establece de forma rectangular, circular o irregular. En cuanto
mapeamos una parte de una imagen vemos que directamente se nos abre la ventana de
hipervínculos para establecer el salto a la página que queramos.
Aparte de utilizar imágenes creadas por otros, para crear nuestras propias imágenes se
suelen utilizar los procesadores de imágenes como Photoshop, Paint Shop Pro o
cualquiera de los muchos que hay en el mercado. Pero, si controlamos un poco el Office
podemos utilizarlo también para crear imágenes. Así si utilizamos el WordArt para crear
un titular en Word, sólo tenemos que copiarlo y pegarlo en Frontpage para usar la imagen.
Lo mismo ocurre con Power Point o Publisher, aunque aconsejamos macromedia
fireworks o Adobe Photoshop.
11. Imágenes de fondo

Las imágenes también se pueden utilizar para crear un fondo a la página. Si
seleccionamos Propiedades de página con el botón derecho sobre la página / fondo /
imagen de fondo / examinar, vemos que se nos abre la siguiente ventana:
19
Como hemos visto antes, la primera ventana que se nos abre es en la que aparece
nuestra web. Aquí podemos seleccionar una imagen, pero si pulsamos sobre "imágenes"
accederemos a las imágenes prediseñadas que tiene Frontpage. Si la imagen la tenemos
guardada en otra carpeta tendremos que pulsar sobre
Esto nos crea una imagen de fondo repetida indefinidamente. Por eso las imágenes de
fondo siempre hay que seleccionarlas bien para que no maten el texto o el resto del
documento que queremos transmitir.
Lo mismo que decimos de imagen de fondo de una página, sirve para imagen de fondo de
una tabla utilizando para ellos las propiedades de tabla. La ventaja de ponerlas como
fondo es que podemos escribir delante, quedando la imagen detrás del texto.
Así si utilizamos como imagen de fondo de una tabla el último icono que hemos usado
nos quedaría de la siguiente manera.
Vemos que no es una imagen muy apropiada para un fondo. Pero si utilizamos una
imagen de fondo de las que ya trae preparadas Frontpage nos quedaría así.
20
Estas son imágenes pequeñas que se repiten indefinidamente.

Hay otras imágenes que son estrechas y alargadas, más que toda la pantalla y crean
efectos de una banda lateral porque se repiten verticalmente.
Estos fondos se suelen llamar laterales y se pueden encontrar en Internet igual que las
demás imágenes. Se suelen utilizar bastante y la parte izquierda se utiliza a modo de
menú. El texto y las imágenes se colocan utilizando una tabla con borde 0 y justificada a
la izquierda. Estas imágenes son muy útiles puesto que ocupan muy poco y este aspecto
es muy importante cuidarlo a la hora de diseñar páginas web. Es conveniente no superar
los 40 segundos en la carga de las páginas.
12. Crear la estructura de la web

Lo primero que hay que hacer para tener clara la estructura de la web es coger papel y
lápiz y hacernos un dibujo o gráfico donde veamos claro las páginas que necesitamos.
Una vez que tengamos claras las páginas necesarias, se pueden crear páginas nuevas y
guardarlas con el nombre de archivo y título que queramos. Esto es lo que hemos visto
hasta aquí. Ahora vamos a ver otra forma de crear la estructura de la web y que nos
permitirá la utilización de navegación automática.
21
Nos vamos al menú superior: ver / barra de vistas / exploración:

Este icono nos abre una pantalla azul en la que se ve que existe sólo una página, que es
la index y que tiene como título "Página principal".
Si la web es nueva, podemos ir creando las páginas nuevas que queramos pulsando con
el botón derecho sobre la página y seleccionando página nueva. Esto nos crea una
página en un nivel inferior a la que hemos seleccionado para crear una página nueva. En
el ejemplo que hemos trabajado de la zapatería nos quedaría de la siguiente manera:
Lo único que al principio nos aparecerá como página_nueva 1, 2 y 3. Para ponerlas un

nombre que queramos utilizar, pulsamos con el botón derecho sobre la página y
seleccionamos cambiar nombre. Una vez creadas las páginas de esta manera se guardan
automáticamente con el nombre que les hayamos puesto.
Si la web está creada, sólo tenemos que arrastrar las páginas desde la lista de carpetas
pulsando sobre el nombre de archivo con el botón izquierdo y sin dejar de pulsar,
arrastrarlo a la pantalla azul y ponerlo en el nivel que queramos.
Así tenemos la estructura de la web creada.
13. Navegación automática

Una vez que hemos creado las páginas con el icono "exploración" de la barra vistas, o
que hayamos colocado las páginas creadas con anterioridad formando un árbol donde
unas páginas dependen de otras, podemos crear una navegación automática. Esto es
interesante cuando queremos evitarnos problemas en webs que sean complejas de forma
que el visitante nunca se quede colgado en la web.
Hay muchas webs que utilizan esta navegación automática, pero hay que decir que si no
se utiliza con cuidado el aspecto que puede dar es poco profesional aunque en principio
parezca lo contrario. Lo aconsejable es que si ya sabemos utilizar los hipervínculos, los
creemos nosotros mismos y no nos ayudemos de esta opción.
22
Una vez creado el árbol de la web abrimos cualquier página haciendo doble click sobre la
misma. Pulsamos con el botón derecho sobre la página y seleccionamos bordes
compartidos. Se nos abre la siguiente pantalla:
Seleccionamos las opciones que vemos seleccionadas en este ejemplo y aceptamos.

Vemos que en la página aparecen el título de página y los nombres de las diferentes
páginas. En el ejemplo que estamos trabajando de la zapatería aparecería de la siguiente
manera.
La página donde estamos aparece en negro y las otras en azul. Vemos también que
aparte de las páginas del mismo nivel aparece [Principal], que es la vuelta al index o
página de inicio.
Los niveles de navegación se pueden variar pulsando sobre la barra de navegación con el
botón derecho y seleccionando propiedades de la barra de navegación. Entonces se nos
muestra la siguiente ventana:
23
Aquí se puede elegir los diferentes niveles de navegación, la página principal, si los
botones están en horizontal o en vertical, etc.
Prueben las distintas opciones y hay que acordarse siempre de la opción “Edición +
Deshacer” para recuperar hasta donde teníamos hecho correctamente, o bien pulsen en
el siguiente icono .
14. Los temas

Los temas son un conjunto de opciones que nos ofrece Frontpage para dar un formato a
nuestras páginas. Este formato supone una serie de colores de los botones de
navegación automática, fondo, texto, etc.
Para aplicar un tema se pulsa con el botón derecho sobre la página y se selecciona tema.
Nos aparece una ventana como la siguiente:
24
Al principio aparece la pantalla en blanco y dice que "esta página no utiliza tema", pero en
cuanto seleccionamos algún tema como en el ejemplo de arriba aparece en qué consiste.
Si aplicamos, por ejemplo, este tema en el ejercicio que estamos trabajando, quedaría de
la siguiente forma:
Se puede aplicar un tema diferente a cada página, pero hay que tener cuidado con esto
porque el efecto puede ser un poco “chabacano” por lo que es mejor utilizar un tema para
toda la web.
15. Páginas de marcos

Se llaman páginas de marcos a las que nos muestran varias páginas a la vez
permaneciendo una zona fija, normalmente el mení de opciones de la izquierda o en la
parte superior. Lo que realmente se guarda, aparte de las páginas, es una vista de la
pantalla con diferentes divisiones en las que cada una se ve una página diferente.
Podemos ver un ejemplo en el ejercicio 2, donde se nos muestra una división vertical. En
la parte de la izquierda se nos muestra un menú, que al pulsar sobre cada apartado nos
va cambiando la pantalla de la derecha.
25
Este mismo efecto se suele hacer con un fondo lateral, pero sabemos que es una página
de marcos porque el texto de cada parte de la pantalla se mueve de forma independiente
al arrastrar verticalmente la barra de desplazamiento.
Para crear una página de marcos hay que ir Archivo / nuevo / página y se selecciona la
pestaña de páginas de marcos. Entonces se nos muestra la siguiente ventana:
Si pulsamos sobre cada tipo de página vemos las diferentes divisiones que podemos
crear. Nosotros vamos a seguir el ejemplo más sencillo, que es el primero, que se llama
contenido.
Al aceptar nos aparece la pantalla dividida de la siguiente forma:
26
Aquí se nos ofrece la posibilidad de seleccionar una página para que se vea en esa parte
de la pantalla, y si no la tenemos creada, de crear una nueva.
También observamos que las tres vistas que teníamos hasta ahora se han multiplicado
para tener más opciones para poder trabajar con varias páginas a la vez.
A la hora de guardar nos va a pedir, si no lo hemos hecho aún, guardar cada una de las
dos páginas que componen esta vista y el nombre que queremos dar a toda la vista para
que se vean las dos ventanas. Frontpage nos va marcando en azul lo que va a guardar.
En el caso de la vista completa aparece de la siguiente manera:
27
Las páginas las podemos ver y trabajar de forma individual en pantalla completa, pero
siempre que accedamos a esta vista, veremos las dos páginas a la vez. Así, por ejemplo
si elegimos la página de botas para el marco derecho y otra con el menú de todos los
calzados a la izquierda nos podría quedar así:
Si ya tenemos creadas las tres páginas tenemos que enlazarlas para que al pulsar sobre
la palabra se nos abra sobre la ventana de la derecha. Para ello seleccionamos la palabra
y damos al icono de hipervínculo. En la pantalla que se nos abre seleccionamos con un
click con el botón izquierdo la página a la que se va vincular y después seleccionamos
marco de destino y se nos abre la siguiente ventana:
28
Seleccionamos la ventana de la derecha y aceptamos todo. Se procede así con todos los
hipervínculos que queramos ver en una ventana determinada.
Cuando hagamos una vuelta al index desde una página de marcos, tenemos que
seleccionar "toda la página" para que se nos abra toda la página, si no veríamos el index
en la ventana de la derecha.
29
16. Ejercicio 1: tercera parte

Ahora habría que aplicar las diferentes cosas que hemos visto. Vamos a aplicar diferentes
temas a las páginas y vamos a crear una página de marcos a la que se acceda desde la
index y se pueda volver al principio. La estructura sería la siguiente:
De la index se va a una página de marcos. Dentro de esta pagina se muestra el contenido

de cada una en la ventana de la derecha. Y hay un texto o icono que nos devuelve a la
index como pantalla completa.
Continue con la segunda parte del curso...
30

Curso Front Page Parte I

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso Front Page Parte I

Cargado por

Copyright:

Formatos disponibles

Curso de iniciación al diseño web de

1. Presentación del programa............................................................................................................. .....3

2. Crear una web...................................................................................................................... .................4

3. La primera página................................................................................................... ............................5

4. Propiedades de página..................................................................................................................... ....6

5. Las tablas y las celdas..................................................................................................... ....................9

6. Ejercicio 1: primera parte................................................................................................... ................11

7. Los hipervínculos............................................................................................................ ...................13

8. Los marcadores................................................................................................................ ..................15

9. Ejercicio 1: segunda parte........................................................................................... ......................16

10. Las imágenes.................................................................................................................... .................17

11. Imágenes de fondo................................................................................................... .........................20

12. Crear la estructura de la web................................................................................................ ............22

13. Navegación automática........................................................................................................... ..........23

14. Los temas........................................................................................................................... ................25

15. Páginas de marcos......................................................................................................... ...................26

16. Ejercicio 1: tercera parte................................................................................................... ................30

17. Mailto........................................................................................................................ ..........................31

18. Los formularios........................................................................................................................... .......32

19. Ejercicio.................................................................................................................................... ..........35

20. Las hojas de estilo..................................................................................................................... ........40

21. Html dinámico.................................................................................................................. ..................42

22. Publicar en la Red...................................................................................................................... ........43

23. Como insertar sonido (y video)...................................................................................... ..................48

245. Java Scripts................................................................................................................................ ......54

26. Cómo crear archivos .zip y .exe con WinZip................................................................ ...................57

1. Presentación del programa

2. Crear una web

• Sólo se admiten letras del alfabeto inglés, es decir no se admiten ni eñes ni

Si seleccionamos la segunda pestaña (fondo), vemos que podemos seleccionar para el

En esta ventana se nos muestra una paleta de 16 colores y

Aquí seleccionamos un color y en la barra vertical de la derecha se puede seleccionar el

5. Las tablas y las celdas

Con el botón derecho pulsamos dentro de la tabla, seleccionamos propiedades de tablas

Vemos que en la parte derecha aparece la opción de especificar ancho en píxeles y

6. Ejercicio 1: primera parte

Página de Página de Página de

Pulsamos sobre la página a la que queramos ir y aceptamos. Ya está el vínculo creado.

Entonces, en la ventana que aparece junto a "marcador" seleccionamos el marcador

9. Ejercicio 1: segunda parte

Volvemos a retomar el ejercicio y vamos a vincular las páginas estableciendo las

• JPEG. Para fotos e imágenes que requieren más calidad.

Cualquier imagen que introduzcamos, Frontpage lo transformará en uno de estos dos

El icono nos permite establecer un color transparente de la imagen. Esto es una

La otra opción que es característica de Frontpage es el grupo de iconos que no

11. Imágenes de fondo

Estas son imágenes pequeñas que se repiten indefinidamente.

12. Crear la estructura de la web

Nos vamos al menú superior: ver / barra de vistas / exploración:

Lo único que al principio nos aparecerá como página_nueva 1, 2 y 3. Para ponerlas un

13. Navegación automática

Seleccionamos las opciones que vemos seleccionadas en este ejemplo y aceptamos.

14. Los temas

15. Páginas de marcos

16. Ejercicio 1: tercera parte

De la index se va a una página de marcos. Dentro de esta pagina se muestra el contenido

Continue con la segunda parte del curso...

También podría gustarte