Exercice CSS : Templates
Template 2 colonnes
1. ouvrir deux onglets contenant ces pages :
- http://html-ipsum.com/
- http://www.lipsum.com/
- http://www.blog-expert.fr/outils/aide-memoire-css-351.html ( document à ouvrir absolument )
2. Créér les bases du template
- créer un bloc 'header' c'est à dire une DIV avec une attribut 'id' dont la valeur est 'header'
- créer un bloc principal, c'est à dire une DIV avec une attribut 'id' dont la valeur est 'main'
- dans le bloc principal ( 'main' ) créer une colonne de contenu principal c'est à dire une DIV avec une attribut 'id' dont la valeur est 'content'.
- dans le bloc principal ( 'main' ) créer une colonne une sidebar c'est à dire une DIV avec une attribut 'id' dont la valeur est 'sidebar'.
- créer un 'footer', c'est à dire une DIV avec une attribut 'id' dont la valeur est 'footer'
3. compléter les blocs avec du contenu HTML ( HTML IPSUM )
- insérer un titre de premier niveau dans le 'header' ( titre assez court )
- dans la colonne 'content' insérer qques 3 paragraphes ( HTML IPSUM : Medium Paragraph) auxquels vous ajouterez un attribut 'class' dont la valeur est 'article'
- dans la colonne 'sidebar' insérer une liste qui servira de navigation ( HTML IPSUM : Standard List Navigation )
- dans le 'footer', ajouter un paragraphe et ajouter qques liens dans celui çi
NB: à partir de maintenant, ll s'agit ( principalement ) de modifier le fichier CSS, ne pas oublier les points virgules à la fin de chaque propriétés.
4. ajouter qques propriétés à l'element 'body':
- une largeur à 800px
- une couleur de fond au choix ( plutôt claire )
- spécifier une police ( se rendre sur cette font.asp page et survoler le début de l'article jusqu'au premier exemple que vous pourrez copier coller en modifiant ensuite les valeurs )
4. ajouter qques propriétés à l'element 'body':
- une largeur à 800px
- une couleur de fond au choix ( plutôt claire )
- spécifier une police ( se rendre sur cette page : http://www.w3schools.com/CSS/css font.asp page et survoler le début de l'article jusqu'au premier exemple que vous pourrez copier coller en modifiant ensuite les valeurs )
- une taille de police à 12px;
- ajouter une bordure de 5px, de type 'solid' et de couleur noire ( un exemple : border: 50px solid red; )
- ajouter une marge interne ( padding ) de 10px
'Pour ceux qui ont le temp's : Survoler cette page : http://www.thefloatingfrog.co.uk/web-design/10-css-shorthand-techniques-youll-use-everyday/ qui vous donne les raccourcis CSS qu'on utilise tous les jours
5. ajouter qques propriétés à nos colonnes
- spécifier une largeur de 500px au bloc 'content'
- spécifier une largeur de 200px au bloc 'sidebar'
- faire flottter le bloc 'content' à gauche et le bloc 'sidebar' à droite ( Que se passe t'il ?)
- ajouter la règle 'clearfix' ( demander si vous avez oublier ) au bloc 'main' pour clearer le flux ( même si vous ne constatez pas de problème de flux, il est bon de le mettre pour les navigateurs plus anciens dont vous ne savez pas comment ils réagiront )
6. la sidebar
ajouter un titre ( H2 ou H3 à vous de le déterminer - demander si doute ) et insérer dans ce titre le texte 'navigation'
- le texte de ce titre doit être mis en capitale ou en majuscule au choix ( text-transfom )
- Sélectionner la liste et supprimer les puces ( list-style-type ), la marge externe et interne
- au passage, on va styliser tous les liens de la page et on va leur spécifier une couleur de texte spécifique, de plus les liens de devront pas ê soulignés par défaut ( test-decoration: none )
- Les liens survolés ( a:hover {} ) doivent être par contre soulignés
- Les liens visités ( a:visited {} ) doivent avoir une couleur spécifique également
7. le bloc "content"
- sélectionner ( uniquement ) les paragraphes du bloc content et ajouter les propriétés suivantes:
- le texte des paragraphes doit être justifié *la première ligne de chaque paragraphe doit avoir une legére indentation ( text-indent - maximum 30px )
- il faut ajuster l'espace entre vos paragraphes ( avec la marge externe de chacun des paragraphes )
- chaque paragraphe pourrait ê séparés graphiquement par une ligne horizontale ( border-bottom: ... )
- ajouter une image 150x150 au tout début de chaque paragraphe
- faire flotter à gauche chaque image contenu dans las paragraphes du bloc 'content' ( Que se passe t'il ?)
- ajouter une marge externe à droite de l'image pour la décoller du texte
- ajouter une bordure à chaque image
Il manque un titre à vos articles !!!
- avant chaque article, insérer une balise de titre ( H2 /H3 à vous de voir - demander si doute )
- le texte de chaque titre doit ê en capitale ( text-transform)
Ceux qui le veulent peuvent encapsuler chaque article ( titre + paragraphe avec sa photo ) dans une div
chacune de ces 'div' portera un attribut 'class' dont la valeur sera 'article'. Vous ajouterez les styles suivants:
- chaque 'div' aura une couleur de fond avec opacité ( http://wiki.labomedia.org/index.php/CSS#Quelques_r.C3.A8gles_bien_utiles )
- Chaque 'div' aura des coins ronds
8. le footer
- sélectionner les 'li' et y ajouter la propriété display: inline ( Que se passe t'il )
- ajouter une marge externe droite à chaque 'li', faire varier cette marge pour étaler au mieux les éléments sur la largeur de la page
- les liens contenus dans le footer doivent avoir une couleur spécifique assez claire
9. dans la sidebar
- ajouter une div dans laquel vous placerez un formulaire de recherche avec un bouton de soumission
- dans une autre 'div', vous placerez une mention "s'inscrire à la newsletter' accompagnée d'une case à cocher
10. AJuster les couleurs
- manipuler cet outil et ajuster les couleurs de votre template : http://colorschemedesigner.com/
11. insérer une police ( Google Web Font Directory )
- Pour tester les polices disponible sur Google Font Directory, utilisez ceci : http://all-for-design.com/gfd-tool/
- Puis se rendre ici : http://code.google.com/webfonts, sélectionner la police que vous souhaitez insérer et trouver l'onglet "get the code"
Blog recettes cuisine
1. Repérer les éléments constitutifs de ces blogs
http://thecutecook.tumblr.com/
2. Liste des éléments qui figurerons sur le template
Il s'agit d'un template de 800 px de large, qui sera centré.
!!! Chaque recette devra respecter l'ordre d'affichage suivant :
nom recette
- une image
- un liste d'ingrédients
- un texte comprenant plusieurs paragraphes pour la description de la recette
- un liste de tags/mots-clés ( listant les ingrédients caractéristiques de chaque recette )
3. Le template HTML.
- créer un bloc (div) 'conteneur' : celle çi servira à centrer le site ( TOUS LES ELEMENTS QUI SUIVENT DOIVENT ETRE PLACES DANS LE CONTENEUR);
- créer un bloc (div) 'en-tete' avec à l'intérieur un titre de premier niveau pour le titre du blog;
- créer un bloc (div) 'contenu' qui contiendra la liste de toutes les recettes;
- dans le bloc contenu, créer une div sans attribut id mais avec un attribut class dont la valeur sera 'recette' ;
- dans le bloc recette créer les éléments suivants :
- un titre de second niveau ( nom de la recette );
- un paragraphe contenant une image ( format PNG, 600x400, optimisez la taille de chaque image avec le taux de compression );
- une liste non ordonnée contenant la liste des éléments ( cette liste devrait avoir un attribut class dont la valeur est ingredients );
- quelques paragraphes pour la description de la recette;
- une liste non ordonnée de mots-clés.
- Créer un bloc 'pied-de-page' qui contiendra :
- un titre de niveau 3 contenant le texte : "vous aimerez peut être aussi ...";
- une liste horizontale constituée d'images 4 images ( 150x150 );
- chaque image est un lien vers une nouvelle recette de cuisine ( exemple pour le lien : <a href=#>...</a> donc un dièse au niveau de l'attribut href).
4. Copier-coller la div ayant la classe 'recette' pour avoir 3 recettes.
modifier l'image, la liste d'ingrédients et le nombre de paragraphes
5. Premiers retouches de style : Quelques rappels de sélecteurs CSS
/* tous les paragraphes */
p {}
/* élément dont l'attribut 'id' est 'mon_paragraphe' */
#mon_paragraphe
/* élément(s) dont l'attribut 'class' est 'mon_paragraphe' */
.mon_paragraphe
/* tous les éléments d'une liste */
ul li {}
/* lien surlignés */
a:hover {}
/* pour ceux qui veulent tester */
ul > li {}
- Les listes doivent être présentées horizontalement et sans puces ( propriétés diplay:inline;'etlist-style-type:none;'
- l'écart entre les paragraphes doit être géré avec la marge externe (margin);
- le texte de paragraphes doit être justifié;
- ajuster la marge externe ou interne (padding) des autres éléments selon votre choix;
- ajouter une bordure aux images si vous le souhaitez;
- fixer la couleur des liens survolés.
6. ajouter les finitions au niveau du style ( à faire avec beaucoup de soin ) :
- utiliser un des liens suivants pour sélectionner les couleurs du blog:
- http://kuler.adobe.com/#themes/rating?time=30
- http://www.colourlovers.com/business/trends/branding/7830/Groyneftegas
- http://colorschemedesigner.com/
- appliquer les différentes couleurs selon votre choix;
- sélectionner une ou plusieurs polices que vous appliquerez aux éléments de votre choix ( http://code.google.com/webfonts ).
- Prenez le temps de regarder ceci ( télécharger le PDF ) : http://all-for-design.com/typographie/google-fonts-tests-de-lisibilite
- Générer une image de fond avec l'un des outils suivants:
- http://lab.rails2u.com/bgmaker/
- http://www.stripegenerator.com/
- Intégrer l'image de fond - sur l'élément 'body' : pour rappel body {background:#ffffff url('img_tree.png') no-repeat 0 0;}
- créer vos propres puces pour la liste d'ingrédients ( utiliser Photoshop - taille carrée de quelques pixels ) ;
- insérer vos puces ( list-style-image: url(puce.png; ).
redvelvetart
- Se rendre : https://www.redvelvetart.com/
- Copier-coller le code HTML du template (refaire l'indentation si nécessaire ) :
<div id="container">
<div id="sidebar"> <!-- colonne de gauche contenant le titre et la liste des catégorie -->
<h1></h1>
<form>
<input type="text" id="search-input">
<button><button>
</form>
<ul id="sidebar-navigation">
<li>original art</li>
<li>art prints</li>
</ul>
</div> <!-- sidebar -->
<div id="main"> <!-- colonne principale -->
<ul id="top-navigation">
<li>home<li>
<li>features items</li>
</ul>
<div id="main-content">
<div id="products-image">
</div> <!-- products-images-->
<div id="featured-products">
<ul>
<li></li>
</ul>
</div> <!-- featured-products -->
<div id="presentation">
</div>
</div> <!-- main-content -->
</div> <!-- main -->
</div> <!-- container -->
- Compléter le titre de premier niveau ainsi que les deux listes de navigation ( sidebar-navigation et top-navigation ).
- Compléter la liste "featured-products" avec des images que vous aurez sauvegardés depuis le site.
- Compléter le bloc "products-image" avec l'image que vous aurez sauvegardés depuis le site ( https://www.redvelvetart.com/media/upload/image/New_Vintage_banner.jpg )
- Compléter le bloc "présentation" avec du faux texte.
- Ecrire le CSS permettant de positionner les blocs ( float, margin, padding ....).
- Créer des images sous Photoshop : prenez exemple avec ces images ( !!! le fond des images est transparent ):
- https://www.redvelvetart.com/skin/frontend/rva_interface/rva/images/nav_top_home.gif
- https://www.redvelvetart.com/skin/frontend/rva_interface/rva/images/toplinks_my_account.gif
- https://www.redvelvetart.com/skin/frontend/rva_interface/rva/images/cat_original_art.gif
- Positionner les images sur les éléments correspondants ( = sur les liens correspondants )
- pour les images du bloc "featured-products" la bordure a été réalisée comme ceci: : https://www.redvelvetart.com/skin/frontend/rva_interface/rva/images/img_border_90.gif
- Installer un slideshow ( http://nivo.dev7studios.com/) en lieu et place de l'image contenue dans le bloc "products-image" ( me demande à cette étape) ( voir aussi ce slideshow : http://davidmassiani.com/hevoq/ pour info)
- Utiliser cet outil pour générer un sprite : http://csssprites.com/ pour le menu "top-navigation"
