Cours de Its-Clo

C'est fais Smile

Administratrice Nombre de messages : 11442 Age : 32

Je vais aller voir ça, et j'édite mon message après Wink

EDIT : à partir du troisième menu, tu verras que ça ne fonctionne plus. En fait, dans ta page gauche.html, tu as mis en lien les bonnes pages, mais des fois, tu as ajouté un majuscule au début du nom de fichier. Pour ton ordinateur, le fichier "Abricot.html" ou "abricot.html", ce n'est pas la même chose Wink

On va faire comme la dernière fois. Je te change ça sur le serveur, mais après, il ne faut pas que tu oublies de remettre les bonnes pages sur ton ordi. Je te rappelle comment on fait :

tu vas sur Classic ftp. Tu te connectes. Dans la colonne de droite, tu vas sur ton dossier contenant toute tes pages. Puis, dans la colonne de gauche, tu vas sélectionner la page gauche.html, et tu cliques sur la flèche qui va de droite à gauche.

EDIT 2 : c'est fait ! Donc dès que tu auras repris la bonne page gauche.html, on va devoir ajouter un petit bout de code dans la page gauche.html uniquement. Ensuite, on va mettre en place le CSS. C'est en fait un "truc" (tu le verras bien assez vite) qui te permet de mettre en page tes pages (vive le français ^^). Plus précisément, ça te permet de choisir les couleurs de tes polices, les tailles, et bien d'autres choses. Et le truc révolutionnaire de ce CSS, c'est que le jour où tu veux changer ton vert fluo en rose fluo, et bien tu as une petite ligne de code à changer sur une page, et ça change sur tout le site automatiquement !

Voilà c'est fais Smile

Ok bin quand tu veux(peux) alors =P

Administratrice Nombre de messages : 11442 Age : 32

Quand tu cliques sur les liens de ta page gauche.html, tu remarqueras que la page s'ouvre dans la petite colonne de gauche. Le but, c'est que ces pages s'ouvrent dans la grande colonne de droite Wink

Je te poste le code de ta page gauche.html :

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

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

<title>page gauche.html</title>
</head>

<body>
<a href="lesfilms.html">
Les films</a> 
<a href="lesacteurs.html">
Les acteurs</a> 
<a href="lespersonnagesprincipaux.html">
Les personnages principaux</a> 
<a href="lespersonnagessecondaires.html">
Les personnages secondaires</a> 
<a href="videos.html">
Vidéos</a> 
<a href="photos.html">

Photos</a> 

</body>
</html>

Il va falloir ajouter ce bout de code (ci-dessous) à tous tes liens. ATTENTION : tu ne devras faire ça QUE dans la page gauche.html. Dans les autres, c'est inutile Wink

Code:: target="home"

Je te prends un petit bout de la page gauche.html, qui correspond en fait au lien vers la page "les films". Ca te donnera donc :

Code:: <a href="lesfilms.html" target="home">
Les films</a>

Tu vas faire de même pour les autres liens. A faire avec NOTEPAD++.

Voilà

Administratrice Nombre de messages : 11442 Age : 32

Je te mets les explications sur le CSS dès que j'ai un peu de temps, parce que cette semaine, je suis vraiment surchargée.

Okay, pas de soucis Smile

Administratrice Nombre de messages : 11442 Age : 32

Voilà donc l'explication sur le CSS. Ca sert en fait à mettre en forme ton site (couleurs et autres). On fait ça sur une page style.css, et pas dans les pages html. Le but, en fait, c'est que le jour où tu veux changer une couleur, tu as juste besoin de changer dans cette page (css), et non pas dans toutes les pages de ton site.

Prête pour un petit roman Wink

Sache que l'on peut faire ça avec Nvu, mais c'est plus emm****** qu'autre chose ^^ Et c'est très très limité. Donc on va faire ça sur Notepad++.

Exemple de code :

Code:: p{
font-size: 11px;
color : #EEEEEE;
}

Ca marche toujours de la même manière. Il y a le "p", qui signifie en fait le paragraphe (c'est ce que je t'ai demandé de faire attention avant). Puis tu ouvres l'accolade, et tu la refermes. Sans oublier le ; après chaque propirété.

Entre deux, tu mets divers éléments, comme la taille du texte, la couleur, si c'est souligné, surligné...

Donc tu ouvres Notepad++, tu crées une nouvelle page que tu appelles comme tu veux, par exemple : style.css

Et dedans tu vas mettre différents codes, que je te donne. Tu changeras les informations. Tu verras, d'une fois qu'on a compris le truc, c'est simple comme bonjour Smile

Pour le paragraphe :

Code:: p{
font-size: 11px;
color : #EEEEEE;
}

Pour le fond des pages :

Code:: body{
background-color: #000B20;
}

Pour les liens :

Code:: a:link{
color: #FFD591;
}

Pour les liens déja visités :

Code:: a:visited {
color: #FFD591;
}

Et ça, c'est au moment où tu passes la souris sur le lien :

Code:: a:hover {
color: #FFD591;}

Donc il te faut changer les couleurs. Ensuite, si tu veux savoir comment faire d'autres choses, mettre en gras, souligné... tu me demandes. Je t'ai donné les choses de bases, mais il faut savoir qu'il en existe une tonne. Impossible de tous les connaitres.

Pour souligner c'est comment stp ? Smile

Administratrice Nombre de messages : 11442 Age : 32

Voilà la propriété :

Code:: text-decoration:underline;

0kay, finis Smile

Administratrice Nombre de messages : 11442 Age : 32

D'accord. Tu héberges donc la page.

Ensuite, il va falloir qu'on ajoute un bout de code dans les autres pages (toutes). Tu le feras donc dorénavant. Chaque fois que tu créeras une nouvelle page, tu ajouteras ce bout de code.

Code :

Code:: <link href="style.css" type="text/css" rel="stylesheet">

Tu ajoutes ce code dans TOUTES les pages, juste avant la balise </head> (ATTENTION à ne pas confondre avec la balise <head>).

Quand tu as fait ça, tu réhéberges toutes les pages.

C'est fais Smile

Administratrice Nombre de messages : 11442 Age : 32

Je regarde tout ça après. Je vais regarder Bones maintenant ^^ Wink

Sinon, tu peux ouvrir les différentes pages que tu as fait, et commencer à mettre du texte (ATTENTION en haut à gauche de la fenêtre : toujours écrire en "paragraphe").

Je suis de retour dans moins d'une heure.

Euh, je vais voir si j'ai le temps, j'suis pas chez moi alors ^^
Je sais pas si je serais là quand tu reviendras, alors bonne soirée Smile

Administratrice Nombre de messages : 11442 Age : 32

Sinon, pour le CSS, je suis allée voir, et ça joue.

ça joue ? C'est à dire =)
Euh j'ai pas commencer à mettre le texte, vu que j'suis avec des amis, j'passe vite fais ^^

Administratrice Nombre de messages : 11442 Age : 32

C'est à dire qu'on voit les changements avec le CSS.

Ah okay x)
Parce que moi j'ai été sur le site & j'vois pas trop le changement ^^
Bref Smile

Administratrice Nombre de messages : 11442 Age : 32

Réaculatise la page si jamais. Et c'est simplement la couleur du texte par exemple.

Quand tu passes la souris sur les liens aussi, ça change la couleur.

0kay =)

Administratrice Nombre de messages : 11442 Age : 32

Tu veux toujours continuer les cours ?