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 fondo.

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 utilizan imágenes pequeñas, en formato gif o jpg. Tenemos que tener en cuenta que la imagen que elegimos, aunque sea pequeña, no se va a aumentar hasta llenar la pantalla, sino que se va a repetir indefinidamente en forma de mosaico, como si fueran azulejos.Vamos a ver algunas muestras:

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 images.

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) porque 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 midis. 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:

Donde pone sonido de fondo, pinchamos en examinar, buscamos el archivo de sonido 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 fuente que hemos utilizado. De lo contrario, su ordenador mostrará la página con cualquier otra fuente y los resultados pueden ser muy malos (puede aparecer todo descolocado, al ser un tamaño diferente). Por esto, en las páginas web se utilizan solo las fuentes más comunes, como son: Arial o Times New Roman. Un consuelo: para los niños podemos utilizar la Comic Sans 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 quepulsar 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:

- 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ísimo.

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 continuación elegimos la alineación (normalmente elegiremos centrar, salvo algún interés especial). Posteriormente podemos especificar el ancho: si elegimos 100 en porcentaje, la tabla generada ocupará todo el ancho de pantalla, sea cual sea. Esto está bien, pero en algunos casos nos interesa un ancho fijo, para que no se nos descoloquen los elementos que hay dentro (texto, imágenes, etc). Entonces introduciremos un número en píxeles. Hay que tener en cuenta que los monitores antiguos tienen un ancho de 800 píxels, y los modernos de 1024, con lo cual: - Una tabla de ancho 750 píxeles ocupará casi todo el ancho de 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. Si elegimos tamaño cero tendremos una tabla invisible, utilizada para colocar los textos y las imágenes.

A continuación podemos elegir un color o incluso una imagen de fondo para la tabla. ¡OJO! Tiene que ser una imagen que esté dentro del sitio web (preferentemente dentro de la carpeta images) No vale enlazar a una imagen que esté por ejemplo en Mis Imágenes, ya que cuando publiquemos nuestro sitio web, esa

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 pinchando 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 se 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 soluciona con 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 por 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 en la 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 Times

New Roman, Arial, Comic Sans o Tahoma.

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 programa del tipo Corel, Photoshop, Paint, etc. y guardar el resultado como imagen jpg dentro de la carpeta images de nuestro sitio web. 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 reconocen 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 mismo documento.

Este hipervínculo está hecho sobre una imagen, no sobre texto. Si pinchas en la imagen también te llevará a 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án 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 nos aparece seleccionamos hipervínculo. Entonces nos sale esta ventana:

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 sobre 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ágina 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ágina.

Este hipervínculo abrirá google en una ventana nueva. Cuando aparezca la nueva ventana, la puedes cerrar en , y esta 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

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ón2. Insertar marcadores3. 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 tiene el 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. Los 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:

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 hacer 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 marcadores 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) podemos insertarla en una página web de la siguiente manera:

Vamos al menú Insertar y seleccionamos Imagen > desde archivoA 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ñadas, 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 "colegio" y he pinchado en buscar. Entonces nos salen las miniaturas y sólo nos queda 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ón a internet.

Cuando en una página web hayamos insertado imágenes de internet nos va a ocurrir lo siguiente: al ir a guardar la página web (Archivo > Guardar) nos aparecerá la siguiente pantalla:

Esta ventana sirve para decirle 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.

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 Copiar. 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 enlace a 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.

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 con 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:

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 quede 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 futbolista nos llevará a su propia página si pinchamos sobre él. Es porque hemos definido zonas activas. Para ello elegimos la herramienta:

Definir zona rectangular

Definir zona elíptica o circular

Definir zona poligonal (el más utilizado para formas no definidas. Se define el contorno de la zona activa punto a punto)

Cuando definimos una zona dentro de la imagen con estas herramientas nos sale al momento la ventana en la que tenemos que insertar el hipervínculo (la dirección a la que nos tiene que llevar cada zona activa)