TP n°1 Framework et templates
Pour compléter votre formation en développement front end, après avoir abordé les bases de l'intégration HTML CSS, les optimisations SEO, l'audit de site web, nous allons travailler à l'intégration d'une charge graphique au format HTML CSS en recourant à un framework HTML CSS.
Les sources
- un dossier compressé contenant les sources du framework foundation
- Télécharger le fichier (foundation-6.2.1-complete 189,69 Ko)
- Une fois décompressé vous trouverez dans ce répertoire les fichiers HTML CSS et JS, le fichier index.html pourra vous servir de base à votre intégration HTML
- une charte graphique d'une page web
Les éléments à connaitre ou à utiliser
- Un framework HTML CSS JS est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. Ils premettent de gérer la compatibilité sur les différents navigateurs (reset CSS) de faciliter le positionnement CSS (« grille » CSS) et de faciliter la gestion des résolution d’écrans multiples à l’heure de la mobilité (responsive design)
- A lire avant de commencer l'intégration HTML
- A lire également :
Le travail à effectuer
- récupérer et décompresser les sources
- ouvrir le fichier PSD et le fichier jpeg pour consulter la charte graphique de la page web à intégrer
- ouvrir le fichier index.html
- si vous n'êtes pas initiés à l'intégration HTML en grille, lisez cet article http://www.emmanuelgeorjon.com/framework-css-foundation-4931/
- dupliquer le fichier index.html en un autre fichier (par exemple, accueil.html) puis ouvrir ce fichier avec votre éditeur de code
- commencer l'intégration de la page web
- en intervenant dans le fichier HTML (d'abord en supprimant le contenu HTML puis en intégrant votre propre contenu)
- en indiquant vos règles CSS dans le fichier app.css
