Haciendo funcionar los enlaces del menú horizontal
Ya estamos en condiciones de hacer funcionar el menú horizontal de arriba, también llamado barra de navegación. Para ello abre una página cualquiera de las que tenemos hechas, por ejemplo historia.html
Si te fijas en su código Html, en la capa navegacion teniamos puesto esto:
<ul>
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a></li>
</ul>
</div>
Ese código tenemos que transformarlo para que aparezcan enlaces a todas las secciones, incluida la portada. Para ello basta con añadir 4 líneas más como las que ya hay, quedando una para cada uno de los enlaces que necesitamos. Y ya que estamos, en lugar de Sección 1, Sección 2, etc, escribiremos el texto que queremos que aparezca en el menú, es decir, Portada, Historia, Discografía, Conciertos, Descargas, Foro y Souvenirs:
<ul>
<li><a href="#">Portada</a></li>
<li><a href="#">Historia</a></li>
<li><a href="#">Discografía</a></li>
<li><a href="#">Conciertos</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Souvenirs</a></li>
</ul>
</div>
Va tomando forma, bien bien. Ahora solo falta colocarle la ruta en lugar de la almohadilla (#). Cuál crees que será la ruta de estos archivos? Pues, esté el navegador en la página que sea, siempre tendrá que, primero salir de esa carpeta ( ../ ), después entrar en la carpeta de la sección correspondiente ( nombre de la carpeta) y finalmente abrir el archivo de la página (nombredelapagina.html). Es decir, así:
<ul>
<li><a href="#">Portada</a></li>
<li><a href="../historia/historia.html">Historia</a></li>
<li><a href="../discografia/discografia.html">Discografía</a></li>
<li><a href="../conciertos/conciertos.html">Conciertos</a></li>
<li><a href="../descargas/descargas.html">Descargas</a></li>
<li><a href="../foro/foro.html">Foro</a></li>
<li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>
</div>
Como verás, la ruta de la portada no la he puesto aún. Esa ruta será diferente, pues para llegar desde la página de cualquier sección a la portada (que como digimos iba a ser la index.html) la ruta a seguir es simplemente ../ (para salir de la carpeta de sección en la que se esté) seguido de index.html quedando todo ese código así:
<ul>
<li><a href="../index.html">Portada</a></li>
<li><a href="../historia/historia.html">Historia</a></li>
<li><a href="../discografia/discografia.html">Discografía</a></li>
<li><a href="../conciertos/conciertos.html">Conciertos</a></li>
<li><a href="../descargas/descargas.html">Descargas</a></li>
<li><a href="../foro/foro.html">Foro</a></li>
<li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>
</div>
Estás de acuerdo conmigo en estos códigos? Si, verdad? Je je je je, ves? Ya hablamos de códigos Html de tú a tú! Estás hecho todo un Webmaster!!!
Bueno, para ser correctos del todo, deberías recordar aquél error que comentamos una vez que surge en el Internet Explorer si ponemos las líneas de código Html de ese modo. La norma era que todo el código Html de una lista ha de estar todo seguido, por tanto antes de reemplazar ese código vamos a ponerlo en una sola línea. Para ello, pones el cursor al final de cada línea y das a la tecla "Supr" hasta que la siguiente quede pegada a la anterior. Y así con todas. Debe quedar más o menos así:
<ul><li><a href="../index.html">Portada</a></li><li><a href="../historia/historia.html">Historia</a>
</li><li><a href="../discografia/discografia.html">Discografía</a></li><li><a href="../conciertos/
conciertos.html">Conciertos</a></li><li><a href="../descargas/descargas.html">Descargas</a></li><li>
<a href="../foro/foro.html">Foro</a></li><li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>
</div>
Ahora solo nos queda usar el buscar y reemplazar del EditPad Lite para de un plumazo actualizar los códigos de los menús horizontales de todas las páginas de las secciones. Te atreves a hacerlo sin ayuda?
Abre el EditPad Lite, abre todas las páginas de las secciones, (Portada, Historia, Discografía, Conciertos, Descargas, Foro y Souvenirs), y desde una de ellas, escribes el código a buscar en la parte de arriba y el nuevo código que queremos en la parte de abajo. Te recuerdo que el código a buscar era este:
<ul>
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a></li>
</ul>
</div>
El que queremos (que va en la ventada de abajo del EditPad Lite) lo puse antes. Ahora pulsas sobre "Replace All" y listo, cierras el programa, le dices que guarde todas y... misión cumplida de nuevo!
Lección 6:
