Bienvenue sur Tcheval.Net

Tcheval.net : Comment modifier son kit graphique ?

Comment modifier son kit graphique ?

Il vous faut pour bien débuter un logiciel d’édition de page Web, il existe plusieurs logiciels : graphiques, en ligne de code ou même les deux. Pour ma part je vous conseil ConText, un logiciel gratuit et très performant. Mais sachez que le bloc note suffit pour modifier un kit graphique…

Une fois le choix de votre programme effectué, vous devez ouvrir deux pages contenu dans le kit : le fichier .html et le fichier .css

Description rapide des fichiers :
Le fichier .html contiendra le contenu de votre site, vous y placerez donc votre texte, vos images, vos sons, vos vidéos, bref TOUT votre contenu.
Le fichier .css est la feuille de style, c’est avec elle que vous modifierai l’apparence de votre site : couleur, taille de police, positionnement de tel ou tel contenu, etc…


Modifier votre fichier .html très simplement avec votre éditeur de page web favoris ou simplement avec conTexT (ou voire même le bloc note).

Nous allons apprendre à modifier un fichier .html à l’aide d’un exemple que voici :
Les fichiers que vous rencontrerez ressemblerons la plupart du temps à celui-ci avec quelque petites variantes mais entraînez vous sur cette page simple avant de vous dirigez vers des pages plus complexes.
La page viens d’un de mes kits graphiques gratuits disponibles à cette adresse : https://www.tcheval.net
 

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>Kit Graphique Gratuit de Tcheval</title>
      <link href="/style.css" rel="stylesheet" type="text/css">
</head>


<body>

      <div id="conteneur">

           <div id="header"></div>

           <div id="menu"><p class="menucont"><a href="#">Liens 1</a> :: <a href="#">Liens 2</a> :: <a href="#">Liens 3</a> :: <a href="#">Liens 4</a></p></div>

           <div id="contenu">
                <br />
                <p class="cont">Présentation du kit graphique 'CSS Power'
                <br />
                </p>
                <hr>
                <p class="cont">
                   Voici mon premier kit graphique Gratuit avec une feuille de Style. Le site est donc valide aux normes du W3C.<br />
                   Cliquez sur l'image pour avoir la preuve en image :
                   <a href="#topofpage"><img src="https://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a><br />
                </p>
                <br />
                <p class="cont">
                   Bonjour, voici un kit graphique gratuit réalisé par Tcheval.<br /><br />
                   Vous pouvez modifier librement tout le thème à une seule condition :<br /><br />
                   Laissez ce texte : "<b>Kit Graphique : <a href="/index.html" target="_blank">Tcheval</a></b>" en bas de chaque page de votre site.<br /><br />
                   Merci de respecter le travail gratuit que Tcheval à réalisé pour vous.<br /><br />
                </p>
                <hr>
                <h2>Vous trouverez dans l'archive de téléchargement :</h2>
                         <OL>
                             <LI>Le .PSD du kit graphique, vous pourrez donc changer très simplement le texte, insérer votre logo et/ou votre slogan à l'aide d'Adobe Photoshop.
                             <LI>La feuille de style CSS.
                             <LI>L'intégralité du kit à modifier soit même.
                         </OL>
                <br />
                <p class="cont">
                   Pour toute question relative à ce kit graphique rendez vous sur <a href="https://www.tcheval.net/forum">Le Forum</a>.<br />
                </p>
                <hr>
                <p class="cont">
                    Votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici,<br /><br />
                </p>
                <h2>Exemple de Titre !</h2>
                <h1>Exemple de News :</h1>
                         <OL>
                             <LI>Mettez ici ce que vous voulez.
                             <LI>Mettez ici ce que vous voulez.
                             <LI>Mettez ici ce que vous voulez.
                         </OL>
                <br />
                <h1>Exemple de News 2 :</h1>
                         <OL>
                             <LI>Mettez ici ce que vous voulez.
                             <LI>Mettez ici ce que vous voulez.
                         </OL>
                <hr>
                <p class="cont">
                    Vous pouvez modifier librement tout le thème à une seule condition :<br /><br />
                    Laissez ce texte : "<b>Kit Graphique : <a href="/index.html" target="_blank">Tcheval</a></b>" en bas de chaque page de votre site.<br /><br />
                    Merci de respecter le travail gratuit que Tcheval à réalisé pour vous.<br /><br /><br />
                    votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici,<br /><br />
                    votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici...<br /><br />
                    Ce que vous voulez ici.<br />
                </p>
                <br />
           </div>

           <div id="pied">
                <p class="piedcont">Copyright &copy; : <a href="#">Votre site</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Kit Graphique : <a href="/index.html" target="_blank">Tcheval</a></p>
           </div>

      </div>


</body>


</html>

Pour voir ce qu’il est possible de faire avec cette page cliquez ici : https://tchevalboard.free.fr/CSSPower/.

Nous allons décomposer la page en plusieurs morceaux pour faciliter l’explication de mon tutorial. Sachez qu’une page se compose d’un entête (appelé début de page dans mon tutorial) et d’un corps.

Début de votre page.

Attention : ne toucher que ce qui se trouve entre les balises <title> et </title>
 

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>Kit Graphique Gratuit de Tcheval</title>
      <link href="/style.css" rel="stylesheet" type="text/css">
</head>

Remplacez Kit Graphique Gratuit de Tcheval par le titre de votre site !
Ne touchez à rien d’autre !

Le corp de votre page.

Début
 

Code:

<body>

      <div id="conteneur">

           <div id="header"></div>

Attention : ne toucher à rien ici !

Les balises div sont utilisées pour la mise en page de votre page : positionnement d’une image d’arrière plan,� taille de votre header, du menu, du contenu, marge, alignement…
Elles sont différenciées par un ‘identifiant’ qui renvoie à la feuille de style .css.
Dans notre exemple nous avons deux balises différentes : une conteneur et une header.

Attention : ne toucher à rien ici !

Le menu de votre page
 

Code:

           <div id="menu"><p class="menucont"><a href="#">Liens 1</a> :: <a href="#">Liens 2</a> ::  <a href="#">Liens 3</a> ::  <a href="#">Liens 4</a></p></div>

Astuces : Vous pouvez reconnaître où se situe le menu de votre page à l’aide de la balise <div id="menu">.

Les balises p sont utilisés pour la mise en forme de votre texte, des vos images : police d’écriture, couleur de texte, insertion d’images…
Ces balises sont également différenciées à l’aide cette fois ci de l’attribut ‘class’, dans notre exemple : menucont.

Attention : ne toucher que ce qui se trouve entre les balises < p class="menucont"> et </p>

Modifier les liens existants :

Voici un petit exemple de modification de lien :
Remplacez le premier # par l’url de la page que vous voulez appeler (exemple https://www.google.fr)
Remplacez ensuite Liens 1 par le nom de votre lien (exemple : Google)

Le résultat :
 

Code:

           <div id="menu"><p class="menucont"><a href="#topofpage">Google</a> :: <a href="#">Liens 2</a> ::  <a href="#">Liens 3</a> :: <a href="#">Liens 4</a></p></div>

Répétez l’opération pour Liens 2, Liens 3 et Liens 4. Vous pouvez ajouter autant de liens que vous le souhaitez, insérez simplement ceci avant la balise </p> :
:: <a href="#">Votre Liens</a>

En remplacant toujours les mêmes éléments par vos propres liens.


Le contenu de votre page

Tout ce qui va suivre correspondra à notre contenu proprement parlé, c’est ici que vous allez mettre le contenu de votre page web.
 

Code:

           <div id="contenu">
                <br />
                <p class="cont">Présentation du kit graphique 'CSS Power'
                <br />
                </p>

La balise <br /> est utilisé pour revenir à la ligne.
Attention : TOUT le contenu de votre page devra se trouver entre les balises <p class="cont"> et </p>
Vous pouvez donc remplacer le texte Présentation du kit graphique ‘CSS Power’ par ce que vous voulez.

 

Code:

 <hr>
                <p class="cont">
                   Voici mon premier kit graphique Gratuit avec une feuille de Style. Le site est donc valide aux normes du W3C.<br />
                   Cliquez sur l'image pour avoir la preuve en image :
                   <a href="#topofpage"><img src="https://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a><br />
                </p>
                <br />

La balise <hr> correspond à une ligne horizontale, elle peut être utilisé pour séparer bien distinctement les différentes parties de votre page.
Vous retrouvez ici la balise <p class="cont"> vous pouvez donc modifier tout le texte jusqu’à </p>.
Toujours dans ce contenu, une image qui envoi sur un autre site est placé. Voici comment modifier cette image et le lien :
 

Code:

            <a href="#topofpage"><img src="https://urldevotreimage.jpg" alt="description de votre image" height="hauteur" width="largeur"></a>

Remplacez

Code:

https://VotreLien 

par le lien où vous voulez diriger votre visiteur.
Remplacez

Code:

https://urldevotreimage.jpg

par l’adresse internet où se trouve votre image.
Remplacez description de votre image par une courte description de l’image affichée.
Remplacer hauteur et largeur par la hauteur et la largeur de votre image en pixel.

 

Code:

 <p class="cont">
                   Bonjour, voici un kit graphique gratuit réalisé par Tcheval.<br /><br />
                   Vous pouvez modifier librement tout le thème à une seule condition :<br /><br />
                   Laissez ce texte : "<b>Kit Graphique : <a href="/index.html" target="_blank">Tcheval</a></b>" en bas de chaque page de votre site.<br /><br />
                   Merci de respecter le travail gratuit que Tcheval à réalisé pour vous.<br /><br />
                </p>
                <hr>

Rien à dire de particulier, voir précédemment pour les informations.

Les titres mise en forme :
 

Code:

<h2>Vous trouverez dans l'archive de téléchargement :</h2>

Les balises <h1>, <h2>, <h3>, <h4> et <h5> sont des balises de titre.
La mise en forme se fera à l’aide de la feuille de style. On placera donc notre titre entre ces différentes balises suivant la mise en page du titre que l’on souhaite.

Les listes :
 

Code:

      <OL>
                            <LI>Le .PSD du kit graphique, vous pourrez donc changer très simplement le texte, insérer votre logo et/ou votre slogan à l'aide d'Adobe Photoshop.
                             <LI>La feuille de style CSS.
                             <LI>L'intégralité du kit à modifier soit même.
                         </OL>

La balise <OL> signifie que l’on commence une liste. De même la balise </OL> signifie que la liste est terminé.
La balise <LI> corrrespond aux puces qui rende les listes moins monotones. Vous pouvez rajouter autant de <LI> que vous voulez.
Attention : la balise <LI> ne se ferme pas. Donc n’ajoutez pas de </LI>.


La suite de votre page :
 

Code:

                <br />
                <p class="cont">
                   Pour toute question relative à ce kit graphique rendez vous sur <a href="https://www.tcheval.net/forum">Le Forum</a>.<br />
                </p>
                <hr>
                <p class="cont">
                    Votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici,<br /><br />
                </p>
                <h2>Exemple de Titre !</h2>
                <h1>Exemple de News :</h1>
                         <OL>
                             <LI>Mettez ici ce que vous voulez.
                             <LI>Mettez ici ce que vous voulez.
                             <LI>Mettez ici ce que vous voulez.
                         </OL>
                <br />
                <h1>Exemple de News 2 :</h1>
                         <OL>
                             <LI>Mettez ici ce que vous voulez.
                             <LI>Mettez ici ce que vous voulez.
                         </OL>
                <hr>
                <p class="cont">
                    Vous pouvez modifier librement tout le thème à une seule condition :<br /><br />
                    Laissez ce texte : "<b>Kit Graphique : <a href="/index.html" target="_blank">Tcheval</a></b>" en bas de chaque page de votre site.<br /><br />
                    Merci de respecter le travail gratuit que Tcheval à réalisé pour vous.<br /><br /><br />
                    votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici,<br /><br />
                    votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici, votre texte ici...<br /><br />
                    Ce que vous voulez ici.<br />
                </p>
                <br />
           </div>

Ici rien de particulier, tout à déjà été dis plus haut…

Le bas de votre page et le Copyright :
 

Code:

           <div id="pied">
                <p class="piedcont">Copyright &copy; : <a href="#">Votre site</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Kit Graphique : <a href="#topofpage" target="_blank">Tcheval</a></p>
           </div>

Ici vous pouvez modifier ce qui se trouvera en bas de chaque page de votre site. 
Attention : Merci de laisser le copyright dirigeant vers mon site perso : https://www.tcheval.net

La fin de votre page de code :

Attention : ne toucher à rien ici !

      </div>


</body>


</html>

Attention : ne toucher à rien ici !



Modifier votre fichier .css très simplement avec votre éditeur de page web favoris ou simplement avec conTexT (ou voire même le bloc note).

 

Code:

/*////////////////////////*/
/* Information de la page */
/*////////////////////////*/

body {
font-family: Verdana, Arial, Helvetica, sans-serif; /* Police Verdana utilisé par défaut */
font-size: 10pt; /* Taille de la police par défaut */
margin: 0px; /* Pas de marge */
padding: 0px; /* Pas d'espacement */
background-color:#3A7E8E; /* Couleur de fond de la page Web */
border-style:hidden; /* Les bordures sont cachés */
}

/*//////////////////////*/
/* Mise en page du site */
/*//////////////////////*/

#conteneur {
position: absolute;
border-style:hidden; /* Les bordures sont cachés */
border-style:colapse; /* Les bordures fusionnent lorsqu'elles sont à côtés */
width: 750px; /* Taille fixé à 750 pixel */
left: 50%;
margin-left: -375px;
}

/*///////////////////////*/
/* Informations Diverses */
/*///////////////////////*/

/* Mise en page des News */
h1 {
font-size: 10pt; /* Taille de la police */
text-decoration :underline; /* On souligne la police */
font-weight :bold; /* On met en gras */
text-align:left; /* On aligne au gauche */
text-align:justify; /* On justifie le texte */
margin-right:15px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
margin-left:15px; /* On fais une marge de 15 pixel à gauche pour éviter que le texte ne colle à la bordure */
}

/* Mise en page des Titres en bleu foncé */
h2 {
font-size: 10pt; /* Taille de la police */
color:#000080; /* Couleur du texte bleu foncé */
font-weight :bold; /* On met en gras */
text-align:left; /* On aligne au gauche */
text-align:justify; /* On justifie le texte */
margin-right:15px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
margin-left:15px; /* On fais une marge de 15 pixel à gauche pour éviter que le texte ne colle à la bordure */
border-top: solid 1px;
border-bottom: solid 1px;
}

/* Mise en page des puces */
LI {
list-style-type : disc; /* On utilise des cercles noirs pleins */
margin-right:15px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
margin-left:30px; /* On fais une marge de 30 pixel à droite pour éviter que le texte ne colle à la bordure et aussi pour décaler le texte des puces par rapport au texte normal */
}

/* Mise en page des traits horizontaux */
hr {
width:70%; /* On créer une ligne centré et de 70% par rapport à la taille de la page */
color:#000000; /* Couleur du trait : noir */
background-color:#000000;
height:1px; /* Taille du trait : 1 pixel */
border: 0;
}

/*////////*/
/* Header */
/*////////*/

/* Image de fond */
#header {
height: 200px; /* Hauteur de l'Header */
background-image:url('/images/index_01.gif'); /* URL de l'image de fond */
background-repeat:no-repeat; /* On interdit la reproduction de l'image de fond */
margin:0px; /* Pas de marge */
border-left: solid 1px;
border-right: solid 1px;
border-bottom: solid 1px;
border-top: solid 1 px;
border-style:colapse; /* Les bordures fusionnent lorsqu'elles sont à côtés */
}

/*//////*/
/* Menu */
/*//////*/

/* Image de fond des liens du menu */
#menu {
height: 35px; /* La hauteur varie en fonction du nombre de liens */
background-image:url('/images/index_03.gif'); /* URL de l'image de fond, ici on autorise la répétition du fond */
background-repeat:no-repeat; /* On interdit la reproduction de l'image de fond */
margin:0px; /* Pas de marge */
border-left: solid 1px;
border-right: solid 1px;
border-bottom: solid 1px;
border-style:colapse; /* Les bordures fusionnent lorsqu'elles sont à côtés */
}

/* Information sur les liens du menu */
.menucont {
text-align:center; /* On centre les liens */
font-weight :bold; /* On met en gras */
}

p.menucont {
margin: 0px;
padding-top: 8px;
}

p.menucont a {
margin: 0px;
padding-top: 8px;
}

p.menucont a:link  {
color: #003471;
text-decoration: none;
}

p.menucont a:visited { 
color: #003471;
text-decoration: none;
}

p.menucont a:hover {
color: #03015C;
text-decoration: underline;
}

p.menucont a:active { 
color: #760000;
text-decoration: underline;
}


/*/////////*/
/* Contenu */
/*/////////*/

/* Image de fond du contenu */
#contenu {
width: 750px; /* Largeur de l'image */
background-color:#FFFFFF; /* Couleur de fond */
border-left: solid 1px;
border-right: solid 1px;
margin:0px;
padding: 0px;

}

