Ejercicio paso a paso Unidad 5. Insertar imágenes.

a.- Poner un fondo a una página web.

1. Arranca FrontPage si no lo habías hecho ya.

2. Si no estás en el sitio Webpersonal, cierra el sitio con la opción Cerrar sitio del menú Archivo, y a continuación abre el sitio WebPersonal con la opción Archivo - Abrir sitio... o con la opción Archivo - Sitios Recientes.

3. Haz doble clic en la página index.htm para abrirla.

Antes de poner el fondo, necesitaremos el archivo de la imagen de fondo en nuestro sitio. Para colocar la imagen en el sitio, la importamos como lo hicimos con el archivo index.htm en el tema 3. Tenemos que importar a la carpeta imagenes del sitio, la imagen arena04.gif que se encuentra en la carpeta Ejercicios del curso.

4. Haz clic en la pestaña Sitio web y abre la carpeta imagenes (la carpeta donde queremos importar).

5. Selecciona la opción Importar del menú Archivo.

6. Haz clic en el botón Agregar archivo y busca la carpeta donde tienes el texto del curso, dentro de la carpeta verás la carpeta Ejercicios, ábrela y selecciona el archivo arena04.gif.

Ahora que tenemos la imagen del fondo copiada a nuestro sitio, la asignaremos de fondo, para ello tienes que posicionarte en la página.

7. Haz clic en la pestaña index.htm para volver a la página index.

8. Haz clic en el menú Formato y después en la opción Fondo.

9. Se abre el cuadro de diálogo Propiedades de Página en la pestaña Formato. Asegúrate de marcar la opción Imagen de fondo.

10. Después debes buscar la imagen. Haz clic en el botón Examinar y busca la imagen llamada arena04.gif en la carpeta imagenes.

11. Haz doble clic en ella. Volvemos al diálogo Propiedades de Página pulsa Aceptar.

La imagen saldrá como fondo de página

12. Guarda los cambios.

b.- Introducir imágenes.

Ahora vamos a copiar a nuestro sitio una página web ya creada. Se trata de una página a medio hacer, que iremos completando a lo largo del curso. El archivo de la página se llama aficiones.htm y se encuentra en la carpeta Ejercicios del curso.

1. El archivo aficiones.htm se encuentra en la carpeta ejercicios del curso. Importalo a la raíz del sitio.

2. Abre el archivo aficiones.htm haciendo doble clic en él desde la pestaña Sitio web.

Como podemos observar, tenemos una página con un texto en negro y un fondo blanco. Vamos a darle vida. Necesitamos los archivos siguientes: fondo_azul.jpg, amsterdam.jpg, paris.jpg y londres.jpg. Todos se encuentran en la carpeta ejercicios del curso. Puedes importarlos todos de golpe seleccionándolos todos manteniendo pulsada la tecla Ctrl mientras los seleccionas en el diálogo Agregar archivo a la lista de importación.

3. Pulsa el botón Abrir y después el botón Aceptar.

4. Al importar normalmente los importa a la raíz del sitio (la carpeta que está seleccionada por defecto), si has improtado los archivos a la carpeta raíz, debes moverlos a la carpeta imagenes. La carpeta debería quedar así:

Para moverlos debes seleccionarlos y arrastrarlos con el ratón a la carpeta imagenes.

Ahora vamos a ponerle el fondo de la página aficiones.htm. Procedemos de la misma forma que antes.

5. Haz clic en la pestaña aficiones.htm para volver a la página.

6. Haz clic en el menú Formato y después en la opción Fondo.

7. Se abre el cuadro de diálogo Propiedades de Página en la pestaña Formato. Asegúrate de marcar la opción Imagen de fondo.

8. Después debes buscar la imagen. Haz clic en el botón Examinar y busca la imagen llamada fondo_azul.jpg en la carpeta imagenes.

9. Haz doble clic en ella. Volvemos al diálogo Propiedades de Página pulsa Aceptar.

La imagen saldrá como fondo de página

Ahora el texto prácticamente no se ve, ya que por defecto es negro. Cambiémoslo a blanco.

10. Pulsa con el botón derecho en la página y haz clic en Propiedades de la página.

11. Haz clic en la pestaña Formato. Después despliega la lista Texto del apartado Colores y elige el color blanco. Haz clic en Aceptar.

Ahora que ya vemos el texto, vamos a insertar 3 imágenes. Las imágenes se corresponden a las ciudades de las que habla el texto.

12. Lo que debes hacer es colocar el punto de inserción delante del texto de cada ciudad, es decir entre el título de la ciudad y el texto asociado a la ciudad e insertar la imagen correspondiente. Para ello haz clic con el botón izquierdo del ratón delante del texto de cada ciudad.

13. Haz clic en el botón Insertar imagen desde archivo de la barra Formato:

14. Selecciona la imagen de la ciudad en la carpeta imagenes y pulsa el botón Aceptar.

15. Repite los pasos 12 a 14 para cada imagen de cada ciudad.

16. Guarda los cambios.

Nos habremos dado cuenta de un problema: las imágenes y el texto pueden tener una colocación extraña. Vamos a cambiar las propiedades de las imágenes para que podamos colocar texto al lado.

17. Haz clic con el botón derecho sobre una imagen y después en el menú contextual haz clic en Propiedades de Imagen....

18. Se abre el diálogo Propiedades de imagen. Pulsa en el estilo de ajuste Izquierda y haz clic en el botón Aceptar, para que el texto pueda situarse a la derecha de la imagen.

No obstante, acaba de aparecer otro pequeño problema. Es posible que nos ocurra esto:

Para resolver el problema, de momento añadiremos líneas en blanco para bajar los títulos. Más adelante veremos cómo resolver esto de una manera más elegante. Ya que esta forma no resuelve el problema cuando las dimensiones de la pantalla son otras que las nuestras.

19. Posiciona el cursor delante de PARIS y pulsa la tecla INTRO tantas veces como sea necesario.

20. Repite el punto 19 para bajar AMSTERDAM.

  Este debería ser aproximadamente el aspecto si lo has hecho todo correctamente:

21. Guarda los cambios.

c.- Modificar el título

Vamos a cambiar el título de la página por AFICIONES.

1. Haz clic con el botón derecho del ratón en la página y selecciona del menú contextual la opción Propiedades de página... .

2. En el diálogo que aparece Propiedades de página, en la pestaña General, escribe el Título: AFICIONES

3. Pulsa Aceptar.

4. Guarda los cambios.

5. Ahora que la página web está guardada, puedes cerrar FrontPage. Haz clic en Archivo - Salir o bien, pulsa en el botón cerrar , que está situado en la parte superior izquierda de la pantalla.

Pág. Epp. 5.1