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: 10

Visitas el mes pasado: 21

logo

Donativos

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




11. El menú de enlaces

11.1 Escribir el menú

Texto del menú

Em esta lección rellenaremos el div "menú" con una serie de enlaces que apuntarán a los distintos apartados de la sección en la que estamos.:

Abrimos el archivo plantilla.html con el HTML-Kit y dentro del div menú borramos el texto provisional que habíamos puesto (borrar texto en rojo)


<div id="menu">
   Aquí va el menú
</div>

En su lugar escribiremos las siguientes líneas que formarán la lista de enlaces:(escribir texto en azul)


<div id="menu">
   <br/>
   <h4>Sección X.</h4>
   <br/>
   <ul>
      <li><a href="#">Apartado 1</a></li>
      <li><a href="#">Apartado 2</a></li>
      <li><a href="#">Apartado 3</a></li>
      <li><a href="#">Apartado 4</a></li>
      <li><a href="#">Apartado 5</a></li>
      <li><a href="#">Apartado 6</a></li>
   </ul>
   <br/>
</div>

Una vez escritas 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


Imagen de fondo

Ahora que ya tenemos el texto, antes de darle formato, cambiaremos el fondo, le pondremos una imagen que se repita a modo de tapiz. Para ello copiaremos la siguiente imagen en la carpeta objetos


fondo del menú

Recuerda que para copiar la imagen debes pulsar con el botón derecho del ratón sobre ella y elegir la opción "Guardar imagen como..."; Se abrirá una ventana en la que debes buscar la carpeta objetos (la ruta es Mis documentos / mi_web / objetos), y pulsar luego en "Guardar".

Abriremos ahora el archivo general.css con el HTML-Kit y en la línea donde definimos el div menu (línea que empieza por "#menu al principio del archivo) añadiremos la siguiente propiedad (texto en verde)


.....
#navegacion { background-color: #ffff99 ; width: 100%; min-height: 65px; padding: 0px auto;}

#menu { background-color: #e2ffde; width: 20%;
        border: 2px solid black; 	margin: 2%; float: left; min-height: 150px; 
        background-image: url("objetos/fondomenu.jpg"); }
				
#contenido { background-color: #ffffff; width: 75%;float: left;  }
......

La propiedad background-image: coloca una imagen de fondo que se repite a lo largo y ancho de todo el elemento al que afecta. Fíjate que la extensión del archivo de imagen es .jpg, y que el valor se define con las letras url seguidas de la ruta de la imagen entre comillas y a su vez entre paréntesis.

Una vez copiado el texto anterior, 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


Nos queda definir el estilo del texto y de los enlaces del menú, pero eso lo haremos ya en el siguiente paso.


Ir al siguiente paso Estilo del texto







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