Voir la source de Exercice CSS : Templates

= Template 2 colonnes  =

'''1. ouvrir deux onglets contenant ces pages&nbsp;:''' 

*http://html-ipsum.com/ 
*http://www.lipsum.com/ 
*http://www.blog-expert.fr/outils/aide-memoire-css-351.html ( document à ouvrir absolument )

<br> 

'''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'

<br> 

'''3. compléter les blocs avec du contenu HTML ( HTML IPSUM&nbsp;)''' 

*insérer un titre de premier niveau &nbsp;dans le 'header' ( titre assez court )<br> 
*dans la colonne 'content' insérer qques 3&nbsp;paragraphes ( HTML IPSUM&nbsp;:&nbsp;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&nbsp;: Standard List Navigation ) 
*dans le 'footer', ajouter un paragraphe et ajouter qques liens dans celui çi

<br> 

'''NB: &nbsp;'''à 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. 

<br> 

'''4. ajouter qques propriétés à l'element 'body':'''<br> 

*une largeur à 800px 
*une couleur de fond au choix ( plutôt claire ) 
*spécifier une police ( se rendre sur cette [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&nbsp;)

&nbsp;<br>'''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&nbsp;: [http://www.w3schools.com/CSS/css 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&nbsp;: ''border: 50px solid red;'' ) 
*ajouter une marge interne ( ''padding'' ) de 10px

<br>'''Pour ceux qui ont le temp''''''s'''&nbsp;: Survoler cette page&nbsp;: [http://www.thefloatingfrog.co.uk/web-design/10-css-shorthand-techniques-youll-use-everyday/ 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 

<br>'''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&nbsp;?) 
*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 )

<br> '''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

<br> '''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&nbsp;?) 
*ajouter une marge externe à droite de l'image pour la décoller du texte 
*ajouter une bordure à chaque image <br>

<br> 

Il manque un titre à vos articles&nbsp;!!!<br> 

*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)

<br> 

'''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é (&nbsp;http://wiki.labomedia.org/index.php/CSS#Quelques_r.C3.A8gles_bien_utiles ) 
*Chaque 'div' aura des coins ronds

<br> '''8. le footer'''&nbsp; 

*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

<br> '''9. dans la sidebar'''&nbsp; 

*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

<br> '''10. AJuster les couleurs''' 

*manipuler cet outil et ajuster les couleurs de votre template&nbsp;: http://colorschemedesigner.com/

<br> 

<br> '''11. insérer une police ( Google Web Font Directory )'''&nbsp; 

*Pour tester les polices disponible sur Google Font Directory, utilisez ceci&nbsp;: http://all-for-design.com/gfd-tool/ 
*Puis se rendre ici&nbsp;: http://code.google.com/webfonts, sélectionner la police que vous souhaitez insérer et trouver l'onglet "get the code"

<br> 

= Blog recettes cuisine'''<br>'''  =

<br> '''1. Repérer les éléments constitutifs de ces blogs''' 

http://thecutecook.tumblr.com/ 

http://sandwichface.com/ 

<br> 

'''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&nbsp;: 

&nbsp;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 )

<br> 

'''3. Le template HTML.''' 

*créer un bloc (''div'') &nbsp;'conteneur'&nbsp;: 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;<br> 
*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'&nbsp;; 
*dans le bloc '''recette''' créer les éléments suivants&nbsp;:

&nbsp;&nbsp; &nbsp; &nbsp;- un titre de second niveau ( nom de la recette ); 

&nbsp;&nbsp; &nbsp; &nbsp;- un paragraphe contenant une image ( format PNG, 600x400, optimisez la taille de chaque image avec le taux de compression ); 

&nbsp;&nbsp; &nbsp; &nbsp;- une liste non ordonnée contenant la liste des éléments ( cette liste devrait avoir un attribut '''class''' dont la valeur est '''ingredients''' ); 

&nbsp;&nbsp; &nbsp; &nbsp;- quelques paragraphes pour la description de la recette; 

&nbsp;&nbsp; &nbsp; &nbsp;- une liste non ordonnée de mots-clés. &nbsp;&nbsp; 

*Créer un bloc 'pied-de-page' qui contiendra&nbsp;:

&nbsp;&nbsp; &nbsp; &nbsp;- un titre de niveau 3 contenant le texte&nbsp;: "vous aimerez peut être aussi ..."; 

&nbsp;&nbsp; &nbsp; &nbsp;- une liste horizontale constituée d'images 4 images ( 150x150 ); 

