Este documento describe cómo agregar color, imágenes o música de fondo a una página web. Incluye instrucciones para elegir el color de fondo, agregar una imagen de fondo e insertar sonido de fondo. También cubre cómo insertar tablas, texto y marcadores de posición en una página web, así como cómo crear e insertar hipervínculos e imágenes.

1. Poner color, imágenes o música de fondo
1. Color de fondo
Podemos elegir el color de fondo de una página web siguiendo estos pasos:
Vamos al menú Formato y seleccionamos Fondo.
Nos sale la siguiente ventana:
Aquí podemos elegir el color de fond
2. Imagen de fondo
En la misma ventana de antes podemos elegir una imagen de fondo, en vez de un color de fondo. Normalmente se util
imágenes pequeñas, en formato gif o jpg. Tenemos que tener en cuenta que la imagen que elegimos, aunque sea pequ
no se va a aumentar hasta llenar la pantalla, sino que se va a repetir indefinidamente en forma de mosaico, como si fu
azulejos.
Vamos a ver algunas muestras:

2. Pincha en las imágenes para ver cómo queda una página web con esa imagen de fondo.
En internet podemos encontrar cantidad de fondos para páginas web. Por ejemplo:
http://www.graphicsbydezign.com/backgrounds.htm
http://www.webpersonal.net/fym/fondos_web.htm
http://www.zonagratuita.com/a-disenio/fondos_web_gratis.htm
Cuando encontramos en internet una imagen que nos gusta, tenemos que pinchar sobre ella con el botón derecho del
ratón y seleccionar Guardar imagen como... y guardarla dentro de nuestro sitio web, preferiblemente en la carpeta im
3. Sonido de fondo
En una página web podemos poner un sonido de fondo. El formato más utilizado es el sonido MIDI (archivos .mid) porq
ocupa muy poco espacio. De lo contrario la página podría tardar muchísimo en cargar, sobre todo para quien no tenga
banda ancha.
Podemos encontrar una gran cantidad de midis con el siguiente buscador:
http://www.vanbasco.com/ Aquí sólo tenemos que buscar por título, autor, tema o estilo y nos llevará a páginas con m
Cuando encontramos uno que nos gusta, hay que pinchar con el botón derecho sobre el enlace y seleccionar Guardar
destino como... entonces lo guardamos en alguna parte dentro de nuestro sitio web. No estaría mal crear una carpeta
"sonidos", igual que tenemos la carpeta images.
Una vez que tenemos el sonido guardado, tenemos que ponerlo de fondo en la página web, siguiendo estos pasos:
En el menú Archivo seleccionamos Propiedades. Nos saldrá esta ventana:

3. Donde pone sonido de fon
pinchamos en examinar,
buscamos el archivo de so
que tenemos guardado, lo
seleccionamos y damos a
Aceptar.
El texto y las tablas
1. El texto
Introducir texto en Frontpage es básicamente igual que en el Word, pero conviene tener en cuenta un par de aspectos
- No podemos (no debemos) elegir el tipo de letra que más nos guste. Hay que tener en cuenta que los usuarios
solamente podrán ver la página tal como la hemos diseñado en el caso de que tengan instalada en su ordenador la fue
que hemos utilizado. De lo contrario, su ordenador mostrará la página con cualquier otra fuente y los resultados puede
ser muy malos (puede aparecer todo descolocado, al ser un tamaño diferente). Por esto, en las páginas web se utilizan
las fuentes más comunes, como son: Arial o Times New Roman. Un consuelo: para los niños podemos utilizar la Comic
sin miedo. La tiene todo el mundo.
- La tecla Enter realiza un salto de párrafo, equivalente a dos líneas. Si queremos un salto de línea simple, tenemos q
pulsar la tecla de mayúsculas + la tecla Enter.
2. Las Tablas
Las tablas se utilizan muchísimo en las páginas web, lo que pasa es que normalmente son invisibles. Se utilizan para
organizar y distribuir los elementos de la página en el espacio: colocar un texto en varias columnas, poner un texto a la
derecha de una fotografía, etc.
Para comprender todo el potencial que nos ofrecen las tablas tenemos que tener en cuenta estas características:

4. - Dentro de las celdas de la tabla se pueden introducir todo tipo de elementos: texto, imágenes, etc.
- Se pueden establecer propiedades diferentes para cada una de las celdas (un fondo diferente, por ejemplo)
- Se puede insertar una tabla dentro de otra.
- Se pueden combinar celdas para adaptar el diseño a nuestras necesidades.
- Se pueden hacer tablas "invisibles": basta con poner Tamaño del borde = 0. Estas tablas "invisibles" se utilizan muchís
2.1. Insertar una tabla
Podemos insertar una tabla si vamos al menú Tabla y dentro de él seleccionamos insertar >
tabla.
Entonces nos sale la siguiente ventana, donde podemos ajustar las propiedades de la tabla que vamos a crear:
Primero elegimos el número de filas y de columnas. A continua
elegimos la alineación (normalmente elegiremos centrar, salvo
algún interés especial).
Posteriormente podemos especificar el ancho: si elegimos 100
porcentaje, la tabla generada ocupará todo el ancho de pantal
sea cual sea. Esto está bien, pero en algunos casos nos interesa
ancho fijo, para que no se nos descoloquen los elementos que
dentro (texto, imágenes, etc). Entonces introduciremos un núm
en píxeles. Hay que tener en cuenta que los monitores antiguo
tienen un ancho de 800 píxels, y los modernos de 1024, con lo
- Una tabla de ancho 750 píxeles ocupará casi todo el ancho
pantalla en un monitor antiguo. En uno moderno se verá
exactamente igual pero con más espacio libre a los lados.
- Una tabla de ancho 1000 píxeles se verá completa en un
monitor moderno pero no en uno antiguo.
A continuación elegiremos el tamaño y el color de los bordes. S
elegimos tamaño cero tendremos una tabla invisible, utilizada
colocar los textos y las imágenes.
A continuación podemos elegir un color o incluso una imagen d
fondo para la tabla. ¡OJO! Tiene que ser una imagen que esté
dentro del sitio web (preferentemente dentro de la carpeta im
No vale enlazar a una imagen que esté por ejemplo en Mis
Imágenes, ya que cuando publiquemos nuestro sitio web, esa

5. imagen se va a quedar en nuestro ordenador.
2.2. Ajustar las propiedades de una celda
Las celdas son cada una de las casillas que componen una tabla. Se pueden ajustar las propiedades de cada una de las
casillas individualmente. Esto nos permite poner un fondo diferente para cada una, por ejemplo. Esto se hace pinchand
con el botón derecho del ratón dentro de la celda, y seleccionando propiedades de celda. En la ventana que nos sale
podemos elegir el fondo, tamaño etc. Conviene ajustar la alineación horizontal y vertical, que es cómo queremos que s
presente el texto dentro de esa celda.
2.3. Combinar celdas
Parecerá que ni siquiera con las tablas conseguimos colocar todo donde queremos, pero eso normalmente se solucion
la opción combinar celdas:
Esto era una tabla de 3x3, con borde azul y fondo amarillo:
Esta celda más grande es el resultado de combinar dos celdas iguales a las de
arriba.
Para combinar celdas primero seleccionamos las que queremos combinar, arrastrando el ratón con el botón apretado
encima de ellas. A continuación vamos al menú Tabla > Combinar Celdas.
También se puede meter una tabla dentro de otra. Este sería el resultado si en la tabla anterior metemos otra de 3x3 e
primera celda:
Insertar un título en una página web
Si queremos poner un título bonito a nuestra página web tenemos un problema: No conviene usar tipos de fuente
extrañas. Para que la página web sea visible por todo el mundo debemos limitarnos a fuentes de uso general, como Tim
New Roman, Arial, Comic Sans o Tahoma.

6. En el FrontPage también disponemos de la herramienta WordArt que podremos usar siempre y cuando utilicemos las
fuentes mencionadas anteriormente. El wordart se inserta con el icono
Lo que sí que se puede meter sin problemas en una página web son imágenes, en formato .jpg o .gif. (Estos son los
formatos en los que se guardan las fotografías digitales). Así que la mejor solución será crear el rótulo con un program
tipo Corel, Photoshop, Paint, etc. y guardar el resultado como imagen jpg dentro de la carpeta images de nuestro sitio
A continuación sólo tendremos que insertar esa imagen en la página web, tal como veremos en posteriores capítulos.
Los hipervínculos
Hemos llegado por fín a la esencia de las páginas web: los hipervínculos.
Los hipervínculos son los enlaces que nos llevan de una parte a otra del documento, o de una página a otra. Se recono
porque al pasar sobre ellos el cursor se transforma en un dedo, que nos indica que ahí se puede "pinchar".
1. Tipos de hipervínculos
Este es un hipervínculo que nos lleva a un sitio web diferente. Si pinchas en él serás conducido a google.
Este es un hipervínculo que nos lleva a una página de este mismo sitio web. Si pinchas en él te llevará al índice.
Este es un hipervínculo que nos lleva a otra parte de esta misma página. Si pinchas aquí te llevará al final de este mism
documento.
Este hipervínculo está hecho sobre una imagen, no sobre texto. Si pinchas en la imagen también te llevará
google.
2. Crear un hipervínculo
Para crear un hipervínculo lo primero que tenemos que hacer es seleccionar el texto o la imagen sobre el cual tendrá
que pinchar los usuarios. Podemos seleccionar una palabra o una frase simplemente arrastrando el ratón sobre ella,
manteniendo el botón apretado. Las imágenes se seleccionan simplemente pinchando sobre ellas.
Una vez seleccionado el texto o la imagen, hacemos clic sobre ella con el botón derecho del ratón, y en el menú que
aparece seleccionamos hipervínculo. Entonces nos sale esta ventana:

7. Si queremos hacer un enlace a otro sitio web escribiremos su dirección URL en la casilla donde pone dirección. Así:
Si queremos hacer un enlace a otra página de nuestro sitio web, tenemos que buscarla en la lista de carpetas que nos
aparece en el centro.
3. Otros elementos
Antes de pinchar en aceptar podemos, si queremos, introducir la "información de pantalla". Se trata de un mensaje
explicativo que aparecerá sobre el hipervínculo cuando los usuarios pasen el ratón sobre él. Prueba a pasar el ratón so
el siguiente enlace, sin pinchar sobre él:
Google
Para introducir la información de pantalla tenemos que pinchar en en la ventana de "insertar
hipervínculo". Luego escribimos el texto que queramos y damos a aceptar.
También podemos elegir el marco de destino de nuestro hipervínculo. Es decir, podemos elegir si queremos que la pág
de destino aparezca en esta misma ventana o en una ventana nueva. Vamos a ver dos ejemplos:
Este hipervínculo abrirá google en esta misma ventana. Cuando aparezca, pincha en para volver a esta págin
Este hipervínculo abrirá google en una ventana nueva. Cuando aparezca la nueva ventana, la puedes cerrar en ,ye
página seguirá estando aquí.
Si no especificamos lo contrario, nuestros hipervínculos se abrirán en la misma ventana, como en el primer ejemplo. Si

8. queremos que se abran en una ventana nueva tenemos que pinchar en . Nos sale el siguiente
menú: . Seleccionamos nueva ventana y damos a Aceptar.
4. Los marcadores
Si queremos hacer un hipervínculo que nos lleve a otra parte de un mismo documento, primero tenemos que hacer
marcadores, lo cual veremos en el capítulo correspondiente.
Los marcadores
1. Definición
2. Insertar marcadores
3. Enlazar a los marcadores
1. Definición
Seguramente hemos visto alguna vez una página web que arriba del todo tiene un índice de los apartados y debajo tie
contenido. El ejemplo más cercano es esta misma página. Arriba tenemos el índice, y cada uno de los títulos es un
hipervínculo que nos lleva al correspondiente apartado dentro de esta misma página. A lo largo de la página también
tenemos otros hipervínculos que nos llevan de vuelta a la parte superior.
Hemos visto que para hacer hipervínculos tenemos que especificar a qué página web queremos que nos lleve el enlace
pero en este caso el hipervínculo nos tiene que llevar a un lugar de esta misma página. Para ello, antes de hacer los
hipervínculos tenemos que hacer los marcadores, que son marcas ocultas que definen zonas dentro de una página. Lo
ponemos donde queremos y luego al hacer los hipervínculos solamente tendremos que decir "llévame al marcador 1,
llévame al marcador 2, ..." (no con estas palabras, claro).
Volver arriba
2. Insertar marcadores
Para insertar un marcador primero ponemos el cursor en el lugar deseado (normalmente al inicio de un apartado).
Entonces vamos al menú Insertar > marcador y nos sale una ventana como esta:

9. Conviene poner un nombre al marcador que nos permi
identificarlo fácilmente. En este ejemplo he puesto
"definición" porque así sería el marcador correspondien
primer apartado de esta página.
Cuando insertamos un marcador nos aparecerá el símbolo en el lugar correspondiente. Este símbolo es para que
sepamos que ahí hay un marcador, pero no aparecerá en la página web publicada.
También podemos poner un marcador en la parte superior de la página y llamarlo top o arriba.
Volver arriba
3. Enlazar a los marcadores
Ya solo nos queda hacer los hipervínculos que nos lleven a esos marcadores. Para ello seguimos el procedimiento de h
un hipervínculo normal: seleccionamos el texto o imagen correspondiente, pinchamos encima con el botón derecho y
seleccionamos hipervínculo. En la ventana que nos aparece pinchamos en y nos sale la lista de marcadore
que hay en la página actual. Entonces seleccionamos el marcador deseado y ya está.
Volver arriba
Las imágenes
Uno de los elementos que más enriquecen los sitios web son las imagenes.
1. Insertar imágenes desde archivo
Cuando tenemos una imagen guardada (siempre que sea dentro del sitio web, preferiblemente en la carpeta images)

10. podemos insertarla en una página web de la siguiente manera:
Vamos al menú Insertar y seleccionamos Imagen > desde archivo
A continuación usamos la ventana de exploración hasta encontrar la imagen correspondiente. La seleccionamos y
pinchamos en Aceptar.
2. Insertar una imagen desde el catálogo de imágenes
Esta es una de las opciones más interesantes de FrontPage 2003. Si vamos a Insertar > Imagen > Imágenes Prediseñada
nos encontraremos con una ventana como esta:
Con esta opción podemos buscar imágenes entre unos catálogos online
amplísimos. En el ejemplo de esta imagen, he insertado la palabra "coleg
he pinchado en buscar. Entonces nos salen las miniaturas y sólo nos qued
elegir una y hacer doble clic para que nos la inserte en la página web.
Para utilizar las imágenes prediseñadas de FrontPage se requiere conexió
internet.
Cuando en una página web hayamos insertado imágenes de internet nos
ocurrir lo siguiente: al ir a guardar la página web (Archivo > Guardar) nos
aparecerá la siguiente pantalla:
Est
a
ven
tan
a
sirv
e
par
a
dec
irle
al
Frontpage en qué parte de nuestro propio sitio web queremos guardar la
imagen que hemos incrustado en la página. Es conveniente pinchar en
Cambiar carpeta... y seleccionar la carpeta images.

11. 3. Insertar una imagen desde internet
Si encontramos en internet una imagen que nos interese y cuyo uso esté permitido libremente, podemos insertarla en
nuestra página de la siguiente manera:
Navegando por internet, encontramos una imagen, pinchamos sobre ella con el botón derecho y seleccionamos Copia
Luego, en nuestra página web pinchamos con el botón derecho en el lugar deseado y seleccionamos Pegar.
Conozco un par de sitios que permiten copiar sus imágenes con la condición de citar la procedencia (incluyendo un enl
su página). Se trata de:
ARTIE: Con cientos de imágenes animadas.
GRAPHICSBYDEZIGN: con diseños especialmente pensados para sitios web.
Seguro que hay muchos más, pero no he buscado mucho.
Por cierto, una imagen animada (normalmente llamados gifs animados) es esto:
Pues eso, una imagen que se mueve.
4. Modificar imágenes
Si pinchamos sobre cualquiera de las imágenes que hemos insertado en nuestra página, nos aparecerá la barra de
herramientas de imagen:
Si no aparece iremos al menú Ver > Barras de herramientas > Imagen.
Insertar imagen desde archivo. (Una imagen que está dentro de nuestro ordenador).
Insertar un texto superpuesto a una imagen.
Crea una miniatura de la imagen.

12. Coloca la imagen en posición absoluta (por encima de todas las demás capas)
Estos iconos colocan la imagen por delante o por detrás de otras capas.
Estos son para rotar la imagen 90 º, a la izquierda o a la derecha.
Rotar: -->
Estos son para voltear la imagen, horizontal o verticalmente:
Voltear horizontal: Voltear vertical:
Ajustar contraste y brillo de la imagen.
Recortar: Si queremos recortar un trozo de la imagen (por ejemplo, de una foto de cuerpo entero quedarnos sólo
la cara) hay que pinchar en este botón, luego seleccionar el trozo deseado y luego volver a pinchar en el botón.
Definir color transparente. Si insertamos una imagen como esta sobre un fondo de color:
Si queremos que la imagen se integre en el fondo tenemos que hacer transparente el color blanco de la imagen. Eso se
hace con la herramienta , que vuelve transparente el color que pincha. El resultado es este:

13. Ajustar color: poner en blanco y negro, escala de grises, etc.
Dar efecto biselado:
Sin biselado: Con biselado:
Volver a muestrear. Es necesario pulsar este botón cada vez que se cambie el tamaño de una imagen, para que qu
memorizada con el nuevo tamaño.
Estas herramientas sirven para definir zonas activas en una imagen. Esto sirve para definir zonas con
hipervínculos diferentes dentro de una misma imagen.
En esta imagen, cada futbol
nos llevará a su propia págin
pinchamos sobre él. Es porq
hemos definido zonas activa
Para ello elegimos la
herramienta:
Definir zona rectangula
Definir zona elíptica o
circular
Definir zona poligonal (e
más utilizado para formas n
definidas. Se define el conto

14. de la zona activa punto a pu
Cuando definimos una zona
dentro de la imagen con est
herramientas nos sale al
momento la ventana en la q
tenemos que insertar el
hipervínculo (la dirección a
que nos tiene que llevar cad
zona activa)