Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Veamos realmente como funciona esta estructura que hemos hecho. Vamos a
insertar más texto en la parte principal de la página web para ver como se
comporta el menú lateral en el caso de que haya mucho más texto en la parte
derecha. Abre el Html-Kit y abre tu plantilla.html
Elementos que no son nada ¿?
Ya sabemos que gracias a la Hoja de Estilos podemos cambiar el tamaño de
la letra de toda la web, podemos variar los aspectos de los enlaces, los fondos
de ciertos elementos, etc, etc sin más que poner la propiedad correspondiente.
Pero para eso todas las partes del contenido de la página web deben "ser algo".
Si son enlaces modificaremos la etiqueta "a", si son párrafos la etiqueta "p",
pero, qué etiqueta hemos de modificar para cambiar las propiedades del texto
de la parte principal de nuestra plantilla? Aquella en la que pone "Esta será la
zona principal de la web"?
Va a ser dificil, pues no está encerrada entre ningúna etiqueta concreta,
luego ni es un párrafo, ni un enlace, ni ná de ná. Nosotros pretendemos que sea
un párrafo, verdad? Pues vamos a indicárselo poniéndole a esa frase la
etiqueta <p> al incio y como no, la etiqueta </p> de cierre al final. Ale, dale al
teclado! Ha de quedar así:
Más contenidos
Tras esta aclaración, vamos a incluir un par de párrafos más a continuación
de ese. Ya sabes, has de poner <p> y </p> al principio y al final de cada uno
para que el navegador sepa donde empieza y termina ese párrafo. Escribe un
par de párrafos que tengan bastante texto, al menos lo suficiente como para
sobrepasar lo que ocupa el menú de la izquierda.
Si escribes lo suficiente en cantidad, conseguirás ver este aspecto en tu
plantilla.html
Justificar los párrafos de la página web
Ups, los párrafos se ven centrados y eso parece una poesia más que una web,
je je je. Eso es por que le pusimos align:center a body en la Hoja de Estilo.
Pero no pasa nada, lo arreglamos rápido definiendo un estilo justificado para
todos los párrafos de la web. Si más tarde nos interesa alguno con otra
alineación, lo crearemos en su momento.
Por ahora, abre tu Hoja de Estilo e incluye esta nueva línea, por ejemplo al
final de su contenido:
p {text-align:justify;}
Con esto los textos quedan justificados. Esto significa que se reparten para
que empiecen justo en la parte izquierda y terminen todas las líneas justo en
el margen derecho, sin huecos. A mi me gusta así, pero si lo prefieres, en tus
páginas puedes definirlo como text-align: left o text-align:right o text-
align:center, como quieras. En el ejemplo lo dejamos con Justify.
Los márgenes de los párrafos de la página web
La cosa va mejorando pero ahora vemos como los textos se pegan demasiado
tanto al menú lateral como a los extremos de la página. Eso no queda muy bien,
así que vamos a arreglarlo.
Tienes dos opciones, una es definirle el margen concreto a cada uno de los
párrafos de todas tus páginas web, o algo un poco más sencillo, poner un par
de palabras en la Hoja de Estilo y listo. Qué prefieres? je je je.
Abre la Hoja de Estilos de la plantilla.html (estilo-general.css) y vamos a
reparar esos márgenes. Como los textos que vemos sin margen pertenecen a la
capa de fondo naranja (orange) y en la Hoja de Estilos solo pone "orange" en la
capa "#contenido", ya sabemos a qué capa incluirle la
propiedad padding (el padding es parecido al margin, ya veremos la
diferencia), verdad? Por eso le pusimos esos colores tan feos, para encontrar
cada capa rápidamente, je je je. Pero solo queremos por ahora poner margen
a sus párrafos, es decir, queremos márgenes para los párrafos de dentro de la
capa #contenido, así que, si recuerdas bien lo que hicimos la otra vez, esto se
pone así:
#contenido p {padding:5px 10px 5px 10px;}
Resumiendo, escribimos primero la capa y luego el elemento de dentro de
esa capa al que queremos definir cosas y luego, entre paréntesis, las
propiedades. Le hemos puesto 10px en los dos lados y solo 5 por arriba y abajo,
para ver como queda e ir variando cada uno hasta que quede a nuestro gusto si
fuera necesario.
Escribe esa línea justo después de la definición en la Hoja de Estilo de la
capa #contenido. Guarda la Hoja de Estilo, haz vista previa de
la plantilla.html y vemos los resultados por si queremos variar alguna de esas
dimensiones.
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:
<div id="navegacion">
<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í:
<div id="navegacion">
<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>