TP19- Framework Foundation

TP 19 – Framework Foundation
Foundation 6
Créer une structure de page avec Foundation
1- Télécharger la version complete de Foundation
http://foundation.zurb.com/sites/download.html/
2- Dezzipez ce dossier qui sera renommé « demo-foundation6 » dans le
[www]
3- Copiez-collez index.html qui sera renommé « page-demo.html »
4- Avec ce qui a été vu en cours et en vous servant de la page « index.html »
comme exemple, reproduisez le modele ci-dessous.
Pour vous guider :
 columns=bordure rouge
 row=bordure noire
 1ere colonne= large-4
Format écran
Page 1 sur 5
http://31-place-web.net/HTML5-CSS3
TP 19 – Framework Foundation
Format mobile
Note : par défaut les 3 blocs boutons gris se positionnent les uns sous les autres. Vous
pouvez donner l'apparence ci-dessus en jouant sur les classes small-6 / small-12
Page 2 sur 5
http://31-place-web.net/HTML5-CSS3
TP 19 – Framework Foundation
5- Ajoutez un menu en haut de page en vous servant de la documentation
officielle : http://foundation.zurb.com/sites/docs/top-bar.html
6- Testez des «building blocks» (blocks de code « prets à l'emploi ») :
http://zurb.com/building-blocks
- Insérer un footer : http://zurb.com/building-blocks/centered-footer (ne pas
copier la partie HTML correspondant au header).
Page 3 sur 5
http://31-place-web.net/HTML5-CSS3
TP 19 – Framework Foundation
7- Enlever les bordures, ajouter une div avec background-color #E6E6E6
autour du menu.
Écran
Mobile
Page 4 sur 5
http://31-place-web.net/HTML5-CSS3
TP 19 – Framework Foundation
8- Vous pouvez tester des structures déjà construites :
http://foundation.zurb.com/templates.html
Page 5 sur 5
http://31-place-web.net/HTML5-CSS3