1
1ºDAM-A. LMSGI. Examen . Tema 3º. 09/03/2023
1º Parte
Escribir una pagina web como aparece en la imagen siguiendo una serie de recomendaciones y teniendo en cuenta que en la
carpeta del examen se disponen de los siguientes archivos para utilizar:
● [Link]. Plantilla del documento html conteniendo ya todo el texto de la página.
● [Link]. Plantilla del documento CSS divida en secciones, dentro de las cuales se colocarán obligatoriamente las
reglas según la función de diseño que se piden posteriormente.
● [Link], [Link], [Link], [Link]. Imágenes a incluir en el documento html.
Las reglas que habrá que aplicar según su función son:
Respecto a la maquetación:
1. Se usará la imagen [Link] como fondo de la página.
2. La contenedora o capa principal de la página, deberá aparecer centrada y con un ancho fijo (900px).
3. Usar para todas las capas posicionamiento flotante para posicionarlas
4. Esta misma capa contenedora contendrá otras tres: una para la cabecera, otra para el menú lateral de enlaces junto a
la imagen del tapiz, y otra con el contenido de la receta
5. La capa con el contenido de la receta, a su vez, contendrá cuatro capas: una superior con el nombre junto a la imagen
del plato, otra lateral para los ingredientes, otra para la descripción de los pasos de la receta y, la última, para un pie
donde se muestran los datos de dificultad, preparación, calorías y coste.
Respecto a los márgenes y relleno:
1. Usar un margen inferior para la cabecera de la página de forma que quede bien separada de sus dos capas inferiores
(las capas lateral y contenido)..
2. Usar rellenos porcentuales para separar los contenidos de sus bordes.
3. Usar rellenos porcentuales para separar entre sí los datos que aparecen en el pie (dificultad, preparación, etc.).
Respecto a los bordes y fondos:
1. La cabecera, el borde izquierdo de la capa de contenido y el borde superior de la imagen del tapiz usan como color de
borde el marrón #8A4B08.
IES Zaidín Vergeles de Granada. Departamento de Informática.
2
Lenguajes de marcas y sistemas de gestión de la información.
2. En el pie de la receta se usa como color de fondo el #F5D0A9;
Respecto a la tipografía:
1. El tipo de letra para la lista de ingredientes será Tahoma y con un tamaño 20% inferior al tamaño estándar.
2. El texto de la receta deberá estar ajustado o alineado a ambos márgenes.
3. El texto que aparece en marrón usa el color #8A4B08.
4. Los elementos del menú lateral de enlaces deben aparecer sin viñetas y en color negro.
5. Cuando el cursor se sitúe encima de los enlaces anteriores debe aparecer en rojo, y aumentar su letra en un 5%
NOTA:
● Se deberán definir las reglas de la forma más efectiva sobre todo en lo que respecta al uso de clases e identificadores
apropiados.
● No añadir reglas que produzcan presentaciones que no se piden o que difieran de las que muestra la imagen de la página
web de muestra. (No se trata de “inventar algo”, sino de ajustarse a lo que se pide…)
● La puntuación máxima de cada parte del ejercicio será:
⋅ Código HTML de la página....: 0.75 puntos.
⋅ Reglas de maquetación...........: 3.25 puntos.
⋅ Reglas de márgenes y relleno: 2.25 puntos.
⋅ Reglas de bordes y fondo.......: 1 puntos.
⋅ Reglas tipográficas..................: 1.25 puntos.
2º Parte
Dado el siguiente código HTML
<main>
<header>Header</header>
<nav>Nav</nav>
<section>Section</section>
<aside>Aside</aside>
<footer>Footer</footer>
</main>
Realiza el siguiente diseño para móviles (0,75 pto.)
IES Zaidín Vergeles de Granada. Departamento de Informática.
3
1ºDAM-A. LMSGI. Examen . Tema 3º. 09/03/2023
La altura de las filas sería la siguiente: 150px 100px 1fr 100px
El ancho de la columna es del 100 %.
Realiza el siguiente diseño para tablets y ordenadores cuando la resolución sea mayor de 600 px (0,75 punto)
La altura de las filas sería la siguiente: 150px 100px 1fr 100px
El ancho de la columna aside es de 200 px. El ancho de la columna section es el sobrante.
Chuleta para CSS-GRID:
grid-template-columns
grid-template-rows
grid-area
grid-template-areas
grid-template
@media
IES Zaidín Vergeles de Granada. Departamento de Informática.