Menú lateral de Historia
El método es muy similar al anterior, que hemos usado para crear el menú horizontal de la parte de arriba, pero en este caso no vamos a partir de la plantilla sino que vamos a partir de la página que ya existe en cada una de las carpetas de sección. Es decir, para generar las páginas de la sección historia, abriremos el archivo historia.html y la guardaremos con los nombres de las subsecciones.
Pero antes de hacer eso arreglaremos el menú lateral de esa página. De ese modo, cuando guardemos con el nombre del resto de página de esa sección ya se guardan con el menú lateral terminado y no será necesario acudir al EditPad Lite para reemplazar esa parte de código. Entiendes? Qué bien! je je.
Empezaremos entonces abriendo el archivo historia.html y mirando el código que por ahora tenemos para ese menú lateral. Ese código es este:
<h1>Título de Sección 1</h1>
<ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li>
<a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>
</div>
Bien, qué cosas hay que cambiar aquí? Para empezar le vamos a poner el título de la sección entre <h1> y </h1>. Lo que escribamos ahí aparecerá en la parte alta del menú lateral. Pondremos entonces "Historia" y quedaría así esa línea:
A continuación escribimos los anchor text de cada enlace. Aunque ya lo he dicho, quizás se te haya olvidado. El anchor text es el texto que aparece visible en el enlace, es decir, las palabras sobre las que hay que pulsar para ir a la página enlazada. Como las subsecciones de la sección historia son Origen, Miembros, Formación Actual y Album de Fotos, pondremos esos textos como Anchor Text. Quedaría así por ahora el código del menú:
<h1>Historia</h1>
<ul><li><a href="#">Origen</a></li><li><a href="#">Miembros</a></li><li><a href="#">
Formación Actual</a></li><li><a href="#">Album de Fotos</a></li></ul>
</div>
Ahora solo queda colocar bien las rutas. Pero claro, aún no existen los archivos de las subsecciones, verdad? Así que no sabemos qué poner en la ruta de cada uno... No pasa nada. Decidimos yá cómo se van a llamar esos archivos y como sabemos que los vamos a guardar en la carpeta historia, tenemos todos los datos que nos hacen falta para escribir las rutas correctamente. Veamos.
Si el archivo de la subsección Origen lo vamos a llamar origen.html, y sabemos que lo vamos a guardar (cuando lo generemos) dentro de la carpeta historia, sabremos que para ir desde cualquier página de la sección historia a la página origen.html solo es necesario abrir dicho archivo. No es necesario salir ni entrar en ninguna carpeta, por lo que la ruta será simplemente el nombre del archivo, es decir, "origen.html".
Lo mismo va a ocurrir con el resto de enlaces de las demás subsecciones, no es así? Entonces es fácil adivinar que el código completo quedaría de este modo:
<h1>Historia</h1>
<ul><li><a href="origen.html">Origen</a></li><li><a href="miembros.html">Miembros</a>
</li><li><a href="formacion.html">Formación Actual</a></li><li><a href="album.html">
Album de Fotos</a></li></ul>
</div>
Correcto? Pues listo, ya podemos escribir ese código en lugar del antiguo que había en el archivo historia.html. Una vez hecho, guarda la página historia.html (esta vez con su mismo nombre).
Lección 6:
