Exercices pratiques à partir du kit Blue Flower

Avant de vous lancer, si vous êtes un peu novice dans le domaine, faites d'abord ces petits exercices qui vous aideront à bien comprendre comment tout fonctionne.

Visuel du kit Blue Flower : Kit Blue Flower

Visuel du kit graphique

Téléchargez le kit graphique Blue Flower et enregistrez-le dans un dossier spécifique (comme par exemple "Mon site internet"). Décompressez-le (extraire) dans ce même dossier.*

Tuto

Pour pouvoir décompresser le fichier blue-flower.zip, vous devez disposer d'un logiciel de compression / décompression d'archives de type ZIP, ARJ, RAR (voir notre chapitre précédent : Créer un site internet, Que faire des fichiers téléchargés).

Ouvrez ensuite la page html avec votre éditeur de site web (Araneae par exemple) ainsi qu'avec votre navigateur web (Firefox par exemple).

Quelles sont les principales caractéristiques structurelles de ce kit ?

Lorsque vous observez ce kit, vous pouvez facilement en dégager les principaux axes qui sous-tendent sa charpente. Au premier coup d'oeil, vous remarquerez certainement qu'il est clairement composé de trois parties : un haut (image florale bleue) sur toute la largeur du kit, et un bas divisé en deux colonnes, dont l'une d'elles plus large. Le titre du site se trouve tout en haut à gauche, suivi du menu principal. La colonne de gauche reprend le contenu proprement dit (texte précédé d'un titre, éventuellement accompagné d'une image) et la mince colonne de droite affiche le sous-menu avec diverses rubriques.

Tous ces éléments sont facilement modifiables et nous allons donc les passer en revue à travers les exercices pratiques ci-dessous.

A propos des textes : comment modifier leur couleur ?

Tuto

Dans la feuille de style (css), vous devez définir un style par défaut pour les caractères d'écriture. Dans notre kit exemple Blue Flower, les caractères d'écriture par défaut sont de couleur grise (même si de nombreux textes sont en bleu ou ocre). Cette couleur (color) par défaut des caractères est généralement indiquée dans la partie "body" de la css.

body { margin : 0 ; padding : 0 ; background : #fff ; text-align : center; font-size : 0.7em; color : #575449 ; font-family : arial ; line-height : 18px; }

Nous vous proposons de transformer la couleur que nous avions choisie par défaut par du rouge. Effacez le code correspondant à la couleur grise (575449) et remplacez-le par du rouge (FF0000). Enregistrez votre document css et visionnez le résultat dans votre navigateur (n'oubliez pas de rafraichir la page dans le navigateur à chaque modification).

Tuto

> Les codes couleurs en html : code-couleur.com

> Le code text-align correspond à l'alignement du paragraphe (à gauche, à droite, centré, justifié), le font-size s'applique à la taille des caractères, le font-family est la police d'écriture et le line-height définit l'espacement des lignes. La liste des balises html utilisées sur nos kits est définie au prochain chapitre.

A propos des textes : comment modifier la couleur particulière des titres ?

Vous souhaitez modifier la couleur des titres principaux de la colonne de gauche.

Couleur initiale du titre (bleue)

La hiérarchie des titres est indiquées par les balises h, de h1 à h6 par ordre décroissant d'importance. Le titre "hendrerit facilisi" est un titre de deuxième catégorie (le titre principal de ce kit est le titre du site). Dans la CSS (xxx style.css), cherchez donc "contenu h2", ce qui donne ceci :

#contenu h2 { font-size : 1.6em ; text-transform : uppercase ; padding : 0 ; margin: 0 ; color : #0072BB; font-weight : normal ; }

Changez le code couleur (color) pour obtenir une autre couleur.

Par exemple, transformez le bleu utilisé (0072BB) en du orange (F66B00).

Tuto

> Le code le font-weight définit le style des caractères d'écriture (normal, gras, italique). La liste des balises html utilisées sur nos kit est définie au prochain chapitre.

> Pour changer le contenu du titre (pour indiquer par exemple "mon titre" à la place de "hendrerit facilisi"), il suffit de rechercher dans la page html cette fois (blue-flower.html) la balise h2 précédant ce contenu (hendrerit facilisi). Effacez les mots "hendrerit facilisi", remplacez-les par "mon site" et le tour est joué (n'oubliez pas d'enregistrer votre page avant de procéder aux vérifications dans votre navigateur).

A propos des images : comment modifier l'image en haut du site ?

Image Background site

La phrase correcte serait : comment modifier l'image qui est en background dans le header. Pour modifier cette image, ouvrez la feuille de style (css) avec votre éditeur de site web et cherchez ce balisage :

#header { height : 238px; background : url(images/header.jpg); margin : 0 0 30px 0 }

remplacez la partie qui concerne l'image :

background : url(images/header.jpg);

par le nom de votre image :

background : url(images/votre-image.jpg);

Attention : si vous faites vos tests en ligne, n'oubliez pas d'uploder votre nouvelle image, et n'oubliez pas non plus d'uploader la css. (pour uploader les fichiers vers votre serveur il vous faut un Client FTP tel que Filezilla )

A propos des images : comment changer l'image de décoration ?

Image deco site Nous mettons généralement 1 ou 2 images en décoration sur nos kits, voici le code qui permet d'afficher des images dans les pages (x)html. Dans la page (x)html cherchez :

‹p›‹img src="images/deco.jpg" alt="deco"/>Illum tation nulla. Feugait te et nulla praesent dignissim, autem nulla. Minim magna te nulla duis sed blandit eros hendrerit facilisi in eros, suscipit exerci ipsum dolor facilisis. ‹/p›

Plus précisément :

‹p›‹img src="images/deco.jpg" alt="deco"/› ...

Modifiez l'image :

‹p>‹img src="images/votre-image.jpg" alt="deco"/› ...

A propos de la structure : peut-on modifier la disposition du kit ?

Vous pouvez supprimer et déplacer toutes les balises que vous souhaitez, mais faites attention à toujours déplacer les balises d'ouverture, mais aussi celles de fermeture.

Est-il facile d'intervertir les deux colonnes ?

Pour intervertir la colonne de gauche (le contenu) et la colonne de droite (barre latérale), donc pour mettre la barre latérale à gauche, il suffit de déplacer dans le code (x)html tout ce qui concerne la barre latérale. Dans votre page html, sélectionnez donc tout ce qui se trouve entre les balises ‹div id="side"› et ‹/div› (balises comprises) et déplacez ce bloc sélectionné juste avant la balise ‹div id="main"›. Cependant, vous devrez encore vous occuper des marges, car elle doivent être ajustées. Dans la css, réglez à votre guise le padding du #contenu qui est pour le moment fixé à 40px.