Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

13. El pie de página (I)

13.1. Flechas adelante/atrás

caja de flechas

En el pie de página pondremos a la derecha un apartado con unas flechas que nos permitirán ir a la página anterior o posterior a la que estamos.

para ello crearemos un div dentro del pie de página que lo colocaremos a la derecha, dentro del cual incluiremos las flechas.

Abre el archivo plantilla.html con el HTML-Kit y dentro del div "pie" borramos en primer lugar el texto provisional que habíamos puesto: (borrar texto en rojo)

en su lugar pondremos las siguientes líneas:(texto en azul)

Después de escribir estas líneas guardamos el archivo, y abrimos el archivo plantilla.html con el navegador para ver los cambios.

La página quedará así: Ver mi página

insertar imágenes

Para poder poner las flechas del menú primero debemos copiar las imagenes. Copia las siguientes imágenes en la carpeta objetos de tu Web:

Recuerda, para copiar la imagen debes pulsar con el botón derecho del ratón sobre ella y elegir la opción "Guardar imagen como...". En la ventana que aparece debes buscar la carpeta en la que la quieras guardar, (Mis documentos / mi_web /objetos) y pulsar en guardar.

Fíjate siempre en el nombre de las imágenes, y en que puedes cambiarlo antes de guardar. Las imágenes se llaman "atras.gif" y "adelante.gif".

Cuando ya tengamos las imágenes en la carpeta objetos abrimos el archivo plantilla.html con el HTML-Kit y dentro del div "flechas" escribimos las etiquetas de las imágenes:(escribir texto en azul)

.....
<div id="pie">
   <div id="flechas">
      <p>Ir al apartado</p>
      <p>
         <a href="#"><img src="objetos/atras" alt="Anterior"/> Anterior </a>
         &nbsp;&nbsp;&nbsp;
         <a href="#"> Siguiente <img src="objetos/adelante" alt="Siguiente"/></a>
      </p>
   ></div>
</div>
......

Hemos colocado aquí las imágenes dentro de los enlaces, para que al pulsar sobre ellas hagan de enlace. Entre los dos enlaces hemos colocado unos espacios en blanco de separación. y hemos puesto todo ello dentro del mismo párrafo para que esté en la misma línea.

Una vez copiadas las líneas anteriores guardamos el archivo, y abrimos el archivo plantilla.html con el navegador para ver los cambios.

La página quedará así: Ver mi página

Tenemos todavía que mover el div hacia la izquierda, y aplicar estilo a los enlaces, así como reducir el tamaño de las imágenes, pero todo eso lo haremos en el próximo paso:

Ir al siguiente paso: Estilo de flechas.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com