Membre de ClickFR, Reseau francophone Paie-Par-Click
~~ Faire un calendrier ~~
Faire un calendrier est la même methode que pour faire une horloge , cela ne demande que tres peu de connaissance en graphisme mais un peu plus en HTML, si vous ne savez pas du tout ce que c'est , le tutoriel risque un peu complexe pour vous !
ce tutoriel est assez long et demande de la précision !
Bon courage
1) Il faut tout d'abord "préparer " l'image sur laquelle le calendrier va apparaitre, on ne peut pas utiliser une image tout faite comme un tableau surtout si il est trop foncé , le résultat ne sera pas concluant, le mieux est de préparer un modèle et d'y a jouter l'image que vous voulez dessus, de préference un tube ou une image à fond transparent !!
Je vous offre quelques modèles( les couleurs peuvent être changées avec PSP ), choississez celui que vous voulez, clic droit enregistrer sous
 |
 |
 |
Télecharger les 3 modèles au format PSP
2) Ouvrez Paint Shop Pro et ouvrez un des modèles choisis
Maintenant il va falloir choisir une image pour illustrer le calendrier , je vous en propose quelques unes au choix :
Ouvrez l'image choisie dans Psp, si le fond n'est pas transparent : astuce : ouvrez Animation Shop et ouvrez l'image choisie, faites clic droit sur l'image puis copier
et dans PSP, clic droit coller comme nouvelle image ainsi l'image sera transparente !!
3)
Il faut maintenant coloriser le modèle avec les couleurs de votre
image, la bordure plus foncée que dans le centre du modèle,
avec la pipette 
choisir
des couleurs présentes dans l'image
puis
avec la baguette magique cliquer au centre du modele peindre avec l'outil
idem pour la bordure
4) A présent, vous disposez de votre modèle colorisé et de l'image, a vous de la placer ou vous voulez dans un coin ou en haut du modèle, l'idéal reste à droite ou en haut !!
Pour cela :
Ouvrir
un plan de travail 
de
250 de large et 300 de hauteur
Clic droit sur le modèle choisi et clic droit dans le plan de travail vierge et " coller comme nouveau calque "
Pour placer l'image :
Clic droit dessus puis copier
et clic droit dans le plan de travail et " coller comme nouveau calque "
placer l'image sur le modèle comme ceci par exemple :
Puis il faut applatir notre travail :
Calques/fusionner les calques visibles
il faut recadrer le calendrier avec l'outil recadrer
et enregistrer sous gif
Fichier/exporter sous gif
La première partie est finie !!
Nous allons passer au HTML et donc Dreamweaver ( ou frontpage )
1)Ouvrir votre logiciel et ouvrir une nouvelle page blanche
Fichier/nouveau
Vous avez besoin d'un script HTML que je vous offre en dessous
Coller le script dans votre page dans la partie code html
Vous verrez quelque chose comme cela lorsque vous regardez votre partie création
2)il faut a présent placer l'image dans le calendrier en vous positionnant sur la bordure à droite
comme ceci :
et dans la fenêtre propriétés, allez rechercher l'image du calendrier de tout à l'heure
3)tout le reste est simple mais pointilleux , c'est de l'ajustage afin que les chiffres du calendrier soient bien placés :
il faut travailler avec les tableaux et votre souris, les agrandir , les rendre plus petits, etc afin de bien voir le calendrier , voici mon résulat avant d'avoir ajusté
On ne voit pas entierement le calendrier, il faut donc etirer vers le bas et reduire vers la gauche
et voici aprés :
Ceci étant fait, il va falloir bien placer les chiffres que l'on ne voit pas ici mais on peut les voir dans le navigateur Internet explorer en faisant F12
Mes chiffres ne sont pas bien placés , il faut de la même facon qu'au dessus bouger les tableaux que l'on voit comme ci dessous :
Il faut que le petit carré jaune ( le script en fait ) soit dans notre dessin , voici mon résultat :
Les chiffres étant bien placés, je vous explique ce qui faut changer dans le script afin de mettre vos propres couleurs :
Voici le script, en rouge ce que vous pouvez changer ( ne prenez pas ce script, il ne fonctionnerait pas !)
<table border="0" cellspacing="0"
cellpadding="0" width="187" height="266"
background="votre calendrier.gif"
style="border-collapse: collapse" align="center">
<tr>
<td height="148" width="43">
<td colspan="25" height="148"><br>
</td>
</tr>
<tr>
<td width="43" height="118">
<p></p>
<p><br>
<br>
<br>
<br>
<br>
</td>
<td align="center" valign="top"
width="35" height="118">
<script language="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!--//Begin
monthnames = new Array(
"Janvier",
"Février",
"Mars",
"Avril",
"Mai",
"Juin",
"Juillet",
"Aout",
"Septembre",
"Octobre",
"Novembre",
"Décembre");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<FONT face='tahoma'>");<!--Font Face-->
document.write("<table border=0 " );<!--Border
size-->
document.write("style='font-size : 11px(correspond
a la taille de la police ); color :
#000000( couleur de la police les jours et le mois
en haut );' cellpadding=0 cellspacing=1>");<!--Border
color, font size, cell padding, cellspacing and font color-->
document.write("<tr><td
colspan=7><center>"
+ monthnames[thismonth] + " " + thisyear
+ "</center></td></tr>");
document.write("<tr>");
document.write("<td align=center><font color=#C80074>D</td>");<!--The
color here and below are for each week day-->
document.write("<td align=center><font color=#C80074(correspond
à la couleur des jours) >L</td>");
document.write("<td align=center><font color=#C80074>M</td>")
document.write("<td align=center><font color=#C80074>M</td>");
document.write("<td align=center><font color=#C80074>J</td>");
document.write("<td align=center><font color=#C80074>V</td>");
document.write("<td align=center><font
color=#C80074>S</td>");<!--Last
color chage here-->
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td>-</td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count))
{
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='#C80074'(correspond
a la couleur du jour actuel>");<!--todays
date color-->
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
document.write("</FONT>");
</script>
</td>
<td width="2" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" heig???•???:???:???A ??ht="101"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="1" height="118"></td>
<td width="55" height="118"></td>
</tr>
</table>
et voila c'est terminé !!! N'oubliez pas que le calendrier va lui meme changer de mois , d'année etc ! vous n'avez rien à changer !
Voici mon calendrier final :
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||
Si vous utilisez mes propres modèles ou même si j'ai pu vous aider
dans la création de votre site, cela serait gentil de me linker !
Tous droits réservés , en aucun cas mes tutoriels ne doivent être copiés ou reproduits partiellement sans mon accord, merci