15.1

4t: Gif reloj y ventana

Pr: Semana Examenes

Sn: Unidad 5 del curso Frontpage 2003 de AulaClic. Imagenes.

Ejercicio

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 carpetaimagenes. 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 enAceptar. 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.