/* Information sur le contenu */
.cont {
text-align:left; /* On place le texte à gauche */
text-align:justify; /* On justifie le texte */
margin-right:15px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
margin-left:15px; /* On fais une marge de 15 pixel à gauche pour éviter que le texte ne colle à la bordure */
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}


/*////////*/
/* Footer */
/*////////*/

/* Image de fond du Footer ou Pied de page */
#pied {
height: 35px; /* Hauteur de l'image */
background-image:url('/images/index_03.gif'); /* URL de l'image de fond */
background-repeat:no-repeat; /* On interdit la reproduction de l'image de fond */
border-left: solid 1px;
border-right: solid 1px;
border-bottom: solid 1px;
border-top: solid 1 px;
margin: 0px;
padding: 0px;
}

/* Information sur le footer */
.piedcont {
text-align:center; /* On centre le texte */
font-weight :bold; /* On met en gras */
}



p.piedcont {
margin: 0px;
padding-top: 8px;
}

p.piedcont a {
margin: 0px;
padding-top: 8px;
}

p.piedcont a:link  {
color: #003471;
text-decoration: none;
}

p.piedcont a:visited {
color: #003471;
text-decoration: none;
}

p.piedcont a:hover {
color: #03015C;
text-decoration: underline;
}

p.piedcont a:active {
color: #760000;
text-decoration: underline;
}

Information générale sur la page Web
 

Code:

/*////////////////////////*/
/* Information de la page */
/*////////////////////////*/

body {
font-family: Verdana, Arial, Helvetica, sans-serif; /* Police Verdana utilisé par défaut */
font-size: 10pt; /* Taille de la police par défaut */
margin: 0px; /* Pas de marge */
padding: 0px; /* Pas d'espacement */
background-color:#3A7E8E; /* Couleur de fond de la page Web */
border-style:hidden; /* Les bordures sont cachés */
}

Ici ne touchez qu’à la ligne background-color:#3A7E8E; /* Couleur de fond de la page Web */ en remplaçant 3A7E8E par le code hexadécimal de votre couleur de fond de votre page Web.
Attention : N’oubliez pas d’ajouter le dièse (#) devant votre code couleur.

Information générale sur la mise en page du site
 

Code:

/*//////////////////////*/
/* Mise en page du site */
/*//////////////////////*/

#conteneur {
position: absolute;
border-style:hidden; /* Les bordures sont cachés */
border-style:colapse; /* Les bordures fusionnent lorsqu'elles sont à côtés */
width: 750px; /* Taille fixé à 750 pixel */
left: 50%;
margin-left: -375px;
}

Ici ne touchez à rien.

Information diverses sur la page Web
 

Code:

/*///////////////////////*/
/* Informations Diverses */
/*///////////////////////*/

/* Mise en page des News */
h1 {
font-size: 10pt; /* Taille de la police */
text-decoration :underline; /* On souligne la police */
font-weight :bold; /* On met en gras */
text-align:left; /* On aligne au gauche */
text-align:justify; /* On justifie le texte */
margin-right:15px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
margin-left:15px; /* On fais une marge de 15 pixel à gauche pour éviter que le texte ne colle à la bordure */
}

/* Mise en page des Titres en bleu foncé */
h2 {
font-size: 10pt; /* Taille de la police */
color:#000080; /* Couleur du texte bleu foncé */
font-weight :bold; /* On met en gras */
text-align:left; /* On aligne au gauche */
text-align:justify; /* On justifie le texte */
margin-right:15px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
margin-left:15px; /* On fais une marge de 15 pixel à gauche pour éviter que le texte ne colle à la bordure */
border-top: solid 1px;
border-bottom: solid 1px;
}

Ici vous modifier les TITRES (rappelez des balises <h1>, <h2>, <h3>, etc.. que nous avons parlé plus haut). C’est ici que nous modifierons la mise en forme des titres.
Toute les lignes sont commentés, vous pouvez donc modifier ce que vous voulez.
Remarque : vous pouvez vous aider de mon aide mémoire disponible ici : https://slaout.linux62.org/html_css/doc_css.html.
 

Code:

/* Mise en page des puces */
LI {
list-style-type : disc; /* On utilise des cercles noirs pleins */
margin-right:15px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
margin-left:30px; /* On fais une marge de 30 pixel à droite pour éviter que le texte ne colle à la bordure et aussi pour décaler le texte des puces par rapport au texte normal */
}

