Cours de session-sky

Ok. Alors je vais t'expliquer tout ça. Quand tu auras compris, tu verras qu'il n'y a pas plus simple que le CSS ^^

Tu sais à quoi ça sert déjà ou pas du tout ?

Ouais ^^ A mettre en forme en faite

Prêt pour un petit roman

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

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.

Oui

On a oublié quelque chose ^^

En fait, il faut qu'on précise, dans nos pages html, qu'il faut que la page aille regarder dans le fichier CSS

Donc pour ça, tu vas ouvrir TOUTES tes pages .html dans Notepad++, et on va ajouter ce bout de code dedans :

Code:

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

Tu dois placer ce bout de code juste avant la balise </head>. (ATTENTION : c'est bien celle avec le / !)

Puis tu réhéberges TOUTES tes pages .html

Ok. Cette fois, on peut voir le réusltat

Donc est-ce que tu as des envies particulières concernant le CSS ^^ ? J'entends par là, des choses que tu as vu sur d'autres sites par exemple, des façons de faire les titres...

Je te promets pas de tout savoir comment faire Comme je te l'ai dit, c'est très très vaste le CSS, impossible de tout connaitre.

Je suis aussi en train de faire du CSS, alors j'ai quelques propriétés sous la main ^^

Oki. Donc la suite, ça consiste à faire les pages

Je te conseille déjà de faire la page portfolio par exemple. Je suppose que tu feras un menu qui amènera vers divers types de créas

Tu sais mettre un lien maintenant

ATTENTION : le target="home" -> il faut le mettre QUE sur la page gauche.html. Pour le reste, tu n'as donc pas besoin de le mettre.

Je t'expliquerai ensuite comment insérer des images.

Tu parles pour le [url]target[/url] ? Si c'est ça, non, tu ne le mets carrément pas.

Au début, on a mis les liens avec Nvu si tu te rappelles. Et par après, on a rajouté le target avec Notepad++.

Maintenant, tu vas faire qu'avec Nvu. Tu n'ajouteras pas le code avec Notepad++.

Tu l'as déjà fait ça. C'était pour mettre le lien dans la page gauche.html

Ce qu'on va faire, c'est que tu mets déjà le texte que tu veux sur la page portfolio.html, et on avisera d'après ce que tu as fait après.

Sur le site aussi c'est foncé.

Tu as mis, dans le css, ça (concernant le body, donc le fond de page) :

Code:

body{
background-color: #000B20;
}

Le #000B20 correspond à un bleu/noir foncé. Tu as dû te tromper en mettant la couleur. Pour changer, tu rouvres la page dans Notepad++, et tu fais les changements.

aok, donc voilà j'ai modifier j'ai mis la couleur grise ^^

http://artbook.olympe-network.com/

C'est beaucoup mieux, effectivement

Je vois que tu as fait la page portfolio donc. Tu as fait exprès de mettre de fois la lettre O à icons ?

Sinon, tu vas donc, maintenant, mettre des liens dessus.

Donc tu dois créer une page qui s'appelle icons.html (ou autre, c'est comme tu veux), et pour les autres.

Puis, dans Nvu, tu ouvres la page portfolio.html. Tu sélectionnes le mots, tu fais Insertion -> Lien : tu vas chercher le nom de la page et OK.

Perfetto !

Alors maintenant, je suppose que tu vas mettre des images (comme des icons par exemple).

Je t'explique donc comment mettre des images avec Nvu.

Tout d'abord, tu vas créer un dossier images DANS ton dossier où tu as toutes tes pages.

Ensuite, sur Nvu, tu ouvres ta page. Tu mets le curseur de la souris à l'endroit où tu veux l'image, puis tu fais Insertion -> Image. Une fenêtre s'ouvre. Tu restes sur le premier onglet en haut à gauche. Puis tu vas chercher ton image (cf. petit dossier jaune à gauche)

Tu vas chercher l'image -> ouvrir. Tu auras donc quelque chose du style écrit : images/img.png (le img.png, ça dépendra du nom des tes images ). Tu coches "ne pas utilisez de texte alternatif", puis tu fais OK.

Les images ne s'affichent pas. Je suppose que tu as fait la même erreur que la plupart de mes autres élèves Ca parait vraiment con quand on sait ^^

Est-ce que tu as hébergés les images ?

Dans Classic ftp, tu te connectes. Dans la colonne de droite, tu fais clique-droit -> nouveau dossier (en anglais, new folder il me semble, mais pas sûre). Tu lui donne le nom images. Puis dans la colonne de gauche, tu vas dans ton dossier images, et tu les transfères dans le dossier du même nom (dans la colonne de gauche).

EDIT : tu peux continuer de mettre des images dans les autres pages

Oui. Tu ouvres la page sur laquelle tu veux mettre ton image. Si tu veux mettre des icons, tu ouvres icons.html