Unidad 5. Preparar nuestro sitio (IV)

5.6. Estructura de la página

En nuestro ejemplo, como norma general todas las páginas mantendrán la misma estructura. Por ejemplo, tendrán el mismo logo o título, el sistema de navegación en la misma posición, el mismo pie, etc. Sólo iremos cambiando el contenido.

Una excepción a esto puede ser la página de inicio. Pensemos que esta página es la presentación de nuestro sitio, y el visitante se hará una idea de qué puede encontrar en nuestro sitio a partir de ella. Por eso no es extraño que tenga más enlaces que el resto de páginas. Esto, como siempre, dependerá del tamaño del sitio.

Pero pensando en el resto de páginas, no es una mala idea comenzar creando una página base, con esos elementos comunes que podamos utilizar a modo de plantilla.

Vamos a ver qué elementos necesitamos en nuestro ejemplo:

• Un título, para lo que podemos utilizar un encabezado h1. En el se mostrará el nombre de la asociación, Floramics.
• Un menú. En este caso pondremos un enlace a las siguientes secciones:
  • Inicio (index.html)
  • Flores (flores/index.html)
  • Nosotros (nosotros.html)
  • Contacto (contacto.html)
  • Noticias (noticias.html)
  Como son sólo cinco elementos, vamos a ponerlo en la parte superior, ya que en un lateral desperdiciaríamos espacio.
• Un área para el contenido. Cambiará en cada página, pero tendrá un título para la sección.
• El pie, por ejemplo para poner el copyright de la página. Podemos utilizar un elemento de bloque como un párrafo o un div. También existe una etiqueta específica, <address> utilizada para contener información sobre el autor de la página.

Para que nos quede mejor estructurada la página, vamos a utilizar divisiones en las tres secciones diferenciadas:

De esta manera, entre páginas prácticamente sólo cambiaremos el contenido.

Con esta estructura en mente, vamos a escribir el código:

Creamos una nueva página, con el Doctype, head, body, etc... como ya hemos visto.

Dentro, creamos tres divisiones.

• En la primera, colocamos un <h1> con el nombre de la asociación. También una <ul>, con un elemento y un enlace para cada una de las secciones.
• La división central la dejamos en blanco, ya que será la que iremos cambiando.
• En la tercera división, introducimos el texto del pie. Por ejemplo, © Todos los derechos reservados.

Y no hemos de olvidar, que en un futuro contendrá un enlace a la hoja de estilos. Por lo que es conveniente que lo pongamos ya, decidiendo un nombre para la hoja, por ejemplo estilo.css.

Una vez creada, guardamos la página como base.html.

La página tiene pocos elementos, y te recomendamos que intentes hacerla escribiendo directamente el código fuente. De todas formas, puedes seguir este ejercicio paso a paso para realizar la página con KompoZer, y comprobar el código generado.

 

Una vez creada, visualiza la página con un navegador. Puedes pulsar F5 desde KompoZer o hacer doble clic directamente sobre el archivo.