/* Mise en page des traits horizontaux */
hr {
width:70%; /* On créer une ligne centré et de 70% par rapport à la taille de la page */
color:#000000; /* Couleur du trait : noir */
background-color:#000000;
height:1px; /* Taille du trait : 1 pixel */
border: 0;
}

Ici on modifie les puces et les traits horizontaux. Toutes les lignes sont commentés vous ne devriez donc pas avoir de problème pour modifier ce que vous voulez.

Modification du Header (Entête du site)
 

Code:

/*////////*/
/* Header */
/*////////*/

/* Image de fond */
#header {
height: 200px; /* Hauteur de l'Header */
background-image:url('/images/index_01.gif'); /* URL de l'image de fond */
background-repeat:no-repeat; /* On interdit la reproduction de l'image de fond */
margin:0px; /* Pas de marge */
border-left: solid 1px;
border-right: solid 1px;
border-bottom: solid 1px;
border-top: solid 1 px;
border-style:colapse; /* Les bordures fusionnent lorsqu'elles sont à côtés */
}

Ici vous modifier votre entête de votre page. Le but est de simplement y mettre une image de fond. Tout les lignes sont commentés.
Si vous n’avez pas d’idée pour votre entête, rendez sur mon forum : https://www.tcheval.net et faites une requetes pour une création, je me ferai un plaisir de vous aider.

Le reste de la page
 

Code:

/*//////*/
/* Menu */
/*//////*/

/* Image de fond des liens du menu */
#menu {
height: 35px; /* La hauteur varie en fonction du nombre de liens */
background-image:url('/images/index_03.gif'); /* URL de l'image de fond, ici on autorise la répétition du fond */
background-repeat:no-repeat; /* On interdit la reproduction de l'image de fond */
margin:0px; /* Pas de marge */
border-left: solid 1px;
border-right: solid 1px;
border-bottom: solid 1px;
border-style:colapse; /* Les bordures fusionnent lorsqu'elles sont à côtés */
}

/* Information sur les liens du menu */
.menucont {
text-align:center; /* On centre les liens */
font-weight :bold; /* On met en gras */
}

p.menucont {
margin: 0px;
padding-top: 8px;
}

p.menucont a {
margin: 0px;
padding-top: 8px;
}

p.menucont a:link  {
color: #003471;
text-decoration: none;
}

p.menucont a:visited { 
color: #003471;
text-decoration: none;
}

p.menucont a:hover {
color: #03015C;
text-decoration: underline;
}

p.menucont a:active { 
color: #760000;
text-decoration: underline;
}


/*/////////*/
/* Contenu */
/*/////////*/

/* Image de fond du contenu */
#contenu {
width: 750px; /* Largeur de l'image */
background-color:#FFFFFF; /* Couleur de fond */
border-left: solid 1px;
border-right: solid 1px;
margin:0px;
padding: 0px;

}

/* Information sur le contenu */
.cont {
text-align:left; /* On place le texte à gauche */
text-align:justify; /* On justifie le texte */
margin-right:15px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
margin-left:15px; /* On fais une marge de 15 pixel à gauche pour éviter que le texte ne colle à la bordure */
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}


/*////////*/
/* Footer */
/*////////*/

/* Image de fond du Footer ou Pied de page */
#pied {
height: 35px; /* Hauteur de l'image */
background-image:url('/images/index_03.gif'); /* URL de l'image de fond */
background-repeat:no-repeat; /* On interdit la reproduction de l'image de fond */
border-left: solid 1px;
border-right: solid 1px;
border-bottom: solid 1px;
border-top: solid 1 px;
margin: 0px;
padding: 0px;
}

/* Information sur le footer */
.piedcont {
text-align:center; /* On centre le texte */
font-weight :bold; /* On met en gras */
}



p.piedcont {
margin: 0px;
padding-top: 8px;
}

p.piedcont a {
margin: 0px;
padding-top: 8px;
}

p.piedcont a:link  {
color: #003471;
text-decoration: none;
}

p.piedcont a:visited {
color: #003471;
text-decoration: none;
}

p.piedcont a:hover {
color: #03015C;
text-decoration: underline;
}

p.piedcont a:active {
color: #760000;
text-decoration: underline;
}

La plupart des lignes sont commentés, n’ayez pas peur d’essayer des choses, vous n’allez rien casser ne vous en faites pas. Il faut essayer et réessayé quelque fois pour arriver à faire quelque chose de correcte.


Version PDF :