Exercice CSS : Templates

De Centre de Ressources Numériques - Labomedia
Aller à : navigation, rechercher

Template 2 colonnes

1. ouvrir deux onglets contenant ces pages :


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:


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



11. insérer une police ( Google Web Font Directory ) 


Blog recettes cuisine


1. Repérer les éléments constitutifs de ces blogs

http://thecutecook.tumblr.com/

http://sandwichface.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://colorsuckr.com/?img=http://farm4.static.flickr.com/3005/3043760419_a25ffb950a.jpg&fid=3043760419&q=colorful

      - 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.tartanmaker.com/

      - http://www.stripegenerator.com/

      - http://www.stripemania.com/

      - http://www.bgpatterns.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

<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

Récupérée de « https://wiki.labomedia.org/index.php?title=Exercice_CSS_:_Templates&oldid=24675 »