Header

Partagez | 

II a - Mise en pratique - Mise en page

Message Sujet: II a - Mise en pratique - Mise en page   Lun 1 Aoû - 11:05

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Le personnel

Bons Points (BP) : 106
Voir le profil de l'utilisateur

Exercice

Tous niveaux

II a - Mise en pratique
Mises en page





Bonjour,
Si tu es arrivé(e) jusqu'ici c'est que tes connaissances en HTML et CSS sont déjà relativement bonnes, ou que tu penses qu'elles le sont. Et c'est ce que nous allons vérifier avec un exercice de mise en pratique.
Dans celui-ci, tu vas devoir faire le codage d'une mise en page à partir d'une maquette. Attention cependant, le but est d'utiliser les nouvelles balises de l'HTML5 et que le résultat final soit semblable au visuel fourni. Tu devras donc utiliser toutes tes compétences à la fois en HTML et en CSS pour y parvenir. Pas besoin de javascript pour cet exercice.

Les choses à savoir

Avant de commencer, il te faut savoir certaines choses primordiales. Voici la liste des connaissances dont tu auras besoins et une série de tutoriels à lire si tu ne connais pas certaines choses.
- Les balises HTML5 : tutoriel
- La mise en page en CSS : tutoriel
- Positionnement en CSS : tutoriel
- Flexbox (autre possibilité de positionnement, responsive) : tutoriel
- Transformations CSS : tutoriel
- Faire une infobulle : tutoriel
- Google Font : tutoriel

La maquette

Voici la maquette de la page à reproduire. Comme tu peux le voir, il s'agit d'une fiche de pub pour un forum RPG. Il y a un header qui se constitue juste d'une image (fournie ci-dessous), 5 blocs et pour finir un footer avec les crédits.

Au niveau des 5 blocs nous aurons, un bloc de contexte dont la hauteur dépend de ce dernier, un bloc avec les statistiques du forum avec une hauteur fixe, un bloc avec les nouveautés et faisant la même hauteur que le précédent, un bloc avec les prédéfinis du forum (une infobulle doit être visible lorsqu'on passe sur l'une des images de prédéfini) et pour finir un bloc avec les deux boutons du forums. Ce qui donne en image ceci :
Spoiler:
 

Les ressources

Les images :
- Header : http://site.school-of-progress.fr/exercices/img-exo-codage/mep/header.png
- Contexte : http://site.school-of-progress.fr/exercices/img-exo-codage/mep/titre-contexte.png
- Statistiques : http://site.school-of-progress.fr/exercices/img-exo-codage/mep/titre-stats.png
- Nouveautés : http://site.school-of-progress.fr/exercices/img-exo-codage/mep/titre-news.png
- Un prédéfini : http://site.school-of-progress.fr/exercices/img-exo-codage/mep/avatar.png
- Bouton 1 : http://site.school-of-progress.fr/exercices/img-exo-codage/mep/bouton-1.jpg
- Bouton 2 : http://site.school-of-progress.fr/exercices/img-exo-codage/mep/bouton-2.jpg

Les informations supplémentaires :
- Police principale : Verdana
- Première lettre : Parisienne (Google Font)
- Police des titres : Philosopher (Google Font)

- Couleur fond : #e9e9e8
- Bordures principales (15px) : #757c44
- Bordures ou fond des blocs : #8ba549
- Couleur texte : #393028
- Couleur liens : #8ba549



Revenir en haut Aller en bas
II a - Mise en pratique - Mise en page
Page 1 sur 1
 Sujets similaires
-
» Onglets d'admin - mise à jour de la page d'accueil
» S. Demande de mise en page - Site du forum
» [Nocturne] Mise en page
» Mise en Page d'acceuil
» [Basil] Demande de mise en page
Réponse rapide

School of Progress :: La bibliothèque :: Livret d'exercices :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens