Personalizando el index.html
Aunque parezca un poco pesado, realmente esto nos sirve para seguir practicando de modo que no te quejes demasiado, je je je. Para mí sería más fácil dártelo todo ya terminado, pero entonces no tendría sentido esto de las lecciones.
El caso es que ahora que tenemos el index copiado de la plantilla, tenemos que hacer funcionar el menú horizontal de arriba igual que hicimos con las páginas de las secciones. En este caso no nos vale el mismo código que en aquellas páginas, pues esas estaban dentro de una carpeta mientras que index.html está fuera. Por eso, las rutas no son exáctamente las mismas y tenemos que ponérselas correctamente. Es fácil, ya veras.
Una vez tengas abierta la página index.html con el Html Kit, ve a ver su código, concretamente la parte del menú superior horizontal. Ahora mismo es como 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>
Hay que añadir los enlaces para el resto de secciones, como hicimos antes. Quedaría así:
<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>
Y ahora le ponemos las rutas correctas. Para la portada es fácil, como estamos en la portada, para volver a ella otra vez solo es necesario abrir su archivo, por lo que la ruta sería "index.html" (recuerda que el archivo de la portada es index.html, no portada.html).
Para el resto de páginas de ese menú tendríamos que, para llegar desde la portada hasta cada una de ellas hay que, primero entrar en la carpeta correspondiente y después abrir el archivo de la página, por lo que las rutas al final quedan todas de este modo:
<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 con esto? Pero recuerda, el código de las listas deben tener todas las líneas seguidas, de modo que lo pondríamos de este modo (eliminando espacios y saltos de líneas):
<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.h
tml">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>
Bien. Pues pon en la index.html ese código y ya lo puedes guardar. Si le haces vista previa ahora al index.html verás como aparece algo descuadrado. Ya sabes que és por no tener a penas contenido, de modo que aprovechando que estamos liados con ese archivo, escríbele un par de párrafos más o menos largos, ponle un <title> decente, como por ejemplo:
y ya puestos, escríbele también algún título entre <h1> y </h1>, donde pusimos las equis, vale? Por ejemplo esto:
Ahora sí debe verse bien la vista previa.
Ahora en teoría se puede navegar perfectamente por toda la web que tenemos desde el menú horizontal superior y desde todas las páginas de la web de ejemplo. Por cierto, como hemos eliminado la antigua index.html, puedes borrar de la carpeta objetos todos los archivos que usaba el index, como por ejemplo la sonrisa y el buzón de correo. Así evitas ir acumulando archivos que al fin y al cabo no usas en la web y ya no nos hacen falta. Si no sabes borrar carpetas o archivos con el Html Kit aquí tienes unas pistas.
El siguiente paso es hacer funcionar también el menú lateral de la izquierda y es ese el paso que daremos a continuación. Como poco te mereces ya un diploma!
Lección 6:
