Cosa
Páginas: 8 (1945 palabras)
Publicado: 30 de marzo de 2011
Examen de medio termino
En esta actividad crearás una galería de imágenes utilizando tus conocimientos sobre HTML y CSS.
Utilizaras el archivo Descarga el archivo Examen.zip y descomprime la carpeta. Este archivo contiene un template de galería de imágenes.
La temática debe ser asociaciones de ayuda utilizando la galería de fotos que se tienen. Tu crearas los nombres de las 2 instituciones.Para cada una de las instituciones utilizaran 8 fotos.
Paso 1: Creando la estructura de archivos.
En el directorio raíz crea un directorio llamado “paginas”. Será esta locación en donde guardarás todas las páginas web que contengan cada una de las imágenes que podrá descargar el usuario.
Dentro del directorio img crea un nuevo directorio llamado “snaps”. En este directorio guardarás las vistaspreliminares de las imágenes que mostrarás en tu galería.
Paso 2: Edición y colocación de imágenes en directorios.
Elimina todas las imágenes que se encuentran en el directorio img a excepción del archivo “bg.gif”.
Modifica cada uno de los nombres de tus 16 imágenes para que sigan la nomenclatura “foto#.jpg”, es decir, tendrás los archivos: foto1.jpg, foto2.jpg, …, foto16.jpg. (Es importanteque compruebes que las extensiones de los archivos estén en minúsculas para que no haya problemas de visualización en los distintos navegadores)
Coloca tus 16 imágenes dentro del directorio img.
Copia las 16 imágenes y pégalas dentro del directorio snaps.
En las imágenes que se encuentran dentro del directorio snaps, realizarás una edición de cambio de tamaño y/o cortes de imagen.
Modificalas imágenes como creas conveniente de manera que conserven una resolución de 160 x 100 pixeles. (puedes hacerlo con Microsoft Office Picture Manager como aprendiste en clase).
Dentro del diseño del sitio web, el archivo bg.gif que se encuentra en el directorio img está manipulado en el css para repetirse infinitamente y formar el color de fondo de la galería. Edita esta imagen utilizandoPhotoshop, Paint, o algún otro programa de edición y ponle el color que consideres apropiado para el fondo de tu sitio web.
Una vez realizado esto, abre tu página web para que veas el color de fondo. Modifícalo cuantas veces sea necesario para que obtengas el color que más te guste.
Paso 3: Creando las páginas de las fotografías.
Dentro del directorio de páginas deberás crear 16 archivos html quecontengan el despliegue de cada imagen. Nómbralos con la nomenclatura “foto#.html”.
El código deberá lucir de la siguiente manera (cada página deberá tener el título y llamada al archivo de la fotografía correspondiente):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<title>Foto 1</title>
</head>
<body>
<p>
<img src="../img/foto1.jpg" alt="Foto 1"/>
</p>
</body>
</html>
Abre todos los archivos y verifica que todas las imágenes se desplieguen correctamente:
Paso 4: Actualizando sitio web para vista de snaps.
Abre el archivo index.html y elimina la segunda galería. Parahacer esto deberás eliminar la siguiente parte de código:
<h2>Cactus gallery</h2>
<div class="gallery">
<div class="photo">
<a href="#"><img src="img/foto.jpg" alt="foto" width="160" height="100" /></a>
<p><a href="#">Cactus</a></p>
</div>
<div class="photo">
<ahref="#"><img src="img/foto2.jpg" alt="foto 2" width="160" height="100" /></a>
<p><a href="#">Cactus 2</a></p>
</div>
<div class="photo">
<a href="#"><img src="img/foto3.jpg" alt="foto 3" width="160" height="100" /></a>
<p><a href="#">Cactus 3</a></p>
</div>
<div...
En esta actividad crearás una galería de imágenes utilizando tus conocimientos sobre HTML y CSS.
Utilizaras el archivo Descarga el archivo Examen.zip y descomprime la carpeta. Este archivo contiene un template de galería de imágenes.
La temática debe ser asociaciones de ayuda utilizando la galería de fotos que se tienen. Tu crearas los nombres de las 2 instituciones.Para cada una de las instituciones utilizaran 8 fotos.
Paso 1: Creando la estructura de archivos.
En el directorio raíz crea un directorio llamado “paginas”. Será esta locación en donde guardarás todas las páginas web que contengan cada una de las imágenes que podrá descargar el usuario.
Dentro del directorio img crea un nuevo directorio llamado “snaps”. En este directorio guardarás las vistaspreliminares de las imágenes que mostrarás en tu galería.
Paso 2: Edición y colocación de imágenes en directorios.
Elimina todas las imágenes que se encuentran en el directorio img a excepción del archivo “bg.gif”.
Modifica cada uno de los nombres de tus 16 imágenes para que sigan la nomenclatura “foto#.jpg”, es decir, tendrás los archivos: foto1.jpg, foto2.jpg, …, foto16.jpg. (Es importanteque compruebes que las extensiones de los archivos estén en minúsculas para que no haya problemas de visualización en los distintos navegadores)
Coloca tus 16 imágenes dentro del directorio img.
Copia las 16 imágenes y pégalas dentro del directorio snaps.
En las imágenes que se encuentran dentro del directorio snaps, realizarás una edición de cambio de tamaño y/o cortes de imagen.
Modificalas imágenes como creas conveniente de manera que conserven una resolución de 160 x 100 pixeles. (puedes hacerlo con Microsoft Office Picture Manager como aprendiste en clase).
Dentro del diseño del sitio web, el archivo bg.gif que se encuentra en el directorio img está manipulado en el css para repetirse infinitamente y formar el color de fondo de la galería. Edita esta imagen utilizandoPhotoshop, Paint, o algún otro programa de edición y ponle el color que consideres apropiado para el fondo de tu sitio web.
Una vez realizado esto, abre tu página web para que veas el color de fondo. Modifícalo cuantas veces sea necesario para que obtengas el color que más te guste.
Paso 3: Creando las páginas de las fotografías.
Dentro del directorio de páginas deberás crear 16 archivos html quecontengan el despliegue de cada imagen. Nómbralos con la nomenclatura “foto#.html”.
El código deberá lucir de la siguiente manera (cada página deberá tener el título y llamada al archivo de la fotografía correspondiente):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">
<head>
<title>Foto 1</title>
</head>
<body>
<p>
<img src="../img/foto1.jpg" alt="Foto 1"/>
</p>
</body>
</html>
Abre todos los archivos y verifica que todas las imágenes se desplieguen correctamente:
Paso 4: Actualizando sitio web para vista de snaps.
Abre el archivo index.html y elimina la segunda galería. Parahacer esto deberás eliminar la siguiente parte de código:
<h2>Cactus gallery</h2>
<div class="gallery">
<div class="photo">
<a href="#"><img src="img/foto.jpg" alt="foto" width="160" height="100" /></a>
<p><a href="#">Cactus</a></p>
</div>
<div class="photo">
<ahref="#"><img src="img/foto2.jpg" alt="foto 2" width="160" height="100" /></a>
<p><a href="#">Cactus 2</a></p>
</div>
<div class="photo">
<a href="#"><img src="img/foto3.jpg" alt="foto 3" width="160" height="100" /></a>
<p><a href="#">Cactus 3</a></p>
</div>
<div...
Leer documento completo
Regístrate para leer el documento completo.