LES STANDARDS

Voici les standards appliqués sur le site de Mitan.ca. Les codes présentés sur ces pages sont le résultat de recherches sur différents sites Internet. Ils sont du domaine publique. Le Webmestre de Mitan ne revendique donc aucun droit intellectuel ou autre sur ces codes tout comme il n'accepte aucune responsabilité quant à leur fonctionnement et/ou utilisation sur d'autres sites.

Page 2 de 4

| 1 | 2 | 3 | 4 |

LES ENCARTS

NOTE 1:
Sauf indication contraire, tous les codes qui suivent ont été testés et sont entièrement compatibles avec Netscape et Internet Explorer.

NOTE 2:
La feuille de style (CSS) et la feuille de Javascript de Mitan peuvent être consultées ou téléchargées sur les liens suivants. Vous devez cependant posséder au moins FrontPage sur votre ordinateur pour les consulter.
Cliquer sur les liens suivants pour les télécharger dans FrontPage:

Feuille de styles de Mitan (CSS)
Feuille des Javascripts de Mitan

1 - ENCART BORDÉ PARTIELLEMENT

Feuille de style

On peut mettre une section de bordure en haut, en bas, à gauche et à droite d'un paragraphe. On contrôle son apparence en ajustant les paramètres border-left, border-top, border-right et border-bottom de concert avec les suffixes vus ci-haut: style, width ou color.
Pour activer cette fonction, il faut la déclarer au début du paragraphe:
<p class="bord"> -------ici le texte-------</p>
On peut créer dans la feuille de style, autant de fonctions (p.bord.gauche, p.bord.droite, etc.) que désiré. Le «padding» ajoute un espace entre la ligne et le texte.


   p.bord {
   padding-left: 8px;
   border-left: solid;
   border-right: none;
   border-top: none;
   border-bottom: none;
   border-left-width: thin;
   border-color: red; }

2 - ENCART BORDÉ

Feuille de style

On peut mettre une bordure autour d'un entête, une liste, un paragraphe, etc. avec l'élément div.boite inséré dans la feuille de style:


  div.boite { border: solid; border-width: thin; border-color: 
  #db7093; width: 100%; padding-left: 10px; padding-right: 10px; 
  padding-top:10px; padding-bottom: 10px;}

Voici les paramètres ajustables dans la feuille de style:

La propriété «border» donne le style de bordure: dotted, dashed, solid, double, groove, ridge, inset, outset.

La propriété «border-width» détermine la largeur de la ligne. On peut configurer cette largeur en utilisant thin, medium et thick ou en spécifiant directement la largeur, e.g. 0.1em.

La propriété «border-color» permet de spécifier la couleur de la bordure.

La propriété «width»contrôle le positionnement de la marge de droite. Nécessaire sinon, avec certains navigateurs, la marge est trop à droite.

Les propriétés «padding» ajoute une marge intérieur à gauche et à droite des bordures.

Pour activer la «boite», utiliser la commande suivante:
<div class="boite"> -------ici le texte-------</div>

NOTE: J'ai pas encore trouvé le truc avec <div> pour mettre des marges extérieures à gauche et droite sans utiliser les <table>.

3 - ENCART BORDÉ ET COLORÉ

Feuille de style

On peut construire une boite avec le fond coloré ou avec une image en mosaïque. Si on veut plus de choix de couleur, on crée d'autres fonctions «div.couleur1, 2, 3, » dans la feuille de style.


