Unidad 7. Ejercicio paso a paso: Maquetar con posicionamiento absoluto (I)


Objetivo:

A partir del archivo ej_maquetacion_absoluto.htm, que puedes encontrar en la carpeta de ejercicios del curso, se nos pide que maquetemos la página para que tenga el siguiente aspecto:

Para que se vea mejor la estructura de las capas, le daremos a cada una un color de fondo distinto.

Ejercicio

Para este ejercicio, te recomendamos que edites directamente el código fuente de la página, ya que el texto ya está escrito.

Primero, vamos a identificar los distintos elementos, y crear las cajas que los contengan. A todas las cajas le daremos un id distintivo.

  1. El título estará en una caja formando la cabecera. Por lo tanto, encierra la etiqueta <h1></h1> en una caja, y asígnale el id cabecera (<div id="cabecera">).
  2. Como todo lo demás va a ir en una columna con ancho fijo, lo más cómodo es crear una caja que contenga al resto de elementos, a la que le daremos el ancho que queramos.
    Crea otra caja, que comience donde acababa la anterior, y vaya hasta el final del body. Asígnale el id pagina.
    Vamos a subdividir el div pagina en las distintas columnas:
  3. Como la lista formará otra columna, crea otra caja que la contenga. Asígnale el id menú.
  4. El texto va a aparecer en otra columna central. Así que crea otra caja que contenga a todo el texto, desde el <h2> hasta el cierre del penúltimo párrafo (el último es para el pie). Asígnale el id texto.
  5. Encierra el último párrafo en otra caja, y asígnale el id pie.

La estructura general de la página te habrá quedado:

<body>
<div id="cabecera">
	<h1>...</h1>
</div> → cierre de "cabecera"
<div id="pagina">
 <div id="menu">
  <ul>...</ul>
 </div> → cierre de "menu"
 <div id="texto">
  <h2>...</h2>
  <h3>...</h3>
  ...
  <p>...</p>
 </div> → cierre de "texto"
 <div id="pie">
  <p>...</p>
 </div>  → cierre de "pie"
</div> → cierre de "pagina"
</body>
Inicio Adelante





Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.