Unidad 13. Ejercicio: Posicionamiento flexible. Flexbox
En este ejercicio practicaremos con el posicionamiento flexible de elementos en una página web. Para realizar este ejercicio debes descargarte el archivo indice2.html de la carpeta ejercicios/unidad-13/curso-excel/indice2.html y guardarlo en la carpeta de ejercicios/curso-excel (o copiar el código que se muestra a continuación). También debes descargarte el archivo de la hoja de estilo indice2.css ejercicios/unidad-13/curso-excel/css/indice2.css y guardarlo en la carpeta de ejercicios/curso-excel/css (o copiar el código que se muestra a continuación).
Ejercicio 1: Posicionamiento flexible.
- Desde el editor Brackets abre el archivo indice2.html.
- Debes ver el siguiente código:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>aulaClic. Índice Excel </title>
<link href="css/indice2.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<img src="graficos/logo_aulaclic.png" alt="logo">
<h1>Excel 2016</h1>
</header>
<nav>
<p>Atrás Índice Adelante Inicio Ayuda</p>
</nav>
<main>
<p>Contenido del curso de Excel 2016</p>
</main>
<aside>Publicidad 1</aside>
<footer>
<p>Fecha</p>
<p>Página</p>
</footer>
</body>
</html>
- Abre la hoja de estilo indice2.css, debes ver este código:
/* CSS Hoja de estilo. indice2.css */
nav p {
color: brown;
}
footer p {
color: blue;
}
aside p {
color: darkgreen;
}
- Estos archivos son muy similares a los iniciales del ejercicio anterior en el que vimos el posicionamiento flotante, ahora vamos a ver el posicionamiento flexible para obtener un diseño similar. Para empezar en la hoja de estilo indice2.css vamos a cambiar el tamaño del logo, para ello escribimos: #logo {
width: 9em; } . También cambiaremos el tamaño del encabezado h1 con h1 {
font-size: 1.3em;
}. Así tendremos los mismos tamaños del ejercicio anterior
- Como queremos obtener un diseño similar al del ejercicio anterior con el logo, el encabezado y el párrafo de navegación en la primera línea vamos a crear un contenedor div que los contenga y le llamaremos cabeceras. Como el encabezado h1 está dentro del contenedor header vamos a sacarlo fuera porque nos interesa que los tres elementos estén al mismo nivel dentro del contenedor flexible para aprovechar mejor sus posibilidades de alineamiento. Por lo tanto cambiamos el código HTML de la siguiente forma:
<div class="cabeceras">
<header>
<img src="graficos/logo_aulaclic.png" id="logo" alt="logo">
</header>
<h1>Excel 2016</h1>
<nav>
<p>Atrás Índice Adelante Inicio Ayuda</p>
</nav>
</div>
- Ahora sólo queda añadir en la hoja de estilo la clase creada y definirle el posicionamiento flexible, también haremos que los elementos pasen a la siguiente línea si no caben en una, con la propiedad wrap, escribimos: .cabeceras {
display: flex;
flex-wrap: wrap
}.
- Para alinear los elementos verticalmente usamos la propiedad align-items: center; y cambiamos el margen superior con un valor negativo para que quede más ajustado, escribimos margin-top: -10px;. Damos márgenes al encabezado h1: margin-left: 5px;
margin-right: 10px. Visualiza la página para comprobar que los tres elementos de la cabecera están en la misma línea
- Siguiendo con el diseño de la página en la línea siguiente irá el contenido principal, y la publicidad. Para ello sólo tenemos que crear el contenedor central que agrupará estos dos elementos, y darle posicionamiento flexible, es decir: .central {
display: flex;
}, en este caso no queremos que salte de línea y dejamos la opción por defecto nowrap. Podemos dar un margen izquierdo a la publicidad de esta forma:
aside {
margin-left: 1em;
}
- Ya sólo nos queda la última línea con la fecha a la izquierda, y la página a la derecha. En este caso ya tenemos el contenedor footer con los dos elementos, por lo tanto, sólo hay que darle posicionamiento flexible, también vamos a colocar los elementos en los extremos de la línea con el justificado: footer {
display: flex;
justify-content: space-between;
} .
- El resultado será una página web como esta:
- El código HTML es este:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>aulaClic. Índice Excel</title>
<link href="css/indice2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="cabeceras">
<header>
<img src="graficos/logo_aulaclic.png" id="logo" alt="logo">
</header>
<h1>Excel 2016</h1>
<nav>
<p>Atrás Índice Adelante Inicio Ayuda</p>
</nav>
</div>
<div class="central">
<main>
<p>Contenido del curso de Excel 2016</p>
</main>
<aside>
<p>Publicidad </p>
</aside>
</div>
<footer>
<p>Fecha</p>
<p>Página</p>
</footer>
</body>
</html>
- Y la hoja de estilo es esta:
/* CSS Hoja de estilo. indice2.css */
nav p {
color: brown;
}
footer p {
color: blue;
}
aside p {
color: darkgreen;
}
#logo {
width: 9em;
}
h1 {
font-size: 1.3em;
margin-left: 5px;
margin-right: 10px
}
.cabeceras {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: -10px;
}
.central {
display: flex;
}
aside {
margin-left: 1em;
}
footer {
display: flex;
justify-content: space-between;
}
- Visualiza la página web desde el editor Brackets con el botón
. También puedes verla desde este enlace: indice2.html
- Desde el editor Brackets, en el menú Archivo y elige Guardar con el mismo nombre para los dos archivos que hemos modificado.
- Si no dispones de un editor de texto (por ejemplo, si estás viendo este curso desde un dispositivo móvil) puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.
Cursos Informática Gratuitos