div.couleur1 {
background: #CCCCFF;
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
border: 2px solid #336699; }

Les fonctions padding-left, padding-right, top et bottom sont utilisés pour mettre une marge entre le bord de la boite et le texte. La fonction border permet de mettre une bordure à la boite avec des paramètres ajustables aussi comme l'épaisseur du trait, son style et sa couleur.
NOTE: J'ai pas encore trouvé le truc avec <div> pour mettre des marges extérieures à gauche et droite sans utiliser les <table>.

J'utilise ici <div class="couleur2"> qui permet d'avoir un fond foncé avec la couleur #2C4062 .Contrairement à l'encart précédent, je n'utilise pas la fonction tableau pour le recadrer. Ici, c'est pleine largeur. Les caractères sont appelés par <p class="nav"> au début du paragraphe.

3a - ENCARTS POUR GALERIES DE PHOTOS

Voici une autre façon d'utiliser les feuilles de style pour créer un album de photos. Les codes sont disponibles sur la source de cette page et dans la feuille de style mitan.css. Il est possible de modifier les couleurs de fond des encarts sur la page même mais pas les bordures qui sont spécifiée seulement sur la feuille de style.

VOYEZ LA GALERIE DES PHOTOS DU VOYAGE !

1 - Un château de grande taille!

2 - La relève se prépare très tôt!

4 - ENCART DE MARGE

Tableau 168 px

«L'encart fonctionne exactement comme une image.»

Si on veut apporter un accent supplémentaire à un texte, on peut en extraire une partie et la mettre dans un encart. L'encart fonctionne exactement comme une image puisqu'il est dans une table et peut être orienté à gauche ou à droite avec le texte correspondant. Voici le résultat d'une encart positionné à droite du texte. La ligne colorée est paramétrable selon la section du site.

Voici le code utilisé:

<table align="right" border="0" cellpadding="0"cellspacing="0" width="168">
<tr><td>
<img src="/images/dot_blank.gif" width=10 height=1 border=0 title=""></td>
<td bgcolor="#ff7f50"><img src="/images/dot_blank.gif" width=2 height=1 
border=0 title=""></td>
<td width="10"><img src="/images/dot_blank.gif" width=10 height=1 
border=0 title=""></td>
<td width="100%" align="left" valign="top">
<font face="Verdana, Geneva, Arial, Helvetica" size="3">
<b>«L'encart fonctionne exactement comme une image.»</b></font>
</td> </tr></table>

4a - ENCART DE CITATION

L'année 2002 a été très prospère pour notre entreprise !

Président de Mitan.ca
Pascal Bouchard

Voici un autre exemple d'encart utilisant des «guillemets» pour insérer une citation dans un encart. Les codes sont disponibles sur la source de cette page Une combinaison de <table> et de <div> est utilisée à cette fin. La couleur de fond et le style des caractères sont complètement paramétrables directement dans le code. L'encart fonctionne exactement comme une photo et peut être placé à gauche ou à droite du texte.

Voici le code utilisé: 

<table cellspacing="0" cellpadding="10"  style="background-color:#FFFFCC; 
margin-right:5px"; width="200" align="right" border="0">
<tr><td>
<div style="font-size:11px; font-family: Verdana">
<img src="/images/quote_debut.gif" height="13" border="0" width="24">
<b>L'année 2002 a été très prospère pour notre entreprise !</b>
<img src="/images/quote_fin.gif" height="13" align="right" 
width="23"><br clear="all"></div>
<div style="color:#666666; font-size:10px; font-family: Verdana">
Président de Mitan.ca<br>Pascal Bouchard
</div>
</td></tr>
</table>

5 - ENCART FOND FONCÉ

Tableau 300 px

Cet encart est un tableau centrée de 300 pixels de largeur. La couleur de fond est #2C4062 est la couleur des caractères jaunes est #FCFC96 avec une grosseur de 4. Les caractères plus petits sont de couleur #FFF0F5. Noter que le type, la couleur et la grosseur des caractères sont spécifiés car ils ne sont pas standards. Donc on utilise pas les <p> et </p> au début et à la fin des paragraphes. J'ai utilisé <div> pour centrer le tableau sur la page.

Un premier bébé cloné en décembre
Le gynécologue italien Severino Antinori confirme vendredi dans 'Libération' qu'une de ses patientes est enceinte d'un fœtus créé par clonage. Tout laisse à croire que Raël et son groupe sont les commanditaires.

Pour en savoir plus...

Voici le code utilisé:

<div align=center>
<table cellpadding="5" cellspacing="0" border="0" bgcolor="#2C4062" 
width="300" align="center"><tr><td>
<font color="#FCFC96" size="4" face="Georgia, Verdana, Geneva, Arial">
Un premier bébé cloné en décembre</font><br clear="all">
<img src="/images/foetus.jpg" border="0" alt="" hspace="6" vspace="6" 
align="left"><font face="Verdana, Geneva, Arial" color="#fff0f5" size="1"> 
[Texte ici.....] <br><br>
<font color="#FCFC96" size="1">Pour en savoir plus...</font>
</font><br></td></tr></table>
</div>

6 - ENCART FOND PÂLE

Tableau 100 % et cellule 250 px

Ce qui suit est constitué d'un grand tableau contenant deux cellules: la cellule de texte et la cellule de l'encart coloré. L'encart coloré est du même type que l'encart de marge plus haut et est traité exactement comme une image que l'on aligne à gauche ou à droite en déplaçant la cellule qui le contient avant ou après la cellule du texte.

L'encart coloré, à droite, est une cellule du grand tableau à l'intérieur de laquelle chaque petite section est un tableau pré-ajustée à 250 pixels. La couleur du fond est #EEECD2. La photo est dans sa propre cellule tout comme le texte. Les lignes pointillées sont une image gif. On utilise <td valign="top"> au début de chaque cellule pour les aligner par le haut.

Les Québécois et l'alcool au pays
Selon Statistique Canada, les Québécois sont les plus gros buveurs, après les habitants du Yukon... et du Lac-St-Jean!

Tom Hanks
L'acteur est venu tourné son dernier film au Zoo de St-Félicien, Lac-St-Jean.

Steve Irwin
Steve a grandi en apprenant à aimer les animaux. Il vit maintenant au Zoo de St-Félicien.

Voici le code pour cet encart:


<table align="right"><tr><td>
<table cellpadding="2" cellspacing="2" border="0" width="250" 
align="center" bgcolor="#EEECD2" ><tr><td valign="top">
<b><font size="1" face="Verdana, Geneva, Arial, Helvetica" 
color="#850D07">Les Québécois et l'alcool au pays</font></b
><br><font face="Verdana, Geneva, Arial, Helvetica" size="1">
Selon Statistique Canada, les Québécois sont les plus gros buveurs, 
après les habitants du Yukon... et du Lac-St-Jean! <br></font>
</td></tr></table>
<!-- ligne pointillée de séparation -->
<img src="/images/filetpointille.gif" width="265" height="5" border="0" >
<br><table cellpadding="2" cellspacing="2" border="0" width="250" 
align="center"><tr><td valign="top"><font color="#29525A">
<img width="66" height="48" border=1 vspace="5" 
title="Tom Hanks" src="/photos/tom_hanks.jpg"></font></td>
<td valign="top"><b>
<font size="1" face="Verdana, Geneva, Arial, Helvetica" 
color="#850D07">Tom Hanks</font></b><br>
<font face="Verdana, Geneva, Arial, Helvetica" size="1">
L'acteur est venu tourné son dernier film au Zoo de St-Félicien, 
Lac-St-Jean.<br></font></td></tr></table>
<!-- ligne pointillée de séparation -->
<img src="/images/filetpointille.gif" width="265" height="5" border="0" 
alt=""><br><table cellpadding="2" cellspacing="2" border="0" 
width="250" align="center" bgcolor="#EEECD2">
<tr><td valign="top"><font color="#29525A">
<img src="/images/steve.jpg" border=1 alt="" vspace="5" width="66" 
height="48")"></font>
</td><td valign="top"><b>
<font size="1" face="Verdana, Geneva, Arial, Helvetica" 
color="#850D07">Steve Irwin</font></b><br>
<font face="Verdana, Geneva, Arial, Helvetica" size="1">
Steve a grandi en apprenant à aimer les animaux. Il vit maintenant 
au Zoo de St-Félicien. <br><br></font>
</td></tr></table>
</td></tr></table>