&nbsp;&nbsp; &nbsp; &nbsp;- chaque image est un lien vers une nouvelle recette de cuisine ( exemple pour le lien&nbsp;: &lt;a href=#&gt;...&lt;/a&gt; donc un dièse au niveau de l'attribut '''href'''). 

<br> 

'''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&nbsp; 

<br> 

'''5. Premiers retouches de style&nbsp;:''' Quelques rappels de sélecteurs CSS 
<pre>/* 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 &gt; li {}


</pre> 
<br> 

*Les listes doivent être présentées horizontalement et sans puces ( propriétés '''diplay:inline;'''et'''''<i>list-style-type:none;'&nbsp;</i> 
*l'écart entre les paragraphes doit être géré avec la marge externe ('''margin'''); 
*le texte de paragraphes doit être justifié; 
*ajuster &nbsp;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.

<br> 

'''6. ajouter les finitions &nbsp;au niveau du style ( à faire avec beaucoup de soin )&nbsp;:'''<br> 

*utiliser un des liens suivants pour sélectionner les couleurs du blog:

&nbsp;&nbsp; &nbsp; &nbsp;-&nbsp;http://kuler.adobe.com/#themes/rating?time=30 

&nbsp;&nbsp; &nbsp; &nbsp;-&nbsp;http://colorsuckr.com/?img=http://farm4.static.flickr.com/3005/3043760419_a25ffb950a.jpg&amp;fid=3043760419&amp;q=colorful 

&nbsp;&nbsp; &nbsp; &nbsp;-&nbsp;http://www.colourlovers.com/business/trends/branding/7830/Groyneftegas 

&nbsp;&nbsp; &nbsp; &nbsp;-&nbsp;http://colorschemedesigner.com/ 

*appliquer les différentes couleurs&nbsp;selon votre choix; 
*sélectionner une ou plusieurs polices que vous appliquerez aux éléments de votre choix (&nbsp;http://code.google.com/webfonts ).

&nbsp;&nbsp; &nbsp; &nbsp;- Prenez le temps de regarder ceci ( télécharger le PDF )&nbsp;: http://all-for-design.com/typographie/google-fonts-tests-de-lisibilite&nbsp; &nbsp; 

*Générer une image de fond avec l'un des outils suivants:

&nbsp;&nbsp; &nbsp; &nbsp;-&nbsp;http://lab.rails2u.com/bgmaker/ 

&nbsp;&nbsp; &nbsp; &nbsp;-&nbsp;http://www.tartanmaker.com/ 

&nbsp;&nbsp; &nbsp; &nbsp;-&nbsp;http://www.stripegenerator.com/ 

&nbsp;&nbsp; &nbsp; &nbsp;-&nbsp;http://www.stripemania.com/ 

&nbsp;&nbsp; &nbsp; &nbsp;-&nbsp;http://www.bgpatterns.com/<br> 

*Intégrer l'image de fond - sur l'élément 'body'&nbsp;: pour rappel&nbsp;body ''{background:#ffffff url('img_tree.png') no-repeat 0 0;}''&nbsp; 
*créer vos propres puces pour la liste d'ingrédients ( utiliser Photoshop - taille carrée de quelques pixels )&nbsp;;<br> 
*insérer vos puces ( '''list-style-image: url(puce.png;''' ).



= redvelvetart  =

*Se rendre&nbsp;: https://www.redvelvetart.com/ 
*Copier-coller le code HTML du template (refaire l'indentation si nécessaire )&nbsp;:&nbsp;
<pre>&lt;div id="container"&gt;

    &lt;div id="sidebar"&gt;  &lt;!-- colonne de gauche contenant le titre et la liste des catégorie --&gt;

        &lt;h1&gt;&lt;/h1&gt;

        &lt;form&gt;

            &lt;input type="text" id="search-input"&gt;

            &lt;button&gt;&lt;button&gt;

        &lt;/form&gt;

        &lt;ul id="sidebar-navigation"&gt;

             &lt;li&gt;original art&lt;/li&gt;

             &lt;li&gt;art prints&lt;/li&gt;

        &lt;/ul&gt;

    &lt;/div&gt; &lt;!-- sidebar --&gt;


    &lt;div id="main"&gt; &lt;!-- colonne principale --&gt;

         &lt;ul id="top-navigation"&gt;

             &lt;li&gt;home&lt;li&gt;

             &lt;li&gt;features items&lt;/li&gt;

         &lt;/ul&gt;

         &lt;div id="main-content"&gt;

             &lt;div id="products-image"&gt;

             &lt;/div&gt; &lt;!-- products-images--&gt;

            &lt;div id="featured-products"&gt;

                &lt;ul&gt;  

                    &lt;li&gt;&lt;/li&gt;

               &lt;/ul&gt;

            &lt;/div&gt; &lt;!--  featured-products --&gt;

           &lt;div id="presentation"&gt;

           &lt;/div&gt;

        &lt;/div&gt; &lt;!-- main-content --&gt;

    &lt;/div&gt; &lt;!-- main --&gt;


&lt;/div&gt; &lt;!-- container --&gt;



</pre> 
<br> 

*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. &nbsp; 
*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 )&nbsp;&nbsp; 
*Compléter le bloc "''présentation"''&nbsp;avec du faux texte. 
*Ecrire le CSS permettant de positionner les blocs ( ''float'', ''margin'', ''padding'' ....). 
*Créer des images sous Photoshop&nbsp;: prenez exemple avec ces images (&nbsp;!!! le fond des images est transparent &nbsp;):

&nbsp;&nbsp; &nbsp;-&nbsp;https://www.redvelvetart.com/skin/frontend/rva_interface/rva/images/nav_top_home.gif 

&nbsp;&nbsp; &nbsp;-&nbsp;https://www.redvelvetart.com/skin/frontend/rva_interface/rva/images/toplinks_my_account.gif 

&nbsp;&nbsp; &nbsp;-&nbsp;https://www.redvelvetart.com/skin/frontend/rva_interface/rva/images/cat_original_art.gif<br> 

*Positionner les images sur les éléments correspondants ( = sur les liens correspondants )

&nbsp;&nbsp; &nbsp;- pour les images du bloc "''featured-products" ''la bordure a été réalisée comme ceci'':&nbsp;:&nbsp;https://www.redvelvetart.com/skin/frontend/rva_interface/rva/images/img_border_90.gif'' 

*Installer un slideshow ( http://nivo.dev7studios.com/)&nbsp;en lieu et place de l'image contenue dans le bloc "''products-image''" ( me demande à cette étape) ( voir aussi ce slideshow&nbsp;:&nbsp;http://davidmassiani.com/hevoq/ pour info) 
*Utiliser cet outil pour générer un sprite&nbsp;: http://csssprites.com/ pour le menu "''top-navigation''"<br>

[[Catégorie:Vrac]]