Entendido.

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

Logo

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++


logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 24

Visitas el mes pasado: 37

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




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)


<div id="pie"> Aquí pondremos el pie de página. </div>

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


..... <div id="pie"> <div id="flechas"> <p>Ir al apartado</p> </div> ></div> .......

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:


Flecha retroceso              Flecha avance

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.







Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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