7 - ENCARTS - VARIATIONS

Tableaux 100 %

VARIATION # 1

Cet encart est un tableau à 100% de largeur dont la couleur de fond est #C9D3CB. On se sert de caractères spéciaux «&'nbsp;•&'nbsp;» pour faire la liste sans utiliser <ul>.

Mitan présente un bénéfice au premier semestre
La maison de production Mitan a enregistré un bénéfice net de 7,6 millions $ pour le deuxième trimestre consécutif en 2002.

• Le président de Mitan est en voyage aux Jamaïques.
• On ne retourne pas nos appels. Que se passe-t-il ?

Voici le code utilisé:

<!-- Titre -->
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td>
<img src="/images/economie.gif" width="276" height="26" border="0" alt="">
</td></tr></table>
<!-- Article -->
<table cellpadding="5" cellspacing="0" border="0" width="100%" 
bgcolor="#C9D3CB">
<tr><td>
<font face="Verdana, Geneva, Arial, Helvetica" size="1">
<font color="#103C1B" size="2">
<b>Mitan présente un bénéfice au premier semestre</b></font><br>
La maison de production Mitan a enregistré un bénéfice net de 7,6 millions $ 
pour le deuxième trimestre consécutif en 2002.<br><br>
 • <font color="#103C1B" size="1">
