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.

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

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

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