Intégration d'un fichier CSS
Nous vous livrons un nouveau dossier correpondant à une page web dont le design en version desktop sera :
Le livrable est composé :
- Fichier HTML contenant tout le code HTML de la page web : index.html
- Dossier CSS contenant 2 fichiers :
- normalize.css : fichier de "reset"
- basic-style.css : fichier CSS vierge que vous allez compléter pour mettre en place le design souhaité
- Répertoire images contenant différentes images
Votre travail...
- Récupérer le dossier compressé
- Décompresser le fichier
- Ouvrir le fichier HTML dans votre éditeur de code pour parcourir/décourvrir le code
- Ouvrir le fichier CSS basic-style.css où vous devrez implanter votre code
- Ouvrir le fichier HTML dans votre navigateur pour voir le rendu actuel :
- affichage de tout le contenu HTML
- affichage prenant en compte le fichier de reset CSS
- Implantez pas à pas vos styles CSS dans le fichier basic-style.css
- Vérifiez pas à pas dans votre navigateur web (avec l'inspecteur web actif) votre avancement
- Lorsque vous aurez terminé l'affichage en version desktop vous pourrez procéder :
- aux adaptations mobiles et tablettes
- aux adaptations pour l'impression
Avancement pas à pas
Comme déjà indiqué il y a différentes manières de réaliser une intégration CSS, nous vous proposons une piste ici qui a le mérite de répondre à la logique de règles génériques établies dans les premières lignes CSS et de surcharge pour les lignes plus bas dans le code, mais de nombreuses autres manières d'envisager ce code CSS existent.
A. Dans le fichier basic-style.css procédez aux ajouts des règles CSS suivantes :
- Appliquez à la balise body :
- couleur de police : #666
- type de police : 'Ubuntu', Arial, Helvetica, sans-serif
- Taille de police : 1em
- hauteur de ligne : 1.4em
- graisse de la police : normal
- Appliquez aux la balises de headings h1 à h6 :
- graisse de la police : normal
- type de police : 'Droid Serif', Arial, Helvetica, sans-serif
- hauteur de ligne : 1.5em
- marge haute et basse : 20px
- espacements intérieurs : 0px
- Appliquez aux balises a :
- couleur de police : #0099ff
- Appliquez aux balises a lors du passage de la souris et de la navigation par clavier
- couleur de police : #000
- texte souligné
- Appliquez via le sélecteur universel les consignes CSS suivantes (cf http://www.w3schools.com/cssref/css3_pr_box-sizing.asp) :
- box-sizing:border-box
- -moz-box-sizing:border-box
- Vérifiez la page dans votre navigateur, les couleurs de police et type de police doivent apparaitre, le reste ne change pas
- Ajoutez des règles CSS sur le .wrapper :
- largeur : 92%
- largeur max : 1200px
- marges extérieures : 20px auto
- Ajoutez sur la balise header des marges intérieures hautes et basses de 15px
- Ajoutez sur l'élément ayant pour id "banner"
- flottement à gauche
- alignement texte à gauche
- mage basse : 0px
- Ajoutez sur l'élément ayant pour id : "topnav"
- flottement à droite
- mage haute : .35em
- largeur minimum de 50%
- Pour annuler les flottement appliquer à la class "cl" porter par le br qui fait suite à "topnav" :
- Ajoutez les règles CSS à l'élément ayant pour id "hero"
- couleur de fond : #f3f3f3
- bordure haute et basse : 1px solid #e2e2e2
- espacements intérieurs : 20px en haut et bas
- Ajoutez les règles CSS au h1 contenu dans l'élément ayant pour id "hero"
- hauteur de ligne : 1.2em
- marge haute : 0 ;
- marge basse :10px;
- Ajoutez les règles CSS à l'élément ayant pour id "content "
- marge haute et basse de 40px
- Ajoutez les règles CSS à la balise aside
- marge haute et basse de 40px
- Ajoutez à tous les paragraphes de la page une marge basse de 1.5em
- Vérifiez la page dans votre navigateur, le contenu est maintenant calé en largeur, le logo flotte à gauche, le menu à droite :
B. Mise en place du menu déroulant
- Ce principe est utilisé pour bon nombre de menu déroulant, il fonctionne uniquement sur des principes CSS (pas de javascript) et repose sur un code HTML constitué de listes non ordonnées imbriquées sur plusieurs niveaux (ici 2 niveaux seulement)
- Appliquer aux li compris dans ul.srt-menu
- position : relative
- largeur : auto
- marges droite et gauche : 1%
- flottement à gauche
- display type block
- texte centré dans l'élément
- Appliquer aux a compris dans ul.srt-menu li
- display type block
- couleur #0099ff
- couleur de fond : blanc
- texte centré dans l'élément
- suppression du souligné
- marges intérieures haute et basse 10px
- marges intérieures droite et gauche 5px
- Appliquer aux a compris dans ul.srt-menu li ayant pour class "current"
- Couleur blanc
- Couleur de fond #0099ff
- Nous allons maintenant par défaut cacher les ul de niveau 2 : appliquer une règle CSS agissant uniquement sur les ul inclus dans le contexte ul.srt-menu li :
- position absolue
- largeur 200px
- position par rapport au haut : 43px
- position par rapport à la gauche : 0px
- display : none (pour que le sous menu soit caché par défaut)
- couleur de fond #0099ff
- Vérifiez la page dans votre navigateur, le menu doit se présenter ainsi et le menu de niveau 2 est en permanence caché pour l'instant :
- Nous allons finaliser le menu :
- appliquer aux "ul.srt-menu li ul li"
- flottement annulé
- marge : 0
- texte centré
- appliquer aux "ul.srt-menu li ul li a"
- texte ferré à gauche
- couleur de fond : #0099ff
- couleur de police : #fff
- marges intérieurs : 5px
- Enfin nous faisons apparaitre le sous menu au passage de la souris ou lors de la navigation au clavier avec l'ajout des comportements suivants
- ul.srt-menu li:hover ul, ul.srt-menu li:focus ul {
display: block;
background: #ccc
}
- Une fois cette étape réalisée vous avez mis en place un menu déroulant sur 2 niveaux ! Pour plus d'infos sur ces principes : http://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/
C. Mise en forme de la zone de contenu et du bas de page (footer)
Vous devez continuer l'exercice en réalisant la mise en forme de la zone de contenu "section" et "footer" en utilisant les principes CSS vus en cours.
D. Mise en place des adaptations mobiles et tablettes
Sur la base de notre cours précédent vous pouvez ensuite tester l'affichage de la page sur mobile et tablette et améliorer la qualité d'accueil des internautes, l'ergonomie et le design selon les principes de responsive design.