<b>Le président de Mitan est en voyage aux Jamaïques.</b><br>
 • <b>On ne retourne pas nos appels. Que se passe-t-il ?</b></font>
<br> <br></font>
</td></tr></table>

VARIATION # 2

Si on modifie, dans <table> du code précédent, les instructions «width=95%» et «align-center», on obtient un tableau ramené à 95 % de la largeur disponible et aligné au centre de la page. La couleur de fond est #B5C1CF.

La maison de production Mitan arrête ses activités
La compagnie a annoncée sa fermeture suite au départ du président avec le coffre-fort. Le parquet de la Bourse se pose des questions:

• Les bénéfices de Mitan étaient-ils réels?
• Le président de Mitan a-t-il bien agi ?

La saga de la compagnie de production Mitan est en train d'éclipser le scandale Enron et secoue les bourses du monde entier.

VARIATION # 3

BORDURE CONTRASTANTE

Cet encart possède une bordure contrastante #F3E7AB et une couleur de fond #FAFAD2. On obtient cet effet en imbriquant deux tables l'une dans l'autre. La première table fixe la largeur de l'encart (width="300") et détermine la largeur de la bordure (cellpadding="2").

Voici le code utilisé:


<table cellpadding="2" cellspacing="0" border="0" width="300"
align="center" bgcolor="#F3E7AB" ><tr><td>
<table cellpadding="5" cellspacing="0" border="0" width="100%" 
bgcolor="#FAFAD2" ><tr><td valign="top">
<b><font size="1" face="Verdana, Geneva, Arial, Helvetica" 
color="#850D07">BORDURE CONTRASTANTE</font></b>
<br><font face="Verdana, Geneva, Arial, Helvetica" size="1">
--------- Le texte ici ---------- <br></font>
</td></tr></table>
</td></tr></table>

FOND À MOTIF
On peut aussi utiliser un fond à motif en remplaçant, dans la seconde table, bgcolor="#FFFFE8"par background="images/graystucco.jpg". Cet encart est à 90% de la largeur disponible et la couleur de la bordure contrastante est #CCCCCC.

8 - ENCARTS - COULEURS DE FONDS

Voici les couleurs de fonds (première ligne) et des bordures contrastantes (deuxième ligne) disponibles pour les encarts de Mitan:

FFF FFF	FAF AD2	F9F A90	FFE 88C	EEE CD2	F4F FF4	F4F 4FF	FFE 4C4	FDF 3FE	EBF DFF	E4E CDC	E2E 6EC
CCC CCC	F3E 7AB	EDD 773	DEB 887	D2D 3B3	A3E 3A3	E4D 2E4	FFB F9F	FFC CCC	B0E 0E6	C9D 3CB	B5C 1CF

Page suivante : Page 3 - Les effets de texte

Vous êtes ici : Mitan > Internet > Les encarts