Retour à la page principale | A propos du site

Tutoriel Kompozer, étape 3 : Créer un design simple

Créer un design pour votre site internet à l'aide de tableaux

Dans Kompozer, cliquez sur l'onglet "Tableau", allez à "Insérer" et sélectionner "Tableau".

Créer un tableau avec Kompozer.

Dans la fenêtre qui s'affiche, allez à l'onglet "Précisément" et créer un tableau de 2 lignes, d'1 colonne, d'une largeur de 760 pixels et d'une bordure de 0 pixels (c'est-à-dire sans bordure).
Cliquez sur "OK".

Définir les dimensions du tableau que vous venez de créer avec le logiciel Kompozer.

Vous voilà de retour sur votre page web et un tableau apparaît en rouge pointillé.
Cliquez sous le tableau afin de positionner le curseur en dessous comme le montre l'image juste après.

Positionner le curseur sous le tableau html pour pouvoir écrire.

Recommencer la manoeuvre ci-dessus et créez un nouveau tableau sous le tableau déjà présent avec les dimensions suivantes : 1 ligne, 2 colonnes, largeur de 760 pixels et bordure de 0 pixels.
Après avoir créé ce deuxième tableau, vous vous apercevrez que les deux tableaux présents sur votre page web ne sont pas collés l'un à l'autre et qu'un espace les sépare. Pour les emboîter, il sufit de positionner le curseur à gauche du tableau numéro 2 et de cliquer sur retour (la touche situé au dessus d'entrée).

Supprimer l'espace entre deux tableaux avec Kompozer.

Lorsque cela est fait, faites un clique droit sur la première case du tableau (celle qui se situe tout au dessus).

Dans la fenêtre qui s'affiche, cliquez sur "Propriétés cellules" et entrez le chiffre "90" en face de la ligne "Hauteur".
Maintenant, changez la couleur de fond de la cellule du tableau dans laquelle vous vous trouvez en cliquant sur le carré situé à côté de la phrase " Couleur de fond".
Choisissez la couleur "violet très pale" à l'aide des échantillons diponibles ou entrez #CCCCFF en face du terme "Hexa" (cela correspond au nom de la couleur en langage hexadécimal).

Définir l'apparence des cellules d'un tableau sous Kompozer.
Cliquez sur "Appliquer" et observez le résultat.
Mainteant, vous allez modifier la cellule qui est juste en dessous en lui donnant un fond violet qui correspond à la couleur Hexa : #6666CC. (Contrairement à la case au dessus, ne changez pas sa hauteur).
Voilà ce que vous devriez obtenir :

Donner une couleur de fond à un tableau en html avec Kompozer.

Ensuite, vous allez modifier (avec la même méthode) la largeur de la cellule de droite du tableau numéro 2 en lui donnant une largeur de 160px. Ce qui donne :

Définir la largeur d'un tableau en html avec le logiciel Kompozer.

Maintenant que l'architecture de votre page est faite, on va modifier l'apparence du fond de page.
Téléchargez l'image "degrade-bleu-gris.jpg" et mettez la dans le dossier où se trouvent les pages de votre site.
Lorsque c'est fait, cliquez sur l'onglet "Format" et choisissez "Couleurs et Fond de page".

Changer la couleur de fond d'une page web avec Kompozer.

Dans la fenêtre qui s'affiche, sous "Image de fond", choisissez le fichier "degrade-bleu-gris.jpg" et cliquez sur "OK".

Mettre une image en fond de page avec Kompozer.

Votre fond de page est maintenant un dégradé bleu et gris.

N.B. : Si les cases du tableau 2 prennent la couleur du fond de page, utilisez la méthode qui vous a permis de changer la couleur des cellules du tableau.

La suite à l'étape 4.